/* Kai Labs token layer. Rust is the one canonical accent — see the seven
   tokens below. No amber, no gold, no blue, no green anywhere in this file
   or any file that reads from it. */

/* ── self-hosted fonts ─────────────────────────────────────────────────
   Latin-only woff2 subsets pulled from the exact Google Fonts files this site
   used, self-hosted from /fonts so there's no fonts.googleapis.com/fonts.gstatic.com
   round trip. All three are variable fonts, so one file covers the whole
   weight (and, for Archivo, width/stretch) range. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/inter-tight-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/martian-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks for the two above-the-fold faces (Archivo/h1, Inter
   Tight/body): a local Arial sized and shaped via size-adjust/ascent-override/
   descent-override to occupy the same box the real webfont will, so swapping
   in on load doesn't reflow the page. Values computed from each font's real
   xHeight/unitsPerEm ratio against Arial's (1062/2048), not guessed. Martian
   Mono is small-label text only (eyebrows, indices) — left on a plain fallback
   stack since a wrong override there would cost more than it's worth. */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial');
  size-adjust: 101.44%;
  ascent-override: 86.56%;
  descent-override: 20.70%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Tight Fallback';
  src: local('Arial');
  size-adjust: 105.27%;
  ascent-override: 92.02%;
  descent-override: 22.91%;
  line-gap-override: 0%;
}

:root {
  /* ── the seven tokens — the only colors in this codebase ────────────── */
  --void: #0B0B0C;
  --void-2: #1C1C1E;
  --bone: #EDEAE3;
  --paper: #F4F1EA;
  --ink: #16161A;
  --rust: #C24E24;
  --rust-deep: #A03F1C;

  /* Channel-decomposed copies of the same seven values, so translucent
     variants (borders, tints, rings) can be built with rgba() without
     introducing a new hue — every rgba() below reads one of these. */
  --void-rgb: 11, 11, 12;
  --void-2-rgb: 28, 28, 30;
  --bone-rgb: 237, 234, 227;
  --paper-rgb: 244, 241, 234;
  --ink-rgb: 22, 22, 26;
  --rust-rgb: 194, 78, 36;

  /* Text sitting on a solid rust fill (buttons, "start" badges) needs to
     stay legible regardless of section theme. Neither --bone (3.96:1) nor
     --ink clears AA there — measured, plain white does (4.76:1). This is
     the one value in the codebase that isn't one of the seven tokens,
     used nowhere except color-on-rust-fill. See DESIGN.md. */
  --on-accent: #FFFFFF;

  /* ── semantic aliases — dark section is the default ─────────────────── */
  --bg: var(--void);
  --bg-rgb: var(--void-rgb);
  --surface: var(--void-2);
  --elevated: var(--void-2);
  --border: rgba(var(--bone-rgb), .16);
  --border-2: rgba(var(--bone-rgb), .08);
  /* Three-tier scale: 100/72/50 percent. Verified against --void: 72%
     clears 8.6:1, 50% clears 4.62:1 — both pass WCAG AA (4.5:1) for
     normal text. (50% runs under AA against the lighter --surface/
     --elevated tone specifically — flagged, not silently changed, since
     the requirement as given is scoped to --void.) */
  --text: var(--bone);
  --text-2: rgba(var(--bone-rgb), .72);
  --text-3: rgba(var(--bone-rgb), .5);
  --text-rgb: var(--bone-rgb);
  --text-accent: var(--rust);
  --rust-soft: rgba(var(--rust-rgb), .12);
  --rust-ring: rgba(var(--rust-rgb), .55);

  --disp: 'Archivo', 'Archivo Fallback', sans-serif;
  --body: 'Inter Tight', 'Inter Tight Fallback', system-ui, sans-serif;
  --mono: 'Martian Mono', ui-monospace, monospace;

  /* ── type scale — six tiers, one source of truth ────────────────────────
     display (h1), section heading (h2), subheading (.thin), body (p),
     small (secondary/meta text), mono label (.mono, eyebrows/indices).
     Existing sizes formalized here rather than replaced, so nothing
     currently on-scale shifts; new/touched components read from these
     instead of picking their own one-off size. */
  --fs-display: clamp(2.5rem, 5.3vw, 4.4rem);
  --fs-heading: clamp(1.75rem, 3.7vw, 2.8rem);
  --fs-subheading: clamp(1.4rem, 2.7vw, 2.2rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-mono: .6875rem;

  --gut: clamp(1.25rem, 4vw, 4rem);
}

/* ── light sections ───────────────────────────────────────────────────────
   Applied per-section on the homepage per its dark/light table, and at the
   body level on /scan (light end to end). Reuses the same seven tokens —
   --paper for the ground, --bone for cards raised on it, --ink for text —
   so every component below (which only ever reads the aliases, never a raw
   hex) re-themes correctly with zero per-component changes. */
.theme-light {
  --bg: var(--paper);
  --bg-rgb: var(--paper-rgb);
  --surface: var(--bone);
  --elevated: var(--bone);
  --border: rgba(var(--ink-rgb), .16);
  --border-2: rgba(var(--ink-rgb), .08);
  --text: var(--ink);
  --text-2: rgba(var(--ink-rgb), .82);
  --text-3: rgba(var(--ink-rgb), .6);
  --text-rgb: var(--ink-rgb);
  --text-accent: var(--rust);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--rust); color: var(--on-accent); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: var(--rust); }
:focus-visible { outline: 1px solid var(--rust); outline-offset: 3px; }

/* ── material layer: grain only ──────────────────────────────────────────
   The cursor-follow lamp glow and its --mx/--my tracking (lamp.js) are
   removed outright — flat backgrounds only, no gradients or glows anywhere. */
#grain {
  position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: .2; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
#frame {
  position: fixed; inset: 14px; z-index: 800; pointer-events: none; border: 1px solid var(--border-2);
  clip-path: inset(0 100% 0 0);
  animation: draw 1s cubic-bezier(.2, .7, .3, 1) .1s forwards;
}
@keyframes draw { to { clip-path: inset(0 0 0 0); } }
@media (max-width: 700px) { #frame { display: none; } }
/* Explicit allowlist, not `body > *:not(...)` — a blanket selector there was
   catching third-party elements appended straight to body (Calendly's popup
   overlay), overriding their `position: fixed` with `relative` and breaking
   the modal (rendered in-flow at the click's scroll position, zero height,
   its close control unreachable, so body's scroll-lock never released). None
   of these tag/class selectors can ever match an injected widget div. */
nav, header, section.cred-strip, main, footer, .sticky-cta { position: relative; z-index: 2; }

.wrap { max-width: 1300px; margin: 0 auto; padding: 0 var(--gut); }
.mono { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .13em; text-transform: uppercase; line-height: 1.4; }
.led { width: 6px; height: 6px; background: var(--rust); flex: 0 0 auto; display: inline-block; }
/* "On" state reads as a solid, full-strength text-colored dot rather than a
   second accent hue — rust is the only accent color in this codebase. */
.led.on { background: var(--text); }

@media (prefers-reduced-motion: reduce) {
  *, *::after, *::before { animation: none !important; transition: none !important; }
  #frame { clip-path: none; }
  html { scroll-behavior: auto; }
}

/* ── typography ─────────────────────────────── */
h1, h2, h3 { font-family: var(--disp); text-transform: uppercase; letter-spacing: -.028em; color: var(--text); }
h1 { font-weight: 600; font-stretch: 108%; font-size: var(--fs-display); line-height: .96; }
h1 .thin, h2 .thin {
  display: block; font-weight: 400; font-stretch: 88%; text-transform: none; color: var(--text-2);
}
h1 .thin { letter-spacing: -.02em; font-size: var(--fs-subheading); line-height: 1.12; margin-top: .55rem; }
h2 { font-weight: 600; font-stretch: 104%; font-size: var(--fs-heading); line-height: 1.02; }
h2 .thin { letter-spacing: -.018em; font-size: clamp(1.15rem, 2.1vw, 1.65rem); margin-top: .4rem; }
p { color: var(--text-2); font-size: var(--fs-body); }
a { color: inherit; }

/* ── buttons — one primary action per screen: rust fill outranks everything.
   Rust is mid-luminance, so it needs full white text, not a theme-relative
   token — see --on-accent in tokens.css for the contrast numbers. ── */
.btn {
  display: inline-flex; align-items: center; gap: .55rem; font-weight: 500; font-size: .92rem;
  padding: .75rem 1.3rem; border: 1px solid transparent; text-decoration: none; cursor: pointer;
  font-family: var(--body); transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn-primary { background: var(--rust); color: var(--on-accent); border-color: var(--rust); }
.btn-primary:hover { background: var(--rust-deep); border-color: var(--rust-deep); transform: translateY(-1px); }
.btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--text-2); background: rgba(var(--text-rgb), .05); }
.btn-text {
  background: none; border: none; padding: 0; color: var(--text-2); text-decoration: underline;
  font-family: var(--body); font-size: .92rem; cursor: pointer;
}
.btn-text:hover { color: var(--text); }

/* ── layout primitives ─────────────────────────────── */
/* Every section paints its own --bg explicitly — required now that
   .theme-light overrides the token block per-section on the homepage; a
   transparent section would just show whatever body.background is,
   regardless of its own theme class. */
section { padding: clamp(4.25rem, 8.5vw, 7.5rem) 0; background: var(--bg); }
header.hero, .cred-strip { background: var(--bg); }
.alt { background: var(--surface); border-top: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); }
.kick { display: flex; align-items: center; gap: .65rem; color: var(--text-accent); margin-bottom: 1.15rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .65rem; color: var(--text-2);
  border: 1px solid var(--border); padding: .5rem .85rem; margin-bottom: 1.8rem;
}
.lede { color: var(--text-2); max-width: 62ch; margin-top: 1.15rem; }

/* ── nav ─────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 700; background: rgba(var(--bg-rgb), .76);
  backdrop-filter: blur(16px) saturate(1.1); border-bottom: 1px solid var(--border-2);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 1rem; }
.brand { display: flex; align-items: center; }
.brand-mark { height: 24px; width: auto; display: block; }
.nav-l { display: flex; align-items: center; gap: 1.5rem; }
.nav-l a:not(.btn) { color: var(--text-2); text-decoration: none; font-size: .92rem; transition: color .18s; }
.nav-l a:not(.btn):hover { color: var(--text); }
/* The two conversion links carry the accent, About and Pricing stay quiet. */
.nav-l a.nav-accent:not(.btn) { color: var(--text-accent); }
.nav-l a.nav-accent:not(.btn):hover { color: var(--text); }
@media (max-width: 820px) { .nav-l a:not(.btn) { display: none; } }

/* ── footer ─────────────────────────────── */
footer { background: var(--bg); border-top: 1px solid var(--border-2); padding: 2.5rem 0; color: var(--text-3); }
.footer-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.footer-brand { display: flex; align-items: center; gap: .75rem; }
.footer-mark { height: 20px; width: auto; opacity: .7; }
.footer-links, .footer-social { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-links a, .footer-social a, .footer-review-link { color: var(--text-3); text-decoration: none; font-size: .85rem; }
.footer-links a:hover, .footer-social a:hover, .footer-review-link:hover { color: var(--text); }

/* ── motion ─────────────────────────────────────────────────────────────
   Visible by default, no exceptions — every .rv element renders in its
   final position with no JS at all. html.js is added by a synchronous
   inline script at the very top of <head> (before body renders, so
   there's no flash), and only *that* class switches .rv into its
   pre-reveal state. A blocked or failed script therefore never leaves
   anything invisible — it just skips the animation.
   Fade up 24px, 500ms, cubic-bezier(.16,1,.3,1). Reveal.js staggers
   siblings within a section 60ms apart via --rv-delay. */
.rv {
  transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--rv-delay, 0ms);
}
html.js .rv { opacity: 0; transform: translateY(24px); }
html.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .rv { opacity: 1; transform: none; transition: none; }
}

/* ── hero ─────────────────────────────── */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.hero-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 1060px) { .hero-in { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } }
/* Eyebrow: only the square .led marker is rust. The label text is bone at
   60 percent — rust text at this size measured 4.13:1 on --void, under
   the 4.5:1 AA floor; bone 60% clears 6.24:1. Scoped to .hero-home
   specifically (the homepage hero only) — every other page's hero eyebrow
   keeps the standard .eyebrow treatment. */
.hero-home .eyebrow { color: rgba(var(--bone-rgb), .6); }
/* H1 sized down specifically in the homepage hero (22% off --fs-display) —
   this is the one headline on the page competing with everything below it
   for attention, not a change to h1 sizing site-wide. Line 1 and line 2
   are separate elements (not one block with a nested span) so each can be
   staggered independently on load. */
.hero-home h1 { font-size: clamp(1.95rem, 4.15vw, 3.45rem); }
.hero-home h1 .h1-line { display: block; }
/* Line 2 is the payoff: same weight/stretch/tracking family as line 1,
   just smaller and rust instead of the usual gray subheading treatment. */
.hero-home h1 .thin {
  display: block; font-weight: 600; font-stretch: 108%; text-transform: uppercase;
  letter-spacing: -.028em; color: var(--rust); font-size: 60%; line-height: 1.1; margin-top: .5rem;
}
.h-sub { margin-top: 1.5rem; padding-left: 1.1rem; border-left: 1px solid var(--rust); color: var(--text-2); font-size: clamp(1.02rem, 1.3vw, 1.12rem); line-height: 1.55; max-width: 42ch; }
.h-cta { display: flex; align-items: center; gap: 1rem; margin-top: 1.8rem; flex-wrap: wrap; }
.h-price { font-family: var(--mono); font-size: .78rem; letter-spacing: .05em; color: var(--text-3); }
.h-meta { display: flex; align-items: center; gap: .6rem; margin-top: 1.5rem; color: var(--text-3); }

/* ── hero rolling line ─────────────────────────────────────────────────
   All three phrases stay in the DOM, stacked in one grid cell (grid-area
   1/1), so the cell's intrinsic size is the max of all three widths at all
   times — swapping which one is opaque never changes the container's size.
   No JS width measurement needed, and CLS stays at zero. Generous top
   margin: this line needs to read as its own beat after the H1, not a
   continuation of it. */
.h-roll { margin-top: 2.4rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4em; color: var(--text-2); font-size: clamp(1.02rem, 1.3vw, 1.12rem); line-height: 1.55; max-width: 48ch; }
.roll-viewport { display: inline-grid; }
.roll-viewport .roll-phrase { grid-area: 1 / 1; color: var(--text); font-weight: 600; opacity: 0; white-space: nowrap; transition: opacity .5s ease; }
.roll-viewport .roll-phrase.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .roll-viewport .roll-phrase { transition: none; }
  .roll-viewport .roll-phrase:not(.is-active) { display: none; }
}
/* Credential line now lives in the Proof section, reusing this same
   treatment (Martian Mono, bone at 70%). */
.h-cred { margin: .2rem 0 2rem; color: rgba(var(--bone-rgb), .7); }

/* ── credibility strip ─────────────────────────────── */
.cred-strip { border-top: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); padding: 1.1rem 0; }
.cred-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; row-gap: .6rem; }
.cred-row .item { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); padding: 0 1.3rem; white-space: nowrap; }
.cred-row .item:not(:last-child) { border-right: 1px solid var(--border); }
@media (max-width: 700px) { .cred-row .item { padding: 0 .8rem; white-space: normal; text-align: center; } }

/* ── ticket deck ─────────────────────────────── */
.deck-hd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .85rem; border-bottom: 1px solid var(--border); margin-bottom: 1.1rem; }
.deck-t { font-family: var(--disp); font-weight: 500; font-stretch: 96%; font-size: clamp(1.05rem, 1.7vw, 1.22rem); letter-spacing: -.01em; display: flex; align-items: center; gap: .7rem; color: var(--text); }
.deck-c { color: var(--text-3); white-space: nowrap; }
.deck { display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .2rem .2rem 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; }
.deck::-webkit-scrollbar { display: none; }
.deck.drag { cursor: grabbing; scroll-snap-type: none; }

.tk {
  position: relative; flex: 0 0 clamp(214px, 78vw, 250px); scroll-snap-align: start; background: var(--surface);
  border: 1px solid var(--border); padding: 0; display: flex; flex-direction: column; min-height: 186px; text-align: left;
  font: inherit; color: inherit; cursor: pointer; overflow: hidden;
  transition: background .18s, border-color .18s, transform .18s;
}
@media (min-width: 560px) { .tk { flex-basis: clamp(214px, 22vw, 250px); } }
.tk { transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.tk:hover { background: var(--elevated); border-color: var(--rust-ring); transform: translateY(-3px); }
.tk[aria-selected="true"] { background: var(--elevated); border-color: var(--rust-ring); }
.tk-hd { display: flex; align-items: center; gap: .5rem; padding: .8rem .9rem; color: var(--text-3); }
.perf { height: 1px; border-top: 1px dashed var(--border); }
.tk-bd { padding: 1.1rem .9rem .95rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.tk-q { font-family: var(--disp); font-weight: 500; font-stretch: 94%; font-size: 1.1rem; line-height: 1.26; letter-spacing: -.015em; color: var(--text); }
.tk-fix { color: var(--text-2); font-size: .92rem; line-height: 1.4; }
/* Accent by default so the card reads as actionable rather than as a static
   panel. No underline here: the whole .tk is the button and this is its
   label, not a separate link, and the arrow beside it already carries the
   non-color half of the cue. */
.tk-ft { margin-top: auto; padding-top: 1.1rem; display: flex; justify-content: space-between; align-items: center; color: var(--text-accent); transition: color .15s ease; }
.tk:hover .tk-ft, .tk[aria-selected="true"] .tk-ft { color: var(--text); }

.rail { display: flex; align-items: flex-end; gap: 4px; height: 15px; margin: .1rem 0 1rem; }
.tick { flex: 1; background: var(--border); height: 4px; border: none; padding: 0; cursor: pointer; transition: height .22s, background .22s; }
.tick.act { height: 13px; background: var(--rust); }

.sel { border: 1px solid var(--border); border-left: 2px solid var(--border); background: var(--surface); padding: 1.05rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.1rem; flex-wrap: wrap; transition: border-color .18s, background .18s; }
.sel.on { border-left-color: var(--rust); background: var(--surface); }
.sel-l { color: var(--text-3); display: block; margin-bottom: .32rem; }
.sel.on .sel-l { color: var(--text-accent); }
.sel-t { color: var(--text-2); font-size: 1rem; max-width: 52ch; display: block; }
.sel.on .sel-t { color: var(--text); }
.sel-body { min-width: 0; flex: 1 1 300px; }

/* ── demo cards ─────────────────────────────── */
/* Demo carousel — same .deck base (scroll-snap, drag-to-scroll, hidden scrollbar)
   the ticket deck uses; sizing here just targets ~2.5 cards on desktop, ~1.15 on
   mobile so the cut edge signals scrollability. align-items:flex-start so an
   expanded card can grow taller without stretching its neighbors to match. */
.demo-deck { align-items: flex-start; }
.demo-card {
  background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column;
  transition: border-color .15s ease, background .15s ease;
  flex: 0 0 clamp(240px, 82vw, 320px); scroll-snap-align: start; cursor: pointer;
}
@media (min-width: 560px) { .demo-card { flex-basis: clamp(280px, 38vw, 380px); } }
.demo-card:hover { border-color: var(--rust-ring); background: var(--elevated); }
.demo-card:focus-visible { outline: 1px solid var(--rust); outline-offset: 2px; }
.demo-hd { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .85rem .95rem; color: var(--text-3); }
.demo-hd .cat { color: var(--text-accent); }
.demo-ti { font-family: var(--disp); font-weight: 600; font-stretch: 104%; text-transform: uppercase; letter-spacing: -.025em; font-size: 1.34rem; line-height: 1; padding: 1.1rem .95rem .4rem; color: var(--text); }
.demo-pr { color: var(--text-2); font-size: .96rem; padding: 0 .95rem .9rem; line-height: 1.45; }
.demo-stage { margin: 0 .95rem 1rem; border: 1px solid var(--border); background: var(--bg); }
.demo-stage svg { display: block; width: 100%; height: auto; }
.demo-ft { margin-top: auto; padding: .8rem .95rem; border-top: 1px solid var(--border-2); display: flex; justify-content: flex-end; align-items: center; }
/* One circular replay control. The deck plays itself, so this is a "run that
   again" affordance rather than a transport bar, which is why there is no
   pause: nothing here needs stopping, and hovering a card restarts it anyway. */
.demo-replay {
  width: 30px; height: 30px; border-radius: 50%; padding: 0;
  background: none; border: 1px solid var(--border); color: var(--text-3);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.demo-replay svg { width: 15px; height: 15px; display: block; }
.demo-replay:hover { color: var(--text-accent); border-color: var(--rust-ring); transform: rotate(-45deg); }
.demo-replay:focus-visible { outline: 1px solid var(--rust); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .demo-replay:hover { transform: none; } }

/* Expand/collapse: 0fr -> 1fr grid-template-rows is the standard trick for
   animating to an intrinsic (auto) height, which max-height can't do smoothly. */
.demo-expand { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.2, .7, .3, 1); }
.demo-card.expanded .demo-expand { grid-template-rows: 1fr; }
.demo-expand-inner { overflow: hidden; min-height: 0; }
.demo-full { color: var(--text-2); font-size: .92rem; line-height: 1.5; padding: 0 .95rem 1rem; }
.demo-work-link { display: block; color: var(--text-accent); font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: 0 .95rem 1.1rem; }
.demo-work-link:hover { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .demo-expand { transition: none; } }

.s-rule { fill: none; stroke: var(--border); stroke-width: 1; }
.s-line { fill: none; stroke: var(--text); stroke-width: 1.25; stroke-linecap: round; }
.s-acc { fill: none; stroke: var(--rust); stroke-width: 1.5; stroke-linecap: round; }
.f-ox { fill: var(--rust); }
.f-verd { fill: var(--rust); }
.t { font-family: var(--body); font-size: 11px; fill: var(--text-2); }
.tm { font-family: var(--mono); font-size: 8px; letter-spacing: .1em; fill: var(--text-3); }
.tb { font-family: var(--disp); font-weight: 600; font-size: 15px; fill: var(--text); }

.a { opacity: 0; }
.run .a { animation: fadeUp .45s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.d { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.run .d { animation: draw .7s cubic-bezier(.3, .7, .3, 1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.dim0 { opacity: 1; }
.run .dim0 { animation: dimOut .45s ease forwards; }
@keyframes dimOut { to { opacity: .16; } }
.pop { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.82); }
.run .pop { animation: pop .4s cubic-bezier(.2, 1.3, .4, 1) forwards; }
@keyframes pop { to { opacity: 1; transform: scale(1); } }
.pulse { opacity: 0; }
.run .pulse { animation: pulse 1.2s ease-in-out forwards; }
@keyframes pulse { 0% { opacity: 0; } 15% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .a, .pop, .pulse { opacity: 1 !important; transform: none !important; }
  .d { stroke-dashoffset: 0 !important; }
  .dim0 { opacity: .16 !important; }
  /* The replay control stays visible and clickable here on purpose. Every
     card is already drawn in its finished state, so a click re-runs the
     readouts and lands straight on that same state, no motion introduced. */
}

/* ── spec table (pricing, how-it-works, guarantees, recent work) ─────────── */
.spec { border-top: 1px solid var(--border); }
.spec-r { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--border-2); }
.spec-k { color: var(--text-3); }
.spec-v { font-family: var(--disp); font-weight: 600; font-stretch: 104%; font-size: clamp(1.05rem, 1.6vw, 1.25rem); letter-spacing: -.02em; white-space: nowrap; color: var(--text); }

.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2.5rem; }
@media (max-width: 960px) { .pricing-grid { grid-template-columns: minmax(0, 1fr); } }
.price-card { border: 1px solid var(--border); background: var(--surface); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 1rem; }
.price-name { font-family: var(--disp); font-weight: 600; font-stretch: 104%; text-transform: uppercase; letter-spacing: -.02em; font-size: 1.3rem; color: var(--text); }
.price-amt { font-family: var(--disp); font-weight: 600; font-size: clamp(2rem, 4vw, 2.6rem); color: var(--text-accent); letter-spacing: -.02em; }
.price-amt span { font-family: var(--body); font-weight: 400; font-size: 1rem; color: var(--text-3); }
.price-amt-text { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.25; }
.price-copy { color: var(--text-2); line-height: 1.55; }
.price-list { border-top: 1px solid var(--border); }
.price-list-r { padding: .7rem 0; border-bottom: 1px solid var(--border-2); color: var(--text-2); font-size: .92rem; line-height: 1.4; }
.price-list-r:last-child { border-bottom: none; }
.price-list-r strong { color: var(--text); font-weight: 600; }
.price-value-line { color: var(--text); }
.price-terms { color: var(--text-3); font-size: .78rem; letter-spacing: .04em; margin-top: .35rem; }
.price-math { margin-top: .5rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.price-math-hd { font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); margin-bottom: .8rem; }
.price-math-r { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--border-2); font-size: .88rem; }
.price-math-r:last-child { border-bottom: none; padding-top: .7rem; }
.price-math-r .k { color: var(--text-2); }
.price-math-r .v { font-family: var(--mono); color: var(--text); }
.price-math-r:last-child .k, .price-math-r:last-child .v { font-family: var(--disp); font-weight: 600; font-size: 1rem; }
.price-math-r:last-child .v { color: var(--text-accent); }

.inaction { border: 1px solid var(--border); border-top: 2px solid var(--rust); background: var(--bg); padding: clamp(1.5rem, 3vw, 2.25rem); margin-top: clamp(2rem, 4vw, 3rem); }
.inaction-hd { font-family: var(--mono); font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-accent); margin-bottom: 1rem; }
.inaction-row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--border-2); }
.inaction-row:last-child { border-bottom: none; }
.inaction-row .k { color: var(--text-2); }
.inaction-row .v { font-family: var(--mono); color: var(--text); }
.inaction-row.total .v { color: var(--text-accent); }

.proc { margin-top: 2.9rem; border-top: 1px solid var(--border); }
.pr { display: grid; grid-template-columns: 60px 1fr 1.35fr; gap: 1.4rem; padding: 1.55rem 0; border-bottom: 1px solid var(--border-2); align-items: baseline; }
@media (max-width: 760px) { .pr { grid-template-columns: 40px 1fr; gap: .85rem; } .pr .pd { grid-column: 2; } }
.pr-n { color: var(--text-3); }
.pr-t { font-family: var(--disp); font-weight: 500; font-stretch: 98%; font-size: 1.16rem; letter-spacing: -.015em; color: var(--text); }
.pd { color: var(--text-2); }

.guarantee { border-top: 1px solid var(--border); }
.guarantee-r { border-left: 2px solid var(--rust); padding: 1.3rem 0 1.3rem 1.2rem; border-bottom: 1px solid var(--border-2); }
.guarantee-r .g-t { font-family: var(--disp); font-weight: 600; font-stretch: 100%; font-size: 1.1rem; color: var(--text); margin-bottom: .35rem; }
.guarantee-r .g-d { color: var(--text-2); }

.work-list { border-top: 1px solid var(--border); }
.work-r { display: grid; grid-template-columns: 1.2fr 1.6fr 1fr; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--border-2); align-items: baseline; }
@media (max-width: 760px) { .work-r { grid-template-columns: minmax(0, 1fr); gap: .3rem; } }
.work-r .w-p { font-family: var(--disp); font-weight: 600; font-stretch: 100%; color: var(--text); }
.work-r .w-l { color: var(--text-2); }
/* These are real anchors sitting in a row of plain text, so they carry both
   the accent and an underline. The underline is the part that actually says
   "clickable": it survives color blindness, and it keeps the affordance off
   color alone, which matters because rust at this size measures 4.13:1 on
   --void and 4.22:1 on --paper, just under the 4.5 AA floor. */
.work-r .w-n { color: var(--text-accent); font-family: var(--mono); font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; text-align: right; text-decoration: underline; text-underline-offset: 3px; transition: color .18s; }
a.w-n:hover { color: var(--text); }
@media (max-width: 760px) { .work-r .w-n { text-align: left; } }

/* ── founder ─────────────────────────────── */
.founder { display: grid; grid-template-columns: minmax(180px, .5fr) 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; margin-top: 2.5rem; }
@media (max-width: 760px) { .founder { grid-template-columns: minmax(0, 1fr); } }
.founder-photo { width: 100%; height: auto; max-width: 260px; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--border); }
.founder-socials { display: flex; align-items: center; gap: 1.25rem; margin-top: 1rem; }
.founder-socials a { color: var(--text-2); display: inline-flex; transition: color .18s; }
.founder-socials a:hover { color: var(--text-accent); }
.founder-socials svg { width: 20px; height: 20px; display: block; }
.founder-copy p { color: var(--text-2); line-height: 1.6; margin-bottom: 1rem; }
.founder-copy p:last-child { margin-bottom: 0; }
/* The About page's social row reuses the footer's text-link treatment, just
   sitting under the photo instead of in the footer bar. */
.about-social { margin-top: 1.1rem; gap: 1rem; row-gap: .45rem; }

/* ── objections accordion ─────────────────────────────── */
.accordion { border-top: 1px solid var(--border); margin-top: 2.5rem; }
.acc-item { border-bottom: 1px solid var(--border-2); }
.acc-q { width: 100%; text-align: left; background: none; border: none; padding: 1.3rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--text); font-family: var(--disp); font-weight: 500; font-size: 1.05rem; letter-spacing: -.01em; cursor: pointer; }
.acc-q .plus { color: var(--text-accent); font-family: var(--mono); flex: 0 0 auto; transition: transform .2s; }
.acc-q[aria-expanded="true"] .plus { transform: rotate(45deg); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .25s cubic-bezier(.2, .7, .3, 1); }
.acc-a p { color: var(--text-2); padding-bottom: 1.3rem; max-width: 60ch; line-height: 1.55; }

/* ── final CTA + form ─────────────────────────────── */
.cta { border: 1px solid var(--border); border-top: 2px solid var(--rust); background: var(--bg); padding: clamp(2.25rem, 5vw, 4rem); text-align: center; }
.cta h2 { max-width: 17ch; margin: 0 auto; }
.cta .lede { margin: 1.35rem auto 0; max-width: 56ch; }
.cta .h-cta { justify-content: center; margin-top: 2rem; }
.cta-m { color: var(--text-3); margin-top: 1.7rem; }

.contact-form { max-width: 460px; margin: 2.5rem auto 0; text-align: left; display: flex; flex-direction: column; gap: 1rem; }
.contact-form label { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); display: block; margin-bottom: .4rem; }
.contact-form textarea { resize: vertical; min-height: 90px; }
.contact-form .btn { align-self: flex-start; }
.form-note { color: var(--text-3); font-size: .82rem; }

/* ── mobile sticky CTA ─────────────────────────────── */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 600; background: var(--surface);
  border-top: 1px solid var(--border); padding: .85rem var(--gut); display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; transform: translateY(110%); transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta-price { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--text-3); }
.sticky-cta-dismiss { background: none; border: none; color: var(--text-3); font-size: 1.2rem; line-height: 1; padding: .3rem; cursor: pointer; }
.sticky-cta-dismiss:hover { color: var(--text); }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* ── text-me widget (fixed, bottom right, every page) ─────────────────────
   Sits above the mobile .sticky-cta bar rather than beside it: that bar is
   full width below 900px, so the launcher is lifted clear of it and drops
   back to the corner once the bar stops rendering. */
.text-widget { position: fixed; right: var(--gut); bottom: 5.75rem; z-index: 620; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
@media (min-width: 900px) { .text-widget { bottom: 1.5rem; } }
.text-widget-btn {
  display: inline-flex; align-items: center; gap: .5rem; background: var(--rust); color: var(--on-accent);
  border: 1px solid var(--rust); padding: .7rem 1.1rem; font-family: var(--body); font-size: .9rem;
  font-weight: 500; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.text-widget-btn:hover { background: var(--rust-deep); border-color: var(--rust-deep); }
.text-widget-btn svg { flex: 0 0 auto; }
.text-widget-panel {
  position: relative; width: min(19rem, calc(100vw - var(--gut) * 2));
  background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--rust);
  padding: 1.1rem 1.2rem 1.15rem;
}
.text-widget-t { font-family: var(--disp); font-weight: 600; font-stretch: 104%; text-transform: uppercase; letter-spacing: -.02em; font-size: 1.05rem; color: var(--text); }
.text-widget-d { color: var(--text-2); font-size: .88rem; line-height: 1.5; margin: .35rem 0 .8rem; }
.text-widget-close { position: absolute; top: .35rem; right: .45rem; background: none; border: none; color: var(--text-3); font-size: 1.2rem; line-height: 1; padding: .3rem; cursor: pointer; }
.text-widget-close:hover { color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .text-widget.open .text-widget-panel { animation: rise .25s cubic-bezier(.22, .61, .36, 1); }
}

/* ── scan: intro / quiz shell ─────────────────────────────── */
.scan-wrap { max-width: 720px; margin: 0 auto; padding: 0 var(--gut); }
.scan-screen { display: none; }
.scan-screen.active { display: block; animation: rise .45s cubic-bezier(.22, .61, .36, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.scan-intro { padding: clamp(2rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3rem); }
.scan-intro h1 { margin: 1rem 0 1rem; }
.scan-intro .lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: 54ch; }
.scan-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 1.3rem 0; color: var(--text-3); }
.scan-meta span { display: flex; align-items: center; gap: .5rem; }
.scan-start-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.6rem; }
.scan-start-row .note { color: var(--text-3); font-size: .9rem; }

.scan-progress { position: sticky; top: 74px; z-index: 400; background: var(--bg); padding: 1.2rem 0 .9rem; }
.scan-prog-meta { display: flex; justify-content: space-between; margin-bottom: .6rem; }

.qblock { padding: clamp(1.5rem, 5vw, 3rem) 0 2.5rem; }
.qblock .kick { margin-bottom: 1rem; }
.qblock h2 { font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.12; margin-bottom: 1.6rem; }
.opt-list { display: flex; flex-direction: column; gap: .7rem; }
.opt {
  display: flex; align-items: center; gap: 1rem; text-align: left; width: 100%;
  background: var(--surface); border: 1px solid var(--border); padding: 1.05rem 1.15rem; cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s; color: var(--text); font: inherit;
}
.opt:hover { border-color: var(--rust-ring); background: var(--elevated); transform: translateY(-1px); }
.opt.sel { border-color: var(--rust); background: var(--rust-soft); }
.opt .key {
  flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid var(--border); display: flex; align-items: center;
  justify-content: center; font-family: var(--mono); font-size: .8rem; color: var(--text-3); transition: all .18s ease;
}
.opt:hover .key, .opt.sel .key { border-color: var(--rust); color: var(--text-accent); background: var(--rust-soft); }
.opt .otext { font-size: 1.02rem; line-height: 1.35; }
.qnav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 1.8rem; gap: 1rem; }
.qback { background: none; border: none; color: var(--text-3); font: inherit; font-size: .92rem; cursor: pointer; padding: .4rem 0; }
.qback:hover { color: var(--text); }
.qback:disabled { opacity: 0; pointer-events: none; }

/* Text/URL question types (business name, website, city): a field plus an
   explicit Continue button, since there's no click-to-advance option list. */
.qtext-field input {
  width: 100%; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); padding: 1.05rem 1.15rem; font-family: var(--body);
  font-size: 1.02rem; border-radius: 0; -webkit-appearance: none; appearance: none;
}
.qtext-field input::placeholder { color: var(--text-3); opacity: 1; }
.qtext-field input:focus {
  border: 2px solid var(--rust); outline: none;
  padding: calc(1.05rem - 1px) calc(1.15rem - 1px);
}
.qskip { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; cursor: pointer; color: var(--text-2); font-size: .92rem; }
.qskip input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex: 0 0 auto;
  background: var(--surface); border: 1px solid var(--border); position: relative; cursor: pointer;
}
.qskip input[type="checkbox"]:checked { background: var(--rust); border-color: var(--rust); }
.qskip input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px;
  border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.qcontinue { margin-top: 1.6rem; }

/* Between the quiz and the results: automated checks (site fetch + Google
   Places) run server-side and can take a few seconds. */
.scan-loading { padding: clamp(4rem, 12vw, 7rem) 0; text-align: center; }
.scan-loading-dot { width: 8px; height: 8px; background: var(--rust); display: inline-block; margin: 0 auto 1.3rem; animation: scan-pulse 1.1s ease-in-out infinite; }
@keyframes scan-pulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.6); } }
.scan-loading p { color: var(--text-2); }
.scan-loading .lede { margin-top: .5rem; }
@media (prefers-reduced-motion: reduce) { .scan-loading-dot { animation: none; opacity: 1; } }
.scan-error { padding: clamp(2rem, 6vw, 3.5rem) 0; }
.scan-error p { color: var(--text-2); margin-bottom: 1.4rem; }
.scan-error .btn { margin-right: .8rem; }

/* ── scan: instrument-readout results ─────────────────────────────── */
.scan-results { padding: clamp(2rem, 6vw, 3.5rem) 0 4rem; }
.res-head { margin-bottom: 2.2rem; }
.res-head h2 { margin-bottom: .9rem; }
.res-head .lede { max-width: 56ch; }

.lb { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-accent); border: 1px solid var(--rust-ring); background: var(--rust-soft); padding: .25rem .55rem; white-space: nowrap; }
.lb.q { color: var(--text-2); border-color: var(--border); background: transparent; }
.lb.bad { color: var(--on-accent); border-color: var(--rust); background: var(--rust); }

.scan-sec-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 2.4rem 0 1rem; display: flex; align-items: center; gap: .7rem; }
.scan-sec-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.win { display: flex; gap: .7rem; align-items: flex-start; padding: .4rem 0; color: var(--text-2); }
.win::before { content: '\2713'; color: var(--text); font-weight: 700; flex: 0 0 auto; }

/* ── six-section standing (Solid / Gap / Missing) ─────────────────────── */
.audit-sec { border: 1px solid var(--border); background: var(--bg); padding: clamp(1.2rem, 3vw, 1.7rem); margin-bottom: 1rem; }
.audit-sec-hd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.audit-sec-title { font-family: var(--disp); font-weight: 600; font-size: 1.05rem; color: var(--text); letter-spacing: -.01em; }
.audit-sec-note { color: var(--text-2); margin-bottom: 1rem; }
.audit-checks { border-top: 1px solid var(--border-2); padding-top: .8rem; display: flex; flex-direction: column; gap: .45rem; }
.audit-check { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: var(--text-2); }
.audit-check::before { flex: 0 0 auto; font-weight: 700; width: 1em; }
.audit-check.solid::before { content: '\2713'; color: var(--text); }
.audit-check.gap::before { content: '\2013'; color: var(--text-accent); }
.audit-check.missing::before { content: '\2715'; color: var(--text-accent); }

.stat-cite { border-left: 2px solid var(--rust); padding: .1rem 0 .1rem 1rem; margin-top: 1.1rem; }
.stat-cite p { color: var(--text-2); font-size: .92rem; line-height: 1.55; margin: 0; }
.stat-source { display: block; margin-top: .4rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.stat-source:hover { color: var(--text-accent); }

.fix-steps { max-width: none; }
.checked-manually { color: var(--text-3); font-size: .85rem; margin-top: 1.2rem; }

.pipeline-wrap { border: 1px solid var(--rust-ring); background: var(--surface); padding: clamp(1.3rem, 4vw, 2rem); margin: 2.2rem 0; }
.pipeline-intro { color: var(--text-2); max-width: 58ch; margin: .2rem 0 1.6rem; }
.pipeline-item { display: flex; gap: 1.1rem; }
.pipeline-left { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; padding-top: .1rem; }
.pipeline-num {
  width: 30px; height: 30px; border: 1px solid var(--border); color: var(--text-3); font-family: var(--mono);
  font-weight: 600; font-size: .82rem; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.pipeline-item.is-start .pipeline-num { background: var(--rust); border-color: var(--rust); color: var(--on-accent); }
.pipeline-connector { width: 1px; flex: 1; background: var(--border); margin: .3rem 0; min-height: 1.3rem; }
.pipeline-content { flex: 1; padding: 0 0 1.6rem .9rem; border-left: 2px solid transparent; }
.pipeline-item.is-start .pipeline-content { border-left-color: var(--rust-ring); }
.pipeline-item:last-child .pipeline-content { padding-bottom: 0; }
.pipeline-header { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.pipeline-role { font-family: var(--disp); font-weight: 600; font-size: 1rem; color: var(--text); }
.pipeline-item.is-start .pipeline-role { color: var(--text-accent); }
.pipeline-desc { color: var(--text-2); font-size: .95rem; margin-bottom: .5rem; line-height: 1.55; }
.pipeline-tools { font-size: .74rem; color: var(--text-accent); font-family: var(--mono); letter-spacing: .04em; }

.judgment { background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--rust); padding: 1.2rem 1.4rem; margin: 2.2rem 0; color: var(--text-2); }
.judgment b { color: var(--text); }

.capture { margin-top: 1rem; }
.scan-field { margin-bottom: .8rem; }
.scan-consent { display: flex; align-items: flex-start; gap: .6rem; margin: .3rem 0 .9rem; cursor: pointer; color: var(--text-2); font-size: .88rem; line-height: 1.45; }
.cap-done { display: none; padding: 1.2rem 0; color: var(--text); }
.cap-done b { color: var(--text-accent); }

.next-steps { margin-top: 2.6rem; }
.step-option { display: flex; gap: 1.1rem; padding: 1.3rem 0; }
.step-option + .step-option { border-top: 1px solid var(--border-2); }
.step-num {
  flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid var(--border); display: flex; align-items: center;
  justify-content: center; font-family: var(--mono); font-size: .78rem; color: var(--text-3); margin-top: .2rem;
}
.step-body { flex: 1; min-width: 0; }
.step-h { font-family: var(--disp); font-weight: 600; font-size: 1.05rem; margin-bottom: .3rem; color: var(--text); }
.step-sub { color: var(--text-2); font-size: .95rem; margin-bottom: .8rem; }
.pdf-link { background: none; border: none; color: var(--text-3); font: inherit; font-size: .82rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.pdf-link:hover { color: var(--text-accent); }

.scan-retake { text-align: center; margin-top: 2.2rem; }
.scan-retake button { background: none; border: none; color: var(--text-3); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.scan-retake button:hover { color: var(--text); }

@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: #fff !important; color: #111 !important; font-size: 11pt; }
  #lamp, #grain, #frame, nav, footer, .sticky-cta, .text-widget, .scan-retake, .next-steps, .print-btn, .scan-progress, .text-me { display: none !important; }
  .scan-screen { display: block !important; animation: none !important; }
  #scanIntro, #scanQuiz { display: none !important; }
  #scanResult { display: block !important; }
  .scan-results { padding: 0; }
  .print-only { display: block !important; }
  .print-header { display: flex !important; justify-content: space-between; padding-bottom: .8rem; border-bottom: 2px solid #111; margin-bottom: 1.5rem; font-size: .85rem; font-weight: 600; }
  .print-footer { margin-top: 2rem; padding-top: .8rem; border-top: 1px solid #ccc; font-size: .8rem; color: #555; text-align: center; }
  .audit-sec, .pipeline-wrap, .judgment, .phase-banner, .guarantee-r { border-color: #ccc !important; background: #f9f9f9 !important; }
  .audit-sec-title, .pipeline-role, .res-head h2, .step-h, .phase-banner h3, .g-t { color: #111 !important; }
  .audit-sec-note, .pipeline-desc, .pipeline-intro, .step-sub, .phase-banner p, .phase-banner-label, .g-d, .stat-cite p { color: #444 !important; }
  .audit-check.solid::before, .audit-check.gap::before, .audit-check.missing::before { color: #111 !important; }
  .lb, .lb.bad { border-color: #999 !important; background: #eee !important; color: #111 !important; }
  .stat-cite, .stat-source { border-color: #999 !important; color: #555 !important; }
  .pipeline-num { background: #eee !important; border-color: #888 !important; color: #111 !important; }
  .pipeline-item.is-start .pipeline-num { background: #111 !important; color: #fff !important; border-color: #111 !important; }
}
.print-only { display: none; }

/* ── work detail pages ─────────────────────────────── */
.work-hero-img { width: 100%; height: auto; border: 1px solid var(--border); margin-top: 2rem; display: block; }
.work-spec { margin-top: 2.5rem; }
.work-spec .spec-r { flex-wrap: wrap; }
.work-spec .spec-v { white-space: normal; text-align: right; }
@media (max-width: 560px) { .work-spec .spec-v { text-align: left; } }

/* A preview, not a browsing surface. Capped and centred so it doesn't own the
   whole viewport, and pointer-events are off on the frame itself so a wheel or
   a swipe over it scrolls the page instead of being captured by the embedded
   site. The URL in the bar is the way in. */
.site-frame { border: 1px solid var(--border); background: var(--surface); margin-top: 2rem; max-width: 760px; margin-left: auto; margin-right: auto; }
.site-frame-bar { display: flex; align-items: center; gap: .9rem; padding: .7rem .95rem; border-bottom: 1px solid var(--border); }
.site-frame-dots { display: flex; gap: .35rem; flex-shrink: 0; }
.site-frame-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--border-2); display: block; }
.site-frame-url { color: var(--text-3); font-size: .78rem; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.site-frame-url { color: var(--text-accent); text-decoration: underline; text-underline-offset: 3px; transition: color .18s; }
a.site-frame-url:hover { color: var(--text); }
.site-frame-body { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--bg); }
.site-frame-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; }

/* Interactive with no activation step: cursor on the frame and scroll means you
   are scrolling that site. The only guard is while the page itself is moving,
   when site-frame.js flips .is-passthrough on so the wheel keeps going to the
   page instead of being caught by a frame you were only scrolling past. */
.site-frame.is-passthrough .site-frame-body iframe { pointer-events: none; }
.spec-v a { text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; transition: color .18s; }
.spec-v a:hover { color: var(--text-accent); }
.spec-v-link { font-family: var(--mono); font-weight: 400; font-size: .85rem; letter-spacing: .03em; }

/* ── live demos: shared ─────────────────────────────── */
.demo-lede { color: var(--text-2); max-width: 62ch; margin-bottom: 2rem; font-size: 1.02rem; line-height: 1.5; }

/* ── financing calculator ─────────────────────────────── */
.finance-calc { border: 1px solid var(--border); background: var(--surface); padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 760px) { .finance-calc { grid-template-columns: minmax(0, 1fr); } }
.finance-field { margin-bottom: 1.1rem; }
.finance-field label { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: .4rem; }
.finance-field input, .finance-field select { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: .75rem .9rem; font-family: var(--body); font-size: 1rem; }
.finance-field input:focus, .finance-field select:focus { border-color: var(--rust); outline: none; }
.finance-outputs { border-left: 1px solid var(--border); padding-left: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 760px) { .finance-outputs { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 1.5rem; } }
.finance-out-row { display: flex; justify-content: space-between; align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--border-2); gap: 1rem; }
.finance-out-row:last-child { border-bottom: none; }
.finance-out-row .k { color: var(--text-2); }
.finance-out-row .v { font-family: var(--disp); font-weight: 600; font-size: 1.3rem; color: var(--text); letter-spacing: -.02em; white-space: nowrap; }
.finance-out-row.highlight .v { color: var(--text-accent); font-size: 1.7rem; }

/* ── photo tagging + search demo ─────────────────────────────── */
.tag-review { border: 1px solid var(--border); background: var(--surface); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
@media (max-width: 760px) { .tag-review { grid-template-columns: minmax(0, 1fr); } }
.tag-review-photo { aspect-ratio: 1; overflow: hidden; background: var(--bg); }
.tag-review-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tag-review-body { padding: clamp(1.2rem, 3vw, 1.8rem); display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.tag-review-reasoning { font-style: italic; color: var(--text-2); line-height: 1.55; font-size: .95rem; }
.tag-chip-grid { display: flex; flex-wrap: wrap; gap: .6rem; }
.tag-chip { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid; background: transparent; padding: .4rem .7rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .03em; cursor: pointer; transition: opacity .15s, border-color .15s, color .15s; }
/* Rust is reserved for the one thing that needs attention (low-confidence
   tags, worth a human look) — a confirmed high-confidence tag stays neutral
   rather than reaching for a second accent color. */
.tag-chip .pct { }
.tag-chip.hi { color: var(--text); border-color: var(--border); }
.tag-chip.lo { color: var(--text-accent); border-color: var(--rust-ring); }
.tag-chip.off { opacity: .4; text-decoration: line-through; }
.tag-review-bar { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; margin-top: auto; border-top: 1px solid var(--border-2); gap: 1rem; flex-wrap: wrap; }

.search-input-row input { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: .9rem 1.1rem; font-family: var(--body); font-size: 1rem; margin-bottom: 1.2rem; }
.search-input-row input:focus { border-color: var(--rust); outline: none; }
.search-suggested { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.4rem; }
.search-suggested button { background: none; border: 1px solid var(--border); color: var(--text-2); font-family: var(--mono); font-size: .7rem; letter-spacing: .05em; padding: .4rem .7rem; cursor: pointer; transition: border-color .15s, color .15s; }
.search-suggested button:hover { border-color: var(--rust); color: var(--text-accent); }
.search-meta { color: var(--text-3); margin-bottom: 1.2rem; }
.search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.search-result { border: 1px solid var(--border); background: var(--surface); }
.search-result img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.search-result-tags { padding: .55rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.search-result-tags span { font-family: var(--mono); font-size: .6rem; color: var(--text-3); border: 1px solid var(--border); padding: .12rem .35rem; }
.search-result-tags span.match { color: var(--text-accent); border-color: var(--rust-ring); }
.search-empty { color: var(--text-3); padding: 2rem 0; }

/* ── expense tracker demo (work page) ─────────────────────────────────────
   Two mockup panels side by side, field and office, sharing the carousel's
   .demo-stage frame and .a/.pop/.d animation classes. */
.xp-demo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
@media (max-width: 760px) { .xp-demo { grid-template-columns: minmax(0, 1fr); } }
.xp-panel { min-width: 0; }
.xp-hd { display: flex; align-items: center; gap: .6rem; padding-bottom: .7rem; border-bottom: 1px solid var(--border); margin-bottom: .9rem; }
.xp-label { color: var(--text); letter-spacing: .12em; }
.xp-sub { color: var(--text-2); font-size: .95rem; line-height: 1.5; margin-bottom: 1.1rem; min-height: 3rem; }
.xp-demo .demo-stage { margin: 0; }
.xp-ft { grid-column: 1 / -1; display: flex; justify-content: flex-end; }

/* ── four phases (homepage spine) ─────────────────────────────── */
.phases { margin-top: 2.9rem; border-top: 1px solid var(--border); }
.phase { display: grid; grid-template-columns: 52px 1fr; gap: 1.5rem; padding: clamp(1.8rem, 4vw, 2.5rem) 0; border-bottom: 1px solid var(--border-2); }
.phase-num { width: 42px; height: 42px; background: var(--rust); color: var(--on-accent); font-family: var(--disp); font-weight: 600; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.phase-body { min-width: 0; }
.phase-t { font-family: var(--disp); font-weight: 600; font-stretch: 104%; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--text); margin-bottom: .85rem; }
.phase-pain { color: var(--text-2); font-weight: 400; line-height: 1.6; margin-bottom: 1.1rem; max-width: 60ch; }
.phase-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; max-width: 60ch; }
.phase-bullets li { position: relative; padding-left: 1.15rem; color: var(--text); line-height: 1.5; }
.phase-bullets li::before { content: ''; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; background: var(--rust); flex: 0 0 auto; }
@media (max-width: 640px) { .phase { grid-template-columns: 1fr; gap: .8rem; } .phase-num { width: 34px; height: 34px; font-size: .95rem; } }

/* ── proof block ─────────────────────────────── */
.proof-facts { border-top: 1px solid var(--border); margin-top: 2.5rem; }
.proof-fact { border-left: 2px solid var(--rust); padding: 1.1rem 0 1.1rem 1.2rem; border-bottom: 1px solid var(--border-2); color: var(--text-2); line-height: 1.6; }
.proof-work { margin-top: 2.8rem; }

/* ── text-me widget (hero, footer, scan results) ─────────────────────── */
.text-me { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .55rem; font-size: .92rem; color: var(--text-2); }
.text-me a { color: var(--text-accent); text-decoration: underline; text-underline-offset: 3px; }
.text-me a:hover { color: var(--text); }
.text-me-num { font-family: var(--mono); font-size: .82rem; color: var(--text); }
.text-me-copy { background: none; border: 1px solid var(--border); color: var(--text-2); font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .55rem; cursor: pointer; }
.text-me-copy:hover { border-color: var(--text-2); color: var(--text); }
.text-me-copy.copied { border-color: var(--text); color: var(--text); }
footer .text-me { color: var(--text-3); }
footer .text-me-num { color: var(--text-2); }
/* Rust-on-paper measured 4.22:1 on a light-themed page's footer (AA needs
   4.5:1 at this size/weight) — the mobile sms: link only, the desktop
   number+Copy-button variant doesn't use rust. Rust doesn't clear AA on
   --void either (4.13:1, same number already documented on the hero
   eyebrow above) so a dark chip alone isn't enough — bone is the token
   that actually passes on a dark surface (16.4:1). Chip is --void, the
   same value the footer already sits on in its default dark context, so
   this is a no-op there and only becomes a visible pill where the
   ambient background is actually light. Underline restored as the link
   affordance now that color alone no longer carries it. */
footer .text-me a { background: var(--void); color: var(--bone); text-decoration: underline; text-underline-offset: 3px; padding: .15rem .5rem; }
footer .text-me a:hover { color: var(--rust); }

/* ── phase result banner (scan) ─────────────────────────────── */
.phase-banner { border: 1px solid var(--border); border-left: 3px solid var(--rust); background: var(--surface); padding: clamp(1.3rem, 4vw, 1.9rem); margin-bottom: 2.2rem; }
.phase-banner-label { color: var(--text-3); margin-bottom: .6rem; }
.phase-banner h3 { font-family: var(--disp); font-weight: 600; font-stretch: 104%; font-size: clamp(1.2rem, 2.4vw, 1.5rem); color: var(--text); letter-spacing: -.015em; margin-bottom: .7rem; }
.phase-banner p { color: var(--text-2); line-height: 1.55; max-width: 60ch; margin-bottom: 1.1rem; }

/* ── form fields: /scan capture form + /contact ───────────────────────────
   Explicit on every property — never inherited, never a browser default.
   This is the fix for the invisible-placeholder bug: a light beige fill
   with dark placeholder text used to sit unstyled on a dark page, and the
   browser-default placeholder color read as near-invisible against it.
   Fixed values (--bone/--ink), not theme-relative tokens, so the field
   reads the same whether the section around it is dark or light. */
.contact-form input,
.contact-form textarea,
.scan-field input {
  width: 100%; background: var(--bone); color: var(--ink);
  border: 1px solid rgba(var(--ink-rgb), .25);
  padding: .8rem .95rem; font-family: var(--body); font-size: .95rem;
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder,
.scan-field input::placeholder {
  color: rgba(var(--ink-rgb), .55);
  opacity: 1; /* Firefox otherwise dims placeholder opacity again on top of this */
}
.contact-form input:focus,
.contact-form textarea:focus,
.scan-field input:focus {
  border: 2px solid var(--rust); outline: none;
  padding: calc(.8rem - 1px) calc(.95rem - 1px); /* offset the border growth so nothing shifts */
}

/* Checkboxes — a real drawn box, not the native control tinted by
   accent-color, so the border and checked state are guaranteed visible
   regardless of OS/browser theme. */
.scan-consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto;
  background: var(--bone); border: 1px solid rgba(var(--ink-rgb), .4);
  position: relative; cursor: pointer;
}
.scan-consent input[type="checkbox"]:checked { background: var(--rust); border-color: var(--rust); }
.scan-consent input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px;
  border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.scan-consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* ── three-tier pricing (Tune-Up, Engine, Custom Rig) ─────────────────────
   One shared partial renders these cards on both / and /pricing, so this
   block is the only place their layout is described.

   The Engine carries a rust top border. No badge or label row on any card:
   the border is the whole emphasis.

   The Engine runs far longer than the other two (five focus areas, a
   timeline, a retention line). Stretching all three to equal height would
   leave the short cards with a dead gap under their buttons, so cards are
   NOT stretched. Instead, min-height reserves on the heading/price/sub/body
   rows keep the shared header block aligned across the row, and everything
   after it flows independently per card. Each CTA sits at the bottom of ITS
   OWN content. */
.price-card.featured { border-top: 2px solid var(--rust); }

/* Cheapest first, left to right and stacked. There is deliberately no
   `order` rule anywhere in this block: the mobile sequence has to stay
   Tune-Up, Engine, Custom Rig so the visitor meets the low number before
   the high one on every screen size. */
.pricing-grid.cols-3 { align-items: start; }
.pricing-grid.cols-3 .price-card { display: flex; flex-direction: column; }
.pricing-grid.cols-3 .price-sub { color: var(--text-3); font-size: .92rem; }
.pricing-grid.cols-3 .price-card .btn { align-self: flex-start; margin-top: .4rem; }
/* Reserved heights only where the cards actually sit side by side. Below
   961px the grid is one column and there is no neighbouring card to line up
   with, so reserving would just open dead space. */
@media (min-width: 961px) {
  .pricing-grid.cols-3 .price-name { min-height: 1.9rem; }
  /* The Engine's price line ("$5,590 setup, then $597/mo") wraps in a third
     of the row where "From $299" never does. Two alignments doing two jobs:
     `align-items: baseline` sits the small qualifier on the number's own
     baseline (flex-start hung it near the top of the number's line box),
     and `align-content: flex-end` drops the whole line to the bottom of the
     reserved space, so the Custom Rig's smaller .price-amt-text line ends up
     on roughly the same line as the other two instead of floating above them. */
  .pricing-grid.cols-3 .price-amt { min-height: 5.4rem; display: flex; align-items: baseline; align-content: flex-end; flex-wrap: wrap; column-gap: .5rem; }
  .pricing-grid.cols-3 .price-sub { min-height: 1.5rem; }
  .pricing-grid.cols-3 .price-copy { min-height: 5.1rem; }
}

/* ── /tune-up intake ──────────────────────────────────────────────────────
   Reuses .contact-form's field styling (same fixed bone/ink fields, same
   focus ring). Only what that form does not already cover lives here. */
/* Inline link inside body copy. Full-contrast text with a rust underline
   rather than rust text: rust on paper measures 4.25:1, under the 4.5:1 AA
   floor at this size, so the accent carries the underline and the text keeps
   the readable color. */
.lede-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--rust); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lede-link:hover { text-decoration-color: var(--text); }

.tune-form { max-width: 560px; margin: 2rem 0 0; }
.tune-form textarea { min-height: 110px; }
.tune-form .form-row { margin-bottom: 1.1rem; }
.tune-form .opt-mark { color: var(--text-3); text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: .8rem; }
/* Inline, under the field it belongs to: the error has to be readable
   without a browser alert and without moving the field it describes. */
.tune-form .field-err { color: var(--rust); font-size: .82rem; margin-top: .35rem; }
.tune-form .field-err[hidden] { display: none; }
.tune-form input[aria-invalid="true"],
.tune-form textarea[aria-invalid="true"] { border-color: var(--rust); }
.tune-submit-note { color: var(--text-3); font-size: .85rem; margin-top: .8rem; }
.tune-done { border-left: 2px solid var(--rust); padding: 1.1rem 1.3rem; background: var(--surface); max-width: 560px; margin-top: 2rem; }
.tune-done p { color: var(--text); }

/* Subordinate to the button above it: body text with an underlined link,
   never a second button and never the rust fill. */
.price-alt-link { color: var(--text-3); font-size: .85rem; margin-top: -.2rem; }
.price-alt-link a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.price-alt-link a:hover { color: var(--text); }

.price-order-note { color: var(--text-3); font-size: .88rem; font-style: italic; }
.price-timeline { color: var(--text-2); font-weight: 500; }
.price-after { border-top: 1px solid var(--border); padding-top: .9rem; }
.price-after p { font-size: .85rem; color: var(--text-3); line-height: 1.5; }
.price-after p:first-child { color: var(--text-2); margin-bottom: .3rem; }
.price-after strong { color: var(--text); font-weight: 600; }

@media (max-width: 760px) {
  .pricing-grid.cols-3 .price-sub:empty { display: none; }
}

/* ── homepage final CTA — no box, deliberate (not equal) vertical rhythm.
   Every other page's .cta keeps its bordered-box treatment; this is scoped
   to the homepage's closing section specifically. */
#call .cta { border: none; padding: 0; text-align: center; }
#call .cta .lede { margin-top: .85rem; }
#call .cta .h-cta { margin-top: 2.5rem; }