/*
 * DoneOnce marketing site — the quiet zinc redesign (2026-09-19).
 *
 * The design language is lobbyhq.app's: one dark zinc ground, one teal accent, display type in
 * Schibsted Grotesk, body in Instrument Sans, and JetBrains Mono ONLY for the small uppercase
 * labels. Vibrancy lives in the accent and the large type; there is no glass, no glow, no aurora,
 * no gradient text and no cursor effect — the founder's verdict on the previous page was
 * "too flashy", and every rule below is the calmer answer.
 *
 * Shared by /index.html and /es/index.html, so every selector here is content-neutral.
 */

/* Self-hosted since DON-818: the Google Fonts stylesheet was the one render-blocking request on
   mobile (up to 2.4 s). Latin subset of each variable font (Spanish needs nothing beyond it), all
   SIL Open Font License 1.1. The pages preload Instrument Sans, the body face. */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap; src: url(/assets/fonts/instrument-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/assets/fonts/schibsted-grotesk-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/jetbrains-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #18181b;
  --bg-2: #1f1f23;
  --surface: #27272a;
  --surface-2: #1c1c20;
  --line: #3f3f46;
  --line-soft: #2c2c31;
  --ink: #fafafa;
  --ink-soft: #a1a1aa;
  --ink-mute: #71717a;
  --accent: #2dd4bf;
  --accent-ink: #042f2e;
  --accent-soft: #134e4a;
  --accent-line: rgba(45, 212, 191, 0.45);
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;
  --radius: 8px;
  --radius-lg: 16px;
  --maxw: 1120px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --font-display: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-ui: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
  /* The "a little flashy" layer (founder, 2026-09-19: the first cut was too plain). Vibrancy is
     allowed on fills, glows, borders and the hero's display line — never on body text. */
  --cyan: #22d3ee;
  --indigo: #818cf8;
  --grad: linear-gradient(100deg, #5eead4 0%, #22d3ee 45%, #818cf8 100%);
  --glow: 0 0 0 1px rgba(45, 212, 191, 0.25), 0 10px 32px rgba(34, 211, 238, 0.28);
  --glow-hi: 0 0 0 1px rgba(45, 212, 191, 0.45), 0 16px 44px rgba(34, 211, 238, 0.42);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* `clip` on both html and body: `hidden` on body alone still lets iOS pan sideways into the
   aurora blobs and the demo halo, which read as the page "forcing" a scroll. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }

/* The small uppercase label every section opens with — mono, muted, tracked. */
.label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.label.accent { color: var(--accent); }
.label .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: 2px; }

/* ---------- Buttons: one primary, one quiet, one text link with a glyph ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-ui); font-weight: 600; font-size: 14px; line-height: 1;
  padding: 10px 16px; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), transform 0.16s var(--ease);
}
.btn-primary { background: linear-gradient(100deg, #5eead4, #22d3ee); color: var(--accent-ink); box-shadow: var(--glow); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--glow-hi); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { background: var(--surface); border-color: var(--ink-mute); }
.btn-lg { font-size: 15px; padding: 13px 20px; }
.link { color: var(--accent); font-weight: 500; font-size: 14px; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link .g { font-family: var(--font-mono); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(24, 24, 27, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; }
.brand .mark { width: 26px; height: 26px; flex: none; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { color: var(--ink-soft); font-size: 14px; font-weight: 500; transition: color 0.16s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.lang { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink-soft); padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.lang:hover { color: var(--ink); border-color: var(--ink-mute); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 104px) 0 clamp(36px, 5vw, 56px); text-align: center; }
.hero > .wrap { position: relative; z-index: 1; }
/* The aurora: two slow blobs and a faint dotted grid, masked so they fade before the content strip. */
.aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%); }
.aurora::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px); background-size: 28px 28px; }
.aurora .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; mix-blend-mode: screen; }
.aurora .b1 { width: 560px; height: 560px; top: -220px; left: -120px; background: radial-gradient(circle, rgba(45,212,191,0.45), transparent 65%); animation: drift1 26s ease-in-out infinite; }
.aurora .b2 { width: 520px; height: 520px; top: -160px; right: -140px; background: radial-gradient(circle, rgba(129,140,248,0.4), transparent 65%); animation: drift2 30s ease-in-out infinite; }
.aurora .b3 { width: 420px; height: 420px; bottom: -220px; left: 40%; background: radial-gradient(circle, rgba(34,211,238,0.3), transparent 65%); animation: drift3 34s ease-in-out infinite; }
@keyframes drift1 { 50% { transform: translate(90px, 70px) scale(1.12); } }
@keyframes drift2 { 50% { transform: translate(-80px, 90px) scale(1.08); } }
@keyframes drift3 { 50% { transform: translate(60px, -70px) scale(1.14); } }
.hero h1 { font-size: clamp(38px, 6.2vw, 64px); letter-spacing: -0.03em; max-width: 16ch; margin: 22px auto 0; }
.hero h1 .accent { display: block; background: var(--grad); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 9s linear infinite; }
@keyframes shimmer { to { background-position: 200% center; } }
.label .dot { box-shadow: 0 0 10px var(--accent); animation: pulse 2.4s infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.hero .sub { color: var(--ink-soft); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55; max-width: 58ch; margin: 22px auto 0; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 22px; margin-top: 32px; }
.hero-note { margin-top: 18px; color: var(--ink-mute); font-size: 14px; }
/* The trades marquee: chips gliding under the hero; hover pauses it, reduced motion stops it. */
.trades { margin-top: clamp(28px, 4vw, 40px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.trades-track { display: flex; gap: 12px; width: max-content; animation: slide 42s linear infinite; }
.trades:hover .trades-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.trades span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.trades span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); }

/* ---------- Product strip: the two-column header that names the product ---------- */
.strip { border-top: 1px solid var(--line); padding: clamp(36px, 5vw, 48px) 0 clamp(24px, 4vw, 32px); }
.strip-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
.strip h2 { font-size: clamp(26px, 3.4vw, 36px); margin-top: 14px; max-width: 18ch; }
.strip .lede { color: var(--ink-soft); font-size: 17px; line-height: 1.6; padding-top: 34px; }
.strip .price-line { margin-top: clamp(24px, 4vw, 36px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; color: var(--ink-soft); }

/* ---------- Section scaffold ---------- */
section { padding: clamp(56px, 8vw, 88px) 0; }
section.alt { background: var(--bg-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.sec-head { max-width: 62ch; }
.sec-head h2 { font-size: clamp(28px, 3.8vw, 40px); margin-top: 14px; }
.sec-head p { color: var(--ink-soft); font-size: 17px; margin-top: 14px; }

/* ---------- Demo: the animated use cases ---------- */
.demo-sec { padding-top: 0; }
.demo-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab {
  font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 9px 13px; cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.tab:hover { color: var(--ink); border-color: var(--ink-mute); }
.tab[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
#demo { position: relative; }
/* A soft teal→indigo halo behind the demo card, so the centrepiece reads as lit rather than flat. */
#demo::before { content: ''; position: absolute; inset: 30px 0 -40px; z-index: 0; pointer-events: none; background: radial-gradient(60% 50% at 30% 40%, rgba(45,212,191,0.16), transparent 70%), radial-gradient(50% 50% at 80% 70%, rgba(129,140,248,0.14), transparent 70%); filter: blur(30px); }
.demo-head, .demo, .demo-note { position: relative; z-index: 1; }
.demo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(0,0,0,.45), 0 24px 60px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(45,212,191,0.12); overflow: hidden; }
.demo::before { content: ''; display: block; height: 2px; background: var(--grad); }
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--line); font-size: 14px; }
.demo-bar b { font-weight: 600; }
.demo-bar .label { font-size: 11px; }
.demo-lede { padding: 20px 22px 0; color: var(--ink-soft); font-size: 15px; max-width: 70ch; min-height: 46px; }
/* The screen's height is pinned by site.js to the tallest scenario, so rotating scenarios never
   moves the page under the reader. */
.screen { position: relative; margin: 18px 22px 22px; min-height: 380px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 12px; padding: 22px; font-size: 14px; }
.scene { display: none; }
.scene.on { display: block; }
.scene .row { display: flex; align-items: center; gap: 12px; }
.scene .between { justify-content: space-between; }
.scene .card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-top: 12px; }
.scene .card.accent { border-color: var(--accent-line); }
.scene .title { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.scene .mute { color: var(--ink-soft); font-size: 13px; }
.scene .mono { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); letter-spacing: 0.02em; }
.scene .chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink-soft); white-space: nowrap; }
.scene .chip.teal { color: var(--accent); border-color: var(--accent-line); background: rgba(45,212,191,.08); }
.scene .chip.ok { color: var(--ok); border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.08); }
.scene .chip.warn { color: var(--warn); border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.08); }
.scene .line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.scene .line:first-child { border-top: 0; }
.scene .line b { font-weight: 600; }
.scene .total { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.scene .photos { display: flex; gap: 6px; }
.scene .photos i { width: 34px; height: 26px; border-radius: 4px; background: var(--line); display: block; }
.scene .btnish { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: 7px; background: var(--accent); color: var(--accent-ink); }
.scene .btnish.quiet { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.scene .stops { list-style: none; margin: 0; padding: 0; counter-reset: stop; }
.scene .stops li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); counter-increment: stop; }
.scene .stops li:first-child { border-top: 0; }
.scene .stops li::before { content: counter(stop); font-family: var(--font-mono); font-size: 11px; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.scene .stops li .t { margin-left: auto; color: var(--ink-soft); font-size: 12px; font-family: var(--font-mono); white-space: nowrap; }
.scene .stops li.swap { background: rgba(45,212,191,.06); border-radius: 6px; padding-inline: 6px; margin-inline: -6px; }
.scene .load { display: grid; grid-template-columns: 90px repeat(5, 1fr); gap: 6px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.scene .load:first-child { border-top: 0; }
.scene .load.head span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.05em; text-align: center; }
.scene .load .who { font-weight: 600; font-size: 13px; }
.scene .load .bar { height: 18px; border-radius: 4px; background: var(--line-soft); position: relative; overflow: hidden; }
.scene .load .bar::after { content: ''; position: absolute; inset: 0; width: var(--w, 0%); background: var(--accent); opacity: .85; border-radius: 4px; }
.scene .load .bar.hot::after { background: var(--warn); }
.scene .load .bar.free::after { background: var(--ok); }

/* Two states of one element (a chip that turns from Draft to Approved) share one grid cell, so the
   layout never moves when the later one takes over. */
.scene .alt { display: inline-grid; justify-items: end; }
.scene .alt > * { grid-area: 1 / 1; }
/* Every step reveals its elements in place; a later step may retire an earlier one (data-until). */
/* Steps still to come sit in the screen as a blurred ghost, so the reserved space reads as "what
   follows" rather than as a hole; a step comes into focus when its turn arrives. */
.scene [data-step] { opacity: 0.16; filter: blur(3px); transform: translateY(6px); transition: opacity 0.45s var(--ease), filter 0.45s var(--ease), transform 0.45s var(--ease); }
.scene [data-step].in { opacity: 1; filter: none; transform: none; }
.scene [data-step].out { display: none; }
/* Inside a swap cell the not-yet state must stay invisible, or two chips would overlap. */
.scene .alt > [data-step]:not(.in) { opacity: 0; filter: none; }

.demo-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--line); }
.rail { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.rail span { transition: color 0.2s; }
.rail span.done { color: var(--ink-soft); }
.rail span.now { color: var(--accent); }
.demo-ctl { display: flex; gap: 8px; }
.demo-note { text-align: center; color: var(--ink-mute); font-size: 12.5px; margin-top: 16px; max-width: 80ch; margin-inline: auto; }

/* ---------- Capabilities: three quiet columns ---------- */
.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(28px, 4vw, 44px); }
.cap { position: relative; padding: 26px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s; }
.cap::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%); pointer-events: none; }
.cap:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: 0 24px 50px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(45,212,191,0.2); }
/* Icon and label share one row, with room between them; the title and the text stack below. */
.cap { display: flex; flex-direction: column; }
.cap .cap-head { display: flex; align-items: center; gap: 14px; }
.cap .ic { width: 44px; height: 44px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(45,212,191,0.2), rgba(129,140,248,0.2)); border: 1px solid var(--line); color: #8ef0e3; }
.cap h3 { font-size: 19px; margin-top: 20px; }
.cap p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin-top: 10px; }

/* ---------- The product table: what is in, what is coming ---------- */
.table { margin-top: clamp(20px, 3vw, 32px); border-top: 1px solid var(--line); }
.trow { display: grid; grid-template-columns: 1fr 2fr auto; gap: 16px 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.trow h3 { font-size: 19px; }
.trow p { color: var(--ink-soft); font-size: 14.5px; }
.trow .status { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.trow .status.live { color: var(--accent); }

/* ---------- Pricing ---------- */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: start; margin-top: clamp(20px, 3vw, 32px); }
.price-card { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(45,212,191,0.08), rgba(129,140,248,0.08)), var(--surface); border: 1px solid var(--accent-line); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 32px); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), 0 0 60px -20px rgba(45,212,191,0.25); }
.price-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 260px at 50% -20%, rgba(45,212,191,0.22), transparent 60%); pointer-events: none; }
.price-card > * { position: relative; }
.price-amt { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); }
.price-amt .n { font-size: clamp(44px, 6vw, 60px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.price-amt .per { color: var(--ink-soft); font-size: 16px; }
.price-tag { margin-top: 8px; font-weight: 600; }
.price-list { list-style: none; padding: 0; margin: 20px 0 0; }
.price-list li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 14.5px; }
.price-list li:first-child { border-top: 0; }
.price-list li::before { content: '✓'; color: var(--accent); font-family: var(--font-mono); flex: none; }
.price-trial { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--accent-line); border-radius: var(--radius); font-size: 14px; }
.price-trial b { display: block; font-weight: 600; }
.price-cta { margin-top: 18px; }
.price-notes { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
.price-notes p + p { margin-top: 14px; }
.price-notes b { color: var(--ink); font-weight: 600; }
.price-notes .switching { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.price-notes .switching a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-line); }
.trust { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.trust li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 14.5px; }
.trust li .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); padding-top: 4px; min-width: 64px; }

/* ---------- Final CTA + the build line ---------- */
.final { position: relative; overflow: hidden; }
.final .aurora { -webkit-mask-image: none; mask-image: none; opacity: 0.7; }
.final > .wrap { position: relative; z-index: 1; }
.final-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
.final h2 { font-size: clamp(28px, 3.8vw, 40px); margin-top: 14px; max-width: 16ch; }
.final .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 24px; }
.final .aside { color: var(--ink-soft); font-size: 15px; line-height: 1.6; padding-top: 34px; border-top: 1px solid var(--line-soft); }
.final .aside + .aside { margin-top: 22px; }
.final .aside b { color: var(--ink); font-weight: 600; display: block; margin-bottom: 6px; }
.final .aside a { color: var(--accent); }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); padding: 28px 0; }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.foot .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.foot .meta a:hover { color: var(--ink); }

/* ---------- Reveal on scroll: subtle, once ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
html.no-js .reveal { opacity: 1; transform: none; }
/* Without JavaScript the demo is a static finished screen rather than an empty one. */
html.no-js .scene [data-step] { opacity: 1; filter: none; transform: none; }
html.no-js .scene [data-until] { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .scene [data-step] { opacity: 1; filter: none; transform: none; transition: none; }
  .btn:hover, .cap:hover { transform: none; }
  .aurora .blob, .hero h1 .accent, .trades-track, .label .dot { animation: none !important; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .strip-grid, .price-grid, .final-grid { grid-template-columns: 1fr; }
  .strip .lede, .final .aside:first-child { padding-top: 0; border-top: 0; }
  .caps { grid-template-columns: 1fr; gap: 14px; }
  .trow { grid-template-columns: 1fr auto; }
  .trow p { grid-column: 1 / -1; }
  .trow .status { grid-row: 1; grid-column: 2; }
}
@media (max-width: 600px) {
  .hero { padding-top: 48px; }
  .hero-actions .btn { width: 100%; }
  .demo-bar, .demo-foot { padding-inline: 16px; }
  .demo-bar .label:not([data-step-counter]) { display: none; }
  .demo-bar [data-step-counter] { white-space: nowrap; }
  .demo-lede { padding-inline: 16px; }
  .screen { margin: 14px 16px 16px; padding: 16px; min-height: 0; }
  .scene .load { grid-template-columns: 64px repeat(5, 1fr); }
  .scene .stops li .t { display: none; }
  .demo-foot { flex-direction: column; align-items: stretch; }
  .demo-ctl .btn { flex: 1; }
  .price-cta .btn { width: 100%; }
}