/* Tokens from pipeline/design.py. Do not redefine them here. */

:root{
  /* THE VIOLET WORLD (her redesign brief, 5 Sep 2026, second pass). Light is
     the default. ONE token set, two scopes: never hardcode a colour outside
     this block.

     White and light-lilac surfaces with a living violet opportunity network
     running through them. Blue is no longer a brand colour anywhere; it
     survives only where a categorical data series genuinely needs a hue. */
  --void:#FAF7FF; --surface:#FFFFFF; --surface-2:#F3EEFF; --surface-3:#E8DEFF;
  --line:#E7DFFA; --line-2:#D2C4F0; --line-3:#AF9BDE;
  --text:#2D2340; --muted:#6E6485; --faint:#6A6182;
  /* the inverted feature slab is deep plum, so a panel still reads as a panel */
  --paper:#55299F; --paper-2:#7C3AED; --ink:#FFFFFF; --ink-2:#EADFFF; --ink-3:#C9B4F5;
  --paper-btn:#FFFFFF; --paper-btn-ink:#55299F;
  --paper-line:rgba(255,255,255,.34); --paper-hover:rgba(255,255,255,.10);
  --capital:#6D28D9; --capital-dim:rgba(139,92,246,.11); --capital-ink:#FFFFFF;
  --capital-fill:#8B5CF6; --capital-glow:rgba(139,92,246,.42);
  --opp:#7C3AED; --opp-dim:rgba(167,139,250,.18); --opp-fill:#A78BFA;
  --change:#8A5300; --change-dim:rgba(243,179,76,.22); --change-fill:#F3B34C;
  --change-glow:rgba(243,179,76,.62);
  --verified:#276B4A; --verified-dim:rgba(76,175,122,.18); --verified-fill:#4CAF7A;
  /* AfterRaise intelligence. Warm gold now carries movement, so our own reading
     is marked in a magenta-leaning plum: unmistakably ours, unmistakably not a
     fact, and a different hue from both the violet actions and the gold marks.
     --insight is the honest name; --amber stays as an alias so nothing breaks. */
  --insight:#8B2FA8; --insight-dim:rgba(178,88,209,.16); --insight-fill:#B258D1;
  --amber:var(--insight); --amber-dim:var(--insight-dim); --amber-fill:var(--insight-fill);
  /* public signal: the neutral baseline layer, nobody's claim, so it is a
     desaturated slate rather than the old brand blue */
  --signal:#574F6E; --signal-dim:rgba(87,79,110,.11);
  --momentum:var(--change); --momentum-dim:var(--change-dim);
  --hot:var(--change); --hot-dim:var(--change-dim);
  --us:#644B9E; --uk:#0F6E78; --eu:#9A3D8F;
  --us-dim:rgba(100,75,158,.10); --uk-dim:rgba(15,110,120,.10); --eu-dim:rgba(154,61,143,.10);
  --chrome:rgba(255,255,255,.80); --chrome-2:rgba(255,255,255,.95);
  --chrome-3:rgba(243,238,255,.98);
  --shadow:0 1px 2px rgba(45,35,64,.05),0 22px 48px -30px rgba(63,42,120,.34);
  --shadow-card:0 1px 2px rgba(45,35,64,.04),0 10px 28px -18px rgba(63,42,120,.24);
  --ease:cubic-bezier(.16,1,.3,1);
  --t-micro:180ms; --t-std:320ms; --t-slow:520ms;
  --gut:clamp(18px,4.5vw,64px);
  --r-data:5px; --r-card:10px; --r-pill:999px;
  --sans:Geist,"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
}

/* NIGHT: the same design inverted. Deep plum night, never black. */
:root[data-theme="dark"]{
  --void:#14102A; --surface:#211738; --surface-2:#291D45; --surface-3:#342557;
  --line:#322256; --line-2:#412F68; --line-3:#594783;
  --text:#F2EEFF; --muted:#B8AED4; --faint:#9A90B8;
  --paper:#EFE9FF; --paper-2:#E1D6FF; --ink:#1A1533; --ink-2:#453A70; --ink-3:#67589C;
  --paper-btn:#7C3AED; --paper-btn-ink:#FFFFFF;
  --paper-line:rgba(26,21,51,.28); --paper-hover:rgba(26,21,51,.07);
  --capital:#B79DFF; --capital-dim:rgba(183,157,255,.15); --capital-ink:#14102A;
  --capital-fill:#8B5CF6; --capital-glow:rgba(167,139,250,.45);
  --opp:#C9B6FF; --opp-dim:rgba(201,182,255,.15); --opp-fill:#A78BFA;
  --change:#F5C069; --change-dim:rgba(245,192,105,.16); --change-fill:#F3B34C;
  --change-glow:rgba(243,179,76,.55);
  --verified:#6FD3A1; --verified-dim:rgba(111,211,161,.15); --verified-fill:#4CAF7A;
  --insight:#DB9BF0; --insight-dim:rgba(219,155,240,.15); --insight-fill:#B258D1;
  --amber:var(--insight); --amber-dim:var(--insight-dim); --amber-fill:var(--insight-fill);
  --signal:#B6ADCB; --signal-dim:rgba(182,173,203,.14);
  --us:#AE9AE8; --us-dim:rgba(174,154,232,.13);
  --uk:#6FC5D0; --uk-dim:rgba(111,197,208,.13);
  --eu:#E29ADA; --eu-dim:rgba(226,154,218,.13);
  --chrome:rgba(20,16,42,.82); --chrome-2:rgba(20,16,42,.94);
  --chrome-3:rgba(20,16,42,.97);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 24px 60px -30px rgba(0,0,0,.8);
  --shadow-card:0 1px 2px rgba(0,0,0,.3),0 10px 28px -18px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --void:#14102A; --surface:#211738; --surface-2:#291D45; --surface-3:#342557;
  --line:#322256; --line-2:#412F68; --line-3:#594783;
  --text:#F2EEFF; --muted:#B8AED4; --faint:#9A90B8;
  --paper:#EFE9FF; --paper-2:#E1D6FF; --ink:#1A1533; --ink-2:#453A70; --ink-3:#67589C;
  --paper-btn:#7C3AED; --paper-btn-ink:#FFFFFF;
  --paper-line:rgba(26,21,51,.28); --paper-hover:rgba(26,21,51,.07);
  --capital:#B79DFF; --capital-dim:rgba(183,157,255,.15); --capital-ink:#14102A;
  --capital-fill:#8B5CF6; --capital-glow:rgba(167,139,250,.45);
  --opp:#C9B6FF; --opp-dim:rgba(201,182,255,.15); --opp-fill:#A78BFA;
  --change:#F5C069; --change-dim:rgba(245,192,105,.16); --change-fill:#F3B34C;
  --change-glow:rgba(243,179,76,.55);
  --verified:#6FD3A1; --verified-dim:rgba(111,211,161,.15); --verified-fill:#4CAF7A;
  --insight:#DB9BF0; --insight-dim:rgba(219,155,240,.15); --insight-fill:#B258D1;
  --amber:var(--insight); --amber-dim:var(--insight-dim); --amber-fill:var(--insight-fill);
  --signal:#B6ADCB; --signal-dim:rgba(182,173,203,.14);
  --us:#AE9AE8; --us-dim:rgba(174,154,232,.13);
  --uk:#6FC5D0; --uk-dim:rgba(111,197,208,.13);
  --eu:#E29ADA; --eu-dim:rgba(226,154,218,.13);
  --chrome:rgba(20,16,42,.82); --chrome-2:rgba(20,16,42,.94);
  --chrome-3:rgba(20,16,42,.97);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 24px 60px -30px rgba(0,0,0,.8);
  --shadow-card:0 1px 2px rgba(0,0,0,.3),0 10px 28px -18px rgba(0,0,0,.6);
}}
html{color-scheme:light dark}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}


.rn{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);
  overflow:hidden;box-shadow:var(--shadow-card)}
.rn-head{display:flex;align-items:center;gap:9px;padding:13px 18px;
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.rn-head .eyebrow{color:var(--muted)}
.rn-rows{display:flex;flex-direction:column}
a.rn-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;
  align-items:center;padding:12px 18px;border-bottom:1px solid var(--line);
  transition:background var(--t-micro) var(--ease)}
a.rn-row:last-child{border-bottom:0}
a.rn-row:hover{background:var(--surface-2)}
.rn-n{font-family:var(--mono);font-size:23px;font-weight:500;letter-spacing:-.03em;
  color:var(--text);min-width:44px;text-align:right;font-variant-numeric:tabular-nums}
a.rn-row:hover .rn-n{color:var(--capital)}
.rn-u{font-size:13px;color:var(--muted);line-height:1.4}
.rn-u .trend{display:block;font-family:var(--mono);font-size:10.5px;color:var(--verified);
  margin-top:2px}
.rn-go{color:var(--faint);font-size:14px;transition:transform var(--t-micro) var(--ease),
  color var(--t-micro) var(--ease)}
a.rn-row:hover .rn-go{color:var(--capital);transform:translateX(3px)}
.rn-sub{padding:13px 18px;border-top:1px solid var(--line);display:block}
.rn-sub .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--change);margin-bottom:7px}
.rn-sub .t{font-size:14px;font-weight:560;color:var(--text);line-height:1.35}
.rn-sub .m{font-size:12px;color:var(--faint);margin-top:3px}
a.rn-sub:hover .t{color:var(--capital)}
.rn-foot{padding:10px 18px;border-top:1px solid var(--line);font-size:11px;
  color:var(--faint);line-height:1.5}
.rn-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-card)}
a.rn-cell{background:var(--surface);padding:20px 22px 22px;display:block;position:relative;
  transition:background var(--t-micro) var(--ease);box-shadow:0 0 0 1px var(--line);
  border-radius:0}
a.rn-cell:hover{background:var(--surface-2)}
a.rn-cell .rn-n{font-size:38px;text-align:left;display:block;line-height:1}
/* colour carries meaning on the band: coral = funding change, amber = an
   inferred signal, lilac = an opportunity. The word beside it says the same. */
[data-rn^="funding"] .rn-n{color:var(--change)}
[data-rn="us-expansion"] .rn-n,[data-rn="hiring"] .rn-n{color:var(--change)}
[data-rn="job"] .rn-n,[data-rn="advisory"] .rn-n,[data-rn="partnership"] .rn-n{color:var(--opp)}
/* a small "new" mark on the freshest row, real dates only (set by render_live) */
.rn-new{display:inline-block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--change);background:var(--change-dim);padding:2px 6px;
  border-radius:3px;margin-left:6px;vertical-align:2px}
a.rn-cell .rn-u{margin-top:4px}
a.rn-cell .rn-go{position:absolute;top:16px;right:16px}
.rn-strip{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px}
.rn-strip::-webkit-scrollbar{display:none}
.rn-strip a{flex:none;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);padding:11px 15px;min-width:132px;max-width:190px;
  box-shadow:var(--shadow-card)}
.rn-strip .rn-n{font-size:21px;text-align:left;display:block}
.rn-strip .rn-u{font-size:11.5px;display:block;margin-top:3px}
.rn-mobileonly{display:none}
@media (max-width:960px){.rn-mobileonly{display:block;margin:2px 0 16px}}


.topbar{position:sticky;top:0;z-index:80;background:var(--chrome);
  backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--line)}
.topbar-in{max-width:1400px;margin:0 auto;padding:0 var(--gut);height:58px;
  display:flex;align-items:center;gap:26px}
.logo{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;
  letter-spacing:.14em;white-space:nowrap}
.logo .mark{width:9px;height:9px;background:var(--capital);border-radius:2px;
  box-shadow:0 0 12px 2px var(--capital-glow)}
.logo .thin{font-weight:300;color:var(--muted)}
.navlinks{display:flex;gap:2px;margin-left:6px}
/* 9 Sep 2026: this was --muted at 13.5px, fainter than the homepage nav that
   she was already told people could not see. Both are now --text at 15px and
   weight 500. Change BOTH or the four navs drift; verify5 compares them. */
.navlinks a{font-size:15px;font-weight:500;color:var(--text);padding:8px 12px;
  border-radius:var(--r-data);
  transition:color var(--t-micro) var(--ease),background var(--t-micro) var(--ease)}
.navlinks a:hover{color:var(--text);background:var(--surface-2)}
.navlinks a.on{color:var(--text);box-shadow:inset 0 -2px 0 var(--capital)}
.navtools{margin-left:auto;display:flex;align-items:center;gap:10px}
.cta-join,.cta-daily{white-space:nowrap}
.navtools .forco,.navtools .signin{font-size:13.5px;color:var(--muted);padding:8px 8px;
  white-space:nowrap;border-radius:var(--r-data);transition:color var(--t-micro) var(--ease)}
.navtools .forco:hover,.navtools .signin:hover{color:var(--text)}
/* Two classes on purpose: .btn sets display:inline-flex further down this
   stylesheet, and at equal specificity the later rule wins, so a bare
   .cta-join{display:none} loses and the button survives on a phone, widening
   the topbar past the viewport. */
@media (max-width:960px){.navtools .cta-join,.navtools .cta-daily,.navtools .forco,.navtools .signin{display:none}}
.searchbtn{display:flex;align-items:center;gap:9px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 14px 7px 12px;
  font-size:13px;color:var(--faint);cursor:pointer;min-width:236px;text-align:left;
  transition:border-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease)}
.searchbtn:hover{border-color:var(--line-3);color:var(--muted)}
.searchbtn kbd{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--faint);
  border:1px solid var(--line-2);border-radius:3px;padding:1px 5px}
.iconbtn{position:relative;width:34px;height:34px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line);border-radius:var(--r-data);
  color:var(--muted);cursor:pointer;transition:color var(--t-micro) var(--ease),
  border-color var(--t-micro) var(--ease)}
.iconbtn:hover{color:var(--text);border-color:var(--line-3)}
.iconbtn .dot{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;
  background:var(--change-fill);box-shadow:0 0 8px var(--change-glow)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-3);border:1px solid var(--line-2);font-size:12px;font-weight:600;
  color:var(--muted);cursor:pointer}
.avatar:hover{border-color:var(--line-3);color:var(--text)}
.navmenu{display:none;background:transparent;border:1px solid var(--line);
  border-radius:var(--r-data);width:34px;height:34px;place-items:center;cursor:pointer;
  color:var(--muted)}
.tabbar{display:none}
@media (max-width:1080px){.searchbtn{min-width:0;width:34px;padding:7px;justify-content:center}
  .searchbtn span,.searchbtn kbd{display:none}}
@media (max-width:920px){.navlinks{display:none}.navmenu{display:grid}
  .topbar-in{gap:14px}
  .tabbar{position:fixed;bottom:0;left:0;right:0;z-index:90;display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));background:var(--chrome-2);
    backdrop-filter:blur(16px);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);max-width:100vw}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 8px;
    font-size:11px;letter-spacing:.01em;color:var(--faint);min-width:0;overflow:hidden}
  .tabbar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar a.on{color:var(--capital)}
  .tabbar svg{width:19px;height:19px}
  body{padding-bottom:62px}}
.sheet{position:fixed;inset:0;z-index:120;background:var(--chrome-3);
  backdrop-filter:blur(10px);padding:26px var(--gut);display:none;overflow-y:auto}
.sheet.on{display:block}
.sheet a{display:block;font-size:19px;padding:15px 0;border-bottom:1px solid var(--line);
  letter-spacing:-.02em}
.sheet .close{position:absolute;top:16px;right:var(--gut);background:none;border:0;
  font-size:26px;color:var(--muted);cursor:pointer;line-height:1}


.journey{padding:clamp(40px,7vw,84px) 16px;background:var(--void)}
.journey-in{max-width:1080px;margin:0 auto}
.journey .sec-head{margin-bottom:22px}
.jlist{list-style:none;margin:0;padding:0;position:relative}
.jlist>li{position:relative;padding-left:44px}
.jlist>li::before{content:"";position:absolute;left:15px;top:0;bottom:0;width:2px;
  background:linear-gradient(var(--line),var(--line));opacity:.9}
.jlist>li:first-child::before{top:22px}
.jlist>li:last-child::before{bottom:auto;height:22px}
.jstage{border:1px solid var(--line);border-radius:14px;background:var(--surface);
  margin:0 0 10px}
.jstage>summary{list-style:none;cursor:pointer;display:grid;
  /* two columns: the number is absolutely positioned in the gutter, so the
     label+question take the space and the state pill hugs the right. (The
     first cut had three columns and the pill took the 1fr, seen 21 Sep.) */
  grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:14px 16px;min-height:44px}
.jstage>summary::-webkit-details-marker{display:none}
.jstage>summary:focus-visible{outline:2px solid var(--capital);outline-offset:2px;
  border-radius:14px}
.jnum{position:absolute;left:0;top:14px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--mono);font-size:12.5px;
  font-weight:600;background:var(--surface);border:2px solid var(--line);
  color:var(--muted)}
.jstage[open] .jnum{border-color:var(--capital);color:var(--capital)}
.jsum{display:flex;flex-direction:column;gap:2px;min-width:0}
.jshort{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:600}
.jq{font-size:17px;font-weight:600;line-height:1.3;color:var(--text)}
.jstate{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:4px 9px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
/* State classes are namespaced s-*: a bare .live collided with home.css. */
.jstate.s-live,.jav-k.s-live{color:var(--verified);border-color:var(--verified)}
.jstate.s-partial,.jav-k.s-partial{color:var(--change);border-color:var(--change)}
.jstate.s-not_available,.jav-k.s-not_available{color:var(--muted)}
.jstate.s-declared,.jav-k.s-declared{color:var(--capital);border-color:var(--capital)}
.jbody{padding:0 16px 18px;max-width:64ch;line-height:1.6}
.jdesc{margin:0 0 10px;font-size:15px}
.jex{margin:0 0 10px;font-size:13.5px;color:var(--muted)}
.jdist{margin:0 0 12px;padding-left:18px;font-size:13.5px}
.jdist li{margin:4px 0}
.jav{margin:10px 0 0;font-size:13.5px;padding:10px 12px;border-radius:10px;
  background:var(--void);border:1px solid var(--line)}
.jav.s-live{border-color:color-mix(in srgb,var(--verified) 40%,transparent)}
.jav-k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:3px 8px;border-radius:999px;border:1px solid var(--line);margin-right:4px}
.jact{margin:12px 0 0}
.jmore{margin:10px 0 0;font-size:13px}
/* The homepage stylesheet is a SUBSET of these blocks and does not carry
   BASE, where the global focus rule lives (a11y_violet, 21 Sep 2026: the
   journey's buttons and links had no ring on "/"). So this block brings its
   own: every link and button inside the journey, and the two homepage lines
   that ship beside it, get a visible ring and a 24px tap box. */
.journey a:focus-visible,.jbody .btn:focus-visible,.proof-note a:focus-visible,
.hero-demo a:focus-visible{outline:2px solid var(--capital);outline-offset:2px;
  border-radius:4px}
.jmore a,.jav a,.proof-note a,.hero-demo a{display:inline-block;padding:4px 0;
  min-height:24px;line-height:1.3}
.jfoot{margin:22px 0 0;text-align:center}
.jcount{font-size:13.5px;color:var(--muted);margin:0 0 22px;line-height:2}
.jtable{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:14px}
.jtable caption{text-align:left;font-size:12px;color:var(--muted);margin-bottom:8px}
.jtable th,.jtable td{text-align:left;vertical-align:top;padding:10px 8px;
  border-bottom:1px solid var(--line)}
.jtable th[scope=row]{font-family:var(--mono);color:var(--muted);width:2ch}
.jtable .muted{color:var(--muted);font-size:12.5px}
@media (min-width:900px){
  .jstage[open]>summary{border-bottom:1px solid var(--line)}
  .jbody{padding:16px 18px 20px 18px;max-width:none;columns:2;column-gap:32px}
  .jbody>*{break-inside:avoid}
  .jq{font-size:18px}
}
@media (max-width:720px){
  .jtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .jtable tr{display:block;padding:8px 0}
  .jtable td,.jtable th{display:block;border:0;padding:3px 0}
  .jtable th[scope=row]{width:auto}
}
@media (prefers-reduced-motion:no-preference){
  .jstage{transition:border-color .15s ease}
  .jstage[open]{border-color:color-mix(in srgb,var(--capital) 45%,var(--line))}
}
.proof-note{max-width:70ch;margin:14px auto 0;text-align:center;font-size:12.5px;
  color:var(--muted);line-height:1.6;padding:0 16px}
.benefits .state{font-style:normal;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;margin-left:6px;padding:2px 7px;
  border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.benefits .state.s-live{color:var(--verified);border-color:var(--verified)}

[data-theme-toggle]{cursor:pointer;font-size:15px;line-height:1}.th-d{display:none}:root[data-theme="dark"] .th-l{display:none}:root[data-theme="dark"] .th-d{display:inline}

.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-data);
  font-size:13.5px;font-weight:560;padding:10px 16px;cursor:pointer;border:1px solid transparent;
  transition:transform var(--t-micro) var(--ease),filter var(--t-micro) var(--ease),
  background var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease),
  color var(--t-micro) var(--ease);white-space:nowrap}
.btn:disabled{opacity:.55;cursor:default}
.btn-cap{background:var(--capital);color:var(--capital-ink)}
.btn-cap:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
.btn-help{background:var(--capital);color:var(--capital-ink);font-weight:600}
.btn-help:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover:not(:disabled){border-color:var(--line-3);background:var(--surface-2)}
.btn-quiet{background:transparent;color:var(--muted);padding:8px 10px}
.btn-quiet:hover:not(:disabled){color:var(--text);background:var(--surface-2)}
.btn-lg{font-size:15px;padding:14px 24px}
.btn-sm{font-size:12.5px;padding:7px 12px}
.btn-block{width:100%;justify-content:center}
.btn.is-on{background:var(--capital-dim);border-color:var(--capital);color:var(--capital)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;
  padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--line-2);
  color:var(--muted);background:var(--surface-2);white-space:nowrap}
.chip.us{color:var(--us);border-color:transparent;background:var(--us-dim)}
.chip.uk{color:var(--uk);border-color:transparent;background:var(--uk-dim)}
.chip.eu{color:var(--eu);border-color:transparent;background:var(--eu-dim)}
.chip.hot{color:var(--hot);border-color:transparent;background:var(--hot-dim);font-weight:600}
.chip.link{transition:border-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease)}
.chip.link:hover{border-color:var(--line-3);color:var(--text)}
.chip.yes{color:var(--verified);background:var(--verified-dim);border-color:transparent}
.chip.no{color:var(--faint);background:transparent;border-color:var(--line-2);
  text-decoration:line-through;text-decoration-color:var(--line-3)}
.prov{display:inline-flex;align-items:center;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;padding:2px 6px;border-radius:2px;
  vertical-align:1px}
/* THE THREE TRUST LAYERS, one colour each: Public signal = blue,
   Company verified = green, AfterRaise intelligence = amber. Worked example
   is neutral. Colour is never the only carrier: every chip is also a word. */
.prov.obs{background:var(--signal-dim);color:var(--signal)}
.prov.inf{background:var(--insight-dim);color:var(--insight)}
.prov.dec{background:var(--verified-dim);color:var(--verified)}
.prov.pre{background:var(--surface-3);color:var(--muted)}
.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--change-fill);
  box-shadow:0 0 0 0 var(--change-glow);animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--change-glow)}
  70%{box-shadow:0 0 0 8px rgba(243,179,76,0)}100%{box-shadow:0 0 0 0 rgba(243,179,76,0)}}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);
  margin-bottom:22px;max-width:100%}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:11px 13px;
  font-size:13.5px;color:var(--muted);cursor:pointer;white-space:nowrap;margin-bottom:-1px;
  transition:color var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease)}
.tabs button:hover{color:var(--text)}
.tabs button.on{color:var(--text);border-bottom-color:var(--capital)}
.tabs button .ct{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-left:5px}


/* Every object type reads differently at a glance. Move = coral change,
   Opportunity = lilac relevance, Insight = blue commentary. */
.obj{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  position:relative;overflow:hidden;box-shadow:var(--shadow-card);
  transition:border-color var(--t-std) var(--ease),box-shadow var(--t-std) var(--ease)}
.obj:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.obj::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;opacity:.9}
.obj.move::before{background:var(--change-fill)}
.obj.insight::before{background:var(--signal)}
.obj.opp::before{background:var(--opp-fill)}
.obj-head{display:flex;align-items:center;gap:11px;padding:14px 20px 0;flex-wrap:wrap}
.obj-kind{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.move .obj-kind{color:var(--change)}
.insight .obj-kind{color:var(--signal)}
.opp .obj-kind{color:var(--opp)}
.obj-when{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint)}
.obj-body{padding:12px 20px 18px}
.obj-who{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.mono-badge{width:34px;height:34px;border-radius:7px;display:grid;place-items:center;
  font-size:13px;font-weight:600;letter-spacing:-.02em;background:var(--surface-3);
  border:1px solid var(--line-2);color:var(--muted);flex:none}
.obj-who .nm{font-size:14.5px;font-weight:560;color:var(--text);line-height:1.25}
.obj-who .nm:hover{color:var(--capital)}
.obj-who .meta{font-size:12px;color:var(--faint);margin-top:1px}
.obj-title{font-size:19px;font-weight:560;letter-spacing:-.022em;line-height:1.25;
  margin-bottom:8px;color:var(--text)}
a.obj-title:hover{color:var(--capital)}
.obj-sum{font-size:14.5px;color:var(--muted);line-height:1.6;max-width:64ch}
.obj-q{margin-top:16px;display:grid;gap:10px}
.obj-q>div{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:baseline;
  font-size:13.5px;line-height:1.55}
.obj-q .ql{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  color:var(--faint);padding-top:3px}
.obj-q .qv{color:var(--muted)}
.obj-q .qv b{color:var(--text);font-weight:560}
.openrow{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.obj-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:13px 20px;
  border-top:1px solid var(--line);background:var(--surface-2)}
.obj-foot .spacer{margin-left:auto}
.why{background:none;border:0;color:var(--faint);font-size:11.5px;cursor:pointer;
  padding:4px 0;text-align:left;transition:color var(--t-micro) var(--ease)}
.why:hover{color:var(--muted)}
.why-txt{padding:0 20px 14px;font-size:12.5px;color:var(--faint);line-height:1.6;
  max-width:62ch}
.amt{font-family:var(--mono);color:var(--capital);font-weight:500;font-variant-numeric:tabular-nums}
.opp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.opp-type{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--opp);background:var(--opp-dim);padding:3px 8px;border-radius:3px}
/* the "is there an opportunity?" row on a Move card */
.obj-q .qv a.opplink{color:var(--opp);font-weight:560}
.obj-q .qv a.opplink:hover{text-decoration:underline}
@media (max-width:560px){.obj-q>div{grid-template-columns:1fr;gap:2px}
  .obj-q .ql{padding-top:0}.obj-title{font-size:17.5px}}

/* AfterRaise marketing surface: the sky world.
   Composition only: every token (colour, type, easing, gutter) is prepended at
   build time from pipeline/design.py, so there is exactly one token source for
   the whole site. Redesigned 5 Sep 2026: light blue ground, white surfaces,
   cobalt primary, lilac for opportunity, coral for change, amber for inference. */

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--void)}
body{
  margin:0;background:var(--void);color:var(--text);
  font-family:var(--sans);
  font-size:16px;line-height:1.6;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
em{font-style:normal;color:var(--capital)}
:focus-visible{outline:2px solid var(--capital);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--capital);color:var(--capital-ink);
  padding:12px 18px;font-weight:600;z-index:100}
.skip:focus{left:16px;top:16px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------- nav ---------------- */
/* WIDTH, NOT left:0 + right:0. Sizing a fixed bar by its two insets makes it
   resolve against the initial containing block, which under mobile emulation
   measured five pixels wider than the layout viewport and put a horizontal
   scroll on the busiest page of the site. A percentage width resolves against
   the viewport and cannot drift; overflow:clip means nothing inside the bar can
   extend the document either. */
.nav{
  position:fixed;top:0;left:0;width:100%;max-width:100%;overflow:clip;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px var(--gut);
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
/* THE NAV OVER A PHOTOGRAPH.
   A TRANSLUCENT WASH CANNOT GUARANTEE CONTRAST over a picture that changes
   every frame and every width. Measuring the real pixels behind each nav item
   proved it: the lighter half of the wordmark read 1.2:1 over the sunrise sky
   at 1440px while passing comfortably at 1920. So the bar carries a near-solid
   surface from the start. It costs the top strip of the animation, which is
   sky, and it buys a navigation that is readable at every width no matter what
   the frame is doing.
   .hero-top continues the same value below the bar and fades it out, so the
   bar's own bottom edge is not a line across the picture. The scrim used to be
   a ::before INSIDE the fixed bar, which also added five pixels to the
   document's scroll width and dragged the whole page sideways on a phone. */
.nav{background-color:rgba(250,247,255,.95)}
.nav.on{background-color:var(--chrome-2);
  backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line)}
.logo{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;letter-spacing:.14em}
.logo .thin{font-weight:300;color:var(--muted)}
.logo .mark{width:9px;height:9px;background:var(--capital);border-radius:2px;
  box-shadow:0 0 12px 2px var(--capital-glow)}
/* MEASURED 6.98:1 AND STILL HARD TO SEE (her report, 9 Sep 2026). It passed AA
   and was still missed, because it was 13.5px at weight 400 dimmed to 78%
   opacity sitting beside a large violet button. Contrast is only one of the
   three things that make a link legible; size and weight are the others, and
   dimming a colour that already passes is spending legibility for nothing. */
.nav-links{display:flex;gap:26px;font-size:15px;color:var(--text);letter-spacing:.01em}
.nav-links a{color:var(--text);font-weight:500;transition:color .25s var(--ease)}
.nav-links a:hover{color:var(--capital)}
.nav-right{display:flex;align-items:center;gap:18px}
.signin,.forco{font-size:13.5px;color:var(--text);opacity:.78;
  transition:opacity .25s var(--ease),color .25s var(--ease)}
.signin:hover,.forco:hover{opacity:1;color:var(--capital)}

.btn-cap{
  display:inline-block;background:var(--capital);color:var(--capital-ink);
  font-size:13.5px;font-weight:600;letter-spacing:.01em;padding:10px 18px;border-radius:var(--r-data);
  border:1px solid var(--capital);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),filter .25s var(--ease);
}
.btn-cap:hover{transform:translateY(-1px);box-shadow:0 10px 30px -10px var(--capital-glow);filter:brightness(1.06)}
.btn-cap.lg{font-size:15px;padding:15px 28px}
.btn-ghost{
  display:inline-block;color:var(--text);border:1px solid var(--line-3);
  background:rgba(255,255,255,.55);
  font-size:13.5px;font-weight:500;padding:10px 18px;border-radius:var(--r-data);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.btn-ghost:hover{border-color:var(--capital);background:var(--surface)}
.btn-ghost.lg{font-size:15px;padding:15px 28px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* ---------------- section heads ---------------- */
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--capital);margin:0 0 16px}
.sec-head{max-width:640px;margin-bottom:clamp(26px,3.5vw,42px);
  opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.sec-head.in{opacity:1;transform:none}
.sec-head h2{font-size:clamp(28px,3.8vw,52px);line-height:1.04;letter-spacing:-.034em;
  font-weight:600;margin:0}
.sec-lede{margin:16px 0 0;color:var(--muted);font-size:16px;line-height:1.62;max-width:56ch}

/* ---------------- hero ----------------
   FULL-WIDTH CINEMATIC HERO (her second redesign brief, 5 Sep 2026). The
   animation is the first screen, edge to edge, and the copy is layered on it.

   SIZING, and why it is not the obvious thing. hero.mp4 is 16:9 and every
   corner of it carries an ecosystem node (the globe, the city, the talent
   island, the partnership rings, logistics, the data centre, the boardroom,
   the lab), so there is no quiet region to crop and no quiet region to write
   on. The frame is therefore ALWAYS 100% wide at aspect-ratio 16/9: it can
   never be distorted and its sides can never be cropped, at any width.

   The first attempt capped the frame's height at the viewport, which is what
   you reach for first. On a 1920x900 laptop that pillarboxed a 1600px video
   inside a 1920px hero, with 160px of violet down each side, which reads as a
   mistake rather than a choice. So the hero clips instead: the frame is
   top-anchored and the hero is at least four fifths of the frame's height, so
   at most a fifth is lost off the BOTTOM, which is fog and cloud, and which the
   copy's own wash was dissolving anyway. tests/shots_hero.mjs measures the
   real box at six widths rather than trusting any of this.

   --hp is the hero scroll progress, 0 at rest and 1 by the time the hero has
   left. It is written once per frame by the homepage script and drives the
   parallax, the scale and the fades. It is never written under reduced motion
   or on a phone. */
.hero{
  position:relative;
  --vidh:calc(100vw * 9 / 16);
  /* CAPPED BELOW THE VIEWPORT ON PURPOSE (her note, 9 Sep 2026). At 100svh the
     hero was EXACTLY the fold: measured at 1558x793 the hero ended at 793 and
     the first figure began at 837, so a visitor saw the picture and none of the
     proof. The four numbers are the single most persuasive thing on the page,
     so the hero now stops short and the stats band always peeks above the fold,
     which is also what invites the scroll. The floor moves with it, otherwise
     it wins back the space on a typical laptop and the cap does nothing. */
  min-height:max(min(78svh, var(--vidh)), calc(var(--vidh) * .70));
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:clip;isolation:isolate;
  --hp:0;
}

/* the ambient wash the animation sits in: violet, orchid and warm gold from the
   token set, so the frame meets the page instead of sitting on it in a box */
.hero-glow{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(64% 56% at 50% 34%, rgba(139,92,246,.20), transparent 68%),
    radial-gradient(44% 38% at 88% 70%, rgba(243,179,76,.13), transparent 72%),
    radial-gradient(48% 44% at 8% 14%, rgba(255,255,255,.70), transparent 72%),
    linear-gradient(180deg,#FFFFFF 0%,var(--void) 46%,var(--surface-3) 100%)}

/* THE STAGE. Top-anchored so the picture holds its place while the copy rides
   up over it; the gentle downward drift plus a 5% scale is the "anchored
   briefly" depth from her brief, not a zoom. */
/* The frame starts BELOW the bar, not behind it. The globe island sits right at
   the top of the animation, and a bar across it clipped an ecosystem node; what
   is lost off the bottom instead is fog, which the copy's wash was dissolving
   anyway. This is the same trade as the clipping rule above, made twice. */
.hero-stage{position:absolute;top:74px;left:0;right:0;margin:0;z-index:1;
  transform:translate3d(0,calc(var(--hp) * 88px),0) scale(calc(1 + var(--hp) * .05));
  transform-origin:50% 26%;will-change:transform;
  animation:heroIn 1.1s cubic-bezier(.22,.61,.36,1) both}
.hero-video{display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:contain;object-position:50% 50%;background:transparent}
@keyframes heroIn{from{opacity:0;transform:scale(1.03)}to{opacity:1}}

/* THE TOP WASH, so the navigation is readable over a sunrise sky. It fades to
   nothing over 150px, so unlike a scrim painted inside the bar it has no bottom
   edge to see. It fades away entirely on scroll, when the solid nav takes over. */
.hero-top{position:absolute;inset:0 0 auto 0;height:190px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(250,247,255,.95) 0%,
    rgba(250,247,255,.95) 39%,
    rgba(250,247,255,.52) 62%,
    rgba(250,247,255,.16) 82%,
    rgba(250,247,255,0) 100%)}

/* THE FLOOR. Always opaque, so the hero always meets the page ground cleanly
   even at the widths where the frame is clipped, and even once the copy (and
   the copy's own wash) has faded away on scroll. */
.hero-scrim{position:absolute;inset:auto 0 -1px 0;height:26%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(250,247,255,0),var(--void) 78%)}

/* THE COPY, layered on the animation rather than boxed beside it.
   Its own ::before is the wash that makes the type legible, which means the
   wash TRACKS THE TEXT: it is exactly as tall as the copy at every width, so
   there is no width where the headline drifts off the protected area. The
   generous top padding is the runway the gradient fades in over. As the copy
   rises and fades on scroll the wash goes with it, so the last thing on screen
   before the page proper is the ecosystem with nothing written on it. */
/* ONE CHROME (19 Sep 2026). The homepage bar is the shell's .topbar now, and
   it sits IN FLOW (sticky), not fixed over the picture, so the hero starts
   below it by geometry. The copy padding that used to clear a fixed bar is
   cut accordingly; leaving it would double the gap and put the two doors
   below the fold on a phone. The near-solid surface over the animation is
   kept (measured 6 Sep: a translucent bar read 1.2:1 over the sky). */
.topbar{background-color:rgba(250,247,255,.95);backdrop-filter:none}
.hero-copy{position:relative;z-index:3;width:100%;
  padding:clamp(56px,8vh,120px) var(--gut) clamp(20px,3vh,46px);
  transform:translate3d(0,calc(var(--hp) * -58px),0);
  opacity:calc(1 - var(--hp) * .88);will-change:transform,opacity}
/* THE WASH IS HORIZONTAL FIRST. Washing the copy band top to bottom covered
   the whole picture, because at most laptop heights the copy is nearly as tall
   as the hero. Reading down the left is what the type actually needs, so the
   wash is strong across the text column and clear from about 60% out, where
   the globe, the city, the partnership rings, the logistics island and the
   right half of the company itself stay untouched. The vertical gradient is
   now only the floor that lands the hero on the page ground. */
/* The wash is masked in over the copy's own top padding, because a horizontal
   gradient has no vertical falloff and its top edge drew a hard seam straight
   across the picture. The mask fades exactly over the empty padding above the
   eyebrow, so the wash is at full strength by the time there are words on it. */
.hero-copy::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 100%);
  background:
    linear-gradient(96deg,
      rgba(250,247,255,.93) 0%,
      rgba(250,247,255,.88) 30%,
      rgba(250,247,255,.76) 45%,
      rgba(250,247,255,.40) 58%,
      rgba(250,247,255,.10) 70%,
      rgba(250,247,255,0) 80%),
    linear-gradient(180deg,
      rgba(250,247,255,0) 0%,
      rgba(250,247,255,.16) 46%,
      rgba(250,247,255,.55) 74%,
      rgba(250,247,255,.88) 90%,
      var(--void) 100%)}
/* SHORT LAPTOPS. Below about 780px tall it is the hero COPY's own height, not
   the min-height rule, that keeps the stats band under the fold: the top
   padding has already bottomed out at its clamp minimum of 130px and cannot
   give any more. Trimming it here buys the forty pixels the labels need at
   1280x720, and it never applies on a normal screen or on a phone, which has
   its own hero rules below 900px wide. */
@media (max-height:780px) and (min-width:901px){
  /* 9 Sep 2026: the first version of this trimmed to 86px and left only 15px
     between the fixed bar and the eyebrow, which read as a collision. The
     pixels it needs are taken from the two gaps BELOW instead, where they
     were doing nothing. */
  .hero-copy{padding-top:clamp(44px,7vh,96px)}   /* bar is in flow since 19 Sep */
}
.hero-copy-in{max-width:1680px;margin:0 auto;width:100%}
/* the copy column is held to a readable measure inside the full-width band */
.hero-copy-in>*{max-width:min(720px,50vw)}
/* the headline gets its own, wider measure: the shared one held it to 720px and
   pushed "Now see what happens next." onto a third line above 1600px */
.hero-copy-in>h1{max-width:min(1000px,62vw)}
.hero .eyebrow{margin-bottom:16px;color:var(--capital)}

/* THE ENTRANCE, staged: frame, then headline, then copy, then the search and
   the routes, then the numbers. Each step is a short rise with a little depth,
   never a fly-in. */
.hero-copy-in>*{animation:heroRise .9s cubic-bezier(.22,.61,.36,1) both}
.hero-copy-in>.eyebrow{animation-delay:.28s}
.hero-copy-in>h1{animation-delay:.40s}
.hero-copy-in>.lede{animation-delay:.58s}
.hero-copy-in>.hsearch{animation-delay:.72s}
.hero-copy-in>.routes{animation-delay:.84s}
.hero-copy-in>.proof{animation-delay:.96s}
@keyframes heroRise{from{opacity:0;transform:translate3d(0,16px,0) scale(.994)}
  to{opacity:1;transform:none}}

/* Sized to hold "Now see what happens next." on one line from 1024 up, so the
   headline is the two lines her brief writes and never three. text-wrap:balance
   is deliberately off here: the line break is written into the markup. */
h1{
  font-size:clamp(34px,3.7vw,70px);line-height:1.02;letter-spacing:-.038em;font-weight:600;
  margin:0;max-width:none;color:var(--text);
}
h1 .dim{color:var(--muted);font-weight:500}
.lede{font-size:clamp(15.5px,1.15vw,18px);color:var(--muted);max-width:min(50ch,42vw);
  margin:16px 0 0;line-height:1.55}

/* the two routes: a button plus the one line that explains it */
.routes{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px}
.route{display:flex;flex-direction:column;gap:9px;min-width:0}
/* THE TWO DOORS (19 Sep 2026): equal, generous, first. */
.routes.doors{margin-top:22px;gap:16px}
.routes.doors .route{flex:1 1 240px;max-width:340px}
.routes.doors .route>a{display:flex;justify-content:center;min-height:52px;font-size:16px}
.route small{font-size:12.5px;line-height:1.5;color:var(--muted);max-width:32ch}

/* the scale bar, on solid ground directly under the hero */
/* Tight to the hero on purpose: the band has to clear the fold WITH its
   labels, because a figure with no caption is not proof of anything. */
.proofbar{max-width:1680px;margin:0 auto;padding:clamp(10px,1.2vw,18px) var(--gut) 0}
.proof{display:flex;gap:clamp(24px,3.4vw,64px);margin:0;padding-top:0;
  max-width:none;flex-wrap:wrap}
.proof>div{display:flex;flex-direction:column-reverse;gap:5px;min-width:0}
.proof dt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.proof dd{margin:0;font-size:clamp(19px,2vw,26px);font-weight:500;letter-spacing:-.02em;color:var(--text)}

/* ---------------- hero search ---------------- */
.ask{display:block;margin:22px 0 9px;font-size:14.5px;font-weight:560;color:var(--text);
  letter-spacing:-.01em}
.hsearch{display:block;margin-top:0;max-width:600px}
.hsearch-row{display:flex;gap:9px}
.hsearch input{flex:1;min-width:0;font:inherit;font-size:14.5px;padding:13px 16px;
  background:rgba(255,255,255,.92);border:1px solid var(--line-2);border-radius:var(--r-data);
  color:var(--text);backdrop-filter:blur(8px);box-shadow:var(--shadow-card);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.hsearch input::placeholder{color:var(--faint)}
.hsearch input:focus{outline:none;border-color:var(--capital);
  box-shadow:0 0 0 3px var(--capital-dim)}
.hsearch .btn-cap{padding:13px 20px}
.hsearch.big{max-width:640px}
.hsearch.big input{font-size:16px;padding:16px 18px}
.hsearch.big .btn-cap{padding:16px 24px}
@media (max-width:560px){.hsearch-row{flex-direction:column}.hsearch .btn-cap{text-align:center}}

.scroll-hint{position:absolute;right:var(--gut);bottom:22px;z-index:4;
  display:flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);pointer-events:none;
  opacity:calc(1 - var(--hp) * 2)}
.scroll-hint span{display:block;width:1px;height:22px;
  background:linear-gradient(180deg,var(--capital),transparent);
  animation:hintFall 2.4s var(--ease) infinite}
@keyframes hintFall{0%{opacity:0;transform:translateY(-8px)}
  40%{opacity:1}100%{opacity:0;transform:translateY(8px)}}

/* ---------------- what are you here for ---------------- */
.start{max-width:1440px;margin:clamp(64px,8vw,110px) auto 0;padding:0 var(--gut)}
.intents{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.intents.four{grid-template-columns:repeat(4,1fr)}
.intent{display:flex;flex-direction:column;gap:9px;position:relative;
  padding:clamp(20px,2vw,26px) clamp(18px,1.8vw,24px) clamp(20px,2vw,26px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .3s var(--ease),
    box-shadow .3s var(--ease)}
.intent.in{opacity:1;transform:none}
.intent::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  border-radius:var(--r-card) var(--r-card) 0 0;background:var(--capital);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.intent:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px)}
.intent:hover::after{transform:scaleX(1)}
.intent:focus-visible{outline:2px solid var(--capital);outline-offset:2px}
.intent-h{font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:-.02em;color:var(--text)}
.intent-b{font-size:13.5px;line-height:1.55;color:var(--muted);max-width:34ch}
.intent-f{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-top:2px}
.intent-c{margin-top:auto;padding-top:14px;font-size:13px;color:var(--capital);font-weight:500;
  display:inline-flex;align-items:center;gap:7px}
.intent-c i{font-style:normal;transition:transform .3s var(--ease)}
.intent:hover .intent-c i{transform:translateX(4px)}
/* the chosen intent stays visibly chosen, so the page remembers the answer */
.intent.is-on{border-color:var(--capital);background:var(--capital-dim)}
.intent.is-on::after{transform:scaleX(1)}
.intents-more{margin:16px 0 0;font-size:13.5px;color:var(--muted);
  opacity:0;transition:opacity .7s var(--ease)}
.intents-more.in{opacity:1}
.intents-more a{color:var(--text);border-bottom:1px solid var(--line-3);padding-bottom:1px}
.intents-more a:hover,.intents-more a.is-on{color:var(--capital);border-color:var(--capital)}
@media (max-width:1000px){.intents,.intents.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.intents,.intents.four{grid-template-columns:1fr}}

/* ---------------- right now ---------------- */
.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--change-fill);
  margin-right:7px;vertical-align:1px;
  box-shadow:0 0 0 0 var(--change-glow);animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--change-glow)}
  70%{box-shadow:0 0 0 8px rgba(255,122,107,0)}100%{box-shadow:0 0 0 0 rgba(255,122,107,0)}}
.live{max-width:1440px;margin:0 auto;padding:clamp(64px,8vw,120px) var(--gut) 0}
.band{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.band.in{opacity:1;transform:none}
/* align-items:start so the cards column does not stretch the shorter list
   into a tall box of empty space (5 Sep 2026) */
.live-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:14px;
  margin-top:14px;align-items:start}
.live-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);padding:20px 22px 8px;opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.live-col.in{opacity:1;transform:none}
.live-col-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.live-col-head h3{font-size:13px;font-weight:600;letter-spacing:.02em;margin:0}
.live-col-head a{font-size:12.5px;color:var(--capital);transition:color .25s var(--ease)}
.live-col-head a:hover{text-decoration:underline}
.live-list{list-style:none;margin:0;padding:0}
.live-list li{padding:13px 0;border-bottom:1px solid var(--line)}
.live-list li:last-child{border-bottom:0}
.live-list a{display:block}
.live-list .t{font-size:14.5px;line-height:1.4;color:var(--text);letter-spacing:-.012em}
.live-list a:hover .t{color:var(--capital)}
.live-list .m{font-size:11.5px;color:var(--faint);margin-top:5px;display:flex;gap:8px;
  flex-wrap:wrap;align-items:center}
.live-list .k{font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.live-list .k.move{color:var(--change)}
.live-list .k.opp{color:var(--opp)}
.live-list .amt{font-family:var(--mono);color:var(--capital);font-weight:500}
.live-wait .t{color:var(--muted)}
@media (max-width:900px){.live-grid{grid-template-columns:1fr}}

/* ---------------- for you ---------------- */
.foryou{max-width:1440px;margin:0 auto;padding:clamp(64px,8vw,120px) var(--gut) 0;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);
  align-items:start}
.fy-copy,.fy-live{opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.fy-copy.in,.fy-live.in{opacity:1;transform:none}
.fy-copy h2{font-size:clamp(28px,3.8vw,52px);line-height:1.04;letter-spacing:-.034em;font-weight:600;margin:0}
.fy-example{margin-top:26px;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--opp-fill);border-radius:var(--r-card);box-shadow:var(--shadow-card);
  padding:18px 20px;max-width:520px}
.fy-k{margin:0 0 12px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--opp)}
.fy-example ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fy-example li{display:grid;grid-template-columns:118px 1fr;gap:12px;font-size:14px;line-height:1.45;
  align-items:baseline}
.fy-example li span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  font-weight:600}
.fy-example li b{font-weight:500;color:var(--text)}
.fy-note{margin:14px 0 0;font-size:11.5px;color:var(--faint);line-height:1.5}
.fy-live{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);padding:22px 24px}
.fy-live .eyebrow{margin-bottom:10px}
.fy-lines{list-style:none;margin:0;padding:0}
.fy-lines li{border-bottom:1px solid var(--line)}
.fy-lines li:last-child{border-bottom:0}
.fy-lines a{display:flex;align-items:baseline;gap:12px;padding:14px 0;font-size:15px;color:var(--text);
  transition:padding-left .3s var(--ease)}
.fy-lines a:hover{padding-left:6px;color:var(--capital)}
.fy-lines b{font-size:26px;font-weight:600;letter-spacing:-.03em;color:var(--opp);min-width:2.2ch}
.fy-foot{margin:14px 0 0;font-size:12px;color:var(--faint);line-height:1.5}
@media (max-width:900px){.foryou{grid-template-columns:1fr}}

/* ---------------- work is bigger than jobs ---------------- */
.bigger{max-width:1440px;margin:0 auto;padding:clamp(64px,8vw,120px) var(--gut) 0}
.needs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.needs li{font-size:clamp(16px,1.6vw,22px);font-weight:500;letter-spacing:-.018em;color:var(--text);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:12px 22px;box-shadow:var(--shadow-card);
  opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.needs li.in{opacity:1;transform:none}
.bigger-foot{margin:26px 0 0;font-size:17px;color:var(--muted);max-width:60ch;line-height:1.6;
  opacity:0;transition:opacity .7s var(--ease)}
.bigger-foot.in{opacity:1}
.bigger-foot a{color:var(--capital);font-weight:500;margin-left:6px;border-bottom:1px solid var(--capital)}

/* ---------------- just raised: the company section ---------------- */
.company{max-width:1440px;margin:0 auto;padding:clamp(64px,8vw,120px) var(--gut) 0}
.paper{background:linear-gradient(120deg,var(--paper),var(--paper-2));color:var(--ink);
  border-radius:16px;padding:clamp(28px,4vw,54px);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,60px);
  align-items:center;box-shadow:var(--shadow);position:relative;overflow:hidden;
  opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.paper.in{opacity:1;transform:none}
.paper::before{content:"";position:absolute;right:-12%;top:-40%;width:52%;height:180%;
  background:radial-gradient(closest-side,rgba(255,255,255,.16),transparent 70%);pointer-events:none}
.paper .eyebrow{color:var(--ink-3)}
.paper h2{font-size:clamp(28px,3.8vw,52px);line-height:1.04;letter-spacing:-.034em;font-weight:600;
  margin:0;color:var(--ink)}
.paper-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}
.paper-list li{font-size:clamp(15px,1.3vw,18px);color:var(--ink-2);padding-left:22px;position:relative}
.paper-list li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--ink-3)}
.paper-act{display:flex;flex-direction:column;gap:12px;position:relative}
.btn-paper{display:inline-block;background:var(--paper-btn);color:var(--paper-btn-ink);
  font-size:15px;font-weight:600;padding:15px 28px;border-radius:var(--r-data);text-align:center;
  transition:transform .35s var(--ease),filter .25s var(--ease)}
.btn-paper:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn-paper-ghost{display:inline-block;color:var(--ink);border:1px solid var(--paper-line);
  font-size:15px;font-weight:500;padding:14px 28px;border-radius:var(--r-data);text-align:center;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.btn-paper-ghost:hover{background:var(--paper-hover);border-color:var(--ink-3)}
.paper-fine{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3);max-width:44ch}
@media (max-width:900px){.paper{grid-template-columns:1fr}}

/* ---------------- stay close ---------------- */
.coming{max-width:1440px;margin:0 auto;padding:clamp(64px,8vw,120px) var(--gut) clamp(60px,8vw,120px)}
.coming-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.coming-list li{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:20px 0;border-bottom:1px solid var(--line-2);position:relative;
  opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.coming-list li.in{opacity:1;transform:none}
.coming-list li::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--capital);transition:width .55s var(--ease)}
.coming-list li:hover::after{width:100%}
.coming-list b{display:block;font-size:18px;font-weight:600;letter-spacing:-.018em}
.coming-list p{margin:4px 0 0;color:var(--muted);font-size:14px;max-width:46ch;line-height:1.5}
.coming-list button{
  font:inherit;font-size:13.5px;font-weight:500;color:var(--text);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-data);padding:11px 18px;cursor:pointer;
  white-space:nowrap;transition:border-color .3s var(--ease),color .3s var(--ease),
  background .3s var(--ease);
}
.coming-list button span{display:inline-block;margin-left:5px;transition:transform .35s var(--ease)}
.coming-list button:hover{border-color:var(--capital);color:var(--capital);background:var(--capital-dim)}
.coming-list button:hover span{transform:translateX(4px)}

/* ---------------- footer ---------------- */
.foot{border-top:1px solid var(--line-2);max-width:1440px;margin:0 auto;
  padding:48px var(--gut) 56px;display:grid;
  grid-template-columns:minmax(220px,1.4fr) repeat(2,minmax(0,1fr));gap:34px 44px}
.foot p{color:var(--faint);font-size:13px;margin:14px 0 0;max-width:38ch;line-height:1.6}
.logo.sm{font-size:13px}
.foot-links{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.foot-links a{font-size:13.5px;color:var(--muted);transition:color .25s var(--ease)}
.foot-links a:hover{color:var(--capital)}
.shika{grid-column:1/-1;border-top:1px solid var(--line);padding-top:22px;margin-top:12px;
  font-size:12px;color:var(--faint)}
.shika a{color:var(--muted)}

/* ---------------- responsive ---------------- */
@media (max-width:1000px){
  .nav-links,.nav-right .forco{display:none}
  .foot{grid-template-columns:1fr 1fr}
}
/* THE PHONE AND SMALL TABLET HERO (her brief: do not force desktop
   side-by-side behaviour onto mobile). Order is headline, short copy, search
   and CTA, then the animation full width underneath, then the numbers.
   .hero-copy and .hero-copy-in become display:contents so their children are
   direct flex children of the hero and can be ordered around the animation
   without duplicating a single element. The frame stays 16:9: it is never
   cropped into a square or a portrait. Scroll motion is off entirely here. */
@media (max-width:900px){
  /* THE HERO HAS NO SIDE PADDING HERE; its children carry their own. The frame
     was full-bleed by being wider than its parent and pulled back with negative
     margins, which measured five pixels too wide under mobile emulation and
     dragged the whole document (and the fixed nav with it) sideways. A frame
     that is simply 100% of a container with no side padding cannot be wrong by
     arithmetic, because there is no arithmetic. */
  /* overflow stays CLIP here (the base value). It was overridden to visible
     while the frame escaped its parent with negative margins; the frame no
     longer does, and visible let a sub-pixel overflow into the document's
     scroll width, which is a horizontal scrollbar on a phone. clip keeps
     overflow out of scrollWidth entirely, which hidden does not. */
  .hero{display:flex;flex-direction:column;justify-content:flex-start;
    min-height:0;
    /* the bar is in flow now (see .topbar above), so no clearance is needed */
    padding:clamp(22px,4vh,40px) 0 clamp(30px,5vh,52px)}
  /* display:contents removes the BOX, not the element, so `.hero > h1` still
     does not match: the copy children are DOM children of .hero-copy-in. Both
     have to be named or the text ships edge to edge on a phone. */
  .hero>*,.hero-copy-in>*{padding-left:var(--gut);padding-right:var(--gut)}
  .hero>.hero-stage,.hero>.hero-glow{padding-left:0;padding-right:0}
  .hero-copy,.hero-copy-in{display:contents}
  .hero-copy-in>*{max-width:none;animation-delay:0s}
  .hero-scrim{display:none}
  .hero-copy::before{display:none}
  .hero-glow{background:linear-gradient(180deg,#FFFFFF 0%,var(--void) 52%,var(--surface-3) 100%)}
  /* THE PICTURE RIGHT UNDER THE DOORS (her report, 19 Sep 2026: "I can't
     see any hero on the mobile"). At order 6 it sat below headline, doors,
     copy AND search: a sliver above the tab bar at the foot of the first
     screen. At order 4 the 16:9 frame (219px at 390 wide) lands inside the
     first screen, straight after the two doors. Copy and search follow it. */
  .hero-stage{position:static;order:4;transform:none;width:100%;margin:22px 0 0}
  .hero-video{max-height:none}
  .hero .eyebrow{order:1;margin-bottom:12px}
  .hero h1{order:2;max-width:none;font-size:clamp(38px,8.6vw,58px)}
  /* THE DOORS DIRECTLY UNDER THE HEADLINE (19 Sep 2026): who raised, who
     invested, inside the first phone screen. Copy and search follow. */
  .hero .routes{order:3;margin-top:18px}
  .hero .lede{order:4;max-width:none;font-size:16px}
  .hero .hsearch{order:5;max-width:none}
  .hero .proof{order:7;margin-top:28px;max-width:none;padding-top:20px}
  .scroll-hint{display:none}
}
@media (max-width:640px){
  /* TAP TARGETS. WCAG 2.2 asks for 24 CSS pixels and these were 19 to 22 tall,
     so the links get real padding rather than a bigger font, which would change
     the design to solve an ergonomics problem. */
  .foot-links{gap:2px}
  .intents-more a,.bigger-foot a,.shika a,.live-col-head a{display:inline-flex;
    align-items:center;min-height:26px}
  .foot-links a{padding:6px 0;min-height:24px;display:flex;align-items:center}
  .signin,.forco{padding:6px 2px;min-height:24px;display:inline-flex;align-items:center}
  .logo{padding:4px 0;min-height:24px}
  .shika a{padding:4px 0;display:inline-block}
  .proof{gap:22px;flex-wrap:wrap;margin-top:40px}
  .proof dd{font-size:18px}
  .cta{gap:10px}
  .btn-cap.lg,.btn-ghost.lg,.btn-paper,.btn-paper-ghost{font-size:14px;padding:13px 20px}
  .routes{flex-direction:column;gap:14px;margin-top:26px}
  /* in a column, a flex-basis is a HEIGHT: the desktop 240px basis opened a
     240px void between the two doors on a phone. Auto here. */
  .routes.doors .route{flex:0 0 auto;max-width:none}
  .route .btn-cap.lg,.route .btn-ghost.lg{display:block;text-align:center}
  .route small{max-width:none}
  .nav-right{gap:14px}
  .start{margin-top:56px}
  .scroll-hint{display:none}
  .foot{grid-template-columns:1fr}
  .needs li{font-size:15px;padding:10px 16px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .sec-head,.live-col,.intent,.needs li,.fy-copy,.fy-live,.paper,.coming-list li,.band,
  .intents-more,.bigger-foot{opacity:1;transform:none}
  .scroll-hint span,.pulse{animation:none}
  /* No parallax, no scale, no staged entrance. --hp is never written under
     reduced motion, but these are pinned anyway so a stale value cannot leave
     the copy faded out or the frame displaced. */
  .hero-stage,.hero-copy{transform:none!important;opacity:1!important}
  .hero-scrim{opacity:1}
  .hero-copy-in>*{animation:none;opacity:1;transform:none}
}

/* ---------------- contact page ---------------- */
body.page{padding-top:70px}
.contact{max-width:1440px;margin:0 auto;padding:clamp(46px,7vw,96px) var(--gut) clamp(70px,9vw,130px);
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:clamp(34px,6vw,96px);
  align-items:start}
.contact h1{font-size:clamp(32px,4.6vw,62px);line-height:1.02;letter-spacing:-.038em;
  font-weight:600;margin:0;max-width:14ch}
.contact .lede{margin-top:22px;max-width:44ch}
.c-meta{margin:clamp(34px,5vw,58px) 0 0;padding-top:26px;border-top:1px solid var(--line);
  display:grid;gap:20px}
.c-meta>div{display:flex;flex-direction:column-reverse;gap:4px}
.c-meta dt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.c-meta dd{margin:0;font-size:15px;color:var(--text)}
.c-meta a{color:var(--capital)}
.contact-form .form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);padding:clamp(22px,3vw,34px)}
.form{font-size:15px}
.form label{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin:18px 0 6px}
.form .row2>div>label:first-child,.form>label:first-of-type{margin-top:0}
.form .opt{text-transform:none;letter-spacing:0;color:var(--faint);font-weight:400}
.form input[type=text],.form input[type=email],.form select,.form textarea{
  width:100%;font:inherit;font-size:15px;padding:12px 14px;background:var(--surface-2);
  color:var(--text);border:1px solid var(--line-2);border-radius:var(--r-data)}
.form textarea{min-height:118px;resize:vertical;font-family:inherit}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--capital);
  outline-offset:1px;border-color:var(--capital)}
.form input::placeholder,.form textarea::placeholder{color:var(--faint)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.submit{margin-top:26px;font:inherit;font-size:15px;font-weight:600;color:var(--capital-ink);
  background:var(--capital);border:0;border-radius:var(--r-data);padding:15px 30px;cursor:pointer;
  transition:filter .25s var(--ease),transform .3s var(--ease)}
.submit:hover{filter:brightness(1.07);transform:translateY(-1px)}
.submit[disabled]{opacity:.55;cursor:default;transform:none}
.errbox{color:var(--change);font-size:13.5px;margin-top:14px}
.formnote{font-size:12.5px;color:var(--faint);margin-top:16px;line-height:1.6}
.formnote strong{color:var(--muted);font-weight:500}
.okbox{background:var(--surface);border:1px solid var(--capital);border-radius:var(--r-card);
  padding:clamp(28px,4vw,46px);text-align:center}
.okbox h2{font-size:clamp(21px,2.6vw,30px);letter-spacing:-.025em;font-weight:600;margin:0 0 12px}
.okbox p{color:var(--muted);margin:0 auto 26px;max-width:42ch;font-size:15px}
.okbox strong{color:var(--text);font-weight:500}
@media (max-width:900px){
  .contact{grid-template-columns:1fr;gap:34px}
  .contact h1{max-width:none}
}
@media (max-width:560px){ .row2{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- 5 Sep 2026
   Quality pass. The hero asks the question in words, "what changed today" shows
   real feed cards, and the three future-product teasers were replaced by the one
   live product (the Daily Brief). */
.ask{margin:26px 0 10px;font-size:15px;font-weight:560;color:var(--text);letter-spacing:-.01em}

/* real Growth Feed cards inside the live column */
.live-col.wide{padding:0}
.live-col.wide .live-col-head{padding:18px 20px 14px}
.live-cards{display:grid;gap:12px;padding:0 14px 16px}
.live-cards .obj{margin:0}
.live-cards .obj-foot{padding-top:12px}
.live-cards .why{font-size:12px;color:var(--capital);text-decoration:none}
.live-cards .why:hover{text-decoration:underline}
@media (max-width:900px){.live-cards{padding:0 12px 14px}}

/* ==================== V1 SECTIONS (her brief, 8 Sep 2026) ====================
   Recently raised, the two paths, how it works, the final two-up. Every card
   is data-dominant: the amount is the largest thing on it. Inferred content
   carries the AfterRaise-intelligence chip and sits under its own label so it
   can never read as a company statement. */
.recent{max-width:1440px;margin:0 auto;padding:clamp(56px,7vw,100px) var(--gut) 0}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rcard{display:flex;flex-direction:column;gap:7px;padding:clamp(18px,1.8vw,24px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-card);color:var(--text);text-decoration:none;
  opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .3s var(--ease),
    box-shadow .3s var(--ease)}
.rcard.in{opacity:1;transform:none}
.rcard:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px)}
.rcard .rname{font-size:18px;font-weight:600;letter-spacing:-.02em}
.rcard .ramt{font-size:clamp(24px,2.2vw,30px);font-weight:600;color:var(--capital);letter-spacing:-.025em;line-height:1.05}
.rcard .rmeta{font-size:12.5px;color:var(--faint)}
.rcard .rk{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-top:8px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rcard .rsaid{font-size:13.5px;line-height:1.5;color:var(--muted)}
.rcard .rnext{display:flex;flex-wrap:wrap;gap:6px}
.rcard .rnext span{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--insight-dim);color:var(--insight)}
.rcard .rgo{margin-top:auto;padding-top:12px;font-size:13px;color:var(--capital);font-weight:500}
.recent .more{margin:24px 0 0;text-align:center}
@media (max-width:1000px){.rgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.rgrid{grid-template-columns:1fr}}

.path{max-width:1440px;margin:0 auto;padding:clamp(64px,8vw,120px) var(--gut) 0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.path-copy{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.path-copy.in,.path-demo.in{opacity:1;transform:none}
.path-copy h2{font-size:clamp(28px,3.8vw,48px);line-height:1.04;letter-spacing:-.034em;margin:8px 0 14px}
.path-copy p{font-size:clamp(15px,1.3vw,18px);line-height:1.6;color:var(--muted);max-width:52ch;margin:0 0 20px}
.path-copy small{display:block;margin-top:12px;font-size:12.5px;color:var(--faint)}
.path-demo{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease) .15s,transform .8s var(--ease) .15s}
.dmock{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);
  padding:20px 22px;font-size:13.5px}
.dmock .dk{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}
.dmock .drow{padding:12px 0;border-top:1px solid var(--line)}
.dmock .dhead{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.dmock .dname{font-weight:600;color:var(--text)}
.dmock .damt{font-weight:600;color:var(--capital);white-space:nowrap}
.dmock .dsaid{color:var(--muted);line-height:1.5;margin:4px 0 7px}
.dmock .dopp{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.dmock .dopp i{font-style:normal;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--insight);margin-right:3px}
.dmock .dopp span{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
@media (max-width:900px){.path{grid-template-columns:1fr}}

.paper-lede{font-size:clamp(15px,1.3vw,18px);line-height:1.6;color:var(--ink-2);margin:16px 0 0;max-width:52ch}
.benefits{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.benefits li{padding:18px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);
  opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.benefits li.in{opacity:1;transform:none}
.benefits b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:5px}
.benefits span{font-size:13px;line-height:1.5;color:var(--muted)}
.first500{margin:22px 0 0;font-size:14px;line-height:1.6;color:var(--muted);max-width:74ch}
.first500 b{color:var(--capital);margin-right:8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}

/* ---------------- THE AUDIENCE STRIP (9 Sep 2026; investor panel since
   21 Sep 2026) ----------------
   One rule above, one line of copy, two actions and nothing else. It is a
   hairline band rather than a card so it reads as part of the page rather
   than as the first advertisement on it. */
.founderbar{max-width:1680px;margin:0 auto;padding:clamp(26px,3vw,40px) var(--gut) 0}
/* THE ONE FOUNDER-SHAPED LINE ABOVE THE FOLD (her note, 16 Sep 2026). Without
   it every signal on the first screen addressed somebody looking AT companies,
   and a founder read the site as a job board and left. Quiet on purpose: the
   search stays the primary action and this sits under it as a second door, not
   a competing button. It points at the company section rather than
   repeating it, so the four figures keep their place above the fold. */
.hero-founder{margin:18px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted);
  max-width:min(52ch,42vw)}
.hero-founder a{color:var(--capital);font-weight:560;white-space:nowrap;
  border-bottom:1px solid transparent;transition:border-color .25s var(--ease)}
.hero-founder a:hover{border-bottom-color:var(--capital)}
@media (max-width:1100px){.hero-founder{max-width:none}}

.fbar-in{display:flex;gap:clamp(20px,3vw,48px);align-items:flex-end;flex-wrap:wrap;
  justify-content:space-between;padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid var(--line-2)}
.fbar-copy{min-width:0;max-width:56ch}
.fbar-k{margin:0 0 8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--opp);font-weight:500}
.founderbar h2{margin:0 0 8px;font-size:clamp(21px,2.3vw,30px);line-height:1.15;
  letter-spacing:-.028em;font-weight:600;color:var(--text)}
.fbar-p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted);max-width:52ch}
.fbar-act{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fbar-link{font-size:14px;color:var(--capital);text-decoration:none;padding:8px 2px;
  border-bottom:1px solid transparent}
.fbar-link:hover{border-bottom-color:var(--capital)}
@media (max-width:760px){
  .fbar-in{align-items:stretch}
  .fbar-act{width:100%}
  .fbar-act .btn-cap{width:100%;justify-content:center;text-align:center}
}
@media (max-width:1000px){.benefits{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.benefits{grid-template-columns:1fr}}

.hiw{max-width:1440px;margin:0 auto;padding:clamp(64px,8vw,120px) var(--gut) 0}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.steps li{padding-top:16px;border-top:1px solid var(--line-2);
  opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.steps li.in{opacity:1;transform:none}
.steps .mono{display:block;font-size:13px;color:var(--capital);margin-bottom:8px}
.steps b{display:block;font-size:17px;font-weight:600;letter-spacing:-.015em;margin-bottom:6px}
.steps p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

.twoup{max-width:1440px;margin:0 auto;padding:clamp(64px,8vw,120px) var(--gut) clamp(60px,8vw,110px);
  display:grid;grid-template-columns:1fr 1fr;gap:14px}
.two{padding:clamp(24px,3vw,40px);border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);
  display:flex;flex-direction:column;gap:10px;
  opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.two.in{opacity:1;transform:none}
.two h3{font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;margin:0 0 6px}
.two .btn-cap,.two .btn-ghost{align-self:flex-start}
@media (max-width:720px){.twoup{grid-template-columns:1fr}}

/* the Daily Brief: one live line, not a list of things that do not exist yet */
.brief{max-width:1440px;margin:0 auto;padding:clamp(56px,7vw,100px) var(--gut) clamp(60px,8vw,110px)}
.brief-in{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(22px,3vw,34px) clamp(22px,3.5vw,38px)}
.brief-in h2{margin:0;font-size:clamp(21px,2.4vw,28px);letter-spacing:-.02em}
.brief-in p{margin:8px 0 0;color:var(--muted);font-size:15px;line-height:1.55}
@media (max-width:640px){.brief-in{flex-direction:column;align-items:flex-start;gap:18px}
  .brief-in .btn-ghost{width:100%;justify-content:center}}

/* LAPTOP AND SMALL DESKTOP. The animation still spans the full width, but the
   copy needs more of it than 58vw once the window is under about 1250px, or
   the headline breaks into four lines. */
@media (max-width:1250px) and (min-width:901px){
  .hero-copy-in>*{max-width:min(700px,74vw)}
  .hero .lede{max-width:min(52ch,66vw)}
  .hero-scrim{height:78%}
}

/* ======================= THE PHONE HERO IS CINEMATIC (19 Sep 2026) =======
   Her report: "just a faded look on the top, not very appealing; we are
   attracting millionaires and billionaires, the site has to play the role".
   On a phone the first screen was a pale gradient, grey type and no picture,
   because the animation was pushed to the bottom of the column. Now the phone
   gets its own cinematic first screen: the animation full width at the very
   top, the headline in white on the plum night the site uses for its dark
   scope, the two doors beneath it, everything inside the first screen. The
   values are the dark-scope tokens from pipeline/design.py, written here
   because the homepage is pinned light and cannot read them as variables
   (the same trade the LinkedIn card makes). */
@media (max-width:900px){
  .hero{background:#14102A;color:#FFFFFF;padding-top:0}
  .hero-glow{background:
    radial-gradient(circle at 85% 12%, rgba(139,92,246,.42) 0%, rgba(139,92,246,0) 46%),
    radial-gradient(circle at 0% 100%, rgba(178,88,209,.26) 0%, rgba(178,88,209,0) 50%),
    #14102A}
  .hero-stage{order:0;margin:0 0 18px;padding:0}
  .hero-video{display:block;width:100%;background:#14102A}
  .hero .eyebrow{color:#C9B4F5}
  .hero h1{color:#FFFFFF}
  .hero h1 .dim{color:#C9B4F5}
  .hero .lede{color:#EADFFF}
  .routes.doors .route small{color:#C9B4F5}
  .routes.doors .btn-ghost{color:#FFFFFF;border-color:rgba(183,157,255,.5);background:rgba(255,255,255,.04)}
  .routes.doors .btn-ghost:hover{border-color:#B79DFF}
  .hero .hsearch .ask{color:#EADFFF}
  .hero .hsearch input{background:#FFFFFF;color:#2D2340;border-color:transparent}
  .hero .hsearch .btn-ghost{color:#FFFFFF;border-color:rgba(183,157,255,.5)}
  .hero .proof{color:#EADFFF;border-top-color:rgba(183,157,255,.25)}
  .hero .proof .k,.hero .proof small{color:#C9B4F5}
  .hero .proof .v{color:#FFFFFF}
}

/* ======================= THE 30-SECOND DEMO (20 Sep 2026, her approval) =====
   A scripted visit of the real site, recorded, captioned, silent. Sits after
   the numbers and before any ask. 16:9 reserved before load (no layout
   shift), poster first, plays muted when it scrolls into view, never under
   prefers-reduced-motion, and carries controls so a person can pause it. */
.demo{padding:clamp(40px,6vw,84px) var(--gut)}
.demo-in{max-width:1180px;margin:0 auto}
.demo .sec-head{max-width:640px}
.demo-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-card,14px);
  overflow:hidden;background:#14102A;box-shadow:0 30px 80px -30px rgba(45,35,64,.45),
  0 0 0 1px var(--line);margin-top:clamp(18px,2.5vw,30px)}
.demo-frame video{display:block;width:100%;height:100%;object-fit:cover;background:#14102A}
.demo-cap{margin:14px 0 0;font-size:13.5px;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap}
/* 24px tap box (WCAG 2.2 target size): at phone width these become full-width
   block links 23px tall (a11y_violet, 21 Sep 2026). */
.demo-cap a{color:var(--capital);font-weight:560;display:inline-flex;align-items:center;
  min-height:28px;padding:2px 0}
@media (max-width:900px){.demo-frame{border-radius:12px}}
/* On a phone the caption row wraps its last link onto a lone line; stack it. */
@media (max-width:640px){.demo-cap{flex-direction:column;gap:8px}}

/* ======================= THE DEMO ON A PLUM BAND (20 Sep 2026, her call) ======
   At full width the demo showed the homepage inside the homepage, a second
   hero under the first, which read as disorienting. Now: a full-bleed plum
   band (the dark scope's values, written in because the homepage is pinned
   light), the eyebrow says "Demo" so nobody wonders what it is, and the video
   is smaller and centred so it reads as a tour, not a duplicate page. */
.demo{background:#14102A;color:#FFFFFF;position:relative;overflow:hidden}
.demo::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 88% 8%, rgba(139,92,246,.40) 0%, rgba(139,92,246,0) 46%),
  radial-gradient(circle at 4% 100%, rgba(178,88,209,.24) 0%, rgba(178,88,209,0) 52%)}
.demo-in{position:relative;max-width:880px}
.demo .eyebrow{color:#C9B4F5}
.demo .sec-head h2{color:#FFFFFF}
.demo-frame{box-shadow:0 40px 90px -30px rgba(0,0,0,.65),0 0 0 1px rgba(183,157,255,.28)}
.demo-cap{color:#C9B4F5}
.demo-cap a{color:#FFFFFF;border-bottom:1px solid rgba(183,157,255,.5)}
.demo-cap a:hover{border-bottom-color:#FFFFFF}
.hero-demo{margin:16px 0 0;font-size:14px}
.hero-demo a{color:var(--capital);font-weight:560;border-bottom:1px solid transparent}
.hero-demo a:hover{border-bottom-color:var(--capital)}
@media (max-width:900px){.hero .hero-demo{order:7}.hero-demo a{color:#C9B4F5}}