@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-0: #040410;
  --bg-1: #0f0f13;
  --bg-2: #16161b;
  --bg-3: #1e1e25;
  --bg-hover: #1a1a22;
  --border: rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.10);
  --text-0: #f4f4f6;
  --text-1: #c9c9d6;
  --text-2: #8888a0;
  --text-3: #55556a;
  --green: #34d399;
  --green-bg: rgba(52,211,153,0.08);
  --green-border: rgba(52,211,153,0.18);
  --red: #f87171;
  --red-bg: rgba(248,113,113,0.08);
  --red-border: rgba(248,113,113,0.18);
  --blue: #60a5fa;
  --blue-bg: rgba(96,165,250,0.08);
  --blue-border: rgba(96,165,250,0.18);
  --purple: #a78bfa;
  --purple-bg: rgba(167,139,250,0.08);
  --purple-border: rgba(167,139,250,0.18);
  --orange: #fb923c;
  --orange-bg: rgba(251,146,60,0.08);
  --orange-border: rgba(251,146,60,0.18);
  --amber: #fbbf24;
  --amber-bg: rgba(251,191,36,0.08);
  --amber-border: rgba(251,191,36,0.18);
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Inter', -apple-system, sans-serif;
  --radius: 8px;
  --radius-lg: 12px;

  /* ---- Liquid glass ----
     One neutral treatment, reused by every panel that used to be a flat
     --bg-1 card. The sheen layers over a semi-transparent base so the god
     rays behind the page still read through the blur. Colours (text, badges,
     accents) are untouched — only the surface changes.

     Two things stack to make a pane read as glass. The optics — the backdrop
     actually bending at the rim — come from an SVG filter and are Chromium
     only; see --glass-refract and the @supports block near the bottom of this
     file. The material comes from the tokens here, and carries the look on its
     own wherever the refraction can't run. */
  --glass-radius: 14px;      /* cards and panels */
  --glass-radius-sm: 10px;   /* buttons — a pill reads as a toy, this reads as a key */
  /* The tint is *dark* and thin, not a white veil. This is the one thing
     earlier passes had backwards. A white tint at any useful opacity paints an
     opaque-ish wash over the backdrop, and a washed-out backdrop has nothing
     left to bend — the refraction was working the whole time, the material was
     hiding it. A dark tint at 0.18–0.32 darkens the god rays without erasing
     them, so they stay legible through the pane, and it buys back contrast for
     small text at the same time, which is why there is no longer a separate
     scrim layer under the tint.

     Top-down, because the light in this UI comes from above. Values from the
     kube.io liquid-glass reference. */
  --glass-sheen: linear-gradient(180deg, rgba(14,14,22,0.18), rgba(14,14,22,0.32));
  --glass-base: rgba(14,14,22,0.22);
  /* Hover/selection lifts by adding light *over* the tint rather than thinning
     it — thinning would read as the pane going missing, not brightening. */
  --glass-base-hover: rgba(255,255,255,0.07);
  /* The stack a pane paints, bottom to top: flat tint, then the sheen gradient.
     The hover lift needs a gradient wrapper because only the bottom layer of a
     `background` shorthand may be a bare colour, and that slot is the tint's. */
  --glass-fill:
    var(--glass-sheen),
    var(--glass-base);
  --glass-fill-hover:
    linear-gradient(var(--glass-base-hover), var(--glass-base-hover)),
    var(--glass-sheen),
    var(--glass-base);
  --glass-border: rgba(255,255,255,0.08);
  --glass-blur: blur(20px);
  /* A bevel rather than a border, which is what makes the pane read as a thick
     physical thing: a bright specular catch on the top edge where light hits
     the curve, a soft internal glow rising off the bottom edge, a faint ring
     standing in for the border, and a long soft shadow lifting it off the page.
     The ring is inset rather than a real border so it can't take part in
     layout — panes keep a transparent 1px border for the states that tint it. */
  --glass-shadow:
    0 24px 60px rgba(0,0,0,0.45),
    inset 0 1px 1px rgba(255,255,255,0.5),
    inset 0 -8px 20px rgba(255,255,255,0.06),
    inset 0 0 0 1px rgba(255,255,255,0.13);
  /* Blur runs after the displacement, so it smears the warp back out and the
     budget is finite — but with a dark tint doing the contrast work instead of
     a white wash, there is room for a proper frosted blur here. At 6px the god
     rays behind a pane stay traceable through the bend at the rim while the
     surface still reads as frosted rather than merely dimmed. The saturation
     lift keeps colours behind the glass rich rather than washed out. */
  --glass-refract: url(#liquid-glass-refraction) blur(6px) saturate(180%);
}

html { font-size: 15px; }
body {
  font-family: var(--sans);
  background: var(--bg-0);
  color: var(--text-1);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ---- Topbar ---- */
.topbar {
  height: 48px; display: flex; align-items: center;
  padding: 0 24px; border-bottom: 1px solid var(--glass-border);
  background: rgba(4,4,16,0.55); position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.topbar-logo { font-weight: 600; font-size: 15px; color: var(--text-0); letter-spacing: -0.02em; }
.topbar-sep { width: 1px; height: 16px; background: var(--border-strong); margin: 0 12px; }
.topbar-ctx { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar-link { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.topbar-link:hover { color: var(--text-1); }

.page { max-width: 900px; margin: 0 auto; padding: 0 24px; }

/* ---- Landing: Hero ---- */
.hero { padding: 80px 0 48px; text-align: center; position: relative; }
.hero::before {
  content: ""; position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
  width: 140%; height: 600px; z-index: -1;
  background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(45,120,130,0.13) 0%, rgba(30,80,110,0.07) 35%, rgba(20,50,90,0.03) 60%, transparent 80%);
  pointer-events: none;
}
.hero h1 {
  font-size: 32px; font-weight: 600; color: var(--text-0);
  letter-spacing: -0.03em; line-height: 1.25; margin: 0 auto 16px;
  max-width: 600px;
}
.hero-cursor {
  display: inline-block; width: 2px; height: 0.85em;
  background: var(--blue); margin-left: 2px;
  animation: blink 1s step-end infinite; vertical-align: text-bottom;
}
@keyframes blink { 50% { opacity: 0; } }
.hero-sub {
  font-size: 15px; color: var(--text-2); max-width: 520px;
  margin: 0 auto 28px; line-height: 1.65;
}
.hero-btns { display: flex; gap: 10px; justify-content: center; margin-bottom: 16px; }
/* The primary action is the one piece of lit glass on the page: cyan, backlit,
   and never solid. Everything else is neutral frost, so this reads as the
   only thing asking to be clicked. */
.btn-pri, .btn-approve {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(34, 211, 238, 0.06));
  color: #a5f3fc;
  border: 1px solid rgba(34, 211, 238, 0.25);
  padding: 10px 24px; border-radius: var(--glass-radius-sm);
  font-size: 14px; font-weight: 500; font-family: var(--sans);
  cursor: pointer;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  /* The neutral dressing plus a cyan bloom — the tint is the only thing that
     separates it from the frost, so the material underneath has to match. */
  box-shadow:
    0 24px 60px rgba(0,0,0,0.45),
    inset 0 1px 1px rgba(255,255,255,0.5),
    inset 0 -8px 20px rgba(255,255,255,0.06),
    inset 0 0 0 1px rgba(255,255,255,0.13),
    0 0 20px rgba(34, 211, 238, 0.08);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn-pri:hover, .btn-approve:hover {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.20), rgba(34, 211, 238, 0.10));
  border-color: rgba(34, 211, 238, 0.40);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.45),
    inset 0 1px 1px rgba(255,255,255,0.6),
    inset 0 -8px 20px rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.20),
    0 0 32px rgba(34, 211, 238, 0.18);
}

/* Neutral frost, so the pair sits on the same material at the same radius —
   the colour is the only thing separating primary from secondary. */
.btn-sec {
  background: var(--glass-sheen);
  color: var(--text-2);
  border: 1px solid transparent;
  padding: 10px 24px; border-radius: var(--glass-radius-sm);
  font-size: 14px; font-family: var(--sans); cursor: pointer;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  transition: border-color 0.15s, color 0.15s;
}
.btn-sec:hover { border-color: var(--border-strong); color: var(--text-1); }
.hero-note { font-size: 12px; color: var(--text-3); }

/* ---- Landing: Pitch visual ---- */
.pitch {
  background: var(--glass-fill);
  border: 1px solid transparent;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--glass-radius); padding: 24px; margin: 0 auto 56px;
  max-width: 720px;
}
/* Names the change once, so both columns are read as one story. */
.pitch-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.pitch-head-title { font-size: 14px; font-weight: 500; color: var(--text-0); }
.pitch-head-dim { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-left: auto; }
.pitch-cols { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: start; }
.pitch-label {
  font-family: var(--mono); font-size: 10px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px;
}
.diff-block {
  background: var(--bg-0); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.8;
}
.diff-add { color: var(--green); }
.diff-rem { color: var(--red); }
.diff-ctx { color: var(--text-3); }
.ci-row { display: flex; gap: 6px; margin-top: 12px; }
.ci-badge {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  padding: 3px 9px; border-radius: 5px;
}
.ci-pass { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.ci-cov { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); }
.pitch-arrow { display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 18px; padding-top: 28px; }
.actual-list { display: flex; flex-direction: column; gap: 5px; }
.actual-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 6px; font-size: 12.5px;
}
.actual-tag { font-family: var(--mono); font-size: 10px; font-weight: 500; min-width: 55px; flex-shrink: 0; }
.actual-row.intended { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.actual-row.bug { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.actual-row.regression { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }

/* Used by OrientationBeat, not by the landing page: a green check row that
   pairs with .actual-row.bug so "all green" vs "two bugs" is a colour
   difference and nothing else. */
.actual-row.pass { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.actual-mark { min-width: 10px; font-size: 11px; }

/* ---- Landing: Demos ---- */
.section-title {
  font-size: 17px; font-weight: 600; color: var(--text-0);
  text-align: center; margin-bottom: 20px; letter-spacing: -0.02em;
}
.demos { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 56px; }
.demo-card {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px; cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.demo-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.demo-icon { font-size: 22px; margin-bottom: 10px; }
.demo-name { font-size: 14px; font-weight: 500; color: var(--text-0); margin-bottom: 5px; }
.demo-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin-bottom: 10px; }
.demo-tag {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  padding: 3px 9px; border-radius: 5px; display: inline-block;
}
.tag-red { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.tag-amber { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
.tag-purple { background: var(--purple-bg); color: var(--purple); border: 1px solid var(--purple-border); }

/* ---- Landing: Steps ---- */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 56px; }
.step { text-align: center; padding: 16px; }
.step-num { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-bottom: 6px; }
.step-title { font-size: 14px; font-weight: 500; color: var(--text-0); margin-bottom: 4px; }
.step-desc { font-size: 13px; color: var(--text-2); line-height: 1.55; }

.pitch-caption {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-3); text-align: center;
}

.section-sub {
  font-size: 13px; color: var(--text-3); text-align: center;
  max-width: 460px; margin: -12px auto 20px;
}

/* base/target vocabulary, introduced once and reused everywhere after */
.kw-base { color: rgba(90,235,212,0.75); font-family: var(--mono); font-size: 12px; }
.kw-target { color: rgba(255,150,142,0.75); font-family: var(--mono); font-size: 12px; }

/* ---- Landing: CTA ---- */
.cta-block {
  text-align: center; padding: 40px 0 60px;
  border-top: 1px solid var(--border);
}
/* Closing statement, no button under it — the hero CTA is the only one. */
.cta-block p {
  font-size: 15px; color: var(--text-2); max-width: 480px;
  margin: 0 auto; line-height: 1.6;
}

/* ---- Section label ---- */
.sec-label {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-3); margin-bottom: 14px;
}

/* ---- Run list ---- */
.run-card {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 22px; margin-bottom: 8px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.run-card:hover { border-color: var(--border-strong); background: var(--bg-hover); transform: translateY(-1px); }
.run-left { display: flex; flex-direction: column; gap: 3px; }
.run-title-row { display: flex; align-items: center; gap: 10px; }
.run-app { font-size: 15px; font-weight: 600; color: var(--text-0); }
.run-id { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.run-meta { font-size: 12px; color: var(--text-3); }
.run-right { display: flex; align-items: center; gap: 14px; }
.run-stat { font-family: var(--mono); font-size: 11px; color: var(--text-3); }

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  padding: 3px 9px; border-radius: 5px;
  letter-spacing: 0.03em; text-transform: uppercase;
  border: 1px solid transparent;
}
.badge-green { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }
.badge-red { color: var(--red); background: var(--red-bg); border-color: var(--red-border); }
.badge-blue { color: var(--blue); background: var(--blue-bg); border-color: var(--blue-border); }
.badge-purple { color: var(--purple); background: var(--purple-bg); border-color: var(--purple-border); }
.badge-orange { color: var(--orange); background: var(--orange-bg); border-color: var(--orange-border); }
.badge-muted { color: var(--text-3); background: var(--bg-3); }

/* ---- Comparison workspace ---- */
.back-link {
  font-size: 13px; color: var(--text-2); display: inline-flex;
  align-items: center; gap: 5px; transition: color 0.15s;
}
.back-link:hover { color: var(--text-1); }

.pr-header { padding: 20px 0 8px; }
.pr-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pr-badge { font-family: var(--mono); font-size: 11px; background: var(--blue-bg); color: var(--blue); padding: 2px 8px; border-radius: var(--radius); border: 1px solid var(--blue-border); }
.pr-title { font-size: 18px; font-weight: 600; color: var(--text-0); letter-spacing: -0.02em; }
.pr-intent { font-size: 13px; color: var(--text-2); margin-bottom: 16px; }

.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 20px; }
.stat-card {
  background: var(--glass-fill);
  border: 1px solid transparent;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--glass-radius); padding: 14px;
}
.stat-label { font-size: 11px; color: var(--text-3); margin-bottom: 4px; }
.stat-val { font-size: 20px; font-weight: 600; color: var(--text-0); font-family: var(--mono); }
.stat-card.danger .stat-val { color: var(--red); }
.stat-card.success .stat-val { color: var(--green); }

.view-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 20px;
}
.view-tab {
  font-size: 13px; padding: 10px 16px; color: var(--text-3);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.15s;
}
.view-tab:hover { color: var(--text-2); }
.view-tab.active { color: var(--text-0); border-bottom-color: var(--blue); }

.findings-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.findings-title { font-size: 13px; font-weight: 500; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.findings-count { font-family: var(--mono); font-size: 11px; background: var(--bg-3); padding: 2px 7px; border-radius: 4px; color: var(--text-2); }
.findings-sup { font-size: 12px; color: var(--text-3); }

/* ---- Finding cards ---- */
.finding-card {
  position: relative;
  background: var(--glass-fill);
  border: 1px solid transparent;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--glass-radius);
  margin-bottom: 6px; cursor: pointer; overflow: hidden;
  transition: border-color 0.15s;
}
.finding-card:hover { border-color: var(--border-strong); }
.finding-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.accent-http { background: var(--blue); }
.accent-postgres { background: var(--purple); }
.accent-outbound { background: var(--orange); }
.accent-latency { background: var(--amber); }
.finding-body { padding: 14px 18px 14px 22px; }
.finding-top { display: flex; align-items: center; gap: 7px; }
.finding-sev {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  color: var(--text-2); width: 18px; text-align: center;
}
.finding-summary {
  flex: 1; font-family: var(--mono); font-size: 12.5px; color: var(--text-0);
}
.finding-chevron { font-size: 10px; color: var(--text-3); margin-left: 8px; }
.finding-meta { margin: 5px 0 0 25px; }
.finding-workflow { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
.finding-reasoning { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.finding-conf { color: var(--text-3); }

/* ---- Evidence ---- */
.evidence {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 14px 0 4px 25px; padding-top: 14px; border-top: 1px solid var(--border);
}
.ev-label {
  font-family: var(--mono); font-size: 10px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 5px; display: flex; align-items: center; gap: 5px;
}
.ev-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.ev-dot-base { background: var(--text-3); }
.ev-dot-target { background: var(--blue); }
.ev-pre {
  background: var(--bg-0); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; margin: 0;
  font-family: var(--mono); font-size: 11px; line-height: 1.7;
  color: var(--text-2); overflow: auto; max-height: 280px;
}

/* ---- Finding actions ---- */
.finding-actions { display: flex; gap: 6px; margin: 10px 0 2px 25px; }
.finding-act {
  font-size: 11px; font-family: var(--sans); color: var(--text-2);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 5px 12px; cursor: pointer; background: transparent;
  transition: border-color 0.15s;
}
.finding-act:hover { border-color: var(--border-strong); color: var(--text-1); }

/* ---- Noise card ---- */
.noise-card {
  background: var(--glass-fill);
  border: 1px solid transparent;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--glass-radius); padding: 12px 18px; margin-top: 12px;
  font-size: 12.5px; color: var(--text-3); display: flex;
  align-items: center; gap: 8px;
}

/* ---- Info panels ---- */
.info-panel {
  background: var(--glass-fill);
  border: 1px solid transparent;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--glass-radius); padding: 18px 22px; margin-bottom: 10px;
}
.info-label {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-3); margin-bottom: 8px;
}
.info-text { font-size: 14px; color: var(--text-1); line-height: 1.6; }
.info-list { margin-top: 8px; }
.info-list-item {
  font-size: 13px; color: var(--text-2); padding: 2px 0;
  display: flex; align-items: baseline; gap: 8px;
}
.info-arrow { color: var(--text-3); font-family: var(--mono); font-size: 11px; }

/* ---- Empty / clean ---- */
.empty-state { text-align: center; padding: 100px 0 60px; }
.empty-icon { font-size: 28px; margin-bottom: 14px; color: var(--text-3); }
.empty-title { font-size: 16px; color: var(--text-2); margin-bottom: 8px; }
.empty-hint { font-size: 13px; color: var(--text-3); }
.empty-hint code { font-family: var(--mono); font-size: 12px; background: var(--bg-2); border: 1px solid var(--border); padding: 2px 7px; border-radius: 5px; }
.clean-state { text-align: center; padding: 48px 0; font-size: 14px; color: var(--green); font-weight: 500; }

/* Loading / error / empty share one component so the non-happy paths stop
   looking like a different product. */
.state-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 48px 0; color: var(--text-3); font-size: 13.5px;
}
.state-spinner {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); border-top-color: var(--text-2);
  animation: stateSpin 0.8s linear infinite;
}
@keyframes stateSpin { to { transform: rotate(360deg); } }
.state-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.state-actions-center { justify-content: center; }

/* A Link styled as a button — buttons and anchors need the same box here. */
.act-link { display: inline-block; padding: 8px 18px; font-size: 13px; }

/* ---- Sequence diagram ----
   Same card as the blast grid and the finding cards; inside it, a spine rather
   than a table — the run happened in order, and the layout should say so. */
.seq-wrap {
  /* The dot column's centre is derived from these, not restated as a number. */
  --seq-time-w: 68px;
  --seq-spine-w: 28px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  backdrop-filter: blur(8px);
}
.seq-rows { padding: 6px 0; }
.seq-row { position: relative; }
.seq-line {
  display: grid; grid-template-columns: var(--seq-time-w) var(--seq-spine-w) 1fr;
  align-items: center; min-height: 34px;
}
.seq-time {
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  text-align: right; padding-right: 12px; white-space: nowrap;
}
/* The line is drawn on the column, not between rows, so it runs unbroken. */
.seq-spine {
  position: relative; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
}
.seq-spine::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; margin-left: -0.5px; background: var(--border);
}
/* The first and last dots sit on an open end rather than a cut line. */
.seq-row:first-child .seq-spine::before { top: 50%; }
.seq-row:last-child .seq-spine::before { bottom: 50%; }
.seq-dot {
  position: relative; width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-3); box-shadow: 0 0 0 3px var(--bg-1);
}
.seq-body {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px 7px 4px; min-width: 0;
}
.seq-icon { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.seq-label { font-size: 13px; color: var(--text-2); }
.seq-summary {
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seq-more { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.seq-chevron { font-size: 8px; color: var(--text-3); margin-left: auto; padding-left: 8px; }

.seq-match .seq-dot { background: var(--green); opacity: 0.55; }
.seq-engine .seq-dot { background: var(--text-3); opacity: 0.7; }
.seq-engine .seq-label { color: var(--text-3); font-style: italic; }
.seq-engine .seq-icon { opacity: 0.6; }

.seq-diverge { background: rgba(248, 113, 113, 0.06); }
.seq-diverge .seq-dot {
  width: 10px; height: 10px; background: var(--red);
  box-shadow: 0 0 0 3px var(--bg-1), 0 0 10px rgba(248, 113, 113, 0.45);
}
.seq-diverge .seq-label { color: var(--text-1); }
.seq-diverge .seq-line { cursor: pointer; }
.seq-diverge .seq-line:hover .seq-label { color: var(--text-0); }
.seq-diverge .seq-line:focus-visible { outline: 1px solid var(--red-border); outline-offset: -1px; }

.seq-detail {
  position: relative; background: rgba(248, 113, 113, 0.06);
  padding: 0 16px 4px calc(var(--seq-time-w) + var(--seq-spine-w));
}
/* The spine carries on past an opened row. */
.seq-detail::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--seq-time-w) + var(--seq-spine-w) / 2);
  width: 1px; margin-left: -0.5px; background: var(--border);
}
/* The shared evidence grid is indented for the finding card's accent bar;
   here the spine already provides the offset. */
.seq-evidence { margin-left: 0; }

.seq-note {
  font-size: 12px; color: var(--text-3);
  padding: 12px 16px; border-top: 1px solid var(--border);
}
.seq-empty { padding: 44px 16px; text-align: center; color: var(--text-2); font-size: 14px; }

/* ---- Blast radius grid ----
   Same card treatment as a finding: it sits in the same tab strip, so it has
   to read as the same surface seen a different way. */
.blast-wrap {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  backdrop-filter: blur(8px);
}
/* Long workflow lists scroll down, extra categories scroll across; the page
   itself never grows sideways. */
.blast-scroll { overflow: auto; max-height: 460px; }
.blast-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.blast-th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-2); text-align: right;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3);
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.blast-th-row { text-align: left; }
.blast-row:hover td, .blast-row:hover .blast-rowname { background: var(--bg-hover); }
/* Findings with no workflow of their own — present, but not a peer of the rows above. */
.blast-rowname-quiet { color: var(--text-3); }
.blast-rowname {
  font-family: var(--mono); font-size: 12px; font-weight: 400;
  color: var(--text-1); text-align: left; white-space: nowrap;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.blast-cell {
  font-family: var(--mono); font-size: 12px; text-align: right;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border); white-space: nowrap;
  transition: background 0.15s;
}
.blast-clean { background: var(--green-bg); color: var(--green); }
.blast-diff { background: var(--red-bg); color: var(--red); }
.blast-tick { opacity: 0.75; }
/* The cell colour carries the meaning visually; this carries it to a reader. */
.blast-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.blast-total-label, .blast-total {
  border-bottom: none; color: var(--text-2);
  background: var(--bg-2); font-size: 12px;
}
.blast-total-diff { color: var(--red); }
.blast-note {
  font-size: 12px; color: var(--text-3);
  padding: 12px 16px; border-top: 1px solid var(--border);
}
.blast-empty { padding: 44px 16px; text-align: center; color: var(--text-2); font-size: 14px; }

/* ---- Timeline scrubber ----
   The same card as the sequence spine and the blast grid — one run, three ways
   of looking at it — with the run laid along a clock inside it. */
.tl-wrap {
  --tl-bar-h: 40px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px;
  backdrop-filter: blur(8px);
}
.tl-axis {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; color: var(--text-3);
  letter-spacing: 0.06em; margin-bottom: 6px;
}

.tl-bar {
  position: relative; height: var(--tl-bar-h);
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer; touch-action: none;
  /* The handle and the cursor's tail hang below the bar. */
  margin-bottom: 14px;
}
.tl-bar:focus-visible { outline: 1px solid var(--border-strong); outline-offset: 2px; }
.tl-dragging .tl-bar { cursor: grabbing; }
/* Before the first observed step: the versions were still being built. */
.tl-lead {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: rgba(255,255,255,0.02);
  border-right: 1px dashed var(--border);
  border-radius: var(--radius) 0 0 var(--radius);
}

.tl-tick {
  position: absolute; transform: translateX(-50%);
  top: 50%; margin-top: -6px;
  width: 1px; height: 12px; background: var(--green); opacity: 0.65;
  pointer-events: none;
}
.tl-tick-engine {
  height: 8px; margin-top: -4px; background: var(--text-3); opacity: 0.9;
}
.tl-tick-diverge {
  top: 0; margin-top: 0; height: 100%;
  width: 2px; background: var(--red); opacity: 1;
  box-shadow: 0 0 6px rgba(248,113,113,0.75);
}
/* The tick the cursor is resting on, so the bar and the panel agree. */
.tl-tick-at { opacity: 1; }
.tl-tick-at.tl-tick-match { height: 18px; margin-top: -9px; }
.tl-tick-at.tl-tick-engine { height: 14px; margin-top: -7px; }

.tl-cursor {
  position: absolute; top: -4px; height: calc(100% + 12px);
  width: 1px; margin-left: -0.5px;
  background: rgba(255,255,255,0.8);
  pointer-events: none;
  transition: left 0.12s ease-out;
}
.tl-dragging .tl-cursor { transition: none; }
.tl-handle {
  position: absolute; top: -6px; left: 50%;
  width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: var(--text-0);
  box-shadow: 0 0 0 3px var(--bg-1), 0 0 8px rgba(0,0,0,0.6);
  cursor: grab; pointer-events: auto;
}
.tl-dragging .tl-handle { cursor: grabbing; }

.tl-detail {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  animation: tl-fade 0.18s ease-out;
}
@keyframes tl-fade {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}
.tl-detail-diverge { background: rgba(248,113,113,0.06); border-color: var(--red-border); }
.tl-detail-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-detail-time {
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  min-width: 52px;
}
.tl-detail-icon { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.tl-detail-label { font-size: 13px; color: var(--text-1); }
.tl-detail-engine .tl-detail-label { color: var(--text-3); font-style: italic; }
.tl-detail-msg { font-size: 12px; color: var(--text-2); margin-top: 6px; padding-left: 60px; }
.tl-detail-summary {
  font-family: var(--mono); font-size: 11px; color: var(--text-2);
  margin-top: 8px; padding-left: 60px;
}
.tl-detail-more { color: var(--text-3); }
/* The shared evidence grid is indented for a finding card's accent bar. */
.tl-evidence { margin-left: 0; }

.tl-note {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-3); margin-top: 12px;
}
.tl-hint { color: var(--text-3); opacity: 0.7; margin-left: auto; }
.tl-empty { padding: 44px 16px; text-align: center; color: var(--text-2); font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .tl-detail { animation: none; }
  .tl-cursor { transition: none; }
}

/* ---- Trigger a run: manifest picker ---- */
.topbar-cta {
  font-size: 12.5px; color: var(--text-1);
  border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 4px 12px; transition: border-color 0.15s, color 0.15s;
}
.topbar-cta:hover { border-color: var(--text-3); color: var(--text-0); }

.list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.stream-link-btn { display: inline-block; padding: 7px 16px; font-size: 12.5px; }

.manifest-card {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 8px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.manifest-card:hover { border-color: var(--border-strong); background: var(--bg-hover); transform: translateY(-1px); }
.manifest-card:hover .manifest-go { color: var(--text-1); }
.manifest-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.manifest-title-row { display: flex; align-items: center; gap: 10px; }
.manifest-app { font-size: 15px; font-weight: 600; color: var(--text-0); }
.manifest-path { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); word-break: break-all; }
.manifest-err { font-size: 12.5px; color: var(--red); }
.manifest-go { font-family: var(--mono); font-size: 11px; color: var(--text-3); flex-shrink: 0; padding-left: 16px; }

/* ---- Comparison picker ---- */
.picker-note {
  font-size: 12.5px; color: var(--text-3); line-height: 1.65;
  padding-bottom: 18px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.comparison-card {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  background: var(--glass-fill);
  border: 1px solid transparent;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--glass-radius); padding: 18px 22px; margin-bottom: 10px;
  transition: border-color 0.15s, background 0.15s;
}
.comparison-card:hover { border-color: var(--border-strong); }
/* Selection stays a border change plus a lift in the glass, not an opaque fill. */
.comparison-card.selected {
  border-color: var(--blue-border);
  background: var(--glass-fill-hover);
}

.comparison-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.comparison-title-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.comparison-name { font-size: 15px; font-weight: 600; color: var(--text-0); letter-spacing: -0.01em; }
.comparison-claim { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.comparison-meta { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.scenario-watch { font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.comparison-dim { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.comparison-note { font-size: 12px; color: var(--blue); margin-top: 4px; }

.comparison-actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; align-items: stretch; }
.comparison-actions .btn-pri,
.comparison-actions .btn-sec { padding: 8px 18px; font-size: 13px; white-space: nowrap; text-align: center; }

/* The demoted second option: a link, not a button, so it never competes
   with the walkthrough for the visitor's eye. */
.run-real-wrap { text-align: center; }
.run-real {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; color: var(--text-2);
  border-bottom: 1px solid var(--border-strong);
  transition: color 0.15s, border-color 0.15s;
}
.run-real:hover { color: var(--text-0); border-color: var(--text-3); }
.run-real-note { font-family: var(--mono); font-size: 10px; color: var(--text-3); margin-top: 4px; }

.picker-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }

/* ---- Orientation panel (demo flow, stage 00) ---- */
/* Full pane width, so nothing shifts when this hands over to the review. */
.orient-panel .pitch { max-width: none; margin-left: 0; margin-right: 0; }
.orient-headline {
  font-size: 26px; font-weight: 600; color: var(--text-0);
  letter-spacing: -0.03em; line-height: 1.3; margin-bottom: 12px;
}
.orient-sub {
  font-size: 14.5px; color: var(--text-2); line-height: 1.7;
  max-width: 560px; margin-bottom: 26px;
}
.orient-panel .pitch { margin-bottom: 24px; }
.orient-actions { display: flex; gap: 10px; }
/* Sets expectations for the wait that follows on the real-run path. */
.orient-foot { font-size: 12.5px; color: var(--text-3); margin-top: 14px; }

/* ---- Run stream: grouped phases ---- */
.phase-list { list-style: none; margin-bottom: 14px; }
.phase {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-radius: var(--radius);
  font-size: 13.5px; color: var(--text-3);
  border: 1px solid transparent;
  transition: color 0.25s, background 0.25s, border-color 0.25s;
}
.phase-mark {
  width: 16px; height: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; border-radius: 50%;
  border: 1px solid var(--border-strong);
}
.phase-active {
  color: var(--text-0); background: var(--bg-1);
  border-color: var(--border-strong);
}
.phase-active .phase-mark { border-color: var(--blue); }
.phase-done { color: var(--text-1); }
.phase-done .phase-mark { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
.phase-failed { color: var(--red); }
.phase-failed .phase-mark { color: var(--red); border-color: var(--red-border); background: var(--red-bg); }
.phase-spin {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid transparent; border-top-color: var(--blue);
  animation: stateSpin 0.8s linear infinite;
}

/* The log is still the truth; it just isn't the headline any more. */
.raw-log { margin-bottom: 12px; }
.raw-log-toggle {
  cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-3); padding: 6px 0;
  display: flex; align-items: center; gap: 8px;
}
.raw-log-toggle::-webkit-details-marker { display: none; }
.raw-log-toggle::before { content: "▸"; font-size: 9px; }
.raw-log[open] .raw-log-toggle::before { content: "▾"; }
.raw-log-toggle:hover { color: var(--text-1); }
.raw-log-count {
  font-size: 10px; background: var(--bg-3); color: var(--text-2);
  padding: 1px 7px; border-radius: 4px; letter-spacing: 0;
}

/* ---- Run detail: narrative header ---- */
.detail-nav { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.detail-nav-quiet { font-size: 12px; color: var(--text-3); transition: color 0.15s; }
.detail-nav-quiet:hover { color: var(--text-1); }
.claim-line { font-size: 13.5px; color: var(--text-1); line-height: 1.6; margin-top: 2px; }
.claim-label { color: var(--text-3); }
.claim-expected { margin: 6px 0 16px; }

/* The comparator's own words, kept under the readable headline. */
.finding-raw { font-family: var(--mono); font-size: 11px; color: var(--text-3); }

/* ---- Trigger a run: live event stream ---- */
.stream-back { background: none; border: none; font-family: var(--sans); cursor: pointer; padding: 0; }
.stream-pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-bg);
  animation: streamPulse 1.4s ease-in-out infinite;
}
@keyframes streamPulse { 50% { opacity: 0.25; } }

.stream-log-wrap {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 8px 4px;
  max-height: 58vh; overflow-y: auto; margin-bottom: 12px;
}
.log { list-style: none; }
.log-row { list-style: none; }
.log-line {
  display: grid; grid-template-columns: 8px 46px 168px 1fr auto;
  align-items: baseline; gap: 12px;
  padding: 6px 14px; border-radius: 6px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.7;
}
.log-line-open { cursor: pointer; }
.log-line-open:hover { background: var(--bg-2); }

/* Same status vocabulary as the demo's lane blocks, shrunk to a dot. */
.log-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg-3); border: 1px solid var(--border-strong);
  align-self: center;
}
.log-dot-pending { background: transparent; }
.log-dot-active {
  background: var(--blue); border-color: var(--blue-border);
  animation: streamPulse 1.4s ease-in-out infinite;
}
.log-dot-done { background: var(--green-bg); border-color: var(--green-border); }
.log-dot-err { background: var(--red-bg); border-color: var(--red); }

.log-time { color: var(--text-3); text-align: right; }
.log-stage { color: var(--text-2); overflow-wrap: anywhere; }
.log-msg { color: var(--text-1); overflow-wrap: anywhere; }
.log-waiting { color: var(--text-3); grid-column: 3 / -1; }
.log-chevron { font-size: 9px; color: var(--text-3); }
.log-data { margin: 4px 14px 10px 78px; }

/* ---- Alerts ---- */
.alert {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 12px;
  font-size: 13.5px;
}
.alert-err { background: var(--red-bg); border: 1px solid var(--red-border); }
.alert-err .alert-icon, .alert-err .alert-title { color: var(--red); }
.alert-warn { background: var(--amber-bg); border: 1px solid var(--amber-border); }
.alert-warn .alert-icon, .alert-warn .alert-title { color: var(--amber); }
.alert-title { font-weight: 500; margin-bottom: 3px; }
.alert-detail { color: var(--text-2); font-size: 12.5px; line-height: 1.6; overflow-wrap: anywhere; }
.alert-detail code { font-family: var(--mono); font-size: 11.5px; color: var(--text-1); }

.stream-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
/* Disabled stays unlit — the hover glow must not come back on a dead button. */
.btn-pri:disabled, .btn-pri:disabled:hover {
  opacity: 0.45; cursor: not-allowed; box-shadow: none;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(34, 211, 238, 0.06));
  border-color: rgba(34, 211, 238, 0.25);
}
.stream-note { font-size: 12.5px; color: var(--text-3); margin-top: 10px; }

/* ---- Responsive ---- */
@media (max-width: 700px) {
  .hero h1 { font-size: 24px; }
  .pitch-cols { grid-template-columns: 1fr; gap: 16px; }
  .pitch-arrow { display: none; }
  .pitch-head-dim { margin-left: 0; }
  .demos { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .run-card { flex-direction: column; align-items: flex-start; gap: 12px; }
  .evidence { grid-template-columns: 1fr; }
  .manifest-card { flex-direction: column; align-items: flex-start; gap: 10px; }
  .manifest-go { padding-left: 0; }
  .comparison-card { flex-direction: column; align-items: stretch; gap: 14px; }
  .log-line { grid-template-columns: 8px 44px 1fr auto; }
  .log-stage { grid-column: 3; }
  .log-msg { grid-column: 2 / -1; }
  .log-waiting { grid-column: 2 / -1; }
  .log-data { margin-left: 14px; }
  .topbar-cta { display: none; }
  /* Too narrow to keep the detail text aligned under the label column. */
  .tl-detail-msg, .tl-detail-summary { padding-left: 0; }
  .tl-hint { margin-left: 0; }
}


.hero-divider {
  position: absolute;
  width: 1px; height: 100%;
  top: 0; left: 50%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.07) 20%,
    rgba(255,255,255,0.12) 42%,
    rgba(255,255,255,0.05) 68%,
    transparent 92%);
}

.hero-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 32%, transparent 40%, rgba(4,4,16,0.28) 78%, rgba(4,4,16,0.62) 100%),
    linear-gradient(180deg, transparent 58%, rgba(4,4,16,0.70) 88%, #040410 100%);
}

.grain-fine, .grain-coarse {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.grain-fine { opacity: 0.145; mix-blend-mode: soft-light; }
.grain-coarse { opacity: 0.062; mix-blend-mode: soft-light; }

.side-label {
  position: absolute; top: 26px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.side-label-base { left: 5%; color: rgba(90,235,212,0.30); }
.side-label-target { right: 5%; color: rgba(255,150,142,0.30); }

/* ---- Headline reveal ---- */
.hero-word {
  display: inline-block;
  animation: wordIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@keyframes wordIn {
  from { opacity: 0; transform: translateY(16px); filter: blur(10px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

.hero-fade { animation: heroFade 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
@keyframes heroFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-word, .hero-fade { animation: none !important; opacity: 1 !important; }
}

@media (max-width: 700px) {
  .herobg { height: 620px; }
  .side-label { display: none; }
  .shaft-l3, .shaft-l4, .shaft-r3, .shaft-r4 { display: none; }
}




/* ---- Hero background ---- */
.herobg {
  position: fixed;
  top: 48px; left: 0;
  width: 100vw; height: 780px;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Distant source: angle steps 3deg per band moving outward from centre,
   so rays are near-parallel but never identical. Gradient sits on ::before
   so the clip happens before the parent's blur, keeping edges soft. */
.shaft { position: absolute; top: -260px; height: 1200px; }
.shaft::before {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(24% 0, 76% 0, 92% 100%, 8% 100%);
}

.shaft-l1 { width: 110px; left: 3%;     transform: rotate(20deg); filter: blur(32px); }
.shaft-l2 { width: 200px; left: 14%;    transform: rotate(17deg); filter: blur(44px); }
.shaft-l3 { width: 95px;  left: 27%;    transform: rotate(14deg); filter: blur(30px); }
.shaft-l4 { width: 140px; left: 37%;    transform: rotate(11deg); filter: blur(36px); }

.shaft-r1 { width: 110px; right: 3%;    transform: rotate(-20deg); filter: blur(32px); }
.shaft-r2 { width: 185px; right: 15.5%; transform: rotate(-17deg); filter: blur(44px); }
.shaft-r3 { width: 85px;  right: 28%;   transform: rotate(-14deg); filter: blur(30px); }
.shaft-r4 { width: 125px; right: 38%;   transform: rotate(-11deg); filter: blur(36px); }

.shaft-l1::before { background: linear-gradient(180deg, rgba(45,255,225,0.42) 0%, rgba(35,205,195,0.10) 34%, transparent 66%); }
.shaft-l2::before { background: linear-gradient(180deg, rgba(60,255,232,0.50) 0%, rgba(38,210,200,0.12) 44%, transparent 92%); }
.shaft-l3::before { background: linear-gradient(180deg, rgba(50,245,220,0.32) 0%, rgba(30,190,190,0.07) 48%, transparent 99%); }
.shaft-l4::before { background: linear-gradient(180deg, rgba(58,250,226,0.26) 0%, transparent 73%); }

.shaft-r1::before { background: linear-gradient(180deg, rgba(255,120,112,0.38) 0%, rgba(215,75,85,0.09) 36%, transparent 71%); }
.shaft-r2::before { background: linear-gradient(180deg, rgba(255,130,120,0.45) 0%, rgba(220,78,90,0.11) 46%, transparent 95%); }
.shaft-r3::before { background: linear-gradient(180deg, rgba(255,115,108,0.30) 0%, rgba(205,70,82,0.065) 50%, transparent 100%); }
.shaft-r4::before { background: linear-gradient(180deg, rgba(255,125,116,0.24) 0%, transparent 64%); }

.trace-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- Demo run ---- */
.demo-page { padding: 24px 0 64px; }
.demo-pane { animation: paneIn 0.4s cubic-bezier(0.16,1,0.3,1); }
@keyframes paneIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.stage-label {
  font-family: var(--mono); font-size: 10px; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 18px 0 14px; display: flex; align-items: center; gap: 8px;
}
.stage-num { background: var(--bg-2); border-radius: 3px; padding: 2px 7px; }

.code-block {
  background: var(--glass-fill);
  border: 1px solid transparent;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--glass-radius); padding: 0 0 12px; margin-bottom: 14px; overflow: hidden;
}
.code-file {
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  padding: 10px 16px; border-bottom: 1px solid var(--glass-border); margin-bottom: 10px;
}
.code-line { display: flex; gap: 14px; font-family: var(--mono); font-size: 12px; line-height: 1.9; padding: 0 16px; }
.code-num { color: var(--text-3); min-width: 20px; text-align: right; font-size: 11px; }
.code-text { white-space: pre; }
.code-ctx .code-text { color: var(--text-3); }
.code-add { background: rgba(52,211,153,0.05); }
.code-add .code-text { color: var(--green); }
.code-rem { background: rgba(248,113,113,0.05); }
.code-rem .code-text { color: var(--red); }

.check-row { display: flex; gap: 6px; margin-bottom: 22px; }
.check { font-family: var(--mono); font-size: 10.5px; padding: 4px 10px; border-radius: 6px; }
.check-ok { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.check-info { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); }

.ask-line { font-size: 15px; color: var(--text-0); margin-bottom: 12px; }
.ask-btns { display: flex; gap: 8px; }
/* Shares the primary glass; only the box is a touch smaller in the ask row. */
.btn-approve { padding: 9px 24px; font-size: 13.5px; }

.lane { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.lane-name { font-family: var(--mono); font-size: 11px; color: var(--text-3); min-width: 60px; text-align: right; }
.lane-track { display: flex; gap: 5px; flex: 1; }
.lane-blk {
  flex: 1; height: 32px; border-radius: 6px;
  background: var(--bg-1); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10.5px; color: var(--text-3);
  opacity: 0; transform: scale(0.92);
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.lane-blk.in { opacity: 1; transform: scale(1); }
.lane-blk.ok { background: var(--green-bg); border-color: var(--green-border); color: var(--green); }
.lane-blk.bad { background: var(--red-bg); border-color: var(--red-border); color: var(--red); }

.diverge-marker {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px 72px; font-family: var(--mono); font-size: 10.5px;
  color: var(--red); opacity: 0; transition: opacity 0.4s;
}
.diverge-marker.in { opacity: 1; }
.diverge-line { flex: 1; height: 1px; background: var(--red-border); }

.run-meter { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.run-time { min-width: 34px; }
.run-bar { flex: 1; height: 2px; background: var(--border); border-radius: 1px; overflow: hidden; }
.run-fill { height: 100%; background: var(--blue); transition: width 0.3s linear; }
.run-phase { min-width: 150px; }

.verdict {
  background: var(--glass-fill);
  border: 1px solid transparent;
  border-left: 2px solid var(--amber);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: 0 var(--glass-radius) var(--glass-radius) 0;
  padding: 12px 16px; margin-bottom: 18px;
  font-size: 13.5px; color: var(--text-1);
  display: flex; gap: 10px; align-items: flex-start;
  animation: paneIn 0.5s cubic-bezier(0.16,1,0.3,1);
}
.verdict-icon { color: var(--amber); flex-shrink: 0; }

.demo-finding { opacity: 0; transform: translateX(-6px); transition: opacity 0.45s, transform 0.45s; }
.demo-finding.in { opacity: 1; transform: translateX(0); }
.demo-noise { opacity: 0; transition: opacity 0.45s; }
.demo-noise.in { opacity: 1; }

.results-actions { display: flex; gap: 8px; margin-top: 22px; }

@media (max-width: 700px) {
  .lane-blk { font-size: 9px; }
  .run-phase { display: none; }
}



/* ---- Demo page background ---- */
.demobg {
  position: fixed;
  top: 48px; left: 0;
  width: 100vw; height: calc(100vh - 48px);
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  animation: lightsUp 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}
@keyframes lightsUp { to { opacity: 1; } }

.col {
  position: absolute;
  top: -140px; height: 820px;
  width: 30%;
  filter: blur(38px);
  transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.col-base {
  left: 9%;
  background: linear-gradient(180deg,
    rgba(55,255,230,0.44) 0%,
    rgba(36,205,198,0.17) 34%,
    rgba(24,150,160,0.05) 58%,
    transparent 80%);
}
.col-target {
  right: 9%;
  background: linear-gradient(180deg,
    rgba(255,140,130,0.38) 0%,
    rgba(222,82,94,0.15) 34%,
    rgba(180,60,75,0.045) 58%,
    transparent 80%);
}
.col-base.recede { opacity: 0.22; }
.col-target.intensify { opacity: 1.9; }

.col-mid {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.09) 16%,
    rgba(255,255,255,0.17) 46%,
    rgba(255,255,255,0.06) 76%,
    transparent 100%);
}

.demo-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 84% 72% at 50% 26%,
    transparent 46%,
    rgba(4,4,16,0.38) 78%,
    rgba(4,4,16,0.74) 100%);
}

/* content is already in place; only the light comes up */
.demo-pane { animation: contentIn 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes contentIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .demobg, .demo-pane { animation: none; opacity: 1; }
  .col { transition: none; }
}

/* ---- Liquid glass: refraction ----
   Blur and tint alone read flat, because nothing behind the pane moves. Real
   glass bends what's behind it, so the backdrop goes through an SVG
   displacement filter (components/GlassFilters.jsx) that pushes it sideways in
   a band along the rim and leaves the middle alone.

   The <svg> holding the filter has to stay in the render tree for url(#id) to
   resolve — Blink drops filters inside a display:none subtree — so it is
   collapsed to nothing instead of hidden. */
.glass-filters {
  position: absolute; width: 0; height: 0;
  overflow: hidden; pointer-events: none;
}

/* The reusable surface. Everything the grouped rules below spell out per
   element, in one class, for markup that wants glass without a bespoke rule. */
.liquid-glass {
  background: var(--glass-fill);
  border: 1px solid transparent;
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* The muted text steps used to be re-levelled on glass surfaces, because a
   white tint put a bright floor under everything on a pane and --text-3
   vanished into it. The dark tint sets a floor near the page's own background
   instead, so the global ramp reads on glass exactly as it does off it and the
   overrides are gone. Nothing here needs to redefine --text-2 or --text-3. */

/* Refraction is decoration and never carries meaning: an engine that skips
   this block keeps the blurred, dressed surface above and loses only the warp.

   Gated on Blink rather than on `backdrop-filter: url(...)` alone, because
   Gecko and WebKit accept that value at parse time and then drop the whole
   filter chain when the reference turns out not to be renderable — a plain
   @supports test would cost them their blur as well as the refraction. So the
   query also narrows Gecko out by -moz-appearance and WebKit out by
   -webkit-named-image — two properties Blink has neither of.

   .topbar is deliberately absent: it spans the viewport and is sticky, so it
   would re-run the filter over a couple of thousand pixels on every scroll
   frame. It keeps the dressing and its 16px blur. The rest are bounded by
   .page's 900px, i.e. 852px of content at the widest. */
@supports (backdrop-filter: url(#liquid-glass-refraction))
      and (not (-moz-appearance: none))
      and (not (background: -webkit-named-image(apple-pay-logo-black))) {
  .liquid-glass,
  .pitch, .comparison-card, .stat-card, .finding-card, .info-panel,
  .noise-card, .code-block, .verdict,
  .btn-pri, .btn-approve, .btn-sec {
    backdrop-filter: var(--glass-refract);
    -webkit-backdrop-filter: var(--glass-refract);
  }
}