/* ============================================================
   Tungsten People - shared design system (site.css)
   Linked by every marketing page (home + 4 exam pages + legal).
   Holds ONLY shared tokens + reset + header/nav/drawer + buttons
   + .eyebrow + .icon-btn + footer. Page-specific section CSS
   stays inline per page.
   Shares the app design tokens (amber / Geist / dark + light).
   ============================================================ */
:root {
  --font-display:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --bg:#11161c; --surface:#1a2028; --surface-2:#212833; --surface-3:#29313d; --border:#303a46; --border-soft:#242c35; --edge:rgba(255,255,255,.045);
  --text:#e7edf3; --text-mid:#aab6c2; --text-muted:#8b97a4;
  --accent:#f5a623; --accent-2:#ec7a1c; --accent-gold:#ecc66a; --on-accent:#1a1205; --accent-soft:rgba(245,166,35,.12); --accent-line:rgba(245,166,35,.30);
  --glow:0 0 0 1px rgba(245,166,35,.25), 0 8px 30px -12px rgba(245,166,35,.45);
  --success:#3fb68b; --warning:#e0a82e; --danger:#e5605d; --info:#5b9bd5;
  /* green primary-CTA (same in both themes) - "go / pass" */
  --cta:#19a558; --cta-2:#138a47; --cta-btn:#12833f; --cta-btn-2:#0d6a33; --cta-soft:rgba(25,165,88,.13); --cta-line:rgba(25,165,88,.36); --cta-glow:0 0 0 1px rgba(25,165,88,.22), 0 10px 28px -12px rgba(25,165,88,.5);
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px;
  --shadow:0 10px 30px -16px rgba(0,0,0,.7); --shadow-lg:0 24px 60px -24px rgba(0,0,0,.8);
  --header-h:64px; --maxw:1140px;
  color-scheme:dark;   /* native controls + scrollbars follow the manual theme */
}
[data-theme="light"] {
  color-scheme:light;
  --bg:#eef1f4; --surface:#ffffff; --surface-2:#f6f8fa; --surface-3:#eef1f5; --border:#dde3ea; --border-soft:#e8edf2; --edge:rgba(255,255,255,.9);
  --text:#141a21; --text-mid:#404a57; --text-muted:#66707c;
  --accent:#f5a623; --accent-2:#ec7a1c; --accent-gold:#d99a2a; --on-accent:#1a1205; --accent-soft:rgba(245,166,35,.13); --accent-line:rgba(245,166,35,.34);
  --glow:0 0 0 1px rgba(245,166,35,.22), 0 8px 24px -14px rgba(245,166,35,.4);
  --success:#1f9e74; --warning:#c98a12; --danger:#d23f3c; --info:#3a7cbd;
  --shadow:0 10px 30px -18px rgba(40,55,70,.35); --shadow-lg:0 24px 50px -22px rgba(40,55,70,.3);
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* Lock horizontal overflow at the ROOT so the page can never become wider than the
   viewport on mobile (which let you pinch/pan to an ugly empty strip). `clip` (not
   `hidden`) is used on purpose: it contains overflow WITHOUT turning the element
   into a scroll container, so it doesn't break position:sticky and doesn't force
   the other axis to `auto`. Body alone wasn't enough - html needed it too. */
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); overflow-x:clip; }
body {
  margin:0; font-family:var(--font-body); background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; line-height:1.55; overflow-x:clip;
}
html.theming, html.theming *, html.theming *::before, html.theming *::after { transition:background-color .45s ease, border-color .45s ease, color .45s ease, fill .45s ease, stroke .45s ease, box-shadow .45s ease !important; }
@media (prefers-reduced-motion:reduce){ html.theming, html.theming *, html.theming *::before, html.theming *::after { transition:none !important; } }
a { color:inherit; text-decoration:none; }
.skip-link { position:fixed; top:8px; left:8px; z-index:200; padding:10px 16px; background:var(--accent); color:var(--on-accent); border-radius:var(--r-md); font-family:var(--font-display); font-weight:600; font-size:14px; transform:translateY(-160%); transition:transform .2s ease; }
.skip-link:focus { transform:none; }
img, svg { display:block; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
:focus:not(:focus-visible) { outline:none; }
h1, h2, h3 { font-family:var(--font-display); line-height:1.12; margin:0; letter-spacing:-.01em; }
p { margin:0; }
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:14.5px; padding:11px 20px; border-radius:var(--r-md); border:1px solid transparent; cursor:pointer; transition:transform .15s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; white-space:nowrap; }
.btn svg { width:17px; height:17px; }
.btn-primary { background:linear-gradient(150deg,var(--cta-btn),var(--cta-btn-2)); color:#fff; box-shadow:var(--cta-glow); }
.btn-primary:hover { transform:translateY(-2px); filter:brightness(1.05); }
.btn-ghost { background:var(--surface-2); color:var(--text); border-color:var(--border); }
.btn-ghost:hover { border-color:var(--accent-line); transform:translateY(-2px); }
.btn-lg { padding:14px 26px; font-size:15.5px; }

/* ---- Eyebrow (shared section kicker) ---- */
.eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.eyebrow::before { content:""; width:18px; height:1.5px; background:var(--accent); border-radius:2px; }

/* ---- Header (floating pill: transparent at top, gains surface on scroll) ---- */
.site-header { position:sticky; top:0; z-index:70; height:var(--header-h); display:flex; align-items:center; padding:0 24px; }
.site-header .wrap { display:flex; align-items:center; gap:18px; min-height:52px; padding:7px 8px 7px 16px; border:1px solid transparent; border-radius:var(--r-md); transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; }
.site-header.scrolled .wrap,
body.nav-open .site-header .wrap { background:color-mix(in srgb, var(--surface) 80%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-color:var(--border); box-shadow:var(--shadow); }
@supports not (backdrop-filter:blur(1px)) { .site-header.scrolled .wrap { background:var(--surface); } }
.brand { display:flex; align-items:center; gap:7px; flex:1; min-width:0; transition:transform .22s cubic-bezier(.34,1.4,.64,1); }
.brand:hover { transform:translateY(-1.5px); }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; transition:transform .22s cubic-bezier(.34,1.4,.64,1), filter .22s ease; }
.brand:hover .brand-mark { transform:scale(1.1); filter:drop-shadow(0 3px 9px rgba(245,166,35,.5)); }
@media (prefers-reduced-motion:reduce){ .brand, .brand-mark { transition:none; } }
.brand-mark svg { width:24px; height:24px; }
.brand-name { font-family:'Bricolage Grotesque',var(--font-display); font-weight:700; font-size:16.5px; letter-spacing:.01em; line-height:1; white-space:nowrap; }
.brand-name b { color:var(--accent); font-weight:700; }
.nav-main { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.nav-main a { font-size:14px; font-weight:500; color:var(--text-mid); padding:8px 13px; border-radius:var(--r-sm); transition:color .15s ease, background-color .15s ease; }
.nav-main a:hover { color:var(--text); background:var(--surface-2); }
.nav-main a[aria-current="page"] { color:var(--text); background:var(--surface-2); }
.header-right { display:flex; align-items:center; gap:10px; flex:1; justify-content:flex-end; }
/* At the top the toggle sits flush-right (CTA slot collapsed to 0 width); when the
   buttons reveal on scroll the slot opens and the toggle glides left to make room. */
.header-cta { display:flex; align-items:center; gap:10px; max-width:0; min-width:0; overflow:hidden; opacity:0; pointer-events:none; visibility:hidden; transition:max-width .42s cubic-bezier(.22,.61,.36,1), opacity .3s ease, visibility 0s linear .42s; }
.site-header.cta-shown .header-cta { max-width:340px; opacity:1; pointer-events:auto; visibility:visible; transition:max-width .42s cubic-bezier(.22,.61,.36,1), opacity .35s ease .08s, visibility 0s; }
/* Buttons keep a fixed 38px height (matches the theme toggle) so the pill's form never
   grows when they appear, and glide in from the right for a fluid scroll reveal. */
.header-cta .btn { height:38px; padding:0 18px; }
.header-cta > * { transform:translateX(12px); transition:transform .42s cubic-bezier(.22,.61,.36,1); }
.site-header.cta-shown .header-cta > * { transform:none; }
@media (prefers-reduced-motion:reduce){ .header-cta, .header-cta > * { transition:opacity .2s ease; transform:none; } }

/* ---- Scroll progress: hairline at the very top edge, fills L->R as the page scrolls (JS sets --sp 0..1) ---- */
.scroll-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:90; pointer-events:none; transition:opacity .25s ease; }
body.nav-open .scroll-progress { opacity:0; }
.scroll-progress .bar { height:100%; transform-origin:left center; transform:scaleX(var(--sp,0)); background:linear-gradient(90deg,var(--accent-gold),var(--accent) 55%,var(--accent-2)); will-change:transform; }
.icon-btn { width:38px; height:38px; border-radius:var(--r-md); display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--border); color:var(--text-mid); cursor:pointer; transition:color .15s ease, border-color .15s ease; }
.icon-btn:hover { color:var(--text); border-color:var(--accent-line); }
.icon-btn svg { width:18px; height:18px; }
.theme-toggle .sun { display:none; } .theme-toggle .moon { display:block; }
[data-theme="light"] .theme-toggle .sun { display:block; } [data-theme="light"] .theme-toggle .moon { display:none; }
/* Theme switch = View Transitions cross-fade (whole doc in sync) + the sun/moon
   icon spins+shrinks out while the next spins in. Ported from the app shell so
   the landing and platform feel identical. Instant fallback below. */
.theme-icons { display:inline-flex; line-height:0; view-transition-name:theme-icon; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration:.42s; animation-timing-function:cubic-bezier(.4,0,.2,1); }
::view-transition-group(theme-icon) { animation-duration:.5s; }
::view-transition-old(theme-icon) { animation:theme-icon-out .5s cubic-bezier(.5,0,.25,1) both; }
::view-transition-new(theme-icon) { animation:theme-icon-in .5s cubic-bezier(.2,.8,.25,1) both; }
@keyframes theme-icon-out { from { opacity:1; transform:rotate(0) scale(1); } to { opacity:0; transform:rotate(-130deg) scale(.3); } }
@keyframes theme-icon-in { from { opacity:0; transform:rotate(130deg) scale(.3); } to { opacity:1; transform:rotate(0) scale(1); } }
@media (prefers-reduced-motion:reduce) {
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-old(theme-icon), ::view-transition-new(theme-icon) { animation:none; }
}
.login-link { display:inline-flex; align-items:center; height:38px; font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--text-mid); padding:0 18px; border:1px solid var(--border); border-radius:var(--r-md); white-space:nowrap; transition:color .15s ease, border-color .15s ease; }
.login-link:hover { color:var(--text); border-color:var(--accent-line); }

/* ---- Hamburger button (morphs to X) ---- */
.menu-btn { display:none; order:-1; }
.burger { position:relative; width:18px; height:12px; display:block; }
.burger span { position:absolute; left:0; right:0; height:2px; border-radius:2px; background:currentColor; transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, top .3s cubic-bezier(.4,0,.2,1); }
.burger span:nth-child(1) { top:0; }
.burger span:nth-child(2) { top:5px; }
.burger span:nth-child(3) { top:10px; }
body.nav-open .burger span:nth-child(1) { top:5px; transform:rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity:0; }
body.nav-open .burger span:nth-child(3) { top:5px; transform:rotate(-45deg); }

/* ---- Mobile nav (floating rounded sheet that drops out from under the header pill) ---- */
.mobile-nav { position:fixed; inset:0; z-index:55; visibility:hidden; transition:visibility 0s linear .38s; }
body.nav-open .mobile-nav { visibility:visible; transition:visibility 0s; }
.mobile-nav .scrim { position:absolute; inset:0; background:color-mix(in srgb, var(--bg) 55%, transparent); opacity:0; transition:opacity .38s ease; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
body.nav-open .mobile-nav .scrim { opacity:1; }
/* (the pill is kept solid while open via the merged .scrolled/.nav-open rule above) */
.mobile-nav .panel {
  position:absolute; top:calc(var(--header-h) + 8px); left:24px; right:24px;
  max-height:calc(100dvh - var(--header-h) - 36px);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid var(--border); border-radius:var(--r-xl);
  padding:10px; display:flex; flex-direction:column; gap:3px;
  box-shadow:var(--shadow-lg);
  transform:translateY(-18px) scale(.97); opacity:0; transform-origin:top center;
  transition:transform .36s cubic-bezier(.16,1,.3,1), opacity .26s ease;
  overflow-y:auto; overscroll-behavior:contain;
}
body.nav-open .mobile-nav .panel { transform:none; opacity:1; }
@supports not (backdrop-filter:blur(1px)){ .mobile-nav .panel { background:var(--surface); } }
/* staggered entrance of the menu items (delay only on open, so close is clean) */
.mobile-nav .panel > * { opacity:0; transform:translateY(7px); transition:opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1); }
body.nav-open .mobile-nav .panel > * { opacity:1; transform:none; }
body.nav-open .mobile-nav .panel > *:nth-child(1){ transition-delay:.05s }
body.nav-open .mobile-nav .panel > *:nth-child(2){ transition-delay:.085s }
body.nav-open .mobile-nav .panel > *:nth-child(3){ transition-delay:.12s }
body.nav-open .mobile-nav .panel > *:nth-child(4){ transition-delay:.155s }
body.nav-open .mobile-nav .panel > *:nth-child(5){ transition-delay:.19s }
body.nav-open .mobile-nav .panel > *:nth-child(6){ transition-delay:.225s }
body.nav-open .mobile-nav .panel > *:nth-child(7){ transition-delay:.26s }
body.nav-open .mobile-nav .panel > *:nth-child(8){ transition-delay:.295s }
.mobile-nav .panel a { padding:13px 14px; border-radius:var(--r-md); font-size:15.5px; font-weight:500; color:var(--text-mid); transition:background-color .15s ease, color .15s ease; }
.mobile-nav .panel a:hover { background:var(--surface-2); color:var(--text); }
.mobile-nav .panel a[aria-current="page"] { background:var(--surface-2); color:var(--text); }
body.nav-open .mobile-nav .panel > *:nth-child(9){ transition-delay:.33s }
body.nav-open .mobile-nav .panel > *:nth-child(10){ transition-delay:.365s }
body.nav-open .mobile-nav .panel > *:nth-child(11){ transition-delay:.4s }
.mobile-nav .panel .divider { height:1px; background:var(--border-soft); margin:7px 6px; }
.mobile-nav .panel .btn { margin-top:6px; justify-content:center; }
.mobile-nav .panel a.btn-primary { color:#fff; } /* the generic .panel a colour must not swallow the CTA's white text */
/* Sign in is a real button in the drawer, not a link lost among the nav items
   (it read as body text on phones). Same override reason as .btn-primary above. */
.mobile-nav .panel a.btn-ghost { color:var(--text); }
/* Theme control: on phones it lives here, not in the header (the header's right
   side is reserved for the always-visible Sign in). Quiet util row, drawer-last. */
.mnav-theme { display:flex; align-items:center; gap:10px; width:100%; padding:12px 14px; margin-top:2px;
  border:0; border-radius:var(--r-md); background:none; color:var(--text-muted);
  font-family:var(--font-display); font-size:14px; font-weight:600; text-align:left;
  transition:background-color .15s ease, color .15s ease; }
.mnav-theme:hover { background:var(--surface-2); color:var(--text); }
.mnav-theme svg { width:17px; height:17px; flex-shrink:0; }
/* Scroll lock lives on <html>, NOT body: overflow:hidden on body turns it into a clip
   container, which kills the header's position:sticky (the pill vanished on phones)
   and never actually blocked viewport scroll behind the drawer. */
html:has(body.nav-open) { overflow:hidden; }
@media (prefers-reduced-motion:reduce){
  .mobile-nav .panel, .mobile-nav .panel > *, .mobile-nav .scrim { transition:opacity .12s ease !important; transform:none !important; }
}

/* ---- Section frame (shared layout helpers) ---- */
section { position:relative; }
.section-pad { padding:88px 0; }

/* ---- Scroll reveal (shared; the injected page script adds .in via IntersectionObserver, one-shot) ---- */
.reveal { opacity:0; transform:translateY(24px) scale(.985); transition:opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1); will-change:opacity, transform; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal { opacity:1; transform:none; transition:none; } }

/* ---- Staggered drop-in: children fall from above one-by-one when the container scrolls in.
   Uses animation + backwards fill (not transition) so card hover-transforms stay intact after. ---- */
@keyframes dropIn { from { opacity:0; transform:translateY(-16px); } to { opacity:1; transform:translateY(0); } }
.stagger > * { opacity:0; }
.stagger.in > * { opacity:1; animation:dropIn .55s cubic-bezier(.2,.85,.3,1) backwards; }
.stagger.in > *:nth-child(1){ animation-delay:.04s }
.stagger.in > *:nth-child(2){ animation-delay:.11s }
.stagger.in > *:nth-child(3){ animation-delay:.18s }
.stagger.in > *:nth-child(4){ animation-delay:.25s }
.stagger.in > *:nth-child(5){ animation-delay:.32s }
.stagger.in > *:nth-child(6){ animation-delay:.39s }
.stagger.in > *:nth-child(7){ animation-delay:.46s }
.stagger.in > *:nth-child(8){ animation-delay:.53s }
@media (prefers-reduced-motion:reduce){ .stagger > * { opacity:1; } .stagger.in > * { animation:none; } }

/* ---- Word cascade: the page script splits marked headings into .w word spans and adds .wc;
   words then fall from above ~50ms apart when the observer adds .in (no blur - Vlad).
   Each .w wraps an inner span so gradient text (background-clip:text) stays isolated on the
   child while the outer span animates. No .wc in markup = no JS/PRM risk. ---- */
@keyframes wordFall { from { opacity:0; transform:translateY(-.55em); } to { opacity:1; transform:translateY(0); } }
.wc .w { display:inline-block; opacity:0; will-change:transform; }
.wc.in .w { opacity:1; animation:wordFall .6s cubic-bezier(.22,.61,.36,1) backwards; animation-delay:calc(var(--wi, 0)*.05s); }
@media (prefers-reduced-motion:reduce){ .wc .w { opacity:1; } .wc.in .w { animation:none; } }

/* ---- FAQ accordion (shared, native <details>; used by home + frcr-2b) ---- */
.fq-list { max-width:760px; margin:0 auto; border:1px solid var(--border); border-radius:var(--r-xl); background:linear-gradient(165deg,var(--surface-2),var(--surface)); box-shadow:var(--shadow); overflow:hidden; }
.fq-item { border-top:1px solid var(--border-soft); }
.fq-item:first-child { border-top:0; }
.fq-q { list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px; padding:20px clamp(20px,2.4vw,26px); font-family:var(--font-display); font-size:clamp(15px,1.6vw,16.5px); font-weight:600; color:var(--text); letter-spacing:-.01em; }
.fq-q::-webkit-details-marker { display:none; }
.fq-q::marker { content:""; }
.fq-q:hover { color:var(--accent); }
.fq-q .chev { margin-left:auto; flex-shrink:0; width:20px; height:20px; color:var(--text-muted); transition:transform .25s ease, color .2s ease; }
.fq-q .chev svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.fq-item[open] .fq-q { color:var(--accent); }
.fq-item[open] .fq-q .chev { transform:rotate(180deg); color:var(--accent); }
.fq-a { padding:0 clamp(20px,2.4vw,26px) 22px; }
.fq-a p { margin:0; font-size:14.5px; line-height:1.6; color:var(--text-mid); max-width:62ch; }
.fq-a p b { color:var(--text); font-weight:600; }
.fq-a a { color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-line); }
.fq-a a:hover { border-bottom-color:var(--accent); }
/* Fluid expand/collapse: browsers that support it animate <details> natively via
   ::details-content (compositor-driven, no per-frame layout) - this is the smooth
   path on Chromium/mobile. Browsers without it fall back to the JS height animation,
   which is gated off when this is supported (see the FAQ script). */
@supports (interpolate-size: allow-keywords) {
  .fq-list { interpolate-size: allow-keywords; }
  .fq-item::details-content { block-size:0; overflow:clip; transition:block-size .3s cubic-bezier(.22,.61,.36,1), content-visibility .3s; transition-behavior:allow-discrete; }
  .fq-item[open]::details-content { block-size:auto; }
  /* the global reduced-motion reset targets *, *::before, *::after - it does NOT
     reach ::details-content, so suppress this animation explicitly */
  @media (prefers-reduced-motion: reduce) { .fq-item::details-content { transition:none; } }
}

/* ---- Footer ---- */
.site-footer { border-top:1px solid var(--border-soft); padding:56px 0 30px; margin-top:8px; }
.foot-grid { display:grid; grid-template-columns:1.4fr repeat(5,1fr); gap:28px; }
.foot-brand .brand { margin-bottom:14px; }
.foot-brand p { font-size:13.5px; color:var(--text-muted); max-width:280px; }
.foot-socials { display:flex; gap:8px; margin-top:16px; }
.foot-socials a { width:38px; height:38px; display:grid; place-items:center; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--border); color:var(--text-mid); transition:color .15s ease, border-color .15s ease, transform .15s ease; }
.foot-socials a:hover { color:var(--accent); border-color:var(--accent-line); transform:translateY(-2px); }
.foot-socials svg { width:18px; height:18px; }
.foot-col h4 { font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:14px; }
.foot-col a { display:block; font-size:13.5px; color:var(--text-mid); padding:5px 0; transition:color .15s ease; }
.foot-col a:hover { color:var(--accent); }
.foot-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:42px; padding-top:22px; border-top:1px solid var(--border-soft); }
.foot-bottom p { font-size:12.5px; color:var(--text-muted); }
.foot-disclaimer { flex-basis:100%; margin-top:8px; font-size:11px; line-height:1.55; color:var(--text-muted); max-width:none; }

/* ---- Shared responsive (header/nav/footer) ---- */
/* 821-1080px: desktop nav is ~60px too wide for the pill - tighten paddings so the
   full wordmark, six links and the scroll-revealed CTA all fit without overlap. */
@media (max-width:1080px) and (min-width:821px){
  .site-header .wrap { gap:12px; }
  .nav-main a { padding:8px 9px; font-size:13.5px; }
  .header-cta .btn, .login-link { padding:0 14px; }
}
@media (max-width:960px){
  .foot-grid { grid-template-columns:1fr 1fr 1fr; }
  .foot-brand { grid-column:span 3; }
}
@media (max-width:820px){
  .nav-main { display:none; }
  .menu-btn { display:grid; }
  .header-cta { display:none; }   /* Start free lives in the drawer on mobile */
  /* Sign in stays in the header on EVERY phone screen (Vlad): a returning user must
     never have to open the drawer to log in. The theme toggle trades places with it
     and moves into the drawer (.mnav-theme), so the row keeps three items, not four. */
  .site-header .theme-toggle { display:none; }
  .login-link { display:inline-flex; height:36px; padding:0 14px; font-size:13.5px; }
}
@media (max-width:640px){
  .section-pad { padding:64px 0; }
  .foot-grid { grid-template-columns:1fr 1fr; }
  .foot-brand { grid-column:span 2; }
}
@media (max-width:480px){
  .site-header { padding:0 14px; }              /* tighter gutters so the full wordmark fits */
  .site-header .wrap { gap:12px; }
  /* keep the four link columns as a tidy 2x2 instead of one long stack */
  .foot-grid { gap:24px 20px; }
}
/* Order matters: these two sit BELOW the 480px block, which targets the same header
   properties at the same specificity and would otherwise win at 320-400px. */
@media (max-width:400px){
  /* Narrowest phones (320-400): burger + wordmark + Sign in share one row, so trim
     the pill's own gutters and shrink all three a notch. Without this the login
     pill rides over "People". */
  .site-header { padding:0 10px; }
  .site-header .wrap { gap:8px; padding:7px 6px 7px 8px; }
  .brand-mark { width:28px; height:28px; }
  .brand-mark svg { width:20px; height:20px; }
  .brand-name { font-size:14.5px; }
  .login-link { height:34px; padding:0 10px; font-size:12.5px; }
}
@media (max-width:340px){
  /* Below ~340px even that does not fit: keep the mark, drop the wordmark. */
  .brand-name { display:none; }
}
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* Cookie consent banner — opt-in gate for Clarity (built by consent.js) */
.cookie-consent {
  position:fixed; left:50%; bottom:16px; transform:translate(-50%, calc(100% + 28px));
  z-index:180; width:min(680px, calc(100vw - 24px));
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px;
  padding:16px 18px;
  background:color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  opacity:0; transition:transform .3s ease, opacity .3s ease;
}
.cookie-consent.is-visible { transform:translate(-50%, 0); opacity:1; }
.cookie-consent__text { margin:0; flex:1 1 280px; font-size:13.5px; line-height:1.5; color:var(--text-mid); }
.cookie-consent__text a { color:var(--accent); font-weight:600; }
.cookie-consent__text a:hover { text-decoration:underline; }
.cookie-consent__actions { display:flex; gap:10px; flex:0 0 auto; margin-left:auto; }
.cookie-consent__actions .btn { padding:9px 18px; font-size:14px; }
@media (max-width:520px){
  .cookie-consent { left:0; bottom:0; width:100%; transform:translateY(calc(100% + 28px)); border-radius:var(--r-lg) var(--r-lg) 0 0; }
  .cookie-consent.is-visible { transform:translateY(0); }
  .cookie-consent__actions { width:100%; }
  .cookie-consent__actions .btn { flex:1; }
}
@media (prefers-reduced-motion: reduce){ .cookie-consent { transition:opacity .2s ease; } }