/* SCAIL v5 — the shared layer every page wears (2026-11-05).
─────────────────────────────────────────────────────────────────────────────
Sean, after the v5 homepage went live: "Apply this same web design to ALL of our pages on the
website. Every page needs to be exactly like our home page."
One file, three jobs:
1. The v5 chrome: header, phone menu, footer and the Ask SCAIL button. Markup comes from
public/site/v5/chrome.partial.html (copied into every page by scripts/v4-chrome.mjs).
2. The repaint: each older page family keeps its own layout CSS (app/atelier.css for the legal and
React pages, lib/site-shell.html for /funding /halo /website, /site/v4/pages.css for the static
funnel pages), but its tokens, type and surfaces are mapped onto the homepage's: #F5F5F7 ground,
Lufga 200 headings, Urbanist 300 body, white cards, pill buttons, no mesh, orbs or glass.
3. Resting states for /site/v5/site.js motion (headings rise word by word, blocks wipe in).
Brand rules (HANDOFF-site-motion-system.md §2): weights never above 500, wins pink, never green. */
/* v7 (2026-11-09): the faces are declared here instead of @import-ed, so no stylesheet waits on a
second stylesheet. Same files, same rules as /brand/lufga.css and /brand/urbanist.css. */
@font-face{font-family:'Lufga';font-style:normal;font-weight:200;font-display:swap;src:url('/brand/fonts/lufga-200.woff2') format('woff2')}
@font-face{font-family:'Lufga';font-style:normal;font-weight:300;font-display:swap;src:url('/brand/fonts/lufga-300.woff2') format('woff2')}
@font-face{font-family:'Lufga';font-style:italic;font-weight:300;font-display:swap;src:url('/brand/fonts/lufga-300-italic.woff2') format('woff2')}
@font-face{font-family:'Lufga';font-style:normal;font-weight:400;font-display:swap;src:url('/brand/fonts/lufga-400.woff2') format('woff2')}
@font-face{font-family:'Lufga';font-style:normal;font-weight:600;font-display:swap;src:url('/brand/fonts/lufga-600.woff2') format('woff2')}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:100 900;font-display:swap;src:url('/brand/fonts/urbanist-variable.woff2') format('woff2')}
:root{
--v5-bg:#F5F5F7; --v5-bg2:#ECECF0; --v5-ink:#16161A; --v5-ink0:#0E0E10; --v5-ink2:#55555E;
--v5-pink:#D6006E; --v5-pink-soft:#FBE3EF; --v5-hair:rgba(14,14,16,.09);
--v5-d:'Lufga','Urbanist','Helvetica Neue',sans-serif; --v5-t:'Urbanist','Helvetica Neue',sans-serif;
--v5-m:clamp(20px,3.2vw,48px);
}
/* ══════════ 1 · chrome ══════════ */
.v5c-top{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px var(--v5-m);font-family:var(--v5-t)}
.v5c-mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--v5-ink0);font:400 15px/1 var(--v5-t);letter-spacing:.24em}
.v5c-mark img{width:28px;height:28px}
.v5c-nav{display:flex;align-items:center;gap:24px}
.v5c-link{font:300 15px/1 var(--v5-t);color:var(--v5-ink);text-decoration:none}
.v5c-link:hover{text-decoration:underline;text-underline-offset:4px}
.v5c-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;background:var(--v5-ink0);color:#fff!important;font:400 15px/1 var(--v5-t);text-decoration:none!important;white-space:nowrap;border:0}
.v5c-btn.ghost{background:var(--v5-bg2);color:var(--v5-ink0)!important}
.v5c-btn:hover{filter:brightness(1.15)}
.v5c-burger{display:none;width:44px;height:44px;border-radius:999px;background:var(--v5-bg2);position:relative;border:0;cursor:pointer}
.v5c-burger i{position:absolute;left:14px;right:14px;height:1.5px;background:var(--v5-ink0);display:block}
.v5c-burger i:first-child{top:18px}.v5c-burger i:last-child{top:25px}
.v5c-drawer{position:fixed;inset:0;z-index:60;background:var(--v5-bg);padding:96px 20px 32px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.v5c-drawer[hidden]{display:none}
.v5c-drawer nav{display:flex;flex-direction:column;margin-bottom:20px}
.v5c-drawer nav a{font:200 30px/1.5 var(--v5-d);letter-spacing:-.02em;color:var(--v5-ink0);text-decoration:none}
body.v5c-menu .v5c-top{position:fixed;left:0;right:0;top:0;z-index:61}
body.v5c-menu .v5c-burger i:first-child{top:21px;transform:rotate(45deg)}
body.v5c-menu .v5c-burger i:last-child{top:21px;transform:rotate(-45deg)}
.v5c-foot{margin-top:clamp(110px,14vw,200px);padding:0 var(--v5-m) 40px;font:300 15px/1.6 var(--v5-t);color:var(--v5-ink2)}
.v5c-fgrid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:28px}
.v5c-fgrid h4{font:500 13px var(--v5-t);color:var(--v5-ink0);margin:0 0 10px;letter-spacing:0;text-transform:none}
.v5c-fgrid nav,.v5c-fgrid>div{display:flex;flex-direction:column;gap:6px}
.v5c-fgrid a{color:var(--v5-ink);text-decoration:none}
.v5c-fgrid a:hover{text-decoration:underline}
.v5c-fbrand p{max-width:34ch;color:var(--v5-ink)}
.v5c-fcta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.v5c-soc{display:flex;gap:10px;margin-top:8px}
.v5c-soc a{width:34px;height:34px;border-radius:50%;background:var(--v5-bg2);display:grid;place-items:center}
.v5c-soc svg{width:15px;height:15px;fill:var(--v5-ink0)}
.v5c-word{margin:clamp(40px,6vw,80px) 0 18px;font:200 clamp(88px,22vw,340px)/.8 var(--v5-d);letter-spacing:-.06em;color:var(--v5-ink0)}
.v5c-legal{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px}
.v5c-legal a{color:var(--v5-ink2);text-decoration:none}
.v5c-legal a:hover{color:var(--v5-ink0);text-decoration:underline}
.v5c-base{margin-top:14px;font-size:13.5px;max-width:110ch}
.v5c-base a{color:inherit}
.v5c-ask{position:fixed;right:18px;bottom:18px;z-index:31;display:flex;align-items:center;gap:8px;height:48px;padding:0 18px 0 12px;border-radius:999px;background:var(--v5-ink0);color:#fff;font:400 15px var(--v5-t);border:0;cursor:pointer}
.v5c-askp{position:fixed;right:18px;bottom:76px;z-index:62;width:min(380px,calc(100vw - 24px));max-height:min(560px,calc(100svh - 120px));display:flex;flex-direction:column;background:#fff;border-radius:22px;box-shadow:0 30px 70px -20px rgba(14,14,16,.4);overflow:hidden;font:300 15px/1.5 var(--v5-t);color:var(--v5-ink)}
.v5c-askp[hidden]{display:none}
.v5c-askp header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--v5-bg)}
.v5c-askp header b{font-weight:500}
.v5c-askp header button{font:300 14px var(--v5-t);color:var(--v5-ink2);background:none;border:0;cursor:pointer}
.v5c-askb{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.v5c-askb .a{background:var(--v5-bg);border-radius:14px;padding:10px 12px}
.v5c-askb .q{background:var(--v5-ink0);color:#fff;border-radius:14px;padding:10px 12px;align-self:flex-end}
.v5c-askb a{color:inherit}
.v5c-askc{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.v5c-askc button{font:300 13.5px var(--v5-t);padding:7px 12px;border-radius:999px;background:var(--v5-bg2);border:0;cursor:pointer}
.v5c-askf{display:flex;gap:8px;padding:10px 12px 14px}
.v5c-askf input{flex:1;min-width:0;height:44px;border-radius:999px;border:1px solid rgba(14,14,16,.18);padding:0 16px;font:300 16px var(--v5-t)}
@media (max-width:860px){
.v5c-top{padding:14px 16px}
.v5c-nav{gap:8px}
.v5c-link{display:none}
.v5c-burger{display:block}
.v5c-fgrid{grid-template-columns:1fr 1fr}
.v5c-fbrand{grid-column:1/3}
.v5c-ask{right:12px;bottom:12px;height:46px;padding:0 14px 0 10px;font-size:14px}
.v5c-askp{right:12px;bottom:66px}
.v5c-foot{padding-bottom:96px}
}
/* On the homepage the header floats over the split hero, as it did before. */
body[data-v5-home] .v5c-top{position:absolute;left:0;right:0;top:0}
/* ══════════ 2 · the repaint ══════════ */
html{background:var(--v5-bg)!important}
/* v6 (2026-11-06): the ground stays on ; is see-through so the Halo field (site.js §4)
can sit between the ground and the page, exactly as it does behind the homepage hero. */
body{background:transparent!important}
.v6-field{position:absolute;left:0;top:0;width:100%;height:min(118svh,1180px);z-index:-1;pointer-events:none;display:block;
-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
body{font-family:var(--v5-t);font-weight:300;color:var(--v5-ink);-webkit-font-smoothing:antialiased}
::selection{background:var(--v5-pink);color:#fff}
:focus-visible{outline:2px solid var(--v5-pink);outline-offset:3px}
/* Decoration the older pages painted behind everything: the mesh, the orbs, the glass bubbles,
the grain and the scroll bar. The homepage has none of it. */
.lg-bg,body>.bg[aria-hidden],body>.prog,.prog[aria-hidden],#bg,.orbs,.orb-field{display:none!important}
/* The v4 chrome, wherever an older template still prints it, and the site-shell pages' own header
and menu (/funding /halo /website): they now wear the shared v5 header injected by lib/site-shell.ts. */
body #hd,body #mmenu,body .mmenu{display:none!important}
.v4c-nav,.v4c-bar,.v4c-menu,.v4c-sticky,.v4c-foot,.fx-sticky{display:none!important}
/* Headings: Lufga 200, tight, ink. */
body h1,body h2{font-family:var(--v5-d)!important;font-weight:200!important;letter-spacing:-.035em;color:var(--v5-ink0)}
body h3{font-family:var(--v5-d)!important;font-weight:300!important;letter-spacing:-.02em;color:var(--v5-ink0)}
body h1{line-height:.98}
body h2{line-height:1.04}
b,strong{font-weight:500}
/* Eyebrows stay (they carry real information on some pages) but lose the shouty tracked caps. */
.si-eyebrow,.eyebrow,.kick,.kicker,.lg-kick,.sec-kick{text-transform:none!important;letter-spacing:0!important;font:300 15px/1.4 var(--v5-t)!important;color:var(--v5-ink2)!important}
/* Atelier pages (legal, /download, /reviews, /vs, /signup). Every colour there is a token. */
html .atl,html .atl[data-skin],html .atl[class]{
--field:#F5F5F7!important;--field-img:none!important;--paper:#FFFFFF!important;--paper-bg:#FFFFFF!important;
--tile:#F5F5F7!important;--tile-hi:#ECECF0!important;
--ink:#0E0E10!important;--ink-2:#55555E!important;--ink-3:#686872!important;
--accent:#D6006E!important;--accent-lo:#F2A3C8!important;--accent-wash:#FBE3EF!important;
--loud:#0E0E10!important;--on-loud:#FFFFFF!important;
--font-display:'Lufga','Urbanist','Helvetica Neue',sans-serif!important;--font-ui:'Urbanist','Helvetica Neue',sans-serif!important;
background:var(--v5-bg)!important;
}
/* Legal and plain pages: left-aligned like the homepage, one white sheet, no glass. */
.atl.lg .lg-head{text-align:left!important;margin-left:0!important;max-width:880px}
.atl.lg .lg-head h1{font-size:clamp(44px,6vw,92px)!important}
.atl.lg .lg-lede{font-size:clamp(18px,1.35vw,21px)!important;color:var(--v5-ink)!important;margin-left:0!important}
.atl .lg-tabs,.atl .lg-doctabs{justify-content:flex-start!important}
.atl .lg-main>section,.atl .lg-doc,.atl .lg-card,.atl .lg-sheet{background:#fff!important;border-radius:24px!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important}
.atl a{color:var(--v5-ink0)}
.atl .lg-main a{text-decoration-color:rgba(214,0,110,.45);text-underline-offset:3px}
/* Site-shell pages (/funding, /halo, /website, /resources): their surfaces go flat white. */
:root{--ground:#F5F5F7;--sf-card:#FFFFFF;--sf-pane:#FFFFFF;--sf-tile:#FFFFFF}
body:not([data-v7]) :is(.card,.pane,.glass,.lg-glass,[class*="glass"]:not(.v5c-ask)){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* Static funnel pages (/diy, /founders, /training, /free-training). */
.v4p,.gtm{background:var(--v5-bg)!important}
/* Buttons that were dark pills already stay; any gradient-filled ones go flat ink. */
.btn.pri,.btn-pri,.cta-pri{background:var(--v5-ink0)!important;background-image:none!important;color:#fff!important;border-radius:999px!important;box-shadow:none!important}
/* ══════════ 3 · motion resting states (site.js) ══════════ */
.v5w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.2em;margin-bottom:-.2em} /* room for Lufga descenders (the g of writing) */
.v5w>i{display:inline-block;font-style:normal}
@media (prefers-reduced-motion:reduce){.v5w>i{transform:none!important}}
/* ══════════ 4 · left-aligned heads, like the homepage ══════════
The older templates centred their heroes and section heads. The homepage never centres a title,
so every head that holds an h1 or h2 sets left, with its paragraph and button row following. */
body:not([data-v5-home]) :is(.shead,.fx-reelhead,.hero,.final,.head,.lg-head,div:has(> h1),div:has(> h2)):not(.v5c-foot *):not([data-ui] *){text-align:left!important;align-items:flex-start!important}
body:not([data-v5-home]) :is(.shead,.fx-reelhead,.hero,.final,.head,.lg-head,div:has(> h1),div:has(> h2)) > :is(h1,h2,p,.lede,.sub,ul){margin-left:0!important;margin-right:auto!important}
body:not([data-v5-home]) :is(.shead,.fx-reelhead,.hero,.final,.head,div:has(> h1)) :is(.ctas,.btns,.actions,.cta,.cta-row,.row,.stats,.hero-stats,[class*="cta"]):not(a):not(button){justify-content:flex-start!important;margin-left:0!important}
/* ══════════ 5 · the sign-in door and the welcome screen (/enter, /welcome) ══════════
Same ground and card as every page: no mesh, no glass, the shared header carries the logo, and
the chat-style cues (numbered arrows, "press Enter", the up/down keys) are gone. */
.enter{background:var(--v5-bg)!important;min-height:auto!important;padding:clamp(24px,5vw,72px) var(--v5-m) 0!important;display:flex!important;justify-content:center!important}
.enter::before,.enter::after{display:none!important}
.enter .card{background:#fff!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:24px!important;max-width:520px!important;width:100%!important;padding:clamp(24px,4vw,40px)!important}
.enter .lock,.enter .su-orb,.enter .su-qn,.enter .su-enter,.enter .su-arrows{display:none!important}
.enter .su-voice{padding-left:0!important}
.enter h1,.enter .su-qh{font-size:clamp(32px,4vw,48px)!important;margin-top:8px!important}
.enter .su-big{font:300 20px var(--v5-t)!important;height:52px;border:1px solid rgba(14,14,16,.18)!important;border-radius:12px!important;padding:0 16px!important;background:#fff!important}
.enter .su-big:focus{border-color:var(--v5-ink0)!important;outline:2px solid var(--v5-pink);outline-offset:1px}
.enter .su-ok,.enter button[type=submit]{height:52px!important;border-radius:999px!important;background:var(--v5-ink0)!important;color:#fff!important;padding:0 28px!important;font:400 16px var(--v5-t)!important}
.wg .wg-bar i::after{background:var(--v5-pink)!important}
/* ══════════ 4 · v7 chrome (2026-11-09, cinematic revamp) ══════════
The header stays with you: clear at the top of a page, frosted glass once the page moves (site.js
adds .ds-scrolled; nothing changes size, so nothing below it shifts). Hear Halo and Ask SCAIL share
one docked pill that slides away while you read downward and returns when you scroll up; site.js
moves the controls into .ds-dock and springs it. Brand: no glow, no gradient on chrome. */
.v5c-top{position:sticky;top:0;z-index:40;padding:14px var(--v5-m);padding-top:calc(14px + env(safe-area-inset-top,0px))}
.v5c-top.ds-scrolled{background:rgba(245,245,247,.8);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);box-shadow:0 1px 0 var(--v5-hair)}
body[data-v7] .v5c-top{position:fixed;left:0;right:0;top:0}
.v5c-btn{transform-origin:50% 50%}
.ds-dock{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:max(14px,env(safe-area-inset-bottom,0px));z-index:31;display:flex;align-items:center;gap:6px;padding:5px;border-radius:999px;
background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.3) blur(16px);backdrop-filter:saturate(1.3) blur(16px);box-shadow:0 18px 44px -20px rgba(14,14,16,.38),0 0 0 1px var(--v5-hair);will-change:transform;max-width:calc(100vw - 28px)}
.ds-dock .v5c-ask{position:static;height:44px;padding:0 16px 0 10px;font-size:14.5px}
.ds-dock .v5c-ask img{width:22px;height:22px}
@media (max-width:860px){.v5c-top{padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px))}.ds-dock{right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){.ds-dock{will-change:auto}}
/* §5 (cross-document page transitions) is retired, 2026-11-09: React pages load this sheet at the end of
, after the browser has taken its snapshot, so the opt-in threw "Transition was aborted because of
invalid state" on navigation. */
/* ══════════ 6 · chapters (v7) ══════════ /halo and /funding wear the homepage's light, from the design
system's WebGL point engine (/site/v7/chapters.js). With no WebGL, reduced motion or Save-Data the page
keeps its own still art (.ds-nogl, or before the script runs). */
.ds-cell{position:relative;display:block;width:200px;height:184px}
.ds-cell .hl-sphere{width:100%!important;height:100%!important}
.ds-cell .ds-field{position:absolute;inset:0;width:100%;height:100%;display:block}
.ds-cell.ds-gl .hl-sphere{visibility:hidden}
.ds-cell-cta{width:100%;height:100%}
@media (max-width:700px){.ds-cell:not(.ds-cell-cta){width:132px;height:132px}}
.ds-lenders{position:relative;width:min(540px,86vw);aspect-ratio:1;margin:clamp(18px,3.4vw,44px) auto 0}
.ds-lenders canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ds-lenders-n{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none;margin:0}
.ds-lenders-n b{display:block;font:200 clamp(64px,9vw,120px)/1 'Lufga','Urbanist',sans-serif;letter-spacing:-.04em;color:#0E0E10}
.ds-lenders-n span{display:block;font:300 14px/1.4 'Urbanist',sans-serif;color:#55555E;margin-top:8px}
.ds-lenders.ds-nogl{aspect-ratio:auto}
.ds-lenders.ds-nogl .ds-lenders-n{position:static;padding:12px 0 0}
/* the smallest phones (≤ 380 px): the header's mark, trial button and menu button all fit on one line */
@media (max-width:380px){.v5c-top{padding-left:12px;padding-right:12px}.v5c-mark{gap:8px;letter-spacing:.16em}.v5c-top .v5c-btn{height:40px;padding:0 14px;font-size:14px}.v5c-burger{width:40px;height:40px}.v5c-burger i{left:12px;right:12px}.v5c-burger i:first-child{top:16px}.v5c-burger i:last-child{top:23px}}
/* ══════════ 7 · footer (v7, 2026-11-09) ══════════ One calm band: the line about SCAIL and the two
actions, four tidy link columns, then the wordmark beside the legal links and the disclaimer under a
hairline. The wordmark is smaller than v5's so the footer carries no empty band. Same markup and links
(public/site/v5/chrome.partial.html). */
.v5c-foot{margin-top:clamp(56px,5.5vw,88px);padding:clamp(36px,4.5vw,56px) var(--v5-m,clamp(20px,3.2vw,48px)) 28px;padding-left:max(var(--v5-m,clamp(20px,3.2vw,48px)),env(safe-area-inset-left,0px));padding-right:max(var(--v5-m,clamp(20px,3.2vw,48px)),env(safe-area-inset-right,0px));padding-bottom:max(28px,env(safe-area-inset-bottom,0px));border-top:1px solid var(--v5-hair);font:300 14.5px/1.6 var(--v5-t)}
.v5c-fgrid{grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:24px 32px;align-items:start}
.v5c-fgrid h4{font:500 12.5px/1.2 var(--v5-t)!important;letter-spacing:.02em!important;color:var(--v5-ink2)!important;margin:0 0 12px}
.v5c-fgrid nav,.v5c-fgrid>div{gap:7px}
.v5c-fgrid a{color:var(--v5-ink0)}
.v5c-fgrid span{color:var(--v5-ink2)}
.v5c-fbrand p{font:300 clamp(18px,1.45vw,21px)/1.4 var(--v5-d);letter-spacing:-.01em;color:var(--v5-ink0);max-width:26ch}
.v5c-fcta{margin-top:18px}
.v5c-word{margin:clamp(32px,4vw,52px) 0 0;font:200 clamp(56px,8.5vw,128px)/.8 var(--v5-d);letter-spacing:-.055em;color:var(--v5-ink0)}
.v5c-legal{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;margin-top:18px}
.v5c-base{font-size:12.5px;line-height:1.6;max-width:132ch;color:var(--v5-ink2);margin-top:14px;padding-top:14px;border-top:1px solid var(--v5-hair)}
@media (min-width:861px){
.v5c-foot{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"g g" "w l" "b b";column-gap:48px}
.v5c-fgrid{grid-area:g}.v5c-word{grid-area:w}.v5c-legal{grid-area:l;align-self:end;justify-content:flex-end;margin:0 0 8px}.v5c-base{grid-area:b;margin-top:22px}
}
@media (max-width:860px){.v5c-foot{padding-top:40px}.v5c-fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}.v5c-fbrand{grid-column:1/-1}.v5c-fbrand p{font-size:19px;max-width:none}.v5c-fcta{display:flex;flex-wrap:wrap;gap:8px}.v5c-fgrid h4{margin-bottom:8px}.v5c-fgrid nav,.v5c-fgrid>div{gap:6px;font-size:15px}.v5c-word{font-size:clamp(48px,15vw,72px);margin-top:36px}.v5c-legal{gap:6px 16px;font-size:13px;margin-top:16px}.v5c-base{font-size:12.5px}}
/* ══════════ 8 · one design on every page (v7, 2026-11-09) ══════════
Sean: "Make sure this framework is applied to all of our webpages and backlinks. I want cohesiveness on
every page." The homepage's ground, surfaces and buttons, applied through the one shared layer:
- the ground: plain #F5F5F7 everywhere, with no prism wash or soft pink (Sean, 2026-11-09);
- surfaces: long-form sheets (legal, /reviews, /vs, /download, /status) take the homepage card: radius 30,
a hairline and the long soft shadow;
- buttons: one primary (ink pill) and one secondary (frosted white with a hairline), everywhere;
- headings: Lufga 200 page titles on one scale, the accent word in the prism. */
.v6-field{display:none!important}
.atl .lg-main>section,.atl .lg-doc,.atl .lg-card,.atl .lg-sheet{border-radius:30px!important;border:1px solid rgba(14,14,16,.09)!important;box-shadow:0 40px 90px -50px rgba(14,14,16,.32)!important}
.v5c-foot .v5c-btn,.v5c-drawer .v5c-btn{height:48px;padding:0 22px}
.v5c-btn.ghost,.btn.pale,.btn-ghost,.btn.ghost{background:rgba(255,255,255,.72)!important;color:var(--v5-ink0)!important;box-shadow:inset 0 0 0 1px rgba(14,14,16,.16)!important;border:0!important}
body:not([data-v7]) main h1{letter-spacing:-.035em;line-height:.98}
.gr-text,.grad-text,.acc{background:linear-gradient(100deg,#D6006E 0%,#C8102E 25%,#B04C00 50%,#0C7D6C 75%,#1A6FB5 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone}
/* fallbacks, so the chrome keeps its colours even where the :root tokens are missing */
.v5c-btn{background:var(--v5-ink0,#0E0E10);color:#fff}
.v5c-btn.ghost{background:rgba(255,255,255,.72);color:#0E0E10}
.v5c-ask{background:var(--v5-ink0,#0E0E10);color:#fff}
/* the corner controls: no container pill, each control floats on its own (Sean, 2026-11-09:
"the buttons on the bottom right are stacked on top of one another") */
.ds-dock{background:none!important;box-shadow:none!important;padding:0!important;gap:8px!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.ds-dock .v5c-ask{height:46px;padding:0 18px 0 12px;box-shadow:0 16px 36px -14px rgba(14,14,16,.55)}
/* ══════════ §9 · page families, v7 (2026-11-09) ══════════
Sean, approving the homepage: "Home page is perfect. Please complete all pages on the website and go
live." Earlier: "Everything should match the homepage, so get rid of the soft pink" and "I want
cohesiveness on every page."
Every page family keeps its own markup and layout CSS; this block maps each family's classes onto the
homepage (public/home.html, /site/v7/home.css): the plain #F5F5F7 ground, Lufga 200 headings on the
homepage scale, Urbanist 300 body at 17/1.55, white cards with a hairline and one long soft shadow
(radius 22 for cards, 30 for panels), the ink pill and the frosted secondary button, quiet ink-2
labels instead of the pink-dot kicks, links in ink, hairline tables with Lufga headers, and one
section gap. Pink stays only where it means a win. Presentation only: no copy, order, link or
behaviour changes, no new transitions or keyframes.
9.0 shared · 9.1 site-shell (/halo /funding /website, and /resources on the same shell)
9.2 atelier (legal, /download /reviews /vs /vs/[slug] /status) · 9.3 /signup
9.4 static funnel pages (/diy /diy-terms /founders /training /free-training) · 9.5 /enter /welcome
Every rule is scoped to its family (main#top, .atl, body > .wrap, .enter), so the homepage, which
also loads this file, is untouched. Specificity does the work; !important appears only where the
family's own sheet, or an earlier block of this file, already uses it on the same property. */
:root{
--v9-ink0:#0E0E10;--v9-ink:#16161A;--v9-ink2:#55555E;--v9-ink3:#686872;--v9-line:rgba(14,14,16,.09);--v9-line2:rgba(14,14,16,.16);
--v9-d:'Lufga','Urbanist','Helvetica Neue',sans-serif;--v9-t:'Urbanist','Helvetica Neue',sans-serif;
--v9-gut:clamp(16px,3.2vw,48px);--v9-sec:var(--ds-section,clamp(64px,6.4vw,104px));
--v9-h1:clamp(48px,6.8vw,118px);--v9-h2:clamp(36px,4.6vw,72px);--v9-h3:clamp(22px,1.9vw,28px);--v9-lede:clamp(18px,1.4vw,22px);
--v9-sh:0 40px 90px -50px rgba(14,14,16,.45);--v9-lift:0 22px 44px -28px rgba(14,14,16,.45);
--v9-ul:rgba(14,14,16,.32)
}
/* ── 9.0 · shared ── */
/* the header sticks on every page. On the site-shell pages it arrives inside a wrapper only as tall as
itself (lib/site-shell.ts), so the wrapper steps out of layout and the page becomes the header’s
containing block; its two svgs are absolutely placed, so nothing else moves. The old shell also gave
the header transition:all .3s, which animated the open menu’s z-index under the drawer. */
body div:has(> header.v5c-top){display:contents}
body:not([data-v5-home]) :is(.v5c-top,.v5c-top *){transition:none!important}
/* the eyebrow labels stay, as quiet ink-2 text: no pink dot, no tracked caps */
body:not([data-v5-home]) .kick::before{content:none;display:none}
body:not([data-v5-home]) :is(.kick,.eyebrow,.si-eyebrow){display:inline-flex;align-items:center;gap:8px;margin-bottom:18px}
body:not([data-v5-home]) .eyebrow>i:empty{display:none}
body:not([data-v5-home]) :is(h1,h2,h3){text-wrap:balance}
/* ── 9.1 · site-shell (main#top: /halo /funding /website /resources /resources/[slug] /rd/[id]) ── */
main#top{color:var(--v9-ink)}
/* one gap between sections, as on the homepage (the shell gave each section its gap twice) */
main#top>section{padding-top:var(--v9-sec);padding-bottom:0}
main#top>section:first-child{padding-top:clamp(28px,3.6vw,56px)}
main#top .wrap{max-width:1320px;padding-left:max(var(--v9-gut),env(safe-area-inset-left,0px));padding-right:max(var(--v9-gut),env(safe-area-inset-right,0px))}
/* type */
main#top :is(h1,h2,h3){font-family:var(--v9-d);color:var(--v9-ink0)}
main#top h1{font-weight:200;letter-spacing:-.035em;line-height:.96}
main#top h1.h1big,main#top .rs-hero h1{font-size:var(--v9-h1)}
main#top :is(.hx-hero,.fx-hero,.wb-hero) h1.h1big{font-size:clamp(44px,5vw + 20px,96px)}
main#top .wb-hero h1.h1big{font-size:clamp(44px,4.2vw + 18px,80px)}
main#top .h1big .h1sub{font-size:clamp(22px,2.6vw,36px);letter-spacing:-.025em}
main#top :is(.shead,.fx-reelhead) h2,main#top .fx-split h2{font-size:var(--v9-h2);font-weight:200;letter-spacing:-.035em;line-height:1.02}
main#top .shead,main#top .fx-reelhead{max-width:900px;margin:0 0 clamp(28px,3.6vw,52px)}
main#top :is(.lede,.lede-lg){font-size:var(--v9-lede);line-height:1.5;color:var(--v9-ink);max-width:50ch}
main#top .shead p:not(.lede){max-width:62ch}
main#top :is(b,strong){font-weight:500}
main#top :is(.wb-mock .t,.wb-step .t,.wb-pill,.plan .tag,.applogo b,.pbrand b,.atk-n,.desk-n,.desk-p,.wtname){font-weight:500}
/* links in running text are ink */
main#top :is(p,li) a:not(.btn){color:var(--v9-ink0);text-decoration:underline;text-decoration-color:var(--v9-ul);text-underline-offset:3px;text-decoration-thickness:1px}
/* buttons: the ink pill and the frosted secondary, homepage sizes, no lift or glow */
main#top .btn{min-height:52px;padding:0 26px;gap:10px;font-family:var(--v9-t);font-size:16px;font-weight:400;line-height:1;transition:none}
main#top .btn.sm{min-height:44px;padding:0 18px;font-size:15px}
main#top .btn.dark,main#top .btn.dark:hover{background:var(--v9-ink0);color:#fff;border-color:transparent;box-shadow:none;transform:none}
main#top .btn.pale:hover{transform:none;background:#fff!important}
main#top .btn .arw,main#top .btn:hover .arw{transition:none;transform:none}
/* surfaces: white cards, a hairline, one long soft shadow; no glow, no tilt, no hover lift */
main#top .card{background:#fff;border:1px solid var(--v9-line);border-radius:22px;box-shadow:var(--v9-sh);-webkit-backdrop-filter:none;backdrop-filter:none;transition:none}
main#top .card:hover{transform:none}
main#top .card::before,main#top .card .rim{display:none}
main#top :is(.appwin,.hl-stage,.hl-week,.hl-gate,.hl-rec,.hl-ctacard,.hl-dial,.hx-out,.hx-led,.wb-glass,.plantable,.fx-vs,.rs-sec,.rs-tool,.rs-box,.rs-kwbox,.rs-band .box,.card.fx-calc,.card.plan){border-radius:30px}
main#top :is(.hl-stage,.hl-week,.hl-gate,.hl-rec,.hl-ctacard,.hl-dial,.hl-job,.hx-rung,.hx-out,.hx-led,.hl-ctrls>div,.hl-proof li,.wb-glass,.wb-step,.fx-vs,.plantable,.wk-step,.rs-card,.rs-sec,.rs-tool,.rs-box,.rs-kwbox){background:#fff;border:1px solid var(--v9-line);box-shadow:var(--v9-sh)}
main#top :is(.hl-job,.hx-rung,.hl-ctrls>div,.wb-step,.wk-step,.rs-card){border-radius:22px}
main#top .hl-proof li{border-radius:18px;box-shadow:none}
main#top .wk-step.on{border-color:var(--v9-ink0)}
/* the product windows: no prism mesh behind the screens, the app's own plain ground */
main#top :is(.reelstage,.appbody,.demobody){background:#F5F5F7}
main#top :is(.reelstage,.appbody)::before{content:none;display:none}
main#top .cta::after{content:none;display:none}
/* controls in the calculators: ink, like every control on the homepage */
main#top input[type=range]{accent-color:var(--v9-ink0)}
main#top .fx-calc input[type=number],main#top .tl-grid :is(input,select),main#top .rs-form input[type=email],main#top .rs-search{background:#fff;border:1px solid var(--v9-line2);border-radius:16px;min-height:52px;font:300 17px var(--v9-t);color:var(--v9-ink0)}
main#top .rs-search{border-radius:999px}
/* plan ticks and the "us" column: ink, not pink (pink is for wins) */
main#top .fx-price .plan ul li::before{color:var(--v9-ink0);font-weight:400}
main#top .plan li .k{color:var(--v9-ink0)}
main#top .fx-list li::before{background:var(--v9-ink0);width:6px;height:6px;margin-top:10px}
main#top .fx-vs .us,main#top .fx-vs .hd .us{background:rgba(14,14,16,.03)}
main#top .fx-vs .hd>*{font:300 17px/1.2 var(--v9-d);letter-spacing:-.01em;text-transform:none;color:var(--v9-ink0);background:none;border-bottom-color:var(--v9-line2)}
main#top .fx-vs .r .us::before{color:var(--v9-ink0)}
main#top .winbar .live{color:var(--v9-ink2)}
main#top .winbar .live i{background:var(--v9-ink2)}
/* tables: hairline rows, Lufga headers, tabular figures */
main#top :is(.plantable,.fx-mx) thead th,main#top .fx-mx th{font:300 16px/1.2 var(--v9-d);letter-spacing:-.005em;text-transform:none;color:var(--v9-ink0)}
main#top :is(.plantable,.fx-mx,.rs-tbl) td{font-variant-numeric:tabular-nums}
main#top .rs-tbl{border:0;border-radius:0}
main#top .rs-tbl th{font:300 15px/1.25 var(--v9-d);color:var(--v9-ink0);background:none;border-bottom:1px solid var(--v9-line2)}
/* the FAQ: the homepage's hairline list, a chevron instead of a plus */
main#top .faq{gap:0;max-width:880px;margin:0;border-top:1px solid var(--v9-line)}
main#top .faq details,main#top .faq details[open]{border:0;border-bottom:1px solid var(--v9-line);border-radius:0;background:none;padding:0;transition:none;box-shadow:none}
main#top .faq summary,main#top .wb-qa summary,main#top .rs-faq summary{position:relative;display:block;padding:20px 34px 20px 0;font:300 clamp(19px,1.6vw,24px)/1.25 var(--v9-d);letter-spacing:-.01em;color:var(--v9-ink0);list-style:none;min-height:0}
main#top :is(.faq,.wb-qa,.rs-faq) summary::-webkit-details-marker{display:none}
main#top :is(.faq,.wb-qa,.rs-faq) summary::after{content:"";position:absolute;right:4px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:1.5px solid var(--v9-ink0);border-bottom:1.5px solid var(--v9-ink0);transform:rotate(45deg);transition:none;font-size:0}
main#top :is(.faq,.wb-qa,.rs-faq) details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
main#top :is(.faq,.wb-qa,.rs-faq) details p{padding:0 0 22px;margin:0;color:var(--v9-ink2);font-size:16.5px;line-height:1.6;max-width:62ch}
main#top .wb-qa{gap:0;max-width:880px;border-top:1px solid var(--v9-line)}
main#top .wb-qa details{border:0;border-bottom:1px solid var(--v9-line);border-radius:0;background:none;padding:0}
main#top .rs-faq details{border-top:0;border-bottom:1px solid var(--v9-line);padding:0}
/* small labels in tracked caps become quiet labels */
main#top :is(.rs-cat,.fx-steps .n,.fx-cat .i,.fx-ph .t,.wk-step .k,.hx-rung .h,.fx-mtile .l,.hx-cell .l,.tl-stat .k,.plan .nm){letter-spacing:.01em;text-transform:none;font-size:13px;color:var(--v9-ink2)}
main#top .hx-rung .h i{background:var(--v9-ink0)}
/* /halo: chips that are not wins go quiet */
main#top .hl-new{color:var(--v9-ink2);background:#F5F5F7}
main#top .hl .hx-rung li::before,main#top .hx-rung li::before{background:var(--v9-ink0)}
main#top .hl-does li .ck{color:var(--v9-ink0)}
/* the limits track, the active hour and the dial marker are not wins: ink */
main#top :is(.p-ceil,.p-tok,.dl-mk.on){background:var(--v9-ink0);fill:var(--v9-ink0)}
main#top .p-ceil span,main#top .p-wait,main#top .hl-day li.on .hr{color:var(--v9-ink0)}
main#top .dl-trail{stroke:var(--v9-ink0)}
/* /website: the steps and the closing band */
main#top .wb-step b.n{font:300 15px/1 var(--v9-d);color:var(--v9-ink0);background:#F5F5F7;border-color:var(--v9-line)}
main#top .wb-end{margin:0;text-align:left}
main#top .wb-end h2{font-size:var(--v9-h2);font-weight:200;letter-spacing:-.035em;line-height:1.02}
main#top .wb-end p{margin-left:0}
main#top .wb-end .wb-cta,main#top .fx-final .fx-cta{justify-content:flex-start}
main#top .fx-final{text-align:left;padding-left:0;padding-right:0}
main#top .fx-final .lede,main#top .fx-final .fine{margin-left:0;text-align:left}
main#top .fx-final h2{font-size:var(--v9-h2)}
/* /resources: left-aligned like every homepage head */
main#top .rs-hero{text-align:left}
main#top .rs-hero .lede{margin-left:0}
main#top :is(.rs-cta,.rs-tools,.rs-chips){justify-content:flex-start;margin-left:0}
main#top .rs-count,main#top .rs-empty{text-align:left}
main#top .rs-band .box{text-align:left;max-width:none;padding:clamp(24px,3.4vw,44px)}
main#top .rs-kwbox{text-align:left}
main#top .rs-card{transition:none}
main#top .rs-card:hover{transform:none;border-color:var(--v9-line2)}
main#top .rs-badge{border-radius:999px}
main#top :is(.rs-search,.rs-card,.rs-copy,.rs-chip,.rs-tbl):focus-visible{outline-color:#D6006E}
main#top .rs-page h1{font-size:clamp(34px,3.6vw + 22px,76px);line-height:1;max-width:18ch}
main#top :is(.rs-sec,.rs-box,.rs-tool) h2{font:300 var(--v9-h3)/1.15 var(--v9-d);letter-spacing:-.02em}
main#top :is(.rs-sec,.rs-box) :is(p,li){color:var(--v9-ink2);font-size:16.5px}
main#top .rs-call{background:#F5F5F7;border:0;border-radius:16px}
main#top .tl-bar.warm i{background:var(--v9-ink0)}
main#top .tl-stat{background:#F5F5F7;border:0}
main#top .tl-stat .v{font:200 32px/1.05 var(--v9-d);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
/* ── 9.2 · atelier (legal, /download /reviews /vs /vs/[slug] /status) ── */
/* these React pages kept the browser’s 8px body margin, which inset the header and footer and left a strip
above the header; the page meets the edges as the homepage does */
body:has(> div.atl){margin:0}
.atl.lg{color:var(--v9-ink);padding-top:clamp(28px,3.6vw,56px);padding-left:0;padding-right:0}
/* the homepage grid: content starts where the homepage's content starts */
.atl.lg .lg-wrap,.atl.lg .lg-wrap.sp-wide{width:100%;max-width:1320px;margin:0 auto;padding-left:max(var(--v9-gut),env(safe-area-inset-left,0px));padding-right:max(var(--v9-gut),env(safe-area-inset-right,0px));box-sizing:border-box}
.atl.lg .lg-head{max-width:none;margin:0 0 clamp(32px,4vw,56px)}
.atl.lg .lg-head h1{font:200 clamp(40px,6vw + 16px,104px)/.96 var(--v9-d)!important;letter-spacing:-.035em;max-width:16ch;margin:0;color:var(--v9-ink0)}
.atl.lg .lg-lede{font-size:var(--v9-lede)!important;line-height:1.5;max-width:46ch;margin:22px 0 0}
.atl.lg .lg-eff{font:300 14px/1.5 var(--v9-t);letter-spacing:0;text-transform:none;color:var(--v9-ink2);margin:16px 0 0}
.atl.lg .lg-eff+.lg-eff{margin-top:4px}
/* the document tabs: a quiet list beside the document on wide screens, wrapping pills on phones */
.atl.lg .lg-tabs{gap:6px;margin:0 0 clamp(24px,3vw,40px)}
.atl.lg .lg-tab{font:400 14px/1 var(--v9-t);min-height:40px;display:inline-flex;align-items:center;padding:0 15px;border-radius:999px;border:0;box-shadow:inset 0 0 0 1px var(--v9-line2);background:rgba(255,255,255,.7);color:var(--v9-ink0);transition:none;text-decoration:none}
.atl.lg .lg-tab:hover{background:#fff}
.atl.lg .lg-tab.on{background:var(--v9-ink0);color:#fff;box-shadow:none}
@media (min-width:1000px){
.atl.lg .lg-wrap:has(> .lg-tabs){display:grid;grid-template-columns:minmax(180px,.45fr) minmax(0,1.55fr);column-gap:clamp(40px,5vw,80px);align-items:start}
.atl.lg .lg-wrap:has(> .lg-tabs)>.lg-head{grid-column:1/-1}
.atl.lg .lg-wrap:has(> .lg-tabs)>.lg-tabs{grid-column:1;grid-row:2;position:sticky;top:96px;flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:2px;margin:0}
.atl.lg .lg-wrap:has(> .lg-tabs)>.lg-tabs .lg-tab{background:none;box-shadow:none;padding:0 14px;margin-left:-14px;color:var(--v9-ink2)}
.atl.lg .lg-wrap:has(> .lg-tabs)>.lg-tabs .lg-tab:hover{color:var(--v9-ink0)}
.atl.lg .lg-wrap:has(> .lg-tabs)>.lg-tabs .lg-tab.on{background:var(--v9-ink0);color:#fff}
.atl.lg .lg-wrap:has(> .lg-tabs)>:is(.lg-main,.lg-foot){grid-column:2;min-width:0}
}
/* the document: one white panel, homepage body type */
.atl.lg :is(.lg-doc,.lg-main>section,.lg-card,.lg-sheet){background:#fff!important;border:1px solid var(--v9-line)!important;border-radius:30px!important;box-shadow:var(--v9-sh)!important;padding:clamp(22px,3.4vw,48px)}
.atl.lg .lg-doc.ap-doc{max-width:880px}
.atl.lg .lg-s{padding-top:clamp(28px,3vw,40px)}
.atl.lg .lg-s:first-child{padding-top:0}
.atl.lg .lg-s h2{font:300 var(--v9-h3)/1.15 var(--v9-d)!important;letter-spacing:-.02em;color:var(--v9-ink0);margin:0 0 14px}
.atl.lg .lg-s h2 a{gap:14px}
.atl.lg .lg-n{font:300 .8em/1 var(--v9-d);color:var(--v9-ink3);min-width:1.4em;letter-spacing:0}
.atl.lg .lg-s h2>.lg-n{display:inline-block;margin-right:.45em}
.atl.lg :is(.lg-doc,.lg-main) :is(p,li){font-size:16.5px;line-height:1.6;color:var(--v9-ink2)}
.atl.lg .lg-doc p{max-width:68ch}
.atl.lg .lg-doc ul{gap:10px;max-width:68ch}
.atl.lg :is(b,strong){font-weight:500;color:var(--v9-ink0)}
.atl.lg :is(.lg-main,.lg-foot) :is(p,li,td,label,figcaption) a:not([class]){color:var(--v9-ink0);text-decoration:underline;text-decoration-color:var(--v9-ul);text-underline-offset:3px;text-decoration-thickness:1px}
.atl.lg .lg-caps{font-size:13.5px!important;line-height:1.6!important;letter-spacing:0;color:var(--v9-ink2)!important;background:#F5F5F7;border-radius:16px;padding:16px 18px}
/* tables: hairline rows, Lufga headers, tabular figures (the homepage's comparison table) */
.atl.lg .lg-tablewrap{border:0;border-radius:0;margin:4px 0 18px}
.atl.lg .lg-table th,.atl.lg .lg-table td{font-size:14.5px;line-height:1.5;padding:13px 12px;border-bottom:1px solid var(--v9-line);font-variant-numeric:tabular-nums}
.atl.lg .lg-table thead th{font:300 17px/1.2 var(--v9-d);letter-spacing:-.005em;text-transform:none;color:var(--v9-ink0);background:none;border-bottom:1px solid var(--v9-line2);vertical-align:bottom}
.atl.lg .lg-table tbody th{font-weight:400;color:var(--v9-ink0);background:none}
.atl.lg .lg-table td:first-child{color:var(--v9-ink)}
.atl.lg .lg-table code{overflow-wrap:anywhere;font-size:13px}
.atl.lg .vs-grp th{padding-top:30px;font:300 20px/1.2 var(--v9-d);letter-spacing:-.01em;text-transform:none;color:var(--v9-ink0);background:none;border-bottom:1px solid var(--v9-line2)}
.atl.lg .vs-ours{color:var(--v9-ink0);font-weight:400;background:rgba(14,14,16,.025)}
.atl.lg .vs-only{display:inline-block;margin-left:6px;font:400 10.5px/1 var(--v9-t);letter-spacing:.06em;text-transform:uppercase;color:#D6006E;vertical-align:1px}
/* a table that scrolls keeps the homepage focus ring; on phones the legal tables scroll at a readable width
and the comparison table fits the screen in three columns */
.atl.lg .lg-tablewrap:focus-visible{outline:2px solid #D6006E;outline-offset:3px}
@media (max-width:640px){.atl.lg .lg-table:not(.vs-table):not(.lg-stack){min-width:680px}.atl.lg .lg-table code{overflow-wrap:normal}.atl.lg .lg-table.vs-table{min-width:0;table-layout:auto}.atl.lg .vs-table :is(th,td){padding:11px 6px;font-size:13.5px}.atl.lg .vs-table thead th{font-size:14.5px}.atl.lg .vs-table td:first-child{width:46%}.atl.lg .vs-grp th{font-size:18px;padding-top:24px}}
/* the page footer under the document: left, quiet, ink links */
.atl.lg .lg-foot{text-align:left;margin-top:clamp(28px,3vw,40px)}
.atl.lg .lg-foot p{font:300 14px/1.6 var(--v9-t);color:var(--v9-ink2);margin:0 0 6px}
/* /reviews, /download, /status */
.atl.lg .tw-empty{background:#fff;border:1px solid var(--v9-line);border-radius:30px;box-shadow:var(--v9-sh);text-align:left;padding:clamp(24px,3.4vw,44px)}
.atl.lg .tw-empty p{font-size:17px;color:var(--v9-ink)}
.atl.lg .tw-card{border-radius:22px;border:1px solid var(--v9-line);box-shadow:var(--v9-sh)}
.atl.lg .lg-main>.tw-empty+section,.atl.lg .lg-main>section+section{margin-top:18px}
.atl.lg .an-l{font:300 13.5px/1.4 var(--v9-t);letter-spacing:0;text-transform:none;color:var(--v9-ink2)}
.atl.lg .an-in{min-height:52px;border-radius:16px;border:1px solid var(--v9-line2);font:300 17px var(--v9-t);color:var(--v9-ink0);background:#fff}
.atl.lg .an-in:focus{outline:2px solid #D6006E;outline-offset:1px;border-color:var(--v9-line2)}
.atl.lg .an-btn{min-height:52px;padding:0 26px;font:400 16px/1 var(--v9-t);background:var(--v9-ink0);color:#fff;box-shadow:none}
.atl.lg .an-opt{min-height:44px;font:400 14px var(--v9-t);border:0;box-shadow:inset 0 0 0 1px var(--v9-line2);background:rgba(255,255,255,.7);color:var(--v9-ink0)}
.atl.lg .an-opt.on{background:var(--v9-ink0);color:#fff;box-shadow:none}
.atl.lg .ap-qr-code{border-radius:22px;border-color:var(--v9-line)}
.atl.lg .ap-qr-empty{background:#F5F5F7;color:var(--v9-ink2)}
.atl.lg .an-msg.err{color:var(--v9-ink0)!important;font-weight:500}
/* ── 9.3 · /signup (atelier + app/signup/signup-v5.css) ── */
.atl.su .su-trial{border:1px solid var(--v9-line2);box-shadow:none;background:rgba(255,255,255,.86);color:var(--v9-ink2);font-size:13.5px}
.atl.su .su-trial b{font-weight:500}
.atl.su .su-trial-dot{background:var(--v9-ink0)}
.atl.su .sf-rail{border:1px solid var(--v9-line);box-shadow:var(--v9-lift)}
.atl.su .sf-card{border:1px solid var(--v9-line);border-radius:30px;box-shadow:var(--v9-sh)}
.atl.su .sf-n{font:300 14px/1 var(--v9-d);letter-spacing:0;color:var(--v9-ink3)}
.atl.su .sf-t{font-size:clamp(28px,3.2vw,40px);line-height:1.08}
.atl.su .sf-s{font-size:16.5px;color:var(--v9-ink2)}
.atl.su .sf-in{min-height:52px;border-radius:16px;background:#fff;border-color:var(--v9-line2);font-size:17px}
/* focus: the homepage field focus (a 2px pink ring), without the soft pink halo */
.atl.su .sf-in:focus{border-color:var(--v9-line2);box-shadow:none;outline:2px solid #D6006E;outline-offset:1px}
.atl.su .sf-tld{border-color:var(--v9-line2);background:#F5F5F7}
.atl.su .sf-slug .sf-in{border-radius:16px 0 0 16px}
.atl.su .sf-tld{border-radius:0 16px 16px 0}
/* a picked option is ink, like the homepage's segmented control; pink stays for wins */
.atl.su .sf-opt{border-radius:16px;border-color:var(--v9-line2);transition:none}
.atl.su .sf-opt.on{border-color:var(--v9-ink0);background:#fff;box-shadow:0 0 0 1px var(--v9-ink0) inset}
.atl.su .sf-opt.on .sf-dotr{border-color:var(--v9-ink0)}
.atl.su .sf-opt.on .sf-boxr{border-color:var(--v9-ink0);background:var(--v9-ink0)}
.atl.su .sf-opt:focus-visible{box-shadow:0 0 0 2px #D6006E}
.atl.su .sf-tick{color:var(--v9-ink0)}
/* errors read in ink at weight 500, beside their words; pink is kept for wins */
.atl.su :is(.sf-err,.sf-hint.bad){color:var(--v9-ink0);font-weight:500}
.atl.su .sf-in.bad{border-color:var(--v9-ink0);box-shadow:0 0 0 1px var(--v9-ink0) inset}
.atl.su .sf-op{font-weight:300}
.atl.su .sf-tag{border-color:var(--v9-line2)}
.atl.su .sf-nav .si-go,.atl.su .si-go{height:auto;min-height:52px;font:400 16px/1 var(--v9-t);box-shadow:none;transition:none}
.atl.su .sf-nav .si-go:hover{transform:none}
.atl.su .sf-bar{border-top-color:var(--v9-line)}
.atl.su .sf-bar-l{letter-spacing:0;text-transform:none;font-size:13.5px}
.atl.su .su-pack-x{background:#fff;border-color:var(--v9-line);border-radius:16px}
.atl.su .su-pack-x li::before{color:var(--v9-ink0);font-weight:400}
.atl.atl.atl :is(b,strong){font-weight:500}
.atl.atl.atl :is(.su-addon-box,.su-addon-nm,.su-addon-pr,.su-ladder-p,.su-voice,.su-bundle-tag,.su-bundle-cta,.su-key,.su-ch-tag,.su-ch-p,.su-pack-x summary,.su-addon-sub label){font-weight:500}
/* ── 9.4 · static funnel pages (body > .wrap: /diy /diy-terms /founders /training /free-training) ── */
body:has(> .wrap){padding-inline:0}
body>.wrap{max-width:1320px;margin:0 auto;padding-top:clamp(28px,3.6vw,56px);padding-left:max(var(--v9-gut),env(safe-area-inset-left,0px));padding-right:max(var(--v9-gut),env(safe-area-inset-right,0px));color:var(--v9-ink)}
/* heads set left, like every head on the homepage */
body>.wrap :is(.hero,.head,.cta,.final,.proof h3,.count,.lede,.sub,h2){text-align:left}
body>.wrap :is(h1,h2,.lede,.sub,.head p){margin-left:0;margin-right:0}
body>.wrap :is(.ctas,.btnrow,.cta .btnrow,.final .ctas){justify-content:flex-start}
body>.wrap h1{font-size:clamp(40px,4.2vw + 16px,80px);line-height:.98;letter-spacing:-.035em;max-width:20ch}
body>.wrap h2{letter-spacing:-.035em}
body>.wrap main>h2,body>.wrap .final h2{font-size:var(--v9-h2);line-height:1.02;max-width:18ch}
body>.wrap main>h2{margin-top:var(--v9-sec);margin-bottom:clamp(22px,2.6vw,34px)}
body>.wrap :is(.cta,.final,.card,.map) h2{margin-top:0}
body>.wrap .cta h2{font-size:clamp(28px,3.2vw,44px);line-height:1.08}
body>.wrap .card h2{font-size:clamp(24px,2.4vw,32px);line-height:1.1}
/* /diy-terms reads as a document: section heads at the homepage h3 size, a reading measure */
body>.wrap:has(.toc) main>h2{font:300 var(--v9-h3)/1.15 var(--v9-d)!important;letter-spacing:-.02em;margin:clamp(36px,4vw,52px) 0 12px;max-width:none}
body>.wrap:has(.toc) main>:is(p,ol,ul,.box,.toc){max-width:760px}
body>.wrap .toc a{color:var(--v9-ink0);text-decoration:underline;text-decoration-color:var(--v9-ul);text-underline-offset:3px}
body>.wrap :is(.toc,.box){background:#fff;border:1px solid var(--v9-line);border-radius:22px;box-shadow:var(--v9-sh)}
body>.wrap :is(.sub,.lede){font-size:var(--v9-lede);line-height:1.5;color:var(--v9-ink);max-width:50ch}
body>.wrap .lede{margin-top:0}
body>.wrap :is(b,strong,summary,.gets .k,.strip .m b,td b,.tile b,.tile .v b,td .pick,ol.steps li b){font-weight:500}
body>.wrap :is(.card,.cta) h2{font-weight:300!important}
body>.wrap .map h4{font:300 clamp(22px,1.9vw,28px)/1.15 var(--v9-d);letter-spacing:-.02em}
/* the eyebrows: no pill, no dot */
body>.wrap .eyebrow{background:none;border:0;padding:0}
/* buttons: no prism dot, homepage sizes, no lift */
body>.wrap .btn{min-height:52px;padding:0 26px;font:400 16px/1 var(--v9-t)!important;letter-spacing:0;box-shadow:none;transition:none;gap:10px}
body>.wrap .btn:hover{transform:none;box-shadow:none}
body>.wrap .btn::before{content:none;display:none}
body>.wrap :is(.btn.pri,.btn.dark,.btn:not(.sec):not(.ghost):not(.pale)){background:var(--v9-ink0);color:#fff;border:0}
body>.wrap :is(.btn.sec,.btn.ghost,.btn.pale){background:rgba(255,255,255,.7)!important;color:var(--v9-ink0)!important;border:0!important;box-shadow:inset 0 0 0 1px var(--v9-line2)!important}
/* surfaces */
body>.wrap :is(.card,.tile,.plain,.strip,.cta){background:#fff;border:1px solid var(--v9-line);border-radius:22px;box-shadow:var(--v9-sh);-webkit-backdrop-filter:none;backdrop-filter:none}
body>.wrap :is(.cta,.split .card,.plain){border-radius:30px}
/* the dark closing panels become the homepage's white panel */
body>.wrap :is(.final,.map){background:#fff;color:var(--v9-ink);border:1px solid var(--v9-line);border-radius:30px;box-shadow:var(--v9-sh)}
body>.wrap :is(.final,.map) :is(h2,h4){color:var(--v9-ink0)}
body>.wrap :is(.final,.map) p{color:var(--v9-ink2)}
body>.wrap :is(.final,.map) .btn.pri,body>.wrap .map .btn{background:var(--v9-ink0);color:#fff}
body>.wrap .final .btn.sec{background:rgba(255,255,255,.7)!important;color:var(--v9-ink0)!important;box-shadow:inset 0 0 0 1px var(--v9-line2)!important}
/* tables: hairline rows, Lufga headers */
body>.wrap th{font:300 16px/1.2 var(--v9-d);letter-spacing:-.005em;text-transform:none;color:var(--v9-ink0)}
body>.wrap td{font-variant-numeric:tabular-nums}
body>.wrap :is(th,td){border-bottom-color:var(--v9-line)}
body>.wrap td b{font-family:var(--v9-d)}
/* the FAQ: the homepage's hairline list */
body>.wrap details{background:none;border:0;border-bottom:1px solid var(--v9-line);border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;margin:0}
body>.wrap h2+details{border-top:1px solid var(--v9-line)}
body>.wrap details summary{position:relative;list-style:none;padding:20px 34px 20px 0;font:300 clamp(19px,1.6vw,24px)/1.25 var(--v9-d);letter-spacing:-.01em;color:var(--v9-ink0)}
body>.wrap details summary::-webkit-details-marker{display:none}
body>.wrap details summary::after{content:"";position:absolute;right:4px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:1.5px solid var(--v9-ink0);border-bottom:1.5px solid var(--v9-ink0);transform:rotate(45deg)}
body>.wrap details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
body>.wrap details p{padding:0 0 22px;margin:0;color:var(--v9-ink2);font-size:16.5px;max-width:62ch}
/* /training: the player keeps a cinema width; the proof heads read as heads, their labels quietly */
body>.wrap .player{max-width:1080px}
body>.wrap .proof h3{font:300 var(--v9-h3)/1.15 var(--v9-d);letter-spacing:-.02em;text-transform:none;color:var(--v9-ink0);margin:0 0 18px}
body>.wrap .tile .t{font:300 13.5px/1.4 var(--v9-t);letter-spacing:0;text-transform:none;color:var(--v9-ink2)}
/* /diy-terms on wide screens: the contents beside the document, as on the legal pages */
@media (min-width:1000px){
body>.wrap:has(.toc) main{display:grid;grid-template-columns:minmax(220px,.62fr) minmax(0,1.38fr);column-gap:clamp(40px,5vw,80px);align-items:start}
body>.wrap:has(.toc) main>*{grid-column:2;min-width:0}
body>.wrap:has(.toc) main>.hero{grid-column:1/-1}
body>.wrap:has(.toc) main>.toc{grid-column:1;grid-row:2/span 400;position:sticky;top:96px;margin-top:0}
}
/* numbered steps */
body>.wrap ol.steps li::before,body>.wrap .gets .k{font-family:var(--v9-d);font-weight:300;background:var(--v9-ink0)}
/* forms (/free-training) */
body>.wrap label:not(.consent-box):not(.bands label){font:300 13.5px/1.4 var(--v9-t);letter-spacing:0;text-transform:none;color:var(--v9-ink2)}
body>.wrap :is(input[type=email],input[type=text]){background:#fff;border:1px solid var(--v9-line2);border-radius:16px;min-height:52px;font:300 17px var(--v9-t)}
body>.wrap .bands label{background:#fff;border-color:var(--v9-line2);border-radius:999px;font:400 15px var(--v9-t);transition:none}
body>.wrap .err{color:var(--v9-ink0);font-weight:500}
body>.wrap .bands label:has(input:checked){background:var(--v9-ink0);color:#fff;border-color:var(--v9-ink0)}
/* links in running text are ink */
body>.wrap :is(p,li,td,.note,figcaption) a:not(.btn),body>.wrap td .pick{color:var(--v9-ink0);text-decoration:underline;text-decoration-color:var(--v9-ul);text-underline-offset:3px}
body>.wrap .strip .m b{font:200 clamp(30px,3vw,40px)/1 var(--v9-d);letter-spacing:-.03em}
body>.wrap .count b{font-family:var(--v9-d)}
body>.wrap>footer{color:var(--v9-ink2)}
/* ── 9.5 · /enter and /welcome (SiteChrome + app/enter/enter.css) ── */
.enter .card{border:1px solid var(--v9-line)!important;border-radius:30px!important;box-shadow:var(--v9-sh)!important}
.enter .su-voice{font:300 16px/1.55 var(--v9-t);color:var(--v9-ink2)}
.enter .su-voice b{font-weight:500}
.enter .su-big{border:1px solid var(--v9-line2)!important;border-radius:16px!important;min-height:52px;height:52px}
.enter .su-big:focus{border-color:var(--v9-line2)!important}
.enter .su-ok{box-shadow:none;transition:none}
.enter .su-ok:hover:not(:disabled){transform:none}
.enter .err{background:#F5F5F7;border:1px solid var(--v9-line2);color:var(--v9-ink0);font-weight:400}
.enter .foot,.enter .su-alt{font-size:14px;color:var(--v9-ink2)}
.enter .foot a,.enter .su-link{color:var(--v9-ink0)}
.wg .wg-host{font-weight:500}
.wg .wg-bar i{background:#ECECF0}
.wg .wg-bar i::after{background:var(--v9-ink0)!important}
.wg .wg-alt a{color:var(--v9-ink0);border-bottom-color:var(--v9-ul)}
.wg .wg-step{font-size:15px}
.enter .sub{font-size:16px;line-height:1.55;color:var(--v9-ink2)}
.enter .sub b{font-weight:500;color:var(--v9-ink0)}
/* ── LEGAL TABLES ON PHONES (2026-11-09) ─────────────────────────────────────
A legal table was 560px at the least, so a phone scrolled it sideways inside its box.
Under 640px each row of a stacked table (components/LegalTable.tsx) reads as one entry:
its first cell is the entry's name, every other value sits under its column's name. The
header row stays in the markup for screen readers; the roles on the table keep it a table.
(The 680px floor in the phone rules above now skips stacked tables.) */
@media (max-width:640px){
.atl .lg-table.lg-stack{min-width:0}
.atl .lg-table.lg-stack thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.atl .lg-table.lg-stack,.atl .lg-table.lg-stack tbody,.atl .lg-table.lg-stack tr,.atl .lg-table.lg-stack td{display:block;width:auto}
.atl .lg-table.lg-stack tr{padding:14px 0 12px;border-bottom:1px solid var(--v9-line,rgba(14,14,16,.1))}
.atl .lg-table.lg-stack tbody tr:first-child{padding-top:2px}
.atl .lg-table.lg-stack tr:last-child{border-bottom:0}
.atl.lg .lg-table.lg-stack td{border:0;padding:3px 0}
.atl.lg .lg-table.lg-stack td:first-child{color:var(--v9-ink0,inherit);font-weight:500;padding-bottom:6px}
.atl .lg-table.lg-stack td:not(:first-child)::before{content:attr(data-label);display:block;font-size:11px;line-height:1.5;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--v9-ink2,#55555E)}
}
/* ══════════ PAGE KIT (2026-11-10): the new homepage's shared pieces, for every other page ══════════
Sean: "the rest of our pages need to be cohesive" with the homepage. Three rules came out of the homepage rebuild and
these classes carry them everywhere:
1. Say less. One headline, one supporting line (.k-line); everything else that states a fact folds into one closed
Details
…