/* ==========================================================================
   Panorad — Pathfinder marketing site  (v2)
   Dark clinical-editorial theme with a semantic color system:
     radiology = blue · pathology = violet · match = green · CME = gold
   ========================================================================== */

@font-face {
  font-family: "panorad";
  src: url("../fonts/panorad.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg: #0b0d10;
  --bg-alt: #0e1114;
  --panel: #12161b;
  --ink-line: rgba(233, 238, 244, 0.10);
  --ink-line-strong: rgba(233, 238, 244, 0.22);
  --text: #e9eef4;
  --muted: #97a3b0;

  /* Brand + semantic colors (matching the app: radiology green, pathology blue) */
  --match: #19a974;          /* brand green (CTAs, section marks) */
  --match-bright: #2fd598;
  --rad: #2fd598;            /* radiology = green */
  --path: #6ab7ff;           /* pathology = blue */
  --corr: #45d6c3;           /* a correlation/match = teal (green meets blue) */
  --gold: #ffb700;           /* CME */
  --coral: #ff725c;          /* the miss */

  --match-dim: rgba(25, 169, 116, 0.14);
  --rad-dim: rgba(47, 213, 152, 0.12);
  --path-dim: rgba(106, 183, 255, 0.12);
  --corr-dim: rgba(69, 214, 195, 0.13);
  --gold-dim: rgba(255, 183, 0, 0.12);
  --coral-dim: rgba(255, 114, 92, 0.12);

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-head: "Archivo", var(--font-body);
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shell: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--match-bright); text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.mono { font-family: var(--font-mono); }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 28px;
}

/* Semantic highlights ----------------------------------------------------- */
.hl-rad { color: var(--rad); }
.hl-path { color: var(--path); }
.hl-match { color: var(--match-bright); }
.hl-gold { color: var(--gold); }
.hl-coral { color: var(--coral); }
/* Product name in a headline — brand-green all-caps token; positive tracking
   gives the caps air against the headline's tight -0.02em default. */
.hl-brand { color: var(--match-bright); font-weight: 800; letter-spacing: 0.02em; }
/* De-emphasized connective words in a headline, so the key beats pop */
.hl-dim { color: #9aa4b1; }
/* Halo — a tight white core blooming out into brand green. Stacked shadows at
   widening radii so the falloff is smooth rather than one hard ring. */
.hl-glow {
  color: var(--text);
  text-shadow:
    0 0 12px rgba(233, 238, 244, 0.65),
    0 0 30px rgba(233, 238, 244, 0.45),
    0 0 64px rgba(47, 213, 152, 0.34),
    0 0 110px rgba(47, 213, 152, 0.20);
}
/* "dark" dissolving into blackness — the glyphs fade left-to-right via a gradient
   clipped to the text. The plain color is the fallback where background-clip is absent. */
.hl-dark {
  color: #4a525c;
  background: linear-gradient(100deg, #97a3b0 0%, #4a525c 35%, #14181d 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hl-dark { color: transparent; }
}

u.u-rad, u.u-path {
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: none;
}
u.u-rad { text-decoration-color: var(--rad); }
u.u-path { text-decoration-color: var(--path); }

/* Cycling interval word (days → weeks → months → years) in the problem statement.
   min-width is set in JS to the widest word so the sentence never reflows mid-cycle. */
.interval-word {
  display: inline-block;
  text-align: center;
  transition: opacity 0.45s ease;
}
.interval-word.fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .interval-word { transition: none; }
}

.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 5px;
  border: 1px solid;
  white-space: nowrap;
}
.c-rad   { color: var(--rad);   border-color: rgba(47,213,152,.35); background: var(--rad-dim); }
.c-path  { color: var(--path);  border-color: rgba(106,183,255,.35); background: var(--path-dim); }
.c-data  { color: var(--coral); border-color: rgba(255,114,92,.35);  background: var(--coral-dim); }
.c-match { color: var(--corr); border-color: rgba(69,214,195,.4); background: var(--corr-dim); }
.c-gold  { color: var(--gold);  border-color: rgba(255,183,0,.4);  background: var(--gold-dim); }

mark { border-radius: 4px; padding: 1px 5px; font-weight: 600; }
.m-rad  { background: var(--rad-dim);  color: var(--rad);  box-shadow: inset 0 0 0 1px rgba(47,213,152,.3); }
.m-path { background: var(--path-dim); color: var(--path); box-shadow: inset 0 0 0 1px rgba(106,183,255,.3); }
.m-data { background: var(--coral-dim); color: var(--coral); box-shadow: inset 0 0 0 1px rgba(255,114,92,.3); }

.mono-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 26px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--match); color: #04120c; }
.btn-primary:hover { background: var(--match-bright); box-shadow: 0 6px 28px rgba(25, 169, 116, 0.35); }
.btn-ghost { border-color: var(--ink-line-strong); color: var(--text); background: rgba(233,238,244,0.03); }
.btn-ghost:hover { border-color: var(--match); background: var(--match-dim); }
.btn-sm { padding: 9px 18px; font-size: 0.88rem; }
.btn-lg { padding: 16px 34px; font-size: 1.05rem; }

/* Wordmark / brand ---------------------------------------------------------- */
.wordmark { font-family: "panorad", var(--font-head); letter-spacing: 0.01em; line-height: 1; }
.wm-pano { color: var(--text); }
.wm-rad { color: var(--match); }

.brand { display: flex; align-items: center; }
.brand .wordmark { font-size: 2.4rem; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px 0;
  transition: background 0.25s ease, padding 0.25s ease, border-color 0.25s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(11, 13, 16, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--ink-line);
  padding: 8px 0;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a:not(.btn) {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.15s ease;
}
.nav-links a:not(.btn):hover { color: var(--text); }
.nl-num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--match);
  margin-right: 6px;
  vertical-align: 2px;
}

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  padding: 168px 0 96px;
  overflow: hidden;
  background-image:
    radial-gradient(rgba(233, 238, 244, 0.05) 1px, transparent 1.4px);
  background-size: 26px 26px;
}
.hero::after { /* fade the dot grid out toward the bottom */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--bg) 96%);
  pointer-events: none;
}
.hero .shell { position: relative; z-index: 1; }

/* Axial CT behind the hero: a renal mass, pre-cropped to 0.847 with the lesion at
   60% across. That aspect sits mid-band against the panel's 0.67–0.94 range, so
   `cover` keeps the lesion between 60–63% across at every viewport width. The width
   cap holds the panel out of landscape on wide screens.
   The 130deg mask runs toward the bottom-right, making the top-left corner the most
   transparent point — that is where the headline sits, so the type stays clean while
   the anatomy resolves down and to the right. */
.hero-scan {
  position: absolute;
  top: 0;
  right: 0;
  width: min(52%, 940px);
  height: 100%;
  background: url("../images/hero_renalmass.jpg") center / cover no-repeat;
  mix-blend-mode: screen;
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(130deg, transparent 25%, rgba(0,0,0,0.55) 58%, #000 88%);
  mask-image: linear-gradient(130deg, transparent 25%, rgba(0,0,0,0.55) 58%, #000 88%);
  pointer-events: none;
}

.hero-top { max-width: 880px; }
.hero-top .mono-label { margin-bottom: 28px; }

/* Looser leading than the global 1.08 so the "dark" and "light" lines breathe.
   Scoped to the hero — section headings stay tight. */
.hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 1.3;
  margin-bottom: 34px;
}

.hero-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  align-items: flex-start;
}
.lead {
  color: var(--muted);
  font-size: 1.06rem;
  max-width: 52ch;
  flex: 1 1 380px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.tagline {
  flex-basis: 100%;
  font-size: 0.82rem;
  color: var(--match-bright);
  opacity: 0.8;
  transition: opacity 0.8s ease;
  min-height: 1.6em;
}
.tagline.fading { opacity: 0; }

/* Match diagram ------------------------------------------------------------ */
.match-demo {
  margin-top: 84px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr);
  align-items: center;
}

.report {
  background: var(--panel);
  border: 1px solid var(--ink-line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  font-size: 0.9rem;
}
.report-rad  { border-top: 3px solid var(--rad);  transform: rotate(-1.1deg); }
.report-path { border-top: 3px solid var(--path); transform: rotate(1.1deg); }

.report header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ink-line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
}
.rep-kind { font-weight: 500; letter-spacing: 0.08em; }
.report-rad .rep-kind { color: var(--rad); }
.report-path .rep-kind { color: var(--path); }
.rep-day {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(233,238,244,0.06);
  color: var(--text);
}

.rep-body {
  padding: 16px 18px;
  color: var(--muted);
  line-height: 1.7;
}
.rep-section {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text);
  margin-right: 6px;
}

.report footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 18px 16px;
  border-top: 1px dashed var(--ink-line);
}
.rep-nlp {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  margin-right: 4px;
}

.match-link { position: relative; height: 150px; }
.match-wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wire {
  fill: none;
  stroke-width: 1.6;
  stroke-dasharray: 6 5;
  animation: wire-flow 1.6s linear infinite;
}
.wire-rad { stroke: var(--rad); }
.wire-path { stroke: var(--path); animation-direction: reverse; }
@keyframes wire-flow { to { stroke-dashoffset: -22; } }

.match-node {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -8%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid rgba(69, 214, 195, 0.5);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 0 40px rgba(69, 214, 195, 0.22);
  white-space: nowrap;
}
.match-badge {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--corr);
  letter-spacing: 0.1em;
}
.match-fact {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
}


/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section { padding: 110px 0; }
.section-line { border-top: 1px solid var(--ink-line); background: var(--bg-alt); }

.sec-rail {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 46px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink-line);
}
.sec-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2rem;
  color: var(--match);
  line-height: 1;
}
.sec-name { font-size: 0.78rem; letter-spacing: 0.22em; color: var(--muted); }

.section h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  margin-bottom: 24px;
}
.section-sub { color: var(--muted); font-size: 1.02rem; max-width: 46ch; }
.section-sub + .section-sub { margin-top: 16px; }

/* Big editorial statement (01 problem) -------------------------------------- */
.statement {
  font-size: clamp(1.6rem, 3.4vw, 2.7rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 21em;
  margin-bottom: 72px;
}

.fact-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.fact { border-top: 1px solid var(--ink-line-strong); padding-top: 18px; }
.fact-num { font-size: 0.75rem; color: var(--match); display: block; margin-bottom: 10px; }
.fact p { color: var(--muted); font-size: 0.95rem; }
/* The lead reads as a mini-heading above the body, not a sentence prefix, so it
   gets separated by air rather than punctuation. */
.fact strong { color: var(--text); display: block; margin-bottom: 10px; font-weight: 600; }

/* Split layout (sticky head + content) --------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}
.split-head { position: sticky; top: 110px; }

/* Timeline (02 how it works) ------------------------------------------------- */
.timeline { list-style: none; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--rad) 0%, var(--path) 34%, var(--corr) 67%, var(--gold) 100%);
  opacity: 0.65;
}
.tl {
  position: relative;
  padding: 0 0 52px 42px;
}
.tl:last-child { padding-bottom: 0; }
.tl::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid;
}
.tl-rad::before { border-color: var(--rad); }
.tl-path::before { border-color: var(--path); }
.tl-match::before { border-color: var(--corr); box-shadow: 0 0 18px rgba(69,214,195,.6); }
.tl-gold::before { border-color: var(--gold); }

.tl-when {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 5px;
  margin-bottom: 14px;
}
.tl-rad .tl-when { color: var(--rad); background: var(--rad-dim); }
.tl-path .tl-when { color: var(--path); background: var(--path-dim); }
.tl-match .tl-when { color: var(--corr); background: var(--corr-dim); }
.tl-gold .tl-when { color: var(--gold); background: var(--gold-dim); }

.tl h3 { font-size: 1.3rem; margin-bottom: 10px; }
.tl p { color: var(--muted); font-size: 0.97rem; max-width: 56ch; }
.tl q { font-style: italic; color: var(--text); }
.tl-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--ink-line);
  font-size: 0.9rem;
}
.tl-note .chip { margin: 2px 2px 0 0; }

/* Roles (03 who it's for) ----------------------------------------------------- */
.roles { margin-top: 56px; display: grid; gap: 0; }
.role {
  display: grid;
  grid-template-areas:
    "head   visual"
    "points visual";
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  grid-template-rows: auto 1fr;
  gap: 18px 56px;
  align-items: start;
  padding: 44px 28px;
  border-top: 1px solid var(--ink-line);
  border-left: 3px solid transparent;
  transition: background 0.2s ease, border-left-color 0.2s ease;
}
.role-head { grid-area: head; }
.role-points { grid-area: points; }
.role-visual { grid-area: visual; align-self: center; }
.role:last-child { border-bottom: 1px solid var(--ink-line); }
.role-corr:hover  { background: linear-gradient(90deg, var(--corr-dim), transparent 60%);  border-left-color: var(--corr); }
.role-rad:hover   { background: linear-gradient(90deg, var(--rad-dim), transparent 60%);   border-left-color: var(--rad); }
.role-path:hover  { background: linear-gradient(90deg, var(--path-dim), transparent 60%);  border-left-color: var(--path); }
.role-gold:hover  { background: linear-gradient(90deg, var(--gold-dim), transparent 60%);  border-left-color: var(--gold); }

.role-tag { display: block; font-size: 0.72rem; letter-spacing: 0.2em; margin-bottom: 14px; }
.role-corr .role-tag { color: var(--corr); }
.role-rad .role-tag { color: var(--rad); }
.role-path .role-tag { color: var(--path); }
.role-gold .role-tag { color: var(--gold); }

.role-visual { margin: 0; }
.role-visual img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--ink-line-strong);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}
.role-visual figcaption {
  margin-top: 10px;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}

.role h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.role-points p { color: var(--muted); font-size: 0.98rem; }
.role-points p + p { margin-top: 14px; }

/* The leading row carries extra visual weight. Kept separate from the color
   variants so the emphasis and the accent can be assigned independently. */
.role-lead { padding-top: 52px; padding-bottom: 52px; }
.role-lead h3 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }

/* Ledger (capabilities) -------------------------------------------------------- */
.ledger { display: grid; }
/* The ledger now sits under the product screenshot as a map of the app's five
   screens, rather than standing alone as its own section. */
#the-product .ledger { margin-top: 84px; }
.ledger-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 4fr) minmax(0, 6fr);
  gap: 28px;
  align-items: baseline;
  padding: 26px 18px;
  border-top: 1px solid var(--ink-line);
  transition: background 0.15s ease;
}
.ledger-row:last-child { border-bottom: 1px solid var(--ink-line); }
.ledger-row:hover { background: rgba(233, 238, 244, 0.03); }
.lr-code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.dot { width: 7px; height: 7px; border-radius: 50%; }
.d-rad { background: var(--rad); }
.d-path { background: var(--path); }
.d-match { background: var(--corr); }
.d-gold { background: var(--gold); }
.d-coral { background: var(--coral); }
.ledger-row h3 { font-size: 1.08rem; font-weight: 600; }
.ledger-row p { color: var(--muted); font-size: 0.93rem; }

/* Annotated product shot -------------------------------------------------------- */
.prod-head { max-width: 760px; margin-bottom: 64px; }
.zoom-hint {
  display: inline-block;
  margin-left: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--match-bright);
  border: 1px dashed var(--border-strong, rgba(233,238,244,0.22));
  border-radius: 5px;
  padding: 2px 8px;
  vertical-align: 2px;
}
.annotated-shot { position: relative; }
.annotated-shot img {
  border: 1px solid var(--ink-line-strong);
  border-radius: 10px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}
.shot-callouts {
  position: absolute;
  top: -14px;
  left: 0; right: 0;
  height: 0;
  z-index: 2;
}
.callout {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 5px;
  background: var(--bg);
  border: 1px solid;
  white-space: nowrap;
}
.callout::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 75px;
  background: currentColor;
  opacity: 0.7;
}
.co-rad { color: var(--rad); border-color: rgba(47,213,152,.45); }
.co-path { color: var(--path); border-color: rgba(106,183,255,.45); }
.co-match { color: var(--corr); border-color: rgba(69,214,195,.5); }

/* Security readout ---------------------------------------------------------------- */
.readout {
  background: #0d1013;
  border: 1px solid var(--ink-line-strong);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.readout-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  font-size: 0.72rem;
  color: var(--muted);
  border-bottom: 1px solid var(--ink-line);
  background: rgba(233, 238, 244, 0.03);
}
.readout-bar .rdot { width: 10px; height: 10px; border-radius: 50%; background: rgba(233,238,244,0.14); }
.readout-bar .rdot:first-child { background: rgba(255, 114, 92, 0.6); }
.readout-bar .rdot:nth-child(2) { background: rgba(255, 183, 0, 0.55); }
.readout-bar .rdot:nth-child(3) { background: rgba(25, 169, 116, 0.65); }
.readout-bar .rdot:nth-child(3) { margin-right: 8px; }

.readout-body { padding: 26px 24px; font-size: 0.86rem; }
.readout-body p {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  color: var(--muted);
}
.readout-body b { color: var(--text); font-weight: 500; white-space: nowrap; }
.readout-body .ok { color: var(--match-bright); }
.readout-body .fill {
  flex: 1;
  border-bottom: 1px dotted var(--ink-line-strong);
  transform: translateY(-4px);
}

/* Resources -------------------------------------------------------------------------- */
#resources h2 { max-width: 22em; }
.resource-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.resource {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--ink-line);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.25s ease;
}
.resource:hover { transform: translateY(-6px); border-color: var(--match); }
.res-code {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 1;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--text);
  background: rgba(11, 13, 16, 0.8);
  border: 1px solid var(--ink-line-strong);
  padding: 4px 8px;
  border-radius: 5px;
}
.resource img {
  aspect-ratio: 17 / 21;
  object-fit: cover;
  object-position: top;
  border-bottom: 1px solid var(--ink-line);
}
.resource-body { padding: 18px 18px 20px; }
.resource h3 { font-size: 1rem; color: var(--text); margin-bottom: 6px; }
.resource p { color: var(--muted); font-size: 0.85rem; }

/* Final CTA ---------------------------------------------------------------------------- */
.cta-section {
  position: relative;
  text-align: center;
  overflow: hidden;
  padding: 150px 0 160px;
  border-top: 1px solid var(--ink-line);
  background: var(--bg-alt);
}

.cta-inner { position: relative; }
.cta-inner h2 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  margin-bottom: 20px;
  color: var(--match-bright);
}
.cta-inner > p {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 52ch;
  margin: 0 auto 36px;
}
.cta-inner .hero-ctas { justify-content: center; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  border-top: 1px solid var(--ink-line);
  padding-top: 56px;
  overflow: hidden;
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.footer-logo { width: 92px; mix-blend-mode: screen; }
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); font-size: 0.9rem; transition: color 0.15s ease; }
.footer-links a:hover { color: var(--text); }

.footer-legal {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--ink-line);
  padding-top: 20px;
  padding-bottom: 26px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.zoomable { cursor: zoom-in; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(5, 6, 8, 0.94);
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%;
  max-height: 92vh;
  border-radius: 8px;
  border: 1px solid var(--ink-line-strong);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8);
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 24px;
  background: none;
  border: 0;
  color: var(--text);
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}
.lightbox-close:hover { opacity: 1; }

/* ==========================================================================
   Scroll reveal + motion prefs
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .wire { animation: none; }
  .btn, .resource, .role, .ledger-row { transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1020px) {
  .split { grid-template-columns: 1fr; gap: 48px; }
  .split-head { position: static; }
  .match-demo {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 620px;
  }
  .report-rad, .report-path { transform: none; }
  .match-link { height: 130px; }
  .match-wire { display: none; }
  .match-link::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--rad), var(--corr), var(--path));
    opacity: 0.6;
  }
  .match-node { top: 50%; transform: translate(-50%, -50%); }
  .fact-row { grid-template-columns: 1fr; gap: 26px; }
  .role {
    grid-template-areas: "head" "points" "visual";
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 18px;
  }
  .role-visual { max-width: 560px; margin-top: 10px; }
  .ledger-row { grid-template-columns: 130px 1fr; }
  .ledger-row p { grid-column: 2; }
  .resource-grid { grid-template-columns: 1fr 1fr; }
}

/* The desktop nav needs 800px to lay out without overflowing its shell, so it
   collapses to the toggle at 840px rather than 720px. Below 800px and above the
   old 720px breakpoint the links used to overflow silently -- body has
   overflow-x:hidden, so it clipped instead of scrolling. */
@media (max-width: 840px) {
  .nav-toggle { display: flex; }
  .brand .wordmark { font-size: 2rem; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: rgba(11, 13, 16, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ink-line);
    padding: 12px 28px 20px;
  }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn) { padding: 10px 0; font-size: 1rem; }
  .nav-links .btn { margin-top: 10px; }
  .nav { background: rgba(11, 13, 16, 0.92); }
}

@media (max-width: 720px) {
  .section { padding: 76px 0; }
  .hero { padding-top: 140px; }
  .hero-logo { top: auto; bottom: 30%; right: -180px; opacity: 0.3; }

  .hero-sub { flex-direction: column; }
  .hero-scan { width: 100%; opacity: 0.08; }
  .match-demo { margin-top: 60px; }
  .shot-callouts { display: none; }
  .ledger-row { grid-template-columns: 1fr; gap: 8px; padding-left: 0; padding-right: 0; }
  .ledger-row p { grid-column: auto; }
  .resource-grid { grid-template-columns: 1fr; }
  .resource:nth-child(odd), .resource:nth-child(even) { transform: none; }
  .footer-legal { flex-direction: column; gap: 6px; }
}