/* ============================================================================
   STAFFIVA — Public landing / marketing stylesheet.
   Self-contained: does NOT depend on site.css or bootstrap. Tokens mirror the
   in-app dark-glass system (staffiva-dashboard-v2.css). Fonts fall back to
   system when Manrope/Inter are absent — the app loads no web-font CDN, so
   neither does this page.
   ============================================================================ */
:root{
  /* purple ramp */
  --purple-900:#25005a; --purple-700:#6d30a7; --purple-600:#7e3af2;
  --purple-500:#8b4ff5; --purple-400:#b97bff; --purple-300:#d2bbff; --purple-200:#e2c3ff;
  --primary:#9a63f5; --primary-hover:var(--purple-500); --primary-accent:var(--purple-300);
  --primary-glow:var(--purple-400); --on-primary:var(--purple-900); --primary-soft:rgba(126,58,242,.15);
  /* surfaces */
  --surface-base:#0f0f14; --surface-lowest:#0e0c1a; --surface:#141121; --surface-low:#1c1929;
  --surface-card:#1c1c25; --surface-container:#221f30; --surface-high:#2a2638;
  --surface-highest:#322e40; --surface-bright:#3a3748; --surface-section:#16161d;
  /* text */
  --text-primary:#f5f5f7; --text-on-surface:#e6dff6; --text-secondary:#b3b3c0;
  --text-on-variant:#ccc3d8; --text-muted:#84848f;
  /* borders */
  --border:#2a2a35; --divider:#23232d; --outline-variant:#4a4455;
  --ghost-border:color-mix(in srgb, var(--outline-variant) 15%, transparent);
  --ghost-border-strong:color-mix(in srgb, var(--outline-variant) 30%, transparent);
  /* state */
  --success:#3cddc7; --success-soft:color-mix(in srgb, var(--success) 10%, transparent);
  --warning:#f2c94c; --warning-soft:color-mix(in srgb, var(--warning) 12%, transparent);
  --error:#ff8d8c; --error-strong:#e24b4a; --error-soft:color-mix(in srgb, var(--error) 8%, transparent);
  /* gradients + glows */
  --gradient-primary:linear-gradient(135deg, var(--purple-300), var(--purple-600));
  /* Interactive/label fill: stops kept light enough that --on-primary (dark)
     text clears WCAG AA (>=4.5:1) across the WHOLE gradient — the vivid
     --gradient-primary dark stop (#7e3af2) drops to ~3.1:1 under dark text. */
  --gradient-button:linear-gradient(135deg, var(--purple-300), var(--purple-400));
  --gradient-text:linear-gradient(90deg, rgba(109,48,167,.72), var(--purple-400));
  --page-wash:
    radial-gradient(circle at top left, rgba(126,58,242,.22), transparent 30%),
    linear-gradient(180deg,#13131b 0%, var(--surface-base) 22%, #101017 100%);
  --shadow-ambient:0 24px 48px rgba(14,12,26,.72);
  --shadow-card:0 24px 60px rgba(0,0,0,.28);
  --shadow-card-hover:0 18px 45px rgba(0,0,0,.32), 0 0 28px rgba(126,58,242,.12);
  --shadow-button:0 .85rem 2rem rgba(126,58,242,.26);
  --shadow-button-hover:0 1rem 2.4rem rgba(126,58,242,.34);
  --glow-soft:0 0 28px rgba(185,123,255,.20);
  /* radii */
  --radius-pill:999px; --radius-sm:.875rem; --radius-md:1.125rem; --radius-input:1rem;
  --radius-lg:1.5rem; --radius-xl:1.75rem;
  /* type */
  --font-display:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tracking-tight:-0.02em; --tracking-label:0.05em;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--surface-base);
  color:var(--text-secondary); font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
/* The page wash lives on a fixed underlay, NOT on body with background-attachment:fixed:
   iOS Safari sizes a fixed body background against the full DOCUMENT, so the top-left
   radial ("transparent 30%") ballooned across the whole first screen on iPhone — the
   live site rendered a much lighter purple than desktop. position:fixed paints
   identically in Blink and WebKit. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--surface-base); background-image:var(--page-wash);
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--text-primary); letter-spacing:var(--tracking-tight); margin:0;}
p{margin:0;}
a{color:var(--primary); text-decoration:none;}
img{max-width:100%;}
:focus-visible{outline:2px solid var(--primary-glow); outline-offset:2px;}
::selection{background:rgba(126,58,242,.35); color:#fff;}

.wrap{max-width:1160px; margin:0 auto; padding:0 24px;}
.grad-text{background:var(--gradient-primary); -webkit-background-clip:text; background-clip:text; color:transparent;}
.kicker{font-family:var(--font-body); font-weight:700; font-size:.78rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--purple-300); margin:0 0 14px;}
.eyebrow{font-size:.75rem; font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-muted);}
.muted{color:var(--text-muted);}
.lead{font-size:1.14rem; color:var(--text-secondary); line-height:1.6;}

/* shared status dots (used by the product-preview mocks) */
.dot{width:7px; height:7px; border-radius:50%; box-shadow:0 0 8px currentColor; flex:0 0 auto;}
.dot-live{color:var(--success); background:var(--success); animation:pulse 1.8s ease-in-out infinite;}
.dot-accent{color:var(--purple-400); background:var(--purple-400);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ---- BUTTONS ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; border:0;
  font-family:var(--font-display); font-weight:700; letter-spacing:var(--tracking-tight);
  border-radius:var(--radius-lg); padding:14px 26px; font-size:15px; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; white-space:nowrap;}
.btn-primary{background:var(--gradient-button); color:var(--on-primary); box-shadow:var(--shadow-button);}
.btn-primary:hover{transform:translateY(-1px); box-shadow:var(--shadow-button-hover); color:var(--on-primary);}
.btn-ghost{background:color-mix(in srgb, var(--surface-high) 55%, transparent); color:var(--text-on-surface);
  border:1px solid var(--ghost-border-strong);}
.btn-ghost:hover{background:var(--surface-high); color:#fff;}
.btn-sm{padding:10px 18px; font-size:14px;}

/* ---- NAV ---- */
.nav{position:sticky; top:0; z-index:50; transition:background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
  border-bottom:1px solid transparent;}
.nav.scrolled{background:color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--ghost-border);}
/* Content-first pages (legal, account, beta wall) have no hero, so the sticky nav stays
   shaded at all times — otherwise page text scrolls under the transparent bar. Matches
   the .scrolled look. Opt in with ViewData["BodyClass"] on the view. */
body.page-legal .nav,
body.page-auth .nav,
body.page-beta .nav{background:color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--ghost-border);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;
  font-size:20px; color:var(--text-primary); letter-spacing:-0.02em;}
.brand-mark{width:30px; height:30px; border-radius:9px; background:var(--gradient-primary);
  display:grid; place-items:center; color:var(--on-primary); font-weight:800; font-size:16px; box-shadow:var(--glow-soft);}
.nav-links{display:flex; align-items:center; gap:26px;}
.nav-links a.navlink{color:var(--text-on-variant); font-size:14px; font-weight:500;}
.nav-links a.navlink:hover{color:#fff;}
.nav-cta{display:flex; align-items:center; gap:12px;}
.brand-img{height:28px; width:auto; display:block;}
.foot-brand .brand-img{height:25px;}
.nav-login{color:var(--text-on-variant); font-size:14px; font-weight:600;}
.nav-login:hover{color:#fff;}
/* Mobile menu button — hidden on desktop and until JS un-hides it (see _PublicNav). */
.navlink-mobile{display:none;}
.nav-toggle{display:none; align-items:center; justify-content:center; width:40px; height:40px; padding:0;
  background:color-mix(in srgb, var(--surface-high) 55%, transparent); border:1px solid var(--ghost-border-strong);
  border-radius:var(--radius-sm); color:var(--text-on-surface); cursor:pointer;}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after{display:block; width:18px; height:2px;
  border-radius:2px; background:currentColor; transition:transform .2s ease, background .2s ease;}
.nav-toggle-bars{position:relative;}
.nav-toggle-bars::before{content:""; position:absolute; top:-6px; left:0;}
.nav-toggle-bars::after{content:""; position:absolute; top:6px; left:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg);}

/* ---- SECTION SHELL ---- */
section{position:relative;}
.sec{padding:88px 0;}
.sec-tint{background:color-mix(in srgb, var(--surface-section) 45%, transparent);
  border-top:1px solid var(--ghost-border); border-bottom:1px solid var(--ghost-border);}
.sec-head{max-width:720px; margin:0 auto 48px; text-align:center;}
.sec-head h2{font-size:clamp(1.75rem,3.4vw,2.6rem); line-height:1.08;}
.sec-head p{margin:16px 0 0; font-size:1.1rem;}

/* ---- HERO ---- */
.hero{padding:52px 0 64px;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.5rem); line-height:1.02; margin:0 0 20px;}
.hero .lead{max-width:520px; margin-bottom:26px;}
.hero-badges{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px;}
.pill{display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:var(--radius-pill);
  font-size:12.5px; font-weight:600; background:color-mix(in srgb, var(--surface-high) 50%, transparent);
  border:1px solid var(--ghost-border); color:var(--text-on-variant);}
.pill .dot{background:var(--success); box-shadow:0 0 8px var(--success);}

/* audit input form */
.audit-form{display:flex; gap:10px; background:color-mix(in srgb, var(--surface-container) 78%, transparent);
  border:1px solid var(--ghost-border-strong); border-radius:var(--radius-lg); padding:9px; max-width:540px;
  box-shadow:var(--shadow-card);}
.audit-form .prefix{display:flex; align-items:center; padding:0 4px 0 14px; color:var(--text-muted); font-size:14px; font-weight:600;}
/* Address-bar-style site chip: a framed slot that holds a muted globe until the
   typed domain resolves, then crossfades to the site's favicon. The frame keeps
   light-colored favicons from glaring on the dark field. */
.audit-form .site-icon{width:30px; height:30px; flex:none; align-self:center; display:grid; place-items:center; position:relative;
  margin-left:6px; border-radius:9px; background:color-mix(in srgb, var(--surface-card) 85%, white 4%);
  border:1px solid var(--ghost-border);}
.audit-form .site-icon .globe{width:15px; height:15px; color:var(--text-muted); opacity:.75; transition:opacity .2s ease;}
.audit-form .site-icon.has-favicon .globe{opacity:0;}
.audit-form .site-favicon{position:absolute; inset:0; margin:auto; width:16px; height:16px; border-radius:4px;
  opacity:0; transform:scale(.8); transition:opacity .25s ease, transform .25s ease;}
.audit-form .site-favicon.is-visible{opacity:1; transform:scale(1);}
.audit-form input[type=text]{flex:1; min-width:0; background:transparent; border:0; outline:none;
  color:var(--text-primary); font-family:var(--font-body); font-size:16px; padding:12px 6px;}
.audit-form input::placeholder{color:var(--text-muted);}
.form-note{margin:14px 0 0; font-size:13px; color:var(--text-muted); display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center;}
.form-note b{color:var(--text-on-variant); font-weight:600;}
.form-note .chk{color:var(--success);}
.see-how{display:inline-flex; align-items:center; gap:8px; margin-top:22px; color:var(--text-on-variant); font-weight:600; font-size:14px;}
.see-how:hover{color:#fff;}
.see-how .play{width:26px; height:26px; border-radius:50%; background:color-mix(in srgb, var(--purple-600) 26%, transparent);
  border:1px solid var(--ghost-border-strong); display:grid; place-items:center; color:var(--purple-200); font-size:10px;}

/* ============================================================================
   GRAFT A — DOM product-preview dashboard collage (browser chrome, greeting,
   stat cards, agent row, draft card + floating sparkline). Ported from the
   continuity direction. Everything is DOM; no screenshots.
   ============================================================================ */
.glass{border-radius:var(--radius-lg);
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface-high) 24%, var(--surface-low)), var(--surface-low));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px var(--ghost-border), var(--shadow-ambient);}
.collage{position:relative; min-height:430px; perspective:1600px;}
.preview-tag{position:absolute; top:-10px; right:6px; z-index:6; font-size:.66rem; letter-spacing:.09em;
  text-transform:uppercase; font-weight:700; color:var(--text-muted);
  background:color-mix(in srgb, var(--surface-lowest) 82%, transparent); padding:5px 10px; border-radius:var(--radius-pill);
  box-shadow:inset 0 0 0 1px var(--ghost-border);}
.mock{position:absolute; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-card), 0 0 40px rgba(126,58,242,.14);}
.mock-main{inset:16px 0 0 0; left:5%; right:-2%; transform:rotateY(-9deg) rotateX(3deg) rotate(1deg);
  transform-origin:center; background:linear-gradient(180deg, var(--surface-low), var(--surface));
  box-shadow:var(--shadow-card), 0 0 46px rgba(126,58,242,.16), inset 0 0 0 1px var(--ghost-border);}
.mock-chrome{display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid var(--ghost-border);
  background:color-mix(in srgb, var(--surface) 70%, transparent);}
.mock-chrome i{width:9px; height:9px; border-radius:50%; background:var(--surface-bright); display:block;}
.mock-chrome .tt{margin-left:8px; font-size:.72rem; color:var(--text-muted); font-weight:600;}
.mock-body{padding:16px;}
.mock-greet{font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--text-on-surface); margin-bottom:3px;}
.mock-greet-sub{font-size:.74rem; color:var(--text-muted); margin-bottom:14px;}
.mock-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:14px;}
.mtile{border-radius:var(--radius-md); padding:12px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface-high) 55%, transparent), color-mix(in srgb, var(--surface-high) 24%, transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px var(--ghost-border);}
.mtile .v{font-family:var(--font-display); font-weight:700; font-size:1.35rem; color:var(--text-on-surface); line-height:1; display:flex; align-items:center; gap:5px;}
.mtile .l{font-size:.66rem; color:var(--text-on-variant); margin-top:7px; font-weight:500;}
.mock-agent{display:flex; gap:11px; align-items:flex-start; border-radius:var(--radius-md); padding:12px;
  background:color-mix(in srgb, var(--surface-high) 30%, transparent); box-shadow:inset 0 0 0 1px var(--ghost-border); margin-bottom:9px;}
.mock-av{position:relative; width:36px; height:36px; border-radius:11px; flex:0 0 auto; display:flex; align-items:center;
  justify-content:center; font-size:17px; background:var(--surface-highest); box-shadow:inset 0 0 0 1px var(--ghost-border);}
.mock-av .wd{position:absolute; bottom:-2px; right:-2px; width:10px; height:10px; border-radius:50%;
  background:var(--success); border:2px solid var(--surface-low); box-shadow:0 0 8px var(--success); animation:pulse 1.8s ease-in-out infinite;}
.mock-agent-main{flex:1; min-width:0;}
.mock-agent-row{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.mock-agent-name{font-family:var(--font-display); font-weight:600; font-size:.86rem; color:var(--text-on-surface);}
.mstate{font-size:.6rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border-radius:var(--radius-pill);
  padding:3px 8px; color:var(--success); background:var(--success-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--success) 22%, transparent);}
.mock-agent-micro{display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--text-on-variant); margin-top:6px;}
.mock-draft{border-radius:var(--radius-md); background:color-mix(in srgb, var(--surface-high) 32%, transparent);
  box-shadow:inset 0 0 0 1px var(--ghost-border); padding:12px 13px;}
.mock-draft-head{display:flex; align-items:center; gap:8px; margin-bottom:7px;}
.mchip{display:inline-flex; align-items:center; gap:5px; border-radius:var(--radius-pill); padding:3px 9px 3px 6px;
  font-size:.66rem; font-weight:700; color:var(--text-on-surface);
  background:color-mix(in srgb, var(--surface-highest) 70%, transparent); box-shadow:inset 0 0 0 1px var(--ghost-border);}
.mock-draft-title{font-family:var(--font-display); font-weight:600; font-size:.8rem; color:var(--text-on-surface); margin-bottom:8px;}
.mock-draft-actions{display:flex; gap:6px;}
.mbtn{font-size:.66rem; font-weight:700; font-family:var(--font-display); border-radius:var(--radius-pill); padding:5px 12px;}
.mbtn-p{background:var(--gradient-button); color:var(--on-primary);}
.mbtn-g{background:transparent; color:var(--primary-accent); box-shadow:inset 0 0 0 1px var(--ghost-border);}
.mline{font-size:.72rem; color:var(--text-muted);}
.mock-float{position:absolute; z-index:5; right:-3%; bottom:12px; width:210px; padding:13px;
  background:linear-gradient(180deg, var(--surface-high), var(--surface-low));
  border-radius:var(--radius-md); box-shadow:var(--shadow-card), 0 0 30px rgba(126,58,242,.2), inset 0 0 0 1px var(--ghost-border);
  transform:rotate(-2deg);}
.mock-float .h{display:flex; align-items:center; gap:7px; font-size:.72rem; font-weight:700; color:var(--text-on-surface); margin-bottom:8px;}
.spark{display:flex; align-items:flex-end; gap:3px; height:34px;}
.spark i{flex:1; background:var(--gradient-primary); border-radius:3px; opacity:.85;}

/* ---- LOGO STRIP ---- */
.logostrip{border-top:1px solid var(--ghost-border); border-bottom:1px solid var(--ghost-border); padding:26px 0;
  background:color-mix(in srgb, var(--surface-section) 40%, transparent);}
.logostrip .wrap{display:flex; align-items:center; justify-content:center; gap:14px 30px; flex-wrap:wrap;}
.logostrip .lbl{font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); font-weight:600;}
.logostrip .wrap+.wrap{margin-top:13px;}
.logostrip .more{font-size:12.5px; color:var(--text-muted);}
.netpill{display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--surface-high) 42%, transparent); border:1px solid var(--ghost-border);
  color:var(--text-on-variant); font-weight:600; font-size:14px; font-family:var(--font-display);}
.netpill .g{width:20px; height:20px; border-radius:6px; display:grid; place-items:center; font-size:11px; font-weight:800; color:#fff; font-family:var(--font-display);}

/* ---- COMPARE TABLE ---- */
.cmp-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-xl);
  border:1px solid var(--ghost-border-strong); box-shadow:var(--shadow-card);}
table.cmp{width:100%; border-collapse:collapse; min-width:680px; background:color-mix(in srgb, var(--surface-card) 70%, transparent);}
table.cmp th, table.cmp td{padding:16px 18px; text-align:left; border-bottom:1px solid var(--divider); font-size:14px; vertical-align:middle;}
table.cmp thead th{position:sticky; top:0; background:color-mix(in srgb, var(--surface-low) 96%, transparent);
  font-family:var(--font-display); color:var(--text-primary); font-size:14px; border-bottom:1px solid var(--ghost-border-strong);}
table.cmp thead th small{display:block; font-family:var(--font-body); font-weight:500; font-size:11.5px; color:var(--text-muted); margin-top:3px; letter-spacing:0;}
table.cmp tbody th{font-family:var(--font-body); font-weight:600; color:var(--text-on-variant); font-size:13.5px;}
.col-sf{background:color-mix(in srgb, var(--purple-600) 12%, transparent); border-left:1px solid var(--ghost-border-strong); border-right:1px solid var(--ghost-border-strong);}
thead .col-sf{background:color-mix(in srgb, var(--purple-600) 20%, transparent);}
thead .col-sf .badge-pop{display:inline-block; margin-top:6px; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--on-primary); background:var(--gradient-button); padding:3px 9px; border-radius:99px;}
.yes{color:var(--success); font-weight:700;}
.no{color:var(--text-muted);}
.cell-strong{color:var(--text-primary); font-weight:700; font-family:var(--font-display);}
.cmp-foot{text-align:center; margin-top:28px;}

/* ============================================================================
   GRAFT B — salary / agency cost strip folded into pricing (from the "team"
   direction). Compact framing above the plan cards; cards stay the centerpiece.
   ============================================================================ */
.salary-band{margin:0 auto 40px; max-width:960px; border-radius:var(--radius-xl);
  border:1px solid var(--ghost-border-strong); background:color-mix(in srgb, var(--surface-card) 62%, transparent);
  padding:26px 26px 22px; box-shadow:var(--shadow-card);}
.salary-grid{display:grid; gap:14px; grid-template-columns:repeat(3,1fr) auto; align-items:stretch;}
.salary-item{padding:16px 16px; border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--surface-lowest) 55%, transparent); border:1px solid var(--ghost-border);}
.salary-item .role{font-size:.84rem; color:var(--text-muted);}
.salary-item .cost{font-family:var(--font-display); font-weight:700; font-size:1.45rem; color:var(--text-secondary);
  margin-top:6px; text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--error) 65%, transparent);}
.salary-item .cost small{font-size:.76rem; color:var(--text-muted); text-decoration:none;}
.salary-vs{display:flex; flex-direction:column; justify-content:center; gap:5px; padding:16px 20px; border-radius:var(--radius-md);
  background:var(--gradient-button); color:var(--on-primary); text-align:left;}
.salary-vs .lbl{font-size:.8rem; opacity:.92; font-weight:600;}
.salary-vs .amt{font-family:var(--font-display); font-weight:800; font-size:1.65rem;}
.salary-vs .amt small{font-size:.86rem; font-weight:700; opacity:.92;}
.salary-foot{margin-top:16px; font-size:.82rem; color:var(--text-muted); line-height:1.55;}

/* ---- PRICING ---- */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch;}
.price-card{position:relative; background:color-mix(in srgb, var(--surface-card) 78%, transparent);
  border:1px solid var(--ghost-border-strong); border-radius:var(--radius-xl); padding:30px 26px; display:flex; flex-direction:column;
  box-shadow:var(--shadow-card);}
.price-card.pop{border-color:color-mix(in srgb, var(--purple-400) 55%, transparent); box-shadow:var(--shadow-card), 0 0 34px rgba(126,58,242,.22);}
.price-card .plan{font-family:var(--font-display); font-weight:700; color:var(--text-primary); font-size:16px; display:flex; align-items:center; gap:10px;}
.badge-pop2{font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--on-primary); background:var(--gradient-button); padding:4px 9px; border-radius:99px;}
.price-amt{display:flex; align-items:baseline; gap:6px; margin:16px 0 4px;}
.price-amt .n{font-family:var(--font-display); font-weight:800; font-size:2.6rem; color:var(--text-primary); letter-spacing:-0.03em;}
.price-amt .per{color:var(--text-muted); font-size:14px;}
.price-credits{font-size:13.5px; color:var(--purple-200); font-weight:600; margin-bottom:2px;}
.price-equiv{font-size:13px; color:var(--text-muted); margin-bottom:20px;}
.price-card ul{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:11px;}
.price-card li{display:flex; gap:10px; font-size:13.5px; color:var(--text-secondary); align-items:flex-start;}
.price-card li .c{color:var(--success); flex:0 0 auto; margin-top:1px;}
.price-card .btn{width:100%; margin-top:auto;}
.credit-key{margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:9px;}
.credit-key .k{display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--surface-high) 42%, transparent); border:1px solid var(--ghost-border); font-size:12.5px; color:var(--text-on-variant);}
.credit-key .k b{color:var(--text-primary); font-family:var(--font-display);}
.price-foot{text-align:center; margin-top:18px; font-size:13px; color:var(--text-muted);}

/* ---- HOW IT WORKS ---- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
/* min-width:0 lets the 1fr track shrink to the container on small phones —
   grid items default to min-width:auto, and a wide DOM mock inside a step was
   forcing the whole track (and page) past the viewport. */
.step{min-width:0;}
.stagepane{min-width:0; overflow:hidden;}
.step{background:color-mix(in srgb, var(--surface-card) 66%, transparent); border:1px solid var(--ghost-border);
  border-radius:var(--radius-lg); padding:24px; display:flex; flex-direction:column;}
.step-n{width:34px; height:34px; border-radius:10px; background:var(--primary-soft); color:var(--purple-200);
  font-family:var(--font-display); font-weight:800; display:grid; place-items:center; font-size:16px; margin-bottom:16px;
  border:1px solid var(--ghost-border-strong);}
.step h3{font-size:1.15rem; margin-bottom:8px;}
.step p{font-size:14px; margin:0 0 18px;}

/* step DOM mocks (replace the [SCREEN] placeholders) */
.stagepane{margin-top:auto; border:1px solid var(--ghost-border-strong); border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--surface-lowest) 55%, transparent); padding:14px; min-height:150px;
  display:flex; flex-direction:column; gap:10px; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ghost-border) 60%, transparent);}
.stagepane .pane-head{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.stagepane .pane-title{font-family:var(--font-display); font-weight:700; font-size:.8rem; color:var(--text-on-surface);}
.stagepane .pane-tag{font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--purple-200);
  background:var(--primary-soft); border:1px solid var(--ghost-border); padding:3px 8px; border-radius:var(--radius-pill);}
/* mini audit score (step 1) */
.mini-audit{display:flex; align-items:center; gap:16px;}
.mini-ring{position:relative; width:74px; height:74px; flex:0 0 auto;}
.mini-ring svg{transform:rotate(-90deg);}
.mini-ring .rt{stroke:color-mix(in srgb, var(--surface-high) 90%, transparent);}
.mini-ring .rf{stroke:url(#miniRingGrad); stroke-linecap:round;}
.mini-ring .ctr{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.mini-ring .num{font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--text-primary); line-height:1;}
.mini-ring .lab{font-size:.52rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:2px;}
.mini-bars{flex:1; min-width:0; display:grid; gap:8px;}
.mini-bar-row{display:grid; gap:4px;}
.mini-bar-row .t{display:flex; justify-content:space-between; font-size:.66rem; color:var(--text-on-variant);}
.mini-bar-row .t b{color:var(--text-primary); font-family:var(--font-display); font-weight:700;}
.bar{height:6px; border-radius:99px; background:color-mix(in srgb, var(--surface-high) 80%, transparent); overflow:hidden;}
.bar>span{display:block; height:100%; border-radius:99px;}
/* review-queue rows (step 2) */
.qrow{border-radius:var(--radius-sm); background:color-mix(in srgb, var(--surface-high) 30%, transparent);
  box-shadow:inset 0 0 0 1px var(--ghost-border); padding:10px 11px;}
.qrow .qhead{display:flex; align-items:center; gap:7px; margin-bottom:6px; flex-wrap:wrap;}
.qrow .qch{font-size:.66rem; color:var(--text-on-variant); font-weight:600;}
.qrow .qage{font-size:.62rem; color:var(--text-muted); margin-left:auto;}
.qrow .qtitle{font-family:var(--font-display); font-weight:600; font-size:.76rem; color:var(--text-on-surface);}
/* calendar mock (step 3) */
.cal{display:grid; gap:7px;}
.cal-row{display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--surface-high) 26%, transparent); box-shadow:inset 0 0 0 1px var(--ghost-border);}
.cal-row .day{font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); width:26px; flex:0 0 auto;}
.cal-row .plat{width:20px; height:20px; border-radius:6px; flex:0 0 auto; display:grid; place-items:center; font-size:10px; font-weight:800; color:#fff; font-family:var(--font-display);}
.cal-row .txt{flex:1; min-width:0; font-size:.72rem; color:var(--text-on-variant); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cal-row .st{font-size:.56rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:2px 7px; border-radius:var(--radius-pill); flex:0 0 auto;}
.st-pub{color:var(--success); background:var(--success-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--success) 22%, transparent);}
.st-sch{color:var(--purple-200); background:var(--primary-soft); box-shadow:inset 0 0 0 1px var(--ghost-border);}

/* ---- AGENTS ---- */
.agents{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.agent{background:color-mix(in srgb, var(--surface-card) 74%, transparent); border:1px solid var(--ghost-border-strong);
  border-radius:var(--radius-xl); padding:28px; box-shadow:var(--shadow-card); transition:transform .2s ease, box-shadow .2s ease;}
.agent:hover{transform:translateY(-3px); box-shadow:var(--shadow-card-hover);}
.agent-ico{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:22px; margin-bottom:16px;
  background:color-mix(in srgb, var(--purple-600) 20%, transparent); border:1px solid var(--ghost-border-strong);}
.agent h3{font-size:1.3rem; display:flex; align-items:baseline; gap:10px; margin-bottom:6px; flex-wrap:wrap;}
.agent h3 .role{font-family:var(--font-body); font-weight:500; font-size:12.5px; color:var(--purple-200); text-transform:uppercase; letter-spacing:.05em;}
.agent>p{font-size:14px; margin:0 0 16px;}
.agent ul{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.agent li{display:flex; gap:9px; font-size:13.5px; color:var(--text-secondary);}
.agent li .c{color:var(--purple-300); flex:0 0 auto;}

/* ---- FEATURE CLUSTERS ---- */
.features{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.fcard{background:color-mix(in srgb, var(--surface-card) 64%, transparent); border:1px solid var(--ghost-border);
  border-radius:var(--radius-lg); padding:26px;}
.fcard h3{font-size:1.15rem; margin-bottom:6px; display:flex; align-items:center; gap:10px;}
.fcard h3 .fic{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:15px;
  background:var(--primary-soft); border:1px solid var(--ghost-border);}
.fcard>p{font-size:13.5px; margin:0 0 16px; color:var(--text-muted);}
.fcard ul{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.fcard li{display:flex; gap:9px; font-size:13.5px; color:var(--text-secondary); align-items:flex-start;}
.fcard li .c{color:var(--success); flex:0 0 auto; margin-top:1px;}

/* ---- MONTHLY REPORT BAND ---- */
.report-band{background:
    radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--purple-600) 24%, transparent), transparent 55%),
    color-mix(in srgb, var(--surface-low) 80%, transparent);
  border:1px solid var(--ghost-border-strong); border-radius:var(--radius-xl); padding:44px; overflow:hidden;
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; box-shadow:var(--shadow-card);}
.report-band h2{font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:14px;}
.report-band p{font-size:1.02rem; margin:0 0 20px;}
.report-kpis{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.kpi{background:color-mix(in srgb, var(--surface-card) 80%, transparent); border:1px solid var(--ghost-border);
  border-radius:var(--radius-md); padding:16px;}
.kpi .kn{font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--text-primary);}
.kpi .kl{font-size:12px; color:var(--text-muted); margin-top:2px;}
.kpi .badge-tier{display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 7px; border-radius:99px; margin-top:8px;}
.tier-real{background:var(--success-soft); color:var(--success);}
.tier-est{background:var(--warning-soft); color:var(--warning);}

/* ---- FAQ ---- */
.faq{max-width:820px; margin:0 auto; display:grid; gap:12px;}
.qa{background:color-mix(in srgb, var(--surface-card) 64%, transparent); border:1px solid var(--ghost-border);
  border-radius:var(--radius-md); overflow:hidden;}
.qa summary{cursor:pointer; list-style:none; padding:20px 24px; font-family:var(--font-display); font-weight:600;
  color:var(--text-primary); font-size:15.5px; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary .ic{flex:0 0 auto; width:22px; height:22px; border-radius:6px; display:grid; place-items:center;
  background:var(--primary-soft); color:var(--purple-200); font-size:15px; transition:transform .2s ease;}
.qa[open] summary .ic{transform:rotate(45deg);}
.qa .a{padding:0 24px 22px; font-size:14.5px; color:var(--text-secondary); line-height:1.62;}

/* ---- FINAL CTA ---- */
.finalcta{text-align:center; background:
    radial-gradient(50% 130% at 50% 0%, color-mix(in srgb, var(--purple-600) 26%, transparent), transparent 60%);
  border:1px solid var(--ghost-border-strong); border-radius:var(--radius-xl); padding:56px 32px; box-shadow:var(--shadow-card);}
.finalcta h2{font-size:clamp(1.9rem,3.6vw,2.8rem); margin-bottom:14px;}
.finalcta p{max-width:560px; margin:0 auto 30px; font-size:1.08rem;}
.finalcta .audit-form{margin:0 auto;}
.finalcta .form-note{justify-content:center;}
.finalcta .alt{margin-top:22px; font-size:14px; color:var(--text-muted);}
.finalcta .alt a{font-weight:600;}

/* ---- FOOTER ---- */
footer{border-top:1px solid var(--ghost-border); padding:52px 0 40px; margin-top:20px;}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px;}
.foot-brand .brand{margin-bottom:14px;}
.foot-brand p{font-size:13.5px; color:var(--text-muted); max-width:300px; margin:0;}
.foot-col .foot-title{font-family:var(--font-display); font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); margin-bottom:14px; font-weight:700;}
.foot-col a{display:block; color:var(--text-on-variant); font-size:13.5px; margin-bottom:10px; font-weight:500;}
.foot-col a:hover{color:#fff;}
.foot-bottom{border-top:1px solid var(--ghost-border); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--text-muted);}
.foot-bottom .honest{max-width:640px; line-height:1.5;}

/* ---- MOTION SAFETY ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .dot-live, .mock-av .wd{animation:none;}
  .btn, .agent, .price-card{transition:none;}
}

/* ---- RESPONSIVE ---- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:40px;}
  .hero .lead{max-width:none;}
  .collage{min-height:0; margin-top:4px;}
  .mock-main{position:relative; inset:auto; left:0; right:0; transform:none;}
  .mock-float{display:none;}
  .preview-tag{position:static; display:inline-block; margin-bottom:10px;}
  .price-grid{grid-template-columns:1fr; max-width:440px; margin:0 auto;}
  .salary-grid{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr;}
  .agents{grid-template-columns:1fr;}
  .features{grid-template-columns:1fr;}
  .report-band{grid-template-columns:1fr; padding:32px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .nav-inner{position:relative; flex-wrap:wrap; row-gap:0;}
  .nav-login{display:none;}
  .nav-toggle:not([hidden]){display:inline-flex;}
  .nav-links .navlink-mobile{display:block;}
  /* No-JS fallback: hamburger stays hidden, so the links sit under the bar as a
     wrapped full-width row — primary nav is never lost without scripting. */
  .nav-links{order:3; width:100%; flex-wrap:wrap; gap:6px 18px; padding:10px 0 2px;}
  /* JS present: the list becomes a disclosure panel the hamburger toggles. */
  .nav-links.nav-collapsed{display:none; position:absolute; top:100%; left:0; right:0; order:0; width:auto;
    flex-direction:column; align-items:stretch; gap:2px; padding:12px 24px 16px; flex-wrap:nowrap;
    background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--ghost-border); box-shadow:var(--shadow-card);}
  .nav-links.nav-collapsed.is-open{display:flex;}
  .nav-links.nav-collapsed .navlink{padding:9px 2px; font-size:15px;}
  .sec{padding:64px 0;}
  .hero{padding:32px 0 40px;}
  .audit-form{flex-direction:column; padding:12px;}
  .audit-form .site-icon{display:none;}
  .audit-form .btn{width:100%;}
  .audit-form .prefix{padding-left:8px;}
  .report-kpis{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .wrap{padding:0 18px;}
  /* Keep brand / hamburger / CTA on one uncrowded row on small phones. The
     padding is restated because the .wrap mobile rule (above) would otherwise
     win by source order and zero out the bar's vertical padding. */
  .nav-inner{gap:10px; padding:10px 18px;}
  .nav-cta{gap:8px;}
  .nav .btn-sm{padding:9px 12px; font-size:13px;}
  .brand-img{height:24px;}
  .salary-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .foot-bottom{flex-direction:column;}
  .mini-audit{flex-direction:column; align-items:stretch;}
  .mini-ring{margin:0 auto;}
}
@media (max-width:380px){
  .wrap{padding:0 14px;}
  .hero h1{font-size:1.95rem;}
  .price-amt .n{font-size:2.2rem;}
  .netpill{font-size:13px; padding:7px 12px;}
}


/* ---- real product footage (media pass) ---- */
.stagepane-video{padding:0; overflow:hidden; background:#0b0b10; position:relative;}
.stagepane-video video{display:block; width:100%; height:auto; border-radius:inherit;}
.report-video{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--ghost-border);
  background:#0b0b10; box-shadow:var(--shadow-card, 0 18px 50px rgba(0,0,0,.45));}
.report-video video{display:block; width:100%; height:auto;}
@media (min-width:761px){
  .band-flip > div:first-child{order:2;}
  .band-flip > .report-video{order:1;}
}
.demo-dialog{border:0; padding:0; background:transparent; max-width:min(1100px, 92vw); width:100%;
  /* overflow:visible kills the UA scrollbars AND lets the close button sit outside the corner */
  overflow:visible;}
.demo-dialog::backdrop{background:rgba(5,5,10,.82); backdrop-filter:blur(6px);}
.demo-dialog video{display:block; width:100%; height:auto; border-radius:14px;
  border:1px solid var(--ghost-border); background:#0b0b10;}
.demo-close{position:absolute; top:-14px; right:-14px; z-index:2; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--ghost-border); background:var(--surface-high, #22222c); color:#fff; font-size:20px;
  cursor:pointer; line-height:1;}
.demo-close:hover{background:#2e2e3a;}
/* click-to-enlarge modal reuses .demo-dialog but goes wider for a closer look at
   the inline product clips (steps render only ~330px, so detail is easy to miss). */
.demo-dialog.clip-dialog{max-width:min(1440px, 92vw);}

.clip-toggle{position:absolute; right:10px; bottom:10px; z-index:2; width:34px; height:34px; border-radius:50%;
  border:1px solid color-mix(in srgb, #fff 22%, transparent); background:rgba(10,10,16,.62); color:#fff;
  font-size:13px; line-height:1; cursor:pointer; display:grid; place-items:center;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:.75; transition:opacity .15s ease;}
.clip-toggle:hover, .clip-toggle:focus-visible{opacity:1;}

/* Enlarge affordance — mirrors .clip-toggle (same always-visible treatment) but
   pinned top-right, so it never collides with the bottom-right pause toggle. */
.clip-expand{position:absolute; right:10px; top:10px; z-index:2; width:34px; height:34px; border-radius:50%;
  border:1px solid color-mix(in srgb, #fff 22%, transparent); background:rgba(10,10,16,.62); color:#fff;
  line-height:1; cursor:pointer; display:grid; place-items:center; padding:0;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:.75; transition:opacity .15s ease;}
.clip-expand:hover, .clip-expand:focus-visible{opacity:1;}
.clip-expand svg{width:15px; height:15px; display:block;}
/* Autoplay-mode clips invite a click to enlarge. Clips showing native controls
   (reduced-motion / rejected autoplay) keep the default cursor for their controls. */
.stagepane-video video:not([controls]), .report-video video:not([controls]){cursor:zoom-in;}


/* ---- legal pages (Privacy / Terms) on the public shell ---- */
.legal{padding:120px 0 80px;}
.legal-wrap{max-width:760px;}
.legal-wrap h1{font-family:var(--font-display); font-size:clamp(30px,4.5vw,42px); font-weight:800; margin:10px 0 6px;}
.legal-updated{color:var(--text-muted); font-size:14px; margin-bottom:36px;}
.legal-wrap h2{font-family:var(--font-display); font-size:20px; font-weight:700; margin:34px 0 10px;}
.legal-wrap h3{font-family:var(--font-display); font-size:16px; font-weight:700; margin:24px 0 8px; color:var(--text);}
.legal-wrap p, .legal-wrap li{color:var(--text-on-variant); line-height:1.75; font-size:15.5px;}
.legal-wrap ul, .legal-wrap ol{padding-left:22px; margin:10px 0 18px; display:grid; gap:6px;}
.legal-wrap strong{color:var(--text);}
.legal-wrap a{color:var(--primary);}


/* ---- account pages (login / register / password / email confirm) on the public shell ----
   Same shell as /beta: one glass card on the shared dark wash, under the shared _PublicNav.
   The bar is shaded at rest here (body.page-auth, above), so the top padding only has to
   look right — it never has to hide content scrolling under a transparent bar. */
.auth-wall{padding:72px 0 96px;}
.auth-card{max-width:560px; margin:0 auto; padding:40px clamp(22px, 5vw, 44px);}
.auth-card h1{font-size:clamp(1.6rem, 4vw, 2.15rem); margin-bottom:14px;}
.auth-lead{margin-bottom:28px;}
.auth-form{margin:0; display:block;}
.auth-field{margin:0 0 18px;}
.auth-label{display:block; font-size:.82rem; font-weight:600; letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-on-variant); margin:0 0 10px;}
.auth-input{display:block; width:100%; background:var(--surface-lowest);
  border:1px solid var(--ghost-border-strong); border-radius:var(--radius-input);
  color:var(--text-primary); font:inherit; font-size:15px; padding:13px 16px; outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;}
.auth-input::placeholder{color:var(--text-muted);}
.auth-input:focus{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft);}
.auth-hint{display:block; margin:8px 0 0; font-size:13px; color:var(--text-muted);}
/* jquery-validate marks the offending control; keep the cue visible without the app sheet. */
.auth-input.input-validation-error{border-color:var(--error-strong);}
.auth-error{display:block; margin:8px 0 0; font-size:13px; font-weight:600; color:var(--error);}
.auth-error:empty{display:none;}
/* asp-validation-summary emits an empty <ul> shell on a clean render — hide it. */
.auth-summary{margin:0 0 18px;}
.auth-summary.validation-summary-valid{display:none;}
.auth-summary ul{margin:0; padding-left:18px; display:grid; gap:4px;}
.auth-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin:0 0 22px;}
.auth-check-label{display:inline-flex; align-items:center; gap:9px; font-size:14px; color:var(--text-secondary); cursor:pointer;}
.auth-check{width:17px; height:17px; flex:0 0 auto; accent-color:var(--primary); cursor:pointer;}
.auth-link{font-size:14px; font-weight:600;}
.auth-consent{margin:0 0 22px;}
.auth-consent-row{display:flex; align-items:flex-start; gap:10px; cursor:pointer;}
.auth-consent-row .auth-check{margin-top:3px;}
.auth-consent-text{font-size:13.5px; line-height:1.6; color:var(--text-secondary);}
.auth-consent-text a{font-weight:600;}
.auth-actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
.auth-switch{margin:24px 0 0; font-size:14px; color:var(--text-secondary);}
.auth-switch a{font-weight:600;}
/* Register's carried-over brand chip (favicon + business name preview). */
.auth-brand{display:flex; align-items:center; gap:12px; margin:0 0 22px; padding:12px 14px;
  border-radius:var(--radius-md); background:color-mix(in srgb, var(--surface-high) 40%, transparent);
  border:1px solid var(--ghost-border);}
.auth-brand-shell{width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; position:relative;
  border-radius:11px; background:var(--surface-lowest); border:1px solid var(--ghost-border);
  color:var(--text-on-surface); font-family:var(--font-display); font-weight:800; font-size:16px;}
.auth-brand-img{width:20px; height:20px; border-radius:5px;}
.auth-brand-name{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--text-primary);}
.auth-brand-helper{margin:2px 0 0; font-size:12.5px; color:var(--text-muted);}
@media (max-width:480px){
  .auth-wall{padding:52px 0 72px;}
  .auth-card{padding:30px 20px;}
  .auth-actions .btn{width:100%;}
}