/* Valigent site, v4 (Nov 2, 2026). Set by the founder after outside feedback:
   warm off-white page, dark navy type, one navy-blue accent, frosted white glass, Geist + Geist Mono + Inter.
   Glass and the starfield break the skill's house rules on purpose; they are his brand choice. */
:root {
  --bg: #f7f8fa;
  --surface: #e9eaee;
  --ink: #0f1b33;
  --soft: #3d475c;
  --muted: #6a7286;
  --accent: #1e3a8a;
  --accent-dim: rgba(30, 58, 138, 0.08);
  --bad: #c2410c;
  --bad-dim: rgba(194, 65, 12, 0.07);
  --accent-ink: #ffffff;

  --glass-fill: linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.66) 60%, rgba(255, 255, 255, 0.58) 100%);
  --glass-edge: rgba(16, 32, 68, 0.1);
  --glass-hi: rgba(255, 255, 255, 0.95);
  --line: rgba(16, 32, 68, 0.1);

  --font-display: "Geist", "Inter", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font: "Inter", system-ui, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-lead: clamp(1.375rem, 1.15rem + 0.8vw, 2rem);
  --step-head: clamp(2.5rem, 1.4rem + 3.6vw, 4.75rem);
  --step-hero: clamp(2.75rem, 0.9rem + 5.2vw, 6.25rem);
  --step-display: 15vw;

  --margin: clamp(1.25rem, 2.8vw, 2.5rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(7.5rem, 12vw, 12rem);
  --r: 16px;
  --r-btn: 10px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.55; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, figure, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol { padding: 0; list-style: none; }
h1, h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.04em; text-wrap: balance; }
h3 { font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:target { scroll-margin-top: 6rem; }
.wrap { padding-inline: var(--margin); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.accent { color: var(--accent); }
.dot { color: var(--accent); }

/* the starfield sits behind the whole page */
.stars { position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100vh; pointer-events: none; }

/* glass: frosted white with a faint navy edge */
.glass { background: var(--glass-fill); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), 0 24px 60px rgba(16, 32, 68, 0.08); }

/* mono labels, Frontrunner style */
.eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); margin-bottom: 1.25rem; }
.eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(30, 58, 138, 0.6); }
.eyebrow-dim i { background: var(--muted); box-shadow: none; }
.sec-title { font-size: var(--step-head); line-height: 1.02; max-width: 20ch; }

.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; text-decoration-thickness: 0.07em; transition: text-decoration-color 180ms ease, color 180ms ease; }
.link-plain { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }

.button { display: inline-flex; align-items: center; min-height: 3.25rem; padding: 0 1.6rem; border-radius: var(--r-btn); background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 500; transition: transform 160ms var(--ease-out), box-shadow 240ms ease; }
.button:hover { box-shadow: 0 0 0 1px rgba(30, 58, 138, 0.5), 0 0 36px rgba(30, 58, 138, 0.28); transform: translateY(-2px); }
.button:active { transform: scale(0.97); }
.button-ghost { display: inline-flex; align-items: center; min-height: 3.25rem; padding: 0 1.5rem; border-radius: var(--r-btn); color: var(--ink); text-decoration: none; font-weight: 500; transition: transform 160ms var(--ease-out), border-color 200ms ease; }
.button-ghost::after { content: "→"; margin-left: 0.55rem; transition: transform 240ms var(--ease-out); }
.button-ghost:hover { border-color: rgba(16, 32, 68, 0.3); }
.button-ghost:hover::after { transform: translateX(4px); }
.button-ghost:active { transform: scale(0.97); }

/* ---------- cursor ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
  .has-cursor input, .has-cursor textarea { cursor: text; }
  .has-cursor .cursor { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 1000; }
  .cursor-dot, .cursor-ring { position: absolute; top: 0; left: 0; border-radius: 50%; will-change: transform; }
  .cursor-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--ink); }
  .cursor-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1.5px solid rgba(16, 32, 68, 0.55); transition: width 260ms var(--ease-out), height 260ms var(--ease-out), margin 260ms var(--ease-out), background-color 260ms ease, border-color 260ms ease; }
  .cursor.is-hover .cursor-ring { width: 72px; height: 72px; margin: -36px 0 0 -36px; background: rgba(30, 58, 138, 0.12); border-color: var(--accent); }
  .cursor.is-down .cursor-ring { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
}

/* ---------- bar ---------- */
.bar { position: fixed; inset: 0.9rem 0 auto 0; z-index: 50; padding-inline: var(--margin); }
.bar-inner { display: flex; align-items: center; justify-content: space-between; height: 3.6rem; padding: 0 0.5rem 0 1.25rem; border-radius: 14px; }
.wordmark { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; letter-spacing: -0.035em; text-decoration: none; }
.bar-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); font-size: var(--step-small); color: var(--soft); }
.bar-cta { text-decoration: none; padding: 0.6rem 1.1rem; border-radius: var(--r-btn); background: var(--accent); color: var(--accent-ink); font-weight: 500; transition: box-shadow 220ms ease; }
.bar-cta:hover { box-shadow: 0 0 26px rgba(30, 58, 138, 0.35); }
@media (max-width: 63.99em) { .bar-links .link { display: none; } }

/* ---------- 1. hero ---------- */
.launch { position: relative; min-height: 100svh; overflow: hidden; }
.haze { position: absolute; inset: -20%; pointer-events: none; }
.neb { position: absolute; border-radius: 50%; filter: blur(90px); }
.neb-1 { width: 55vw; height: 55vw; left: 2%; top: 30%; background: radial-gradient(circle, rgba(16, 32, 68, 0.06), transparent 65%); animation: drift-a 26s ease-in-out infinite alternate; }
.neb-2 { width: 45vw; height: 45vw; right: 0; top: 8%; background: radial-gradient(circle, rgba(30, 58, 138, 0.05), transparent 65%); animation: drift-b 32s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(8vw, -6vh) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-10vw, 8vh) scale(0.9); } }
.glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 40%), rgba(16, 32, 68, 0.07), transparent 60%); }

/* floating molecules and record chips */
.floaters { position: absolute; inset: 0; pointer-events: none; will-change: transform, opacity; }
.float { position: absolute; left: var(--x); top: var(--y); transform: translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform 1000ms var(--ease-out); }
.float > * { animation: bob 10s ease-in-out infinite alternate; }
.float:nth-child(2n) > * { animation-duration: 13s; animation-delay: -5s; }
.mol { width: var(--s); height: var(--s); opacity: 0.45; }
.mol svg { width: 100%; height: 100%; overflow: visible; animation: spin var(--spin, 90s) linear infinite; }
.mol line { stroke: rgba(16, 32, 68, 0.55); stroke-width: 1.1; }
.mol circle { fill: var(--bg); stroke: rgba(16, 32, 68, 0.7); stroke-width: 1.1; }
.mol circle.hi { fill: var(--accent); stroke: none; }
.mol text { fill: rgba(16, 32, 68, 0.75); font-family: var(--font-mono); font-size: 13px; }
.chip { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.85rem; border-radius: 8px; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--soft); white-space: nowrap; }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(30, 58, 138, 0.7); }
.chip.is-ref i { background: var(--muted); box-shadow: none; }
@keyframes bob { to { translate: 0 -20px; } }
@keyframes spin { to { rotate: 360deg; } }

.hero { position: relative; z-index: 1; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 7rem var(--margin) 6rem; will-change: transform, opacity; }
.hero-eyebrow { padding: 0.5rem 0.9rem; border: 1px solid var(--glass-edge); border-radius: 8px; background: rgba(255, 255, 255, 0.7); margin-bottom: 2rem; }
.hero h1 { font-size: var(--step-hero); line-height: 0.98; letter-spacing: -0.045em; max-width: 13ch; }
.h-line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.h-line > span { display: block; }
.hero-sub { margin-top: 1.75rem; max-width: 60ch; font-size: var(--step-body); color: var(--soft); }
.hero-sub-2 { margin-top: 0.75rem; }
.hero-sub strong { color: var(--ink); font-weight: 600; }
.hero-actions { margin-top: 2.25rem; display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.scroll-cue { position: absolute; z-index: 1; left: 50%; bottom: 1.75rem; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.scroll-cue span { width: 1.4rem; height: 2.2rem; border-radius: 999px; border: 1.5px solid rgba(16, 32, 68, 0.35); position: relative; }
.scroll-cue span::after { content: ""; position: absolute; left: 50%; top: 0.4rem; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--accent); animation: wheel 1.8s var(--ease-in-out) infinite; }
@keyframes wheel { 60% { transform: translateY(0.7rem); opacity: 0; } 100% { opacity: 0; } }

/* ---------- 2. who it's for ---------- */
.who { padding-block: var(--section) calc(var(--section) * 0.6); }
.who .sec-title { max-width: none; }
.who-sub { margin-top: 1.25rem; font-size: var(--step-lead); line-height: 1.35; letter-spacing: -0.02em; color: var(--soft); max-width: 40ch; }
.roles { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; perspective: 1000px; }
.role { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: 1.75rem; border-radius: var(--r); min-height: 13rem; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 500ms var(--ease-out), border-color 300ms ease; }
.role:hover { border-color: rgba(30, 58, 138, 0.3); }
.role:hover .card-glare { opacity: 1; }
.concern { position: relative; font-family: var(--font-display); font-weight: 500; font-size: var(--step-lead); line-height: 1.15; letter-spacing: -0.03em; color: var(--ink); }
.answer { position: relative; display: flex; gap: 0.6rem; align-items: baseline; color: var(--accent); font-weight: 500; }
.answer::before { content: "→"; }
.sectors { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sectors li { padding: 0.55rem 0.9rem; border: 1px solid var(--line); border-radius: 8px; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); background: rgba(255, 255, 255, 0.7); }

/* ---------- 3 + 4. today vs our way ---------- */
.compare { padding-block: calc(var(--section) * 0.4) calc(var(--section) * 0.5); }
.ways { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.way { padding: clamp(1.75rem, 3vw, 2.75rem); border-radius: var(--r); }
.way-old { background: rgba(16, 32, 68, 0.045); border: 1px solid var(--line); }
.way-new { background: linear-gradient(160deg, #1e3a8a 0%, #142b6b 100%); color: #fff; box-shadow: 0 30px 70px rgba(30, 58, 138, 0.28); }
.way-label { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1.05; letter-spacing: -0.04em; }
.way-old .way-label { color: var(--muted); }
.marks { margin-top: 2rem; display: grid; gap: 1.1rem; }
.marks li { display: grid; grid-template-columns: 1.7rem 1fr; gap: 0.7rem; align-items: start; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); font-weight: 500; line-height: 1.4; letter-spacing: -0.015em; }
.way-old .marks li { color: var(--soft); }
.way-new .marks li { color: #fff; }
.mark { width: 1.45rem; height: 1.45rem; margin-top: 0.1em; }
.mark path { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mark.x rect { fill: var(--bad-dim); }
.mark.x path { stroke: var(--bad); }
.mark.ok rect { fill: #fff; }
.mark.ok path { stroke: var(--accent); }

/* ---------- product fragments (data-ui keeps the app's own conventions) ---------- */
[data-ui] { --ui-line: rgba(16, 32, 68, 0.11); --ui-dim: #6a7286; font-size: 0.9375rem; line-height: 1.45; }
.pill { display: inline-flex; align-items: center; height: 1.6rem; padding: 0 0.65rem; border-radius: 6px; border: 1px solid var(--ui-line); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; color: var(--ui-dim); white-space: nowrap; transition: color 240ms ease, border-color 240ms ease, background-color 240ms ease; } /* taste-skill-ignore: inside data-ui */
.pill-ok, li.is-pass .pill, #run-status.is-pass { color: var(--accent); border-color: rgba(30, 58, 138, 0.35); background: rgba(30, 58, 138, 0.08); }
.pill-bad, li.is-fail .pill, #run-status.is-fail { color: var(--bad); border-color: rgba(194, 65, 12, 0.35); background: var(--bad-dim); }
.ui-dim { color: var(--ui-dim); }
.ui-btn { height: 2.25rem; padding: 0 0.95rem; border-radius: 8px; border: 1px solid rgba(16, 32, 68, 0.176); background: rgba(16, 32, 68, 0.055); font-size: 0.875rem; font-weight: 500; transition: background-color 180ms ease, transform 140ms var(--ease-out); } /* taste-skill-ignore: inside data-ui */
.ui-btn:hover { background: rgba(16, 32, 68, 0.132); }
.ui-btn:active { transform: scale(0.96); }
.ui-btn-hi { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ui-btn-hi:hover { background: #24448f; }

/* ---------- how it works ---------- */
.how { padding-block: calc(var(--section) * 0.6) calc(var(--section) * 0.5); }
.how-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.how-steps { grid-column: 1 / span 5; }
.how-title { font-size: var(--step-head); line-height: 1.02; }
.how-step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
.how-step:first-of-type { min-height: 50vh; }
.how-step h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-lead); line-height: 1.1; letter-spacing: -0.03em; color: var(--muted); transition: color 300ms ease; max-width: 18ch; }
.how-step p:last-child { margin-top: 1rem; max-width: 44ch; color: var(--muted); transition: color 300ms ease; }
.how-step.is-active h3, .how-step.is-active p:last-child { color: var(--ink); }

.how-stage-wrap { grid-column: 7 / span 6; position: sticky; top: 14vh; align-self: start; margin-top: 12vh; }
.how-stage { display: grid; border-radius: var(--r); padding: 2rem; overflow: hidden; }
.st { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity 420ms ease, transform 520ms var(--ease-out); pointer-events: none; }
.how-stage[data-show="0"] .st-0, .how-stage[data-show="1"] .st-1, .how-stage[data-show="2"] .st-2 { opacity: 1; transform: none; pointer-events: auto; }
.st > p { margin-top: 0.3rem; }
.st > .ui-dim { margin-top: 1rem; font-size: 0.8125rem; }
.ui-title { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 500; font-size: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ui-line); margin-bottom: 0.5rem; } /* taste-skill-ignore: inside data-ui */
.ui-fields > div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(16, 32, 68, 0.066); } /* taste-skill-ignore: inside data-ui */
.ui-fields dt { color: var(--ui-dim); }
.ui-quote { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: 10px; background: rgba(255, 255, 255, 0.7); border-left: 2px solid var(--accent); }
.ui-quote p:last-child { color: var(--ink); font-size: 1.0625rem; line-height: 1.4; }
.ui-actual { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: 10px; border: 1px solid rgba(194, 65, 12, 0.3); background: var(--bad-dim); } /* taste-skill-ignore: inside data-ui */
.ui-actual b { color: var(--bad); font-weight: 500; }
.ui-shot { margin-top: 1rem; width: 15rem; border-radius: 6px; overflow: hidden; background: #e9ecf1; color: #1f2a3a; font-size: 0.75rem; }
.shot-bar { height: 0.9rem; background: #24426e; }
.shot-row { display: grid; grid-template-columns: 1.6fr 0.8fr 1fr; padding: 0.3rem 0.6rem; border-bottom: 1px solid #d5dae2; } /* taste-skill-ignore: inside data-ui */
.shot-row:nth-child(2) { font-weight: 600; }
.shot-row .bad { color: #c2410c; font-weight: 600; }
.ui-verdict { margin: 1rem 0; padding: 1rem; border-radius: 10px; border: 1px solid rgba(194, 65, 12, 0.3); background: var(--bad-dim); } /* taste-skill-ignore: inside data-ui */
.verdict { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; font-size: 1.5rem; color: var(--bad); margin: 0.2rem 0; }
.how-caption { margin-top: 1rem; color: var(--muted); font-size: var(--step-small); }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; padding-block: 3rem; }
.marquee-track { display: flex; gap: 3.5rem; width: max-content; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.04em; font-size: var(--step-head); line-height: 1.1; white-space: nowrap; will-change: transform; }
.marquee-track span { color: transparent; -webkit-text-stroke: 1px rgba(16, 32, 68, 0.35); }
.marquee-track span:nth-child(3n) { color: var(--accent); -webkit-text-stroke: 0; }

/* ---------- 5. numbers ---------- */
.numbers { padding-block: calc(var(--section) * 0.5) var(--section); }
.stat-group { margin-top: 3rem; }
.group-label { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); margin-bottom: 1rem; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.stat { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem; border-radius: var(--r); }
.stat-num { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.75rem, 1.8rem + 3vw, 4.5rem); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.stat-ours .stat-num { color: var(--accent); }
.stat figcaption { color: var(--soft); max-width: 30ch; }
.source { margin-top: auto; padding-top: 0.5rem; font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--muted); text-underline-offset: 0.2em; }
.source:hover { color: var(--ink); }
.numbers-note { margin-top: 1.25rem; color: var(--muted); font-size: var(--step-small); max-width: 70ch; }

/* ---------- 6. demo fly-through ---------- */
.demo { position: relative; height: 240vh; }
.demo-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.demo-intro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6rem var(--margin); will-change: transform, opacity; }
.demo-big { font-family: var(--font-display); font-weight: 500; font-size: var(--step-hero); line-height: 0.98; letter-spacing: -0.045em; max-width: 12ch; text-wrap: balance; }
.fly { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; padding: 6rem var(--margin) 2.5rem; perspective: 1400px; opacity: 0; visibility: hidden; pointer-events: none; }
.fly.is-live { pointer-events: auto; }
.fly-head { text-align: center; max-width: 46rem; }
.fly-title { font-size: var(--step-head); line-height: 1.02; }
.fly-sub { margin-top: 0.8rem; color: var(--soft); }

.run { width: min(52rem, 100%); border-radius: var(--r); padding: 1.4rem 1.6rem; transform-origin: 50% 100%; background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)); }
.run-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding-bottom: 0.9rem; border-bottom: 1px solid var(--ui-line); } /* taste-skill-ignore: inside data-ui */
.run-id { font-family: var(--font-mono); font-weight: 500; font-size: 0.875rem; }
.run-env { color: var(--ui-dim); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.run-steps li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) 5.5rem; column-gap: 1.25rem; align-items: center; padding: 0.7rem 0; border-bottom: 1px solid rgba(16, 32, 68, 0.055); opacity: 0.42; transition: opacity 300ms ease; font-size: 0.875rem; } /* taste-skill-ignore: inside data-ui */
.run-steps li.is-running, .run-steps li.is-pass, .run-steps li.is-fail { opacity: 1; }
.run-steps span:not(.pill) { display: block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-dim); }
.run-steps .act { color: var(--ui-dim); font-variant-numeric: tabular-nums; }
.run-steps li.is-pass .act, .run-steps li.is-fail .act { color: var(--ink); }
.run-steps li.is-running .pill { color: var(--ink); border-color: var(--accent); }
.run-steps li.is-running .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 0.45rem; animation: blink 0.8s ease-in-out infinite; }
.run-foot { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-top: 0.9rem; }
.repeat { flex: 1; }
.repeat p { color: var(--ui-dim); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.meter { margin-top: 0.45rem; height: 4px; border-radius: 4px; background: rgba(16, 32, 68, 0.088); overflow: hidden; }
.meter span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--accent); }
.run-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
@keyframes blink { 50% { opacity: 0.25; } }

/* ---------- capabilities ---------- */
.caps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; padding-block: calc(var(--section) * 0.6) var(--section); }
.caps-main { grid-column: 1 / span 7; grid-row: 2; }
.caps-title { grid-column: 1 / -1; }
.caps-title { font-size: var(--step-head); line-height: 1.02; margin-bottom: 2.5rem; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; perspective: 1000px; }
.card { position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-height: 11.5rem; padding: 1.5rem; border-radius: var(--r); overflow: hidden; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform 500ms var(--ease-out), border-color 300ms ease, background-color 300ms ease; }
.card-wide { grid-column: 1 / -1; min-height: 10rem; }
.card-title { position: relative; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; font-size: var(--step-lead); line-height: 1.08; }
.card-title::before { content: ""; display: block; width: 8px; height: 8px; margin-bottom: 1.4rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(30, 58, 138, 0.6); transition: transform 300ms var(--ease-out); }
.card-more { position: relative; display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0; color: var(--soft); font-size: 0.9375rem; transition: grid-template-rows 500ms var(--ease-out), opacity 350ms ease, margin-top 500ms var(--ease-out); overflow: hidden; }
.card-glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 0%), rgba(16, 32, 68, 0.11), transparent 60%); opacity: 0; transition: opacity 300ms ease; }
.card:hover, .card:focus-visible, .card[aria-expanded="true"] { border-color: rgba(16, 32, 68, 0.242); }
.card:hover .card-glare, .card[aria-expanded="true"] .card-glare { opacity: 1; }
.card:hover .card-more, .card:focus-visible .card-more, .card[aria-expanded="true"] .card-more { grid-template-rows: 1fr; opacity: 1; margin-top: 0.75rem; }
.card:hover .card-title::before, .card[aria-expanded="true"] .card-title::before { transform: scale(1.5); }
.card:active { transform: scale(0.98); }
.caps-film { grid-column: 8 / span 5; grid-row: 2; align-self: stretch; border-radius: var(--r); overflow: hidden; }
.caps-film video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); background: var(--surface); }
.caps-film figcaption, .world-pic figcaption { position: absolute; left: 0.75rem; bottom: 0.75rem; z-index: 2; padding: 0.4rem 0.75rem; border-radius: 6px; background: rgba(255, 255, 255, 0.75); font-size: var(--step-small); color: var(--soft); }

/* ---------- world ---------- */
.world { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.world-pic { grid-column: 1 / span 7; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--surface); }
.world-pic img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; filter: grayscale(1) contrast(1.08); opacity: 0; transform: translateY(var(--par, 0px)) scale(1.06); transition: opacity 1600ms ease, transform 7000ms var(--ease-soft); }
.world-pic img.is-on { opacity: 1; transform: translateY(var(--par, 0px)) scale(1); }
.tint { position: relative; }
.tint::after { content: ""; position: absolute; inset: 0; background: rgba(30, 58, 138, 0.12); mix-blend-mode: multiply; pointer-events: none; }
.world-pic figcaption { max-width: 85%; }
.world-text { grid-column: 8 / span 5; }
.world-text h2 { font-size: var(--step-head); line-height: 1.02; }
.world-text p:not(.eyebrow) { margin-top: 1.5rem; color: var(--soft); }

/* ---------- faq ---------- */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-block: var(--section); }
.faq-list { grid-column: 1 / span 5; }
.faq-title { font-size: var(--step-head); line-height: 1.02; margin-bottom: 2.5rem; }
.faq ul { display: grid; gap: 0.35rem; }
.q { display: flex; gap: 0.85rem; align-items: baseline; width: 100%; padding: 0.55rem 0; font-size: var(--step-body); color: var(--muted); transition: color 180ms ease; }
.q::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); transform: translateY(-0.12em); transition: background-color 180ms ease, transform 240ms var(--ease-out), box-shadow 240ms ease; }
.q:hover, .q[aria-expanded="true"] { color: var(--ink); }
.q[aria-expanded="true"]::before { background: var(--accent); box-shadow: 0 0 10px rgba(30, 58, 138, 0.6); transform: translateY(-0.12em) scale(1.4); }
.a { display: none; }
.faq-pane { grid-column: 7 / span 6; position: sticky; top: 7.5rem; align-self: start; margin-top: calc(var(--step-head) + 4rem); padding: 2.25rem; border-radius: var(--r); }
.faq-pane p { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.025em; font-size: var(--step-lead); line-height: 1.25; max-width: 32ch; transition: opacity 150ms ease; }
.faq-pane p.is-swapping { opacity: 0; }

/* ---------- cta ---------- */
.cta { padding-bottom: var(--section); }
.cta-form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.cta-main { grid-column: 1 / span 7; }
.cta-line { font-size: var(--step-head); line-height: 1.02; }
.cta-lead { margin-top: 1rem; color: var(--soft); max-width: 52ch; }
.cal { margin-top: 2rem; border-radius: var(--r); overflow: hidden; padding: 0.5rem; }
.cal-embed { height: 700px; }
.cal-embed:empty { display: none; }
.cal-fallback { display: inline-flex; align-items: center; min-height: 3.25rem; margin: 1rem; padding: 0 1.5rem; border-radius: var(--r-btn); background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 500; }
.cal.is-live .cal-fallback { display: none; }
.cta-mail { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--soft); font-size: 0.9375rem; }
.cta-side { grid-column: 9 / span 4; border-radius: var(--r); padding: 2rem; margin-top: calc(var(--step-head) + 5.5rem); }
.cta-side h3 { font-size: var(--step-body); color: var(--muted); font-weight: 400; margin-bottom: 1rem; }
.cta-side ol { display: grid; gap: 0.75rem; }
.cta-side li { padding-left: 1.2rem; position: relative; }
.cta-side li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---------- footer tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; padding: 0 10px 10px; }
.tile { border-radius: var(--r); padding: 1.5rem; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; text-decoration: none; }
.t-statement { grid-column: 1 / span 4; }
.t-statement p:first-child { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; font-size: var(--step-lead); line-height: 1.12; max-width: 22ch; }
.legal { font-size: var(--step-small); color: var(--muted); }
.t-nav { grid-column: 5 / span 3; justify-content: flex-start; gap: 0.45rem; }
.t-time { grid-column: 8 / span 2; }
.t-time p:first-child, .t-mail p { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.clock { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; font-size: var(--step-lead); font-variant-numeric: tabular-nums; }
.t-mail { grid-column: 10 / span 3; }
.t-mail a { font-size: var(--step-body); overflow-wrap: anywhere; }
.t-word { grid-column: 1 / span 8; min-height: 320px; justify-content: center; align-items: center; overflow: hidden; }
.t-word p { font-family: var(--font-display); font-weight: 500; font-size: var(--step-display); letter-spacing: -0.06em; line-height: 1; padding-bottom: 0.06em; }
.t-go { grid-column: 9 / span 4; min-height: 320px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; font-size: var(--step-lead); transition: background-color 240ms ease; }
.t-go:hover { background: #24448f; }
.t-go svg { align-self: flex-end; transition: transform 320ms var(--ease-out); }
.t-go:hover svg { transform: translate(6px, -6px); }

/* ---------- release dialog ---------- */
.release { width: min(64rem, calc(100vw - 2rem)); max-height: min(44rem, calc(100svh - 2rem)); padding: 1.75rem; border-radius: 18px; color: var(--ink); overflow: auto; background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.95)); }
.release::backdrop { background: rgba(15, 27, 51, 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.release[open] { animation: pop 420ms var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(0.97); } }
.release-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.release-head h2 { font-size: var(--step-lead); line-height: 1; }
.release-head p { margin-top: 0.4rem; color: var(--soft); font-size: 0.9375rem; }
.release-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: start; }
.changes { display: grid; gap: 0.2rem; }
.change { display: flex; gap: 0.75rem; width: 100%; padding: 0.6rem 0.75rem; border-radius: 10px; font-size: 0.9375rem; color: var(--muted); transition: background-color 180ms ease, color 180ms ease; }
.change b { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ui-dim, #6a7286); min-width: 4.2rem; padding-top: 0.1em; }
.change:hover { background: rgba(16, 32, 68, 0.055); color: var(--ink); }
.change[aria-pressed="true"] { background: rgba(16, 32, 68, 0.099); color: var(--ink); }
.change.is-affected b { color: var(--bad); }
.impact { border-radius: 14px; padding: 1.4rem; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--line); min-height: 22rem; }
.impact-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.impact-id { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.impact h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; font-size: 1.5rem; line-height: 1.15; margin-top: 0.5rem; }
.impact-vendor { margin-top: 0.75rem; color: var(--ui-dim); font-size: 0.875rem; }
.impact-refs { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.impact-refs span { font-family: var(--font-mono); font-size: 0.75rem; padding: 0.2rem 0.55rem; border-radius: 6px; background: rgba(16, 32, 68, 0.077); color: var(--ink); }
.impact-reason { margin-top: 1rem; color: var(--ink); }
.impact-review { margin-top: 1rem; padding: 0.8rem 0.95rem; border-radius: 10px; background: rgba(30, 58, 138, 0.06); border: 1px solid rgba(30, 58, 138, 0.16); color: var(--soft); font-size: 0.875rem; }
.impact-review b { color: var(--accent); font-weight: 500; }
.impact-body { transition: opacity 220ms ease, transform 320ms var(--ease-out); }
.impact-body.is-swapping { opacity: 0; transform: translateY(8px); }
.release-note { margin-top: 1.25rem; color: var(--muted); font-size: var(--step-small); }

/* ---------- tablet ---------- */
@media (min-width: 48em) and (max-width: 63.99em) {
  .float.chip-wrap { display: none; }
  .roles { grid-template-columns: 1fr 1fr; }
  .roles .role:last-child { grid-column: 1 / -1; min-height: 12rem; }
  .ways { grid-template-columns: 1fr; }
  .how-steps { grid-column: 1 / span 6; }
  .how-stage-wrap { grid-column: 7 / span 6; }
  .caps-main { grid-column: 1 / span 7; }
  .caps-film { grid-column: 8 / span 5; }
  .world-pic { grid-column: 1 / -1; }
  .world-text { grid-column: 1 / span 9; margin-bottom: 2.5rem; order: -1; }
  .faq-list { grid-column: 1 / span 6; }
  .run-steps li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 5.5rem; }
  .run-steps .exp { display: none; }
  .tiles { grid-template-columns: 1fr 1fr; grid-auto-flow: dense; }
  .t-word, .t-go { grid-column: 1 / -1; min-height: 220px; }
  .t-word { order: -2; } .t-go { order: -1; }
  .t-statement, .t-time { grid-column: 1; } .t-nav, .t-mail { grid-column: 2; }
  .t-word p { font-size: 20vw; }
}

/* ---------- phone ---------- */
@media (max-width: 47.99em) {
  .bar { inset: 0.6rem 0 auto 0; }
  .hero { padding-top: 6rem; }
  .hero-eyebrow { font-size: 0.8125rem; letter-spacing: 0.06em; max-width: 100%; white-space: normal; text-align: left; }
  .hero h1 { font-size: 11.5vw; }
  .mol { width: calc(var(--s) * 0.6); height: calc(var(--s) * 0.6); }
  .float.chip-wrap { display: none; }
  .roles { grid-template-columns: 1fr; }
  .role { min-height: 0; }
  .ways { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .demo { height: 220vh; }
  .demo-big { font-size: 12vw; }
  .fly { gap: 1rem; padding-top: 5rem; }
  .fly-sub { font-size: 0.9375rem; }
  .run { padding: 1rem; }
  .run-steps li { grid-template-columns: 1fr auto; row-gap: 0.25rem; padding: 0.55rem 0; }
  .run-steps .inp, .run-steps .act { grid-column: 1; }
  .run-steps .exp { display: none; }
  .run-steps .pill { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
  .run-steps li:nth-child(n+4) { display: none; }
  .run-foot { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .run-btns { justify-content: flex-start; }
  .how-grid { display: block; }
  .how-stage-wrap { position: sticky; top: 5rem; z-index: 2; margin-top: 2rem; }
  .how-stage { padding: 1.25rem; }
  .ui-shot { display: none; }
  .how-step, .how-step:first-of-type { min-height: 60svh; }
  .how-stage-wrap .how-caption { display: none; }
  .caps, .world, .faq { display: flex; flex-direction: column; }
  .cards { grid-template-columns: 1fr; }
  .card { min-height: 8rem; }
  .card-more { grid-template-rows: 1fr; opacity: 1; margin-top: 0.6rem; }
  .caps-film { margin-top: 2rem; }
  .caps-film video { height: auto; aspect-ratio: 4 / 3; }
  .world-text { order: -1; margin-bottom: 2.5rem; }
  .faq-pane { display: none; }
  .a { padding: 0.25rem 0 0.75rem 1.4rem; font-size: var(--step-body); color: var(--soft); }
  .q[aria-expanded="true"] + .a { display: block; }
  .cta-form { display: block; }
  .cal { padding: 0.25rem; }
  .cal-embed { height: 1000px; }
  .cta-side { margin-top: 3rem; }
  .cta-form .cta-side { margin-top: 3rem; }
  .release { padding: 1.25rem; }
  .release-body { grid-template-columns: 1fr; }
  .impact { min-height: 0; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 6px 6px; grid-auto-flow: dense; }
  .tile { min-height: 160px; padding: 1.25rem; }
  .t-word { grid-column: 1 / -1; order: -2; min-height: 160px; }
  .t-word p { font-size: 24vw; }
  .t-go { grid-column: 1 / -1; order: -1; min-height: 160px; }
  .t-nav { grid-column: 1; }
  .t-mail { grid-column: 2; }
  .t-time { grid-column: 1; }
  .t-statement { grid-column: 2; }
}

/* ---------- motion (content stays visible without script) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .h-line > span { transform: translateY(105%); animation: line-up 1100ms var(--ease-out) forwards; }
  .js .h-line + .h-line > span { animation-delay: 120ms; }
  .js .hero-eyebrow, .js .hero-sub, .js .hero-actions, .js .scroll-cue { opacity: 0; animation: fade-up 900ms var(--ease-out) forwards; }
  .js .hero-eyebrow { animation-delay: 150ms; }
  .js .hero-sub { animation-delay: 450ms; }
  .js .hero-actions { animation-delay: 580ms; }
  .js .scroll-cue { animation-delay: 900ms; }
  .js .float { opacity: 0; animation: float-in 1600ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 120ms + 300ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .w { display: inline-block; opacity: 0; transform: translateY(0.45em); filter: blur(6px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out), filter 700ms ease; transition-delay: calc(var(--wi, 0) * 70ms); }
  .js .is-split-in .w { opacity: 1; transform: none; filter: none; }
  .js .card, .js .role { opacity: 0; translate: 0 28px; transition: transform 500ms var(--ease-out), border-color 300ms ease, opacity 700ms var(--ease-out), translate 900ms var(--ease-out); transition-delay: 0ms, 0ms, calc(var(--ci, 0) * 90ms), calc(var(--ci, 0) * 90ms); }
  .js .cards.is-in .card, .js .roles.is-in .role { opacity: 1; translate: 0 0; }
}
@keyframes line-up { to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes float-in { from { opacity: 0; scale: 0.7; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .demo { height: auto; }
  .demo-sticky { position: relative; height: auto; }
  .demo-intro { position: relative; min-height: 60svh; }
  .fly { position: relative; opacity: 1; visibility: visible; pointer-events: auto; padding-top: 2rem; }
}