/* AfterRaise design system. Generated by pipeline/design.py. Do not edit by hand. */

: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}

*{box-sizing:border-box}
html{background:var(--void);-webkit-text-size-adjust:100%}
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}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.028em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(30px,4.2vw,50px)}
h2{font-size:23px;letter-spacing:-.02em;line-height:1.18}
h3{font-size:16.5px;letter-spacing:-.012em;font-weight:600}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--faint)}
.lede{font-size:17px;line-height:1.6;color:var(--muted);max-width:620px}
.dim{color:var(--muted)}.faint{color:var(--faint)}
.cap{color:var(--capital)}
:focus-visible{outline:2px solid var(--capital);outline-offset:3px;border-radius:4px}
::selection{background:var(--capital);color:var(--capital-ink)}
.skip{position:absolute;left:-9999px;top:0;background:var(--capital);color:var(--capital-ink);
  padding:12px 18px;font-weight:600;z-index:200}
.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}
hr{border:0;border-top:1px solid var(--line);margin:0}

.page{max-width:1240px;margin:0 auto;padding:0 var(--gut) 96px}
.page.narrow{max-width:820px}
.page.wide{max-width:1400px}
.stack>*+*{margin-top:var(--s,20px)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 332px;gap:34px;align-items:start}
.split>*{min-width:0}
.grid2>*{min-width:0}
.rail{position:sticky;top:88px;display:flex;flex-direction:column;gap:18px}
.sec{padding-top:44px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:18px}
.sec-head .more{font-size:13px;color:var(--muted);border-bottom:1px solid var(--line-2);
  padding-bottom:2px;transition:color var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease)}
.sec-head .more:hover{color:var(--capital);border-color:var(--capital)}
.crumb{font-size:12.5px;color:var(--faint);padding:22px 0 14px;display:flex;gap:8px;
  flex-wrap:wrap;align-items:center}
.crumb a{color:var(--faint);transition:color var(--t-micro) var(--ease)}
.crumb a:hover{color:var(--capital)}
.crumb i{font-style:normal;opacity:.5}
@media (max-width:960px){.split{grid-template-columns:minmax(0,1fr)}.rail{position:static}
  .rail .rail-hide{display:none}}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}

.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}

.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}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px 22px;box-shadow:var(--shadow-card)}
.card.tight{padding:16px 18px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-card)}
/* ---- theme toggle: moon in light, sun in dark ---- */
[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}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .th-l{display:none}
  :root:not([data-theme="light"]) .th-d{display:inline}
  :root[data-theme="light"] .th-l{display:inline}
  :root[data-theme="light"] .th-d{display:none}
}

.oppbar{margin:18px 0 6px}
.oppbar-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.oppbar input[type=search]{flex:1 1 280px;min-width:0;padding:11px 14px;font:inherit;
  background:var(--surface);color:var(--text);border:1px solid var(--line-2);
  border-radius:var(--r-card)}
.oppbar select{padding:11px 12px;font:inherit;background:var(--surface);color:var(--text);
  border:1px solid var(--line-2);border-radius:var(--r-card);max-width:220px}
.oppbar input:focus,.oppbar select:focus{outline:2px solid var(--capital);outline-offset:1px}
.oppcount{margin-top:9px;font-size:12.5px}
@media(max-width:560px){.oppbar select{max-width:100%;flex:1 1 100%}}
/* ---- guides and how-it-works ---- */
.g-p{font-size:16px;line-height:1.68;color:var(--muted);max-width:66ch;margin:0 0 16px}
.g-article h2{font-size:22px;line-height:1.3;margin:34px 0 12px;color:var(--text)}
.g-ul{margin:0 0 18px;padding-left:20px;max-width:66ch}
.g-ul li{font-size:15.5px;line-height:1.65;color:var(--muted);margin-bottom:9px}
.g-ul li b{color:var(--text);font-weight:560}
.g-steps{list-style:none;margin:18px 0 0;padding:0;counter-reset:s}
.g-step{display:flex;gap:16px;align-items:flex-start;padding:18px 0;
  border-top:1px solid var(--line)}
.g-step:first-child{border-top:0}
.g-n{flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:var(--capital-dim);color:var(--capital);font-size:13px;font-weight:600}
.g-step h3{font-size:16.5px;margin:4px 0 6px;color:var(--text);font-weight:560}
.g-step p{font-size:15px;line-height:1.62;color:var(--muted);max-width:62ch;margin:0}
.g-card{display:block;text-decoration:none;transition:border-color .18s ease}
.g-card:hover{border-color:var(--capital)}
.g-card .obj-sum{margin-top:0}
@media(max-width:640px){.g-step{gap:12px}.g-n{flex-basis:28px;height:28px;font-size:12px}
  .g-article h2{font-size:19.5px}}
.paper{background:var(--paper);color:var(--ink);border-radius:var(--r-card);padding:26px 28px}
.paper h1,.paper h2,.paper h3{color:var(--ink)}
.paper p,.paper .lede{color:var(--ink-2)}
.paper .eyebrow,.paper .faint{color:var(--ink-3)}
.paper a:not(.btn){color:var(--ink);border-bottom:1px solid var(--ink-3)}
/* BUG FIXED 4 Sep 2026: `.paper a` also matched the buttons inside the slab, so
   the claim CTA rendered unreadable on every company page. The slab is the
   inverted panel (cobalt in light, pale in dark), so its buttons take the
   dedicated --paper-btn tokens rather than the page accent. Guarded by the
   contrast test in tests/verify4.mjs, which measures the real rendered colours. */
.paper .btn-cap{background:var(--paper-btn);color:var(--paper-btn-ink);border-color:var(--paper-btn)}
.paper .btn-cap:hover{filter:brightness(1.04)}
.paper .btn-ghost,.paper .btn-quiet{color:var(--ink);border-color:var(--paper-line);
  background:transparent}
.paper .btn-ghost:hover,.paper .btn-quiet:hover{border-color:var(--ink-3);
  background:var(--paper-hover)}
.paper .prov.dec{background:rgba(255,255,255,.18);color:var(--ink)}
.rowlist{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  background:var(--surface)}
.rowlist>*{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:14px}
.rowlist>*:last-child{border-bottom:0}
.rowlist a.row:hover{background:var(--surface-2)}
/* A picker row is a button, not a link: choosing a company changes this form,
   it does not navigate. Border set on the long hand so .rowlist>*:last-child
   still closes the list. */
.rowlist button.row{width:100%;text-align:left;background:none;color:inherit;
  font:inherit;cursor:pointer;border-width:0 0 1px;border-style:solid;
  border-color:var(--line)}
.rowlist button.row:last-child{border-bottom-width:0}
.rowlist button.row:hover{background:var(--surface-2)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  border-radius:var(--r-card);overflow:hidden}
.kv>div{background:var(--surface);padding:13px 16px;box-shadow:0 0 0 1px var(--line)}
.kv .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  font-weight:600}
.kv .v{font-size:14px;color:var(--text);margin-top:4px;line-height:1.45}
.empty{border:1px dashed var(--line-2);border-radius:var(--r-card);padding:26px 24px;
  text-align:left;background:var(--surface-2)}
.empty h3{color:var(--muted);font-weight:500;margin-bottom:6px}
.empty p{font-size:14px;color:var(--faint);max-width:56ch;line-height:1.6}
.empty .btn{margin-top:16px}
/* /how-it-works/ on V1: four numbered steps (8 Sep 2026). */
.hiw{display:grid;gap:0}
.hiw-step{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--line)}
.hiw-step:last-child{border-bottom:1px solid var(--line)}
.hiw-n{font-size:22px;color:var(--capital);font-weight:600;line-height:1.2}
.hiw-step h2{font-size:19px;margin:0 0 6px;letter-spacing:-.01em}
.hiw-step p{margin:0;color:var(--muted);line-height:1.6;max-width:60ch}
@media (max-width:600px){.hiw-step{grid-template-columns:40px 1fr;gap:12px}.hiw-n{font-size:18px}}
.note{display:flex;gap:12px;align-items:flex-start;background:var(--surface-2);
  border:1px solid var(--line);border-left:2px solid var(--capital);border-radius:var(--r-data);
  padding:13px 16px;font-size:13.5px;color:var(--muted);line-height:1.55}
.note b{color:var(--text);font-weight:560}
.note .x{margin-left:auto;background:none;border:0;color:var(--faint);cursor:pointer;
  /* WCAG 2.2 target size: the glyph is 13x17, the hit area must not be */
  min-width:28px;min-height:28px;display:inline-flex;align-items:center;
  justify-content:center;
  font-size:17px;line-height:1;padding:0 2px}
.note.trust{align-items:center;flex-wrap:wrap;gap:8px 10px;padding:9px 14px;font-size:12.5px;
  border-left-color:var(--line)}
.note.trust .lbl{color:var(--faint);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;margin-right:2px}
.note.trust a{color:var(--capital);font-weight:560;text-decoration:none;margin-left:2px}
.note.trust a:hover{text-decoration:underline}
.why-you{border-left:2px solid var(--opp)}
.why-you .wl{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.why-you .wl li{display:grid;grid-template-columns:128px 1fr;gap:10px;font-size:13.5px;align-items:baseline}
.why-you .wl li span{color:var(--faint);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.why-you .wl li b{color:var(--text);font-weight:560}
.why-you .fit{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:12px;color:var(--opp);
  font-weight:600;letter-spacing:.04em}
@media (max-width:560px){.why-you .wl li{grid-template-columns:1fr;gap:3px}}
.skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);
  background-size:200% 100%;animation:shim 1.4s linear infinite;border-radius:var(--r-data)}
@keyframes shim{0%{background-position:200% 0}100%{background-position:-200% 0}}
.errbox{border:1px solid var(--hot);background:var(--hot-dim);border-radius:var(--r-card);
  padding:18px 20px;color:var(--text);font-size:14px}
table{border-collapse:collapse;width:100%;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
th{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  font-weight:600;text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-2);
  background:var(--surface-2)}
td{padding:12px 14px;font-size:13.5px;border-bottom:1px solid var(--line);vertical-align:top;
  color:var(--muted)}
tr:last-child td{border-bottom:0}
td a.co{color:var(--text);font-weight:560}
td a.co:hover{color:var(--capital)}
.num{text-align:right;white-space:nowrap;color:var(--text)}
@media (max-width:640px){.card{padding:17px 16px}.paper{padding:22px 18px}}

/* 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}}

.room-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:start;
  padding:26px 0 24px;border-bottom:1px solid var(--line)}
.room-id{display:flex;gap:16px;align-items:flex-start}
.room-badge{width:58px;height:58px;border-radius:12px;display:grid;place-items:center;
  font-size:21px;font-weight:600;letter-spacing:-.03em;background:var(--surface-2);
  border:1px solid var(--line-2);color:var(--muted);flex:none}
.room-name{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.03em;line-height:1.08}
/* What the company does, above the money (STR-004, 21 Sep 2026). */
.room-what{margin:10px 0 0;font-size:16.5px;line-height:1.5;color:var(--text);max-width:64ch}
.room-what small{display:block;margin-top:3px;font-size:12px;color:var(--muted)}
.room-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.room-acts{display:flex;gap:9px;flex-wrap:wrap}
.mom{border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px;
  background:var(--surface)}
.mom-top{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.mom-num{font-family:var(--mono);font-size:44px;font-weight:500;letter-spacing:-.04em;
  line-height:1;color:var(--capital)}
.mom-band{font-size:15px;font-weight:600;letter-spacing:-.015em}
.mom-sub{font-size:12.5px;color:var(--faint);margin-top:3px}
.mom-bars{display:grid;gap:12px}
.mom-row{display:grid;grid-template-columns:128px 1fr 54px;gap:11px;align-items:center}
.mom-l{font-size:12.5px;color:var(--muted)}
.mom-bar{height:5px;background:var(--surface-3);border-radius:3px;overflow:hidden}
.mom-bar span{display:block;height:100%;background:var(--capital);border-radius:3px;
  transform-origin:left;animation:grow var(--t-slow) var(--ease) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mom-v{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right}
.mom-n{grid-column:2/4;font-size:11.5px;color:var(--faint);margin-top:-7px}
.mom-pend{margin-top:17px;padding-top:15px;border-top:1px solid var(--line)}
.mom-pend li{font-size:12.5px;color:var(--faint);line-height:1.7}
.mom-pend b{color:var(--muted);font-weight:560}
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,var(--change-fill),var(--line) 70%)}
.tl li{position:relative;padding:0 0 22px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-24px;top:6px;width:9px;height:9px;
  border-radius:50%;background:var(--surface);border:1.5px solid var(--line-3)}
.tl li.live::before{background:var(--change-fill);border-color:var(--change-fill);
  box-shadow:0 0 10px var(--change-glow)}
.tl .d{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.02em}
.tl .t{font-size:14.5px;color:var(--text);font-weight:530;margin-top:2px}
.tl .s{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.55;max-width:56ch}
.perm{display:grid;gap:14px}
.perm-col .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--faint);margin-bottom:9px}
.pass-head{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.pass-avatar{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  font-size:25px;font-weight:600;background:var(--surface-2);border:1px solid var(--line-2);
  color:var(--muted);flex:none}
.proven{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  border-radius:var(--r-card);overflow:hidden}
.proven>div{background:var(--surface);padding:15px 17px;box-shadow:0 0 0 1px var(--line)}
.proven .n{font-family:var(--mono);font-size:26px;color:var(--capital);font-weight:500;
  letter-spacing:-.03em;line-height:1}
.proven .l{font-size:12px;color:var(--faint);margin-top:6px;line-height:1.4}
.avail{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:560;
  padding:6px 13px;border-radius:var(--r-pill);border:1px solid var(--line-2)}
.avail.yes{color:var(--verified);background:var(--verified-dim);border-color:transparent}
.avail.ltd{color:var(--change);background:var(--change-dim);border-color:transparent}
@media (max-width:760px){.room-hero{grid-template-columns:1fr}
  .mom-row{grid-template-columns:100px 1fr 48px}.mom-num{font-size:36px}}

.field{margin-bottom:16px}
.field label,.lbl{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--muted);margin-bottom:7px}
.field .hint{font-size:12.5px;color:var(--faint);margin:-3px 0 7px;line-height:1.5;
  text-transform:none;letter-spacing:0}
/* "optional" inside a label. It had NO STYLES AT ALL, so it inherited the
   uppercase label treatment and ran straight into the question: the claim page
   read "COMPANY WEBSITE OPTIONAL IF WE ALREADY HOLD IT" as one shouted line.
   Found on the company claim form, 9 Sep 2026, and it was there before it. */
.field label .opt{text-transform:none;letter-spacing:0;font-weight:400;font-size:12px;
  color:var(--faint)}
/* the literal character again, never a CSS hex escape (see .claim-more above) */
.field label .opt::before{content:"·";margin:0 6px 0 4px;color:var(--line-3)}
/* Every text-entry type belongs here. password and tel were missing, so a
   password box fell back to the browser default: shorter, narrower and in
   the wrong font, on /join/ and /signin/, the two forms that matter most.
   Found 6 Sep 2026 by her, from a screenshot of the real page. */
input[type=text],input[type=email],input[type=url],input[type=date],input[type=number],
input[type=password],input[type=tel],
select,textarea{width:100%;font:inherit;font-size:14.5px;padding:11px 13px;
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-data);
  color:var(--text);transition:border-color var(--t-micro) var(--ease)}
textarea{min-height:96px;resize:vertical;line-height:1.55}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--capital);
  box-shadow:0 0 0 3px var(--capital-dim)}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' stroke='%235E6D89' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px;
  padding-right:34px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:8px}
.pick{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-data);
  padding:10px 12px;cursor:pointer;transition:border-color var(--t-micro) var(--ease),
  color var(--t-micro) var(--ease)}
.pick:hover{border-color:var(--line-3);color:var(--text)}
/* Every .pick lives inside a .field, and `.field label` (0,1,1) BEATS `.pick`
   (0,1,0), so it won display:block plus the uppercase label treatment: the
   checkbox sat hard against its word with no gap, and the options shouted in
   capitals. She spotted it on the live signup, 6 Sep 2026. Restated at a
   specificity that wins, rather than by touching the generic label rule. */
.field label.pick,.field .picks label.pick{display:flex;align-items:center;gap:10px;
  font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--muted);
  line-height:1.35}
.field label.pick.on{color:var(--text)}
.pick input{width:auto;margin:0;accent-color:var(--capital);flex:none}
.pick.on{border-color:var(--capital);color:var(--text);background:var(--capital-dim)}
.cardpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.cardpick button{text-align:left;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:var(--r-card);padding:14px 15px;cursor:pointer;
  transition:border-color var(--t-micro) var(--ease),background var(--t-micro) var(--ease)}
.cardpick button:hover{border-color:var(--line-3)}
.cardpick button.on{border-color:var(--capital);background:var(--capital-dim)}
.cardpick .t{display:block;font-size:14px;font-weight:560;color:var(--text)}
.cardpick .d{display:block;font-size:12px;color:var(--faint);margin-top:3px;line-height:1.45}
/* the join question now offers six answers, not three: cap at three columns so
   each keeps a readable measure instead of six narrow strips */
.cardpick.persona{grid-template-columns:repeat(3,minmax(0,1fr))}
/* what claiming actually gets you: a plain benefit list, not marketing boxes */
.whatfor{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.whatfor li{padding:14px 22px 15px 0;border-bottom:1px solid var(--line)}
.whatfor b{display:block;font-size:14.5px;font-weight:560;color:var(--text)}
.whatfor span{display:block;font-size:12.5px;line-height:1.5;color:var(--muted);
  margin-top:3px;max-width:44ch}
@media (max-width:700px){.whatfor{grid-template-columns:1fr}}
@media (max-width:820px){.cardpick.persona{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cardpick.persona{grid-template-columns:1fr}}
.counter{font-family:var(--mono);font-size:11.5px;color:var(--faint);text-align:right;
  margin-top:6px}
.counter.over{color:var(--hot)}
.fielderr{color:var(--hot);font-size:12.5px;margin-top:6px}
/* A password box with a reveal, so a typo is caught by looking rather than
   by typing the whole thing twice. */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:74px}
.pw-see{position:absolute;top:50%;right:6px;transform:translateY(-50%);
  font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--capital);background:none;border:0;border-radius:8px;
  padding:6px 9px;cursor:pointer;min-height:32px}
.pw-see:hover{background:var(--capital-dim)}
/* Why an account is worth making, stated before the form asks for one. */
.join-why{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:9px;
  max-width:56ch}
.join-why li{position:relative;padding-left:22px;font-size:14.5px;
  color:var(--muted);line-height:1.55}
.join-why li::before{content:"";position:absolute;left:4px;top:9px;width:7px;
  height:7px;border-radius:2px;background:var(--opp)}
.join-why b{color:var(--text);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ov{position:fixed;inset:0;z-index:150;background:rgba(30,20,60,.55);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;
  transition:opacity var(--t-micro) var(--ease);overflow-y:auto}
.ov.on{opacity:1}
.md{position:relative;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-card);max-width:520px;width:100%;padding:26px 28px;
  box-shadow:var(--shadow);max-height:90vh;overflow-y:auto;transform:translateY(10px);
  transition:transform var(--t-std) var(--ease)}
.ov.on .md{transform:none}
.md h3{font-size:20px;margin-bottom:6px}
.md .sub{font-size:13.5px;color:var(--muted);margin-bottom:20px;line-height:1.55}
.md .x{position:absolute;top:14px;right:16px;background:none;border:0;font-size:22px;
  line-height:1;color:var(--faint);cursor:pointer;padding:4px}
.md .x:hover{color:var(--text)}
.md .fine{font-size:11.5px;color:var(--faint);margin-top:14px;line-height:1.55}
.ok{text-align:center;padding:8px 0 2px}
.ok .tick{width:48px;height:48px;border-radius:50%;background:var(--verified-dim);
  color:var(--verified);display:grid;place-items:center;margin:0 auto 15px;font-size:23px}
@media (max-width:560px){.row2{grid-template-columns:1fr}.md{padding:22px 18px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;
  animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}}

/* VERIFY YOUR COMPANY. The calmest page on the site, deliberately: it is where
   somebody asks for control of a company page, and a page that feels like a
   funnel would be the wrong thing to feel. Ground is the pale lilac surface,
   the questions sit on white, the reason we are asking sits beside them, and
   the only bright colour is the one button that submits. */
.claim-page{max-width:1180px;margin:0 auto;padding:0 var(--gut) clamp(60px,8vw,110px)}
.claim-page h1{font-size:clamp(30px,3.6vw,46px);letter-spacing:-.032em;margin:6px 0 12px}
.claim-page>.lede{max-width:60ch;margin-bottom:clamp(26px,3.4vw,40px)}
.claim-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);
  gap:clamp(22px,3vw,44px);align-items:start}

.claim-flow{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--shadow-card);
  padding:clamp(22px,3vw,36px)}
.claim-step h2{font-size:clamp(21px,2.3vw,28px);letter-spacing:-.024em;margin:6px 0 10px}
.claim-step>.obj-sum{margin-bottom:20px;max-width:56ch}
.claim-step .field{margin-bottom:18px}
.claim-step .fine{margin-top:16px;color:var(--faint);font-size:12.5px;line-height:1.6}
.claim-step .fine a{color:var(--capital)}
/* the step number is a quiet plum label, never a progress bar racing you along */
.claim-n{color:var(--opp);margin-bottom:0}
.claim-nav{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:24px}
.claim-nav .btn-ghost{border-color:var(--line-2)}
.claim-step .fielderr{margin-top:14px}

/* the code box: six digits, spaced, unmistakably one thing to type */
.codebox{font-family:var(--mono);font-size:26px;letter-spacing:.34em;text-align:center;
  max-width:260px;padding:14px 12px 14px 22px}

/* THE TRUST PANEL. What we check, in four lines, next to the questions rather
   than above them, so it reads as the reason and never as a speech. */
.claim-trust{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-card);padding:clamp(20px,2.4vw,28px);position:sticky;top:88px}
.claim-trust h2{font-size:18px;letter-spacing:-.018em;margin:0 0 8px;color:var(--text)}
.claim-trust>p{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 18px}
.ct-k{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  color:var(--opp);margin:0 0 10px}
.ct-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ct-list li{display:grid;grid-template-columns:16px 1fr;gap:10px;font-size:13.5px;
  line-height:1.5;color:var(--text);align-items:start}
/* a check mark drawn in the border colour, not green: nothing is verified yet */
.ct-i{width:14px;height:14px;margin-top:3px;border-radius:50%;
  border:1.5px solid var(--line-3);display:block}
.ct-fine{font-size:12px;line-height:1.6;color:var(--faint);margin:18px 0 0;
  padding-top:14px;border-top:1px solid var(--line)}

/* THE ASK (her brief, 9 Sep 2026). Step 3 asks what the company
   needs next, so each option carries a line of explanation under its label and
   is a two-line pick rather than a one-word one. SPECIFICITY: `.field label`
   is (0,1,1) and beats a bare `.pick`, which is the collision that broke the
   join picks on 6 Sep, so every rule here is written to outrank it. */
.picks.needs{grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:9px}
.picks.vis-picks{grid-template-columns:1fr;gap:9px}
.field label.pick.need,.field label.pick.vis,
.field .picks label.pick.need,.field .picks label.pick.vis{
  align-items:flex-start;padding:12px 13px;line-height:1.4}
.pick.need input,.pick.vis input{margin-top:2px}
.pick.need span,.pick.vis span{display:block;min-width:0}
.pick.need b,.pick.vis b{display:block;font-weight:560;font-size:13.5px;color:var(--text)}
.pick.need i,.pick.vis i{display:block;font-style:normal;font-size:12px;line-height:1.45;
  color:var(--faint);margin-top:2px}

/* The page details, demoted under a native disclosure so the ask is the whole
   of what a busy founder has to read. No JavaScript: a details element that
   fails to script still opens. */
.claim-more{border:1px solid var(--line);border-radius:var(--r-data);
  background:var(--surface-2);padding:0 14px;margin:0 0 18px}
.claim-more>summary{cursor:pointer;padding:13px 2px;font-size:13.5px;font-weight:560;
  color:var(--text);list-style:none}
.claim-more>summary::-webkit-details-marker{display:none}
.claim-more>summary::before{content:"+";display:inline-block;width:16px;color:var(--opp);
  font-weight:700}
/* THE LITERAL CHARACTER, never a CSS hex escape: this stylesheet is a PYTHON
   string, and Python reads a backslash-digit sequence as an OCTAL escape long
   before CSS ever sees it. That shipped a box glyph to a page on 6 Sep 2026. */
.claim-more[open]>summary::before{content:"−"}
.claim-more>summary:focus-visible{outline:2px solid var(--capital);outline-offset:2px}
.claim-more .field:last-child{margin-bottom:16px}

/* a company page says representative verified, and never says owner */
.repver{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  color:var(--verified);background:var(--verified-dim);border-radius:var(--r-pill);
  padding:4px 12px}
.repver::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--verified-fill)}

@media (max-width:940px){
  .claim-grid{grid-template-columns:1fr}
  /* on a phone the reason comes FIRST: it is why the questions are worth
     answering, and below the form it would never be read */
  .claim-flow{order:2}
  .claim-trust{order:1;position:static}
}
@media (max-width:560px){
  .claim-flow{padding:20px 16px}
  .claim-nav .btn{width:100%;justify-content:center;text-align:center}
  .codebox{max-width:none;width:100%}
}

.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}}

.act-head .exp{font-size:13.5px;color:var(--faint);max-width:66ch;line-height:1.6;
  margin-top:12px}
.filterbar{display:flex;gap:7px;flex-wrap:wrap;margin:20px 0 4px}
.match{display:inline-flex;align-items:baseline;gap:5px;font-family:var(--mono);
  font-size:12px;color:var(--opp);font-weight:500}
.match b{font-size:19px;letter-spacing:-.02em}
.tl-filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.infer-box{border:1px solid var(--line);border-left:3px solid var(--insight-fill);
  border-radius:var(--r-data);background:var(--surface);padding:16px 18px;margin-top:14px;
  box-shadow:var(--shadow-card)}
.infer-box .k{display:flex;align-items:center;gap:9px;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--insight);margin-bottom:10px}
.infer-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.infer-cols h4{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:8px;
  letter-spacing:0}
.infer-cols li{font-size:13.5px;color:var(--text);padding:4px 0 4px 14px;position:relative;
  line-height:1.45}
.infer-cols li::before{content:"";position:absolute;left:0;top:12px;width:5px;height:5px;
  border-radius:50%;background:var(--insight-fill);opacity:.8}
.infer-basis{font-size:11.5px;color:var(--faint);margin-top:12px;line-height:1.5}
.cluster{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.cluster .lvl{font-size:10px;letter-spacing:.13em;font-weight:700;padding:4px 10px;
  border-radius:2px}
.cluster .lvl.HIGH{background:var(--change-dim);color:var(--change)}
.cluster .lvl.MEDIUM{background:var(--insight-dim);color:var(--insight)}
.cluster .lvl.EARLY{background:var(--surface-3);color:var(--muted)}
.cluster .lbl{font-size:13px;color:var(--muted)}
.sigs{margin-top:12px;display:grid;gap:7px}
.sigs li{display:flex;gap:10px;align-items:baseline;font-size:13px;color:var(--muted)}
.sigs .d{font-family:var(--mono);font-size:11px;color:var(--faint);min-width:78px}
@media (max-width:560px){.infer-cols{grid-template-columns:1fr}}

.obj.question::before{background:var(--capital)}
.question .obj-kind{color:var(--capital)}
.q-context{font-size:14px;color:var(--muted);line-height:1.6;font-style:italic;
  border-left:2px solid var(--line-2);padding-left:14px;margin-top:10px}
.answer{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);
  padding:17px 19px}
.answer .who{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.answer .cred{font-size:11.5px;color:var(--verified);font-weight:560}
.answer p{font-size:14px;color:var(--muted);line-height:1.62;max-width:66ch}
.answer .ackrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px;align-items:center}
.ack{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  padding:3px 10px;border-radius:var(--r-pill)}
.ack.help{background:var(--verified-dim);color:var(--verified)}
.ack.vhelp{background:var(--verified-dim);color:var(--verified);
  box-shadow:inset 0 0 0 1px var(--verified)}
.ack.intro{background:var(--eu-dim);color:var(--eu)}
.rank-note{font-size:12px;color:var(--faint);line-height:1.6;max-width:64ch}

.share-sizes{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.share-prev{border:1px solid var(--line-2);border-radius:var(--r-data);overflow:hidden;
  background:var(--void)}
.share-prev canvas{width:100%;height:auto;display:block}
.share-acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.share-txt{margin-top:14px}
.share-txt textarea{min-height:64px;font-size:13px}
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:140;max-width:520px;
  margin:0 auto;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-card);padding:18px 20px;box-shadow:var(--shadow)}
.consent p{font-size:13px;color:var(--muted);line-height:1.55}
.consent .row{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
@media (max-width:920px){.consent{bottom:74px}}
.gate-benefits{margin:14px 0 4px;display:grid;gap:8px}
.gate-benefits li{display:flex;gap:10px;font-size:13.5px;color:var(--muted);
  align-items:baseline}
.gate-benefits li::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--capital);flex:none;transform:translateY(-1px)}
.persona{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  margin:16px 0}
.join-step{margin-top:30px}
.join-step .card{margin-top:6px}

.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.dash-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);padding:18px 20px;min-width:0}
.dash-card h3{margin-bottom:12px;display:flex;align-items:center;gap:9px}
.dash-card .n{font-family:var(--mono);font-size:26px;color:var(--capital);
  letter-spacing:-.03em}
.dash-empty{font-size:13px;color:var(--faint);line-height:1.55}
.pill-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}

.fy-panel{margin-top:clamp(30px,4vw,48px);padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--line)}
.fy-panel:first-child{border-top:0;padding-top:0}
.fy-panel .live-list{list-style:none;margin:0;padding:0}
.fy-panel .live-list li{border-bottom:1px solid var(--line)}
.fy-panel .live-list a{display:block;padding:13px 0;transition:padding-left var(--t-std) var(--ease)}
.fy-panel .live-list a:hover{padding-left:8px}
.fy-panel .live-list .t{font-size:15px;font-weight:500;letter-spacing:-.012em;color:var(--text)}
.fy-panel .live-list .m{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px;
  font-size:12.5px;color:var(--muted)}
.fy-panel .live-list .k{color:var(--capital)}
.fy-panel .live-list .k.opp{color:var(--opp)}
.intents{display:grid;grid-template-columns:repeat(3,1fr);
  margin:clamp(24px,3vw,38px) 0 0;border-top:1px solid var(--line-2)}
.intents .intent{display:flex;flex-direction:column;gap:8px;position:relative;
  padding:22px 22px 24px;border-bottom:1px solid var(--line-2);
  border-right:1px solid var(--line-2);transition:background var(--t-std) var(--ease)}
/* "why this matches you": the plain-English reason beside a For you panel */
.fy-why{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;padding:12px 14px;
  border-radius:var(--r-data);background:var(--opp-dim);color:var(--text);font-size:13.5px;
  line-height:1.55}
.fy-why b{color:var(--opp);font-weight:600;white-space:nowrap}
/* the homepage's four primary routes, and the two quieter ones beneath */
.intents.four{grid-template-columns:repeat(4,1fr)}
.intents.four .intent:nth-child(3n){border-right:1px solid var(--line-2)}
.intents.four .intent:nth-child(4n){border-right:0}
.intents-more{margin:14px 0 0;font-size:13.5px;color:var(--muted)}

/* /for-companies/: one argument per section, so each needs room to be its own
   idea rather than another row in a grid. */
.co-hero{padding:6px 0 30px;border-bottom:1px solid var(--line-2);margin-bottom:8px}
.co-sec{padding-top:34px}
.co-sec .eyebrow{color:var(--capital)}
.co-sec h2{font-size:clamp(21px,3.1vw,29px);line-height:1.15;letter-spacing:-.015em;
  margin:9px 0 12px;max-width:22ch;text-wrap:balance}
.co-lead{max-width:60ch;line-height:1.68;color:var(--muted);font-size:15.5px;margin:0}
.co-lead b{color:var(--text);font-weight:600}
.co-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.co-cta-note{font-size:13px;color:var(--faint);line-height:1.5;max-width:30ch}
.co-ask{list-style:none;padding:0;margin:20px 0 4px;display:grid;gap:10px;max-width:56ch;
  counter-reset:ask}
.co-ask li{position:relative;padding-left:34px;color:var(--muted);line-height:1.55;
  font-size:14.5px;counter-increment:ask}
.co-ask li::before{content:counter(ask);position:absolute;left:0;top:0;width:23px;
  height:23px;border-radius:7px;background:var(--capital-dim);color:var(--capital);
  font-size:12px;font-weight:700;display:grid;place-items:center;
  font-variant-numeric:tabular-nums}
.co-close{padding-top:34px;border-top:1px solid var(--line-2);margin-top:34px}
.co-alt{margin:20px 0 0;font-size:13.5px;color:var(--faint);line-height:1.9}
.co-alt a{color:var(--capital)}
.co-sec.has-aside{display:grid;gap:28px;align-items:start}
@media (min-width:980px){
  .co-sec.has-aside{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:52px}
}
.co-aside{background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:14px;padding:20px 22px}
.co-aside-h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin:0 0 10px;font-weight:600}
.co-list{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.co-list li{position:relative;padding-left:20px;font-size:14px;line-height:1.5;
  color:var(--muted)}
.co-list li::before{position:absolute;left:0;top:0;font-weight:700}
/* Literal characters, not CSS hex escapes: this stylesheet is a Python string,
   so "3" is read as the OCTAL escape  followed by "3" and ships a box
   glyph to the page. */
.co-list.is-thin li::before{content:"·";color:var(--faint);font-size:17px;
  line-height:1.1}
.co-list.is-full li{color:var(--text)}
.co-list.is-full li::before{content:"✓";color:var(--verified)}
.co-chips{display:flex;flex-wrap:wrap;gap:7px}
.co-chip{font-size:12.5px;line-height:1;padding:7px 10px;border-radius:999px;
  background:var(--capital-dim);color:var(--capital);white-space:nowrap}
/* a lead word stands in for a figure on the cards that honestly have none */
.intents .intent .intent-f .n.word{font-size:clamp(19px,2.4vw,23px);letter-spacing:-.01em}

/* /for-you/: the live figures are the reason to look, so they are set like it.
   Each route keeps its own semantic colour, the same one it carries everywhere
   else on the site, so the grid reads as six different things and not one. */
.intents .intent{--role:var(--capital)}
.intents .intent .intent-f{display:flex;flex-direction:column;gap:1px}
.intents .intent .intent-f .n{font-family:var(--font-display,inherit);
  font-size:clamp(24px,3.4vw,32px);font-weight:700;line-height:1;letter-spacing:-.02em;
  color:var(--role);font-variant-numeric:tabular-nums}
.intents .intent .intent-f .l{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint)}
.intents .intent::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--role);opacity:0;transition:opacity var(--t-micro) var(--ease)}
.intents .intent:hover::after,.intents .intent:focus-visible::after{opacity:1}
.intents .intent:hover .intent-h{color:var(--role)}
.intents .intent .intent-c{color:var(--role)}

.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.four{grid-template-columns:repeat(2,1fr)}
  .intents.four .intent:nth-child(2n){border-right:0}
  .intents.four .intent:nth-child(3n){border-right:1px solid var(--line-2)}
  .intents.four .intent:nth-child(4n){border-right:0}}
@media (max-width:620px){.intents.four{grid-template-columns:1fr}
  .intents.four .intent,.intents.four .intent:nth-child(3n){border-right:0}}
/* "While you were away" on the feed: real counts since the last visit */
.wywa-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.wywa-list li{font-size:13.5px;color:var(--muted)}
.wywa-list b{font-family:var(--mono);color:var(--change);font-weight:600;margin-right:4px}
.intents .intent:nth-child(3n){border-right:0}
.intents .intent:hover{background:var(--surface-2)}
.intents .intent.is-on{background:var(--capital-dim)}
.intent-h{font-size:17px;font-weight:500;letter-spacing:-.018em;color:var(--text)}
.intent-b{font-size:13px;line-height:1.55;color:var(--muted)}
.intent-f{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.intent-c{margin-top:auto;padding-top:12px;font-size:12.5px;color:var(--capital);
  display:inline-flex;align-items:center;gap:6px}
.intent-c i{font-style:normal}
@media (max-width:1000px){.intents{grid-template-columns:repeat(2,1fr)}
  .intents .intent:nth-child(3n){border-right:1px solid var(--line-2)}
  .intents .intent:nth-child(2n){border-right:0}}
@media (max-width:620px){.intents{grid-template-columns:1fr}
  .intents .intent,.intents .intent:nth-child(2n),.intents .intent:nth-child(3n){border-right:0}}

/* THE FOUNDERS PAGE (/founders/, her brief 9 Sep 2026; unrouted since 21 Sep
   2026, block kept for render_founders.py).
   The most senior page on the site, so it is the quietest: more white, larger
   type, wider rhythm, and violet used only where something is actually an
   action or actually a state. No gradients, no glow, no diagram. A Series B
   CEO should read it as a document, not as a landing page. */
.founders{max-width:1120px;margin:0 auto;padding:0 var(--gut) clamp(70px,9vw,130px)}
.founders h2{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.03em;line-height:1.12;
  margin:0 0 18px;max-width:20ch}
.f-dim{color:var(--muted)}
.f-k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--opp);margin:0 0 14px;font-weight:500}
.f-p{max-width:60ch;font-size:clamp(15px,1.15vw,16.5px);line-height:1.7;color:var(--muted);
  margin:0 0 16px}
.f-p-2{margin-top:26px;color:var(--text)}
.f-fine{max-width:60ch;font-size:13px;line-height:1.65;color:var(--faint);margin:18px 0 0}
.f-fine a{color:var(--capital)}
.f-sec{padding-top:clamp(48px,6vw,86px);margin-top:clamp(48px,6vw,86px);
  border-top:1px solid var(--line)}

/* ------------------------------------------------------------------ hero */
.f-hero{padding:clamp(26px,4vw,54px) 0 0}
.f-eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--opp);font-weight:500;margin:0 0 20px}
.founders h1{font-size:clamp(36px,6.2vw,74px);line-height:1.03;letter-spacing:-.038em;
  margin:0 0 26px;max-width:15ch;font-weight:600}
.f-lede{max-width:52ch;font-size:clamp(17px,1.7vw,21px);line-height:1.5;color:var(--text);
  margin:0 0 12px;letter-spacing:-.012em}
.f-lede-2{color:var(--muted);font-size:clamp(15.5px,1.35vw,18px);margin-bottom:30px}
/* the scarcity, and it is the only sentence on the page treated this way */
.f-line{max-width:46ch;margin:0 0 32px;padding-left:18px;
  border-left:2px solid var(--capital);font-size:clamp(16px,1.4vw,19px);line-height:1.5;
  font-weight:560;color:var(--text);letter-spacing:-.014em}
.f-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.f-cta .btn-ghost{border-color:var(--line-2)}

.f-scale{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:clamp(38px,5vw,62px) 0 0;
  border-top:1px solid var(--line)}
.f-scale>div{padding:18px 18px 0 0;border-right:1px solid var(--line)}
.f-scale>div:last-child{border-right:0}
.f-scale dt{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
  margin:0 0 6px}
.f-scale dd{margin:0;font-size:clamp(20px,2.4vw,30px);font-weight:500;color:var(--text);
  letter-spacing:-.02em}
.f-scale-note{max-width:60ch;font-size:13px;line-height:1.6;color:var(--faint);margin:16px 0 0}

/* --------------------------------------------------------------- why join */
.f-after{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.f-after li{font-size:14px;color:var(--text);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:7px 15px}

/* ------------------------------------------------------------- the grid */
/* TWO COLUMNS, FIXED, NOT auto-fit. The hairlines are the 1px gap showing the
   grid's own background through, which means an unfilled cell is a tinted
   rectangle rather than nothing. auto-fit gave three columns at 1440 and eight
   cards left exactly one of those holes on the finished page. Two columns
   divide eight evenly, and give each benefit a readable measure. */
.f-grid{display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;margin-top:34px}
@media (max-width:720px){.f-grid{grid-template-columns:1fr}}
.f-card{background:var(--surface);padding:clamp(20px,2.4vw,30px);position:relative}
.f-card .f-n{position:absolute;top:clamp(20px,2.4vw,30px);right:clamp(20px,2.4vw,30px);
  font-size:11.5px;color:var(--line-3);letter-spacing:.06em}
.f-card h3{font-size:17px;letter-spacing:-.018em;margin:0 0 10px;padding-right:34px;
  color:var(--text);font-weight:600}
.f-card p{margin:12px 0 0;font-size:14px;line-height:1.62;color:var(--muted)}
/* WHAT A BENEFIT IS WORTH TODAY. Four honest states, four colours already in
   the system: nothing here invents a hue, and nothing claims to be live that
   is not. */
.f-state{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-pill);padding:4px 10px}
.f-state::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.s-live{color:var(--verified);background:var(--verified-dim)}
.s-ver{color:var(--capital);background:var(--capital-dim)}
.s-coh{color:var(--signal);background:var(--signal-dim)}
.s-bld{color:var(--insight);background:var(--insight-dim)}

/* ----------------------------------------------------------- the needs */
.f-needgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:10px;margin-top:32px}
.f-need{display:block;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-card);padding:16px 18px}
.f-need b{display:block;font-size:15px;font-weight:560;color:var(--text);
  letter-spacing:-.012em}
.f-need i{display:block;font-style:normal;font-size:12.5px;line-height:1.5;
  color:var(--faint);margin-top:4px}
.f-needs .f-cta{margin-top:28px}

/* ------------------------------------------------------------- the room */
.f-paper{background:var(--paper);color:var(--ink);border-radius:var(--r-card);
  padding:clamp(28px,4.4vw,64px)}
.f-paper h2{color:var(--ink);max-width:16ch}
.f-k-ink{color:var(--ink-3)}
.f-p-ink{color:var(--ink-2);max-width:58ch}
.f-p-last{margin-bottom:0;margin-top:26px;color:var(--ink)}
.f-p-last b{color:var(--ink);font-weight:600}
.f-room-list{list-style:none;margin:28px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
  background:var(--paper-line);border:1px solid var(--paper-line);
  border-radius:var(--r-data);overflow:hidden}
.f-room-list li{background:var(--paper);padding:15px 18px;font-size:14px;line-height:1.5;
  color:var(--ink-2)}

/* ---------------------------------------------- not another community */
.f-nots{list-style:none;margin:26px 0 30px;padding:0;display:grid;gap:0;max-width:34ch}
.f-nots li{font-size:clamp(19px,2.2vw,26px);line-height:1.35;letter-spacing:-.024em;
  color:var(--muted);padding:11px 0;border-bottom:1px solid var(--line)}
.f-big{font-size:clamp(22px,2.8vw,32px);line-height:1.25;letter-spacing:-.028em;
  color:var(--text);font-weight:600;margin:0 0 18px;max-width:22ch}

/* --------------------------------------------------------- the standing */
.f-badgerow{margin-top:28px}
.f-badge{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;
  border:1px solid var(--verified);border-radius:var(--r-pill);color:var(--verified);
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:600}

/* ------------------------------------------------------------ who joins */
.f-checks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;max-width:62ch}
.f-checks li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.62;
  color:var(--muted)}
.f-checks li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;
  border-radius:50%;border:1.5px solid var(--line-3)}
.f-checks b{color:var(--text);font-weight:560}

/* -------------------------------------------------------------- the end */
.f-end h2{max-width:24ch;font-size:clamp(28px,3.8vw,46px)}
.f-end .f-cta{margin-top:28px}

@media (max-width:820px){
  .f-scale{grid-template-columns:1fr 1fr}
  .f-scale>div:nth-child(2n){border-right:0}
  .f-scale>div:nth-child(n+3){border-top:1px solid var(--line);padding-top:18px}
}
@media (max-width:560px){
  .founders h1{max-width:none}
  .f-cta{flex-direction:column;align-items:stretch}
  .f-cta .btn{width:100%;justify-content:center;text-align:center}
  .f-scale dd{font-size:22px}
}

.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)}

.foot{border-top:1px solid var(--line);margin-top:70px;padding:34px var(--gut) 46px}
.foot-in{max-width:1240px;margin:0 auto;display:grid;
  grid-template-columns:minmax(200px,1fr) repeat(3,minmax(0,auto));gap:30px 46px}
.foot h4{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  font-weight:600;margin-bottom:12px}
.foot li{margin-bottom:9px}
.foot a{font-size:13.5px;color:var(--muted);transition:color var(--t-micro) var(--ease)}
.foot a:hover{color:var(--text)}
.foot .blurb{font-size:13px;color:var(--faint);line-height:1.65;margin-top:14px;max-width:38ch}
.foot .base{max-width:1240px;margin:30px auto 0;padding-top:20px;border-top:1px solid var(--line);
  font-size:12px;color:var(--faint);line-height:1.7}
.foot .base a{font-size:12px;color:var(--muted)}
@media (max-width:760px){.foot-in{grid-template-columns:1fr 1fr}}
/* WCAG 2.2 target size on a phone: these links were 19 to 22 pixels tall.
   Padding, not a bigger font: the ergonomics change, the design does not. */
@media (max-width:640px){
  .crumb a,.note.trust a{display:inline-flex;align-items:center;min-height:26px}
  .foot li{margin-bottom:2px}
  .foot a{display:inline-flex;align-items:center;min-height:26px;padding:2px 0}
  .foot .base a{min-height:26px}
  .logo{display:inline-flex;align-items:center;min-height:26px}
}

/* V1: marketplace controls hidden until FEATURE_MARKETPLACE. */
[data-follow],[data-save],[data-help],.room-acts .btn-help,.obj-foot .btn-help{display:none!important}
