/* HolySheet landing page.
   Rationale for each token and pattern lives in LANDING_DESIGN.md. */
:root {
  color-scheme: dark;
  /* Surfaces: solid values so every text/background pair has a known contrast ratio. */
  --bg: #0a0b0a;
  --bg-raised: #111311;
  --bg-hover: #171a17;
  --line: #1f231f;
  --line-strong: #2c312c;
  /* Text: 17:1, 8.5:1 and 5.1:1 against --bg (WCAG AA body text needs 4.5:1). */
  --text: #ecefe8;
  --text-2: #a6aca2;
  --text-3: #7d837a;
  /* One accent, used for the primary action and the "Yes" data colour only. */
  --accent: #d4f56a;
  --accent-hover: #e2fb94;
  --on-accent: #11150a;
  /* Data colours. Keep in sync with landing/field.js, landing/review.js and marketing.js. */
  --yes: #d4f56a;
  --no: #7892a6;
  --review: #f2b45c;
  --danger: #ff8a7a;

  --sans: "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Motion: press feedback inside the 100 ms "instant" window, state changes 150–250 ms, figures under 700 ms. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 100ms;
  --t-hover: 150ms;
  --t-state: 250ms;
  --t-figure: 700ms;

  --radius: 8px;
  --radius-lg: 12px;
  --wrap: 1200px;
  --gutter: 24px;
  --nav-h: 64px;
}
@media (max-width: 720px) { :root { --gutter: 16px; } }

/* ——— Base ——— */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: progress; opacity: 0.5; }
img, svg, canvas { display: block; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }
sup { font: 400 0.65em/0 var(--mono); vertical-align: 0.8em; margin-left: 2px; }
sup a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.honeypot { position: absolute; left: -9999px; }
.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-20 { width: 20px; height: 20px; }
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.skip-link { position: fixed; top: -80px; left: var(--gutter); z-index: 100; padding: 8px 12px; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-weight: 500; }
.skip-link:focus { top: 12px; }
.fine { font-size: 14px; line-height: 1.5; color: var(--text-3); }
.fine a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }

/* ——— Buttons and links ——— */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: var(--radius); border: 1px solid transparent; font: 500 15px/1 var(--sans); white-space: nowrap; transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn .icon { transition: transform var(--t-state) var(--ease-out); }
.btn:hover .icon { transform: translateX(2px); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn-lg { height: 50px; padding: 0 22px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-primary { position: relative; isolation: isolate; background: linear-gradient(180deg, #def97f 0%, var(--accent) 100%); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4); }
/* Hover fades a lighter layer over the gradient. Swapping the gradient itself can't be
   transitioned and made the button flash dark for a frame. */
.btn-primary::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, #ebfdb0 0%, var(--accent-hover) 100%); opacity: 0; transition: opacity var(--t-hover) var(--ease-out); }
.btn-primary:hover::before { opacity: 1; }
.btn-secondary { background: var(--bg-raised); border-color: var(--line-strong); color: var(--text); }
.btn-secondary:hover { background: var(--bg-hover); border-color: #3a403a; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; height: 44px; font-size: 15px; font-weight: 500; color: var(--text-2); transition: color var(--t-hover) var(--ease-out); }
.link-arrow:hover { color: var(--text); }
.link-arrow .icon { transition: transform var(--t-state) var(--ease-out); }
.link-arrow:hover .icon { transform: translateY(2px); }

/* ——— Nav ———
   Floating glass bar (the "resizable navbar" pattern from Aceternity UI, rebuilt in plain CSS since this page has no build step).
   At the top it spans the content width; once scrolled it narrows into a frosted pill. */
.nav { position: fixed; top: 12px; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; pointer-events: none; contain: layout style; }
.nav-inner { pointer-events: auto; display: flex; align-items: center; gap: 32px; width: min(var(--wrap) + 32px, 100% - 16px); height: 56px; padding: 0 10px 0 16px; border: 1px solid transparent; border-radius: 16px;
  transition: width 350ms var(--ease-out), height 300ms var(--ease-out), padding 300ms var(--ease-out), background-color var(--t-state) var(--ease-out), border-color var(--t-state) var(--ease-out), box-shadow var(--t-state) var(--ease-out), border-radius 350ms var(--ease-out); }
.nav.is-scrolled .nav-inner { width: min(860px, 100% - 16px); height: 52px; padding: 0 6px 0 14px; border-radius: 999px;
  background: rgba(24, 27, 24, 0.55); border-color: rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 30px -10px rgba(0, 0, 0, 0.6); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav.is-scrolled .nav-inner { background: rgba(24, 27, 24, 0.96); } }
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-mark { width: 24px; height: 24px; color: var(--accent); }
/* Wordmark: lowercase; "sheet" gets a soft top-lit lime gradient and a 1px shadow for depth. */
.wordmark { font-size: 19px; font-weight: 600; letter-spacing: -0.035em; color: var(--text); }
.wordmark span { background: linear-gradient(180deg, #f4ffd1 0%, #d4f56a 52%, #a3c93c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55)); }
.nav-links { display: flex; gap: 4px; margin: 0 auto; white-space: nowrap; }
.nav-links a { padding: 6px 12px; border-radius: 999px; font-size: 14px; color: var(--text-2); transition: color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out); }
.nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.nav .btn { border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.nav-signin { white-space: nowrap; padding: 6px 12px; border-radius: 999px; font-size: 14px; color: var(--text-2); transition: color var(--t-hover) var(--ease-out); }
.nav-signin:hover { color: var(--text); }
.nav.is-scrolled .btn { height: 38px; }
/* Phones have no room for the full link row; Pricing is the one question visitors most want answered before trying. */
.nav-pricing { display: none; }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-inner { gap: 4px; }
  .nav-pricing { display: inline-flex; align-items: center; height: 36px; margin-left: auto; padding: 0 10px; font-size: 14px; color: var(--text-2); }
  .nav.is-scrolled .nav-inner { width: calc(100% - 16px); }
}
@media (max-width: 860px) { .nav-signin { display: none; } }
@media (max-width: 373px) { .nav-pricing { display: none; } .nav .btn { margin-left: auto; } }

/* ——— Hero ——— */
.hero { position: relative; min-height: 100svh; display: flex; overflow: hidden; border-bottom: 1px solid var(--line); }
/* Quiet behind the copy, full strength on the right; fades out before the proof row.
   The fade is drawn into the canvas (FADES in landing/field.js) rather than a CSS mask,
   which made the browser recomposite a masked full-screen layer on every frame. */
.hero-field { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.hero-inner { position: relative; display: flex; flex-direction: column; padding: calc(var(--nav-h) + 112px) 0 40px; min-height: 100%; }
.hero-copy { max-width: 860px; }
.hero h1 { font-size: clamp(44px, 1.8rem + 4vw, 84px); line-height: 1; letter-spacing: -0.045em; font-weight: 500; }
/* Two-tone headings: the second clause steps back so the first reads as the headline. */
.dim { color: var(--text-3); }
.lead { margin-top: 28px; max-width: 30em; font-size: 21px; line-height: 1.55; color: var(--text-2); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 40px; }
.field-legend { align-self: flex-end; display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 64px; font-size: 13px; color: var(--text-3); }
.field-legend span:first-child { margin-right: 12px; }
.lg { width: 8px; height: 8px; border-radius: 1px; margin-left: 8px; }
.lg-yes { background: var(--yes); } .lg-no { background: var(--no); } .lg-review { background: var(--review); }
.proof-wrap { margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 900px; }
.proof dt { font-size: 14px; color: var(--text-3); }
.proof dd { margin-top: 6px; font-size: clamp(28px, 1.2rem + 1.4vw, 40px); line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.proof dd small { font-size: 0.5em; font-weight: 400; color: var(--text-3); letter-spacing: 0; margin: 0 2px; }
.proof-note { margin-top: 16px; font-size: 13px; color: var(--text-3); }
.proof-note a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 720px) {
  /* Sized to its content on phones. A full-screen hero left a stretch of empty field to scroll through first. */
  .hero { min-height: 0; }
  .hero-inner { padding-top: calc(var(--nav-h) + 56px); padding-bottom: 24px; }
  .lead { font-size: 17px; }
  .actions { margin-top: 32px; }
  .field-legend { align-self: flex-start; flex-wrap: wrap; padding-top: 112px; }
  .field-legend span:first-child { width: 100%; margin: 0 0 4px; }
  .field-legend .lg-yes { margin-left: 0; }
  /* Columns size to their figures, so "23,400 rows/s" gets the room it needs. */
  .proof { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 12px; }
  .proof dd { font-size: 26px; }
}
@media (max-width: 360px) { .hero h1 { font-size: 40px; } .proof dt { font-size: 13px; } .proof dd { font-size: 22px; } }
/* Keep the second clause on one line wherever it fits, rather than balancing it into "read / in seconds". */
.hero h1 .dim { white-space: nowrap; }

/* ——— Sections ——— */
.section { padding-top: 128px; }
.section-sm { padding-top: 112px; }
.head { max-width: 960px; margin-bottom: 56px; }
.head h2, .review h2, .pilot h2, .faq h2 { font-size: clamp(32px, 1.2rem + 2.4vw, 56px); line-height: 1.04; letter-spacing: -0.04em; }
.head p { margin-top: 20px; max-width: 36em; font-size: 19px; color: var(--text-2); }
@media (max-width: 720px) {
  .section { padding-top: 88px; } .section-sm { padding-top: 80px; } .head { margin-bottom: 32px; }
  .head p { font-size: 17px; }
  /* The inline "Try a triage sheet" link drops to its own line instead of breaking the paragraph's rhythm. */
  .head p .link-arrow { display: flex; width: fit-content; height: 40px; margin-top: 4px; color: var(--accent); }
}

/* Raised surfaces: a faint top-lit gradient and inner highlight give depth without glow. */
.surface { --mx: 50%; --my: 0%; position: relative; background: linear-gradient(180deg, #151815 0%, #0f110f 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 48px -32px rgba(0, 0, 0, 0.8); }
/* Pointer spotlight: the border lights up where the cursor is, as hover feedback on every raised surface. */
.surface::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(212, 245, 106, 0.55), rgba(212, 245, 106, 0.08) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity var(--t-state) var(--ease-out); }
.surface:hover::after { opacity: 1; }
@media (hover: none) { .surface::after { display: none; } }

/* Headings rise in word by word the first time they are seen. */
.js .reveal-words .w { display: inline-block; opacity: 0; transform: translateY(0.35em); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--i) * 45ms); }
.reveal-words.is-in .w { opacity: 1; transform: none; }

/* ——— Console ——— */
.console { border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; }
.console-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--line); }
.console-file { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; min-width: 0; }
.console-file .icon { color: var(--text-3); }
.console-badge { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; margin-right: 4px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 13px; color: var(--text-2); }
.console-badge::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--text-3); transition: background-color var(--t-state) var(--ease-out); }
.is-running .console-badge::before, .is-done .console-badge::before { background: var(--accent); }
.tag { font: 400 12px/1 var(--mono); color: var(--text-3); padding: 5px 7px; border: 1px solid var(--line-strong); border-radius: 5px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; color: var(--text-2); }
.field input, .field select, .field textarea { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); font-size: 15px; transition: border-color var(--t-hover) var(--ease-out); }
.field textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #3a403a; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.select { position: relative; }
.select select { appearance: none; padding-right: 32px; cursor: pointer; }
.select::after { content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.console-formula { display: flex; align-items: center; gap: 16px; height: 48px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.name-box { font: 400 13px/1 var(--mono); color: var(--text-3); padding-right: 16px; border-right: 1px solid var(--line); }
.question { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.console-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.console-main { min-width: 0; border-right: 1px solid var(--line); }
.sheet { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.sheet th { height: 36px; padding: 0 16px; text-align: left; font-size: 13px; font-weight: 500; color: var(--text-3); border-bottom: 1px solid var(--line); }
.sheet th:first-child, .sheet td:first-child { width: 48px; padding: 0; text-align: center; }
.sheet th:nth-child(3) { width: 132px; }
.sheet th:nth-child(4) { width: 132px; }
.sheet th { white-space: nowrap; }
.sheet td { height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet td:first-child { font: 400 12px/1 var(--mono); color: var(--text-3); }
.sheet td:nth-child(4) { font: 400 13px/1 var(--mono); color: var(--text-2); }
.decision { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.decision::before { content: ""; width: 8px; height: 8px; border-radius: 1px; background: currentColor; animation: swatch-in var(--t-state) var(--ease-out) both; }
.decision.yes::before { color: var(--yes); } .decision.no::before { color: var(--no); } .decision.review::before { color: var(--review); }
@keyframes swatch-in { from { transform: scale(0); } }
.pending { display: inline-block; width: 40px; height: 6px; border-radius: 3px; background: var(--line-strong); vertical-align: middle; }
.is-running .pending { background: linear-gradient(90deg, var(--line-strong) 0%, #3d433d 50%, var(--line-strong) 100%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.sheet-foot { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; font-size: 13px; color: var(--text-3); border-bottom: 1px solid var(--line); }
#demo-state { color: var(--text-2); text-align: right; }
.console-matrix { padding: 20px 16px; }
#decision-matrix { width: 100%; height: 160px; }
/* Run metrics: big tabular numerals in the text face, a square meter in the page's motif, and a status line. */
.console-metrics { display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent 40%); }
.metric { padding: 24px; }
.metric-lg { }
.metric-head { display: flex; align-items: center; justify-content: space-between; }
.metric-label { display: block; font-size: 13px; color: var(--text-3); }
.metric-pct { height: 22px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line-strong); font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; transition: color var(--t-state) var(--ease-out), border-color var(--t-state) var(--ease-out); }
.is-done .metric-pct { color: var(--accent); border-color: rgba(212, 245, 106, 0.35); }
.metric-value { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; white-space: nowrap; }
.metric-value strong { font-size: 32px; line-height: 1; font-weight: 500; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.metric-value span { font-size: 14px; color: var(--text-3); }
.metric-lg .metric-value strong { font-size: 56px; letter-spacing: -0.05em; }
.meter-grid { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; max-width: 240px; margin-top: 20px; }
.meter-grid i { aspect-ratio: 1; border-radius: 1px; background: var(--line-strong); }
.meter-grid i.on { background: var(--accent); }
.metric-pair { display: grid; grid-template-columns: 1fr 1fr; margin-top: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric-pair .metric + .metric { border-left: 1px solid var(--line); }
.metric-source { display: flex; align-items: center; gap: 8px; padding: 16px 24px; font-size: 13px; color: var(--text-3); }
.state-dot { width: 6px; height: 6px; border-radius: 1px; background: var(--text-3); transition: background-color var(--t-state) var(--ease-out); }
.is-running .state-dot { background: var(--accent); animation: blink 0.8s steps(2, jump-none) infinite; }
.is-done .state-dot { background: var(--accent); }
@keyframes blink { 50% { opacity: 0.25; } }
.console-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px 12px 20px; border-top: 1px solid var(--line); }
.console-note { font-size: 13px; color: var(--text-3); }
.console-buttons { display: flex; gap: 8px; }
@media (max-width: 960px) {
  .console-body { grid-template-columns: 1fr; }
  .console-main { border-right: 0; }
  .console-metrics { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  /* On phones the run is the story: counters and the matrix come first so the whole replay
     fits on one screen, and the sample rows follow underneath. */
  .console-top { min-height: 48px; padding: 8px 8px 8px 14px; }
  .console-file { font-size: 14px; }
  .console-file .tag { display: none; }
  .console-badge { height: 26px; padding: 0 10px; margin-right: 0; font-size: 12px; }
  .console-formula { height: 44px; padding: 0 14px; gap: 12px; }
  .name-box { padding-right: 12px; }
  .question { font-size: 14px; }
  .console-main { display: contents; }
  .console-metrics { order: 1; border-top: 0; border-bottom: 1px solid var(--line); }
  .console-matrix { order: 2; padding: 14px; border-bottom: 1px solid var(--line); }
  .sheet { order: 3; font-size: 14px; }
  .sheet-foot { order: 4; flex-direction: column; gap: 2px; padding: 10px 14px; border-bottom: 0; }
  #demo-state { text-align: left; }
  .sheet th:nth-child(4), .sheet td:nth-child(4) { display: none; }
  .sheet th:first-child, .sheet td:first-child { width: 36px; }
  .sheet th:nth-child(3) { width: 96px; }
  .sheet td, .sheet th { padding: 0 10px; }
  .sheet td { height: 40px; }
  .metric { padding: 14px; }
  .metric-lg { padding-bottom: 16px; }
  .metric-value { margin-top: 6px; }
  .metric-value strong { font-size: 24px; }
  .metric-lg .metric-value strong { font-size: 44px; }
  /* One thin row of 40 squares instead of a two-row block. */
  .meter-grid { grid-template-columns: repeat(40, 1fr); gap: 2px; max-width: none; margin-top: 14px; }
  .meter-grid i { aspect-ratio: auto; height: 6px; }
  .metric-pair { border-bottom: 0; }
  .metric-source { display: none; }
  .console-foot { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .console-note { text-align: center; }
  .console-buttons { flex-direction: column-reverse; }
  .console-buttons .btn { width: 100%; }
  #decision-matrix { height: 128px; }
}

/* ——— Question types ———
   Each card shows one row going in and one answer coming out. On view, a packet travels
   from the row to the answer, then the answer lands. */
.kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kind { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line-strong); border-radius: 16px; }
.kind-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kind-top h3 { font-size: 20px; letter-spacing: -0.02em; }
.kind-q { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 15px; font-weight: 500; }
.kind-q i { font: italic 400 13px/1 var(--mono); color: var(--text-3); padding-right: 10px; border-right: 1px solid var(--line-strong); }
.kind-io { display: flex; flex-direction: column; margin-top: 20px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); flex: 1; }
.kind-in { padding: 14px; border-radius: 8px; background: var(--bg-raised); font-size: 15px; color: var(--text-2); }
.kind-flow { position: relative; align-self: center; width: 1px; height: 28px; background: var(--line-strong); overflow: hidden; }
.kind-flow i { position: absolute; left: -1px; top: -8px; width: 3px; height: 8px; background: var(--accent); opacity: 0; }
.kind-out { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-strong); font-size: 15px; color: var(--text-2); }
.kind-out b { font-weight: 500; color: var(--text); }
.out-yes::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 1px; background: var(--yes); }
.kind-out > span:last-child { margin-left: auto; font-size: 13px; color: var(--text-3); }
.kind-choices { gap: 6px; }
.kind-choices span, .kind-choices b { height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 13px; }
.kind-choices span:last-child { margin-left: 0; color: var(--text-3); }
.kind-choices span { color: var(--text-3); }
.kind-choices b { border-color: var(--accent); color: var(--accent); background: rgba(212, 245, 106, 0.08); }
.kind-score b { font-size: 24px; letter-spacing: -0.03em; }
.score-bar { display: inline-flex; gap: 3px; }
.score-bar i { width: 14px; height: 8px; border-radius: 1px; background: var(--review); }
/* Answers land after the packet arrives; replays each time the card scrolls back into view. */
.js .kind:not(.is-in) .kind-out > * { opacity: 0; transform: translateY(4px); }
.kind.is-in .kind-out > * { transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); transition-delay: 700ms; }
.kind.is-in .kind-flow i { animation: drop 700ms var(--ease-in-out) both; }
@keyframes drop { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(36px); opacity: 1; } }
.kind:hover .kind-in { color: var(--text); }
@media (max-width: 1024px) { .kinds { grid-template-columns: 1fr; max-width: 560px; } }

/* ——— Phone carousels ———
   Stacked, the card sections run three screens deep. On phones they become a swipeable row
   that bleeds to the screen edge, with the next card peeking in so the swipe is discoverable. */
.carousel-dots { display: none; }
@media (max-width: 720px) {
  .kinds, .where { display: flex; gap: 12px; max-width: none; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .kinds::-webkit-scrollbar, .where::-webkit-scrollbar { display: none; }
  .kind, .where-card { flex: 0 0 86%; scroll-snap-align: start; }
  .kind { padding: 20px; }
  .carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: -8px; }
  .carousel-dots i { width: 6px; height: 6px; border-radius: 1px; background: var(--line-strong); transition: background-color var(--t-state) var(--ease-out), width var(--t-state) var(--ease-out); }
  .carousel-dots i.on { width: 18px; background: var(--text-2); }
}

/* ——— Review ——— */
.review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.review-copy > p:not(.fine) { margin-top: 16px; color: var(--text-2); max-width: 32em; }
.auto-stat { display: flex; align-items: baseline; gap: 4px; margin-top: 32px; font-size: 17px; color: var(--text-2); }
.auto-stat strong { font-size: clamp(56px, 2rem + 4vw, 88px); line-height: 0.9; font-weight: 500; letter-spacing: -0.05em; color: var(--accent); font-variant-numeric: tabular-nums; }
.auto-stat > span { font-size: 32px; font-weight: 500; color: var(--accent); margin-right: 12px; }
.auto-stat small { font-size: inherit; }
.review-stats { margin: 32px 0 20px; border-top: 1px solid var(--line); }
.review-stats div { display: grid; grid-template-columns: 104px 1fr auto; align-items: center; height: 52px; border-bottom: 1px solid var(--line); }
.review-stats dt { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.review-stats dt::before { content: ""; width: 8px; height: 8px; border-radius: 1px; }
.rs-yes dt::before { background: var(--yes); } .rs-review dt::before { background: var(--review); } .rs-no dt::before { background: var(--no); }
.rs-range { font: 400 13px/1 var(--mono); color: var(--text-3); }
.rs-n { font: 400 20px/1 var(--mono); font-variant-numeric: tabular-nums; }
.dist { padding: 24px 24px 16px; border: 1px solid var(--line-strong); border-radius: 16px; }
#dist-bars { width: 100%; height: 260px; }
#dist-bars rect { transform-box: fill-box; transform-origin: 50% 100%; }
.js .dist:not(.is-in) #dist-bars rect { transform: scaleY(0); }
.dist.is-in #dist-bars rect { transition: transform var(--t-figure) var(--ease-out); transition-delay: var(--d, 0ms); }
.dist-axis { position: relative; height: 24px; margin-top: 8px; border-top: 1px solid var(--line-strong); font: 400 12px/1 var(--mono); color: var(--text-3); }
.dist-axis span { position: absolute; top: 8px; transform: translateX(-50%); }
.dist-axis span:first-child { left: 0; transform: none; }
.dist-axis span:last-child { right: 0; transform: none; }
.dist-axis .t30 { left: 30%; } .dist-axis .t70 { left: 70%; }
.dist figcaption { margin-top: 4px; font-size: 13px; color: var(--text-3); }
@media (max-width: 900px) { .review { grid-template-columns: 1fr; gap: 40px; } #dist-bars { height: 200px; } }

/* ——— Use cases ——— */
.uses { border-top: 1px solid var(--line-strong); }
.uses-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) 180px; align-items: center; min-height: 60px; padding: 0 16px; border-bottom: 1px solid var(--line); transition: background-color var(--t-hover) var(--ease-out); }
.uses-row > span:first-child { color: var(--text-3); font-size: 15px; }
.uses-row > span:nth-child(2) { font-size: 17px; }
.uses-head { min-height: 40px; }
.uses-head > span:first-child, .uses-head > span:nth-child(2) { font-size: 13px; color: var(--text-3); }
a.uses-row:hover { background: var(--bg-raised); }
.uses-go { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 14px; color: var(--text-3); transition: color var(--t-hover) var(--ease-out); }
.uses-go .icon { transition: transform var(--t-state) var(--ease-out); }
/* Hovering a question previews it running: a strip of rows fills with answers. */
.uses-run { display: inline-flex; gap: 3px; margin-right: 14px; }
.uses-run i { width: 6px; height: 6px; border-radius: 1px; background: var(--line-strong); transition: background-color 200ms var(--ease-out); transition-delay: 0ms; }
a.uses-row:hover .uses-run i { transition-delay: calc(var(--i) * 45ms); }
a.uses-row:hover .uses-run i.y { background: var(--yes); }
a.uses-row:hover .uses-run i.n { background: var(--no); }
a.uses-row:hover .uses-run i.r { background: var(--review); }
a.uses-row:hover .uses-go { color: var(--accent); }
a.uses-row:hover .uses-go .icon { transform: translate(2px, -2px); }
@media (max-width: 720px) {
  .uses-head { display: none; }
  .uses-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "team go" "q go"; gap: 4px 16px; padding: 14px 4px; }
  .uses-row > span:first-child { grid-area: team; font-size: 13px; }
  .uses-row > span:nth-child(2) { grid-area: q; font-size: 16px; }
  .uses-go { grid-area: go; }
  .uses-run { display: none; }
}

/* ——— Where it runs ———
   Each card shows the column filling in, so the section demonstrates rather than lists. */
.where { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.where-card { display: flex; flex-direction: column; padding: 8px 8px 24px; border: 1px solid var(--line-strong); border-radius: 16px; }
.where-card h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 24px 16px 0; font-size: 20px; letter-spacing: -0.02em; }
.where-card p { margin: 6px 16px 0; font-size: 15px; color: var(--text-2); }
.mini { height: 212px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); overflow: hidden; font-size: 13px; }
.mini-drop, .mini-fx { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-bottom: 1px solid var(--line); color: var(--text-2); white-space: nowrap; overflow: hidden; }
.mini-drop span { margin-left: auto; font: 400 11px/1 var(--mono); color: var(--text-3); }
.mini-drop .icon { color: var(--accent); }
.mini-fx i { font: italic 400 13px/1 var(--mono); color: var(--text-3); padding-right: 10px; border-right: 1px solid var(--line); }
.mini-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px; align-items: center; height: 34px; border-bottom: 1px solid var(--line); }
.mini-row:last-child { border-bottom: 0; }
.mini-row span { padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.mini-row b { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 10px; border-left: 1px solid var(--line); font-weight: 500; font-size: 12.5px; }
.mini-row b::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: currentColor; flex: none; }
.mini-row b.yes::before { color: var(--yes); } .mini-row b.no::before { color: var(--no); } .mini-row b.review::before { color: var(--review); }
.mini-letters { height: 24px; background: var(--bg-raised); }
.mini-letters span, .mini-letters b { font: 400 11px/1 var(--mono); color: var(--text-3); justify-content: center; text-align: center; }
.mini-letters b::before { display: none; }
/* Cells fill top to bottom while the card is on screen, and reset when it leaves. */
.js .where-card .mini-row:not(.mini-letters) b { opacity: 0; transform: translateY(3px); }
.where-card.is-in .mini-row:not(.mini-letters) b { opacity: 1; transform: none; transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); transition-delay: calc(300ms + var(--i) * 180ms); }
.status { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--text-3); }
.status-live { color: var(--accent); border-color: rgba(212, 245, 106, 0.3); }
@media (max-width: 960px) { .where { grid-template-columns: 1fr; } }

/* ——— Pilot ——— */
.pilot { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; align-items: start; }
.pilot-copy > p { margin-top: 16px; max-width: 32em; color: var(--text-2); }
.checklist { display: grid; gap: 12px; margin-top: 32px; }
.checklist li { display: flex; align-items: center; gap: 12px; }
.checklist .icon { color: var(--accent); }
.pilot-card { padding: 32px; border: 1px solid var(--line-strong); border-radius: 16px; }
.pilot-card h3 { font-size: 20px; }
.pilot-card > p { margin-top: 8px; font-size: 15px; color: var(--text-2); }
#pilot-form { display: grid; gap: 16px; margin-top: 24px; }
.pilot-unavailable { margin-top: 24px; }
.pilot-unavailable p { margin-bottom: 16px; font-size: 15px; color: var(--text-2); }
.pilot-message { margin-top: 12px; font-size: 15px; color: var(--accent); }
.pilot-message:empty { display: none; }
@media (max-width: 900px) { .pilot { grid-template-columns: 1fr; gap: 40px; } .pilot-card { padding: 24px; } }

/* ——— Pricing ———
   Each plan shows its monthly rows as a grid of squares (one square = 5,000 rows), filling in on view. */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line-strong); border-radius: 16px; }
.plan-featured { border-color: rgba(212, 245, 106, 0.35); background: linear-gradient(180deg, #192014 0%, #10130e 100%); }
.plan h3 { display: flex; align-items: center; justify-content: space-between; font-size: 20px; letter-spacing: -0.02em; }
.plan-tag { height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: rgba(212, 245, 106, 0.12); color: var(--accent); font-size: 12px; font-weight: 500; }
.plan-for { margin-top: 6px; font-size: 15px; color: var(--text-2); }
.plan-price { margin-top: 28px; font-size: 56px; line-height: 1; font-weight: 500; letter-spacing: -0.05em; }
.plan-price span { font-size: 24px; vertical-align: 0.9em; margin-right: 2px; color: var(--text-2); letter-spacing: 0; }
.plan-price small { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--text-3); margin-left: 4px; }
.plan-meter { display: grid; grid-template-columns: repeat(25, 1fr); gap: 3px; margin-top: 28px; }
.plan-meter i { aspect-ratio: 1; border-radius: 1px; background: var(--line); }
.plan-meter i.on { background: var(--accent); }
.js .plans:not(.is-in) .plan-meter i.on { background: var(--line); }
.plans.is-in .plan-meter i.on { transition: background-color 240ms var(--ease-out); transition-delay: calc(var(--i) * 6ms); }
.plan-annual { margin-top: 8px; font-size: 13px; color: var(--text-3); }
.plan-rows { margin-top: 12px; font-size: 15px; color: var(--text-2); }
.plan-rows b { color: var(--text); font-weight: 500; }
.plan-extra { margin-top: 4px; font-size: 13px; color: var(--text-3); }
.plan-list { display: grid; gap: 10px; margin: 24px 0 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.plan-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.plan-list .icon { color: var(--accent); }
.plan .btn { margin-top: auto; }
.plans-note { margin-top: 20px; }
@media (max-width: 1180px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; max-width: 520px; } }
@media (max-width: 720px) {
  .plan { padding: 22px; }
  .plan-price { margin-top: 20px; font-size: 48px; }
  .plan-meter { margin-top: 20px; gap: 2px; }
  .plan-list { margin: 20px 0 24px; padding-top: 20px; }
}

/* ——— Finale: the hero's field returns behind the closing call to action. ——— */
.finale { position: relative; margin-top: 128px; padding: 160px 0; border-top: 1px solid var(--line); overflow: hidden; }
.finale-field { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.finale .pilot { position: relative; align-items: center; }
.finale h2 { font-size: clamp(36px, 1.4rem + 3vw, 68px); line-height: 1; letter-spacing: -0.045em; }
@media (max-width: 720px) {
  .finale { margin-top: 88px; padding: 96px 0 112px; }
  .finale h2 { font-size: 40px; }
}

/* ——— FAQ ——— */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 64px; }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 500; transition: color var(--t-hover) var(--ease-out); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary .icon { color: var(--text-3); transition: transform var(--t-state) var(--ease-out); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq details p { padding: 0 48px 20px 0; color: var(--text-2); }
.faq details[open] p { animation: reveal var(--t-state) var(--ease-out); }
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; gap: 24px; } }

/* ——— Notes and footer ——— */
.notes { padding: 112px 0 64px; }
.notes ol { display: grid; gap: 12px; max-width: 80ch; counter-reset: note; }
.notes li { position: relative; padding-left: 24px; font-size: 13px; line-height: 1.6; color: var(--text-3); counter-increment: note; }
.notes li::before { content: counter(note); position: absolute; left: 0; font-family: var(--mono); }
.notes li b { font-weight: 500; color: var(--text-2); }
.notes li a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.footer { border-top: 1px solid var(--line); padding: 32px 0; }
.footer-inner { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 24px; font-size: 15px; color: var(--text-2); }
.footer-links a { transition: color var(--t-hover) var(--ease-out); }
.footer-links a:hover { color: var(--text); }
.footer p { margin-left: auto; font-size: 13px; color: var(--text-3); }
@media (max-width: 720px) {
  .footer { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
  .footer p { margin-left: 0; width: 100%; }
  .notes { padding-top: 88px; }
  .review-copy > p:not(.fine) { font-size: 16px; }
  .auto-stat { flex-wrap: wrap; }
  .auto-stat { margin-top: 24px; }
  .auto-stat > span { line-height: 1; }
  .auto-stat small { flex-basis: 100%; margin-top: 4px; }
  /* iOS zooms into any field under 16px when it is focused. */
  .field input, .field select, .field textarea { font-size: 16px; height: 46px; }
  .field textarea { height: auto; }
  .faq summary { padding: 18px 0; font-size: 16px; }
  .faq details p { padding-right: 0; font-size: 16px; }
}

/* Touch screens: hover states stick after a tap, so they get press feedback instead. */
@media (hover: none) {
  .btn-primary:hover::before { opacity: 0; }
  .btn-primary:active::before { opacity: 1; }
  .btn:hover .icon, .link-arrow:hover .icon { transform: none; }
  .btn-secondary:hover { background: var(--bg-raised); border-color: var(--line-strong); }
  .btn-secondary:active { background: var(--bg-hover); }
  a.uses-row:hover { background: none; }
  a.uses-row:active { background: var(--bg-raised); }
  a.uses-row:hover .uses-go { color: var(--text-3); }
  a.uses-row:hover .uses-go .icon { transform: none; }
  .faq summary:hover { color: inherit; }
  .nav-links a:hover { background: none; }
}

/* Lite mode (set by marketing.js when the page drops frames): the glass nav becomes solid,
   since re-blurring the page under it on every scroll frame is the heaviest effect here,
   and large soft shadows go. */
.lite .nav.is-scrolled .nav-inner { -webkit-backdrop-filter: none; backdrop-filter: none; background: #141714; }
.lite .surface { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.lite .wordmark span { filter: none; }
/* While scrolling in lite mode the dot field is a background snapshot (see landing/field.js). */
.field-snapshot { background-size: 100% 100%; background-repeat: no-repeat; image-rendering: pixelated; }
.field-snapshot > canvas { visibility: hidden; }

/* Ambient loops pause rather than disappear; user-triggered motion still runs. */
@media (prefers-reduced-motion: reduce) {
  .is-running .pending, .is-running .state-dot { animation-play-state: paused; }
  .kind.is-in .kind-flow i { animation: none; }
  .dist.is-in #dist-bars rect { transition: none; }
  .faq details[open] p { animation: none; }
  .where-card.is-in .mini-row b { transition: none; }
  .nav-inner { transition: none; }
}