/* Fox Auth — section & layout styles (mobile-first) */

/* Skip link */
.skip-link{position:absolute;left:-999px;top:0;z-index:100;background:var(--midnight);color:var(--belly);
  padding:10px 16px;border-radius:0 0 var(--r-btn) 0;font-weight:600}
.skip-link:focus{left:0;text-decoration:none}

/* Scout sizes */
.scout--xs{width:16px;height:16px}
.scout--sm{width:26px;height:26px}
.scout--lg{width:88px;height:88px}

/* ============ S1 · Nav ============ */
.nav{position:sticky;top:0;z-index:var(--z-nav);background:rgba(255,255,255,.7);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid transparent;transition:border-color .2s,padding .2s,background .2s}
.nav.is-scrolled{border-bottom-color:var(--glass-hairline);background:rgba(255,255,255,.85)}
.nav__inner{display:flex;align-items:center;gap:var(--s3);min-height:64px}
.nav.is-scrolled .nav__inner{min-height:56px}
.nav__links{display:none;gap:var(--s3);margin-left:var(--s2)}
.nav__links a{color:var(--midnight);font-weight:500;font-size:.95rem;padding:6px 4px}
.nav__links a:hover{color:var(--ember);text-decoration:none}
.nav__actions{display:none;align-items:center;gap:var(--s2);margin-left:auto}
.nav__toggle{margin-left:auto;display:inline-flex;padding:10px;color:var(--midnight)}
.nav__toggle .ico-line{width:24px;height:24px}
.nav__mobile{display:flex;flex-direction:column;gap:2px;padding:var(--s2) var(--gutter) var(--s3)}
.nav__mobile[hidden]{display:none}   /* respect the hidden attribute (display:flex would override it) */
.nav__mobile a{padding:12px 8px;color:var(--midnight);font-weight:500;border-radius:8px}
.nav__mobile a:hover{background:var(--apricot);text-decoration:none}
.nav__mobile .btn{margin-top:var(--s1);color:var(--midnight)}
@media (min-width:900px){
  .nav__links{display:flex}
  .nav__actions{display:flex}
  .nav__toggle{display:none}
  .nav__mobile{display:none !important}
}

/* ============ S2 · Hero ============ */
.hero{padding-block:var(--s6) var(--s7)}
.hero__inner{display:grid;gap:var(--s5);align-items:center}
.hero h1{margin-bottom:var(--s3)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.hero__fine{margin-top:var(--s2);font-size:var(--fs-small)}
@media (min-width:900px){
  .hero__inner{grid-template-columns:1.05fr 1fr;gap:var(--s6)}
  .hero{padding-block:var(--s7) var(--s8)}
}

/* Hero scene (device composite) */
.hero__visual{display:flex;justify-content:center}
.scene{position:relative;width:100%;max-width:440px}
.scene__bar,.browser__bar{display:flex;align-items:center;gap:7px;padding:0 0 var(--s2)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--line)}
.scene__title,.browser__url{font-size:var(--fs-small);color:var(--slate);margin-left:auto}
.scene__vault{padding:var(--s3);display:grid;gap:var(--s2);box-shadow:var(--shadow-lg)}
.scene__menubar{padding:var(--s2);display:grid;gap:var(--s2);box-shadow:var(--shadow-lg);
  margin-top:calc(var(--s4) * -1);width:84%;margin-left:auto;position:relative}
.scene__menubar-top{display:flex;align-items:center;gap:8px}
.chip--mini{max-width:none;padding:12px 14px}
.chip--mini .chip__code{font-size:20px}
@media (min-width:900px){
  .scene__menubar{position:absolute;right:-22px;bottom:-30px;width:74%;margin:0}
}
@media (max-width:560px){
  .scene__vault{display:none}                 /* mobile: collapse to one native moment */
  .scene__menubar{margin:0;width:100%}
}

/* ============ S3 · Trust ============ */
.trust{padding-block:var(--s4);border-block:1px solid var(--glass-hairline);background:transparent}
.trust__line{text-align:center;color:var(--slate);font-size:1.05rem;max-width:60ch;margin-inline:auto}

/* ============ S4 · Problem ============ */
.pains{display:grid;gap:2px;margin-top:var(--s3)}
.pain{display:flex;align-items:center;gap:12px;padding:9px 0;font-weight:500}
.pain .ico-line{color:var(--fox);width:20px;height:20px}

/* ============ S5 · How it works ============ */
.steps{display:grid;gap:var(--s3);margin-top:var(--s5);counter-reset:step}
.step{padding:var(--s4)}
.step__n{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  background:var(--apricot);color:var(--ember);font-family:var(--sans);font-weight:600;margin-bottom:var(--s2)}
.step h3{margin-bottom:6px}
.step p{color:var(--slate)}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}

/* ============ S6 · Feature bands ============ */
.bands{display:grid;gap:var(--s7)}
.band{display:grid;gap:var(--s4);align-items:center}
.band__copy h2{margin:6px 0 var(--s2)}
.band__copy .btn--tertiary{margin-top:var(--s2);padding-left:0}
.band__visual{display:flex;justify-content:center}
.band__visual .card{width:100%;max-width:420px;padding:var(--s3)}
@media (min-width:860px){
  .band{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .band--reverse .band__copy{order:2}
  .band--reverse .band__visual{order:1}
}

/* Feature mock visuals */
.mock-vault{display:grid;gap:var(--s2)}
.mock-share,.mock-audit,.mock-import,.mock-integrations,.mock-separation{display:grid;gap:var(--s2)}
.mock-row{display:flex;align-items:center;gap:var(--s2);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--belly);font-size:.95rem}
.mock-row .tag{margin-left:auto}
.avatar--sm{width:30px;height:30px;font-size:.8rem}
.mock-log{padding:10px 12px;border-left:3px solid var(--apricot);background:var(--belly);border-radius:0 8px 8px 0;font-size:.95rem}
.mock-log__who{font-weight:600}
.mock-pill{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--belly);font-weight:500;font-size:.95rem}
.mock-pill .ico-line{color:var(--fox);width:20px;height:20px}
.mock-pill--out{border-style:dashed}
.mock-msg{display:flex;gap:12px;align-items:center}
.mock-msg .chip__code{font-family:var(--mono);color:var(--midnight)}
.mock-separation{place-items:center;gap:var(--s3);padding-block:var(--s2)}
.mock-split{display:flex;gap:var(--s2)}
.mock-split__label{padding:8px 14px;border-radius:var(--r-pill);background:var(--belly);border:1px solid var(--line);font-weight:600;font-size:.9rem;color:var(--slate)}
.mock-split__label--fox{background:var(--apricot);border-color:transparent;color:var(--ember)}
.mock-lock{width:40px;height:40px;color:var(--fox)}

/* ============ S7 · Native apps spotlight ============ */
.spotlight{background:var(--midnight);color:var(--belly);padding-block:var(--s7)}
.spotlight h2{color:var(--belly)}
.eyebrow--light{color:#C9A99A}
.lead--light{color:#B9BBC4}
.spotlight__demos{display:grid;gap:var(--s4);margin:var(--s6) 0;align-items:center;justify-items:center}
@media (min-width:860px){.spotlight__demos{grid-template-columns:1fr 1fr;gap:var(--s5);max-width:980px;margin-inline:auto}}

/* menu-bar popover */
.popover{background:var(--cloud);color:var(--midnight);border-radius:14px;box-shadow:var(--shadow-lg);
  padding:var(--s2);width:100%;max-width:300px;display:grid;gap:10px}
.popover__head{display:flex;align-items:center;gap:8px;padding:4px 4px 2px}
.popover__label{font-size:var(--fs-small);color:var(--slate);margin-left:auto}
.popover__foot{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);color:var(--slate);padding:2px 4px}
.popover__foot .ico-line{width:16px;height:16px;color:var(--fox)}

/* chrome autofill */
.browser{background:var(--cloud);color:var(--midnight);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden;width:100%;max-width:420px}
.browser__bar{padding:12px 14px;border-bottom:1px solid var(--line);margin:0}
.browser__url{margin-left:8px}
.browser__body{padding:var(--s4)}
.browser__h{font-weight:600;margin-bottom:10px}
.browser__field{display:flex;align-items:center;gap:10px;border:1.5px solid var(--fox);border-radius:10px;padding:12px 14px;box-shadow:var(--focus)}
.browser__digits{font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.autofill-pill{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-small);font-weight:600;color:var(--ember);background:var(--apricot);padding:5px 10px;border-radius:var(--r-pill)}
.browser__btn{margin-top:var(--s3);background:var(--fox);color:var(--midnight);font-family:var(--sans);font-weight:600;text-align:center;padding:12px;border-radius:var(--r-btn)}
.spotlight__cta{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center}

/* ============ S8 · Social proof ============ */
.social .quote{max-width:780px;margin-inline:auto;text-align:center}
.quote blockquote{font-family:var(--sans);font-weight:500;font-size:clamp(1.3rem,2.2vw + 1rem,1.9rem);line-height:1.35;letter-spacing:-.01em}
.quote__by{display:inline-flex;align-items:center;gap:12px;margin-top:var(--s4);text-align:left}
.quote__name{display:block;font-weight:600}
.quote__role{display:block;font-size:var(--fs-small)}

/* ============ S9 · Reassurance ============ */
.reassure{background:var(--cloud);border-block:1px solid var(--line)}
.proofs{display:grid;gap:var(--s2);margin:var(--s5) auto 0;max-width:920px}
.proofs li{display:flex;align-items:center;gap:12px;justify-content:center;padding:12px;color:var(--slate);font-weight:500}
.proofs .ico-line{color:var(--green);width:22px;height:22px}
@media (min-width:760px){.proofs{grid-template-columns:repeat(5,1fr)}.proofs li{flex-direction:column;text-align:center;gap:10px}}
.reassure__roadmap{text-align:center;margin-top:var(--s4);color:var(--slate);display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.faq{max-width:720px;margin:var(--s5) auto 0;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--r-glass);box-shadow:var(--glass-shadow);padding:var(--s3) var(--s4)}
.faq summary{font-family:var(--sans);font-weight:600;font-size:1.1rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--fox);font-size:1.5rem;line-height:1}
.faq[open] summary::after{content:"–"}
.faq p{margin-top:var(--s2);color:var(--slate)}

/* ============ S10 · Pricing ============ */
.tiers{display:grid;gap:var(--s3);margin-top:var(--s5);margin-bottom:var(--s4)}
.tier{padding:var(--s4);text-align:center;position:relative;display:flex;flex-direction:column;gap:6px}
.tier__name{font-size:1.15rem}
.tier__price{font-family:var(--sans);font-weight:600;font-size:2.1rem;letter-spacing:-.02em}
.tier__price span{font-size:1rem;font-weight:500;color:var(--slate)}
.tier__seats{margin-bottom:var(--s2)}
.tier .btn{margin-top:auto}
.tier--popular{border-color:var(--fox);box-shadow:0 0 0 1px var(--fox),var(--shadow)}
@media (min-width:760px){.tiers{grid-template-columns:repeat(4,1fr)}.tier--popular{transform:scale(1.04)}}

/* ============ S11 · Final CTA ============ */
.final{background:transparent;padding-block:var(--s7)}
.final__inner{display:grid;gap:var(--s4);justify-items:center;text-align:center;max-width:900px;margin-inline:auto}
.final__copy{display:grid;gap:var(--s3);justify-items:center;max-width:460px}
@media (min-width:760px){
  .final__inner{grid-template-columns:minmax(0,320px) 1fr;gap:var(--s6);align-items:center;text-align:left}
  .final__copy{justify-items:start;max-width:none}
}
.final .scout--lg .fox{animation-duration:3s}

/* ============ S12 · Footer ============ */
.footer{background:#fff;border-top:1px solid var(--glass-hairline);padding-block:var(--s6) var(--s5)}
.footer__inner{display:grid;gap:var(--s4)}
.footer__brand{max-width:300px}
.footer__brand .logo{margin-bottom:10px}
.footer__col{display:flex;flex-direction:column;gap:8px}
.footer__col h4{font-family:var(--sans);font-size:.95rem;margin-bottom:4px}
.footer__col a{color:var(--slate);font-size:.92rem}
.footer__col a:hover{color:var(--ember)}
@media (min-width:760px){.footer__inner{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}}

/* ============ Raster Scout poses (nano-banana) ============ */
.scout-img{display:block;height:auto}
.scout-img--final{width:172px;margin-bottom:var(--s1);filter:drop-shadow(0 14px 22px rgba(23,24,29,.16))}
/* Scout waving in the hero scene corner */
.scene__scout{position:absolute;left:-42px;bottom:-40px;width:116px;z-index:3;
  filter:drop-shadow(0 12px 18px rgba(23,24,29,.16))}
@media (max-width:560px){.scene__scout{display:none}}   /* avoid overlapping the menu-bar card code on mobile */
/* Guard pose in the security-layer feature band */
.mock-guard{display:grid;justify-items:center;gap:var(--s3);padding:var(--s4)}
.mock-guard .scout-img{width:188px}
.mock-guard .mock-split{display:flex;gap:var(--s2)}

/* ============ Revision (round 2): logo, images, vault window, problem ============ */
.logo-img{height:34px;width:auto;display:block}
.logo-img--footer{height:42px}

/* Hero image (3D fox) — white bg blends into the page */
.hero__img{width:100%;max-width:480px;height:auto;display:block;margin-inline:auto}

/* Vault dashboard "browser window" */
.vault .window{padding:0;overflow:hidden;max-width:1120px;margin-inline:auto;box-shadow:var(--glass-shadow-lg)}
.window__bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--glass-hairline);background:rgba(255,255,255,.55)}
.window__dot{width:11px;height:11px;border-radius:50%;background:var(--line)}
.window__dot:nth-child(1){background:#FF5F57}
.window__dot:nth-child(2){background:#FEBC2E}
.window__dot:nth-child(3){background:#28C840}
.window__url{margin-left:10px;font-size:var(--fs-small);color:var(--slate);background:rgba(23,24,29,.05);padding:4px 14px;border-radius:var(--r-pill)}
.window__frame{background:#fff;line-height:0}
.window__frame iframe{display:block;width:100%;height:780px;border:0}
@media (max-width:640px){.window__frame iframe{height:620px}}

/* Problem: glass copy card on the left, fox image as section background (fox sits right) */
.problem{position:relative;background-image:url(../assets/img/problem.jpg);background-size:cover;background-position:right center;background-repeat:no-repeat}
.problem__inner{display:grid;gap:var(--s4);align-items:center;min-height:480px}
.problem__card{padding:var(--s5);max-width:560px;background:var(--glass-bg-strong)}
@media (min-width:860px){.problem__inner{grid-template-columns:minmax(0,560px) 1fr}}
@media (max-width:560px){.problem{background-position:78% center}.problem__card{padding:var(--s4)}}

/* Feature-band image (separate-2FA) */
.band__img{width:100%;max-width:400px;height:auto;display:block;margin-inline:auto;border-radius:var(--r-glass)}

/* Wedge demo images (on the dark band) */
.demo-img{width:100%;max-width:440px;height:auto;display:block;margin-inline:auto;border-radius:18px;box-shadow:0 26px 64px rgba(0,0,0,.42)}

/* Final CTA image (3D fox + shield) */
.final__img{width:300px;max-width:100%;height:auto;display:block;margin:0 auto}

/* ============ Pricing — Daito-style comparison table ============ */
.pricing .sec-head{margin-bottom:var(--s4)}

/* Monthly/Yearly toggle */
.billing{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:var(--s5)}
.seg{display:inline-flex;background:var(--glass-bg-strong);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:var(--r-pill);padding:4px}
.seg__btn{font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--slate);padding:8px 20px;border-radius:var(--r-pill);min-height:40px;transition:background .15s,color .15s}
.seg__btn.is-active{background:var(--midnight);color:var(--belly)}
.billing__note{font-size:var(--fs-small)}

/* Table shell */
.ptable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--glass-hairline);border-radius:var(--r-glass);box-shadow:var(--glass-shadow);background:#fff}
.ptable{width:100%;border-collapse:collapse;min-width:760px;font-size:.95rem}
.ptable th,.ptable td{text-align:center;padding:13px 16px;border-bottom:1px solid var(--glass-hairline)}
.ptable thead th{font-family:var(--sans);font-size:1.15rem;font-weight:600;border-bottom:0;vertical-align:bottom;padding-top:18px}
.ptable tbody th[scope=row]{text-align:left;font-weight:500;color:var(--midnight);width:34%;min-width:240px}
/* sticky feature-label column while scrolling on mobile */
.ptable tbody th[scope=row],.ptable__corner{position:sticky;left:0;background:#fff;z-index:1}

/* group bands */
.pt-group th{background:var(--belly);font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);text-align:left;padding:9px 16px}

/* "Most popular" = 4th column */
.ptable tr > *:nth-child(4){background:linear-gradient(180deg, rgba(255,107,53,.07), rgba(255,107,53,.025))}
.ptable thead th:nth-child(4){box-shadow:inset 0 3px 0 var(--fox);border-radius:var(--r-btn) var(--r-btn) 0 0}

/* yes / no cells */
.ptable td.y::before{content:"";display:inline-block;width:21px;height:21px;vertical-align:middle;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2318B26B'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206%209%2017l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.ptable td.n::before{content:"—";color:#B9BCC4;font-weight:600}

/* price row */
.pt-prices td{vertical-align:top;padding-top:var(--s3)}
.pt-badge{display:inline-block;margin-bottom:10px;background:var(--grad);color:#fff}
.pt-price{display:flex;align-items:baseline;justify-content:center;gap:2px}
.pt-amt{font-family:var(--sans);font-weight:600;font-size:1.7rem;letter-spacing:-.02em}
.pt-per{font-size:.85rem;color:var(--slate)}
.pt-bill{font-size:var(--fs-small);color:var(--slate);margin-top:4px}
.pt-bill s{opacity:.55}
.pt-bill b{color:var(--midnight)}
.pt-desc{font-size:var(--fs-small);color:var(--slate);margin:10px 0 14px;min-height:2.6em}
.pt-prices .btn{font-size:.9rem}
/* toggle visibility */
.pricing[data-billing="yearly"] .pt-amt .m,.pricing[data-billing="yearly"] .pt-bill .m{display:none}
.pricing[data-billing="monthly"] .pt-amt .y,.pricing[data-billing="monthly"] .pt-bill .y{display:none}
.pt-vat{margin-top:var(--s3);font-size:var(--fs-small)}

/* Included in all plans */
.included{margin-top:var(--s7)}
.included .lead{margin:var(--s1) auto var(--s5)}
.included__grid{display:grid;gap:var(--s3);grid-template-columns:1fr}
.included__item{display:flex;gap:12px;align-items:flex-start;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:var(--r-glass);padding:var(--s3)}
.included__item > svg{width:24px;height:24px;color:var(--fox);flex:0 0 auto;margin-top:2px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.included__item b{font-family:var(--sans);font-weight:600;display:block;margin-bottom:2px}
.included__item p{font-size:var(--fs-small);color:var(--slate)}
@media (min-width:680px){.included__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.included__grid{grid-template-columns:repeat(4,1fr)}}