/* Reactivation Agent — the home page and every /for/<kind> page (app/public/ra/index.html, rendered by fronts/index.js).
   WSITE2: comp B "the rhythm, drawn" (wsite2/comp-b/index.html, Chris 2026-09-29 20:32 "I like B"), lifted as is,
   amended by brief r2: the business field in the first screen (.pick), the honest line in the definition's slot (.slot),
   the rhythm scene following the hero's choice (.chg), "Continue with Google" in the close's ask (WGATE1: .gbtn, .g-on)
   and the re-tune (.swap cross-fade, .redraw timeline). Every value is a tokens.css variable (the Google button's
   colours are Google's own).
   fix1: six type stops at 1440, one weight per size except body (400 and 600): display/650 · h2/620 · lede/400 ·
   body/400 · body/600 · small/400 (the gate counts size/weight pairs; comp B's title stop folds into lede). */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); color: var(--ink); scroll-behavior: smooth; }
body { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: var(--t-body); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; font-optical-sizing: auto; font-feature-settings: "cv11", "ss03"; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { list-style: none; }
.tab { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 6px; }
.dark :focus-visible { outline-color: var(--lit); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 40; display: inline-flex; align-items: center; min-height: 44px; background: var(--cobalt); color: #fff; padding: 0 14px; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }

nav.top { position: fixed; inset: 0 0 auto 0; height: var(--nav); z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gut); background: rgba(255, 255, 255, .88); backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px); border-bottom: 1px solid var(--line); transition: background .3s, border-color .3s, color .3s; }
nav.top.ondark { background: rgba(13, 18, 32, .86); border-color: var(--dk-line); color: var(--dk-ink); }
/* the mark (Chris 2026-09-30 22:57, comp wsite2/logo/logo.html v=a): last visit (grey dot), the rhythm (line), due now (the
   cobalt dot in its ring), sized in em so at the 18 px wordmark every one of its 52 x 21 units is one pixel; Inter 650 -.025em */
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 650; font-size: var(--t-lede); letter-spacing: -.025em; }
.brand svg { width: 2.8889em; height: 1.1667em; flex: none; overflow: visible; color: var(--cobalt); }
.brand .ra-halo { transform-box: fill-box; transform-origin: center; }
nav.top.ondark .brand svg { color: var(--lit); }
nav.top.ondark .brand .ra-halo { fill: #142664; } /* the comp's dark ring: cobalt over the dark band at 40 %, so it keeps its hue */
/* the pulse ("Make that pulse every so often too left to right"): every 8 s a light leaves the last visit and runs the line
   into the due dot (0-700 ms), and the due dot's ring swells once and settles (600-1000 ms); transform/opacity only, none
   under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .brand .ra-run { animation: ra-run 8s 2s infinite, ra-glow 8s 2s infinite; }
  .brand .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.top .links { display: flex; align-items: center; gap: 28px; font-size: var(--t-body); color: var(--muted); }
nav.top .links a { display: inline-flex; align-items: center; min-height: 44px; }
nav.top.ondark .links { color: var(--dk-muted); }
nav.top .links a:hover { color: var(--ink); }
nav.top.ondark .links a:hover { color: var(--dk-ink); }
nav.top .links .go { color: var(--cobalt); font-weight: 600; }
nav.top.ondark .links .go { color: var(--lit); }
/* B147: the wordmark and every bar label hold one line unless a rule below says otherwise (at 641-760 on 5eb2008 "How it /
   works", "Sign / in" and "Reactivation / Agent" broke onto two lines) */
nav.top .brand { flex: none; white-space: nowrap; }
nav.top .links a { white-space: nowrap; }
/* B147/B148: one of each pair shows, by <html data-signup> (routes/site.js markSignup): the free count and Save my spot
   while sign-up is closed (as landed), Create account once it is open */
html:not([data-signup="open"]) .m-open, html[data-signup="open"] .m-wait { display: none !important; }

.rail { position: fixed; right: clamp(12px, 1.6vw, 28px); top: 50%; transform: translateY(-50%); z-index: 15; display: flex; flex-direction: column; gap: 6px; }
.rail a { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 24px; height: 24px; }
.rail a i { width: 7px; height: 7px; border-radius: 50%; background: var(--line2); transition: background .2s, transform .2s; }
.rail a.on i { background: var(--cobalt); transform: scale(1.25); }
.rail.ondark a i { background: var(--dk-line); }
.rail.ondark a.on i { background: var(--lit); }
.rail a span { position: absolute; right: 26px; white-space: nowrap; font-size: var(--t-small); color: var(--ink2); opacity: 0; transition: opacity .2s; pointer-events: none; background: var(--paper); padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); }
.rail a:hover span, .rail a:focus-visible span { opacity: 1; }

section.s { position: relative; padding: calc(var(--nav) + clamp(20px, 4.5vh, 56px)) var(--gut) clamp(24px, 4.5vh, 56px); display: flex; align-items: center; }
section.s > .in { width: 100%; max-width: var(--max); margin: 0 auto; }
.s.paper { background: var(--paper); }
.s.wash { background: var(--wash); }
.s.dark { background: var(--dk); color: var(--dk-ink); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }
.grid.mid { align-items: center; }
.label { display: block; font-size: var(--t-body); font-weight: 600; color: var(--cobalt); margin-bottom: clamp(12px, 2vh, 18px); }
.dark .label { color: var(--lit); }
h1 { font-size: var(--t-display); font-weight: 650; letter-spacing: -.05em; line-height: .96; text-wrap: balance; }
h2 { font-size: var(--t-h2); font-weight: 620; letter-spacing: -.04em; line-height: 1.02; text-wrap: balance; }
.lede { font-size: var(--t-lede); color: var(--muted); line-height: 1.5; max-width: 34em; }
.copy .lede { margin-top: 18px; }
.dark .lede { color: var(--dk-muted); }
.small { font-size: var(--t-small); color: var(--dim); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 10px; background: var(--cobalt); color: #fff; font-weight: 600; font-size: var(--t-body); white-space: nowrap; border: 0; cursor: pointer; transition: background .15s, transform .15s; }
.btn:hover { background: #1A3DB6; }
.btn:active { transform: scale(.98); background: var(--cobalt-ink); }
.btn[disabled] { opacity: .6; cursor: progress; }
.tl { display: inline-flex; align-items: center; min-height: 48px; padding: 0 6px; color: var(--ink2); font-weight: 600; background: none; border: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 5px; }
.tl:hover { text-decoration-color: var(--ink2); }
.tl.sm { min-height: 44px; }
.dark .tl { color: var(--dk-muted); }

/* the re-tune: changed words cross-fade (140 ms out, 140 ms in); reduced motion swaps instantly */
[data-f], [data-h] { transition: opacity var(--fade) ease; }
.swap { opacity: 0 !important; }

/* ============ 1 START ============ */
/* r3 (Chris 2026-09-30 17:57 "the page is pretty busy. I don't even notice this top-right part where it says, "What kind
   of business do you run?"", 20:15 "Yes" to the order): the 2x2 of four equal blocks becomes two screens. The ask: the
   H1, the business question directly under it at its width (heading type, a cobalt edge), the definition and the button
   under the question, quieter. The proof, one step down: the timeline walking and the plan card, its own scene with its
   own snap and dot, peeking into the first screen under the button (r3b, lead ruling) -- stacked whole on one screen the
   blocks measured 853 px of 755 at 1440 x 900 and 776 of 635 at 1024 x 768, and nothing shrinks or hides (TASTE 3). */
#start { align-items: stretch; }
#start .in { display: flex; flex-direction: column; justify-content: center; }
#start .top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: start; align-content: center; }
#start .claim, #start .pick, #start .slot, #start .acts { grid-column: 1 / -1; }
#start .slot .lede, #start .honest { max-width: 40em; font-size: var(--t-body); }
#start .leadin { font-size: var(--t-lede); color: var(--muted); margin-bottom: clamp(10px, 1.8vh, 20px); max-width: 34em; }
#start .slot { margin-top: clamp(16px, 2.8vh, 32px); }
#start .acts { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: clamp(16px, 2.8vh, 32px); }

/* the business field: a text box and a list in one (brief r2 SELECTOR); r3: the label reads as the line after the H1
   (the h2 stop), the box is the H1's width with a cobalt edge and its words above the lede's size */
.pick { position: relative; }
#start .pick { margin-top: clamp(14px, 2.4vh, 32px); }
.pick-l { display: block; font-size: var(--t-h2); font-weight: 620; letter-spacing: -.04em; line-height: 1.02; color: var(--ink); margin-bottom: clamp(12px, 2vh, 20px); text-wrap: balance; }
.pick-f { position: relative; }
/* r3b (lead ruling 2026-09-30): the field's words sit one stop below the question (h2 > lede stop > the definition, which
   steps down to body), so the whole placeholder shows at 390 and it no longer competes with the H1 at 1440 */
#biz { height: max(56px, calc(var(--t-lede) + 42px)); padding: 0 64px 0 18px; border: 2px solid var(--cobalt); border-radius: 12px; font-size: var(--t-lede); font-weight: 400; letter-spacing: -.01em; }
#biz::placeholder { color: var(--dim); font-weight: 400; }
#biz:focus { outline: 2px solid var(--cobalt); outline-offset: 3px; box-shadow: none; } /* the edge is already cobalt, so focus wears the page's own ring */
/* the list opens from a cobalt-tinted square inside the box's right end, so "open the list" reads at a glance */
#biz-b { top: 50%; right: 8px; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 9px; background: var(--cobalt-soft); color: var(--cobalt); transition: box-shadow .2s, color .2s; }
#biz-b svg { width: 22px; height: 22px; }
#biz-b:hover { box-shadow: inset 0 0 0 1.5px var(--cobalt); color: var(--cobalt-ink); }
#biz-list { max-height: min(360px, 34vh); } /* r3: the field sits lower, so the open list still ends inside the screen */
.field { width: 100%; height: var(--field-h); padding: 0 52px 0 16px; border-radius: 10px; border: 1px solid var(--line2); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--t-lede); font-weight: 400; letter-spacing: -.01em; transition: border-color .2s, box-shadow .2s, color .2s; }
.field::placeholder { color: var(--dim); font-weight: 400; }
.field:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 4px var(--cobalt-soft); }
.field.hit { border-color: var(--cobalt); color: var(--cobalt-ink); }
.pick-b { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 8px; }
.pick-b svg { width: 16px; height: 16px; transition: transform .2s; }
.pick-b[aria-expanded="true"] svg { transform: rotate(180deg); }
.pick-b:hover { color: var(--ink); }
.pick-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: min(360px, 50vh); overflow-y: auto; background: var(--paper); border: 1px solid var(--line2); border-radius: 12px; padding: 6px; box-shadow: 0 18px 40px -20px rgba(13, 18, 32, .35); }
.pick-list li { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; font-size: var(--t-body); color: var(--ink2); cursor: pointer; }
.pick-list li:hover, .pick-list li.act { background: var(--cobalt-soft); color: var(--cobalt-ink); }
.pick-list li[aria-selected="true"] { font-weight: 600; color: var(--cobalt-ink); }
.pick-list li[data-key=""] { color: var(--muted); }
.slot { display: grid; }
.slot > * { grid-area: 1 / 1; }
.slot.unk .lede { visibility: hidden; }
.honest { font-size: var(--t-lede); line-height: 1.5; color: var(--ink2); max-width: 34em; }

.stage { margin-top: clamp(24px, 4.4vh, 52px); }
/* r3c (Codex r4): the ruler, the card and the connector between them are one group (#grp), so the scene can place them as one */
.grp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: start; position: relative; }
/* r3: the rows that are not due go lighter (brief FIRST SCREEN r3 3), so the due ones carry the timeline; a row lights
   when the walk reaches it. Names stay at the dim ink (5.32:1 on paper). */
.rr:not(.due) .who b { color: var(--dim); }
.rr:not(.due) .span { background: var(--line); }
.rr:not(.due) .v { background: var(--line2); }
/* the card holds the money line and the longest business's text, so it takes five of twelve columns (comp B's 1024-1279 split) */
/* fix1 (judge D2): a 24 px lane above the axis is the playhead tag's own corridor; no label lives in it */
/* fix3 (lead decision 2): the date range ends --ri before the ruler's right edge, the due mark's radius plus its 4 px halo
   (6.5 + 4 = 10.5 px), so a mark at the range's end draws whole; the axis, every track and the date line share that inset */
.ruler { grid-column: 1 / span 7; position: relative; overflow-x: clip; padding-top: 24px; --ri: 11px; }
.planb { grid-column: 8 / span 5; }
.rl-head { display: grid; grid-template-columns: var(--nw, 150px) minmax(0, 1fr); height: 26px; border-bottom: 1px solid var(--line2); font-size: var(--t-small); color: var(--dim); }
.rl-head .ticks { position: relative; margin-right: var(--ri); }
.rl-head .ticks span { position: absolute; bottom: 6px; transform: translateX(-50%); white-space: nowrap; }
.rl-head .ticks span::after { content: ""; position: absolute; left: 50%; bottom: -7px; height: 5px; width: 1px; background: var(--line2); }
.rl-head .ttl { align-self: end; padding-bottom: 6px; font-size: var(--t-small); }
.rl-head .ttl b { color: var(--ink); font-weight: 400; }
.rl-rows { position: relative; }
.rr { display: grid; grid-template-columns: var(--nw, 150px) minmax(0, 1fr); height: var(--rh, 36px); align-items: center; border-bottom: 1px solid var(--line); }
.rr .who { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; padding-right: 10px; min-width: 0; }
.rr .who b { font-size: var(--t-small); font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s; }
.rr .who span { font-size: var(--t-small); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr .tr { position: relative; height: 100%; margin-right: var(--ri); }
.rr .span { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--line2); border-radius: 2px; transition: background .3s; }
.rr .v { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--muted); }
.rr .dm { position: absolute; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; border: 2px solid var(--line2); background: var(--paper); transition: background .3s, border-color .3s, box-shadow .3s; } /* fix2: colour only, so a row opening its lane never slides the mark */
/* maker1 (judge r3 #1-2, comp B's rule): every tag sits 15 px right of its own mark (clear of the due mark's 4 px halo), in one
   even row. It carries its own paper, above the date line (z 4 > the line's 3), so where the line meets a word it yields a
   corridor to it (TASTE 2); a tag never lies on its customer's line or dot. home.js measures the track's right inset so the
   farthest tag ends inside the ruler. */
.rr .tag { position: absolute; top: 50%; transform: translateY(-50%); margin-left: 11px; padding: 0 4px 0 8px; border-radius: 4px; background: var(--paper); z-index: 4; font-size: var(--t-small); font-weight: 400; white-space: nowrap; color: var(--cobalt); opacity: 0; transition: opacity .3s; }
/* maker1: the tag's paper begins where the due mark's halo ends (6.5 + 4 = 10.5 px), so the date line can never fall in a gap
   between a mark and its own word; the word itself still starts 19 px from the mark's centre */
.rr .off { position: absolute; top: 50%; transform: translate(-100%, -50%); margin-left: -12px; font-size: var(--t-small); color: var(--dim); white-space: nowrap; }
.rr .span.open { right: 0; width: auto !important; background: linear-gradient(90deg, var(--line2), rgba(205, 210, 219, 0)); }
.rr.due .who b { color: var(--ink); }
.rr.due .span { background: var(--cobalt); }
.rr.due .dm { background: var(--cobalt); border-color: var(--cobalt); box-shadow: 0 0 0 4px var(--cobalt-soft); }
.rr.due .tag { opacity: 1; }
/* maker1 (Codex review 00:20): a due customer is said by the mark alone -- filled, its line cobalt, its name in ink -- so no
   word can ever sit on or across the today line; "Coming due" keeps its word beside its ring on the future side */
.rr.due:not(.booked):not(.pulled) .tag { display: none; }
.rr.coming .dm { border-color: var(--cobalt); }
.rr.coming .tag { opacity: 1; color: var(--ink2); }
.rr.held .tr::after { content: attr(data-held); position: absolute; left: 0; top: 50%; transform: translateY(-50%); padding: 0 4px; margin-left: -4px; border-radius: 4px; background: var(--paper); z-index: 4; font-size: var(--t-small); color: var(--dim); white-space: nowrap; }
/* maker1: the held note carries its own paper above the date line too (a held row has no line or dot of its own to cover) */
.rr.pulled { background: var(--cobalt-soft); }
.rr.booked .tag { color: #fff; background: var(--cobalt); padding: 2px 7px; border-radius: 5px; }
/* the first customer's mark leads across today to its Booking request, which sits on the future side (home.js sets --lead) */
.rr.booked .tag::before { content: ""; position: absolute; right: 100%; top: 50%; width: var(--lead, 0px); height: 1.5px; margin-top: -0.75px; background: var(--cobalt); }
.today { position: absolute; top: -50px; bottom: 0; left: calc(var(--nw, 150px) + (100% - var(--nw, 150px) - var(--ri, 0px)) * var(--tx, 0)); width: 0; border-left: 1.5px solid var(--cobalt); z-index: 3; pointer-events: none; }
.today span { position: absolute; top: 0; left: 0; transform: translateX(-50%); font-size: var(--t-small); font-weight: 400; line-height: 20px; padding: 0 7px; border-radius: 5px; background: var(--cobalt); color: #fff; white-space: nowrap; pointer-events: auto; }
.today.r span { transform: translateX(calc(-100% + 1px)); }
.rl-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: var(--t-small); color: var(--dim); }
/* the re-tune redraws the timeline: each line grows from its last visit, the marks settle (<= 400 ms) */
.redraw .span { animation: grow .32s cubic-bezier(.3, 0, .2, 1) both; }
.redraw .dm, .redraw .off, .redraw .rr.held .tr::after { animation: fin .32s ease both; }
/* maker1 (judge r3 #3): a tag never fades in with the redraw; it lights only when the walk reaches its customer */
.redraw .rr .tag { transition: none; }
@keyframes grow { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fin { from { opacity: 0; } to { opacity: 1; } }
.planb .card { border: 1px solid var(--line2); border-radius: 14px; background: var(--paper); padding: 14px 16px 16px; box-shadow: 0 1px 2px rgba(13, 18, 32, .04), 0 18px 40px -24px rgba(13, 18, 32, .28); transition: border-color .4s; }
.planb .card.on { border-color: var(--cobalt); }
.planb .hd { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; font-size: var(--t-small); color: var(--dim); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.planb .hd b { color: var(--ink); font-size: var(--t-body); font-weight: 600; }
.planb .hd .ex { margin-left: auto; }
.planb .big { display: flex; align-items: center; gap: 12px; padding: 10px 0 8px; }
.planb .big b { font-size: var(--t-h2); font-weight: 620; letter-spacing: -.04em; color: var(--cobalt); line-height: 1; }
.planb .big > span { font-size: var(--t-small); color: var(--ink2); font-weight: 400; }
.planb .big em { display: block; font-style: normal; font-weight: 400; color: var(--muted); margin-top: 2px; }
/* fix1 (judge D3): the card is whole from the first frame -- no faded reason, text or Approve */
.planb .why { font-size: var(--t-small); color: var(--muted); padding: 8px 0 10px; border-top: 1px solid var(--line); }
.planb .why b { color: var(--ink); font-size: var(--t-body); font-weight: 600; display: block; }
.b-thread { display: flex; flex-direction: column; gap: 8px; }
.bub { max-width: 92%; font-size: var(--t-small); line-height: 1.45; padding: 9px 12px; border-radius: 14px; }
.bub .who { display: block; font-size: var(--t-small); color: var(--dim); margin-bottom: 2px; }
.bub.out { align-self: flex-end; background: var(--wash); color: var(--ink); border-bottom-right-radius: 4px; }
.bub.in { align-self: flex-start; background: var(--cobalt); color: #fff; border-bottom-left-radius: 4px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.bub.in .who { color: rgba(255, 255, 255, .78); }
.appr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.appr .abtn { display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--cobalt); color: var(--cobalt); font-weight: 600; font-size: var(--t-body); white-space: nowrap; transition: background .25s, color .25s, transform .15s; }
.card.s4 .appr .abtn { background: var(--cobalt); color: #fff; transform: scale(.98); }
.appr .cap { font-size: var(--t-small); color: var(--dim); }
.card.s5 .bub.in { opacity: 1; transform: none; }
.link-svg { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 2; }
.link-svg path { fill: none; stroke: var(--cobalt); stroke-width: 1.5; stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); transition: stroke-dashoffset .8s cubic-bezier(.6, 0, .3, 1); }
.link-svg.on path { stroke-dashoffset: 0; }
/* maker1 (judge r3 #3): on a re-tune the previous connector is cut at once, never un-drawn over the new first customer */
.link-svg.cut path { transition: none; }

/* ============ 2 RHYTHM ============ */
#rhythm .head { grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: inherit; align-items: end; }
#rhythm .head .h { grid-column: 1 / span 6; }
#rhythm .head .ask { grid-column: 7 / span 6; }
.fieldl { display: block; font-size: var(--t-lede); font-weight: 400; letter-spacing: -.01em; margin-bottom: 6px; }
.fieldl [data-f] { color: var(--cobalt-ink); }
.chg { font-size: var(--t-body); color: var(--muted); }
.chg .tl { min-height: 44px; }
/* fix1 (judge D6): the rulers share the height reserved for the longest business, so two services never leave a band */
.strips { grid-column: 1 / span 12; margin-top: clamp(22px, 4.4vh, 48px); display: flex; flex-direction: column; }
.st-head { display: grid; grid-template-columns: var(--sw, 260px) minmax(0, 1fr); font-size: var(--t-small); color: var(--dim); padding-bottom: 8px; border-bottom: 1px solid var(--line2); }
.st-head .sc { position: relative; height: 16px; }
.st-head .sc span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.st-head .sc span:first-child { transform: none; }
.st-head .sc span:last-child { transform: translateX(-100%); }
.st-head b { color: var(--ink); font-weight: 600; font-size: var(--t-body); }
.strip { flex: 1 1 auto; display: grid; grid-template-columns: var(--sw, 260px) minmax(0, 1fr); align-items: center; min-height: clamp(52px, 8vh, 76px); border-bottom: 1px solid var(--line); animation: rise .42s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.strip .nm b { display: block; font-size: var(--t-body); font-weight: 600; }
.strip .nm span { font-size: var(--t-body); color: var(--cobalt); font-weight: 400; }
.strip .tk { position: relative; height: 30px; }
.strip .tk::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line2); }
.strip .v0 { position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--muted); }
.strip .m { position: absolute; top: 50%; width: 2px; height: 16px; margin: -8px 0 0 -1px; border-radius: 1px; background: var(--line2); animation: flash 6s infinite; }
@keyframes flash { 0% { background: var(--cobalt); box-shadow: 0 0 0 4px var(--cobalt-soft); height: 22px; margin-top: -11px; } 10%, 100% { background: var(--line2); box-shadow: none; height: 16px; margin-top: -8px; } }
.strip .d { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--ink); opacity: .85; animation: go 12s linear infinite; }
.strip .d2 { animation-delay: -6s; }
@keyframes go { from { left: 0; } to { left: 100%; } }
.strip .more { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; font-size: var(--t-small); color: var(--dim); background: var(--wash); padding-left: 8px; }
.truth { grid-column: 1 / span 12; margin-top: 14px; color: var(--muted); font-size: var(--t-body); }

/* ============ 3 WORTH ============ */
#worth .copy { grid-column: 6 / span 7; grid-row: 1; align-self: center; }
#worth .dots { grid-column: 1 / span 5; grid-row: 1; align-self: center; }
.matrix { display: grid; grid-template-columns: repeat(20, 1fr); gap: clamp(3px, .45vw, 7px); max-width: 480px; }
.matrix i { aspect-ratio: 1; border-radius: 50%; background: var(--line2); }
.matrix i.on { background: var(--cobalt); }
.matrix i.h { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.legend { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; font-size: var(--t-body); color: var(--muted); max-width: 560px; }
.legend b { color: var(--ink); font-weight: 600; }
.legend .k { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: 0; background: var(--line2); }
.legend .k-on { background: var(--cobalt); }
.legend .k-h { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.money { margin-top: clamp(14px, 2.4vh, 22px); font-size: var(--t-lede); font-weight: 400; }
.money .at { color: var(--muted); font-size: var(--t-body); display: block; margin-top: 2px; }
.ledger { width: 100%; border-collapse: collapse; margin-top: clamp(16px, 3vh, 28px); font-size: var(--t-body); }
.ledger th, .ledger td { text-align: left; padding: clamp(7px, 1.2vh, 11px) 12px clamp(7px, 1.2vh, 11px) 0; border-bottom: 1px solid var(--line); font-weight: 400; vertical-align: baseline; }
.ledger thead th { font-size: var(--t-small); color: var(--dim); font-weight: 400; }
.ledger tbody th { font-weight: 600; color: var(--ink2); white-space: nowrap; }
.ledger td { color: var(--dim); }
.ledger tr.lit th { color: var(--cobalt); }
.ledger tr.lit td { color: var(--ink); }
.ledger tr.lit th, .ledger tr.lit td { border-bottom: 2px solid var(--cobalt); }

/* ============ 4 HOW (dark band) ============ */
#how .copy { grid-column: 1 / span 5; }
#how .rec { grid-column: 7 / span 6; }
.steps { margin-top: clamp(20px, 3.6vh, 36px); border-top: 1px solid var(--dk-line); }
.steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 12px; padding: clamp(9px, 1.6vh, 14px) 0; border-bottom: 1px solid var(--dk-line); color: var(--dk-dim); transition: color .35s; }
.steps li .n { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--dk-line); display: grid; place-items: center; font-size: var(--t-small); transition: all .35s; }
.steps li b { font-size: var(--t-body); font-weight: 600; color: var(--dk-muted); transition: color .35s; }
.steps li p { grid-column: 2; font-size: var(--t-small); margin-top: 2px; }
.steps li.on .n { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.steps li.on b { color: var(--dk-ink); }
.steps li.on { color: var(--dk-muted); }
.steps li.done .n { border-color: var(--lit); color: var(--lit); }
.record { border: 1px solid var(--dk-line); border-radius: 16px; background: var(--dk2); overflow: hidden; }
.record .rh { display: flex; align-items: baseline; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--dk-line); }
.record .rh b { font-size: var(--t-lede); font-weight: 400; }
.record .rh span { color: var(--dk-dim); font-size: var(--t-small); }
.record .rh .ex { margin-left: auto; }
/* fix1 (gate axe_serious): the record is whole at every step -- a step not reached yet is dimmer ink (4.8:1),
   never a ghost at 16 % opacity; the lit step carries the bar and the tint */
.record li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: clamp(10px, 1.8vh, 16px) 20px; border-bottom: 1px solid var(--dk-line); position: relative; transition: background .45s; }
.record li:last-child { border-bottom: 0; }
.record li::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--lit); opacity: 0; transition: opacity .45s; }
.record li:not(.seen):not(.on) .t { color: var(--dk-dim); }
.record li:not(.seen):not(.on) .t b { color: var(--dk-muted); }
.record li.on { opacity: 1; background: rgba(79, 114, 255, .07); }
.record li.on::before { opacity: 1; }
.record li .t { font-size: var(--t-body); color: var(--dk-muted); min-width: 0; }
.record li .t b { display: block; color: var(--dk-ink); font-weight: 600; }
.record li .st { font-size: var(--t-small); padding: 3px 9px; border-radius: 6px; border: 1px solid var(--dk-line); color: var(--dk-dim); white-space: nowrap; }
.record li.on .st, .record li.seen .st { border-color: rgba(143, 170, 245, .55); color: var(--lit); }
.record .bb { display: inline-block; background: #222A3E; color: var(--dk-ink); padding: 7px 10px; border-radius: 12px; border-bottom-right-radius: 4px; font-size: var(--t-small); margin-top: 2px; }
.record .bi { display: table; background: var(--cobalt); color: #fff; padding: 6px 10px; border-radius: 12px; border-bottom-left-radius: 4px; font-size: var(--t-small); margin-top: 4px; }
.howfoot { margin-top: 14px; font-size: var(--t-small); color: var(--dk-dim); }

/* ============ 5 CHARGE ============ */
#charge .copy { grid-column: 8 / span 5; grid-row: 1; }
#charge .moment { grid-column: 1 / span 6; grid-row: 1; }
/* fix2 (judge r2 #5, TASTE 3): the card is as tall as its content and centred against the copy column, never stretched */
@media (min-width: 1024px) { #charge .moment { align-self: center; } }
.moment { border: 1px solid var(--line2); border-radius: 16px; background: var(--paper); box-shadow: 0 30px 60px -40px rgba(13, 18, 32, .35); overflow: hidden; }
.moment .mt { padding: 22px 24px; }
.moment .bub { opacity: 1; transform: none; max-width: 100%; font-size: var(--t-body); }
.moment .bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 24px; background: var(--wash); border-top: 1px solid var(--line); }
.moment .sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--line); font-size: var(--t-body); color: var(--ink2); }
.moment .tg { width: 44px; height: 26px; border-radius: 13px; background: var(--cobalt); position: relative; flex: none; }
.moment .tg::after { content: ""; position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
#charge ul { margin-top: clamp(18px, 3vh, 28px); }
#charge li { padding: clamp(9px, 1.6vh, 14px) 0 clamp(9px, 1.6vh, 14px) 18px; border-left: 2px solid var(--line2); color: var(--muted); font-size: var(--t-body); }
#charge li + li { margin-top: 6px; }
#charge li b { color: var(--ink); font-weight: 600; }

/* ============ 7 TRADE ============ */
#trade .copy { grid-column: 1 / span 5; }
#trade .list { grid-column: 7 / span 6; }
.pr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: 16px; align-items: baseline; padding: clamp(8px, 1.5vh, 13px) 12px; border-bottom: 1px solid var(--line); color: var(--dim); transition: background .3s, box-shadow .3s; }
.prices { border-top: 1px solid var(--ink); }
.pr b { color: var(--ink); font-weight: 600; font-size: var(--t-body); }
.pr .p { color: var(--ink); font-size: var(--t-body); font-weight: 600; }
.pr .p small { font-size: var(--t-small); color: var(--dim); font-weight: 400; }
.pr.on { background: var(--cobalt-soft); box-shadow: inset 3px 0 0 var(--cobalt); }
.pr.on .p { color: var(--cobalt-ink); }
.pr.ask a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cobalt); font-weight: 600; }
.pfoot { margin-top: 14px; font-size: var(--t-small); color: var(--dim); }

/* ============ 8 CLOSE (dark) ============ */
#close .faq { grid-column: 1 / span 7; }
#close .ask { grid-column: 9 / span 4; align-self: center; }
.faq h2 { font-size: var(--t-lede); font-weight: 400; letter-spacing: -.01em; margin-bottom: clamp(12px, 2vh, 20px); }
details { border-bottom: 1px solid var(--dk-line); }
details:first-of-type { border-top: 1px solid var(--dk-line); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: clamp(44px, 6.4vh, 56px); font-size: var(--t-body); font-weight: 600; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: var(--t-lede); color: var(--dk-dim); flex: none; font-weight: 400; }
details[open] summary::after { content: "–"; }
details p { padding: 0 0 14px; color: var(--dk-muted); font-size: var(--t-body); max-width: 44em; }
/* WFILE1 r2: the FAQ's sample link starts on the answer's own left edge (every other .tl keeps its 6 px side padding) */
.faq details .tl { padding: 0; }
#close .ask h2 { font-size: var(--t-h2); margin-bottom: clamp(18px, 3vh, 28px); }
#close .ask .acts { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
/* WGATE1 r3 (judge D1): "Continue with Google" follows the cobalt primary here, the one sign-up ask left on the page
   (scene 6, its second copy, is gone). 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 page's tokens; the corners and height are this page's buttons'. Shown only while the server can finish a Google
   sign-in and sign-up is open (<html data-google="on" data-signup="open">, routes/site.js markSignup). */
.gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 22px; border-radius: 10px; background: #F2F2F2; color: #1F1F1F; font-weight: 600; font-size: var(--t-body); white-space: nowrap; transition: background .15s, transform .15s; }
.gbtn:hover { background: #E3E3E3; } /* Google's hover: #303030 at 8 % over the fill */
.gbtn:active { transform: scale(.98); }
.gbtn svg { width: 20px; height: 20px; flex: none; }
html:not([data-google="on"]) .g-on, html:not([data-signup="open"]) .g-on { display: none !important; }
/* on a dark band, Google's dark theme from the same page: #131314 fill, a 1 px #8E918F stroke, #E3E3E3 words (hover
   #E3E3E3 at 8 %). The neutral fill read about 17:1 against the close's ground where the cobalt primary reads about
   2.4:1, so the secondary out-shouted the primary (TASTE 2: the most important thing is the loudest) */
.dark .gbtn { background: #131314; color: #E3E3E3; box-shadow: inset 0 0 0 1px #8E918F; }
.dark .gbtn:hover { background: #242425; }
/* the pair shares a row where the column holds both, and stacks at the column's width where it doesn't (1440: 4 of 12
   columns, 422 px for 428), never two ragged widths; with Google off the primary keeps its own width */
html[data-google="on"][data-signup="open"] #close .ask .acts { gap: 12px; }
html[data-google="on"][data-signup="open"] #close .ask .acts > a { flex: 1 1 auto; }
footer { margin-top: clamp(24px, 5vh, 56px); font-size: var(--t-small); color: var(--dk-dim); display: flex; flex-direction: column; gap: 4px; }
/* B147: the eight trade pages, by the names the price list prints, above the legal lines */
.bytrade { display: flex; flex-wrap: wrap; gap: 0 16px; margin-bottom: 10px; }
.bytrade span { width: 100%; }
.bytrade a { display: inline-flex; align-items: center; min-height: 32px; color: var(--dk-muted); }
.bytrade a:hover { color: var(--dk-ink); }
/* WSORTED2: the copyright line carries the site's Privacy link, in the "By trade" links' colour; on a wide screen the
   line keeps its own height, so nothing else in the closing band moves (phones give the link its 44 px, below) */
footer .legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
footer .legal a { display: inline-flex; align-items: center; color: var(--dk-muted); }
footer .legal a:hover { color: var(--dk-ink); }

/* fix1 (judge D7): the base rule sits before the media queries that show it (it used to follow and win) */
.planb .hd .cnt2 { display: none; color: var(--cobalt); font-size: var(--t-body); font-weight: 600; }
@media (min-width: 1024px) and (min-height: 640px) {
  html { scroll-snap-type: y mandatory; }
  section.s { height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
  /* r3: START is two screens, the ask then the proof, each one viewport with its own snap (home.js gives each a dot) */
  #start { height: auto; overflow: visible; scroll-snap-align: none; scroll-snap-stop: normal; padding-top: 0; padding-bottom: 0; }
  /* r3b (lead ruling): the ask is as tall as its words, so the timeline scene starts inside the first viewport, under the
     button, and its date tag and top customers walk in the first screen's bottom band (the peek). The timeline scene
     snaps at its own top and is exactly one viewport there; the two scenes overlap by the peek. */
  #start .top, #start .stage { scroll-snap-align: start; scroll-snap-stop: always; margin-top: 0; }
  #start .top { align-content: start; padding: calc(var(--nav) + clamp(20px, 4.5vh, 56px)) 0 clamp(8px, 1.4vh, 16px); }
  /* r3c (Codex r4: ~250 px of blank under the button at 2000 x 1250; the snapped scene parked high over a 234-364 px
     bottom band): the scene's top gap no longer grows with the screen, so the timeline's date tag sits 54-80 px under the
     button at every height; the group rides sticky inside the scene, so where the scene snaps it holds centred in the
     window, nudged down a quarter of the nav's height (home.js measures the group's height into --gh) */
  #start .stage { height: 100svh; padding: clamp(32px, 5.6vh, 64px) 0 0; }
  #start .grp { position: sticky; top: max(var(--nav), calc((100svh - var(--gh, 100svh)) / 2 + var(--nav) / 4)); align-items: center; }
  .ruler { --rh: 48px; }
  .rr .who b { font-size: var(--t-body); }
}
@media (min-width: 1024px) and (min-height: 860px) { .ruler { --rh: 56px; } }
/* r3: the proof has a screen of its own, so a short screen no longer hides two customers, the money line or the card's
   padding to fit the first screen; only the rhythm scene's rulers tighten here */
@media (min-width: 1024px) and (max-height: 820px) {
  .strip { min-height: 48px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --t-display: clamp(40px, min(5.2vw, 8.4vh), 92px); }
  #start .acts { flex-wrap: nowrap; gap: 10px; }
  #start .acts .btn { padding: 0 16px; font-size: var(--t-body); }
  .ruler { grid-column: 1 / span 7; }
  .planb { grid-column: 8 / span 5; }
  .planb .big { display: none; }
  .planb .hd .cnt2 { display: inline; }
  .pr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; padding: 8px 12px; }
  .pr > span:not(.p) { grid-column: 1 / -1; order: 3; font-size: var(--t-small); }
  /* fix1 (judge D8): the close's button holds one line */
  #close .faq { grid-column: 1 / span 6; }
  #close .ask { grid-column: 8 / span 5; }
}
@media (min-width: 1024px) and (min-height: 1200px) { .ruler { --rh: 64px; } }
@media (min-width: 1600px) and (min-height: 1100px) {
  .planb .card { padding: 18px 20px; }
  .bub { font-size: var(--t-body); }
}
@media (max-width: 1023px) {
  .rail { display: none; }
  section.s { min-height: auto; padding: calc(var(--nav) + 28px) var(--gut) 56px; }
  #start .claim, #start .pick, #start .slot, #start .acts, .ruler, .planb, #rhythm .head .h, #rhythm .head .ask, #worth .copy, #worth .dots, #how .copy, #how .rec, #charge .copy, #charge .moment, #trade .copy, #trade .list, #close .faq, #close .ask { grid-column: 1 / -1; grid-row: auto; }
  .planb { margin-top: 24px; }
  #rhythm .head .ask { margin-top: 22px; }
  #worth .grid, #charge .grid { display: flex; flex-direction: column; align-items: stretch; }
  #worth .copy, #charge .copy { order: -1; }
  #worth .dots, #charge .moment { margin-top: 26px; }
  #how .rec, #trade .list, #close .ask { margin-top: 28px; }
  .link-svg { display: none; }
}
/* B147: under 820 the three section links step out (the full bar needs about 745 px there); Sign in and the cobalt
   step stay at every width */
@media (max-width: 820px) {
  nav.top .links a:not(.go):not(.si) { display: none; }
}
/* B147: under 440 the wordmark stacks "Reactivation / Agent" beside the mark (min-content: the longest word sets the
   width), so Sign in and Create account fit on one line (one-line wordmark: 154 px left at 390, the two need 180) */
@media (max-width: 440px) {
  nav.top .brand { width: min-content; white-space: normal; line-height: 1.1; }
}
/* WGATE1: "Get started for free" is 4 words where "Create account" was 2, so under 480 both bar links step down to the
   small stop (measured: at 390 and 441 the body stop left the wordmark touching "Sign in", 0 px); the bar keeps 12 px
   between the two groups */
@media (max-width: 480px) {
  nav.top { column-gap: 12px; }
  nav.top .links { gap: 14px; font-size: var(--t-small); }
  nav.top .links a { min-width: 44px; justify-content: center; } /* "Sign in" is 42 px wide at the small stop */
}
@media (max-width: 380px) {
  nav.top .links { gap: 12px; font-size: var(--t-small); }
}
/* WGATE1 r3 (judge D2: at 320 the ask broke "Get" / "started for" / "free"): under 375 the four-word ask no longer fits
   on one line inside the bar's margin (measured: 120 px of words; at 360 it ended 16 px past the margin, at 320 the bar
   leaves it 64 px), so it takes two whole-word lines at the break its markup carries, "Get started" / "for free" (70 px),
   and never shrinks below that */
@media (max-width: 374px) {
  nav.top .links a.go { white-space: pre-line; flex: none; line-height: 1.15; }
}
/* under 330 the bar's two gaps step down to 8 px so the two-line ask fits beside the wordmark and Sign in
   (320: 148 + 8 + 44 + 8 + 70 = 278 of 280 px) */
@media (max-width: 329px) {
  nav.top { column-gap: 8px; }
  nav.top .links { gap: 8px; }
}
@media (max-width: 640px) {
  .bytrade { display: grid; grid-template-columns: 1fr 1fr; }
  .bytrade span { grid-column: 1 / -1; }
  .bytrade a { min-height: 44px; }
  footer .legal a { min-height: 44px; min-width: 44px; }
  .ruler { --nw: 100px; } /* fix2: the longest example name (Daniel Moreau, 89 px) displays whole (TASTE 3) */
  .rl-head .ttl b { display: none; }
  .today span { transform: translateX(-100%); }
  .rr.x { display: none; }
  .rr .who span { display: none; }
  .rl-foot { flex-direction: column; gap: 2px; }
  .strips { --sw: 112px; }
  .strip .nm b { font-size: var(--t-body); }
  .strip .nm span { font-size: var(--t-small); }
  .ledger thead { display: none; }
  .ledger, .ledger tbody, .ledger tr, .ledger th, .ledger td { display: block; width: 100%; }
  .ledger tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .ledger th, .ledger td { border: 0 !important; padding: 2px 0; }
  .ledger td::before { content: attr(data-c) ": "; color: var(--dim); }
  .ledger tr.lit { border-left: 3px solid var(--cobalt); padding-left: 10px; }
  .pr { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 8px; }
  .pr > span:not(.p) { grid-column: 1 / -1; order: 3; }
  .matrix { grid-template-columns: repeat(14, 1fr); }
  .record .rh { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .strip .m { background: var(--cobalt); }
  .strip .d { left: 0; }
  .strip .d2 { left: 50%; }
}