/* ════════════════════════════════════════════════════════════════════
linq · PUBLIC MARKETING SITE KIT — interior hero, mid-page blocks,
furniture, nav chrome and footer. Serves linqsystem.com only.
Provenance: verbatim from the Linq_2_11 design handoff
(WEBSITE/_kit/linq-kit.css), with WEBSITE/_kit/site-chrome.css folded
in at the foot and the missing nav-dropdown / mobile-drawer rules
reconstructed (see the NAV CHROME section).
NOT to be confused with static/css/linq-kit.css — that is the in-app
CRM brand kit (.lq-*, .sidebar, .kanban). The two share a lineage in
name only: zero common selectors, and nine --custom-properties that
collide with DIFFERENT values (--bg, --card, --page, --line, --line-d,
--muted, --faint, --mono, --r-lg). Never load both on one page.
════════════════════════════════════════════════════════════════════ */
:root{--bone:#FBFBFC;--page:#EEEEF0;--card:#FBFBFC;--line:rgba(24,24,27,.10);--line-d:rgba(24,24,27,.18);--signal:#2E4BE0;--green-lt:#5FD39B;--porcelain:#FBFBFC;--card-2:#F4F4F6;--hover:#F0F0F3;--hover-2:#E4E4E8;--mock-bg:#EEEEF0;--white:#fff;--night:#232838;--panel-night:#14161F;--phone:#101322;--paper-dk:#0F1118;--board:#181B27;--ink:#18181B;--ink-2:#232838;--muted:#52525B;--ink-3:#3F3F46;--ink-4:#71717A;--faint:#A1A1AA;--micro:#8A8A93;--ocean:#2E4BE0;--ocean-dk:#2137B0;--ocean-lt:#6D82F0;--ocean-050:#E0E6FC;--ocean-200:#C7D2FF;--ocean-mono:#C9D4F6;--blob-deep:#101E6E;--blob-light:#7B96FF;--blob-mauve:#9468A0;--blob-steel:#68889F;--rail-accent:#9FB0E8;--foot-link:#8FA1F5;--foot-link-h:#B9C2E8;--demo-blue:#3D7BFF;--violet:#8B5CF6;--violet-2:#6D51D6;--violet-lt:#C4B5FD;--violet-step:#D8CCFF;--violet-dim:#B9A8D6;--green:#1F8A50;--green-deep:#166339;--green-alt:#197141;--green-demo:#1F6B4A;--green-dot:#7FD6A8;--green-tint:#DAEEE3;--green-text:#BDEBD1;--red:#C4433F;--red-mono:#B4402E;--amber:#A17A12;--star:#F5B942;--star-cream:#C98F2B;--cr-paper:#FAF7F2;--cr-chrome:#F1EBE1;--cr-ink:#2B2620;--cr-muted:#8A8071;--cr-avatar:#D8CBB2;--w90:rgba(255,255,255,.9);--w86:rgba(255,255,255,.86);--w80:rgba(255,255,255,.8);--w76:rgba(255,255,255,.76);--w70:rgba(255,255,255,.7);--w65:rgba(255,255,255,.65);--w60:rgba(255,255,255,.6);--w56:rgba(255,255,255,.56);--w45:rgba(255,255,255,.45);--w40:rgba(255,255,255,.4);--wf05:rgba(255,255,255,.05);--wf10:rgba(255,255,255,.1);--wf12:rgba(255,255,255,.12);--wf14:rgba(255,255,255,.14);--wf16:rgba(255,255,255,.16);--wf22:rgba(255,255,255,.22);--wf28:rgba(255,255,255,.28);--wf36:rgba(255,255,255,.36);--line-07:rgba(24,24,27,.07);--line-08:rgba(24,24,27,.08);--line-09:rgba(24,24,27,.09);--line-10:rgba(24,24,27,.1);--line-14:rgba(24,24,27,.14);--line-16:rgba(24,24,27,.16);--line-18:rgba(24,24,27,.18);--dsp:'Archivo',system-ui,sans-serif;--body:'Public Sans',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;--dsp-price:clamp(2.6rem,5.3vw,4.75rem);--dsp-home:clamp(2.4rem,4.4vw,4rem);--dsp-page:clamp(2.1rem,3.5vw,3.125rem);--dsp-cta:clamp(2.3rem,4.2vw,3.75rem);--dsp-hub:clamp(2rem,3.2vw,2.875rem);--dsp-sect:clamp(1.75rem,2.6vw,2.375rem);--eb-h1:14px;--eb-h2:13px;--eb-track:.14em;--gut:24px;--gap:26px;--panel-pad:74px 60px;--panel-pad-int:78px 72px 74px;--panel-pad-home:86px 72px;--panel-pad-faq:86px 72px 78px;--nav-h:64px;--nav-spacer:calc(var(--nav-h) + 14px);--r-panel:30px;--r-story:26px;--r-mock:20px;--r-lg:18px;--r-md:16px;--r-sm:14px;--r-btn:11px;--r-in:10px;--r-chip:9px;--r-pill:999px;--e-panel:0 40px 90px -50px rgba(12,15,28,.6);--e-night:0 40px 90px -50px rgba(12,15,28,.75);--e-cobalt:0 40px 90px -50px rgba(18,32,110,.85);--e-mock:0 30px 70px -30px rgba(12,15,28,.5);--e-photo:0 30px 60px -18px rgba(8,10,22,.85);--e-price:0 30px 60px -35px rgba(12,15,28,.35);--e-nav:0 18px 40px -28px rgba(12,15,28,.7);--e-drop:0 50px 100px -40px rgba(12,15,28,.55);--e-violet:0 24px 48px -30px rgba(139,92,246,.55);--e-phone:0 24px 50px -18px rgba(8,12,50,.65);--aurora-base:#67769A;--aurora-a:rgba(124,100,136,.52);--aurora-b:rgba(72,98,127,.58);--aurora-c:rgba(148,104,127,.42);--aurora-d:rgba(104,136,159,.52);--aurora-g1:#6D7CA0;--aurora-g2:#67769A;--aurora-g3:#5C6E92}
/* aurora kit (2026-08-23): --signal/--ocean both point at cobalt (one accent,
no orange); --bone converges with --card at porcelain; --night is now the
aurora slate, not near-black. Names kept so the 200+ existing var() call
sites below need no rename — only this line changed.
Typography (2026-08-26), matched to the aurora design canvas:
--dsp Archivo display lines (.dsp). Previously unset, so every
display line inherited body Public Sans.
--mono IBM Plex Mono eyebrows/tags/prices. Was JetBrains Mono.
Note h1/h2 on this site carry .eb (eyebrow) and are therefore MONO, not
display — do not blanket-apply --dsp to headings or every eyebrow breaks.
IBM Plex Mono stops at 700; the single font:800 mono call site rounds down. */
*{box-sizing:border-box;margin:0;padding:0}
/* The UA `[hidden]{display:none}` is the weakest rule there is, so ANY author
`display` beats it and `el.hidden = true` silently does nothing. That is why
the calculator's email gate stayed on screen after unlocking and its share
button painted while still locked. One line, sitewide, so `hidden` means
hidden — the pricing tabs below rely on it too. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth}
body{font-family:var(--body);background:var(--page);color:var(--ink);-webkit-font-smoothing:antialiased}
/* The aurora sits on the BODY, not a wrapper: the 24px gutters between panels,
the 26px inter-panel gaps and the bare closing CTA all read straight through
to it, exactly as the design canvas does it. Six layers, grain blended over
four radial glows on a vertical slate ramp. */
body.linq-site{
background-color:var(--aurora-base);
background-image:
url('/static/img/grain-96.png'),
radial-gradient(1200px 900px at 85% 8%,var(--aurora-a),rgba(124,100,136,0) 70%),
radial-gradient(1100px 900px at 10% 26%,var(--aurora-b),rgba(72,98,127,0) 70%),
radial-gradient(1000px 850px at 82% 56%,var(--aurora-c),rgba(148,104,127,0) 70%),
radial-gradient(1100px 900px at 15% 85%,var(--aurora-d),rgba(104,136,159,0) 70%),
linear-gradient(180deg,var(--aurora-g1),var(--aurora-g2) 40%,var(--aurora-g3));
background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
background-size:auto,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;
background-blend-mode:overlay,normal,normal,normal,normal,normal;
/* NO background-attachment:fixed. It is not in the canvas (zero uses across
all 52 artboards) -- it was added here by mistake, and a fixed six-layer
background forces the whole aurora to repaint on every scroll frame.
Measured on production: 29fps with it, 60fps without.
Leave the feTurbulence sky alone. It LOOKED like the second cost -- 29 ->
50fps when disabled -- but that was measured with the fixed background
still on. The two interacted: the fixed background forced a full repaint
every frame, and the filter made each repaint dearer. With the attachment
fixed the filter is rasterised once and costs nothing measurable:
fix only 58 / 60 fps (desktop / mobile)
fix + filter removed 59 / 60
fix + sky hidden 58 / 60
So do NOT pre-render it to a static image -- that trades design fidelity
for ~1fps of noise. And do not reach for layer promotion either:
translateZ(0)+will-change on .hsky DROPS it to 44/39fps, and contain:paint
on the hero collapses it to 10fps. Promoting a large filtered element
costs more to rasterise than it saves. */
}
a{color:var(--ocean);text-decoration:none}a:hover{color:#2C46B0}
img{max-width:100%}
/* ── shared type ── */
.wrap{max-width:1440px;margin:0 auto;padding:0 clamp(20px,3.6vw,54px);width:100%}
.eb{display:inline-flex;align-items:center;gap:9px;font:600 .68rem/1.3 var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--signal)}
.dsp{font-family:var(--dsp);font-size:clamp(1.8rem,3.2vw,2.9rem);font-weight:800;letter-spacing:-.036em;line-height:1.06;text-wrap:balance}
.dsp em{font-style:italic;font-weight:500;letter-spacing:-.024em}
.dsp i{color:var(--signal);font-style:normal}
.bd{font-size:.98rem;line-height:1.66;color:var(--muted);text-wrap:pretty;max-width:62ch}
.bd+.bd{margin-top:12px}
.todo{color:var(--signal);background:rgba(46,75,224,.1);border-radius:5px;padding:1px 6px;font:600 .82em/1.5 var(--mono);letter-spacing:.03em}
.btn{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-size:.92rem;font-weight:700;padding:13px 24px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s,border-color .16s,color .16s}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:15px;height:15px;flex:0 0 auto}
.slink{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:700;color:var(--ink);border-bottom:1.5px solid var(--line-d);padding-bottom:3px}
.slink:hover{color:var(--ocean);border-color:var(--ocean)}
.slink svg{width:14px;height:14px}
/* ── sky layers ── */
.sky,.rays,.stars,.glow{position:absolute;inset:0;pointer-events:none}
.rays{background:repeating-linear-gradient(90deg,rgba(255,255,255,.085) 0 1px,transparent 1px 8px);-webkit-mask-image:radial-gradient(46% 78% at 50% 76%,#000 0%,rgba(0,0,0,.6) 46%,transparent 84%);mask-image:radial-gradient(46% 78% at 50% 76%,#000 0%,rgba(0,0,0,.6) 46%,transparent 84%)}
/* ════ NAV ════ */
.phnav{position:relative;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;max-width:1440px;margin:0 auto;padding:20px clamp(20px,3.6vw,54px) 0;width:100%;flex:0 0 auto}
/* The brand is now the lockup ASSET, not a flex row of mark + type, so this
sizes an ![]()
. Height matches the 30px inline mark it replaced; the
lockup is 610x221, so width follows the ratio. */
.brand{display:block;height:30px;width:auto}
.nlinks{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,30px)}
.nlinks a{display:flex;align-items:center;gap:7px;font-size:.9rem;font-weight:500;color:rgba(255,255,255,.74);transition:color .16s;white-space:nowrap}
.nlinks a:hover,.nlinks a.on{color:#fff}
.nlinks a.on::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--signal)}
.nact{display:flex;align-items:center;justify-content:flex-end;gap:2px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:5px;justify-self:end}
.nact .sign{font-size:.88rem;font-weight:600;color:rgba(255,255,255,.82);padding:10px 16px;border-radius:999px}
.nact .sign:hover{color:#fff}
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#111;font-size:.86rem;font-weight:700;padding:10px 17px;border-radius:999px;transition:transform .16s,box-shadow .16s;white-space:nowrap}
.pill:hover{color:#111;transform:translateY(-1px);box-shadow:0 10px 26px rgba(255,255,255,.24)}
.burger{display:none;width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;align-items:center;justify-content:center;cursor:pointer;justify-self:end}
.burger svg{width:19px;height:19px}
.ph.dk .brand{color:var(--ink)}
.ph.dk .brand .wm{color:var(--ink)}
.ph.dk .nlinks a{color:var(--muted)}
.ph.dk .nlinks a:hover,.ph.dk .nlinks a.on{color:var(--ink)}
.ph.dk .nact{background:rgba(24,24,27,.05);border-color:var(--line-d)}
.ph.dk .nact .sign{color:var(--muted)}.ph.dk .nact .sign:hover{color:var(--ink)}
.ph.dk .pill{background:var(--ink);color:#fff}
.ph.dk .pill:hover{color:#fff;box-shadow:0 12px 26px -10px rgba(24,24,27,.5)}
.ph.dk .burger{border-color:var(--line-d);background:rgba(24,24,27,.04);color:var(--ink)}
/* ════ 01 · PAGE HERO ════ */
.ph{position:relative;isolation:isolate;overflow:hidden;background:#05060C;color:var(--bone);display:flex;flex-direction:column;min-height:clamp(430px,42vw,560px)}
.ph .sky{z-index:0;background:
radial-gradient(86% 116% at 50% 126%,rgba(244,247,255,.9) 0%,rgba(159,176,232,.6) 8%,rgba(109,130,240,.5) 17%,rgba(46,75,224,.46) 28%,rgba(46,75,224,.26) 42%,rgba(46,75,224,.1) 56%,transparent 72%),
radial-gradient(80% 54% at 50% 0%,rgba(22,34,96,.82),transparent 74%),
linear-gradient(180deg,#03040A 0%,#05081A 34%,#0A1230 66%,#14173A 100%)}
.ph .sky::after{content:'';position:absolute;inset:0;background:radial-gradient(78% 118% at 50% 82%,transparent 40%,rgba(3,4,10,.62) 100%)}
.ph .stars{z-index:1;opacity:.5;background-image:radial-gradient(1.4px 1.4px at 14% 20%,#fff,transparent),radial-gradient(1.2px 1.2px at 76% 13%,#fff,transparent),radial-gradient(1.5px 1.5px at 36% 34%,#fff,transparent),radial-gradient(1.1px 1.1px at 62% 27%,#fff,transparent),radial-gradient(1.3px 1.3px at 90% 38%,#fff,transparent),radial-gradient(1.2px 1.2px at 24% 48%,#fff,transparent),radial-gradient(1.1px 1.1px at 50% 9%,#fff,transparent),radial-gradient(1.3px 1.3px at 6% 40%,#fff,transparent);-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.45) 46%,transparent 68%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.45) 46%,transparent 68%)}
.ph .rays{z-index:1}
.ph .horizon{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;background:linear-gradient(90deg,transparent,rgba(159,176,232,.46) 16%,rgba(238,242,255,.82) 50%,rgba(159,176,232,.46) 84%,transparent);box-shadow:0 0 22px 4px rgba(109,130,240,.2);pointer-events:none}
.phbody{position:relative;z-index:3;margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:end;padding:clamp(48px,6vw,86px) clamp(20px,3.6vw,54px) clamp(30px,3.6vw,46px);max-width:1440px;margin-left:auto;margin-right:auto;width:100%}
.crumb{display:flex;align-items:center;gap:8px;font:600 .62rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.44)}
.crumb a{color:rgba(255,255,255,.68)}.crumb a:hover{color:#fff}
.crumb s{text-decoration:none;color:rgba(255,255,255,.28)}
.crumb b{color:#fff;font-weight:600}
.eb em,.promo em,.scl em{display:none}
.ph .eb{margin-top:clamp(18px,2.2vw,26px);color:rgba(255,255,255,.62)}
.ph .eb em{width:5px;height:5px;border-radius:50%;background:var(--signal);font-style:normal;flex:0 0 auto}
.ph .dsp{margin-top:14px;color:#fff;font-size:clamp(2rem,4.3vw,3.5rem);letter-spacing:-.04em;max-width:20ch}
.ph .lede{margin-top:clamp(14px,1.6vw,20px);max-width:56ch;font:500 .88rem/1.72 var(--mono);letter-spacing:.05em;color:rgba(255,255,255,.74);text-wrap:pretty}
.phcta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:clamp(20px,2.4vw,28px)}
.ph .btn.primary{background:#fff;color:#12141C;box-shadow:0 10px 30px rgba(255,255,255,.18)}
.ph .btn.ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff}
.ph .btn.ghost:hover{background:rgba(255,255,255,.12)}
.micro{margin-top:14px;font:600 .64rem/1.5 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.promo{display:flex;width:max-content;max-width:100%;align-items:center;gap:8px;font:700 .6rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--signal);background:rgba(46,75,224,.14);border:1px solid rgba(46,75,224,.34);padding:8px 12px;border-radius:999px;margin-top:16px}
.promo em{width:6px;height:6px;border-radius:50%;background:var(--signal);font-style:normal;flex:0 0 auto;animation:blink 2.4s ease-in-out infinite}
.ph .promo+.eb{margin-top:14px}
.jump{min-width:min(280px,80vw);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:16px 18px 8px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.jump .jl{font:700 .6rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.46)}
.jump ol{list-style:none;counter-reset:j;margin-top:10px}
.jump li{counter-increment:j;border-top:1px solid rgba(255,255,255,.1)}
.jump li:first-child{border-top:0}
.jump a{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:.88rem;font-weight:600;color:rgba(255,255,255,.8)}
.jump a::before{content:'0' counter(j);font:700 .58rem/1 var(--mono);letter-spacing:.08em;color:var(--signal);flex:0 0 auto}
.jump a::after{content:'';width:6px;height:6px;border-right:1.5px solid rgba(255,255,255,.35);border-bottom:1.5px solid rgba(255,255,255,.35);transform:rotate(-45deg);margin-left:auto;transition:transform .16s}
.jump a:hover{color:#fff}.jump a:hover::after{transform:rotate(-45deg) translate(2px,-2px)}
.ph.dk{background:var(--bone);color:var(--ink)}
.ph.dk .sky{background:radial-gradient(86% 112% at 50% 124%,rgba(46,75,224,.32) 0%,rgba(46,75,224,.18) 20%,rgba(46,75,224,.07) 40%,transparent 64%),radial-gradient(78% 62% at 50% -8%,rgba(46,75,224,.13),transparent 70%),linear-gradient(180deg,#F7F4EE 0%,#F4F0E8 62%,#EFEAE0 100%)}
.ph.dk .sky::after,.ph.dk .stars{display:none}
.ph.dk .rays{background:repeating-linear-gradient(90deg,rgba(24,24,27,.075) 0 1px,transparent 1px 8px)}
.ph.dk .horizon{background:linear-gradient(90deg,transparent,rgba(46,75,224,.4) 26%,rgba(46,75,224,.68) 50%,rgba(46,75,224,.4) 74%,transparent);box-shadow:none}
.ph.dk .crumb{color:var(--faint)}
.ph.dk .crumb a{color:var(--muted)}.ph.dk .crumb a:hover{color:var(--ink)}
.ph.dk .crumb s{color:rgba(24,24,27,.24)}
.ph.dk .crumb b{color:var(--ink)}
.ph.dk .eb{color:var(--signal)}
.ph.dk .dsp{color:var(--ink)}
.ph.dk .lede{color:var(--muted)}
.ph.dk .micro{color:var(--faint)}
.ph.dk .btn.primary{background:var(--ink);color:#fff;box-shadow:0 12px 28px -12px rgba(24,24,27,.5)}
.ph.dk .btn.ghost{background:transparent;border-color:var(--line-d);color:var(--ink)}
.ph.dk .btn.ghost:hover{background:rgba(24,24,27,.045)}
.ph.dk .jump{background:var(--card);border-color:var(--line);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 22px 48px -26px rgba(24,24,27,.32)}
.ph.dk .jump .jl{color:var(--faint)}
.ph.dk .jump li{border-color:var(--line)}
.ph.dk .jump a{color:var(--ink)}
.ph.dk .jump a::after{border-color:rgba(24,24,27,.3)}
/* ════ 02 · PROOF LEDGER ════ */
.lg{--bg:var(--page);--fg:var(--ink);--mu:var(--muted);--fa:var(--faint);--ln:rgba(24,24,27,.055);position:relative;background:var(--bg);color:var(--fg);padding:clamp(48px,6vw,86px) 0;overflow:hidden}
.lg.dk{--bg:var(--night);--fg:var(--bone);--mu:rgba(244,240,232,.66);--fa:rgba(244,240,232,.4);--ln:rgba(244,240,232,.09)}
.lghead{position:relative;display:flex;align-items:flex-end;gap:clamp(20px,3vw,48px);flex-wrap:wrap}
.lghead .dsp{max-width:22ch;margin-top:14px}
.lghead .side{margin-left:auto;max-width:34ch}
.lghead .side .bd{color:var(--mu);font-size:.92rem}
.lgrow{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(30px,3.8vw,52px);border-top:1px solid var(--ln)}
.lgc{position:relative;padding:clamp(22px,2.6vw,34px) clamp(14px,1.8vw,26px) clamp(6px,1vw,12px) 0}
.lgc+.lgc{border-left:1px solid var(--ln);padding-left:clamp(14px,1.8vw,26px)}
.lgc+.lgc::before{content:'';position:absolute;left:-1px;top:0;width:1px;height:46%;background:linear-gradient(180deg,var(--bg),transparent)}
.lgc .k{display:block;font:700 .6rem/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--fa)}
.lgc .v{display:flex;align-items:baseline;gap:2px;margin-top:14px;font-size:clamp(2.2rem,4.2vw,3.4rem);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.lgc .v u{text-decoration:none;font-size:.44em;font-weight:700;letter-spacing:-.01em;color:var(--signal);align-self:flex-start;margin-top:.24em}
.lgc .cap{margin-top:12px;font-size:.87rem;line-height:1.55;color:var(--mu);max-width:26ch;text-wrap:pretty}
.lgc .bar{margin-top:16px;height:3px;border-radius:2px;background:var(--ln);overflow:hidden}
.lgc .bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--ocean);transition:width 1.1s cubic-bezier(.22,1,.32,1)}
.lgc:nth-child(2) .bar i{background:var(--signal)}
.lgc:nth-child(4) .bar i{background:var(--green)}
.lg.dk .lgc .bar i{background:var(--ocean-lt)}
.lg.dk .lgc:nth-child(2) .bar i{background:var(--signal)}
.lg.dk .lgc:nth-child(4) .bar i{background:var(--green-lt)}
.lgfoot{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,3vw,38px);padding-top:clamp(16px,2vw,24px);border-top:1px solid var(--ln);font:600 .66rem/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--fa)}
.lgfoot .slink{margin-left:auto;text-transform:none;letter-spacing:.02em;color:var(--fg);border-color:var(--ln)}
.lg.dk .lgfoot .slink:hover{color:var(--ocean-lt);border-color:var(--ocean-lt)}
/* ════ 03 · SPOTLIGHT ════ */
.sp{--bg:var(--page);--fg:var(--ink);--mu:var(--muted);--fa:var(--faint);--ln:var(--line);--cd:var(--card);background:var(--bg);color:var(--fg);padding:clamp(48px,6vw,92px) 0}
.sp.dk{--bg:var(--night);--fg:var(--bone);--mu:rgba(244,240,232,.68);--fa:rgba(244,240,232,.42);--ln:rgba(244,240,232,.14);--cd:#15161C}
.spgrid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.12fr);gap:clamp(26px,4vw,70px);align-items:center}
.spgrid.rev>.spcopy{order:2}
.sp .dsp{margin-top:15px;max-width:20ch}
.sp .bd{margin-top:14px;color:var(--mu);max-width:46ch}
.checks{list-style:none;margin-top:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:2px}
.checks li{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-top:1px solid var(--ln,var(--line));font-size:.9rem;font-weight:600;line-height:1.5}
.checks li em{flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:rgba(46,75,224,.12);color:var(--ocean);display:grid;place-items:center;margin-top:1px}
.sp.dk .checks li em{background:rgba(143,166,245,.18);color:var(--ocean-lt)}
.checks li em svg{width:10px;height:10px}
.checks li span{color:var(--mu,var(--muted));font-weight:500}
.sp .slink{margin-top:clamp(18px,2.2vw,24px);color:var(--fg);border-color:var(--ln)}
.sp.dk .slink:hover{color:var(--ocean-lt);border-color:var(--ocean-lt)}
.surface{position:relative;max-width:100%;isolation:isolate;padding:clamp(16px,2.2vw,30px)}
.surface::before{content:'';position:absolute;inset:0;z-index:0;border-radius:20px;border:1px solid var(--ln);background:radial-gradient(120% 118% at 50% 0%,#FCFAF7 0%,#F3EFE8 58%,#EDE8DF 100%);box-shadow:0 34px 66px -32px rgba(24,24,27,.4),0 4px 12px -6px rgba(24,24,27,.1)}
.sp.dk .surface::before{background:radial-gradient(120% 118% at 50% 0%,#1B1D28 0%,#12141D 58%,#0C0E16 100%);box-shadow:0 40px 80px -34px rgba(0,0,0,.8)}
.surface>*{position:relative;z-index:2}
.chip{position:absolute;z-index:4;background:var(--cd);border:1px solid var(--ln);border-radius:13px;padding:11px 14px;box-shadow:0 18px 40px -18px rgba(24,24,27,.42);animation:drift 7s ease-in-out infinite}
.sp.dk .chip{box-shadow:0 20px 44px -16px rgba(0,0,0,.7)}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.chip .ck{font:700 .54rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--fa)}
.chip .cv{margin-top:6px;font-size:1.02rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--fg)}
.chip.c1{left:-3%;top:auto;bottom:58%}
.chip.c2{right:-2%;bottom:-3%;animation-delay:-2.4s}
.chip.c2 .cv{color:var(--green)}
.sp.dk .chip.c2 .cv{color:var(--green-lt)}
.chip .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--signal);margin-right:6px}
/* ════ 04 · SWITCHBOARD ════ */
.sw{--bg:var(--page);--fg:var(--ink);--mu:var(--muted);--fa:var(--faint);--ln:var(--line);--cd:var(--card);background:var(--bg);color:var(--fg);padding:clamp(48px,6vw,92px) 0}
.sw.dk{--bg:var(--night);--fg:var(--bone);--mu:rgba(244,240,232,.68);--fa:rgba(244,240,232,.42);--ln:rgba(244,240,232,.14);--cd:rgba(244,240,232,.04)}
.swtop{max-width:58ch}
.swtop .dsp{margin-top:15px;max-width:26ch}
.swtop .bd{margin-top:14px;color:var(--mu)}
.swgrid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(16px,2vw,28px);align-items:stretch;margin-top:clamp(28px,3.6vw,46px)}
.col{background:var(--cd);border:1px solid var(--ln);border-radius:18px;padding:clamp(18px,2.2vw,26px)}
.col .ch{display:flex;align-items:center;gap:9px;font:700 .62rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fa);padding-bottom:14px;border-bottom:1px solid var(--ln)}
.col .ch b{color:var(--fg);font-weight:700}
.col.now .ch em{width:7px;height:7px;border-radius:50%;background:var(--fa);font-style:normal;flex:0 0 auto}
.rowz{display:flex;flex-direction:column}
.rw{display:flex;align-items:center;gap:11px;padding:14px 0;border-bottom:1px solid var(--ln);font-size:.9rem;font-weight:600;line-height:1.4}
.rw:last-child{border-bottom:0;padding-bottom:2px}
.rw .t{font:700 .58rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fa);flex:0 0 auto;min-width:52px}
.col.now .rw span:not(.t):not(.x){color:var(--fa);text-decoration:line-through;text-decoration-thickness:1px;font-weight:500}
.col.now .rw .x{margin-left:auto;flex:0 0 auto;font:700 .58rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fa)}
.col.linq{background:#15161C;border-color:rgba(244,240,232,.16);color:var(--bone);box-shadow:0 30px 64px -30px rgba(24,24,27,.5)}
.sw.dk .col.linq{background:#fff;border-color:transparent;color:var(--ink);box-shadow:0 30px 70px -28px rgba(0,0,0,.8)}
.col.linq .ch{color:rgba(244,240,232,.5);border-color:rgba(244,240,232,.14)}
.col.linq .ch b{color:#fff}
.sw.dk .col.linq .ch{color:var(--faint);border-color:var(--line)}
.sw.dk .col.linq .ch b{color:var(--ink)}
.col.linq .ch em{width:7px;height:7px;border-radius:50%;background:var(--green-lt);font-style:normal;flex:0 0 auto;animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.col.linq .rw{border-color:rgba(244,240,232,.12)}
.sw.dk .col.linq .rw{border-color:var(--line)}
.col.linq .rw .t{color:var(--signal)}
.col.linq .rw span:not(.t){color:#fff;font-weight:600}
.sw.dk .col.linq .rw span:not(.t){color:var(--ink)}
.col.linq .rw .ok{margin-left:auto;flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:rgba(95,211,155,.18);color:var(--green-lt);display:grid;place-items:center}
.sw.dk .col.linq .rw .ok{background:rgba(31,138,91,.12);color:var(--green)}
.col.linq .rw .ok svg{width:10px;height:10px}
.arw{align-self:center;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--ln);background:var(--cd);color:var(--fa);flex:0 0 auto}
.arw svg{width:16px;height:16px}
.swfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:clamp(22px,2.6vw,32px)}
.swfoot .note{font:600 .66rem/1.6 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--fa);max-width:42ch}
.swfoot .slink{margin-left:auto;color:var(--fg);border-color:var(--ln)}
.sw.dk .swfoot .slink:hover{color:var(--ocean-lt);border-color:var(--ocean-lt)}
.sw .btn.primary{margin-left:auto;background:var(--ocean);color:#fff;box-shadow:0 12px 28px -12px rgba(46,75,224,.6)}
.sw .btn.primary:hover{background:#4A68E4}
/* ════ 05 · QUOTE SPOTLIGHT ════ */
.qt{--bg:var(--bone);--fg:var(--ink);--mu:var(--muted);--fa:var(--faint);--ln:var(--line);position:relative;isolation:isolate;overflow:hidden;background:var(--bg);color:var(--fg);padding:clamp(52px,6.4vw,100px) 0}
.qt.dk{--bg:#05060C;--fg:var(--bone);--mu:rgba(244,240,232,.7);--fa:rgba(244,240,232,.44);--ln:rgba(244,240,232,.14)}
.qt .glow{z-index:0;background:radial-gradient(46% 70% at 78% 118%,rgba(46,75,224,.2),transparent 62%),radial-gradient(50% 60% at 12% -10%,rgba(46,75,224,.1),transparent 66%)}
.qt.dk .glow{background:radial-gradient(46% 76% at 78% 122%,rgba(46,75,224,.42),transparent 60%),radial-gradient(56% 66% at 14% -12%,rgba(22,34,96,.9),transparent 70%)}
.qt .rays{z-index:0;background:repeating-linear-gradient(90deg,rgba(24,24,27,.06) 0 1px,transparent 1px 8px);-webkit-mask-image:radial-gradient(50% 80% at 76% 100%,#000,transparent 78%);mask-image:radial-gradient(50% 80% at 76% 100%,#000,transparent 78%)}
.qt.dk .rays{background:repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 1px,transparent 1px 8px)}
.qtgrid{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,3.6vw,56px);align-items:start}
.qtwho{display:flex;flex-direction:column;gap:14px;min-width:150px}
.qtwho img{width:clamp(84px,9vw,116px);height:clamp(84px,9vw,116px);border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.7);box-shadow:0 20px 44px -20px rgba(24,24,27,.5)}
.qt.dk .qtwho img{border-color:rgba(244,240,232,.28)}
.qtwho b{display:block;font-size:1rem;font-weight:800;letter-spacing:-.02em}
.qtwho span{display:block;margin-top:5px;font:600 .62rem/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--fa)}
.qtmark{font-size:clamp(2.6rem,5vw,4rem);line-height:.6;font-weight:800;color:var(--signal);letter-spacing:-.06em}
blockquote.big{margin-top:clamp(10px,1.4vw,18px);font-size:clamp(1.32rem,2.5vw,2.15rem);font-weight:500;letter-spacing:-.028em;line-height:1.32;max-width:36ch;text-wrap:pretty}
blockquote.big i{font-style:normal;font-weight:700;box-shadow:inset 0 -.42em 0 rgba(46,75,224,.22)}
.qt.dk blockquote.big i{box-shadow:inset 0 -.42em 0 rgba(46,75,224,.42)}
.qtstats{display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap;margin-top:clamp(24px,3vw,38px);padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--ln)}
.qtstats div b{display:block;font-size:clamp(1.24rem,2vw,1.7rem);font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.qtstats div span{display:block;margin-top:6px;font:600 .6rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fa)}
.qtstats div b i{font-style:normal;color:var(--signal)}
.qt .slink{margin-top:clamp(20px,2.4vw,28px);color:var(--fg);border-color:var(--ln)}
.qt .slink:hover{color:var(--signal);border-color:var(--signal)}
/* ════ BAND (generic light / night section) ════ */
.band{position:relative;--bg:var(--page);--fg:var(--ink);--mu:var(--muted);--fa:var(--faint);--ln:var(--line);--cd:var(--card);background:var(--page);color:var(--ink);padding:clamp(48px,6vw,92px) 0}
.band.night{--bg:var(--night);--fg:var(--bone);--mu:rgba(244,240,232,.68);--fa:rgba(244,240,232,.42);--ln:rgba(244,240,232,.14);--cd:rgba(244,240,232,.05);background:var(--night);color:var(--bone)}
.band.bone{background:var(--bone)}
.band.night .dsp{color:#fff}
.band.night .bd{color:rgba(244,240,232,.72)}
.band .dsp{margin-top:15px}
.band .bd{margin-top:14px}
.bhead{max-width:60ch}
.bsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(26px,4vw,64px);align-items:center}
/* ════ MOCK PRIMITIVES (product surfaces) ════ */
.mock{background:#fff;border:1px solid rgba(24,24,27,.09);border-radius:14px;overflow:hidden;box-shadow:0 18px 44px -26px rgba(24,24,27,.34)}
.sp.dk .mock,.band.night .mock{background:#15161C;border-color:rgba(244,240,232,.13);box-shadow:0 24px 54px -24px rgba(0,0,0,.7)}
.mbar{display:flex;align-items:center;gap:6px;padding:10px 13px;border-bottom:1px solid rgba(24,24,27,.08);background:linear-gradient(#FDFDFE,#F6F6F8)}
.sp.dk .mbar,.band.night .mbar{background:#1B1D26;border-color:rgba(244,240,232,.1)}
.mbar i{width:8px;height:8px;border-radius:50%;background:#E1E1E5;flex:0 0 auto}
.sp.dk .mbar i,.band.night .mbar i{background:#33353F}
.mbar .u{margin-left:8px;flex:1;min-width:0;height:20px;border-radius:6px;background:rgba(24,24,27,.05);display:flex;align-items:center;padding:0 9px;font:600 .6rem/1 var(--mono);letter-spacing:.05em;color:var(--faint);white-space:nowrap;overflow:hidden}
.sp.dk .mbar .u,.band.night .mbar .u{background:rgba(244,240,232,.07);color:rgba(244,240,232,.5)}
.mbar .tg{margin-left:auto;font:700 .55rem/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--green);background:rgba(31,138,91,.1);padding:5px 8px;border-radius:6px;flex:0 0 auto}
.mpad{padding:clamp(13px,1.5vw,18px)}
.mh{display:flex;align-items:center;gap:9px;font:700 .6rem/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.sp.dk .mh,.band.night .mh{color:rgba(244,240,232,.45)}
.mh b{color:var(--ink);font-weight:700;letter-spacing:-.01em;font-size:.86rem;text-transform:none;font-family:'Public Sans'}
.sp.dk .mh b,.band.night .mh b{color:#fff}
.mh .r{margin-left:auto;color:var(--ocean)}
.sp.dk .mh .r,.band.night .mh .r{color:var(--ocean-lt)}
/* page tiles */
.mtiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:13px}
.mtile{border:1px solid rgba(24,24,27,.09);border-radius:10px;padding:11px;background:#FCFCFD;min-width:0}
.sp.dk .mtile,.band.night .mtile{background:rgba(244,240,232,.05);border-color:rgba(244,240,232,.11)}
.mtile .tn{font:700 .52rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.mtile b{display:block;margin-top:7px;font-size:.76rem;font-weight:700;letter-spacing:-.012em;line-height:1.3}
.sp.dk .mtile b,.band.night .mtile b{color:#fff}
.mtile .ln{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.mtile .ln i{height:3px;border-radius:2px;background:rgba(24,24,27,.1)}
.sp.dk .mtile .ln i,.band.night .mtile .ln i{background:rgba(244,240,232,.14)}
.mtile .ln i:nth-child(2){width:72%}
.mtile.add{border-style:dashed;background:transparent;display:grid;place-items:center;color:var(--faint);font:700 .58rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:center}
.mtile.bk{background:rgba(46,75,224,.06);border-color:rgba(46,75,224,.24)}
.mtile.bk .tn{color:var(--ocean)}
/* data rows */
.mrows{margin-top:12px;display:flex;flex-direction:column}
.mrow{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid rgba(24,24,27,.08);font-size:.82rem;font-weight:600;min-width:0}
.sp.dk .mrow,.band.night .mrow{border-color:rgba(244,240,232,.1);color:var(--bone)}
.mrow:first-child{border-top:0}
.mrow .kw{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .pos{margin-left:auto;font:700 .74rem/1 var(--mono);color:var(--faint);flex:0 0 auto;font-variant-numeric:tabular-nums}
.mrow .up{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font:800 .62rem/1 var(--mono);letter-spacing:.06em;color:var(--green);background:rgba(31,138,91,.1);padding:5px 7px;border-radius:6px}
.sp.dk .mrow .up,.band.night .mrow .up{color:var(--green-lt);background:rgba(95,211,155,.14)}
.mrow .act{margin-left:auto;display:flex;gap:6px;flex:0 0 auto}
.mrow .act button{border:0;cursor:pointer;font:700 .58rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border-radius:7px;background:rgba(24,24,27,.06);color:var(--muted)}
.sp.dk .mrow .act button,.band.night .mrow .act button{background:rgba(244,240,232,.08);color:rgba(244,240,232,.6)}
.mrow .act button.ok{background:var(--ocean);color:#fff}
.mrow .act button.ok:hover{background:#4A68E4}
.mrow .st{margin-left:auto;flex:0 0 auto;font:700 .58rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
/* stat grid */
.mstat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:13px}
.mstat div{border:1px solid rgba(24,24,27,.08);border-radius:10px;padding:11px}
.sp.dk .mstat div,.band.night .mstat div{border-color:rgba(244,240,232,.11);background:rgba(244,240,232,.04)}
.mstat span{display:block;font:700 .5rem/1.3 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mstat b{display:block;margin-top:6px;font-size:1.14rem;font-weight:800;letter-spacing:-.032em;font-variant-numeric:tabular-nums}
.band.night .mstat b,.sp.dk .mstat b{color:#fff}
.mstat b u{text-decoration:none;font-size:.6em;color:var(--signal)}
/* slot picker */
.mslots{margin-top:13px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.mslots .d{aspect-ratio:1;border-radius:8px;display:grid;place-items:center;font:700 .68rem/1 var(--mono);color:var(--muted);background:rgba(24,24,27,.04)}
.sp.dk .mslots .d,.band.night .mslots .d{background:rgba(244,240,232,.06);color:rgba(244,240,232,.62)}
.mslots .d.hd{background:transparent;font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.mslots .d.on{background:var(--ocean);color:#fff}
.mslots .d.free{box-shadow:inset 0 0 0 1px rgba(46,75,224,.3);color:var(--ocean)}
.mtimes{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.mtimes span{font:700 .66rem/1 var(--mono);letter-spacing:.06em;padding:9px 11px;border-radius:8px;border:1px solid rgba(24,24,27,.12);color:var(--ink)}
.sp.dk .mtimes span,.band.night .mtimes span{border-color:rgba(244,240,232,.16);color:var(--bone)}
.mtimes span.on{background:var(--ink);border-color:var(--ink);color:#fff}
.sp.dk .mtimes span.on,.band.night .mtimes span.on{background:#fff;color:var(--ink);border-color:#fff}
.mnote{margin-top:12px;display:flex;align-items:center;gap:8px;font:600 .68rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.mnote em{width:6px;height:6px;border-radius:50%;background:var(--green);font-style:normal;flex:0 0 auto}
/* ════ POSTS (social) ════ */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);margin-top:clamp(26px,3.4vw,42px)}
.post{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(24,24,27,.05);transition:transform .2s,box-shadow .2s}
.post:hover{transform:translateY(-3px);box-shadow:0 18px 40px -20px rgba(24,24,27,.28)}
.band.night .post{background:rgba(244,240,232,.04);border-color:rgba(244,240,232,.13)}
.post .ig{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--line);font:700 .6rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.band.night .post .ig{border-color:rgba(244,240,232,.1);color:rgba(244,240,232,.45)}
.post .ig em{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,#2E4BE0,#B32E7A);flex:0 0 auto}
.post .ig .st{margin-left:auto;color:var(--ocean)}
.band.night .post .ig .st{color:var(--ocean-lt)}
.post .im{aspect-ratio:4/3;background:rgba(24,24,27,.05);position:relative}
.band.night .post .im{background:rgba(244,240,232,.06)}
.post .im image-slot{position:absolute;inset:0}
.post .cap2{padding:13px 14px 15px;font-size:.85rem;line-height:1.55;color:var(--muted)}
.band.night .post .cap2{color:rgba(244,240,232,.7)}
.post .cap2 b{color:var(--ink);font-weight:700}
.band.night .post .cap2 b{color:#fff}
.post .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;font:700 .58rem/1 var(--mono);letter-spacing:.06em;color:var(--ocean)}
.band.night .post .tags{color:var(--ocean-lt)}
/* ════ CHAIN (numbered steps) ════ */
.chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.2vw,16px);margin-top:clamp(26px,3.4vw,44px)}
.chain.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.step{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 19px 22px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.step:hover{transform:translateY(-3px);box-shadow:0 16px 36px -18px rgba(24,24,27,.26)}
.band.night .step{background:rgba(244,240,232,.05);border-color:rgba(244,240,232,.13)}
.step .n{display:flex;align-items:center;gap:8px;font:700 .66rem/1 var(--mono);letter-spacing:.14em;color:var(--faint)}
.step .n::after{content:'';flex:1;height:1px;background:var(--line)}
.band.night .step .n::after{background:rgba(244,240,232,.14)}
.step .n em{width:6px;height:6px;border-radius:50%;background:var(--ocean);font-style:normal;flex:0 0 auto}
.step:last-child .n em{background:var(--signal)}
.step h3{margin:15px 0 0;font-size:1.04rem;font-weight:800;letter-spacing:-.02em}
.band.night .step h3{color:#fff}
.step p{margin:9px 0 0;font-size:.87rem;line-height:1.58;color:var(--muted);text-wrap:pretty}
.band.night .step p{color:rgba(244,240,232,.7)}
/* ════ SWAP CARDS (plugin out, agent in — divs only, no headings) ════ */
.swaps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.2vw,16px);margin-top:clamp(26px,3.4vw,44px)}
.swap{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 19px 22px;transition:transform .2s,box-shadow .2s}
.swap:hover{transform:translateY(-3px);box-shadow:0 16px 36px -18px rgba(24,24,27,.26)}
.band.night .swap{background:rgba(244,240,232,.05);border-color:rgba(244,240,232,.13)}
.swap .sw2{display:flex;align-items:center;gap:9px;font:700 .62rem/1.3 var(--mono);letter-spacing:.11em;text-transform:uppercase}
.swap .sw2 .out{color:var(--faint);text-decoration:line-through;text-decoration-thickness:1px}
.band.night .swap .sw2 .out{color:rgba(244,240,232,.4)}
.swap .sw2 svg{width:13px;height:13px;color:var(--signal);flex:0 0 auto}
.swap .sw2 .in{color:var(--ocean)}
.band.night .swap .sw2 .in{color:var(--ocean-lt)}
.swap .sn{margin:14px 0 0;font-size:1.02rem;font-weight:800;letter-spacing:-.02em}
.band.night .swap .sn{color:#fff}
.swap p{margin:9px 0 0;font-size:.87rem;line-height:1.58;color:var(--muted);text-wrap:pretty}
.band.night .swap p{color:rgba(244,240,232,.7)}
/* checks in a band context */
.band.night .checks li{border-color:rgba(244,240,232,.14);color:var(--bone)}
.band.night .checks li span{color:rgba(244,240,232,.66)}
.band.night .checks li em{background:rgba(143,166,245,.18);color:var(--ocean-lt)}
.band .checks{max-width:52ch}
/* quoted visitor line inside a mock */
.mquote{margin-top:13px;background:rgba(46,75,224,.06);border:1px solid rgba(46,75,224,.18);border-radius:12px;border-bottom-left-radius:4px;padding:12px 14px;font-size:.86rem;font-weight:600;line-height:1.45;color:var(--ink)}
.sp.dk .mquote,.band.night .mquote{background:rgba(143,166,245,.1);border-color:rgba(143,166,245,.22);color:#fff}
/* ════ GUARDS (3-up cards) ════ */
.guards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);margin-top:clamp(26px,3.4vw,42px)}
.guard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.band.night .guard{background:rgba(244,240,232,.05);border-color:rgba(244,240,232,.13)}
.guard .gi{width:34px;height:34px;border-radius:10px;background:rgba(46,75,224,.1);color:var(--ocean);display:grid;place-items:center}
.band.night .guard .gi{background:rgba(143,166,245,.16);color:var(--ocean-lt)}
.guard .gi svg{width:17px;height:17px}
.guard h3{margin:15px 0 0;font-size:1.02rem;font-weight:800;letter-spacing:-.02em}
.band.night .guard h3{color:#fff}
.guard p{margin:9px 0 0;font-size:.88rem;line-height:1.6;color:var(--muted);text-wrap:pretty}
.band.night .guard p{color:rgba(244,240,232,.7)}
/* ════ ROADMAP ════ */
.road{margin-top:clamp(24px,3vw,38px);border-top:1px solid rgba(244,240,232,.14);max-width:96ch}
.band:not(.night) .road{border-color:var(--line)}
.road .ri{display:flex;align-items:flex-start;gap:clamp(14px,2vw,26px);padding:18px 0;border-bottom:1px solid rgba(244,240,232,.14)}
.band:not(.night) .road .ri{border-color:var(--line)}
.road .ri .rn{font:700 .62rem/1.6 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--signal);flex:0 0 auto;min-width:64px}
.road .ri b{display:block;font-size:1rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.band:not(.night) .road .ri b{color:var(--ink)}
.road .ri p{margin:7px 0 0;font-size:.89rem;line-height:1.6;color:rgba(244,240,232,.7);max-width:70ch;text-wrap:pretty}
.band:not(.night) .road .ri p{color:var(--muted)}
/* ════ PLANS ════ */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);margin-top:clamp(26px,3.4vw,42px);max-width:1240px}
.plan{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column}
.plan.hot{background:#15161C;border-color:transparent;color:var(--bone);box-shadow:0 30px 64px -30px rgba(24,24,27,.55)}
.plan .pn{display:flex;align-items:center;gap:9px;font:700 .64rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.plan.hot .pn{color:rgba(244,240,232,.5)}
.plan .pn .bdg{margin-left:auto;font-size:.55rem;padding:5px 8px;border-radius:6px;background:var(--signal);color:#fff;letter-spacing:.1em}
.plan .pr{display:flex;align-items:baseline;gap:6px;margin-top:16px;font-size:clamp(2rem,3.4vw,2.8rem);font-weight:800;letter-spacing:-.045em;line-height:1}
.plan.hot .pr{color:#fff}
.plan .pr span{font:600 .68rem/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.plan.hot .pr span{color:rgba(244,240,232,.5)}
.plan ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:2px;flex:1}
.plan li{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:.88rem;line-height:1.5;color:var(--muted)}
.plan.hot li{border-color:rgba(244,240,232,.12);color:rgba(244,240,232,.76)}
.plan li em{flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:rgba(31,138,91,.12);color:var(--green);display:grid;place-items:center;margin-top:2px}
.plan.hot li em{background:rgba(95,211,155,.16);color:var(--green-lt)}
.plan li em svg{width:9px;height:9px}
.plan .btn{margin-top:20px;justify-content:center}
.plan .btn.primary{background:var(--ink);color:#fff}
.plan.hot .btn.primary{background:#fff;color:#12141C}
.plans+.slink{margin-top:clamp(18px,2.2vw,26px)}
/* ════ SHOWCASE · site-card rail, right of the hero copy ════ */
.showcase{position:relative;z-index:4;margin-top:calc(-1 * clamp(180px,21vw,310px));pointer-events:none}
.showcase .scrail,.showcase .scfoot{pointer-events:auto}
.scfoot .scl{flex:0 1 auto}
.scstage{max-width:1440px;margin:0 auto;width:100%;padding-left:clamp(20px,3.6vw,54px)}
.scfoot{max-width:1440px;margin:0 auto;width:100%;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px clamp(20px,3.6vw,54px) 0}
.scfoot .scl{font:700 .62rem/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.scsw{margin-left:auto;display:flex;gap:2px;background:rgba(24,24,27,.05);border:1px solid var(--line);border-radius:999px;padding:3px}
.scsw button{border:0;background:transparent;font:700 .58rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding:8px 13px;border-radius:999px;cursor:pointer;transition:background .18s,color .18s}
.scsw button:hover{color:var(--ink)}
.scsw button[aria-pressed=true]{background:var(--ink);color:#fff}
.scnav{display:flex;gap:7px}
.scfoot .scnav{margin-left:auto}
.scnav button{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-d);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .16s,border-color .16s}
.scnav button:hover{background:rgba(24,24,27,.05)}
.scnav button svg{width:14px;height:14px}
.scrail{display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-behavior:smooth;scroll-padding-left:26px;padding:30px 0 52px 26px;-ms-overflow-style:none;scrollbar-width:none;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 54px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 54px),transparent)}
.scrail::-webkit-scrollbar{display:none}
.scrail::after{content:'';flex:0 0 clamp(20px,3.6vw,54px)}
.scrail{margin-right:calc(-1 * max((100vw - 1440px) / 2,0px))}
.scrail.drag{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.scard{position:relative;z-index:1;flex:0 0 auto;width:clamp(178px,19vw,244px);scroll-snap-align:center;display:flex;flex-direction:column;gap:11px}
.scframe{position:relative;display:flex;flex-direction:column;aspect-ratio:3/4.1;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 34px 62px -28px rgba(3,4,10,.7),0 4px 14px -5px rgba(3,4,10,.45),0 0 0 1px rgba(255,255,255,.1);transition:transform .34s cubic-bezier(.34,1.14,.44,1),box-shadow .34s}
.scard:hover{z-index:6}
.scard:hover .scframe{transform:translateY(-8px);box-shadow:0 50px 80px -30px rgba(3,4,10,.75),0 6px 18px -5px rgba(3,4,10,.5),0 0 0 1px rgba(255,255,255,.18)}
.scbar{flex:0 0 auto;display:flex;align-items:center;gap:5px;padding:9px 11px;border-bottom:1px solid rgba(24,24,27,.08);background:linear-gradient(#FDFDFE,#F5F5F7)}
.scbar i{width:6px;height:6px;border-radius:50%;background:#E3E3E7;flex:0 0 auto}
.scbar .u{margin-left:6px;flex:1;min-width:0;height:16px;border-radius:5px;background:rgba(24,24,27,.05);display:flex;align-items:center;padding:0 8px;font:600 .52rem/1 var(--mono);letter-spacing:.05em;color:var(--faint);white-space:nowrap;overflow:hidden}
.scscreen{position:relative;flex:1;min-height:0;background:var(--bone)}
.scscreen image-slot{position:absolute;inset:0}
.scsoon{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:radial-gradient(120% 100% at 50% 118%,#1E2030 0%,#12141C 60%);color:rgba(244,240,232,.9);pointer-events:none;font:700 .8rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase}
image-slot[data-filled]+.scsoon{display:none}
.scmeta{padding-left:2px;transition:opacity .2s}
.scmeta b{display:block;font-size:.84rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.scmeta span{display:block;margin-top:5px;font:600 .56rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
/* version B · fanned deck */
.showcase.vb{margin-top:calc(-1 * clamp(150px,18vw,270px))}
.showcase.vb .scrail{gap:0;padding-top:34px;padding-bottom:72px}
.showcase.vb .scard{width:clamp(210px,24vw,310px)}
.showcase.vb .scard+.scard{margin-left:calc(-1 * clamp(52px,6vw,96px))}
.showcase.vb .scframe{aspect-ratio:4/3.1;transform:rotate(-1.7deg)}
.showcase.vb .scard:nth-child(even) .scframe{transform:rotate(1.5deg) translateY(10px)}
.showcase.vb .scard:hover .scframe,.showcase.vb .scard:nth-child(even):hover .scframe{transform:translateY(-12px) rotate(0deg) scale(1.035)}
.showcase.vb .scmeta{position:absolute;top:100%;left:2px;right:0;padding-top:14px;opacity:0;pointer-events:none}
.showcase.vb .scard:hover .scmeta{opacity:1}
.lg.below-showcase{padding-top:clamp(22px,2.6vw,40px)}
.ph.with-showcase .phbody{padding-bottom:clamp(60px,7vw,110px)}
@media (min-width:1081px){.scstage{padding-left:calc(clamp(20px,3.6vw,54px) + 50%)}
.ph.with-showcase .phbody{padding-bottom:calc(clamp(80px,8vw,116px) + 52px)}
.showcase,.showcase.vb{margin-top:calc(-1 * clamp(80px,8vw,116px))}
.scfoot{position:absolute;top:-20px;bottom:6px;left:50%;transform:translateX(-50%);max-width:1440px;width:100%;padding:0 clamp(20px,3.6vw,54px);display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:14px;pointer-events:none}
.scfoot .scl,.scfoot .scnav{pointer-events:auto}
.scfoot .scl{max-width:40%;color:rgba(255,255,255,.55)}
.scfoot .scnav{margin-left:0}
.lg.below-showcase{margin-top:calc(-1 * clamp(172px,13vw,186px));padding-top:0}
.lg.below-showcase .lghead{display:block}
.lg.below-showcase .lghead .side{margin-left:0;margin-top:18px;max-width:44ch}
.lg.below-showcase .lgrow{margin-top:clamp(36px,4.2vw,58px)}}
@media (max-width:1080px){.showcase,.showcase.vb{margin-top:calc(-1 * clamp(56px,8vw,110px))}}
@media (max-width:640px){
.scfoot{padding-left:22px}
.scfoot .scl{font-size:.55rem;letter-spacing:.12em}
.scard{width:clamp(150px,44vw,182px)}
.showcase.vb .scard{width:clamp(190px,58vw,240px)}
}
/* ════ FAQ ════ */
.faq{margin-top:clamp(24px,3vw,38px);border-top:1px solid var(--line);max-width:88ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:19px 40px 19px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:1.04rem;font-weight:700;letter-spacing:-.02em}
.faq summary::after{content:'';position:absolute;right:8px;top:50%;width:9px;height:9px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:translateY(-70%) rotate(45deg);transition:transform .22s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{margin:0 0 20px;font-size:.92rem;line-height:1.65;color:var(--muted);max-width:74ch;text-wrap:pretty}
/* ════ FINAL CTA BAND ════ */
.ctawrap{background:var(--page);padding:clamp(34px,5vw,74px) 0 0}
.ctaband{position:relative;isolation:isolate;overflow:hidden;background:#05060C;border-radius:clamp(20px,2.2vw,30px) clamp(20px,2.2vw,30px) 0 0;padding:clamp(56px,7.4vw,104px) clamp(20px,3.6vw,48px)}
.ctaband::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;z-index:2;background:linear-gradient(90deg,transparent,rgba(159,176,232,.46) 16%,rgba(238,242,255,.82) 50%,rgba(159,176,232,.46) 84%,transparent);box-shadow:0 0 22px 4px rgba(109,130,240,.25);pointer-events:none}
.ctaband>.sky{background:
radial-gradient(86% 116% at 50% -26%,rgba(244,247,255,.9) 0%,rgba(159,176,232,.6) 8%,rgba(109,130,240,.5) 17%,rgba(46,75,224,.46) 28%,rgba(46,75,224,.26) 42%,rgba(46,75,224,.1) 56%,transparent 72%),
radial-gradient(80% 54% at 50% 100%,rgba(22,34,96,.82),transparent 74%),
linear-gradient(0deg,#03040A 0%,#05081A 34%,#0A1230 66%,#14173A 100%)}
.ctaband>.rays{-webkit-mask-image:radial-gradient(46% 78% at 50% 24%,#000 0%,rgba(0,0,0,.6) 46%,transparent 84%);mask-image:radial-gradient(46% 78% at 50% 24%,#000 0%,rgba(0,0,0,.6) 46%,transparent 84%)}
.ctaband>.sky,.ctaband>.rays,.ctaband>.stars{border-radius:inherit}
.ctaband .inner{position:relative;z-index:3;max-width:1440px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.ctaband .eb{color:rgba(255,255,255,.62)}
.ctaband .dsp{margin-top:16px;max-width:20ch;color:#fff;font-size:clamp(2rem,3.9vw,3.4rem)}
.ctaband .bd{color:rgba(255,255,255,.72);max-width:46ch}
.ctaband .micro{color:rgba(255,255,255,.5)}
/* ════ FOOTER ════ */
.foot2{background:var(--night);color:var(--bone);padding:clamp(44px,5vw,72px) 0 clamp(28px,3vw,40px);border-top:1px solid rgba(244,240,232,.1)}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.fcol .fl{font:700 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,240,232,.44);margin-bottom:14px}
.fcol a{display:block;font-size:.88rem;color:rgba(244,240,232,.76);padding:5px 0}
.fcol a:hover{color:#fff}
.fbrand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
/* Wordmark asset, standing alone — it carries its own periwinkle period. */
.fbrand .wm{display:block;height:24px;width:auto}
.fnote{font-size:.86rem;line-height:1.6;color:rgba(244,240,232,.6);max-width:36ch}
.fbot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(30px,3.4vw,46px);padding-top:20px;border-top:1px solid rgba(244,240,232,.1);font-size:.8rem;color:rgba(244,240,232,.46)}
.fbot .fl2{display:flex;gap:16px;margin-left:auto;flex-wrap:wrap}
.fbot a{color:rgba(244,240,232,.6)}
.fbot a:hover{color:#fff}
/* ════ RESPONSIVE ════ */
@media (max-width:1080px){
.nlinks,.nact{display:none}
.burger{display:flex}
.phnav{grid-template-columns:1fr auto}
.ph{min-height:0}
.phbody{grid-template-columns:minmax(0,1fr);align-items:start;gap:26px}
.jump{min-width:0;width:100%;max-width:420px}
.lgrow{grid-template-columns:repeat(2,minmax(0,1fr))}
.lgc:nth-child(3){border-left:0;padding-left:0}
.lgc:nth-child(3)::before{display:none}
.lgc:nth-child(3),.lgc:nth-child(4){border-top:1px solid var(--ln);margin-top:-1px}
.spgrid,.bsplit{grid-template-columns:minmax(0,1fr);gap:30px}
.spgrid>.spcopy,.spgrid.rev>.spcopy{order:2}
.swgrid{grid-template-columns:minmax(0,1fr);gap:14px}
.arw{transform:rotate(90deg);justify-self:center}
.qtgrid{grid-template-columns:minmax(0,1fr)}
.qtwho{flex-direction:row;align-items:center;gap:16px}
.chain{grid-template-columns:repeat(2,minmax(0,1fr))}
.swaps{grid-template-columns:repeat(2,minmax(0,1fr))}
.plans{grid-template-columns:repeat(2,minmax(0,1fr))}
.fgrid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:640px){
.phbody{padding:40px 20px 30px}
.ph .dsp{font-size:clamp(1.86rem,8.4vw,2.5rem);max-width:none}
.ph .lede{font-size:.84rem}
.phcta .btn{flex:1;justify-content:center}
.lgrow{grid-template-columns:minmax(0,1fr)}
.lgc,.lgc+.lgc{border-left:0;padding-left:0;padding-right:0;border-top:1px solid var(--ln);margin-top:-1px}
.lgc+.lgc::before{display:none}
.lgc:first-child{margin-top:0}
.lgc .v{font-size:2.5rem}
.lghead .side{margin-left:0}
.chip.c1{left:0;top:auto;bottom:62%}
.chip.c2{right:0;bottom:-2%}
.mtiles,.mstat{grid-template-columns:repeat(2,minmax(0,1fr))}
.posts,.guards,.chain,.chain.three,.plans,.swaps{grid-template-columns:minmax(0,1fr)}
.qtstats{gap:18px 26px}
.road .ri{flex-direction:column;gap:6px}
.ctaband{padding-left:20px;padding-right:20px}
.ctaband .inner{align-items:flex-start;text-align:left}
.ctaband .dsp,.ctaband .bd{max-width:none}
.fgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ══════════════════════════════════════════════════════════════════
SITE LAYER — added for the full-site build (WEBSITE/)
Overrides sit at the end of the file on purpose: later wins.
══════════════════════════════════════════════════════════════════ */
/* ── announcement label · replaces the pill ──────────────────────────
A masthead rule, not a capsule: signal bar, mono smallcaps, hairline
trailing off. No fill, no radius, no blinking dot. ── */
.promo{display:flex;align-items:center;gap:13px;width:100%;max-width:min(560px,100%);padding:0;background:none;border:0;border-radius:0;font:700 .625rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.9);animation:none}
.promo::before{content:'';width:2px;height:14px;background:var(--signal);flex:0 0 auto;border-radius:1px}
.promo::after{content:'';flex:1 1 auto;min-width:24px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.28),transparent)}
.promo em{display:none}
.promo u{text-decoration:none;color:var(--signal)}
.promo.ink{color:rgba(24,24,27,.72)}
.promo.ink::after{background:linear-gradient(90deg,var(--line-d),transparent)}
/* ══ STUB PAGES — the page exists, is linked, and states what copy it needs ══ */
.stub{background:var(--bone);padding:clamp(52px,7vw,92px) 0 clamp(56px,8vw,104px)}
.stubhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px;padding-bottom:26px;border-bottom:1px solid var(--line-d)}
.stubhead .dsp{max-width:20ch}
.stubgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,4vw,64px);margin-top:clamp(30px,4vw,48px);align-items:start}
.slab{font:700 .64rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.plan-list{list-style:none;counter-reset:s}
.plan-list li{counter-increment:s;display:flex;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);font-size:1rem;font-weight:600;letter-spacing:-.012em}
.plan-list li::before{content:counter(s,decimal-leading-zero);font:700 .68rem/1 var(--mono);letter-spacing:.1em;color:var(--faint);flex:0 0 22px}
.uniq{background:var(--night);color:#fff;border-radius:20px;padding:clamp(24px,2.8vw,34px);box-shadow:0 26px 60px -30px rgba(10,12,20,.7)}
.uniq .slab{color:rgba(255,255,255,.42);margin-bottom:14px}
.uniq p{font-size:1.06rem;line-height:1.5;font-weight:600;letter-spacing:-.018em;color:#fff;text-wrap:pretty}
.uniq .hair{height:1px;background:rgba(255,255,255,.14);margin:22px 0}
.uniq .cap{font-size:.86rem;line-height:1.6;color:rgba(255,255,255,.56)}
.asks{margin-top:clamp(34px,4.4vw,56px);padding-top:clamp(28px,3.4vw,40px);border-top:2px solid var(--ink)}
.askgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px;margin-top:20px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ask{background:var(--card);padding:18px 20px;display:flex;gap:13px;align-items:flex-start}
.ask i{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--signal);margin-top:7px}
.ask span{font-size:.94rem;line-height:1.5;font-weight:500;color:var(--ink);text-wrap:pretty}
.stubcta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:clamp(30px,3.6vw,44px)}
.stubcta .btn.primary{background:var(--ink);color:#fff}
.stubcta .btn.primary:hover{background:#000}
@media (max-width:900px){.stubgrid{grid-template-columns:1fr}.npg{grid-template-columns:1fr}}
@media (max-width:1080px){.npanel{display:none}}
/* ══ HUMAN SITEMAP (/sitemap) ══
Its own vocabulary rather than the footer's. The anatomy matches `.npg a`
— a label over its URL — but the colours cannot be reused: .npg is the dark
nav panel (white on ink) and .foot2 is bone-on-night, while this page is a
light band. Auto-fit rather than the stub page's fixed 2 columns, because
the section count comes from the tree and changes as pages ship. */
.smgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
gap:clamp(16px,2vw,24px);margin-top:clamp(26px,3.4vw,42px);align-items:start}
.smgroup{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
padding:clamp(16px,1.8vw,24px)}
.smgroup>.eb{margin-bottom:12px}
.smls{display:flex;flex-direction:column}
.smls a{display:flex;flex-direction:column;gap:1px;padding:7px 8px;margin:0 -8px;
border-radius:var(--r-sm);transition:background .14s,color .14s}
.smls a:hover{background:var(--bone)}
.smls a b{font-size:.88rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.smls a span{font:500 .6rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;
color:var(--faint)}
.smls a:hover span{color:var(--muted)}
/* pages that exist in the tree but are not built yet carry the signal dot,
the same marker the nav panel and footer use */
.smls a[data-soon] b::after{content:'';display:inline-block;width:4px;height:4px;
border-radius:50%;background:var(--signal);margin-left:6px;vertical-align:2px;opacity:.7}
.eb.ink{color:var(--signal)}
.ph .promo+.eb{margin-top:16px}
/* ════ CARD GRID (H3 feature cards) ════ */
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:2px;margin-top:clamp(26px,3.4vw,44px);background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cgrid>article{background:var(--card);padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:10px}
.cgrid h3{font-size:1.04rem;font-weight:700;letter-spacing:-.022em;line-height:1.25}
.cgrid p{font-size:.92rem;line-height:1.6;color:var(--muted);text-wrap:pretty}
.band.bone .cgrid{background:rgba(24,24,27,.12);border-color:rgba(24,24,27,.12)}
.band.bone .cgrid>article{background:#FBF8F2}
.sp.dk .cgrid,.band.night .cgrid{background:rgba(244,240,232,.12);border-color:rgba(244,240,232,.12)}
.sp.dk .cgrid>article,.band.night .cgrid>article{background:#12141C}
.sp.dk .cgrid h3,.band.night .cgrid h3{color:var(--bone)}
.sp.dk .cgrid p,.band.night .cgrid p{color:rgba(244,240,232,.62)}
/* ════ TIMELINE RAIL ════ */
.tline{list-style:none;counter-reset:t;margin-top:clamp(26px,3.4vw,44px);max-width:86ch}
.tline li{counter-increment:t;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;padding:0 0 24px 0}
.tline li::before{content:counter(t,decimal-leading-zero);font:700 .66rem/1 var(--mono);letter-spacing:.1em;color:var(--signal);width:24px;padding-top:5px}
.tline li::after{content:'';position:absolute;left:8px;top:20px;bottom:0;width:1px;background:var(--line-d)}
.tline li:last-child{padding-bottom:0}
.tline li:last-child::after{display:none}
.tline span{font-size:1rem;line-height:1.58;color:var(--ink);text-wrap:pretty}
.tline b{font-weight:700}
.sp.dk .tline span,.band.night .tline span{color:var(--bone)}
.sp.dk .tline li::after,.band.night .tline li::after{background:rgba(244,240,232,.16)}
/* ════ RELATED RAIL ════ */
.rel{background:var(--bone);padding:clamp(38px,4.6vw,64px) 0}
.relhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px;padding-bottom:16px;border-bottom:2px solid var(--ink)}
.relhead .dsp{font-size:clamp(1.2rem,1.9vw,1.6rem)}
.relgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px;margin-top:20px;background:rgba(24,24,27,.1);border:1px solid rgba(24,24,27,.1);border-radius:14px;overflow:hidden}
.relgrid a{background:#FBF8F2;padding:16px 18px;display:block;transition:background .15s}
.relgrid a:hover{background:#fff}
.relgrid b{display:block;font-size:.97rem;font-weight:700;letter-spacing:-.016em;color:var(--ink)}
.relgrid a:hover b{color:var(--ocean)}
.relgrid span{display:block;margin-top:4px;font:600 .68rem/1.4 var(--mono);letter-spacing:.06em;color:var(--faint)}
/* ════ GATE / VERIFY MARKERS ════ */
.gate{display:inline-flex;align-items:center;gap:7px;font:700 .58rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--signal)}
.gate::before{content:'';width:2px;height:11px;background:var(--signal)}
.vfy{background:var(--night);color:var(--bone);padding:clamp(34px,4.4vw,58px) 0}
.vfy .eb{color:var(--signal)}
.vfy .dsp{color:#fff;margin-top:12px}
.vfylist{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px;margin-top:22px;background:rgba(244,240,232,.12);border:1px solid rgba(244,240,232,.12);border-radius:14px;overflow:hidden}
.vfylist div{background:#12141C;padding:15px 18px;display:flex;gap:12px;align-items:flex-start;font-size:.9rem;line-height:1.52;color:rgba(244,240,232,.8)}
.vfylist i{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--signal);margin-top:7px}
@media (max-width:640px){.cgrid{grid-template-columns:1fr}}
/* hero H1 eyebrow takes the masthead rule: accent bar + trailing hairline.
Two things above the display line, never three. */
.ph h1.eb{display:flex;align-items:center;gap:13px;width:100%;max-width:min(600px,100%);margin-top:clamp(14px,1.6vw,18px);letter-spacing:.2em;color:rgba(255,255,255,.9)}
.ph h1.eb::before{content:'';flex:0 0 auto;width:2px;height:14px;border-radius:1px;background:var(--signal)}
.ph h1.eb::after{content:'';flex:1 1 auto;min-width:24px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.28),transparent)}
.ph.dk h1.eb{color:rgba(24,24,27,.78)}
.ph.dk h1.eb::after{background:linear-gradient(90deg,var(--line-d),transparent)}
.ph h1.eb+.dsp{margin-top:clamp(14px,1.8vw,20px)}
/* ════ PROSE SPLIT — copy one side, a framed product shot the other ════ */
.bsplit.rev>*:first-child{order:2}
.bsplit .scopy{max-width:56ch}
.shotwrap{position:relative}
.shotframe{background:var(--card);border:1px solid var(--line-d);border-radius:16px;overflow:hidden;box-shadow:0 28px 64px -36px rgba(24,24,27,.5),0 2px 5px rgba(24,24,27,.05)}
.shotframe .sfbar{display:flex;align-items:center;gap:6px;padding:10px 13px;border-bottom:1px solid var(--line);background:linear-gradient(#FDFDFE,#F7F7F9)}
.shotframe .sfbar i{width:9px;height:9px;border-radius:50%;background:#E1E1E5;flex:0 0 auto}
.shotframe .sfbar .u{margin-left:8px;flex:1;height:20px;border-radius:5px;background:rgba(24,24,27,.045);display:flex;align-items:center;padding:0 9px;font:600 .62rem/1 var(--mono);letter-spacing:.05em;color:var(--faint);white-space:nowrap;overflow:hidden}
.shotslot{position:relative;aspect-ratio:16/10;background:repeating-linear-gradient(135deg,rgba(24,24,27,.028) 0 10px,transparent 10px 20px),#F2F2F4;display:block}
.shotslot image-slot{position:absolute;inset:0;width:100%;height:100%}
.shotcap{display:flex;align-items:center;gap:9px;margin-top:13px;font:600 .63rem/1.4 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.shotcap::before{content:'';width:2px;height:11px;background:var(--signal);flex:0 0 auto;border-radius:1px}
.sp.dk .shotframe,.band.night .shotframe{background:#12141C;border-color:rgba(244,240,232,.14)}
.sp.dk .shotframe .sfbar,.band.night .shotframe .sfbar{background:rgba(255,255,255,.04);border-bottom-color:rgba(244,240,232,.1)}
.sp.dk .shotframe .sfbar i,.band.night .shotframe .sfbar i{background:rgba(244,240,232,.18)}
.sp.dk .shotframe .sfbar .u,.band.night .shotframe .sfbar .u{background:rgba(255,255,255,.05);color:rgba(244,240,232,.42)}
.sp.dk .shotslot,.band.night .shotslot{background:repeating-linear-gradient(135deg,rgba(244,240,232,.035) 0 10px,transparent 10px 20px),#0E1018}
.sp.dk .shotcap,.band.night .shotcap{color:rgba(244,240,232,.42)}
.band.bone .shotframe{background:#FBF8F2}
@media (max-width:900px){.bsplit{grid-template-columns:1fr}.bsplit.rev>*:first-child{order:0}}
/* ════ MID-PAGE TRIAL CTA — dark band with a sweeping light ════ */
.midcta{position:relative;isolation:isolate;overflow:hidden;background:#080A11;padding:clamp(46px,5.6vw,78px) 0;margin:0}
.midcta::before,.midcta::after{content:'';position:absolute;left:0;right:0;height:1px;z-index:3;background:linear-gradient(90deg,transparent,rgba(159,176,232,.42) 18%,rgba(238,242,255,.72) 50%,rgba(159,176,232,.42) 82%,transparent)}
.midcta::before{top:0}.midcta::after{bottom:0}
.midcta .sky{background:radial-gradient(70% 130% at 50% 118%,rgba(46,75,224,.34) 0%,rgba(46,75,224,.16) 26%,transparent 62%),radial-gradient(60% 80% at 50% -20%,rgba(46,75,224,.26),transparent 70%),linear-gradient(180deg,#0A0C14,#12141C)}
.midcta .rays{-webkit-mask-image:radial-gradient(52% 90% at 50% 100%,#000,transparent 78%);mask-image:radial-gradient(52% 90% at 50% 100%,#000,transparent 78%)}
.mcnum{position:absolute;right:-2.5%;bottom:-14%;z-index:1;font-size:clamp(190px,27vw,380px);font-weight:800;letter-spacing:-.075em;line-height:.72;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.07);pointer-events:none;-webkit-user-select:none;user-select:none}
.mcnum span{display:inline-block;background:linear-gradient(100deg,transparent 40%,rgba(159,176,232,.45) 47%,rgba(238,242,255,.9) 50%,rgba(46,75,224,.5) 54%,transparent 61%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:300% 100%;background-repeat:no-repeat;animation:mcsweep 6.3s linear infinite;will-change:background-position}
@keyframes mcsweep{0%{background-position:210% 50%}38%{background-position:-110% 50%}100%{background-position:-110% 50%}}
.mcinner{position:relative;z-index:4;display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,64px);flex-wrap:wrap;min-height:clamp(150px,15vw,210px)}
.mcinner .eb{color:var(--signal)}
.mcinner .dsp{color:#fff;margin-top:13px;max-width:17ch}
.mcinner .bd{color:rgba(255,255,255,.62);margin-top:13px;max-width:44ch}
.mcact{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.mcact .btn.primary{background:#fff;color:#12141C}
.mcact .btn.primary:hover{box-shadow:0 14px 34px rgba(109,130,240,.26)}
.mcact .micro{margin-top:0;color:rgba(255,255,255,.5)}
.mcdots{display:flex;gap:5px;margin-bottom:4px;padding:7px 11px;border-radius:999px;background:rgba(8,10,17,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1)}
.mcdots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.16);animation:mcfill 6.3s linear infinite;animation-delay:calc(var(--i) * .45s - 5.85s)}
@keyframes mcfill{0%,90%{background:rgba(255,255,255,.16)}95%{background:var(--signal);box-shadow:0 0 8px rgba(46,75,224,.7)}100%{background:rgba(255,255,255,.16)}}
@media (prefers-reduced-motion:reduce){.mcnum span,.mcdots i{animation:none}}
@media (max-width:760px){.mcinner{align-items:flex-start}.mcnum{opacity:.55}}
/* ════ DUO — consecutive prose sections pair up instead of running full width ════ */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(30px,3.6vw,60px);align-items:start}
.duo>div{position:relative;padding-top:22px;border-top:2px solid var(--ink)}
.duo>div .dsp{font-size:clamp(1.45rem,2.3vw,2.05rem);margin-top:13px;max-width:20ch}
.duo>div .bd{margin-top:13px}
.band.night .duo>div,.sp.dk .duo>div{border-top-color:rgba(244,240,232,.45)}
.duo .anchor{position:absolute;top:-90px}
.shotslot{aspect-ratio:16/10}
/* ════ LEGAL — long-form document with a sticky section index ════ */
.legal{background:var(--bone);padding:clamp(40px,5vw,72px) 0 clamp(60px,8vw,110px)}
.lgrid{display:grid;grid-template-columns:248px minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.lidx{position:sticky;top:26px;max-height:calc(100vh - 52px);overflow:auto;padding-right:8px}
.lidx .jl{font:700 .6rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:6px}
.lidx a{display:block;padding:7px 0;font-size:.845rem;line-height:1.35;font-weight:500;color:var(--muted);border-bottom:1px solid rgba(24,24,27,.08)}
.lidx a:hover{color:var(--ocean)}
.lidx a.on{color:var(--ink);font-weight:700}
.ldoc{max-width:78ch}
.ldoc h2{scroll-margin-top:26px;margin-top:clamp(34px,4vw,54px);padding-top:20px;border-top:2px solid var(--ink);font-size:clamp(1.28rem,2.1vw,1.72rem);font-weight:800;letter-spacing:-.03em;line-height:1.16}
.ldoc h2:first-of-type{margin-top:0}
.ldoc h3{margin-top:26px;font-size:1rem;font-weight:700;letter-spacing:-.015em}
.ldoc p{margin-top:14px;font-size:1rem;line-height:1.68;color:var(--muted);text-wrap:pretty}
.ldoc p b,.ldoc li b{color:var(--ink);font-weight:700}
.ldoc ul{margin-top:14px;list-style:none}
.ldoc ul li{position:relative;padding:7px 0 7px 20px;font-size:1rem;line-height:1.62;color:var(--muted);text-wrap:pretty}
.ldoc ul li::before{content:'';position:absolute;left:2px;top:16px;width:6px;height:1.5px;background:var(--signal)}
.ldoc .dl{margin-top:16px;display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ldoc .dl>div{background:#FBF8F2;padding:14px 17px;font-size:.95rem;line-height:1.6;color:var(--muted)}
.ldoc .dl b{display:block;color:var(--ink);font-weight:700;margin-bottom:3px}
.ldoc a{border-bottom:1px solid rgba(46,75,224,.3)}
.leff{display:inline-flex;align-items:center;gap:10px;font:700 .63rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-left:11px;border-left:2px solid var(--signal)}
@media (max-width:900px){.lgrid{grid-template-columns:1fr}.lidx{position:static;max-height:none;display:flex;flex-wrap:wrap;gap:0 16px;border-bottom:1px solid var(--line-d);padding-bottom:12px}.lidx .jl{width:100%;margin-bottom:2px}.lidx a{border:0;padding:5px 0;font-size:.8rem}}
/* legal notices and numbered sections */
.lnote{margin-top:18px;padding:18px 20px;border-left:2px solid var(--signal);background:rgba(46,75,224,.055);border-radius:0 10px 10px 0}
.lnote p{margin-top:0;color:var(--ink);font-size:.93rem;line-height:1.6;font-weight:500}
.lnote p+p{margin-top:11px}
.lnote .lt{display:block;font:700 .6rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--signal);margin-bottom:10px}
.ldoc .caps{font-size:.87rem;line-height:1.62;letter-spacing:.005em;color:var(--muted)}
.ldoc h2 .n{display:block;font:700 .6rem/1 var(--mono);letter-spacing:.18em;color:var(--signal);margin-bottom:9px}
.lidx a .n{font:700 .58rem/1 var(--mono);letter-spacing:.1em;color:var(--faint);margin-right:7px}
/* the rounded CTA sits flush against the block above it: no empty band */
.ctawrap{padding-top:0;background:transparent}
.rel+.ctawrap .ctaband,.band+.ctawrap .ctaband,.sp+.ctawrap .ctaband{margin-top:0}
/* build notes: a collapsed strip under the CTA, not a section pretending to be content */
.vstrip{background:#0A0C14;border-top:1px solid rgba(244,240,232,.1);color:var(--bone)}
.vstrip summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;max-width:1440px;margin:0 auto;padding:16px clamp(20px,3.6vw,54px)}
.vstrip summary::-webkit-details-marker{display:none}
.vstrip .vt{font:700 .6rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--signal);padding-left:11px;border-left:2px solid var(--signal);flex:0 0 auto}
.vstrip summary b{font-size:.88rem;font-weight:600;color:rgba(244,240,232,.66)}
.vstrip summary:hover b{color:#fff}
.vstrip .vx{margin-left:auto;width:8px;height:8px;border-right:1.5px solid rgba(244,240,232,.45);border-bottom:1.5px solid rgba(244,240,232,.45);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.vstrip[open] .vx{transform:rotate(-135deg) translate(-2px,-2px)}
.vwrap{max-width:1440px;margin:0 auto;padding:0 clamp(20px,3.6vw,54px) 26px}
.vstrip .vfylist{margin-top:0}
/* ════ COMPARISON TABLE ════ */
.ctable{margin-top:clamp(24px,3vw,40px);overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.ctable table{width:100%;border-collapse:collapse;min-width:620px}
.ctable th{text-align:left;padding:14px 18px;font:700 .62rem/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line-d);white-space:nowrap;vertical-align:bottom}
.ctable th:last-child{color:var(--signal)}
.ctable td{padding:15px 18px;font-size:.92rem;line-height:1.55;color:var(--muted);border-bottom:1px solid var(--line);vertical-align:top;text-wrap:pretty}
.ctable tr:last-child td{border-bottom:0}
.ctable td:first-child{color:var(--ink);font-weight:700;white-space:nowrap}
.ctable td:last-child{background:rgba(46,75,224,.04);color:var(--ink)}
.band.bone .ctable{background:#FBF8F2}
/* ════ GATED BLOCK — an authored section still waiting on a number ════ */
.gaterow{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px;margin-top:clamp(22px,2.6vw,34px);background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.gate-item{background:var(--card);padding:18px 20px}
.band.bone .gate-item{background:#FBF8F2}
.gate-item .gl{display:block;font:700 .6rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--signal);padding-left:10px;border-left:2px solid var(--signal);margin-bottom:11px}
.gate-item p{font-size:.93rem;line-height:1.6;color:var(--muted);text-wrap:pretty}
@media (max-width:640px){.ctable{border-radius:12px}}
/* confirmed this round — spot-check marker */
.conf{background:rgba(31,138,91,.1);border-radius:4px;padding:1px 5px;box-shadow:inset 0 -1.5px 0 rgba(31,138,91,.45)}
/* ════ PLANS ════ */
.pricehead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.curswitch{display:flex;gap:3px;background:rgba(24,24,27,.055);border-radius:10px;padding:3px}
.curswitch button{border:0;background:transparent;font:700 .7rem/1 'Public Sans';color:var(--muted);padding:8px 14px;border-radius:7px;cursor:pointer;transition:background .15s,color .15s}
.curswitch button[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(24,24,27,.1)}
.billswitch{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-size:.86rem;color:var(--muted)}
.billswitch button{border:0;cursor:pointer;width:44px;height:24px;border-radius:999px;background:rgba(24,24,27,.14);position:relative;transition:background .18s}
.billswitch button[aria-pressed=true]{background:var(--ocean)}
.billswitch button::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .18s}
.billswitch button[aria-pressed=true]::after{transform:translateX(20px)}
.billswitch em{font-style:normal;font-weight:700;color:var(--green);font-size:.78rem}
/* The product-line switch reuses .curswitch's shape (same two-button group,
same aria-pressed contract) and only sizes up, because it is the primary
choice on the page rather than a display preference. */
.lineswitch{margin-bottom:10px}
.lineswitch button{font-size:.78rem;padding:9px 18px;letter-spacing:-.01em}
.tiernote{margin-top:16px;font-size:.86rem;line-height:1.55;color:var(--muted);text-wrap:pretty}
.tiernote a{font-weight:700}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px;margin-top:clamp(26px,3.2vw,42px);background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.tier{background:var(--card);padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column;gap:12px}
.tier.hot{background:var(--night);color:var(--bone)}
.tier .tn{display:flex;align-items:center;gap:9px;font-size:1.02rem;font-weight:800;letter-spacing:-.022em}
/* The badge is an — _blocks.html has emitted one since the tier cards
started rendering from tier data. This rule said `span`, so it matched
nothing and "First 100" rendered as plain italic body text. `em` also needs
font-style reset, which a span never did. */
.tier .tn em{font:700 .53rem/1 var(--mono);font-style:normal;letter-spacing:.13em;text-transform:uppercase;color:var(--signal);background:rgba(46,75,224,.12);padding:4px 7px;border-radius:4px;white-space:nowrap}
.tier .tn em.gone{color:var(--muted);background:rgba(24,24,27,.08)}
.tier.hot .tn em{color:var(--bone);background:rgba(244,240,232,.14)}
.tier.hot .tn em.gone{color:rgba(244,240,232,.6);background:rgba(244,240,232,.1)}
/* The free-tier countdown: how much of the promotion is gone. */
.tier .tpromo{display:flex;flex-direction:column;gap:6px;margin-top:-4px}
.tier .tpromo span{font:600 .58rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.tier.hot .tpromo span{color:rgba(244,240,232,.5)}
.tier .tpbar{height:4px;border-radius:999px;background:rgba(24,24,27,.1);overflow:hidden}
.tier.hot .tpbar{background:rgba(244,240,232,.16)}
.tier .tpbar i{display:block;height:100%;border-radius:999px;background:var(--signal)}
.tier.soldout .tp{opacity:.55}
.tier .tp{display:flex;align-items:baseline;gap:3px;font-size:2rem;font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.tier .tp u{text-decoration:none;font-size:.42em;font-weight:700;color:var(--muted);letter-spacing:0}
.tier.hot .tp u{color:rgba(244,240,232,.6)}
.tier .tu{font:700 .6rem/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.tier.hot .tu{color:rgba(244,240,232,.5)}
.tier .td{font-size:.88rem;line-height:1.55;color:var(--muted);text-wrap:pretty}
.tier.hot .td{color:rgba(244,240,232,.66)}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:2px}
.tier li{display:flex;gap:9px;align-items:flex-start;font-size:.86rem;line-height:1.45;color:var(--muted)}
.tier.hot li{color:rgba(244,240,232,.78)}
.tier li em{flex:0 0 auto;width:14px;height:14px;border-radius:50%;background:rgba(46,75,224,.13);color:var(--ocean);display:flex;align-items:center;justify-content:center;margin-top:2px}
.tier.hot li em{background:rgba(95,211,155,.16);color:var(--green-lt)}
.tier li em svg{width:9px;height:9px}
.tier .tb{margin-top:auto;padding-top:6px}
.tier .tb .btn{width:100%;justify-content:center;background:rgba(24,24,27,.06);color:var(--ink)}
.tier.hot .tb .btn{background:#fff;color:#12141C}
.tier .tb .btn:hover{background:var(--ocean);color:#fff}
.pricefoot{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-d);font-size:.85rem;color:var(--muted)}
.pricefoot b{color:var(--ink);font-weight:700}
@media (max-width:900px){.tiers{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
/* the closing band: ghost button has to read on a dark surface */
.ctaband .btn.primary{background:#fff;color:#12141C}
.ctaband .btn.primary:hover{background:#fff;color:#12141C;box-shadow:0 14px 34px rgba(109,130,240,.26)}
.ctaband .btn.ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff}
.ctaband .btn.ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:#fff}
.ctaband .inner .bd{color:rgba(255,255,255,.62);max-width:56ch;margin-top:14px}
.ctaband .inner .phcta{margin-top:26px}
/* belt and braces: no two dark blocks may sit against each other */
.sp.dk+.midcta,.midcta+.sp.dk{border-top:1px solid rgba(255,255,255,.12)}
.midcta+.ctawrap .ctaband,.sp.dk+.ctawrap .ctaband{border-radius:0}
.shotwrap.wide{margin-top:clamp(26px,3.2vw,42px);max-width:760px}
/* ════ HELP CENTRE ════ */
.hsearch{display:flex;align-items:center;gap:12px;max-width:640px;margin-top:clamp(22px,2.6vw,32px);background:var(--card);border:1px solid var(--line-d);border-radius:999px;padding:14px 22px;box-shadow:0 14px 34px -22px rgba(24,24,27,.4)}
.hsearch svg{width:17px;height:17px;color:var(--faint);flex:0 0 auto}
.hsearch input{flex:1;border:0;background:none;font:500 .96rem/1 'Public Sans';color:var(--ink);outline:0}
.hsearch input::placeholder{color:var(--faint)}
.hgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:2px;margin-top:clamp(26px,3.2vw,42px);background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.hcard{background:var(--card);padding:clamp(20px,2.2vw,26px);display:block;transition:background .15s}
.hcard:hover{background:#fff}
.hcard h3{font-size:1.02rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.hcard:hover h3{color:var(--ocean)}
.hcard p{margin-top:7px;font-size:.9rem;line-height:1.55;color:var(--muted)}
.hcard .n{display:block;margin-top:11px;font:700 .58rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.human{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;margin-top:clamp(26px,3vw,40px);background:rgba(244,240,232,.12);border:1px solid rgba(244,240,232,.12);border-radius:16px;overflow:hidden}
.human>div{background:#12141C;padding:20px 22px}
.human .hk{display:block;font:700 .58rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--signal);margin-bottom:9px}
.human b{display:block;font-size:1.05rem;font-weight:700;color:#fff;letter-spacing:-.02em}
.human span:not(.hk){display:block;margin-top:6px;font-size:.86rem;line-height:1.5;color:rgba(244,240,232,.6)}
/* ════ CALCULATOR ════ */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);gap:clamp(28px,4vw,60px);margin-top:clamp(26px,3.2vw,44px);align-items:start}
.cfields{display:flex;flex-direction:column;gap:22px}
.cf label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:.92rem;font-weight:600;color:var(--ink)}
.cf label b{font:700 1rem/1 var(--mono);letter-spacing:-.01em;color:var(--ocean);font-variant-numeric:tabular-nums}
.cf input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;margin-top:12px;border-radius:2px;background:var(--line-d);outline:0}
.cf input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--ocean);border:3px solid #fff;box-shadow:0 2px 8px rgba(24,24,27,.28);cursor:pointer}
.cf input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--ocean);border:3px solid #fff;cursor:pointer}
.cf .cx{margin-top:7px;font-size:.82rem;color:var(--muted)}
.cout{background:var(--night);color:#fff;border-radius:20px;padding:clamp(24px,2.8vw,32px);box-shadow:0 26px 60px -30px rgba(10,12,20,.7)}
.cout .ck{display:block;font:700 .58rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--signal);margin-bottom:12px}
.cbig{font-size:clamp(2.4rem,5vw,3.4rem);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.csub{margin-top:10px;font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.6)}
.crow{display:flex;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font-size:.86rem;color:rgba(255,255,255,.66)}
.crow b{color:#fff;font-variant-numeric:tabular-nums}
.cout .btn{width:100%;justify-content:center;margin-top:20px;background:#fff;color:#12141C}
.cnote{margin-top:14px;font-size:.78rem;line-height:1.5;color:rgba(255,255,255,.44)}
@media (max-width:900px){.calc{grid-template-columns:1fr}}
/* channels block on a light surface */
.band.bone .human{background:rgba(24,24,27,.1);border-color:rgba(24,24,27,.1)}
.band.bone .human>div{background:#FBF8F2}
.band.bone .human b{color:var(--ink)}
.band.bone .human b a{color:var(--ocean)}
.band.bone .human span:not(.hk){color:var(--muted)}
/* ════ CONTACT FORM ════ */
.cform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;margin-top:clamp(24px,3vw,36px);max-width:720px}
.cfrow{display:flex;flex-direction:column;gap:7px}
.cfrow.wide,.cfoot{grid-column:1/-1}
.cfrow label{font-size:.86rem;font-weight:600;color:var(--ink)}
.cfrow label span{font-weight:500;color:var(--faint)}
.cfrow input,.cfrow select,.cfrow textarea{font:500 .96rem/1.45 'Public Sans';color:var(--ink);background:var(--card);border:1px solid var(--line-d);border-radius:var(--r-sm);padding:12px 14px;outline:0;transition:border-color .15s,box-shadow .15s}
.cfrow textarea{resize:vertical;min-height:118px}
.cfrow input:focus,.cfrow select:focus,.cfrow textarea:focus{border-color:var(--ocean);box-shadow:0 0 0 3px rgba(46,75,224,.14)}
.cfrow input::placeholder,.cfrow textarea::placeholder{color:var(--faint)}
.cfoot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:2px}
.cfoot .micro{margin:0}
.ftoast{grid-column:1/-1;margin:0;padding:13px 16px;border-radius:var(--r-sm);font-size:.9rem;font-weight:600;background:rgba(31,138,91,.1);color:var(--green);border:1px solid rgba(31,138,91,.24)}
.ftoast[data-err]{background:rgba(196,67,63,.1);color:#96302C;border-color:rgba(196,67,63,.28)}
@media (max-width:640px){.cform{grid-template-columns:1fr}}
/* ── help: contact row in the hero, search empty state ── */
.hrow{display:flex;flex-wrap:wrap;gap:2px;margin-top:clamp(22px,2.6vw,30px);background:rgba(244,240,232,.14);border:1px solid rgba(244,240,232,.14);border-radius:14px;overflow:hidden;max-width:760px}
.hrow>*{flex:1 1 200px;background:rgba(12,14,22,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:14px 17px;display:block;transition:background .15s}
.hrow>a:hover{background:rgba(12,14,22,.75)}
.hrow .hk{display:block;font:700 .56rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--signal);margin-bottom:7px}
.hrow b{display:block;font-size:.95rem;font-weight:700;color:#fff;letter-spacing:-.016em}
.hrow em{display:block;margin-top:5px;font-style:normal}
.hempty{margin-top:16px;font-size:.94rem;color:var(--muted)}
.hcard .n{color:var(--signal)}
/* ── calculator: assumption note, advanced field, formula line, fix block ── */
.asmp{font-size:.86rem;line-height:1.55;color:var(--muted);padding-left:13px;border-left:2px solid var(--signal);margin-bottom:6px;text-wrap:pretty}
.adv{border-top:1px solid var(--line);padding-top:16px}
.adv>summary{cursor:pointer;list-style:none;font:700 .62rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:9px}
.adv>summary::-webkit-details-marker{display:none}
.adv>summary::before{content:'+';font-size:1rem;line-height:1;color:var(--signal)}
.adv[open]>summary::before{content:'\2212'}
.adv>summary:hover{color:var(--ink)}
.adv .cf{margin-top:16px}
.cform-line{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font:600 .78rem/1.5 var(--mono);letter-spacing:.02em;color:rgba(255,255,255,.62);text-wrap:pretty}
.cfix{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.cfix p{font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.72);margin-bottom:14px}
.cfix .btn{width:100%;justify-content:center}
.cfix .btn.primary{background:#fff;color:#12141C}
.cfix .btn.ghost.light{margin-top:8px;border-color:rgba(255,255,255,.28);color:#fff}
.cfix .btn.ghost.light:hover{background:rgba(255,255,255,.1)}
.cshare{margin-top:16px;width:100%;border:0;background:none;padding:0;text-align:left;font:700 .6rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.5);cursor:pointer}
.cshare:hover{color:#fff}
/* ════ SOFTWARE COST CALCULATOR ════ */
.pricebanner{display:block;padding:15px 19px;margin-bottom:clamp(22px,2.6vw,32px);background:rgba(46,75,224,.08);border:1px solid rgba(46,75,224,.26);border-radius:var(--r-md);font-size:.9rem;line-height:1.55;color:var(--ink);text-wrap:pretty}
.pricebanner code{font:600 .84rem/1 var(--mono);background:rgba(24,24,27,.07);padding:2px 5px;border-radius:3px}
.tco{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,56px);align-items:start}
.tcoinputs{display:flex;flex-direction:column;gap:22px}
.tcofeat .slab{display:block;margin-bottom:12px}
.togs{display:flex;flex-direction:column;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.tog{display:flex;align-items:center;gap:11px;background:var(--card);padding:11px 15px;cursor:pointer;transition:background .14s}
.tog:hover{background:#fff}
.tog input{appearance:none;-webkit-appearance:none;width:17px;height:17px;flex:0 0 auto;border:1.5px solid var(--line-d);border-radius:4px;background:#fff;cursor:pointer;position:relative;transition:background .14s,border-color .14s}
.tog input:checked{background:var(--ocean);border-color:var(--ocean)}
.tog input:checked::after{content:'';position:absolute;left:4.5px;top:1.5px;width:5px;height:9px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}
.tog span{font-size:.92rem;font-weight:600;color:var(--ink);letter-spacing:-.012em}
.billtog{display:inline-flex;gap:3px;background:rgba(24,24,27,.055);border-radius:10px;padding:3px;align-self:flex-start}
.billtog button{border:0;background:transparent;font:600 .8rem/1 'Public Sans';color:var(--muted);padding:9px 16px;border-radius:8px;cursor:pointer;transition:background .15s,color .15s}
.billtog button[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(24,24,27,.1)}
.tcoout{display:flex;flex-direction:column;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.tcorow{background:var(--card);padding:clamp(18px,2vw,24px)}
.tcorow.flat{background:var(--night);color:#fff}
.tv{display:flex;align-items:center;gap:10px;font-size:1.02rem;font-weight:700;letter-spacing:-.02em}
.tcorow.flat .tv{color:#fff}
.fb{font:700 .55rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.tt{margin-top:6px;font-size:clamp(1.6rem,3vw,2.1rem);font-weight:800;letter-spacing:-.042em;line-height:1;font-variant-numeric:tabular-nums}
.tt em{font-size:.42em;font-weight:600;font-style:normal;letter-spacing:-.01em;color:var(--faint);margin-left:3px}
.tcorow.flat .tt em{color:rgba(255,255,255,.5)}
.tt .na{font-size:.5em;font-weight:700;letter-spacing:-.01em;color:var(--muted)}
.tw{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:5px}
.tw li{font-size:.85rem;line-height:1.5;color:var(--muted);padding-left:13px;position:relative}
.tw li::before{content:'';position:absolute;left:0;top:8px;width:5px;height:1px;background:var(--faint)}
.tcorow.flat .tw li{color:rgba(255,255,255,.62)}
.tcorow.flat .tw li::before{background:rgba(255,255,255,.4)}
.tw li.good{color:var(--green);font-weight:600}
.tcorow.flat .tw li.good{color:#6FD3A2}
.tw li.warn{color:#B24A17}
.tcofoot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:clamp(20px,2.4vw,30px);padding-top:16px;border-top:1px solid var(--line-d);font:600 .74rem/1.5 var(--mono);letter-spacing:.06em;color:var(--faint)}
.cshare.dark{width:auto;margin:0;color:var(--ocean)}
.cshare.dark:hover{color:#2C46B0}
.corr{font:600 .74rem/1.5 var(--mono);letter-spacing:.06em;margin-left:auto}
@media (max-width:900px){.tco{grid-template-columns:1fr}.corr{margin-left:0}}
/* ── related rail home card: same height as its siblings, the word HOME flush in the
top-right corner with no padding of its own, and the mark bled into the glow.
Hover only shifts opacity, so it never repaints white or grows the row. ── */
.relgrid .relhome{position:relative;overflow:hidden;background:var(--night)}
.relgrid .relhome::before{content:'';position:absolute;inset:0;background:
radial-gradient(120% 90% at 78% 118%,rgba(46,75,224,.5),transparent 62%),
radial-gradient(90% 70% at 12% 108%,rgba(109,130,240,.34),transparent 66%);
pointer-events:none;transition:opacity .18s}
.relgrid .relhome:hover{background:var(--night)}
.relgrid .relhome:hover::before{opacity:.7}
.relgrid .relhome>b,.relgrid .relhome>.rhs{position:relative}
.relgrid .relhome b{color:#fff}
.relgrid .relhome:hover b{color:#fff}
.relgrid .relhome .rhs{color:rgba(255,255,255,.58)}
.relgrid .relhome .rhtag{position:absolute;top:0;right:0;margin:0;padding:0;line-height:1;font:700 .56rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.42);transition:color .18s}
.relgrid .relhome:hover .rhtag{color:var(--signal)}
.relgrid .relhome .rhmark{position:absolute;bottom:-26px;right:-16px;width:64px;height:64px;margin:0;color:rgba(255,255,255,.13);pointer-events:none;transition:color .18s}
.rhmark svg{width:100%;height:100%;display:block}
.relgrid .relhome:hover .rhmark{color:rgba(255,255,255,.22)}
/* ════ GRID ROWS ALWAYS FILL ════
These grids draw their hairlines by letting a background show through a 2px gap,
so an incomplete last row reads as a grey slab. Column count comes from the card
count instead of auto-fit, and the last card spans any leftover columns.
Any new grid built on that hairline trick must be added to this selector list. */
@media (min-width:1000px){
.cgrid[data-n="1"],.hgrid[data-n="1"],.askgrid[data-n="1"],.human[data-n="1"],.relgrid[data-n="1"],.gaterow[data-n="1"],.vfylist[data-n="1"]{grid-template-columns:repeat(1,minmax(0,1fr))}
.cgrid[data-n="2"],.hgrid[data-n="2"],.askgrid[data-n="2"],.human[data-n="2"],.relgrid[data-n="2"],.gaterow[data-n="2"],.vfylist[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.cgrid[data-n="3"],.hgrid[data-n="3"],.askgrid[data-n="3"],.human[data-n="3"],.relgrid[data-n="3"],.gaterow[data-n="3"],.vfylist[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.cgrid[data-n="4"],.hgrid[data-n="4"],.askgrid[data-n="4"],.human[data-n="4"],.relgrid[data-n="4"],.gaterow[data-n="4"],.vfylist[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.cgrid[data-n="5"],.hgrid[data-n="5"],.askgrid[data-n="5"],.human[data-n="5"],.relgrid[data-n="5"],.gaterow[data-n="5"],.vfylist[data-n="5"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.cgrid[data-n="5"]>:last-child,.hgrid[data-n="5"]>:last-child,.askgrid[data-n="5"]>:last-child,.human[data-n="5"]>:last-child,.relgrid[data-n="5"]>:last-child,.gaterow[data-n="5"]>:last-child,.vfylist[data-n="5"]>:last-child{grid-column:span 2}
.cgrid[data-n="6"],.hgrid[data-n="6"],.askgrid[data-n="6"],.human[data-n="6"],.relgrid[data-n="6"],.gaterow[data-n="6"],.vfylist[data-n="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.cgrid[data-n="7"],.hgrid[data-n="7"],.askgrid[data-n="7"],.human[data-n="7"],.relgrid[data-n="7"],.gaterow[data-n="7"],.vfylist[data-n="7"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.cgrid[data-n="7"]>:last-child,.hgrid[data-n="7"]>:last-child,.askgrid[data-n="7"]>:last-child,.human[data-n="7"]>:last-child,.relgrid[data-n="7"]>:last-child,.gaterow[data-n="7"]>:last-child,.vfylist[data-n="7"]>:last-child{grid-column:span 2}
.cgrid[data-n="8"],.hgrid[data-n="8"],.askgrid[data-n="8"],.human[data-n="8"],.relgrid[data-n="8"],.gaterow[data-n="8"],.vfylist[data-n="8"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.cgrid[data-n="9"],.hgrid[data-n="9"],.askgrid[data-n="9"],.human[data-n="9"],.relgrid[data-n="9"],.gaterow[data-n="9"],.vfylist[data-n="9"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.cgrid[data-n="10"],.hgrid[data-n="10"],.askgrid[data-n="10"],.human[data-n="10"],.relgrid[data-n="10"],.gaterow[data-n="10"],.vfylist[data-n="10"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.cgrid[data-n="10"]>:last-child,.hgrid[data-n="10"]>:last-child,.askgrid[data-n="10"]>:last-child,.human[data-n="10"]>:last-child,.relgrid[data-n="10"]>:last-child,.gaterow[data-n="10"]>:last-child,.vfylist[data-n="10"]>:last-child{grid-column:span 3}
.cgrid[data-n="11"],.hgrid[data-n="11"],.askgrid[data-n="11"],.human[data-n="11"],.relgrid[data-n="11"],.gaterow[data-n="11"],.vfylist[data-n="11"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.cgrid[data-n="11"]>:last-child,.hgrid[data-n="11"]>:last-child,.askgrid[data-n="11"]>:last-child,.human[data-n="11"]>:last-child,.relgrid[data-n="11"]>:last-child,.gaterow[data-n="11"]>:last-child,.vfylist[data-n="11"]>:last-child{grid-column:span 2}
.cgrid[data-n="12"],.hgrid[data-n="12"],.askgrid[data-n="12"],.human[data-n="12"],.relgrid[data-n="12"],.gaterow[data-n="12"],.vfylist[data-n="12"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.cgrid[data-n="13"],.hgrid[data-n="13"],.askgrid[data-n="13"],.human[data-n="13"],.relgrid[data-n="13"],.gaterow[data-n="13"],.vfylist[data-n="13"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.cgrid[data-n="13"]>:last-child,.hgrid[data-n="13"]>:last-child,.askgrid[data-n="13"]>:last-child,.human[data-n="13"]>:last-child,.relgrid[data-n="13"]>:last-child,.gaterow[data-n="13"]>:last-child,.vfylist[data-n="13"]>:last-child{grid-column:span 4}
.cgrid[data-n="14"],.hgrid[data-n="14"],.askgrid[data-n="14"],.human[data-n="14"],.relgrid[data-n="14"],.gaterow[data-n="14"],.vfylist[data-n="14"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.cgrid[data-n="14"]>:last-child,.hgrid[data-n="14"]>:last-child,.askgrid[data-n="14"]>:last-child,.human[data-n="14"]>:last-child,.relgrid[data-n="14"]>:last-child,.gaterow[data-n="14"]>:last-child,.vfylist[data-n="14"]>:last-child{grid-column:span 3}
.cgrid[data-n="15"],.hgrid[data-n="15"],.askgrid[data-n="15"],.human[data-n="15"],.relgrid[data-n="15"],.gaterow[data-n="15"],.vfylist[data-n="15"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.cgrid[data-n="15"]>:last-child,.hgrid[data-n="15"]>:last-child,.askgrid[data-n="15"]>:last-child,.human[data-n="15"]>:last-child,.relgrid[data-n="15"]>:last-child,.gaterow[data-n="15"]>:last-child,.vfylist[data-n="15"]>:last-child{grid-column:span 2}
.cgrid[data-n="16"],.hgrid[data-n="16"],.askgrid[data-n="16"],.human[data-n="16"],.relgrid[data-n="16"],.gaterow[data-n="16"],.vfylist[data-n="16"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.cgrid[data-n="17"],.hgrid[data-n="17"],.askgrid[data-n="17"],.human[data-n="17"],.relgrid[data-n="17"],.gaterow[data-n="17"],.vfylist[data-n="17"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.cgrid[data-n="17"]>:last-child,.hgrid[data-n="17"]>:last-child,.askgrid[data-n="17"]>:last-child,.human[data-n="17"]>:last-child,.relgrid[data-n="17"]>:last-child,.gaterow[data-n="17"]>:last-child,.vfylist[data-n="17"]>:last-child{grid-column:span 4}
.cgrid[data-n="18"],.hgrid[data-n="18"],.askgrid[data-n="18"],.human[data-n="18"],.relgrid[data-n="18"],.gaterow[data-n="18"],.vfylist[data-n="18"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.cgrid[data-n="18"]>:last-child,.hgrid[data-n="18"]>:last-child,.askgrid[data-n="18"]>:last-child,.human[data-n="18"]>:last-child,.relgrid[data-n="18"]>:last-child,.gaterow[data-n="18"]>:last-child,.vfylist[data-n="18"]>:last-child{grid-column:span 3}
.cgrid[data-n="19"],.hgrid[data-n="19"],.askgrid[data-n="19"],.human[data-n="19"],.relgrid[data-n="19"],.gaterow[data-n="19"],.vfylist[data-n="19"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.cgrid[data-n="19"]>:last-child,.hgrid[data-n="19"]>:last-child,.askgrid[data-n="19"]>:last-child,.human[data-n="19"]>:last-child,.relgrid[data-n="19"]>:last-child,.gaterow[data-n="19"]>:last-child,.vfylist[data-n="19"]>:last-child{grid-column:span 2}
.cgrid[data-n="20"],.hgrid[data-n="20"],.askgrid[data-n="20"],.human[data-n="20"],.relgrid[data-n="20"],.gaterow[data-n="20"],.vfylist[data-n="20"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.cgrid[data-n="21"],.hgrid[data-n="21"],.askgrid[data-n="21"],.human[data-n="21"],.relgrid[data-n="21"],.gaterow[data-n="21"],.vfylist[data-n="21"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.cgrid[data-n="21"]>:last-child,.hgrid[data-n="21"]>:last-child,.askgrid[data-n="21"]>:last-child,.human[data-n="21"]>:last-child,.relgrid[data-n="21"]>:last-child,.gaterow[data-n="21"]>:last-child,.vfylist[data-n="21"]>:last-child{grid-column:span 4}
.cgrid[data-n="22"],.hgrid[data-n="22"],.askgrid[data-n="22"],.human[data-n="22"],.relgrid[data-n="22"],.gaterow[data-n="22"],.vfylist[data-n="22"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.cgrid[data-n="22"]>:last-child,.hgrid[data-n="22"]>:last-child,.askgrid[data-n="22"]>:last-child,.human[data-n="22"]>:last-child,.relgrid[data-n="22"]>:last-child,.gaterow[data-n="22"]>:last-child,.vfylist[data-n="22"]>:last-child{grid-column:span 3}
.cgrid[data-n="23"],.hgrid[data-n="23"],.askgrid[data-n="23"],.human[data-n="23"],.relgrid[data-n="23"],.gaterow[data-n="23"],.vfylist[data-n="23"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.cgrid[data-n="23"]>:last-child,.hgrid[data-n="23"]>:last-child,.askgrid[data-n="23"]>:last-child,.human[data-n="23"]>:last-child,.relgrid[data-n="23"]>:last-child,.gaterow[data-n="23"]>:last-child,.vfylist[data-n="23"]>:last-child{grid-column:span 2}
.cgrid[data-n="24"],.hgrid[data-n="24"],.askgrid[data-n="24"],.human[data-n="24"],.relgrid[data-n="24"],.gaterow[data-n="24"],.vfylist[data-n="24"]{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:641px) and (max-width:999px){
.cgrid[data-n],.hgrid[data-n],.askgrid[data-n],.human[data-n],.relgrid[data-n],.gaterow[data-n],.vfylist[data-n]{grid-template-columns:repeat(2,minmax(0,1fr))}
.cgrid[data-n]>:last-child,.hgrid[data-n]>:last-child,.askgrid[data-n]>:last-child,.human[data-n]>:last-child,.relgrid[data-n]>:last-child,.gaterow[data-n]>:last-child,.vfylist[data-n]>:last-child{grid-column:auto}
.cgrid[data-n="1"]>:last-child,.hgrid[data-n="1"]>:last-child,.askgrid[data-n="1"]>:last-child,.human[data-n="1"]>:last-child,.relgrid[data-n="1"]>:last-child,.gaterow[data-n="1"]>:last-child,.vfylist[data-n="1"]>:last-child,.cgrid[data-n="3"]>:last-child,.hgrid[data-n="3"]>:last-child,.askgrid[data-n="3"]>:last-child,.human[data-n="3"]>:last-child,.relgrid[data-n="3"]>:last-child,.gaterow[data-n="3"]>:last-child,.vfylist[data-n="3"]>:last-child,.cgrid[data-n="5"]>:last-child,.hgrid[data-n="5"]>:last-child,.askgrid[data-n="5"]>:last-child,.human[data-n="5"]>:last-child,.relgrid[data-n="5"]>:last-child,.gaterow[data-n="5"]>:last-child,.vfylist[data-n="5"]>:last-child,.cgrid[data-n="7"]>:last-child,.hgrid[data-n="7"]>:last-child,.askgrid[data-n="7"]>:last-child,.human[data-n="7"]>:last-child,.relgrid[data-n="7"]>:last-child,.gaterow[data-n="7"]>:last-child,.vfylist[data-n="7"]>:last-child,.cgrid[data-n="9"]>:last-child,.hgrid[data-n="9"]>:last-child,.askgrid[data-n="9"]>:last-child,.human[data-n="9"]>:last-child,.relgrid[data-n="9"]>:last-child,.gaterow[data-n="9"]>:last-child,.vfylist[data-n="9"]>:last-child,.cgrid[data-n="11"]>:last-child,.hgrid[data-n="11"]>:last-child,.askgrid[data-n="11"]>:last-child,.human[data-n="11"]>:last-child,.relgrid[data-n="11"]>:last-child,.gaterow[data-n="11"]>:last-child,.vfylist[data-n="11"]>:last-child,.cgrid[data-n="13"]>:last-child,.hgrid[data-n="13"]>:last-child,.askgrid[data-n="13"]>:last-child,.human[data-n="13"]>:last-child,.relgrid[data-n="13"]>:last-child,.gaterow[data-n="13"]>:last-child,.vfylist[data-n="13"]>:last-child,.cgrid[data-n="15"]>:last-child,.hgrid[data-n="15"]>:last-child,.askgrid[data-n="15"]>:last-child,.human[data-n="15"]>:last-child,.relgrid[data-n="15"]>:last-child,.gaterow[data-n="15"]>:last-child,.vfylist[data-n="15"]>:last-child,.cgrid[data-n="17"]>:last-child,.hgrid[data-n="17"]>:last-child,.askgrid[data-n="17"]>:last-child,.human[data-n="17"]>:last-child,.relgrid[data-n="17"]>:last-child,.gaterow[data-n="17"]>:last-child,.vfylist[data-n="17"]>:last-child,.cgrid[data-n="19"]>:last-child,.hgrid[data-n="19"]>:last-child,.askgrid[data-n="19"]>:last-child,.human[data-n="19"]>:last-child,.relgrid[data-n="19"]>:last-child,.gaterow[data-n="19"]>:last-child,.vfylist[data-n="19"]>:last-child,.cgrid[data-n="21"]>:last-child,.hgrid[data-n="21"]>:last-child,.askgrid[data-n="21"]>:last-child,.human[data-n="21"]>:last-child,.relgrid[data-n="21"]>:last-child,.gaterow[data-n="21"]>:last-child,.vfylist[data-n="21"]>:last-child,.cgrid[data-n="23"]>:last-child,.hgrid[data-n="23"]>:last-child,.askgrid[data-n="23"]>:last-child,.human[data-n="23"]>:last-child,.relgrid[data-n="23"]>:last-child,.gaterow[data-n="23"]>:last-child,.vfylist[data-n="23"]>:last-child{grid-column:span 2}
}
@media (max-width:640px){.cgrid[data-n],.hgrid[data-n],.askgrid[data-n],.human[data-n],.relgrid[data-n],.gaterow[data-n],.vfylist[data-n]{grid-template-columns:1fr}.cgrid[data-n]>:last-child,.hgrid[data-n]>:last-child,.askgrid[data-n]>:last-child,.human[data-n]>:last-child,.relgrid[data-n]>:last-child,.gaterow[data-n]>:last-child,.vfylist[data-n]>:last-child{grid-column:auto}}
/* ════ PROSE LINKS ON DARK SURFACES ════
The global a{} rule carries --ocean, which is the light-surface link colour: on
--night it measures 3.44:1 and reads darker than the copy around it. Dark prose
gets --ocean-lt (8.31:1) plus an underline, since colour alone is a weak
affordance here. Scoped to prose containers so chrome and buttons are untouched. */
.ph .lede a,.ph .bd a,.ph .dsp a,.ph .micro a,
.ctaband a:not(.btn),.midcta a:not(.btn),
.band.night a:not(.btn),.sp.dk a:not(.btn),
.uniq a:not(.btn),.cout a:not(.btn),.tcorow.flat a:not(.btn){
color:var(--ocean-lt);text-decoration:underline;text-decoration-thickness:1px;
text-decoration-color:rgba(143,166,245,.45);text-underline-offset:2px;
transition:color .15s,text-decoration-color .15s}
.ph .lede a:hover,.ph .bd a:hover,.ph .dsp a:hover,.ph .micro a:hover,
.ctaband a:not(.btn):hover,.midcta a:not(.btn):hover,
.band.night a:not(.btn):hover,.sp.dk a:not(.btn):hover,
.uniq a:not(.btn):hover,.cout a:not(.btn):hover,.tcorow.flat a:not(.btn):hover{
color:#fff;text-decoration-color:currentColor}
/* Non-prose anchors on dark surfaces: the brand wordmark and the rail's home card.
Their children already override to white, but resetting the inherited colour keeps
the light-surface link blue from reaching a dark surface if copy is added later. */
.brandlink{color:var(--bone)}
.relgrid .relhome{color:rgba(255,255,255,.72)}
/* ════════════════════════════════════════════════════════════════════
NAV CHROME — dropdown panels, mobile drawer, footer.
The footer block below is folded in verbatim from the handoff's
_kit/site-chrome.css. The dropdown and drawer rules are NOT in the
handoff: site-chrome.js emits .ndrop/.npanel/.npg/.npfoot/.nchev and
.ndrawer/.ndx/.ndbody/.ndh/.ndk/.ndcta markup, but no CSS for any of
it was ever written, so the shipped design renders every dropdown
open at once with 200px chevrons and no working mobile menu.
Reconstructed here from the handoff's own vocabulary and the two
orphan rules that survived — .npanel{display:none} below 1080px and
.npg{grid-template-columns:1fr} below 900px — which establish the
intent: a multi-column panel on desktop, drawer takes over on mobile.
════════════════════════════════════════════════════════════════════ */
/* ── dropdown ──
Opens on hover and on focus-within, so the panel is reachable by
keyboard. A padded ::before bridges the gap between the trigger and
the panel so the pointer can travel without the panel closing. */
.ndrop{position:relative}
.nchev{width:11px;height:11px;flex:0 0 auto;opacity:.55;transition:transform .18s,opacity .18s}
.ndrop:hover .nchev,.ndrop:focus-within .nchev{transform:rotate(180deg);opacity:1}
.npanel{
position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
/* Self-sizing: the grid uses max-content columns and the URL captions
never wrap, so the panel is exactly as wide as its longest slug
(/FEATURES/INVOICING-PAYMENTS/) instead of relying on a magic width
that breaks the next time a page is added. */
z-index:40;margin-top:12px;padding:20px;
width:max-content;min-width:280px;max-width:min(92vw,760px);
background:rgba(8,10,18,.93);
-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
border:1px solid rgba(255,255,255,.13);border-radius:var(--r-lg);
box-shadow:0 30px 70px -24px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.04) inset;
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .18s,transform .18s,visibility .18s}
.npanel::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.ndrop:hover>.npanel,.ndrop:focus-within>.npanel{
opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.npg{display:grid;grid-template-columns:repeat(var(--npcols,1),max-content);gap:2px 22px}
/* `.nlinks a` sets align-items:center and gap:7px for the horizontal top-nav
row. Panel rows are nested inside .nlinks, so both leak in and centre every
label. Reset them here rather than loosening the parent, which the top nav
still needs. */
.npg a{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
padding:8px 10px;border-radius:var(--r-sm);white-space:normal;
color:rgba(255,255,255,.9);transition:background .14s,color .14s}
.npg a:hover{background:rgba(255,255,255,.07);color:#fff}
.npg a b{font-size:.86rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.npg a span{font:500 .6rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;
white-space:nowrap;color:rgba(255,255,255,.36)}
.npg a:hover span{color:rgba(255,255,255,.55)}
/* pages that exist in the tree but are not built yet carry the signal dot */
.npg a[data-soon] b::after{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;
background:var(--signal);margin-left:6px;vertical-align:2px;opacity:.7}
.npfoot{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.11);
grid-column:1/-1}
.npfoot a{display:inline-flex;align-items:center;gap:7px;padding:2px 10px;
font:700 .6rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.55)}
.npfoot a:hover{color:#fff}
.npfoot a i{font-style:normal;transition:transform .16s}
.npfoot a:hover i{transform:translateX(3px)}
/* light-hero variant — .ph.dk flips the nav to ink on bone */
.ph.dk .npanel{background:rgba(251,251,252,.97);border-color:var(--line-d);
box-shadow:0 30px 70px -26px rgba(24,24,27,.3),0 0 0 1px rgba(24,24,27,.03) inset}
.ph.dk .npg a{color:var(--ink)}
.ph.dk .npg a:hover{background:rgba(24,24,27,.05)}
.ph.dk .npg a span{color:var(--faint)}
.ph.dk .npg a:hover span{color:var(--muted)}
.ph.dk .npfoot{border-top-color:var(--line)}
.ph.dk .npfoot a{color:var(--muted)}
.ph.dk .npfoot a:hover{color:var(--ink)}
/* ── mobile drawer ──
Always in the DOM so the toggle is a class flip, never a reflow.
Full-height, right-anchored, with the CTA pinned to the safe-area
floor so it survives an iOS home indicator. */
.ndrawer{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;
background:linear-gradient(180deg,#05070F 0%,#0A1230 62%,#14173A 100%);
color:var(--bone);
transform:translateX(100%);visibility:hidden;
transition:transform .28s cubic-bezier(.4,0,.2,1),visibility .28s}
.ndrawer.open{transform:translateX(0);visibility:visible}
.ndx{display:flex;justify-content:flex-end;padding:18px clamp(18px,5vw,26px) 6px;flex:0 0 auto}
.ndclose{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.2);
background:rgba(255,255,255,.06);color:#fff;font-size:1.5rem;line-height:1;
display:flex;align-items:center;justify-content:center;cursor:pointer}
.ndclose:active{background:rgba(255,255,255,.14)}
.ndbody{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
padding:6px clamp(18px,5vw,26px) 26px}
.ndbody section{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.ndbody section:last-child{border-bottom:0}
.ndh{display:flex;align-items:center;min-height:44px;
font:800 1.15rem/1.2 'Public Sans',system-ui,sans-serif;letter-spacing:-.03em;color:#fff}
.ndk{display:flex;align-items:center;min-height:42px;padding-left:2px;
font-size:.95rem;color:rgba(255,255,255,.72)}
.ndk:active{color:#fff}
.ndk.sub{padding-left:16px;font-size:.9rem;color:rgba(255,255,255,.56)}
.ndcta{flex:0 0 auto;padding:16px clamp(18px,5vw,26px) calc(18px + env(safe-area-inset-bottom));
border-top:1px solid rgba(255,255,255,.11);background:rgba(3,4,10,.6)}
.ndcta .btn{width:100%;justify-content:center;background:#fff;color:#12141C}
/* the drawer is a mobile affordance only */
@media (min-width:1081px){.ndrawer{display:none}}
/* ════ FOOTER — folded in verbatim from the handoff's site-chrome.css ════
Curated, not exhaustive. Scoped to .foot2 so nothing leaks into page
content.
Desktop brand on its own row, five short columns beneath, each capped
at five links and ending in a "view all" handoff to its hub.
Mobile one column of accordion rows. Product stays open so the
pattern is legible on arrival; the rest are one tap. No grid
gap, so a closed row leaves a hairline, never a hole. */
.foot2 .fgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);align-items:start}
.foot2 .fgrid>.fcol:first-child{grid-column:1/-1;max-width:46ch;padding-bottom:clamp(10px,1.4vw,18px);border-bottom:1px solid rgba(244,240,232,.1)}
.foot2 .fgrid>.fbot{grid-column:1/-1}
.foot2 details.fcol{border:0}
.foot2 details.fcol>summary{display:block;list-style:none;cursor:default;font:700 .62rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:rgba(244,240,232,.42);margin-bottom:13px}
.foot2 details.fcol>summary::-webkit-details-marker{display:none}
.foot2 details.fcol>summary::marker{content:''}
.foot2 details.fcol>summary::after{content:none}
.foot2 .fls{display:flex;flex-direction:column}
.foot2 .fcol a{display:block;font-size:.85rem;line-height:1.35;color:rgba(244,240,232,.76);padding:5px 0}
.foot2 .fcol a:hover{color:#fff}
.foot2 .fall{margin-top:9px;padding-top:10px;border-top:1px solid rgba(244,240,232,.11);font:700 .6rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:rgba(244,240,232,.48);display:flex;align-items:center;gap:6px}
.foot2 .fall i{font-style:normal;transition:transform .16s}
.foot2 .fall:hover{color:#fff}
.foot2 .fall:hover i{transform:translateX(3px)}
.foot2 .fcol a[data-soon]::after{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--signal);margin-left:6px;vertical-align:2px;opacity:.6}
@media (max-width:1080px){.foot2 .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){
.foot2{padding-top:34px;padding-bottom:26px}
.foot2 .fgrid{grid-template-columns:1fr;gap:0}
.foot2 .fgrid>.fcol:first-child{max-width:none;padding-bottom:20px;border-bottom-color:rgba(244,240,232,.14)}
.foot2 details.fcol{border-bottom:1px solid rgba(244,240,232,.1)}
.foot2 details.fcol>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;cursor:pointer;margin:0;padding:14px 2px;font-size:.7rem;color:rgba(244,240,232,.92);-webkit-tap-highlight-color:transparent}
.foot2 details.fcol>summary::after{content:'';display:block;flex:0 0 auto;width:9px;height:9px;border-right:1.5px solid var(--signal);border-bottom:1.5px solid var(--signal);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.foot2 details.fcol[open]>summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.foot2 details.fcol>summary:active{color:#fff}
.foot2 details.fcol .fls{padding:2px 2px 15px}
.foot2 .fcol a{display:flex;align-items:center;min-height:44px;padding:4px 0;font-size:.9rem}
.foot2 .fall{margin-top:6px;padding-top:11px}
.foot2 .fbot{margin-top:24px}
}
/* Motion opt-out — the drawer, panels and chevrons all animate. */
@media (prefers-reduced-motion:reduce){
.npanel,.nchev,.ndrawer,.npfoot a i,.foot2 .fall i{transition:none}
}
/* Skip link — off-screen until focused, then pinned top-left over the hero. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;
background:var(--card);color:var(--ink);font-weight:700;font-size:.9rem;
border-radius:0 0 var(--r-md) 0}
.skip:focus{left:0}
/* ── Early access ── the name/email capture that replaces the buy buttons
while selling is paused. Rendered by the `early_access` macro in
site/_blocks.html and anchored at #early-access, which is where every
paused plan CTA on the site points. */
.eacc{margin-top:clamp(26px,3.2vw,42px);padding:clamp(22px,2.6vw,32px);
background:var(--card);border:1px solid var(--line);border-radius:16px;
scroll-margin-top:96px}
.eacc h2{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:800;letter-spacing:-.028em;
margin:0 0 16px;text-wrap:balance}
.eacc-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.eacc-f{display:flex;flex-direction:column;gap:6px;flex:1 1 220px}
/* --muted, not --faint: --faint (#A1A1AA) on the .eacc card measured 2.48:1
at 9.28px, and these are the ONLY visible labels on the form. */
.eacc-f span{font:700 .62rem/1 var(--mono);letter-spacing:.13em;
text-transform:uppercase;color:var(--muted)}
.eacc-f input{background:var(--bg-soft,rgba(24,24,27,.04));border:1px solid var(--line-d);
border-radius:10px;padding:11px 13px;font:inherit;font-size:.95rem;color:var(--ink);
outline:none;width:100%}
/* A real focus ring, not just a recoloured 1px border. The border alone was
~3.08:1 against the card — technically passing SC 1.4.11 and a weak signal
on the site's only conversion form. */
.eacc-f input:focus-visible{border-color:var(--signal);
outline:2px solid var(--signal);outline-offset:2px}
.eacc-form .btn{flex:0 0 auto}
/* The honeypot's own off-screen rule lived here. It moved out with the field:
the form now includes _partials/_form_antispam.html, which carries its own
inline positioning so the partial works on any page that includes it rather
than only where a matching stylesheet happens to be loaded. */
/* Two-class selector so it outranks `.eacc-f span` (0,1,1). At one class the
error inherited the label's mono/uppercase/--faint `font:` shorthand and
rendered as grey 9px micro-type identical to the field labels. */
.eacc-f .eacc-err,.eacc .eacc-err{display:block;margin-top:5px;
font:500 .78rem/1.4 var(--sans,inherit);letter-spacing:0;text-transform:none;
color:var(--red,#D14848)}
.eacc .eacc-err-top{margin:0 0 14px}
/* linq-site.css has no bare `.btn.primary` — every variant is parent-scoped —
so the submit button fell back to browser chrome inside .eacc.
Ink fill, matching `.plan .btn.primary` / `.dk .btn.primary` — the site's
established primary on a light surface. Not --signal: the old accent-on-white was
~3.4:1, and this is the only conversion control on a paused storefront. */
.eacc .eacc-btn{background:var(--ink);color:#fff;border-color:transparent}
.eacc .eacc-btn:hover{background:var(--signal);color:#fff}
.eacc-ok{margin:14px 0 0;font-weight:700;color:var(--green,#1F9D55)}
/* ══════════════════════════════════════════════════════════════════════════
REBUILT CHROME + HERO — aurora design canvas (2026-08-26)
The hero is `.phx`, not `.ph`, on purpose. The 66 legacy `.ph` rules were
written for a near-black hero (#05060C, white display, gradient eyebrow
underline) and every one of them would fight this porcelain panel. A new
class costs nothing and leaves the old set inert for deletion in the sweep,
rather than 66 overrides racing on specificity.
══════════════════════════════════════════════════════════════════════════ */
/* fixed floating nav: transparent over the hero, solid + blurred once scrolled */
.lq-navwrap{position:fixed;top:0;left:0;right:0;z-index:40;padding:14px var(--gut) 0}
.lq-navwrap .phnav{max-width:1320px;margin:0 auto;width:100%;
display:flex;align-items:center;gap:30px;
padding:13px 20px;border-radius:14px;border:1px solid transparent;background:transparent;
transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease}
.lq-navwrap.is-scrolled .phnav,
.lq-navwrap.is-menu-open .phnav{background:rgba(251,251,252,.96);backdrop-filter:blur(14px);
border-color:rgba(255,255,255,.5);box-shadow:var(--e-nav)}
/* Fixed height, never measured from offsetHeight on mount -- measuring it is
what made the old nav shift the page on every load. */
.lq-navspacer{height:var(--nav-spacer);background:var(--nav-spacer-bg,var(--porcelain))}
/* home no longer overrides the spacer: its hero is a porcelain-framed
aurora card now, so the canvas default (porcelain) is correct there too. */
/* the porcelain panel: full-bleed, only the bottom corners rounded, so it
flows out of the nav spacer above as one sheet */
.phx{position:relative;background:var(--porcelain);color:var(--ink);
border-radius:0 0 var(--r-panel) var(--r-panel);box-shadow:var(--e-panel);
padding-top:14px;margin-bottom:var(--gap)}
.phx .phbody{max-width:1440px;margin:0 auto;padding:64px 96px 56px;
display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
gap:56px;align-items:center}
.phx .phcopy{min-width:0}
/* the eyebrow IS the h1 -- keyword-bearing, cobalt, tracked */
.phx h1.eb{display:block;width:auto;max-width:none;margin:0;
font:600 var(--eb-h1)/1.3 var(--dsp);letter-spacing:var(--eb-track);
text-transform:uppercase;color:var(--ocean)}
.phx h1.eb::after{content:none}
/* the display line is NOT a heading */
.phx .dsp{margin-top:16px;font-family:var(--dsp);font-size:var(--dsp-page);font-weight:800;
letter-spacing:-.036em;line-height:1.08;color:var(--ink);max-width:none;text-wrap:balance}
.phx .dsp em{font-style:italic;font-weight:700;color:var(--ink-4)}
.phx .dsp i{color:var(--ocean);font-style:normal}
.phx .lede{margin-top:22px;max-width:52ch;font:400 18px/1.65 var(--body);
letter-spacing:0;color:var(--muted);text-wrap:pretty}
.phx .micro{margin-top:16px;font:500 13px/1.4 var(--mono);letter-spacing:.1em;
text-transform:uppercase;color:var(--faint)}
.phx .phcta{margin-top:28px;display:flex;gap:16px;flex-wrap:wrap}
.phx .btn{border-radius:var(--r-btn);padding:15px 28px;font:600 16px/1 var(--body);box-shadow:none}
.phx .btn.primary{background:var(--ink);color:#fff}
.phx .btn.primary:hover{background:var(--ocean);color:#fff}
.phx .btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line-16)}
.phx .btn.ghost:hover{background:var(--card-2)}
.phx .phjump{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
.phx .phjump a{padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--line-16);
font:500 13px/1 var(--body);color:var(--muted);background:#fff}
.phx .phjump a:hover{border-color:var(--ocean);color:var(--ocean)}
.phx .phmedia{min-width:0}
.phx .phmedia img,.phx .phmedia .islot{width:100%;border-radius:var(--r-lg);box-shadow:var(--e-mock)}
@media (max-width:900px){
.phx .phbody{padding:44px var(--gut) 40px;gap:34px}
.lq-navwrap .phnav{gap:16px;padding:11px 14px}
}
/* ── SECTION SHELL → floating panels ──────────────────────────────────────
The canvas has no full-bleed bands. Every section is a porcelain panel
floating on the body aurora, separated by a 24px gutter and a 26px gap.
`.band`/`.sp` keep their theme-variable contract (--bg --fg --mu --fa --ln
--cd) because 86 downstream rules read those, and `.wrap` keeps its name
because 61 template call sites emit it. Only the SKIN moves: the section
stops painting a background and becomes the gutter; `.wrap` stops being a
plain max-width box and becomes the panel. That restyles every section on
all 50 pages without touching a single macro. */
.band,.sp{background:transparent;padding:0 var(--gut) var(--gap)}
.band>.wrap,.sp>.wrap{max-width:1440px;margin:0 auto;width:100%;
background:var(--porcelain);color:var(--ink);
border-radius:var(--r-panel);box-shadow:var(--e-panel);
padding:var(--panel-pad);padding-bottom:62px}
/* dark panels: the canvas uses a deeper ink than the slate rail, hence
--panel-night rather than reusing --night */
.band.night{background:transparent}
.band.night>.wrap{background:var(--panel-night);color:#fff;box-shadow:var(--e-night)}
.band.bone>.wrap{background:var(--porcelain)}
.sp.dk>.wrap{background:var(--panel-night);color:#fff;box-shadow:var(--e-night)}
/* the body grid inside a panel */
.band>.wrap>.bhead+*{margin-top:32px}
@media (max-width:900px){
.band,.sp{padding:0 var(--gut) 18px}
.band>.wrap,.sp>.wrap{padding:44px 22px 40px;border-radius:var(--r-story)}
}
/* -- BLOCK HEAD -- eyebrow + display line, in every section -----------------
The canvas sets `h1,h2,h3,h4{font-family:'Archivo'}` globally and its
eyebrows are h1/h2 elements with no override, so eyebrows are ARCHIVO --
not the mono this site had been using, and not the body face.
Three values move: family (mono -> Archivo), size (.68rem/10.88px -> 13px)
and tracking (.19em -> .14em). `.eb` is shared by the hero h1 and every
block h2, so the size comes from a token: --eb-h1 14px, --eb-h2 13px. */
.eb{display:inline-flex;align-items:center;gap:9px;
font-family:var(--dsp);font-size:var(--eb-h2);font-weight:600;line-height:1.3;
letter-spacing:var(--eb-track);text-transform:uppercase;color:var(--ocean)}
.dsp{font-family:var(--dsp);font-size:var(--dsp-sect);font-weight:800;
letter-spacing:-.036em;line-height:1.1;text-wrap:balance;color:var(--ink)}
.dsp em{font-style:italic;font-weight:700;color:var(--ink-4)}
.dsp i{color:var(--ocean);font-style:normal}
.bhead{max-width:none}
.bhead .dsp{margin-top:14px;max-width:26ch}
.bhead+*{margin-top:32px}
/* on a night panel the eyebrow goes translucent white and the display goes
solid white -- the canvas does not tint the display line */
.band.night .eb,.sp.dk .eb{color:rgba(255,255,255,.7)}
.band.night .dsp,.sp.dk .dsp{color:#fff}
.band.night .dsp em,.sp.dk .dsp em{color:rgba(255,255,255,.62)}
/* -- CARDS (44 uses) -------------------------------------------------------
Was a hairline table: gap:2px over a --line background with a 1px border and
overflow:hidden, so neighbouring cards shared a rule and read as one block.
The canvas has DISCRETE cards -- no border at all, a --card-2 tint doing the
separating, and a real 16px gap. On a night panel the tint inverts to a
white wash instead, because #F4F4F6 on #14161F would read as a light box. */
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
gap:16px;margin-top:32px;background:none;border:0;border-radius:0;overflow:visible}
.cgrid>article{background:var(--card-2);border-radius:var(--r-md);padding:22px;
display:flex;flex-direction:column;gap:0}
.cgrid h3{font-family:var(--body);font-size:17.5px;font-weight:700;
letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.cgrid p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.band.night .cgrid>article,.sp.dk .cgrid>article{background:rgba(255,255,255,.05)}
.band.night .cgrid h3,.sp.dk .cgrid h3{color:#fff}
.band.night .cgrid p,.sp.dk .cgrid p{color:rgba(255,255,255,.76)}
/* -- legacy surface variants, neutralised ----------------------------------
The old system had three band skins (default / .bone / .night) and each
re-declared card, table and frame colours with TWO-class selectors like
`.band.bone .cgrid>article`. Those outrank the single-class rules above no
matter where they sit in the file, which is why cards kept rendering the
old #FBF8F2 cream after the rewrite.
The canvas has one porcelain panel, so `.bone` is now a no-op. Matching the
specificity rather than deleting the rules keeps this reversible and avoids
touching selectors other pages may still lean on. */
.band.bone .cgrid{background:none;border-color:transparent}
.band.bone .cgrid>article{background:var(--card-2)}
.band.bone .shotframe{background:var(--card-2)}
.band.bone .ctable{background:var(--card-2)}
.sp.dk .cgrid,.band.night .cgrid{background:none;border-color:transparent}
/* -- ORPHANED BLOCKS: midcta / related / ctaband ---------------------------
These three never matched the `.band,.sp` panel rewrite because their macros
emit their OWN section classes (.midcta, .rel, .ctawrap). They kept the old
full-bleed treatment and sat between porcelain panels with no card, no
gutter and the wrong padding -- which is what read as sections "not blending
and getting cut off".
Two of them become panels. The closing CTA does NOT: the canvas is explicit
that it is "bare, on the page aurora -- the only section on the page without
a card", so it stays transparent and its type goes white to sit on the
aurora instead of ink on porcelain. */
/* the old night decor the canvas drops */
.midcta>.sky,.midcta>.rays,.ctaband>.sky,.ctaband>.rays,.midcta .mcnum{display:none}
/* mid-page CTA -> night panel */
.midcta{background:transparent;padding:0 var(--gut) var(--gap)}
.midcta>.wrap{max-width:1440px;margin:0 auto;width:100%;
background:var(--panel-night);color:#fff;
border-radius:var(--r-panel);box-shadow:var(--e-night);
padding:var(--panel-pad);padding-bottom:62px}
.midcta .eb{color:rgba(255,255,255,.7)}
.midcta .dsp{color:#fff}
.midcta p{color:rgba(255,255,255,.76)}
/* related -> porcelain panel */
.rel{background:transparent;padding:0 var(--gut) var(--gap)}
.rel>.wrap{max-width:1440px;margin:0 auto;width:100%;
background:var(--porcelain);color:var(--ink);
border-radius:var(--r-panel);box-shadow:var(--e-panel);
padding:var(--panel-pad);padding-bottom:62px}
.relgrid a{background:var(--card-2);border-radius:var(--r-md)}
/* closing CTA -> bare on the aurora, white type, centred */
.ctawrap{padding:70px var(--gut) 60px;text-align:center;background:transparent}
.ctaband{background:transparent;padding:0;border:0;box-shadow:none;min-height:0}
.ctaband .inner{max-width:900px;margin:0 auto}
.ctaband .eb{color:rgba(255,255,255,.72);justify-content:center}
.ctaband .dsp{margin-top:20px;font-size:var(--dsp-cta);line-height:1;
letter-spacing:-.04em;color:#fff;max-width:none}
.ctaband p{margin:22px auto 0;max-width:52ch;font-size:19px;line-height:1.6;
color:rgba(255,255,255,.86)}
.ctaband .phcta{margin-top:34px;justify-content:center}
.ctaband .btn.primary{background:#fff;color:var(--ink)}
.ctaband .btn.primary:hover{background:var(--ocean);color:#fff}
.ctaband .btn.ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.28)}
.ctaband .btn.ghost:hover{background:rgba(255,255,255,.18)}
/* -- nav on porcelain ------------------------------------------------------
The base `.nlinks a` rule paints links white, which was right when the nav
was rendered INSIDE the near-black hero. Hoisted to page level it sits on
the porcelain spacer on every page, so white-on-white made the whole menu
invisible. Canvas values: links #52525B, hover #18181B, pill ink -> cobalt. */
.lq-navwrap .nlinks a{color:var(--muted);font-size:15px;font-weight:500}
.lq-navwrap .nlinks a:hover,.lq-navwrap .nlinks a.on{color:var(--ink)}
.lq-navwrap .nact .sign{color:var(--muted);font-size:15px;font-weight:500}
.lq-navwrap .nact .sign:hover{color:var(--ink)}
.lq-navwrap .nact .pill{background:var(--ink);color:#fff;border-radius:8px;
padding:9px 16px;font-family:var(--body);font-size:14.5px;font-weight:600}
.lq-navwrap .nact .pill:hover{background:var(--ocean);color:#fff}
.lq-navwrap .burger{color:var(--ink)}
.lq-navwrap .brand{height:30px;width:auto}