/* DESIGN1: every value below comes from /ra/theme.css, generated from DESIGN.md; the shadow stays literal (the format has no shadow token — DESIGN.md allow:) */
:root{--ground:var(--color-ground);--surface:var(--color-surface);--ink:var(--color-ink);--ink-soft:var(--color-ink-soft);--ink-faint:var(--color-ink-faint);--line:var(--color-line);--line-strong:var(--color-line-strong);--accent:var(--color-primary);--accent-soft:var(--color-primary-soft);--accent-ink:var(--color-primary-ink);--accent-on-dark:var(--color-primary-on-dark);--on-accent:var(--color-on-primary);--warn:var(--color-warn);--warn-soft:var(--color-warn-soft);--danger:var(--color-danger);--danger-soft:var(--color-danger-soft);--shadow-lift:0 1px 3px rgba(16,19,26,.08),0 6px 16px rgba(16,19,26,.06);--radius:var(--radius-container);--radius-sm:var(--radius-control);--font-body:var(--font-body-md);--nav:var(--spacing-nav);--dark:var(--color-dark);--dark-2:var(--color-dark-2);--dark-line:var(--color-dark-line);--dark-soft:var(--color-dark-soft)}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{min-height:100%}
body{font-family:var(--font-body);font-size:var(--text-body-md);line-height:1.5;color:var(--ink);background:var(--ground);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
/* ===== type stops (4): 48 / 32 / 17 / 14 — the desk's 13.5/12 appear only inside the desk card ===== */
.h1{font-size:var(--text-display);font-weight:var(--font-weight-display);line-height:1.08;letter-spacing:var(--tracking-display)}
.h2{font-size:var(--text-headline);font-weight:var(--font-weight-headline);line-height:1.15;letter-spacing:var(--tracking-headline);text-wrap:balance}
.lead{font-size:var(--text-lead);line-height:1.55;color:var(--ink-soft)}
.eyebrow{font-size:var(--text-label);font-weight:var(--font-weight-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px}
.small{font-size:var(--text-small);color:var(--ink-soft)}
/* B106 (3): the hero lead-in is a sentence in the lead stop, and the page's one small label names the example the heading does not — no tracked caps */
.leadin{font-size:var(--text-lead);color:var(--ink-soft);margin-bottom:12px}
.label{font-size:var(--text-small);font-weight:600;color:var(--ink-soft);margin-bottom:12px}
/* ===== nav ===== */
.nav{height:var(--nav);border-bottom:1px solid var(--line);background:var(--ground);position:sticky;top:0;z-index:5}
.nav .in{max-width:1380px;margin:0 auto;padding:0 32px;height:100%;display:flex;align-items:center;gap:32px}
/* the mark (Chris 2026-09-30 22:57, comp wsite2/logo/logo.html v=a): last visit, the rhythm, due now; sized in em as in the
   comp (52 x 21 units, gap 10 units), the wordmark Inter 650 -.025em */
.wordmark{display:inline-flex;align-items:center;gap:.5556em;font-size:17px;font-weight:650;letter-spacing:-.025em;color:var(--ink);white-space:nowrap}
.wordmark svg{width:2.8889em;height:1.1667em;flex:none;overflow:visible;color:var(--accent)}
.wordmark .ra-halo{transform-box:fill-box;transform-origin:center}
/* the pulse ("Make that pulse every so often too left to right"): every 8 s a light runs the line into the due dot (0-700 ms)
   and the ring swells once and settles (600-1000 ms); transform/opacity only, none under reduced motion */
@media (prefers-reduced-motion:no-preference){.wordmark .ra-run{animation:ra-run 8s 2s infinite,ra-glow 8s 2s infinite}.wordmark .ra-halo{animation:ra-ring 8s 2s infinite}}
@keyframes ra-run{0%{transform:translateX(0);animation-timing-function:cubic-bezier(.35,0,.7,.75)}8.75%,100%{transform:translateX(38px)}}
@keyframes ra-glow{0%{opacity:0}1.5%,7.5%{opacity:1}8.75%,100%{opacity:0}}
@keyframes ra-ring{0%,7.5%{transform:scale(1);animation-timing-function:cubic-bezier(.2,.7,.3,1)}9.5%{transform:scale(1.25);animation-timing-function:cubic-bezier(.45,0,.55,1)}12.5%,100%{transform:scale(1)}}
.nav .links{display:flex;gap:24px;font-size:14px;font-weight:500;color:var(--ink-soft)}
.nav .spacer{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;height:38px;border:1px solid var(--line-strong);background:var(--ground);color:var(--ink);border-radius:var(--radius-sm);font-size:var(--text-body-md);font-weight:600;white-space:nowrap}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.ghost{border-color:transparent;color:var(--ink-soft)}
.btn.lg{height:46px;padding:0 22px;font-size:var(--text-body-md)}
/* ===== bands ===== */
.band{padding:72px 0}
.band .in{max-width:1380px;margin:0 auto;padding:0 32px;width:100%}
.band.wash{background:var(--surface)}
.band.dark{background:var(--dark);color:var(--on-accent)}
.band.dark .lead,.band.dark .small{color:var(--dark-soft)}
.band.dark .eyebrow{color:var(--dark-soft);opacity:.7}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px;align-items:center}
.c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c12{grid-column:span 12}
.order-2{order:2}
.stack>*+*{margin-top:20px}
.cta-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.cta-note{font-size:var(--text-small);font-weight:400;color:var(--ink-soft);width:100%}
/* ===== hero: the desk's Clients-due card (res-stat + grp/sent + sms) ===== */
.deskcard{border:1px solid var(--line);border-radius:var(--radius);background:var(--ground);box-shadow:var(--shadow-lift);overflow:hidden}
.deskcard .head{display:flex;align-items:baseline;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.deskcard .head b{font-size:var(--text-body-md);font-weight:600}
.deskcard .head span.tag{margin-left:auto;font-size:var(--text-label);font-weight:var(--font-weight-label);padding:2px 8px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);color:var(--ink-soft)}
.deskcard .head span{font-size:var(--text-small);font-weight:400;color:var(--ink-faint)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:16px 18px}
.res-stat{border:1.5px solid var(--line-strong);border-radius:var(--radius);padding:12px 14px;background:var(--ground);min-width:0}
.res-stat .n{font-size:var(--text-headline);font-weight:var(--font-weight-headline);font-variant-numeric:tabular-nums;line-height:1.1}
.res-stat .l{font-size:var(--text-small);font-weight:400;color:var(--ink-soft);margin-top:4px}
.res-stat.accent{border-color:var(--accent);background:var(--accent-soft)}
.res-stat.accent .n,.res-stat.accent .l{color:var(--accent-ink)}
.grp{padding:0 18px 12px}
.grphead{display:flex;align-items:baseline;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.grphead b{font-size:var(--text-body-md);font-weight:600}
.grphead span{font-size:var(--text-small);font-weight:400;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.sent{font-size:var(--text-small);font-weight:400;padding:8px 0;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:baseline;min-width:0}
.sent:last-child{border-bottom:0}
.sent b{font-size:var(--text-body-md);font-weight:600;flex:none}
.sent span{color:var(--ink-soft);overflow-wrap:anywhere}
.muted{color:var(--ink-faint)}
.deskcard .foot{display:flex;align-items:center;gap:14px;padding:12px 18px;border-top:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.deskcard .foot .act{padding:8px 14px;border-radius:var(--radius-sm);background:var(--ground);color:var(--ink);font-size:var(--text-body-md);font-weight:600;border:1px solid var(--line-strong);flex:none}
.deskcard .foot .sms{font-size:var(--text-small);font-weight:400;color:var(--ink-soft);flex:1;min-width:200px;overflow-wrap:anywhere}
/* ===== how it works ===== */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.step{border-top:1px solid var(--line-strong);padding-top:20px;min-width:0}
.step .num{font-size:var(--text-label);font-weight:var(--font-weight-label);color:var(--accent-ink);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.step h3{font-size:var(--text-body-md);font-weight:600;margin-bottom:8px;line-height:1.3}
.step p{font-size:var(--text-small);font-weight:400;color:var(--ink-soft)}
.vessel{margin-top:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--ground);overflow:hidden}
.vrow,.vhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:var(--text-small);font-weight:400;min-width:0}
.vrow:last-child,.vhead:last-child{border-bottom:0}
.vrow b,.vhead b{font-size:var(--text-body-md);font-weight:600;flex:none}
.vrow span,.vhead span{color:var(--ink-faint);font-size:var(--text-small);font-weight:400;flex:1 1 auto;min-width:0}
.vrow .pill{margin-left:auto}
.vhead.tot{background:var(--surface)}
.pill{font-style:normal;font-size:var(--text-small);font-weight:var(--font-weight-label);padding:2px 8px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);color:var(--ink-soft);white-space:nowrap;flex:none}
.pill.live{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-soft)}
.pill.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:var(--warn-soft)}
.vsms{font-size:var(--text-small);font-weight:400;line-height:1.5;padding:10px 14px;color:var(--ink);overflow-wrap:anywhere}
.vfoot{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line);background:var(--surface)}
.vfoot .act{padding:5px 10px;border-radius:var(--radius-sm);background:var(--accent);color:var(--on-accent);font-size:var(--text-label);font-weight:var(--font-weight-label)}
.vfoot .act.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.dv{margin-top:16px;border:1px solid var(--dark-line);border-radius:var(--radius);background:var(--dark-2);padding:10px 14px;display:flex;gap:8px;align-items:baseline;font-size:var(--text-small);font-weight:400;min-width:0}
.dv b{font-size:var(--text-body-md);font-weight:600;flex:none}.dv span{color:var(--dark-soft);font-size:var(--text-small);overflow-wrap:anywhere}
/* ===== who it's for ===== */
.trades{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.trade{border:1px solid var(--line);border-radius:var(--radius);background:var(--ground);padding:20px;min-width:0}
.trade b{display:block;font-size:var(--text-body-md);font-weight:600;margin-bottom:4px}
.trade span{font-size:var(--text-small);font-weight:400;color:var(--ink-soft);display:block;overflow-wrap:anywhere}
/* ===== control band ===== */
.rules{display:grid;grid-template-columns:1fr;gap:24px}
.rule{border-top:1px solid var(--dark-line);padding-top:20px;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:8px 32px;align-items:center}
.rule h3{grid-column:1}.rule p{grid-column:1}.rule small{grid-column:1}.rule .dv{grid-column:2;grid-row:1/span 3;margin-top:0}
.rule h3{font-size:var(--text-body-md);font-weight:600;margin-bottom:8px;line-height:1.3}
.rule p{font-size:var(--text-small);font-weight:400;color:var(--dark-soft)}
.rule small{display:block;font-size:var(--text-small);font-weight:400;color:var(--dark-soft);opacity:.75;margin-top:10px}
/* ===== closing ===== */
.band.close .in{text-align:center;max-width:760px}
.band.close{padding:72px 0 64px}
.band.close .cta-row{justify-content:center}
.foot{border-top:1px solid var(--line);padding:24px 0;font-size:var(--text-small);font-weight:400;color:var(--ink-faint)}
.foot .in{max-width:1380px;margin:0 auto;padding:0 32px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* ===== auth pages (sign-up / sign-in / ready) — the desk's settings-kit fields ===== */
/* B135 fix1: the auth pages' canvas is the wash too, so an open picker list that grows the document never shows white below .auth */
body:has(>.auth){background:var(--surface)}
.auth{min-height:calc(100vh - var(--nav));background:var(--surface);display:flex;align-items:center;justify-content:center;padding:48px 32px}
.panel{width:100%;max-width:480px;background:var(--ground);border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.panel.wide{max-width:560px}
.panel h1{font-size:var(--text-headline);font-weight:var(--font-weight-headline);letter-spacing:-.02em;line-height:1.2;margin-bottom:6px}
.panel .sub{font-size:var(--text-small);font-weight:400;color:var(--ink-soft);margin-bottom:24px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;min-width:0}
.field label{font-size:var(--text-body-md);font-weight:600;color:var(--ink)}
.field input,.field select,.field .sel{padding:10px 12px;height:44px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--ground);color:var(--ink);font-size:var(--text-body-md);width:100%;min-width:0}
/* B226: iPhone Safari zooms the page into any field whose text is under 16px, so on phones the typed text is 16px -- the
   platform's threshold, not a type stop; height, padding and the desktop size stay as above */
@media (max-width:760px){.field input,.field select,.field .sel{font-size:16px}}
.field .sel{display:flex;align-items:center;justify-content:space-between;gap:8px}
.field .sel .chev{width:8px;height:8px;border-right:1.5px solid var(--ink-soft);border-bottom:1.5px solid var(--ink-soft);transform:rotate(45deg);margin:-4px 4px 0 0;flex:none}
.field .sel.empty{color:var(--ink-faint)}
/* B135: /try's product-drawn picker (try.css rules) for every page; only State's 51-row list scrolls, so /try is unchanged */
.picker{position:relative}
.picker .sel{cursor:pointer;text-align:left;white-space:nowrap}
.picker .sel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.picker .sel[aria-expanded="true"]{border-color:var(--accent)}
.picker .list{position:absolute;z-index:2;top:calc(100% + 4px);left:0;right:0;list-style:none;padding:4px;background:var(--ground);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow-lift)}
#state-list{max-height:284px;overflow-y:auto}
.picker .list:focus{outline:none}
.picker [role="option"]{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap}
.picker [role="option"]:hover{background:var(--surface)}
.picker [role="option"][aria-selected="true"]{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.picker .list:focus [role="option"].active{outline:2px solid var(--accent);outline-offset:-2px}
.field .hint{font-size:var(--text-small);font-weight:400;color:var(--ink-faint)}
.field.err input,.field.err .sel{border-color:var(--danger)}
.field .msg{display:none;font-size:var(--text-small);font-weight:400;color:var(--danger)}
.field.err .msg{display:block}
.field.err .hint{display:none}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel .btn.primary{width:100%;height:44px;font-size:var(--text-body-md);margin-top:8px}
.panel .after{font-size:var(--text-small);font-weight:400;color:var(--ink-soft);text-align:center;margin-top:16px}
.panel .after a{color:var(--accent-ink);font-weight:400;text-decoration:underline}
.notice{display:block;border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);background:var(--warn-soft);color:var(--warn);border-radius:var(--radius);padding:12px 14px;font-size:var(--text-body-md);font-weight:600;margin:4px 0 16px}
.notice span{display:block;font-size:var(--text-small);font-weight:400;opacity:.85;margin-top:2px}
.elsewhere{font-size:var(--text-small);font-weight:400;color:var(--ink-faint);margin:-8px 0 16px}
.elsewhere a{text-decoration:underline}
/* refused state */
.refused .notice{display:block}
.refused .field.geo,.refused .field.f-type,.refused .btn.primary,.refused .elsewhere,.refused .fine{display:none}
.refused .two-up.loc{grid-template-columns:1fr}
.notice{margin:0 0 16px}
.refused .field.country .sel{border-color:var(--warn)}
.fine{font-size:var(--text-small);font-weight:400;color:var(--ink-faint);margin-top:14px;line-height:1.5}
/* ready page: the desk's drop zone as the one input */
.drop{border:1.5px dashed var(--line-strong);border-radius:var(--radius);padding:34px 20px;text-align:center;background:var(--surface);margin:20px 0 16px}
.drop b{display:block;font-size:var(--text-body-md);font-weight:600;margin-bottom:4px}
.drop span{font-size:var(--text-small);font-weight:400;color:var(--ink-soft);display:block;margin-bottom:12px}
.ready-steps{display:flex;flex-direction:column}
.ready-steps div{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line);font-size:var(--text-small);font-weight:400;color:var(--ink-soft)}
.ready-steps div b{color:var(--ink);font-size:var(--text-body-md);font-weight:600;flex:none;width:16px;font-variant-numeric:tabular-nums}
.ready-steps div.now b,.ready-steps div.now{color:var(--accent-ink)}
.ready-steps div.now{font-size:var(--text-body-md);font-weight:600}
/* ===== screens ===== */
/* ===== ≥2000: use the width — grid gaps and the trade tiles widen, nothing centers narrower than the container ===== */
@media (min-width:2000px){
 .nav .in,.band .in,.foot .in{max-width:1900px}
 .band.close .in{max-width:900px}
 .grid{gap:64px}
 .trades{gap:16px}
}
/* ===== phone ===== */
@media (max-width:760px){
 :root{--nav:56px}
 .nav .in{padding:0 16px;gap:16px}
 .nav .links{display:none}
 .band{padding:40px 0;min-height:0}
 .band .in{padding:0 16px}
 .grid{grid-template-columns:1fr;gap:28px}
 .c5,.c6,.c7,.c12{grid-column:auto}
 .h1{font-size:var(--text-display-phone)}
 .h2{font-size:var(--text-headline-phone)}
 .lead{font-size:var(--text-lead-phone)}
 .stack>*+*{margin-top:16px}
 .btn.lg{height:48px;width:100%}
 .cta-row{flex-direction:column;align-items:stretch}
 .cta-note{text-align:left}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 16px}
 .deskcard .head,.grp,.deskcard .foot{padding-left:16px;padding-right:16px}
 .deskcard .foot{flex-direction:column;align-items:stretch}
 .deskcard .foot .act{text-align:center}
 .rule{grid-template-columns:1fr}.rule .dv{grid-column:1;grid-row:auto;margin-top:8px}
 .steps,.rules{grid-template-columns:1fr;gap:20px}
 .trades{grid-template-columns:1fr 1fr;gap:10px}
 .trade{padding:14px}
 .auth{padding:24px 16px;align-items:flex-start}
 .panel{padding:24px 20px}
 .two-up{grid-template-columns:1fr}
 .foot .in{padding:0 16px;flex-direction:column;gap:6px}
}
.field select{appearance:auto}
/* home (B33, 2026-09-25) */
.band.hero{padding:56px 0 64px}
.band.strip{padding:36px 0}
.c4{grid-column:span 4}
.c6{grid-column:span 6}
.c7{grid-column:span 7}
.c8{grid-column:span 8}
.c12{grid-column:span 12}
.grid.top{align-items:start}
.hero-h1{font-size:var(--text-hero);font-weight:var(--font-weight-hero);line-height:1.08;letter-spacing:var(--tracking-hero);max-width:22ch;text-wrap:balance}
.hero .lead{font-size:var(--text-lead);font-weight:400;max-width:640px}
.deskcard .head i{margin-left:auto;font-style:normal;font-size:var(--text-small);font-weight:600;color:var(--ink-soft)}
.due{display:flex;align-items:flex-end;gap:16px;padding:20px 18px 16px}
.due .big{font-size:var(--text-hero);font-weight:var(--font-weight-hero);letter-spacing:-.03em;line-height:1;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.due .what{min-width:0;padding-bottom:4px}
.due .what b{display:block;font-size:var(--text-body-md);font-weight:600;line-height:1.25}
.due .what .money{display:block;font-size:var(--text-small);font-weight:400;color:var(--ink-soft);margin-top:4px}
.due .what .money em{font-style:normal;font-size:var(--text-body-md);font-weight:600;color:var(--ink)}
.pill.ex{color:var(--ink-faint);background:var(--surface)}
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px;margin-top:40px}
.fstep{border-top:1px solid var(--line-strong);padding-top:16px;min-width:0;display:flex;flex-direction:column;gap:8px}
.fstep .n{font-size:var(--text-small);font-weight:600;color:var(--ink-soft);display:flex;gap:10px}
.fstep .n i{font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink)}
.fstep h3{font-size:var(--text-body-md);font-weight:600;line-height:1.3}
.fstep .v{font-size:var(--text-small);font-weight:400;line-height:1.45;color:var(--ink-soft);overflow-wrap:anywhere;min-width:0;margin-top:4px}
.fstep .v b{color:var(--ink);font-size:var(--text-body-md);font-weight:600}
.fstep .v .pill{display:table;margin-top:8px}
.fstep .v .act{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:var(--radius-sm);background:var(--ground);color:var(--ink);border:1px solid var(--line-strong);font-size:var(--text-small);font-weight:600}
.exnote{font-size:var(--text-small);font-weight:400;color:var(--ink-faint);margin-top:24px}
.price{border:1px solid var(--line);border-radius:var(--radius);background:var(--ground);overflow:hidden}
.price .top{padding:24px 24px 20px;border-bottom:1px solid var(--line)}
.price .plan{font-size:var(--text-small);font-weight:600;color:var(--ink-soft);margin-bottom:10px}
.price .amt{font-size:var(--text-hero);font-weight:var(--font-weight-hero);letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.price .amt small{font-size:var(--text-lead);font-weight:400;color:var(--ink-soft);letter-spacing:0}
.price .unit{font-size:var(--text-small);font-weight:400;color:var(--ink-soft);margin-top:8px}
.price ul{list-style:none;padding:16px 24px 8px}
.price li{padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--text-small);font-weight:400}
.price li:last-child{border-bottom:0}
.price .foot{padding:16px 24px 24px}
.price .foot .btn{width:100%}
.price .foot .cta-note{margin-top:10px;text-align:center}
.ph{color:var(--ink-faint);font-style:italic}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.qa{border-top:1px solid var(--line-strong);padding:18px 0 20px;min-width:0}
.qa h3{font-size:var(--text-body-md);font-weight:600;line-height:1.3;margin-bottom:6px}
.qa p{font-size:var(--text-small);font-weight:400;color:var(--ink-soft)}
.qa .tag{display:inline-block;margin-top:8px;font-size:var(--text-label);font-weight:var(--font-weight-label);color:var(--warn);background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);border-radius:var(--radius-sm);padding:2px 8px}
.band.close .cta-note{text-align:center}
@media (min-width:2000px){
 .nav .in,.band .in,.foot .in{max-width:1900px}
 .band.close .in{max-width:900px}
 .grid{gap:64px}
 .flow{gap:48px}
 .who{gap:0 64px}
}
@media (max-width:760px){
 :root{--nav:56px}
 .nav .in{padding:0 16px;gap:12px}
 .nav .links,.nav .btn.primary{display:none}
 .band{padding:40px 0}
 .band.hero{padding:28px 0 40px}
 .band.strip{padding:28px 0}
 .band .in{padding:0 16px}
 .grid{grid-template-columns:1fr;gap:28px}
 .c4,.c5,.c6,.c7,.c8,.c12{grid-column:auto}
 .order-2{order:0}
 .h1,.hero-h1{font-size:var(--text-display-phone)}
 .h2{font-size:var(--text-headline-phone)}
 .lead{font-size:var(--text-lead-phone)}
 .stack>*+*{margin-top:16px}
 .btn.lg{height:auto;min-height:48px;width:100%;white-space:normal;padding:12px 16px;line-height:1.25;text-align:center}
 .cta-row{flex-direction:column;align-items:stretch}
 .cta-note{text-align:left}
 .deskcard .head,.grp,.deskcard .foot{padding-left:16px;padding-right:16px}
 .due{padding:16px}
 .due .big{font-size:var(--text-display-phone)}
 .deskcard .foot{flex-direction:column;align-items:stretch}
 .deskcard .foot .act{text-align:center}
 .flow{grid-template-columns:1fr;gap:20px;margin-top:28px}
 .faq{grid-template-columns:1fr}
 .foot .in{padding:0 16px;flex-direction:column;gap:6px}
}
section.band{min-height:calc(100vh - 64px);display:grid;align-content:center;padding:96px 0}
@media(max-width:1023px){section.band{padding:72px 0}}
@media(max-width:760px){section.band{padding:56px 0}}
section.band.close{min-height:0;padding:96px 0}
@media(max-width:760px){section.band.close{padding:56px 0}}
.band.close .cta-row{margin-top:24px}
footer.foot{min-height:68px}
#how .grid.top>div{align-self:start;margin-top:0}
.bandcta{display:inline-flex;align-items:center;min-height:44px;margin-top:32px;font-size:var(--text-body-md);font-weight:600;color:var(--accent);text-decoration:none}
.band.dark .bandcta{color:var(--accent-on-dark)}

/* who band (B106 1, comp d1-dark): headline left, the eight trades as hairline rows right — no card grid */
.who-h{color:var(--on-accent)}
.who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.who div{padding:12px 0;border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line);margin-bottom:-1px;font-size:var(--text-body-md);line-height:1.4;min-width:0}
.who b{display:block;font-weight:600}
.who span{color:var(--dark-soft);font-size:var(--text-small)}
.who-note{margin-top:16px;color:var(--dark-soft)}
.band.dark .btn.primary{background:var(--accent-on-dark);border:0;color:var(--ink)}
@media(max-width:760px){.who{grid-template-columns:1fr;gap:0}}
/* B103 fix1 (comp brand1/d1-dark .dark-foot): the Record lockup anchors the dark band's foot row beside its CTA */
.dark-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:48px;padding-top:24px;border-top:1px solid var(--dark-line)}
.dark-foot .lockup{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--on-accent);white-space:nowrap}
.dark-foot .lockup svg{width:20px;height:20px;flex:none;color:var(--accent-on-dark)}
.dark-foot .bandcta{margin-top:0}
@media(max-width:760px){.dark-foot{flex-direction:column;align-items:flex-start}}
/* hub 2026-09-25 11:0x (RA-2 at 390): on phones the #how and #faq CTA sits under the heading, before the steps / answers; one CTA per band, no copy */
@media(max-width:760px){#how>.in,#faq>.in{display:flex;flex-direction:column;gap:28px}#faq>.in>.grid{display:contents}#how>.in>.grid,#faq .c4{order:0}#how>.in>.bandcta,#faq>.in>.bandcta{order:1;margin-top:0;align-self:flex-start}#how>.in>.flow,#how>.in>.exnote,#faq .c8{order:2}}
/* B47 (Chris 2026-09-25 11:41/11:44): one flat monthly price per trade */
.price .trades{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-top:2px}
.price .trades div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--text-small);font-weight:400}
.price .trades b{font-size:var(--text-body-md);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
@media(max-width:760px){.price .trades{grid-template-columns:1fr}}
/* B52: 44px tap floor on phones (DESIGN.md G3) */
@media (max-width:760px){.wordmark{display:inline-flex;align-items:center;min-height:44px}.btn{height:44px}.panel .after a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}}
/* SITE fix1 (judge r1 D1): each 44px side link already carries ~13px of air above and below its text, so a stacked
   second link drops its 16px margin to 4px; text-to-text then matches the gap above the first link (390: 30 / 31). */
@media (max-width:760px){.panel .after+.after{margin-top:4px}}
/* WGATE1: "Continue with Google" above the email field on sign-up and sign-in, then a thin "or" rule. Google's neutral
   theme (developers.google.com/identity/branding-guidelines): #F2F2F2 fill, no stroke, #1F1F1F words, the four-colour G
   at 20 px, 12 px from the words -- Google's brand values, not this theme's; the height and corners are the panel's
   primary button's. Shown only while the server can finish a Google sign-in and sign-up is open (routes/site.js
   markSignup writes <html data-google="on" data-signup="open">). */
.gbtn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:44px;margin-top:20px;padding:0 16px;border-radius:var(--radius-sm);background:#F2F2F2;color:#1F1F1F;font-size:var(--text-body-md);font-weight:600;white-space:nowrap}
.gbtn:hover{background:#E3E3E3}
.gbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gbtn svg{width:20px;height:20px;flex:none}
.or{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:var(--text-small);font-weight:400;color:var(--ink-faint)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
html:not([data-google="on"]) .g-on,html:not([data-signup="open"]) .g-on{display:none!important}
#gnote{margin:16px 0}
/* WFRONT1-c: the /for/<kind> front's extras on the home template */
.svc-line{font-size:var(--text-small);font-weight:400;color:var(--ink-soft)}
.cta-note a{color:var(--accent-ink);font-weight:400;text-decoration:underline}
html:not([data-signup="open"]) .for-signup{display:none}
@media (max-width:760px){.cta-note a{display:inline-flex;align-items:center;min-height:44px}}
/* WSORTED2: /privacy, one text page in this kit (brief 2026-10-02-sorted-behind-ra.md). The heading takes the left four
   columns under the wordmark and the text one column at the reading measure beside it (the site's head-left band),
   centred in the screen between the nav and the footer, which sits on the screen's floor. The mark's two fixed fills are
   tokens here: the halo is primary-soft (the other pages' fixed pale-blue fill) and the last-visit dot ink-faint. */
[data-page="privacy"]{display:flex;flex-direction:column;min-height:100vh}
[data-page="privacy"] .wordmark .ra-last{fill:var(--ink-faint)}
[data-page="privacy"] .wordmark .ra-halo{fill:var(--accent-soft)}
/* the footer's copyright and link share one centre line only while they sit in a row; once the footer stacks
   (<=760 px, flex-direction:column) align-items would centre them horizontally, so the stack sets left like home's */
@media (min-width:761px){[data-page="privacy"] .foot .in{align-items:center}}
.doc{flex:1;display:flex;align-items:center;padding:96px 0}
.doc .in{width:100%;max-width:1380px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px;align-items:start}
.doc h1{grid-column:span 4}
.doc .txt{grid-column:span 8;max-width:64ch}
.doc .txt p{font-size:var(--text-lead);line-height:1.6;color:var(--ink);text-wrap:pretty}
.doc .txt p+p{margin-top:20px}
.doc .txt .mail{margin-top:4px}
.doc .mail a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
[data-page="privacy"] .foot a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--ink-soft)}
[data-page="privacy"] .foot a:hover{color:var(--ink)}
@media (min-width:2000px){.doc .in{max-width:1900px;gap:64px}}
@media (max-width:760px){
 .doc{padding:40px 0 56px}
 .doc .in{grid-template-columns:1fr;gap:20px;padding:0 16px}
 .doc h1,.doc .txt{grid-column:auto}
 .doc .txt p{font-size:var(--text-lead-phone)}
 [data-page="privacy"] .foot .in{align-items:flex-start}
 /* B227: the nav's empty flex:1 spacer cost two 12px gaps, pushing Sign in to 331 at 320. The spacer alone keeps the
    two apart (Sign in's own 16px padding is the floor), so wider phones look the same and 320 has no sideways scroll */
 [data-page="privacy"] .nav .in{gap:0}
}