/* 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; }
.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 600ms var(--ease-out), height 400ms var(--ease-out), padding 400ms 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 600ms var(--ease-out); }
.nav.is-scrolled .nav-inner { width: min(760px, 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(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  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; }
.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; }
.nav.is-scrolled .btn { height: 38px; }
@media (max-width: 860px) { .nav-links { display: none; } .nav .btn { margin-left: auto; } .nav.is-scrolled .nav-inner { width: calc(100% - 16px); } }

/* ——— Hero ——— */
.hero { position: relative; min-height: 100svh; display: flex; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-field { position: absolute; inset: 0; width: 100%; height: 100%;
  /* Quiet behind the copy, full strength on the right; fades out before the proof row. */
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.32) 38%, #000 72%), linear-gradient(180deg, #000 55%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.32) 38%, #000 72%), linear-gradient(180deg, #000 55%, transparent 92%);
  mask-composite: intersect; }
.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) {
  /* On narrow screens the copy spans the width, so the field shows in the band between the actions and the proof row. */
  .hero-field { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.2) 52%, #000 64%, #000 72%, transparent 84%); mask-image: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.2) 52%, #000 64%, #000 72%, transparent 84%); }
  .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: 48px; }
  .field-legend span:first-child { width: 100%; margin: 0 0 4px; }
  .field-legend .lg-yes { margin-left: 0; }
  .proof { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .proof dd { font-size: 26px; }
}

/* ——— 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; } }

/* 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) {
  .console-top { flex-direction: column; align-items: stretch; padding: 12px; }
  .console-formula { padding: 0 12px; gap: 12px; }
  .sheet th:nth-child(4), .sheet td:nth-child(4) { display: none; }
  .sheet th:nth-child(3) { width: 104px; }
  .sheet td, .sheet th { padding: 0 10px; }
  .sheet-foot { flex-direction: column; gap: 4px; }
  #demo-state { text-align: left; }
  .metric { padding: 16px; }
  .metric-value strong { font-size: 26px; }
  .metric-lg .metric-value strong { font-size: 44px; }
  .console-foot { flex-direction: column; align-items: stretch; padding: 12px; }
  .console-buttons { flex-direction: column-reverse; }
  .console-buttons .btn { width: 100%; }
  #decision-matrix { height: 120px; }
}

/* ——— 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; } }

/* ——— 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; }
.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(3, 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 300ms var(--ease-out); transition-delay: calc(var(--i) * 18ms); }
.plan-rows { margin-top: 12px; font-size: 15px; color: var(--text-2); }
.plan-rows b { color: var(--text); font-weight: 500; }
.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: 960px) { .plans { grid-template-columns: 1fr; max-width: 520px; } }

/* ——— 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%;
  -webkit-mask-image: radial-gradient(70% 90% at 30% 50%, rgba(0,0,0,.2) 30%, #000 80%); mask-image: radial-gradient(70% 90% at 30% 50%, rgba(0,0,0,.2) 30%, #000 80%); }
.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; } }

/* ——— 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 p { margin-left: 0; width: 100%; } }

/* 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; }
}