/* RecordIt marketing page.
   Monochrome by rule: the page itself is warm paper + ink. Color exists
   only inside "product windows" — the hero record card and the signal
   stage — which reproduce the app's real light theme 1:1 (tokens lifted
   from frontend/src/index.css, chips from SellSignalChip.tsx, chart
   treatment from PriceChart.tsx + lib/theme.tsx) so the windows sit
   naturally on the paper page. */

:root{
  /* header sell-signal chip timing — tune the cycle in one place.
     dwell = how long each verdict holds; fade = cross-fade between them.
     (keyframe offsets are generated from the default 1.5s/.45s ratio;
     both values scale the cycle proportionally) */
  --shc-dwell:1.5s;
  --shc-fade:.45s;
  --shc-cycle:calc(3*(var(--shc-dwell) + var(--shc-fade)));

  --paper:#FAF8F3;        /* warm uncoated-stock white */
  --paper-2:#F1EEE6;      /* faint panel tone */
  --ink:#17150F;          /* warm near-black */
  --ink-60:#6B665A;       /* secondary text */
  --ink-30:#B9B3A5;       /* faint labels, hairlines */
  --rule:#E3DFD4;         /* dividers */

  /* app product tokens — light theme, verbatim from the frontend */
  --app-bg:#f7f7f5;           /* --color-background (light) */
  --app-surface:#ffffff;      /* --color-surface (light) */
  --app-surface-2:#efefec;    /* --color-surface-hover (light) */
  --app-border:#e2e2dd;       /* --color-border (light) */
  --app-fg:#1a1a1c;           /* --color-foreground (light) */
  --app-muted:#5e5e62;        /* --color-muted (light) */
  --app-faint:#9c9c9f;        /* --color-faint (light) */
  --app-accent:#10b981;       /* --color-accent (light emerald) */
  --app-amber:#f59e0b;        /* tailwind amber-500 (watch fill/border) */
  --app-amber-t:#d97706;      /* watch text — the app's light warning token */
  --app-blue:#3b82f6;         /* tailwind blue-500 (hold fill/border/text) */
  --glass-row-bg:rgb(0 0 0 / 0.03);
  --glass-row-line:rgb(0 0 0 / 0.08);

  /* label/data face — Inter (swapped in for Spline Sans Mono); numeric
     alignment comes from font-variant-numeric:tabular-nums where set */
  --mono:"Inter",system-ui,sans-serif;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  background:var(--paper);color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;font-size:17px;line-height:1.6;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.display{font-family:var(--display);letter-spacing:-0.02em;line-height:1.02}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:50;
  font-family:var(--mono);font-size:13px;color:var(--paper);background:var(--ink);
  padding:10px 16px;text-decoration:none;
}
.skip-link:focus{left:0}

/* ---- top bar ---- */
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;justify-content:space-between;height:66px}
.wordmark{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-0.02em;
  color:var(--ink);text-decoration:none}
.wordmark .wm-it{font-family:var(--mono);font-weight:700}
/* the vinyl-record 'o' — sized to the rendered ink box of Bricolage
   Grotesque 700 at wordmark size (top on the c/r x-height line, round
   overshoot below the baseline) and margined so the ink gaps to the
   neighboring c and r match the wordmark's own letter spacing */
.wordmark-o{display:inline-block;width:.55em;height:.55em;
  vertical-align:-.0151em;margin:0 -.004em 0 .054em}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.bar-nav{display:flex;align-items:center;gap:24px}
.nav-link{font-family:var(--mono);font-size:13px;font-weight:500;
  text-decoration:none;color:var(--ink-60);transition:color .15s}
.nav-link:hover{color:var(--ink)}
.nav-link[aria-current="page"]{color:var(--ink)}
.nav-invite{font-family:var(--mono);font-size:13px;font-weight:500;
  text-decoration:none;color:var(--ink);border:1px solid var(--ink);border-radius:2px;
  padding:8px 16px;transition:background .15s,color .15s}
.nav-invite:hover{background:var(--ink);color:var(--paper)}

/* ---- hero ---- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
section.wrap.hero{padding-top:96px;padding-bottom:84px}
h1.display{font-weight:700;font-size:clamp(44px,6.2vw,78px)}
.hero .lead{font-size:20px;line-height:1.5;color:var(--ink-60);margin-top:26px;max-width:30ch}
.hero .lead b{color:var(--ink);font-weight:500}
.hero-cta{margin-top:36px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:14px;font-weight:500;text-decoration:none;
  padding:13px 22px;border-radius:2px;display:inline-block;transition:background .15s,color .15s}
.btn-primary{background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.btn-primary:hover{background:transparent;color:var(--ink)}
.btn-note{font-family:var(--mono);font-size:12.5px;color:var(--ink-60)}

/* =====================================================================
   Sell-signal chips — 1:1 with SellSignalChip.tsx.
   Rectangular readout (rounded-md, 6px), Inter 500 11px uppercase,
   12px lucide icon at stroke 2.5, 6px gap. Full chip 24px tall with
   confidence dots; compact (grid-card) variant 20px, no dots.
   ===================================================================== */
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;
  border-radius:6px;white-space:nowrap;
  font-family:"Inter",system-ui,sans-serif;font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:.05em}
.chip-compact{height:20px;padding:0 6px}
.chip-ic{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.chip-sell-now{background:var(--app-accent);color:#000;
  box-shadow:0 0 0 1px rgb(0 0 0 / 0.15)}
.chip-sell-soon{background:rgb(16 185 129 / 0.15);color:var(--app-accent);
  border:1px solid rgb(16 185 129 / 0.4)}
.chip-watch{background:rgb(245 158 11 / 0.15);color:var(--app-amber-t);
  border:1px solid rgb(245 158 11 / 0.3)}
.chip-hold{background:rgb(59 130 246 / 0.15);color:var(--app-blue);
  border:1px solid rgb(59 130 246 / 0.3)}
.chip-sit{background:var(--app-surface-2);color:var(--app-faint);
  border:1px solid var(--app-border)}
.chip-dots{display:inline-flex;gap:2px}
.chip-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.2}
.chip-dots i.on{opacity:.7}

/* =====================================================================
   Hero product window — the app's collection card, light theme.
   White app surface with the app's light border; warm page-native
   drop shadow so it sits on the paper like the rest of the page.
   ===================================================================== */
.appcard{background:var(--app-surface);border:1px solid var(--glass-row-line);
  border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:16px;
  box-shadow:0 1px 0 rgba(23,21,15,.03),0 22px 48px -30px rgba(23,21,15,.30)}
.ac-title{font-size:16px;font-weight:600;line-height:1.25;color:var(--app-fg);
  letter-spacing:-0.01em}
.ac-artist{font-size:14px;color:var(--app-muted);margin-top:2px}
.ac-label{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--app-faint)}
.ac-label-xs{font-size:10px}
.ac-figs{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  border-top:1px solid var(--app-border);padding-top:10px}
.ac-fig{display:flex;flex-direction:column;gap:2px}
.ac-fig-end{align-items:flex-end}
.ac-gain{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:30px;font-weight:600;line-height:1;letter-spacing:-0.025em;color:var(--app-accent)}
.ac-ratio{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:16px;font-weight:600;line-height:1;color:var(--app-accent)}
.ac-flow{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--glass-row-bg);border:1px solid var(--glass-row-line);
  border-radius:8px;padding:8px 12px}
.ac-cell{display:flex;flex-direction:column;gap:2px}
.ac-cell-end{align-items:flex-end}
.ac-val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px}
.ac-paid{color:var(--app-muted);text-decoration:line-through;
  text-decoration-color:var(--app-faint)}
.ac-now{color:var(--app-fg);font-weight:600}
.ac-net{color:var(--app-accent);font-weight:600}
.ac-arrow{width:14px;height:14px;flex:none;fill:none;stroke:var(--app-faint);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ac-chart svg{display:block}
.ac-trend{display:flex;align-items:baseline;gap:6px;font-size:11px;line-height:1.3}
.ac-trend-val{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--app-muted)}
.ac-status{display:flex;justify-content:flex-end}
.ac-asof{font-family:var(--mono);font-size:10px;color:var(--app-faint)}

/* the chart draws itself on load — same one-motion rule as before */
.ac-line{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s .3s ease-out forwards}
.ac-band,.ac-dots{opacity:0;animation:appear .5s 1.6s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes appear{to{opacity:1}}

/* ---- thesis + how-it-works: one compact two-column band ---- */
.thesis{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:84px 0}
.thesis-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:72px;align-items:center}
.thesis-p{font-family:var(--display);font-weight:400;
  font-size:clamp(26px,3.4vw,42px);line-height:1.16;letter-spacing:-0.02em;max-width:18ch}
.thesis .muted{color:var(--ink-30)}
.thesis .keep{color:var(--ink)}
.thesis-how .sec-eyebrow{margin-bottom:8px}
.steps{list-style:none}
.step{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--rule)}
.step:last-child{border-bottom:0;padding-bottom:0}
.step-n{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink-30);letter-spacing:.1em}
.step h3{font-family:var(--display);font-weight:600;font-size:18px;
  letter-spacing:-0.01em;margin-bottom:5px}
.step p{color:var(--ink-60);font-size:15px;line-height:1.55}

/* ---- sections ---- */
section.wrap{padding-top:88px;padding-bottom:88px}
.sec-eyebrow{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-60);margin-bottom:44px;
  display:flex;align-items:center;gap:14px}
.sec-eyebrow::after{content:"";height:1px;background:var(--rule);flex:1}
h2.display{font-weight:600;font-size:clamp(30px,4.2vw,42px);max-width:16ch}
.sec-lead{color:var(--ink-60);font-size:19px;max-width:52ch}

/* =====================================================================
   The signal — the page's centerpiece. All of the page's color budget
   is spent inside .sig-stage, a window into the app's light theme.
   ===================================================================== */
.signal-intro{margin-bottom:48px}
/* one horizontal statement; fluid size fills the line at desktop and
   scales down. nowrap holds it to one line until the mobile breakpoint
   lets it wrap. Scoped to .signal-sec so it beats the base h2.display
   rule (which otherwise caps size and reimposes the 16ch measure). */
.signal-sec .signal-head{font-size:clamp(28px,5.4vw,60px);max-width:none;
  white-space:nowrap;line-height:1.1}
.signal-lead{margin-top:20px;max-width:60ch}

/* "Sell Signal" as the app's real chip, scaled to header size — the exact
   compact SellSignalChip geometry in em units (at app scale: 20px tall on
   11px Inter-500 uppercase text, 6px radius, 12px icon at stroke 2.5), so
   everything scales 1:1 with the header font. The label stays constant;
   background, border, text color, and icon cycle through the app's three
   real verdict treatments. Resting / reduced-motion / no-JS state: the
   filled-emerald "Sell now" chip. */
/* font-size is the single scale knob: every dimension below is in chip-em
   and holds the app's exact ratios (20px h / 6px pad / 6px radius / 12px
   icon, all over 11px text), so shrinking font-size scales the whole chip
   1:1. At .34em the border-box (1.818em → .618em header) sits inside the
   header cap height (.676em); the ring is trimmed so the pill's visible
   top/bottom stay within the capital-letter bounds. */
.shc{display:inline-flex;align-items:center;gap:.545em;height:1.818em;
  padding:0 .545em;border:.091em solid transparent;border-radius:.545em;
  font-family:"Inter",system-ui,sans-serif;font-size:.34em;font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  /* vertical-align:middle centres on the x-height; the translate lifts the
     pill by ~.21em (chip) onto the cap-height optical centre so it sits
     inside the "P"/cap band. Both are em-based, so it holds at every size. */
  vertical-align:middle;transform:translateY(-.21em);
  background:var(--app-accent);color:#000;
  box-shadow:0 0 0 .06em rgb(0 0 0 / 0.15)} /* sell-now's ring, scaled + trimmed to stay in caps */
.shc-ics{position:relative;width:1.09em;height:1.09em;flex:none}
.shc-i{position:absolute;inset:0;width:100%;height:100%;fill:none;
  stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.shc-i-watch,.shc-i-hold{opacity:0}

/* continuous slow cycle (default): sell -> watch -> hold -> sell, each
   verdict held for a beat so any glance shows a real app state. Starts
   when the section arrives; 0% matches the resting chip so there's no
   jump. Offsets assume the default dwell/fade ratio (1.5s/.45s):
   dwells 0-25.6 / 33.3-59 / 66.7-92.3, fades between. */
html.motion .signal-intro.in .shc{animation:shc-state var(--shc-cycle) linear infinite}
html.motion .signal-intro.in .shc-i-sell{animation:shc-sell var(--shc-cycle) linear infinite}
html.motion .signal-intro.in .shc-i-watch{animation:shc-watch var(--shc-cycle) linear infinite}
html.motion .signal-intro.in .shc-i-hold{animation:shc-hold var(--shc-cycle) linear infinite}

/* ---- ALTERNATE (for comparison): resolve once and settle on SELL ----
   Swap the four rules above for these: one pass through watch and hold
   on scroll-into-view, then rests on the emerald Sell-now chip (the
   keyframes start and end on the sell state, so a single iteration
   reads as "considered, then called").
html.motion .signal-intro.in .shc{animation:shc-state var(--shc-cycle) linear 1 both}
html.motion .signal-intro.in .shc-i-sell{animation:shc-sell var(--shc-cycle) linear 1 both}
html.motion .signal-intro.in .shc-i-watch{animation:shc-watch var(--shc-cycle) linear 1 both}
html.motion .signal-intro.in .shc-i-hold{animation:shc-hold var(--shc-cycle) linear 1 both}
---------------------------------------------------------------------- */

/* the three real chip treatments, verbatim from SellSignalChip.tsx in the
   light theme: sell-now filled accent + black text + ring; watch amber-500
   15%/30% + amber text; hold-momentum blue-500 15%/30% + blue text */
@keyframes shc-state{
  0%,25.6%{background:#10b981;border-color:transparent;color:#000;
    box-shadow:0 0 0 .06em rgb(0 0 0 / 0.15)}
  33.3%,59%{background:rgb(245 158 11 / 0.15);border-color:rgb(245 158 11 / 0.3);
    color:#d97706;box-shadow:0 0 0 .06em transparent}
  66.7%,92.3%{background:rgb(59 130 246 / 0.15);border-color:rgb(59 130 246 / 0.3);
    color:#3b82f6;box-shadow:0 0 0 .06em transparent}
  100%{background:#10b981;border-color:transparent;color:#000;
    box-shadow:0 0 0 .06em rgb(0 0 0 / 0.15)}
}
@keyframes shc-sell{0%,25.6%{opacity:1}33.3%,92.3%{opacity:0}100%{opacity:1}}
@keyframes shc-watch{0%,25.6%{opacity:0}33.3%,59%{opacity:1}66.7%,100%{opacity:0}}
@keyframes shc-hold{0%,59%{opacity:0}66.7%,92.3%{opacity:1}100%{opacity:0}}

.sig-stage{background:var(--app-bg);border:1px solid var(--app-border);border-radius:16px;
  padding:36px;box-shadow:0 1px 0 rgba(23,21,15,.03),0 26px 52px -34px rgba(23,21,15,.25)}
.sig-microlabel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--app-muted);margin-bottom:16px}

.sig-io{display:grid;grid-template-columns:1.12fr 96px .88fr;column-gap:26px}
.sig-col-out{display:flex;flex-direction:column}

/* input factors — marketing name + description, app-style reading row */
.sig-inputs{display:grid;grid-auto-rows:1fr;gap:12px}
.sig-factor{background:var(--app-surface);border:1px solid var(--glass-row-line);
  border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;
  justify-content:center;gap:4px}
.sig-factor dt{font-size:14px;font-weight:600;color:var(--app-fg);letter-spacing:-0.01em}
.f-desc{font-size:12.5px;line-height:1.45;color:var(--app-muted)}
.f-read{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin-top:7px;padding-top:8px;border-top:1px solid rgb(0 0 0 / 0.07)}
.f-val{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:12px;color:var(--app-fg)}
.f-qual{font-size:11.5px;color:var(--app-muted)}

/* convergence — four readings flow into one node, one node into the call */
.sig-flow{display:flex;flex-direction:column}
.sig-flow::before{content:"";height:33px;flex:none} /* aligns with input microlabel */
.sig-flow-inner{position:relative;flex:1}
.sig-flow-inner svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.sig-node{position:absolute;left:60%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;
  border-radius:50%;background:var(--app-accent);
  box-shadow:0 0 14px rgb(16 185 129 / 0.5)}
.sig-merge{display:none}

/* the verdict — chip + rationale + confidence, the app tooltip's anatomy */
.sig-verdict{background:var(--app-surface);border:1px solid var(--glass-row-line);
  border-radius:12px;padding:20px;display:flex;flex-direction:column;
  align-items:flex-start;gap:12px;margin:auto 0}
.sig-rationale{font-size:14px;line-height:1.5;color:var(--app-fg)}
.sig-conf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  align-self:stretch;border-top:1px solid var(--glass-row-line);padding-top:10px;
  font-size:11px;color:var(--app-muted)}
.sig-conf b{font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--app-fg)}
.sig-conf-n{font-family:var(--mono);color:var(--app-faint)}

/* the range of verdicts */
.sig-range{margin-top:34px;border-top:1px solid var(--glass-row-line);padding-top:28px}
.sig-range .sig-microlabel{margin-bottom:20px}
.sig-range-list{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.sig-range-list li{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.sig-range-list p{font-size:12.5px;line-height:1.5;color:var(--app-muted)}

/* where you stand */
/* real display header replacing the old eyebrow; h2.trust-head ties
   h2.display's specificity and wins by source order, dropping the 16ch
   cap so the statement holds one line at desktop and wraps only on mobile */
h2.trust-head{max-width:none;margin-bottom:38px}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.trust-item h3{font-family:var(--display);font-weight:600;font-size:18px;
  margin-bottom:9px;display:flex;align-items:center;gap:9px}
.trust-item h3::before{content:"";width:7px;height:7px;background:var(--ink);border-radius:50%;flex:none}
.trust-item p{color:var(--ink-60);font-size:15px;line-height:1.55}

/* closing CTA */
.cta{text-align:center}
section.wrap.cta{padding-top:104px;padding-bottom:40px}
.cta .display{font-weight:700;font-size:clamp(38px,5.4vw,64px);margin:0 auto}
.cta p{color:var(--ink-60);margin:22px auto 34px;max-width:40ch;font-size:19px}
.cta .btn-note{display:block;margin-top:18px}

/* ---- pricing page ---- */
section.wrap.pricing-hero{padding-top:84px;padding-bottom:0}
.pricing-hero h1{font-size:clamp(38px,5vw,56px)}
.pricing-lead{color:var(--ink-60);font-size:19px;margin-top:16px;max-width:44ch}
section.wrap.plans-sec{padding-top:48px;padding-bottom:96px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.plan{border:1px solid var(--rule);border-radius:10px;padding:30px 30px 16px}
/* Pro is the emphasized column: ink border + a quiet lift, still monochrome */
.plan-pro{border-color:var(--ink);box-shadow:0 22px 48px -32px rgba(23,21,15,.28)}
.plan-name{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-0.01em}
.plan-price{margin-top:14px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price-n{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;
  font-size:40px;letter-spacing:-0.02em;line-height:1}
.price-per{font-family:var(--mono);font-size:13px;color:var(--ink-60)}
.price-alt{flex-basis:100%;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:12.5px;color:var(--ink-60);margin-top:6px}
.plan-desc{color:var(--ink-60);font-size:15.5px;line-height:1.55;margin-top:12px}
.plan-cta{margin-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);cursor:pointer}
/* placeholder purchase button — visibly not yet active, but not apologetic */
.btn-ghost:disabled{opacity:.5;cursor:default}
.plan-feats{list-style:none;margin-top:26px;border-top:1px solid var(--rule)}
.plan-feats li{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--rule);font-size:15px}
.plan-feats li:last-child{border-bottom:0}
.feat-no-row>span:first-child{color:var(--ink-60)}
.feat-mark svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;
  stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.feat-yes{color:var(--ink)}
.feat-no{color:var(--ink-60)}
.feat-val{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:13px;font-weight:500}
.pricing-note{margin-top:44px;font-size:15px;color:var(--ink-60);text-align:center}

/* footer */
footer{border-top:1px solid var(--rule);padding:40px 0;margin-top:64px}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.foot .mono{font-size:12.5px;color:var(--ink-60)}
.foot-links{display:flex;gap:24px}
.foot-links a{font-family:var(--mono);font-size:12.5px;color:var(--ink-60);text-decoration:none}
.foot-links a:hover{color:var(--ink)}

/* ---- motion ----
   The hero chart draws itself on load (CSS only). Everything else is
   gated behind html.motion, which motion.js adds ONLY when JS runs and
   prefers-reduced-motion is off — so no-JS and reduced-motion users get
   the identical final resting state with zero movement. Nothing loops. */
@media (prefers-reduced-motion:reduce){
  .ac-line{animation:none;stroke-dashoffset:0}
  .ac-band,.ac-dots{animation:none;opacity:1}
}

/* intro overlay — the record that spins into the wordmark */
html.introing header .wordmark-o{visibility:hidden}
.intro-disc{position:fixed;left:50%;top:50%;z-index:60;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%);will-change:transform,opacity}

/* scroll reveals — one quiet system: fade + 14px rise, once */
html.motion [data-reveal]:not([data-stagger]){
  transition:opacity .55s ease-out,transform .55s cubic-bezier(.2,.7,.3,1)}
html.motion [data-reveal]:not([data-stagger]):not(.in){opacity:0;transform:translateY(14px)}
html.motion [data-stagger]>*{
  transition:opacity .5s ease-out,transform .5s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--i,0)*90ms)}
html.motion [data-stagger]:not(.in)>*{opacity:0;transform:translateY(14px)}

/* the signal stage — inputs register, the lines trace, the call lands */
html.motion .sig-factor{
  transition:opacity .5s ease-out,transform .5s cubic-bezier(.2,.7,.3,1)}
html.motion .sig-factor:nth-child(2){transition-delay:.09s}
html.motion .sig-factor:nth-child(3){transition-delay:.18s}
html.motion .sig-factor:nth-child(4){transition-delay:.27s}
html.motion .sig-stage:not(.in) .sig-factor{opacity:0;transform:translateY(14px)}

/* the four inputs + trunk flow continuously toward the node and verdict —
   emerald dashes travelling along the faint track. This is the one spot a
   gentle loop is earned: it reads as a live signal, not decoration. Gated
   on html.motion, so reduced-motion / no-JS keep the lines solid + static.
   pathLength=100 on each path normalises dash density across the differing
   real lengths; -16 is exactly one dash period, so the loop is seamless. */
html.motion .sig-flowlines path{stroke-dasharray:5 11;
  animation:sigflow 1.6s linear infinite}
@keyframes sigflow{to{stroke-dashoffset:-16}}

html.motion .sig-node{
  transition:opacity .3s ease-out 1s,transform .3s cubic-bezier(.2,.7,.3,1) 1s}
html.motion .sig-stage:not(.in) .sig-node{opacity:0;transform:scale(.4)}

html.motion .sig-merge::before{transform-origin:top;
  transition:transform .45s ease-out .55s}
html.motion .sig-stage:not(.in) .sig-merge::before{transform:scaleY(0)}

html.motion .sig-verdict{
  transition:opacity .45s ease-out 1.25s,transform .45s cubic-bezier(.2,.7,.3,1) 1.25s}
html.motion .sig-stage:not(.in) .sig-verdict{opacity:0;transform:translateY(10px) scale(.97)}

/* confidence dots settle in last, one by one */
html.motion .sig-verdict .chip-dots i{transition:opacity .25s ease-out}
html.motion .sig-verdict .chip-dots i:nth-child(1){transition-delay:1.7s}
html.motion .sig-verdict .chip-dots i:nth-child(2){transition-delay:1.77s}
html.motion .sig-verdict .chip-dots i:nth-child(3){transition-delay:1.84s}
html.motion .sig-verdict .chip-dots i:nth-child(4){transition-delay:1.91s}
html.motion .sig-verdict .chip-dots i:nth-child(5){transition-delay:1.98s}
html.motion .sig-stage:not(.in) .sig-verdict .chip-dots i{opacity:0}

/* ---- responsive ---- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:44px}
  section.wrap{padding-top:64px;padding-bottom:64px}
  section.wrap.hero{padding-top:64px;padding-bottom:56px}
  .thesis{padding:64px 0}
  .thesis-grid{grid-template-columns:1fr;gap:44px}
  .signal-intro{margin-bottom:36px}
  /* let the one-line header wrap gracefully once the viewport is narrow */
  .signal-sec .signal-head{white-space:normal}
  .sig-stage{padding:22px}
  .sig-io{display:flex;flex-direction:column;gap:0}
  .sig-flow{display:none}
  .sig-merge{display:flex;justify-content:center;position:relative;height:44px;margin:14px 0}
  .sig-merge::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;
    margin-left:-1px;background:var(--app-border)}
  .sig-merge .sig-node{left:50%;top:100%}
  .sig-inputs{grid-auto-rows:auto}
  .sig-verdict{margin:0}
  .sig-range-list{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr;gap:22px}
  section.wrap.pricing-hero{padding-top:56px}
  section.wrap.plans-sec{padding-top:36px;padding-bottom:64px}
  .trust{grid-template-columns:1fr;gap:32px}
  .wrap{padding-left:22px;padding-right:22px}
  section.wrap.cta{padding-top:84px;padding-bottom:32px}
}
@media (max-width:560px){
  .sig-range-list{grid-template-columns:1fr}
  .ac-flow{padding:8px 10px;gap:6px}
  .bar-nav{gap:14px}
  .nav-invite{padding:8px 11px}
  .plan{padding:22px 20px 10px}
}