/* ============================================================================
   Already Hired — landing ("House edge" direction).
   One claim per screen, every claim sitting next to a working mock of itself,
   one CTA ("Deal me in") with no rivals, nav order = page order, zero invented
   proof. Theme carries information — the dark card IS the product's real UI,
   never decoration.
   Faces are declared in fonts.css (preloaded in layout.tsx); this file owns
   tokens, the landing, and the shared chrome for /blog, /vs, /privacy, /terms.
   ========================================================================== */

:root{
  /* neutrals — widened ladder so sections physically separate */
  --bg:#f4f5f1; --paper:#ffffff; --sink:#eaece4; --sink-2:#e2e5dc;
  /* ink ladder: every step passes WCAG AA (4.5:1) on --bg for small text */
  --ink:#18201b; --ink-soft:#535c54; --ink-mute:#656d65; --ink-faint:#6a726a;
  --line:#dde0d8; --line-soft:#e9ebe4;
  /* green + a darker text-safe green for kickers/links (WCAG) */
  --green:#42cd98; --green-strong:#1f9c6d; --green-ink:#157a54; --mint:#6fd3a6; --on-green:#06170f;
  --honey:#e6b45e; --honey-ink:#8a6410;
  /* the four suits — first-class tokens */
  --suit-answer:#6fd3a6; --suit-clarify:#e6b45e; --suit-trap:#f0868f; --suit-define:#b49cf0;
  /* dark island surface (the product's real UI language) */
  --island:linear-gradient(168deg,#212a20,#141813);
  /* type system: Bricolage display · Hanken body · Plex mono "dealer voice" · Fraunces accent */
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,"SF Mono",Menlo,monospace;
  --accent:'Fraunces',Georgia,serif;
  /* spacing (8pt) + rhythm */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;
  --gap-head:clamp(28px,4vw,44px); --gutter:clamp(18px,2.2vw,26px);
  /* radius */
  --r-sm:10px;--r-md:16px;--r-lg:22px;--r-xl:28px;
  /* micro type — every mono label sits on one of three sizes:
     label (stand-alone meta lines) · micro (in-card labels) · nano (dense chips).
     Tracking is binary: --track for uppercase, .08em inside cramped mock chrome. */
  --fs-label:.72rem;--fs-micro:.64rem;--fs-nano:.56rem;
  /* elevation — green-tinted, tight spread; deep shadow reserved for dark islands */
  --sh-sm:0 1px 2px rgba(24,32,27,.06),0 2px 6px -3px rgba(24,32,27,.10);
  --sh-md:0 2px 4px rgba(24,32,27,.05),0 14px 30px -18px rgba(24,60,42,.28);
  --sh-lg:0 4px 10px rgba(24,32,27,.06),0 30px 60px -28px rgba(20,60,42,.34);
  --sh-island:0 34px 80px -36px rgba(0,0,0,.62),inset 0 1px 0 #ffffff14;
  /* motion */
  --dur-1:.18s; --dur-2:.5s; --dur-3:.8s; --stagger:80ms;
  --ease:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.22,1.15,.36,1);
  --track:.14em; --track-tight:.02em;
  --maxw:1120px; --pad:22px;
}

*{box-sizing:border-box}
/* scroll-padding keeps anchored sections clear of the sticky nav;
   interpolate-size lets the FAQ <details> animate to block-size:auto */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:68px;interpolate-size:allow-keywords}
html,body{margin:0;background:var(--bg)}
/* flex column so .doc-wrap can push the footer down on short content pages */
body{color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;min-height:100dvh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
/* images carry width/height attributes (so the box is reserved before they load);
   height:auto keeps them from being stretched when CSS sets only the width */
img{height:auto}
h1,h2,h3,h4,p,figure{margin:0}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:color-mix(in srgb,var(--green) 26%,transparent)}

.container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:clamp(64px,9vh,120px);position:relative}

.kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:500;
  font-size:var(--fs-label);letter-spacing:var(--track);text-transform:uppercase;color:var(--green-ink)}
.kicker .suit{color:var(--green-strong);font-size:.82rem}
/* .eyebrow — the kicker's twin, used by /blog + /vs headers (dot instead of suit) */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:500;font-size:var(--fs-label);
  letter-spacing:var(--track);text-transform:uppercase;color:var(--green-ink)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px color-mix(in srgb,var(--green) 60%,transparent)}
.eyebrow .suit{font-size:.86rem;color:var(--green-strong);transform:translateY(-.5px)}
.h1{font-family:var(--display);font-weight:800;letter-spacing:-.024em;line-height:1.0;
  font-size:clamp(2.9rem,6.6vw,5.4rem);text-wrap:balance}
.h2{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.06;
  font-size:clamp(2rem,3.8vw,3rem);text-wrap:balance}
.sub{color:var(--ink-soft);font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.55;text-wrap:pretty}
.accent{font-family:var(--accent);font-style:italic;font-weight:900;letter-spacing:-.01em}
.lead-b{font-weight:700;color:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);
  font-weight:600;line-height:1.2;border-radius:999px;white-space:nowrap;transition:transform var(--dur-1) var(--ease),
  background var(--dur-1),box-shadow var(--dur-1),border-color var(--dur-1)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-primary{padding:14px 24px;font-size:1rem;color:var(--on-green);background:var(--green);box-shadow:var(--sh-md)}
.btn-primary:hover{transform:translateY(-1px);background:var(--green-strong);box-shadow:var(--sh-lg)}
/* ghost matches primary's outer height exactly: 1px less padding each side pays for the border */
.btn-ghost{padding:13px 22px;font-size:1rem;color:var(--ink);border:1px solid var(--line);background:var(--paper)}
.btn-ghost:hover{border-color:var(--ink-mute);transform:translateY(-1px)}
.btn-sm{padding:10px 18px;font-size:.9rem}
.tlink{display:inline-flex;align-items:center;gap:6px;color:var(--green-ink);font-weight:600;font-size:.95rem}
.tlink .chev{transition:transform var(--dur-1) var(--ease)}
.tlink:hover .chev{transform:translateX(4px)}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}

/* ============================ NAV ============================ */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line-soft)}
.nav-in{max-width:1220px;margin:0 auto;padding:12px var(--pad);display:flex;align-items:center;gap:22px}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:800;font-size:1.08rem;letter-spacing:-.01em;white-space:nowrap}
.brand img,.brand .mark{height:30px;width:auto;flex:none}
.beta{font-family:var(--mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:var(--track);text-transform:uppercase;color:var(--green-ink);
  border:1px solid color-mix(in srgb,var(--green) 32%,var(--line));border-radius:999px;padding:3px 7px;background:color-mix(in srgb,var(--green) 9%,var(--paper))}
.nav-links{display:flex;gap:22px;margin-left:14px}
.nav-links a{font-size:.93rem;color:var(--ink-soft);transition:color var(--dur-1)}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:14px;margin-left:auto}
.nav-acct{font-size:.93rem;color:var(--ink-soft)}
.nav-acct:hover{color:var(--ink)}

/* ---- mobile menu: the dealer's table ----
   The burger opens the product's own surface — a dark island sheet slides in
   over a dimmed page and deals its rows in. CSS-only <details> disclosure;
   main.js only enhances it (tap a row / tap the dim / Esc all close). The
   primary CTA stays in the bar beside the burger: one button, always. */
.navmenu{display:none;position:relative;flex:none}

/* the burger — three bars that spring into an X once the table is open */
.navmenu-btn{list-style:none;cursor:pointer;position:relative;z-index:70;
  display:flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--paper);color:var(--ink);
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.navmenu-btn::-webkit-details-marker{display:none}
.navmenu-btn::marker{content:""}
.navmenu-btn:hover{border-color:var(--ink-faint)}
.navmenu-bars{position:relative;width:19px;height:12px}
.navmenu-bars i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
  transition:transform .28s var(--spring),opacity .16s var(--ease)}
.navmenu-bars i:nth-child(1){top:0}
.navmenu-bars i:nth-child(2){top:5px}
.navmenu-bars i:nth-child(3){top:10px}
.navmenu[open] .navmenu-btn{background:transparent;border-color:#ffffff33;color:#f3ecdd}
.navmenu[open] .navmenu-bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.navmenu[open] .navmenu-bars i:nth-child(2){opacity:0}
.navmenu[open] .navmenu-bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* the dimmed table + the sheet (positioned only while open) */
.navmenu[open] .navmenu-panel{position:fixed;inset:0;z-index:60;display:flex;
  background:color-mix(in srgb,#0a0f0b 58%,transparent);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:menuScrim .3s var(--ease) both}
.navmenu-sheet{position:relative;margin-left:auto;width:min(430px,100%);height:100%;overflow-y:auto;
  display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 76px) clamp(22px,6.5vw,32px) calc(env(safe-area-inset-bottom,0px) + 26px);
  background:var(--island);border-left:1px solid #2c3428;box-shadow:-34px 0 70px -34px rgba(0,0,0,.6)}
.navmenu[open] .navmenu-sheet{animation:menuSheet .4s var(--spring) both}
/* the dealt-card mint bloom along the top edge */
.navmenu-sheet::before{content:"";position:absolute;top:0;left:0;right:0;height:240px;pointer-events:none;
  background:radial-gradient(120% 100% at 84% 0,color-mix(in srgb,var(--suit-answer) 13%,transparent),transparent 66%)}

.navmenu-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:500;
  font-size:var(--fs-label);letter-spacing:var(--track);text-transform:uppercase;
  color:color-mix(in srgb,var(--suit-answer) 42%,#9aa89c);margin-bottom:12px}
.navmenu-eyebrow .suit{color:var(--suit-answer);font-size:.82rem}

/* the sections, dealt as big display rows */
.navmenu-nav{display:flex;flex-direction:column}
.navmenu-nav a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 2px;
  font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,6.2vw,1.92rem);letter-spacing:-.02em;line-height:1.04;
  color:#f3ecdd;border-bottom:1px solid #ffffff12;transition:color var(--dur-1) var(--ease)}
.navmenu-nav a:last-child{border-bottom:none}
.navmenu-nav a .chev{font-size:1.3rem;line-height:1;color:#6a756b;flex:none;
  transition:transform var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.navmenu-nav a:hover,.navmenu-nav a:focus-visible,.navmenu-nav a:active{color:var(--mint)}
.navmenu-nav a:hover .chev,.navmenu-nav a:focus-visible .chev,.navmenu-nav a:active .chev{color:var(--mint);transform:translateX(5px)}

/* the rail — quieter secondary links as chips */
.navmenu-extra{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.navmenu-extra a{font-weight:600;font-size:.98rem;color:#cbbfa8;padding:9px 15px;border:1px solid #2c3428;border-radius:999px;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.navmenu-extra a:hover,.navmenu-extra a:focus-visible{color:#f3ecdd;border-color:color-mix(in srgb,var(--suit-answer) 40%,#2c3428);background:#ffffff0a}

/* the play: sign in + the one CTA, divided from the sections above */
.navmenu-foot{margin-top:26px;padding-top:24px;border-top:1px solid #ffffff14;display:flex;flex-direction:column;gap:11px}
.navmenu-signin{display:flex;align-items:center;justify-content:center;padding:13px;border-radius:999px;
  border:1px solid #ffffff26;color:#f3ecdd;font-weight:600;font-size:1rem;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.navmenu-signin:hover,.navmenu-signin:focus-visible{border-color:var(--mint);color:var(--mint)}
.navmenu-foot .btn{width:100%;padding-block:15px}

/* on the dark table the global dark-ink focus ring is invisible — go mint */
.navmenu-nav a:focus-visible,.navmenu-extra a:focus-visible,.navmenu-signin:focus-visible,
.navmenu[open] .navmenu-btn:focus-visible{outline-color:var(--mint)}

@keyframes menuScrim{from{opacity:0}to{opacity:1}}
@keyframes menuSheet{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes menuDeal{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.navmenu[open] .navmenu-eyebrow,.navmenu[open] .navmenu-nav a,
.navmenu[open] .navmenu-extra,.navmenu[open] .navmenu-foot{animation:menuDeal .44s var(--ease) both}
.navmenu[open] .navmenu-eyebrow{animation-delay:.05s}
.navmenu[open] .navmenu-nav a:nth-child(1){animation-delay:.09s}
.navmenu[open] .navmenu-nav a:nth-child(2){animation-delay:.13s}
.navmenu[open] .navmenu-nav a:nth-child(3){animation-delay:.17s}
.navmenu[open] .navmenu-nav a:nth-child(4){animation-delay:.21s}
.navmenu[open] .navmenu-nav a:nth-child(5){animation-delay:.25s}
.navmenu[open] .navmenu-nav a:nth-child(6){animation-delay:.29s}
.navmenu[open] .navmenu-extra{animation-delay:.31s}
.navmenu[open] .navmenu-foot{animation-delay:.35s}

@media(max-width:960px){
  .nav-links,.nav-acct{display:none}
  .nav-right{margin-left:auto}
  .navmenu{display:block}
  /* the open menu is position:fixed; a backdrop-filter on .nav would capture it
     as the containing block, so the frosted bar goes solid on mobile */
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:color-mix(in srgb,var(--bg) 90%,transparent)}
  html:has(.navmenu[open]){overflow:hidden}
}
@media(max-width:430px){
  .nav .beta{display:none}
  .nav-in{gap:10px;padding-inline:14px}
}

/* ============================ HERO ============================ */
.hero{padding-block:clamp(40px,6vh,74px) clamp(56px,8vh,96px);position:relative;overflow:hidden;
  /* lit stage: a faint white bloom behind the headline + a paper->bg->sink
     vignette, so the H1 sits on the brightest patch and holds the contrast crown */
  background:
    radial-gradient(40% 32% at 50% 19%,color-mix(in srgb,#fff 55%,transparent),transparent 62%),
    radial-gradient(96% 84% at 50% 6%,var(--paper) 0%,var(--bg) 32%,var(--sink-2) 66%,#dde1d8 100%)}
/* the green "felt" pool the demo sits in — replaces the old wireframe dot-grid */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(46% 46% at 50% 82%,
    color-mix(in srgb,var(--green) 27%,transparent) 0%,
    color-mix(in srgb,var(--green) 9%,transparent) 46%,transparent 72%)}
.hero-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-copy{max-width:46rem;display:flex;flex-direction:column;align-items:center}
.hero .h1{margin-top:var(--s-5)}
.hero .sub{margin-top:var(--s-5);max-width:56ch}
.hero .sub b{font-weight:700;color:var(--ink)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:var(--s-6)}
.hero-meta{margin-top:var(--s-3);font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--track-tight);color:var(--ink-faint)}

/* the call scene: real product footage, full and central — the footage is ALREADY
   a full desktop, so it needs no outer window chrome; the video IS the frame.
   A blurred green spotlight-halo behind it seats it in the felt pool. */
.stage{position:relative;isolation:isolate;width:100%;max-width:1060px;margin:clamp(22px,3.4vw,40px) auto 0}
.stage::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:46%;transform:translate(-50%,-50%);width:90%;height:84%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--green) 35%,transparent),transparent 76%);
  filter:blur(36px)}
.callframe{position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 56px 112px -44px rgba(10,16,12,.55),0 16px 38px -22px rgba(10,16,12,.45),
    0 0 72px -4px color-mix(in srgb,var(--green) 32%,transparent)}
.callframe video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb,var(--green) 16%,#1c241d);background:#0f130d}
.eye-badge{position:absolute;top:14px;right:14px;z-index:4;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:var(--fs-nano);letter-spacing:.08em;text-transform:uppercase;color:#cfe4d4;
  background:rgba(9,13,9,.62);border:1px solid #2c352b;border-radius:999px;padding:6px 10px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.eye-badge svg{width:12px;height:12px}

/* the dealt Answer-card text atoms — shared by the .mo-card / .split-card / #tryah mocks.
   (The hero's own floating card was removed; the video's overlay already deals it.) */
.dealt-kind{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-weight:500;font-size:var(--fs-micro);
  letter-spacing:var(--track);text-transform:uppercase;color:color-mix(in srgb,var(--suit-answer) 84%,#fff)}
.dealt-kind .suit{font-size:.85rem;color:var(--suit-answer)}
.dealt-lead{margin-top:11px;font-weight:600;font-size:1.02rem;line-height:1.32;color:#f3ecdd;font-family:var(--sans)}
.dealt-beat{margin-top:9px;font-size:.85rem;line-height:1.45;color:#cbbfa8;padding-left:13px;position:relative}
.dealt-beat::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--suit-answer) 75%,transparent)}

.dealer{position:absolute;left:-30px;bottom:-24px;width:clamp(116px,13vw,168px);z-index:6;
  filter:drop-shadow(0 18px 22px rgba(20,30,22,.22));pointer-events:none}
@media(max-width:520px){
  /* keep the footage clear: the dealer sits out on small screens */
  .dealer{display:none}
  .eye-badge{top:12px;right:12px}
  /* phones play the portrait cut (media-gated <source>s in the markup), so the
     frame flips to 9:16 with it; capped so a wide-but-short window can't grow
     it past a sensible phone-column height */
  .callframe{max-width:430px;margin-inline:auto}
  .callframe video{aspect-ratio:9/16}
}

/* ============================ PROOFBAR ============================ */
.proofbar{border-block:1px solid var(--line-soft);background:color-mix(in srgb,var(--paper) 55%,var(--bg))}
.proof-in{max-width:var(--maxw);margin:0 auto;padding:18px var(--pad);display:flex;align-items:center;gap:clamp(16px,3vw,38px);flex-wrap:wrap}
.proof-label{font-family:var(--mono);font-weight:500;font-size:var(--fs-micro);letter-spacing:var(--track);text-transform:uppercase;color:var(--green-ink)}
.spec{display:flex;align-items:baseline;gap:8px;font-family:var(--mono)}
.spec b{font-weight:500;font-size:.95rem;color:var(--ink);letter-spacing:-.01em}
.spec span{font-size:var(--fs-label);color:var(--ink-mute)}
@media(max-width:700px){.proof-in{gap:12px 22px}.proof-label{flex-basis:100%}}

/* ============================ THE MOMENT (#how) ============================ */
.head-c{max-width:44rem}
.head-c .h2{margin-top:var(--s-4)}
.head-c .sub{margin-top:var(--s-4);max-width:52ch}
.moment-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);margin-top:var(--gap-head)}
.mo{border-radius:var(--r-lg);padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;gap:18px}
.mo-light{background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-md)}
.mo-dark{background:var(--island);border:1px solid #2c3428;box-shadow:var(--sh-island)}
.mo h3{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.015em}
.mo p{font-size:.98rem;line-height:1.55;color:var(--ink-soft);max-width:44ch}
.mo-dark h3{color:#f3ecdd}
.mo-dark p{color:#c8bda7}
.mo-mock{margin-top:auto;border-radius:var(--r-md)}
/* heard mock — the product's live "listening" surface: a lit audio-capture readout */
.heard{position:relative;overflow:hidden;flex:1;
  display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:15px 16px 14px;
  background:
    radial-gradient(132% 86% at 50% 124%,color-mix(in srgb,var(--green) 22%,transparent),transparent 68%),
    linear-gradient(168deg,#1b231c,#12160f);
  border:1px solid #2c3428;
  box-shadow:0 22px 46px -26px rgba(0,0,0,.7),inset 0 1px 0 #ffffff10}
.heard-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.heard-live{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:500;
  font-size:var(--fs-micro);letter-spacing:var(--track);text-transform:uppercase;color:color-mix(in srgb,var(--suit-trap) 82%,#fff)}
.heard-live .rec{width:7px;height:7px;border-radius:50%;background:var(--suit-trap);animation:recPing 2.4s ease-out infinite}
.heard-src{font-family:var(--mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.08em;text-transform:uppercase;color:#8a978b}
.heard-mid{display:flex;flex-direction:column;gap:11px}
.heard-timer{align-self:center;font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
  font-size:clamp(2rem,5.2vw,2.8rem);line-height:1;letter-spacing:.02em;color:#f3ecdd;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.heard-wave{display:flex;align-items:center;gap:2px;height:44px}
.heard-wave i{flex:1;min-width:0;height:100%;border-radius:1.5px;transform-origin:center;transform:scaleY(var(--h,.4));
  background:linear-gradient(to top,color-mix(in srgb,var(--green) 46%,#0b110c),var(--suit-answer));
  box-shadow:0 0 7px -2px color-mix(in srgb,var(--suit-answer) 55%,transparent);
  animation:heardWave 1.5s ease-in-out infinite;animation-delay:calc(var(--h,.4) * -1.7s)}
/* live capture (added by main.js when motion is allowed): the wave stops pulsing
   in place and instead scrolls — new levels enter at the head on the right and
   flow left — so each bar just glides to its next height as the reading shifts. */
.heard-wave.live i{animation:none;transition:transform .24s cubic-bezier(.4,0,.2,1)}
.heard-q{margin:0;font-family:var(--sans);font-weight:500;font-size:.92rem;line-height:1.42;color:#d8ccb6;text-wrap:pretty}
.heard-q .cur{display:inline-block;width:2px;height:1.02em;margin-left:3px;vertical-align:-.16em;background:var(--suit-answer);
  box-shadow:0 0 6px color-mix(in srgb,var(--suit-answer) 70%,transparent);animation:heardCaret 1.1s steps(1) infinite}
@keyframes heardWave{0%,100%{transform:scaleY(calc(var(--h,.4) * .68))}50%{transform:scaleY(var(--h,.4))}}
@keyframes recPing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--suit-trap) 60%,transparent)}70%,100%{box-shadow:0 0 0 8px transparent}}
@keyframes heardCaret{0%,100%{opacity:1}50%{opacity:0}}
.wave{display:flex;align-items:flex-end;gap:3px;height:26px}
.wave i{flex:1;background:color-mix(in srgb,var(--green) 55%,var(--sink-2));border-radius:2px;height:30%;
  animation:waveB 1.2s ease-in-out infinite;transform-origin:bottom}
.wave i:nth-child(3n){animation-delay:.15s;height:65%}
.wave i:nth-child(3n+1){animation-delay:.3s;height:45%}
.wave i:nth-child(5n){animation-delay:.45s;height:85%}
@keyframes waveB{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
/* dealt mock inside dark card */
.mo-card{border-radius:var(--r-md);padding:17px 18px;background:linear-gradient(168deg,#2a3220,#191e14);
  border:1px solid color-mix(in srgb,var(--suit-answer) 42%,#000);
  box-shadow:0 20px 44px -22px rgba(0,0,0,.7),0 0 34px -14px color-mix(in srgb,var(--suit-answer) 34%,transparent)}
.mo-card .dealt-lead{font-size:1.04rem}
.mo-hand{margin-top:var(--s-6)}
@media(max-width:860px){.moment-grid{grid-template-columns:1fr}}

/* ============================ THE HAND (#hand) ============================ */
.edge-lede{margin-top:var(--s-4);color:var(--ink-soft);font-size:1.08rem;line-height:1.55;max-width:56ch}
.edge-lede b{color:var(--ink);font-weight:600}
.hand{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);margin-top:var(--gap-head)}
.card{--hue:var(--suit-answer);position:relative;border-radius:var(--r-lg);padding:20px 20px 22px;background:var(--island);
  border:1px solid color-mix(in srgb,var(--hue) 30%,#000);box-shadow:var(--sh-island);
  transition:transform .3s var(--spring);will-change:transform}
/* hover glow lives on ::after and crossfades — opacity composites, box-shadow repaints */
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 22px 50px -20px color-mix(in srgb,var(--hue) 45%,transparent);transition:opacity .3s var(--ease)}
.card:hover{transform:translateY(-6px) rotate(-1.2deg)}
.card:hover::after{opacity:1}
.card.s-answer{--hue:var(--suit-answer)} .card.s-clarify{--hue:var(--suit-clarify)}
.card.s-trap{--hue:var(--suit-trap)} .card.s-define{--hue:var(--suit-define)}
.card-top{display:flex;align-items:center;justify-content:space-between}
.card-kind{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:500;font-size:var(--fs-micro);
  letter-spacing:var(--track);text-transform:uppercase;color:color-mix(in srgb,var(--hue) 82%,#fff)}
.card-kind .suit{font-size:1rem;color:var(--hue)}
.card-rank{font-family:var(--mono);font-size:var(--fs-label);color:#8f9b90}
.card-lead{margin-top:16px;font-weight:600;font-size:1.06rem;line-height:1.32;color:#f3ecdd}
.card-beat{margin-top:10px;font-size:.86rem;line-height:1.5;color:#c8bda7}
@media(max-width:900px){.hand{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.hand{grid-template-columns:1fr}}

/* ============================================================================
   "See your hand" — type-your-role interactive (#tryah). A clean job-title box
   with address-style autocomplete, then a master/detail "your screen": rounds
   check off on the LEFT, the dealt answer lands on the RIGHT, auto-advancing
   every 5s. The dealt card reuses .rp-card + the k-* suit hues so it reads as
   the real product. All tokens from :root — warm felt, not a cold terminal.
   ========================================================================== */
.tryah .head-c{margin-bottom:clamp(20px,2.6vw,28px);max-width:none;text-align:center}
.tryah .head-c .sub{margin-inline:auto}
/* shared dark-island card — ALSO consumed by try-ah.js (.tryah-card.rp-card.k-*) */
.rp-card{--hue:var(--suit-answer);position:relative;border-radius:var(--r-md);padding:22px 24px;
  background:var(--island);border:1px solid color-mix(in srgb,var(--hue) 30%,#000);box-shadow:var(--sh-island)}
.rp-card.k-answer{--hue:var(--suit-answer)}.rp-card.k-trap{--hue:var(--suit-trap)}
.rp-card.k-clarify{--hue:var(--suit-clarify)}.rp-card.k-define{--hue:var(--suit-define)}
.rp-kind{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:500;
  font-size:var(--fs-micro);letter-spacing:var(--track);text-transform:uppercase;color:color-mix(in srgb,var(--hue) 82%,#fff)}
.rp-suit{font-style:normal;font-size:.92rem;color:var(--hue)}
.rp-lead{margin-top:14px;font-weight:600;font-size:1.08rem;line-height:1.3;color:#f3ecdd}
.rp-beat{margin-top:11px;font-size:.9rem;line-height:1.45;color:#c8bda7;padding-left:13px;position:relative}
.rp-beat::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;border-radius:50%;
  background:color-mix(in srgb,var(--hue) 72%,transparent)}

/* ---- the job-title box ---- */
.tryah-console{position:relative;max-width:520px;margin:0 auto}
.tryah-form{position:relative;display:block}
.tryah-field{position:relative;display:flex;align-items:center}
.tryah-field svg{position:absolute;left:18px;width:20px;height:20px;color:var(--ink-faint);pointer-events:none}
.tryah-input{width:100%;padding:17px 20px 17px 50px;border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font:inherit;font-size:1.06rem;font-weight:500;
  box-shadow:0 14px 34px -24px rgba(26,35,29,.5);
  transition:border-color .2s,box-shadow .2s}
.tryah-input::placeholder{color:var(--ink-faint);font-weight:500}
.tryah-input:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 16%,transparent),0 14px 34px -24px rgba(26,35,29,.5)}
.tryah-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:50;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:7px;
  box-shadow:0 32px 66px -30px rgba(16,22,18,.52);max-height:326px;overflow:auto}
.tryah-suggest[hidden]{display:none}
.tryah-sug-head{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--ink-faint);padding:8px 12px 6px}
.tryah-sug{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;
  padding:12px 14px;border-radius:var(--r-sm);background:transparent;cursor:pointer;text-align:left;
  transition:background .14s}
.tryah-sug:hover,.tryah-sug.active{background:color-mix(in srgb,var(--green) 10%,var(--sink))}
.tryah-sug-label{font-weight:600;color:var(--ink);font-size:1rem}
.tryah-sug.active .tryah-sug-label{color:var(--green-strong)}
.tryah-sug-group{font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-faint);
  letter-spacing:var(--track-tight);white-space:nowrap}

/* ---- the stage: rounds (left) + your screen (right) ---- */
.tryah-stage{display:grid;grid-template-columns:minmax(290px,.9fr) minmax(0,1.1fr);gap:clamp(14px,2vw,24px);
  align-items:stretch;max-width:1000px;margin:clamp(26px,3.4vw,40px) auto 0;
  background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:clamp(14px,2.1vw,22px);
  box-shadow:0 46px 100px -64px rgba(26,35,29,.55)}
.tryah-rounds{display:flex;flex-direction:column;padding:clamp(8px,1.2vw,14px)}
.tryah-rounds-head{padding:6px 12px 16px}
.tryah-role{font-family:var(--display);font-weight:800;font-size:clamp(1.28rem,2.3vw,1.7rem);letter-spacing:-.025em;line-height:1.08}
.tryah-role-sub{margin-top:6px;font-family:var(--mono);font-size:var(--fs-label);
  letter-spacing:var(--track-tight);color:var(--ink-faint)}
.tryah-list{position:relative;display:flex;flex-direction:column;gap:4px}
.tryah-ind{position:absolute;left:0;right:0;top:0;height:64px;border-radius:14px;pointer-events:none;z-index:0;
  overflow:hidden;background:color-mix(in srgb,var(--green) 13%,var(--paper));
  border:1px solid color-mix(in srgb,var(--green) 32%,var(--line));
  box-shadow:0 14px 30px -20px color-mix(in srgb,var(--green) 55%,transparent);
  transition:transform .42s var(--ease),height .42s var(--ease)}
.tryah-ind-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);
  background:var(--green);box-shadow:0 0 10px color-mix(in srgb,var(--green) 75%,transparent)}
.tryah-q{position:relative;z-index:1;display:flex;gap:13px;align-items:flex-start;width:100%;
  padding:13px 15px;border-radius:14px;background:transparent;text-align:left;cursor:pointer;min-height:64px;
  transition:background .18s}
.tryah-q:hover:not(.active){background:var(--sink)}
.tryah-check{flex:0 0 auto;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;margin-top:1px;
  background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green-strong);
  transition:background .3s,color .3s,transform .3s var(--ease)}
.tryah-q.active .tryah-check{background:var(--green);color:var(--on-green);transform:scale(1.06)}
.tryah-tick{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tryah-tick path{stroke-dasharray:22;stroke-dashoffset:0}
.tryah-q-body{min-width:0}
.tryah-q-round{display:block;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--ink-faint);transition:color .3s}
.tryah-q.active .tryah-q-round{color:var(--green-strong)}
.tryah-q-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:4px;font-weight:600;font-size:.97rem;line-height:1.32;color:var(--ink-soft);transition:color .3s}
.tryah-q.active .tryah-q-text{color:var(--ink)}
.tryah-screen{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  min-height:308px;border-radius:20px;padding:clamp(20px,2.7vw,30px);
  background:radial-gradient(125% 100% at 72% 0%,#242c20,#14180f 68%);
  border:1px solid #2c3428;box-shadow:inset 0 1px 0 #ffffff10,0 30px 60px -34px rgba(0,0,0,.6)}
.tryah-screen::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 26%,color-mix(in srgb,var(--green) 15%,transparent),transparent 72%)}
.tryah-screen-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.tryah-cap{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:var(--fs-micro);letter-spacing:var(--track);text-transform:uppercase;color:color-mix(in srgb,var(--green) 78%,#fff)}
.tryah-cap::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 10px var(--green);animation:tryahPulse 2.4s var(--ease) infinite}
.tryah-pips{display:flex;align-items:center;gap:6px}
.tryah-pip{width:6px;height:6px;border-radius:99px;background:#4a5443;transition:width .4s var(--ease),background .4s}
.tryah-pip.on{width:18px;background:var(--green)}
.tryah-screen-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2vw,20px);
  margin-top:clamp(16px,2.4vw,24px)}
.tryah-ask{max-width:44ch}
.tryah-ask-label{display:block;font-family:var(--mono);font-size:var(--fs-micro);
  letter-spacing:var(--track);text-transform:uppercase;color:#98a08c;margin-bottom:7px}
.tryah-ask-q{font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.4;color:#e7ddc9;font-weight:500}
.tryah-card{padding:clamp(20px,2.4vw,26px);border-radius:18px;
  background:linear-gradient(168deg,#2a3220,#191e14);
  border:1px solid color-mix(in srgb,var(--hue) 42%,#000);
  box-shadow:0 26px 54px -26px rgba(0,0,0,.7),0 0 40px -16px color-mix(in srgb,var(--hue) 34%,transparent),inset 0 1px 0 #ffffff12}
.tryah-card .rp-kind{font-size:var(--fs-label)}
.tryah-card .rp-suit{font-size:1.05rem}
.tryah-card .rp-lead{margin-top:16px;font-weight:800;letter-spacing:-.02em;line-height:1.18;
  font-size:clamp(1.34rem,2.3vw,1.86rem);color:#f7f0e2}
.tryah-card .rp-beat{margin-top:13px;font-size:clamp(.95rem,1.35vw,1.04rem);line-height:1.5;color:#d8ccb4;padding-left:15px}
.tryah-card .rp-beat::before{top:.62em}
.tryah-hint{text-align:center;color:var(--ink-faint);font-size:.85rem;margin:14px auto 0;max-width:46ch}
.tryah-hint b{color:var(--ink-soft);font-weight:600}
.tryah-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- motion: one orchestrated reveal, a re-deal on change, the 5s hold ---- */
@keyframes tryahRowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes tryahDraw{from{stroke-dashoffset:22}to{stroke-dashoffset:0}}
@keyframes tryahDeal{0%{opacity:0;transform:translateY(16px) rotate(-3deg) scale(.985)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes tryahHold{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tryahPulse{0%,100%{opacity:.5;transform:scale(.82)}50%{opacity:1;transform:scale(1)}}
@keyframes tryahFade{from{opacity:0}to{opacity:1}}
.tryah-stage.revealing .tryah-q{animation:tryahRowIn .5s var(--ease) both;animation-delay:calc(var(--qi) * .07s + .04s)}
.tryah-stage.revealing .tryah-check .tryah-tick path{animation:tryahDraw .5s ease backwards;animation-delay:calc(var(--qi) * .07s + .2s)}
.tryah-stage.revealing .tryah-ind{animation:tryahFade .5s var(--ease) both;animation-delay:.08s}
.tryah-stage.revealing .tryah-screen{animation:tryahRowIn .55s var(--ease) both;animation-delay:.1s}
.tryah-card.deal{animation:tryahDeal .52s var(--ease)}
@media(max-width:840px){
  .tryah-stage{grid-template-columns:1fr;gap:14px;max-width:560px}
  .tryah-screen{min-height:0}
}

/* ============================ INVISIBLE (#invisible) ============================ */
/* three proof dioramas: each claim demonstrated, not asserted */
.inv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:var(--gap-head)}
.inv-card{display:flex;flex-direction:column;gap:15px;margin:0;border-radius:var(--r-lg);padding:14px 14px 20px;
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-md)}
.inv-mock{position:relative;border-radius:var(--r-md);overflow:hidden;height:250px}
.inv-cap{padding:0 2px;font-size:.94rem;line-height:1.55;color:var(--ink-soft)}
.inv-cap b{color:var(--ink);font-weight:700}

/* 1 — participants panel */
.inv-parts{background:var(--sink);border:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:9px}
.parts-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:600;font-size:.9rem;padding:2px 2px 4px}
.nobots{font-family:var(--mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.08em;text-transform:uppercase;color:var(--green-ink);
  background:color-mix(in srgb,var(--green) 14%,#fff);border:1px solid color-mix(in srgb,var(--green) 34%,var(--line));
  border-radius:999px;padding:4px 8px;white-space:nowrap}
.part-row{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line-soft);border-radius:12px;padding:9px 12px}
.part-av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.7rem;
  color:var(--green-ink);background:color-mix(in srgb,var(--green) 18%,#fff)}
.part-name{font-weight:600;font-size:.88rem}
.part-role{margin-left:auto;font-family:var(--mono);font-size:var(--fs-nano);color:var(--ink-mute);text-transform:uppercase;letter-spacing:.08em}
.part-row.empty{border-style:dashed;justify-content:center;color:var(--ink-faint);font-size:.8rem;background:transparent}

/* 2 — the see/unsee slider */
.split-wrap{--split:58%;background:#12160f;cursor:ew-resize;touch-action:none}
.split-scene{position:absolute;inset:0;padding:12px;background:radial-gradient(120% 90% at 50% 0%,#2b3630,#12160f 70%)}
.split-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;height:100%}
.split-tile{position:relative;border-radius:10px;background:linear-gradient(165deg,#232d24,#161b14);border:1px solid #2a332a;display:grid;place-items:center}
.sp-av{width:38%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 210deg,#3b4a3e,#28312a,#3b4a3e);border:1px solid #3a463c}
.sp-tag{position:absolute;left:9px;bottom:7px;font-family:var(--mono);font-size:var(--fs-nano);letter-spacing:.08em;color:#a9b7ab}
.split-you{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.split-you::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:2px solid color-mix(in srgb,var(--green) 60%,transparent)}
.split-card{position:absolute;left:12px;bottom:12px;width:min(64%,215px);border-radius:12px;padding:12px 13px;
  background:var(--island);border:1px solid color-mix(in srgb,var(--suit-answer) 36%,#000);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7),0 0 28px -10px color-mix(in srgb,var(--suit-answer) 32%,transparent)}
.split-card .dealt-kind{font-size:var(--fs-nano);letter-spacing:.08em}
.split-card p{margin-top:7px;font-weight:600;font-size:.88rem;line-height:1.3;color:#f3ecdd}
.split-chip{position:absolute;top:10px;z-index:2;font-family:var(--mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.08em;
  text-transform:uppercase;padding:5px 9px;border-radius:999px;background:rgba(9,13,9,.62);border:1px solid #2c352b;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.split-chip.you{left:10px;color:color-mix(in srgb,var(--mint) 85%,#fff)}
.split-chip.they{right:10px;color:#9fb0a4}
.split-bar{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#e8efe8;transform:translateX(-1px);
  box-shadow:0 0 12px rgba(0,0,0,.55);pointer-events:none;z-index:3}
.split-handle{position:absolute;top:50%;left:var(--split);transform:translate(-50%,-50%);z-index:4;width:32px;height:32px;
  border-radius:50%;background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-md);
  display:grid;place-items:center;pointer-events:none;font-family:var(--mono);font-size:.66rem;color:var(--ink-soft)}
.split-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:5}
.split-wrap:has(.split-range:focus-visible){outline:2px solid var(--ink);outline-offset:3px}

/* 3 — audio, processed live */
.inv-audio{background:var(--island);border:1px solid #2c3428;padding:20px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.inv-audio .wave{height:38px}
.inv-audio .wave i{background:color-mix(in srgb,var(--green) 42%,#20281f)}
.aud-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--mono);
  font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase}
.aud-row span{color:#9fb3a5;white-space:nowrap}
.aud-row b{font-weight:500;color:var(--mint);text-align:right}
.aud-row.kept b{color:#e7ddc9}

@media(max-width:900px){.inv-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto;margin-top:var(--gap-head)}}
.platforms{display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,34px);flex-wrap:wrap;margin-top:var(--s-7)}
.plat-label{font-family:var(--mono);font-weight:500;font-size:var(--fs-micro);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-mute);flex-basis:100%;text-align:center}
.plat{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.95rem;color:var(--ink-soft)}
.plat img{height:22px;width:22px}
.plat-more{font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-mute)}

/* ============================ START (#start) ============================ */
/* #start rides directly on #invisible's platforms row — one breath, not a full section gap */
#start.section{padding-top:0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:var(--gap-head);counter-reset:step}
.step{position:relative;border-radius:var(--r-lg);padding:22px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:18px;right:18px;
  font-family:var(--mono);font-weight:500;font-size:var(--fs-label);color:var(--green-ink);
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--green) 12%,var(--paper));border:1px solid color-mix(in srgb,var(--green) 30%,var(--line))}
.step h3{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.01em;padding-right:36px}
.step p{margin-top:8px;font-size:.94rem;line-height:1.55;color:var(--ink-soft)}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* ============================ PRICING (#pricing) ============================ */
.pricing{background:color-mix(in srgb,var(--paper) 55%,var(--bg));border-block:1px solid var(--line-soft)}
/* currency is display-only — Stripe charges USD, so the note stays honest */
.cur-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:var(--s-5)}
.cur-label{font-family:var(--mono);font-weight:500;font-size:var(--fs-micro);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-mute)}
.cur-picker{position:relative;display:inline-flex;align-items:center;flex:none}
.cur-select{appearance:none;-webkit-appearance:none;font-family:var(--mono);font-weight:500;font-size:.8rem;letter-spacing:.04em;
  color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:8px 32px 8px 14px;cursor:pointer;
  transition:border-color var(--dur-1) var(--ease)}
.cur-select:hover{border-color:var(--ink-faint)}
.cur-picker::after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;pointer-events:none;
  border-right:1.6px solid var(--ink-mute);border-bottom:1.6px solid var(--ink-mute);transform:translateY(-70%) rotate(45deg)}
.cur-note{flex-basis:100%;font-family:var(--mono);font-weight:500;font-size:var(--fs-label);letter-spacing:var(--track-tight);color:var(--ink-mute)}
.cur-note[hidden]{display:none}

.price-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gutter);margin-top:var(--gap-head);align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);padding:24px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-md)}
.plan.pop{border-color:color-mix(in srgb,var(--green) 45%,var(--line));box-shadow:var(--sh-lg)}
.plan-badge{position:absolute;top:-11px;left:20px;font-family:var(--mono);font-weight:500;font-size:var(--fs-nano);
  letter-spacing:.08em;text-transform:uppercase;color:var(--on-green);background:var(--green);
  border-radius:999px;padding:4px 10px}
.plan-name{font-family:var(--display);font-weight:700;font-size:1.15rem}
.plan-price{margin-top:12px;display:flex;align-items:baseline;gap:6px}
.plan-price b{font-family:var(--display);font-weight:800;font-size:2.3rem;letter-spacing:-.03em}
.plan-price span{color:var(--ink-mute);font-size:.95rem}
.plan-day{margin-top:2px;font-family:var(--mono);font-size:var(--fs-label);color:var(--green-ink)}
/* flex:1 pushes every card's CTA + note onto one shared row across the grid */
.plan-for{margin-top:12px;font-size:.93rem;line-height:1.5;color:var(--ink-soft);flex:1}
.plan .btn{margin-top:18px;width:100%}
.plan-note{margin-top:12px;font-family:var(--mono);font-size:var(--fs-label);line-height:1.6;color:var(--ink-soft)}
.feats{grid-column:1/-1;border-radius:var(--r-lg);padding:24px;background:transparent;border:1px dashed var(--line);display:flex;flex-direction:column}
.feats h3{font-family:var(--mono);font-weight:500;font-size:var(--fs-micro);letter-spacing:var(--track);text-transform:uppercase;color:var(--green-ink)}
.feats ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.feats li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;line-height:1.45;color:var(--ink-soft)}
.feats li::before{content:"✓";flex:none;color:var(--green-strong);font-weight:700;transform:translateY(-1px)}
.feats .fine{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:var(--fs-label);line-height:1.7;color:var(--ink-soft)}
.fn{color:var(--green-strong);font-weight:700}
.price-compare{max-width:720px;margin:var(--s-6) auto 0;text-align:center;font-size:.9rem;line-height:1.65;color:var(--ink-soft)}
.price-compare b{color:var(--ink);font-weight:700;white-space:nowrap}
/* the math card */
.calc{max-width:760px;margin:var(--s-7) auto 0;border-radius:var(--r-lg);padding:24px;
  background:var(--island);border:1px solid #2c3428;box-shadow:var(--sh-island);color:#e7ddc9}
.calc h3{font-family:var(--display);font-weight:700;font-size:1.15rem;color:#f3ecdd}
.calc-row{display:flex;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap}
.calc-row label{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:var(--track);text-transform:uppercase;color:#9fb3a5}
.calc input[type=range]{flex:1;min-width:200px;accent-color:var(--green)}
.calc-sal{font-family:var(--mono);font-size:.85rem;color:var(--mint);min-width:7ch;text-align:right}
.calc-line{margin-top:14px;font-size:1.05rem;line-height:1.5;color:#e7ddc9}
.calc-line b{color:var(--mint);font-weight:700}
.calc-fine{margin-top:6px;font-size:.85rem;color:#b3bda9}
@media(max-width:760px){.price-grid{grid-template-columns:1fr}}

/* ============================ FAQ (#faq) ============================ */
.faq-list{max-width:760px;margin:var(--gap-head) auto 0;display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;
  cursor:pointer;padding:17px 20px;font-weight:600;font-size:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--mono);font-size:1.1rem;color:var(--green-strong);transition:transform var(--dur-1) var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 20px 18px;color:var(--ink-soft);font-size:.96rem;line-height:1.6;max-width:64ch}
/* smooth open/close where ::details-content + interpolate-size are supported; elsewhere it snaps as before */
.faq-item::details-content,.doc-faq details::details-content{opacity:0;block-size:0;overflow-y:clip;
  transition:content-visibility .32s allow-discrete,opacity .32s var(--ease),block-size .32s var(--ease)}
.faq-item[open]::details-content,.doc-faq details[open]::details-content{opacity:1;block-size:auto}
.faq-ask{margin-top:var(--s-6);text-align:center}

/* ============================ CLOSE (dark act) ============================ */
.act{position:relative;overflow:hidden;background:#12160f;color:#eef3ee;text-align:center;
  padding-block:clamp(72px,11vh,132px)}
.act::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 80% at 50% -10%,color-mix(in srgb,var(--green) 22%,transparent),transparent 70%);opacity:.7}
.act .container{position:relative;z-index:1}
.act .kicker{color:var(--mint)}
.act-big{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(2.2rem,4.8vw,3.5rem);max-width:16ch;margin:var(--s-5) auto 0;text-wrap:balance}
.act-sub{margin:var(--s-4) auto 0;max-width:44ch;color:#b9c4b6;font-size:1.05rem;line-height:1.6}
.act-peek{width:clamp(150px,20vw,210px);margin:0 auto var(--s-2);filter:drop-shadow(0 14px 20px rgba(0,0,0,.4))}
.act .hero-cta{justify-content:center}
.cta-note{margin-top:var(--s-4);display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--fs-label);color:#9fb3a5}
.cta-note .tick{color:var(--mint)}

/* ============================ FOOTER ============================ */
footer{border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg) 40%,#fff);padding:48px var(--pad) 40px}
.foot-in{max-width:var(--maxw);margin:0 auto;display:flex;gap:40px 64px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between}
.foot-brand{max-width:34ch}
.foot-copy{margin-top:14px;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:var(--track-tight);color:var(--ink-mute);line-height:1.7}
.foot-cols{display:flex;gap:clamp(28px,6vw,64px);flex-wrap:wrap}
.foot-col h4{font-family:var(--mono);font-weight:500;font-size:var(--fs-micro);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-mute)}
.foot-col a{display:block;margin-top:10px;font-size:.92rem;color:var(--ink-soft)}
.foot-col a:hover{color:var(--ink)}

/* ============================ MOTION ============================ */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes deal{from{opacity:0;transform:translate(-46px,26px) rotate(-9deg) scale(.9)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

html.js .hero-copy .kicker,html.js .hero-copy .h1,html.js .hero-copy .sub,html.js .hero-copy .hero-cta,html.js .hero-copy .hero-meta{opacity:0;animation:rise .6s var(--ease) forwards}
html.js .hero-copy .kicker{animation-delay:.05s}
html.js .hero-copy .h1{animation-delay:.14s}
html.js .hero-copy .sub{animation-delay:.26s}
html.js .hero-copy .hero-cta{animation-delay:.36s}
html.js .hero-copy .hero-meta{animation-delay:.44s}
html.js .stage{opacity:0;animation:rise .7s var(--ease) .2s forwards}
/* deal-ins hold their from-state via fill:both (the keyframes own the transform), then
   main.js adds .landed on animationend to RELEASE the animation — a lingering
   fill:forwards outranks :hover and inline styles, which kept the pointer tilt dead */
html.js .stage .dealt{opacity:0;animation:deal .9s var(--spring) .8s both}
html.js .dealer{opacity:0;animation:rise .6s var(--ease) .55s forwards}

html.js .hand .card{opacity:0}
html.js .hand.dealt-in .card{animation:deal .7s var(--spring) both}
html.js .stage .dealt.landed,html.js .hand.dealt-in .card.landed{animation:none;opacity:1}
.hand.dealt-in .card:nth-child(1){animation-delay:.02s}
.hand.dealt-in .card:nth-child(2){animation-delay:.12s}
.hand.dealt-in .card:nth-child(3){animation-delay:.22s}
.hand.dealt-in .card:nth-child(4){animation-delay:.32s}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.seen{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1;transform:none}
/* grids cascade: siblings crossing the viewport together land as a dealt sequence */
.moment-grid>.reveal:nth-child(2),.steps>.reveal:nth-child(2),.inv-grid>.reveal:nth-child(2),.price-grid>.reveal:nth-child(2){transition-delay:.07s}
.steps>.reveal:nth-child(3),.inv-grid>.reveal:nth-child(3),.price-grid>.reveal:nth-child(3){transition-delay:.14s}
.price-grid>.reveal:nth-child(4){transition-delay:.21s}
/* the closing act enters as one orchestrated moment */
.act .kicker.reveal{transition-delay:.05s}
.act .act-big.reveal{transition-delay:.12s}
.act .act-sub.reveal{transition-delay:.2s}
.act .hero-cta.reveal{transition-delay:.28s}
.act .cta-note.reveal{transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important;transition-delay:0s!important}
  ::before,::after{animation-duration:.001s!important;transition-duration:.001s!important}
  /* separate rule: browsers without ::details-content drop only this line */
  ::details-content{transition-duration:.001s!important}
  .hero-copy .kicker,.hero-copy .h1,.hero-copy .sub,.hero-copy .hero-cta,.hero-copy .hero-meta,
  .stage,.stage .dealt,.dealer,.hand .card,.reveal{opacity:1!important;transform:none!important}
  .wave i{animation:none;transform:none}
  .heard-wave i{animation:none;transform:scaleY(var(--h,.4))}
  .heard-live .rec,.heard-q .cur{animation:none}
  .tryah-cap::before{animation:none}
  .tryah-card.deal{animation:none}
  .tryah-ind,.tryah-pip,.tryah-check{transition:none}
}

/* ============================ CONTENT PAGES (blog / compare) ============================ */
.doc-wrap{flex:1 0 auto;padding:clamp(40px,7vw,84px) var(--pad) clamp(56px,8vw,96px)}
.doc-container{max-width:760px;margin:0 auto}
.crumbs{display:flex;align-items:center;gap:9px;font-size:.82rem;color:var(--ink-faint);margin-bottom:22px}
.crumbs a{color:var(--ink-soft)}
.crumbs a:hover{color:var(--green-strong)}
.doc-title{font-family:var(--display);font-size:clamp(2rem,5vw,3rem);line-height:1.06;letter-spacing:-.02em;font-weight:800;margin:14px 0 0}
.doc-lede{font-size:clamp(1.06rem,2vw,1.22rem);line-height:1.55;color:var(--ink-soft);margin-top:18px;max-width:62ch}
.doc-meta{margin-top:16px;font-size:.82rem;color:var(--ink-faint);letter-spacing:.01em}

/* prose */
.prose{margin-top:clamp(28px,4vw,44px);font-size:1.06rem;line-height:1.72;color:var(--ink)}
.prose > *:first-child{margin-top:0}
.prose h2{font-family:var(--display);font-size:clamp(1.4rem,3vw,1.85rem);line-height:1.2;letter-spacing:-.015em;font-weight:800;margin:2.2em 0 .55em;scroll-margin-top:84px}
.prose h3{font-family:var(--display);font-size:1.2rem;line-height:1.28;font-weight:700;margin:1.7em 0 .5em}
.prose p{margin:0 0 1.15em}
.prose a{color:var(--green-strong);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover{color:var(--ink)}
.prose strong{font-weight:700;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.35em}
.prose li{margin:.4em 0}
.prose li::marker{color:var(--green-strong)}
.prose blockquote{margin:1.6em 0;padding:6px 0 6px 20px;border-left:3px solid var(--green);color:var(--ink-soft);font-style:italic}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--sink);padding:.12em .4em;border-radius:6px}
.prose pre{background:var(--ink);color:#eaf0ea;padding:18px 20px;border-radius:14px;overflow-x:auto;margin:1.6em 0;font-size:.9rem;line-height:1.6}
.prose pre code{background:none;padding:0}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.prose img{max-width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.96rem}
.prose th,.prose td{border:1px solid var(--line);padding:10px 13px;text-align:left}
.prose thead th{background:var(--sink)}

/* comparison matrix */
.vs-table-wrap{margin:clamp(28px,4vw,40px) 0 8px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.vs-table{width:100%;border-collapse:collapse;font-size:.96rem;min-width:520px}
.vs-table th,.vs-table td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
.vs-table thead th{background:var(--sink);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
.vs-table tbody th{font-weight:600;color:var(--ink);width:32%}
.vs-table td{color:var(--ink-soft)}
.vs-table .col-us{background:color-mix(in srgb,var(--green) 8%,transparent)}
.vs-table thead .col-us{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green-strong)}
.vs-table tbody tr:last-child th,.vs-table tbody tr:last-child td{border-bottom:0}
.vs-table .cell-yes{color:var(--green-strong);font-weight:600}
.vs-table .cell-no{color:var(--ink-faint)}

/* verdict + faq + cta */
.vs-verdict{margin:clamp(30px,4vw,42px) 0;padding:24px 26px;background:var(--sink);border:1px solid var(--line);border-radius:18px}
.vs-verdict h2{margin:0 0 10px;letter-spacing:.02em;text-transform:uppercase;font-size:.78rem;color:var(--ink-faint);font-weight:700}
.vs-verdict p{margin:0;font-size:1.08rem;line-height:1.6;color:var(--ink)}
.doc-faq{margin-top:clamp(34px,5vw,52px)}
.doc-faq h2{font-family:var(--display);font-size:1.5rem;font-weight:800;margin:0 0 16px;letter-spacing:-.01em}
.doc-faq details{border-top:1px solid var(--line);padding:0}
.doc-faq details:last-child{border-bottom:1px solid var(--line)}
.doc-faq summary{cursor:pointer;font-weight:600;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;gap:14px;padding:16px 0}
.doc-faq summary::after{content:"+";color:var(--green-strong);font-weight:400;font-size:1.3rem;line-height:1}
.doc-faq details[open] summary::after{content:"–"}
.doc-faq details p{margin:12px 0 0;color:var(--ink-soft);line-height:1.6;padding-bottom:16px}
.doc-cta{margin-top:clamp(44px,6vw,64px);padding:clamp(28px,4vw,40px);border-radius:var(--r-lg);text-align:center;
  background:linear-gradient(160deg,color-mix(in srgb,var(--green) 12%,var(--paper)),var(--paper));border:1px solid var(--line)}
.doc-cta h3{font-family:var(--display);font-size:clamp(1.3rem,3vw,1.7rem);font-weight:800;letter-spacing:-.01em;margin:0 0 10px}
.doc-cta p{color:var(--ink-soft);max-width:52ch;margin:0 auto 22px;line-height:1.55}

/* index card grids */
.post-grid{margin-top:clamp(32px,5vw,48px);display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.post-card{display:flex;flex-direction:column;padding:26px;background:var(--paper);border:1px solid var(--line);border-radius:18px;
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.post-card:hover{border-color:color-mix(in srgb,var(--green) 55%,var(--line));transform:translateY(-3px);
  box-shadow:0 22px 42px -30px color-mix(in srgb,var(--ink) 60%,transparent)}
.post-kicker{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green-strong);font-weight:700}
.post-card h2{font-family:var(--display);font-size:1.2rem;line-height:1.25;font-weight:700;margin:12px 0 8px;letter-spacing:-.01em}
.post-card p{font-size:.95rem;color:var(--ink-soft);line-height:1.5;margin:0 0 18px;flex:1}
.post-more{font-size:.9rem;font-weight:600;color:var(--green-strong)}

/* related comparisons */
.doc-related{margin-top:clamp(40px,6vw,60px);border-top:1px solid var(--line);padding-top:26px}
.doc-related h2{font-family:var(--display);font-size:1.15rem;font-weight:800;letter-spacing:-.01em;margin:0 0 14px}
.doc-related ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.doc-related a{color:var(--green-strong);font-weight:600;font-size:.98rem}
.doc-related a:hover{color:var(--ink)}

/* mobile hint: the comparison table scrolls to reveal the competitor column */
.vs-swipe{display:none}
@media(max-width:600px){.vs-swipe{display:block;font-size:.75rem;color:var(--ink-faint);margin:20px 0 -4px}}