/* ==========================================================================
   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; }
/* The `hidden` attribute must always win — otherwise an explicit `display`
   (e.g. .btn { display:inline-block }) overrides the UA [hidden] rule and the
   element stays visible. Applies to the demo modal's conditional buttons. */
[hidden] { display: none !important; }
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, 4rem);
  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); }
@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) ----------------------------------------------------- */
/* Accreditation callout (ACR DICOE) — a sober authority signal, not a badge.
   Left accent + mono eyebrow, styled like the other bordered panels. */
.accred {
  margin-top: 40px;
  max-width: 860px;
  background: var(--bg-alt);
  border: 1px solid var(--ink-line-strong);
  border-left: 3px solid var(--match);
  border-radius: 10px;
  padding: 26px 30px;
}
.accred-mark {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--match-bright);
  margin-bottom: 12px;
}
.accred h3 { font-size: 1.2rem; margin-bottom: 10px; }
.accred p { color: var(--muted); font-size: 0.98rem; max-width: 64ch; }
.accred a {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}

.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; }
}

/* ==========================================================================
   Demo request modal
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 24px;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 8, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-panel {
  position: relative;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--ink-line-strong);
  border-radius: 14px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  padding: 32px 34px 28px;
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.modal-close:hover { color: var(--text); }
.modal-panel h2 { font-size: 1.6rem; margin: 8px 0 8px; }
.modal-sub { color: var(--muted); font-size: 0.95rem; margin-bottom: 22px; }

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.field .opt {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 4px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--ink-line-strong);
  border-radius: 8px;
  padding: 11px 13px;
}
.field textarea { resize: vertical; min-height: 76px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--match);
  box-shadow: 0 0 0 3px var(--match-dim);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--coral); }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; }

/* Off-screen honeypot — present in layout (bots fill it) but invisible to humans.
   Not display:none, which sophisticated bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.modal-error {
  color: var(--coral);
  font-size: 0.88rem;
  margin-bottom: 14px;
}
#demoForm .btn-primary { width: 100%; }
#demoForm .btn-primary[disabled] { opacity: 0.6; cursor: default; }
.modal-privacy {
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
  margin-top: 14px;
}
.modal-privacy a { color: var(--match-bright); }

#demoSuccess { text-align: center; padding: 12px 0 6px; }
#demoSuccess h2 { margin-bottom: 8px; }
#demoSuccess .btn { width: 100%; margin-top: 8px; }
.success-check {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2rem;
  color: var(--match-bright);
  background: var(--match-dim);
  border: 1px solid rgba(47, 213, 152, 0.4);
}

@media (max-width: 520px) {
  .modal-panel { padding: 28px 22px 24px; }
  .modal-panel h2 { font-size: 1.35rem; }
}

/* ==========================================================================
   Content / resource pages (pillar + cluster articles, /resources hub)
   ========================================================================== */

/* Article shell — narrower measure than the marketing shell for readability,
   with top padding that clears the fixed nav. */
/* Each content page carries an accent color (defaults to brand green); the
   eyebrow, h2 marks, list bullets, and callouts all pick it up via --accent. */
.doc { padding: 128px 0 96px; --accent: var(--match-bright); }
.doc.accent-teal  { --accent: var(--corr); }
.doc.accent-blue  { --accent: var(--path); }
.doc.accent-gold  { --accent: var(--gold); }
.doc.accent-coral { --accent: var(--coral); }
.doc-shell { max-width: 900px; margin: 0 auto; padding: 0 28px; }

/* Breadcrumb */
.crumbs {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 26px;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { margin: 0 8px; opacity: 0.5; }

/* Article header */
.doc-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.doc h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 20px;
}
.doc-lead {
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 14px;
}
.doc-byline {
  font-size: 0.86rem;
  color: var(--muted);
  padding-bottom: 30px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--ink-line);
}

/* Prose */
.prose > * + * { margin-top: 22px; }
.prose h2 {
  font-size: 1.55rem;
  margin-top: 52px;
  scroll-margin-top: 96px;
  position: relative;
  padding-left: 18px;
}
.prose h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 4px;
  border-radius: 2px;
  background: var(--accent);
}
.prose li::marker { color: var(--accent); }
.prose h3 {
  font-size: 1.2rem;
  margin-top: 36px;
  scroll-margin-top: 96px;
}
.prose p, .prose li { color: #c5cdd6; font-size: 1.05rem; line-height: 1.7; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--match-bright); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(47,213,152,.4); }
.prose a:hover { text-decoration-color: var(--match-bright); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 8px; }
.prose blockquote {
  border-left: 3px solid var(--match);
  background: var(--bg-alt);
  padding: 16px 22px;
  border-radius: 0 8px 8px 0;
  color: var(--muted);
  font-style: italic;
}
.prose blockquote p { color: var(--muted); }

/* Key-takeaway callout (reuses the accred look).
   Named .keypoint — NOT .callout — because the homepage already defines a
   monospace, nowrap .callout; reusing that name made this box inherit both. */
.keypoint {
  margin: 34px 0;
  background: var(--bg-alt);
  border: 1px solid var(--ink-line-strong);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 22px 26px;
}
.keypoint .keypoint-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.keypoint p { margin: 0; color: #c5cdd6; font-family: var(--font-body); white-space: normal; }

/* Events line in the homepage CTA */
.cta-event { margin-top: 24px; }
.cta-event a { text-decoration: underline; text-underline-offset: 3px; }

/* Prose tables (e.g. ACR requirement → PATHFINDER mapping) */
.prose table { width: 100%; border-collapse: collapse; margin: 30px 0; font-size: 0.98rem; }
.prose th, .prose td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--ink-line); vertical-align: top; }
.prose thead th { color: var(--text); font-family: var(--font-head); font-size: 0.92rem; border-bottom-color: var(--ink-line-strong); }
.prose tbody td { color: #c5cdd6; line-height: 1.55; }
.prose td:first-child { color: var(--text); font-weight: 600; width: 40%; }
.prose .tick { color: var(--match-bright); font-weight: 700; margin-right: 6px; }
.prose .table-wrap { overflow-x: auto; }

/* FAQ (details/summary) */
.faq { margin-top: 18px; border-top: 1px solid var(--ink-line); }
.faq details { border-bottom: 1px solid var(--ink-line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 34px 20px 0;
  position: relative;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px; top: 18px;
  font-size: 1.4rem;
  color: var(--muted);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > p { color: #c5cdd6; padding: 0 0 22px; line-height: 1.7; margin: 0; }

/* Bottom CTA */
.doc-cta {
  margin-top: 64px;
  text-align: center;
  background: var(--bg-alt);
  border: 1px solid var(--ink-line-strong);
  border-radius: 14px;
  padding: 44px 32px;
}
.doc-cta h2 { font-size: 1.6rem; margin-bottom: 12px; }
.doc-cta p { color: var(--muted); max-width: 48ch; margin: 0 auto 24px; }

/* "Keep reading" related links */
.doc-related { margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--ink-line); }
.doc-related .mono-label { margin-bottom: 18px; }

/* Resource hub grid */
.res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.res-card {
  display: block;
  background: var(--bg-alt);
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  padding: 26px 26px 28px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.res-card:hover { border-color: var(--ink-line-strong); transform: translateY(-2px); }
.res-card .res-kind {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--match-bright);
}
.res-card h3 { font-size: 1.2rem; margin: 12px 0 10px; color: var(--text); }
.res-card p { color: var(--muted); font-size: 0.96rem; line-height: 1.6; }
.res-card .res-more { display: inline-block; margin-top: 14px; color: var(--match-bright); font-weight: 600; font-size: 0.92rem; }
.res-card.soon { opacity: 0.6; pointer-events: none; }
.res-card.soon .res-kind { color: var(--muted); }

/* ==========================================================================
   Content-page figures — on-brand diagrams reusing the semantic palette
   (green = radiology, blue = pathology, coral = the miss)
   ========================================================================== */
.fig { margin: 36px 0; }
.fig figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  text-align: center;
}
.fig-svg { width: 100%; height: auto; display: block; }
.fig-svg .s-kind { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; }
.fig-svg .s-body { font-family: var(--font-body); font-size: 14px; }
.fig-svg .s-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }

/* Track-changes diff (resident prelim -> attending's signed report) */
.diff { background: var(--bg-alt); border: 1px solid var(--ink-line-strong); border-radius: 10px; overflow: hidden; }
.diff-head {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  padding: 12px 18px; border-bottom: 1px solid var(--ink-line);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
}
.diff-head .dh-kind { color: var(--accent); }
.diff-head .dh-meta { color: var(--muted); }
.prose .diff-body { margin: 0; padding: 18px; font-size: 1rem; line-height: 2; color: #c5cdd6; }
.prose .diff-body .diff-sec { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--muted); margin-right: 4px; }
.prose .diff-body del { color: var(--coral); text-decoration: line-through; text-decoration-color: rgba(255, 114, 92, 0.75); }
.prose .diff-body ins {
  color: var(--rad); text-decoration: none; font-weight: 600;
  background: var(--rad-dim); border-radius: 3px; padding: 1px 5px;
  box-shadow: inset 0 0 0 1px rgba(47, 213, 152, 0.3);
}
.diff-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; margin-top: 12px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.diff-legend b { font-weight: 500; }
.diff-legend .lg-cut { color: var(--coral); }
.diff-legend .lg-add { color: var(--rad); }

/* Coverage comparison — narrow subspecialty vs department-wide */
.cov { display: grid; gap: 14px; }
.cov-row { background: var(--bg-alt); border: 1px solid var(--ink-line); border-radius: 10px; padding: 16px 18px; }
.cov-row.is-bad  { border-left: 3px solid var(--coral); }
.cov-row.is-good { border-left: 3px solid var(--accent); }
.cov-label { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; }
.cov-row.is-bad .cov-label  { color: var(--coral); }
.cov-row.is-good .cov-label { color: var(--accent); }
.cov-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip.c-off { color: var(--muted); border-color: var(--ink-line-strong); background: transparent; opacity: 0.45; }
.chip.c-on  { color: var(--accent); border-color: currentColor; background: rgba(233, 238, 244, 0.05); }