/* static-base starter — self-hosted only, mobile-first. No external fonts or trackers. */

/* ---- design tokens — Probentis "Warm Confidence" (design.md is the source of truth) ---- */
:root {
  /* canonical brand tokens (match design.md) */
  --primary:      #034A8C;   /* Probentis Blue — the client's own stated value (concept deck + r1) */
  --primary-deep: #022F5A;   /* headings, hovers, dark fills */
  --tint:          #DCEAF7;  /* client's light blue tint */
  --surface:      #FBF8F4;   /* warm off-white page canvas */
  --surface-2:    #F2EDE6;   /* elevated cards / sections */
  --ink:          #1A1A20;   /* primary text — ~16:1 on --surface */
  --ink-2:        #54505A;   /* secondary text (verify AA in Block 3) */
  --border:       #E4DDD2;   /* hairline borders */

  /* starter aliases → Probentis (keeps the base CSS working) */
  --paper:      var(--surface);
  --brand:      var(--primary);
  --brand-ink:  #ffffff;      /* white on --primary ≈ 8:1 (AA) */
  --brand-soft: var(--tint);      /* light blue tint — use --tint */
  --ink-soft:   var(--ink-2);
  --focus:      var(--primary-deep);
  --white:      #ffffff;      /* explicit white token for statement cards (added in Step 4) */
  --media-bg:   #05070d;      /* dark background used behind embedded offline media */
  --elev-shadow: 0 8px 20px rgba(3,74,140,0.08); /* elevated soft shadow token for lifted chips */

  /* structure (provisional — finalise type/spacing in Block 3) */
  --radius: 12px;
  --radius-lg: 20px; /* deeper radius used for the large deep-blue cards */
  --curve-vert: 50%; /* vertical radius component used for the copy-panel convex curve */
  --measure: 65ch;
  --nav-h: 74px; /* header / pillnav baseline height used for anchor offsets */
  --section-pad-y: clamp(1.5rem, 4vw, 3rem);
  --space: clamp(1rem, 2.5vw, 1.75rem);
  --font: "Aptos", "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

/* ---- skip link ---- */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 100;
  background: var(--brand);
  color: var(--brand-ink);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.5rem; }

/* ---- visible focus everywhere ---- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---- layout container ---- */
.wrap {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--space);
}

main { display: block; }

section { padding-block: var(--section-pad-y); }

h1, h2, h3 { line-height: 1.2; color: var(--ink); }
h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 0.5rem; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin: 0 0 1rem; }
h3 { font-size: 1.2rem; margin: 0 0 0.4rem; }

p { max-width: var(--measure); }
.lead { font-size: 1.2rem; color: var(--ink-soft); }

/* ---- header + nav: pill bar on desktop, hamburger (details/summary) on mobile ---- */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.75rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.1rem;
}
.brand svg { width: 28px; height: 28px; display: block; }

/* nav as a no-JS details/summary disclosure */
.nav { position: relative; }
.nav > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
}
.nav > summary::-webkit-details-marker { display: none; }
.nav > summary .bars { width: 18px; height: 2px; background: var(--ink); position: relative; }
.nav > summary .bars::before,
.nav > summary .bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--ink);
}
.nav > summary .bars::before { top: -6px; }
.nav > summary .bars::after { top: 6px; }

.nav-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: absolute;
  right: 0;
  min-width: 200px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(17, 33, 29, 0.12);
}
.nav-list a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
}
.nav-list a:hover { background: var(--brand-soft); }

/* ---- hero ---- */
.hero { background: var(--surface); }
.hero-grid { display: grid; gap: var(--space); }
.hero h1 { color: var(--ink); }

/* the media-frame recipe: fixed aspect box, image cover-fits + positions inside */
.media-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--brand-soft);
}
.media-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---- buttons / CTA ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 1rem;
}
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: #094a3e; }
.btn-secondary {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}
.btn-secondary:hover { background: var(--brand-soft); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }

/* ---- feature cards ---- */
.cards { display: grid; gap: var(--space); }
.card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.card p { color: var(--ink-soft); margin-bottom: 0; }

/* ---- contact form ---- */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2rem);
  max-width: 560px;
}
.field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.field label { font-weight: 600; }
.field input,
.field textarea {
  font: inherit;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }

/* honeypot: hidden from people + assistive tech, still in the DOM for the bot trap */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- footer ---- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-block: 2rem;
}
.site-footer p { color: var(--ink-soft); margin: 0; }
.site-footer a { color: var(--brand); }

/* ---- 404 ---- */
.notfound { text-align: center; padding-block: clamp(3rem, 10vw, 6rem); }

/* ---- tablet ---- */
@media (min-width: 768px) {
  .nav > summary { display: none; }            /* desktop: show the bar, hide the toggle */
  .nav-list {
    position: static;
    flex-direction: row;
    margin: 0;
    padding: 0.3rem;
    min-width: 0;
    box-shadow: none;
    background: var(--surface);
    gap: 0.25rem;
  }
  .hero-grid { grid-template-columns: 1.1fr 1fr; align-items: center; }
  .cards { grid-template-columns: repeat(3, 1fr); }
}

/* the disclosure is always open on wide screens (CSS only, no JS) */
@media (min-width: 768px) {
  .nav[open] .nav-list,
  .nav:not([open]) .nav-list { display: flex; }
}

/* ---- large desktop ---- */
@media (min-width: 1440px) {
  body { font-size: 1.1rem; }
  .wrap { max-width: 1240px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   PROBENTIS COMPONENT LAYER  (Block 3 key page)
   Everything below resolves to the tokens above — no new hard-coded brand colours.
   Model: the DigiPredict .section / .section-inner / .section-header shell.
   ============================================================ */

/* smooth anchor scroll; nav offset so anchors clear the sticky bar */
html { scroll-behavior: smooth; }
:where(section, [id]) { scroll-margin-top: var(--nav-h); }

/* Section shell: make each page section at-least one viewport tall (svh) and centred under the sticky nav */
main > section {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  /* padding remains token-driven via .section / section rules */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- shared section shell (DigiPredict pattern) ---- */
.section { padding-block: var(--section-pad-y); background: var(--surface); }
/* r3 5a: sections alternate light coffee / dark coffee. The .section--alt class is the
   mechanism; the #solution arm carries it from CSS because index.html belongs to the next
   unit and this section must be measured dark in this one. Same token, so no conflict
   once the class lands. */
.section--alt, #solution { background: var(--surface-2); }
.section-inner { max-width: 1180px; margin-inline: auto; padding-inline: var(--space); display: block; }

/* Fix: ensure this section's inner container doesn't shrink as a flex item */
#solution .section-inner { width: 100%; }
/* Same flex-item trap, opposite symptom: How It Works holds a deliberately 900px-wide diagram in a
   horizontally scrolling wrapper. As a flex item nothing in that chain could shrink below its content,
   so the whole page scrolled sideways on a phone (body 958px against a 390px window). width:100% plus
   min-width:0 down the chain lets the wrapper take the window's width and scroll the diagram inside
   itself, which is what it was built to do. */
#how-it-works .section-inner { width: 100%; min-width: 0; }
#how-it-works .hiw-stage, #how-it-works .hiw-stagewrap, #how-it-works .hiw-svgscroll { min-width: 0; }
.section-header { margin-bottom: calc(var(--space) * 0.6); max-width: 62ch; }
.section-title {
  font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.1; color: var(--primary-deep); margin: 0 0 0.6rem; max-width: 20ch;
}
.section-lede { font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.65; color: var(--ink-2); margin: 0; }
.section-intro { font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.65; color: var(--ink-2); margin: 0; }

/* ---- Problem section (Step 4) ---- */
#problem .problem-stats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: clamp(0.6rem, 1.2vw, 1rem); }
#problem .stat-row { display: flex; gap: clamp(0.8rem, 2.2vw, 1.2rem); align-items: stretch; }
#problem .stat-left {
  flex: 0 0 32%;
  background: var(--tint);
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  padding: clamp(0.75rem,1.8vw,1rem);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align:center;
  color: var(--primary-deep);
}
#problem .stat-number { font-weight: 700; font-size: clamp(1.6rem, 5.2vw, 2.6rem); line-height: 1; }
#problem .stat-caption { font-size: 0.9rem; margin-top: 0.35rem; color: var(--primary); }
#problem .stat-right {
  flex: 1; background: var(--white); border: 2px solid var(--primary);
  border-radius: var(--radius); padding: clamp(1rem,2.4vw,1.25rem);
  display:flex; align-items:center; color: var(--primary);
  /* r3 6a: larger text in the Problem boxes, per CEO feedback */
  font-size: clamp(1.05rem,1.6vw,1.15rem);
}

#problem .problem-insights { display: flex; gap: clamp(0.9rem, 2.5vw, 1.2rem); margin-top: clamp(0.9rem, 1.8vw, 1.25rem); list-style: none; padding: 0; }
#problem .problem-insights li {
  flex: 1; background: var(--primary); color: var(--brand-ink); border-radius: var(--radius-lg);
  padding: clamp(1.1rem,2.6vw,1.4rem); display:flex; align-items:center; justify-content:center;
  text-align:center; font-weight:600;
  /* r3 6a: floor equals the inherited body size, so nothing shrinks anywhere */
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  /* hover emphasis: lift + shadow, and a scroll-reveal (fade + rise) as they enter the viewport */
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(3, 74, 140, 0.12);
}
/* hover lift — more specific than .reveal.in so it always wins */
#problem .problem-insights li.reveal.in:hover,
#problem .problem-insights li:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(3, 74, 140, 0.22);
}
/* scroll-reveal: cards fade + rise in as they enter the viewport */
#problem .problem-insights li.reveal {
  opacity: 0;
  transform: translateY(20px);
}
#problem .problem-insights li.reveal.in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* stagger the reveal so the cards cascade in */
#problem .problem-insights li.reveal:nth-child(1) { transition-delay: 0.05s; }
#problem .problem-insights li.reveal:nth-child(2) { transition-delay: 0.15s; }
#problem .problem-insights li.reveal:nth-child(3) { transition-delay: 0.25s; }

/* the stat rows join the same cascade (r3 4b): they had no reveal while the blue cards below
   them did, which is part of why the section read as flat. Same pattern, same delays, so the
   section now cascades top to bottom. Reduced-motion never sees these: the observer returns
   early and the classes are never added. */
#problem .stat-row.reveal {
  opacity: 0;
  transform: translateY(20px);
}
#problem .stat-row.reveal.in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#problem .stat-row.reveal:nth-child(1) { transition-delay: 0.05s; }
#problem .stat-row.reveal:nth-child(2) { transition-delay: 0.15s; }
#problem .stat-row.reveal:nth-child(3) { transition-delay: 0.25s; }

/* Responsive: stack cards on small screens */
@media (max-width: 760px) {
  #problem .stat-row { flex-direction: column; }
  #problem .stat-left { flex-basis: auto; width: 100%; }
  #problem .problem-insights { flex-direction: column; }
  #problem .stat-number { font-size: clamp(1.4rem, 8vw, 2rem); }
}

/* ---- Problem section: hover count-up (r5, 2026-08-24 — replaces the text-scramble signed-off
   2026-08-07; client asked for numbers counting up from 0 instead of symbols cycling). The
   cursor light had no cursor on touch or in a screenshot, so its fallback parked it dead centre
   over the white stat boxes and it read as a static blue dot (already removed, r3 item 5b).
   .stage stays as the positioning mount point. */
#problem .stage { position: relative; }
#problem .countup { display: inline-block; white-space: nowrap; }

/* reduced-motion: no count-up animation; final values always visible */
@media (prefers-reduced-motion: reduce) {
  /* no Ken Burns / cursor drift on the Panel 1 photograph — a static frame */
  .solution-panel.kb .panel-photo img { animation: none; }
  .panel-photo img { transform: none; transition: none; }
  /* team portrait stays put */
  .team-card:hover .team-card-photo { transform: none; }
}

/* ---- draft / placeholder markers (client review can't mistake these for final) ---- */
.draft-badge {
  display: inline-flex; align-items: center; gap: 0.45em; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.03em; color: var(--ink-2); background: var(--surface-2);
  border: 1px dashed var(--border); border-radius: 999px; padding: 0.35em 0.8em; margin-top: 1.4rem;
}
.draft-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex: none; }
/* r3 5a collision: a --surface-2 badge disappears on a dark-alternating section */
.section--alt .draft-badge, #solution .draft-badge { background: var(--surface); }
[data-placeholder] { position: relative; }
.disclaimer { font-size: 12.5px; color: var(--ink-2); font-style: italic; margin-top: 1rem; }

/* ---- pill CTA (shared) ---- */
.pill-cta {
  display: inline-flex; align-items: center; gap: 0.5em; font-weight: 700; font-size: 0.95rem;
  text-decoration: none; border-radius: 999px; padding: 0.7rem 1.4rem; cursor: pointer; border: 2px solid transparent;
}
.pill-cta--primary { background: var(--primary); color: #fff; }
.pill-cta--primary:hover { background: var(--primary-deep); }
.pill-cta--ghost { color: var(--primary); border-color: var(--primary); background: transparent; }
.pill-cta--ghost:hover { background: var(--brand-soft); }

/* ============================================================
   ELASTIC PILL NAV  (donor: elastic-pill-nav — retokened, vanilla)
   ============================================================ */
.pillnav {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.55rem clamp(0.9rem, 3vw, 1.6rem);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--primary);
}
.pillnav .brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.pillnav .brand img { height: 22px; width: auto; display: block; }
.pillnav .brand:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.pillnav .navwrap { position: relative; flex: 1; min-width: 0; display: flex; }
.pillnav nav { position: relative; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.pillnav nav::-webkit-scrollbar { display: none; }
.pillnav nav a {
  position: relative; z-index: 1; color: var(--ink-2); text-decoration: none;
  font-size: 0.85rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
  padding: 0.5rem 0.85rem; border-radius: 999px; transition: color .3s ease;
  border: 2px solid transparent;
}
.pillnav nav a:hover { color: var(--primary-deep); }
.pillnav nav a[aria-current="true"] { color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); background: transparent; }
.pillnav nav a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* `.pillnav nav a` (0,1,2) out-specifies `.pill-cta--primary` (0,1,0), so the drawer CTA took
   --ink-2 grey on its --primary fill: 1.13:1, a serious WCAG AA failure on the one CTA a phone
   user is given. It hides from a default-state scan because it only renders once the menu is
   open. The `border-bottom: 0` reset on .drawer-cta below shows this bleed was already known;
   the colour was the property that got missed. Hover needed it too, or it went blue-on-blue.
   Restored here rather than by adding :not() to the layout rules, which the drawer CTA wants. */
.pillnav nav a.pill-cta--primary,
.pillnav nav a.pill-cta--primary:hover { color: #fff; }
.pillnav .nav-cta { flex: none; }

/* hamburger — hidden on desktop, the menu affordance on handhelds */
.nav-toggle { display: none; }
.drawer-cta { display: none; }

@media (max-width: 819px) {
  .pillnav { gap: 0.5rem; }
  .nav-toggle {
    display: inline-flex; margin-left: auto; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none; cursor: pointer;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  }
  .nav-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .nav-toggle-bars { display: grid; gap: 5px; }
  .nav-toggle-bars i { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--primary-deep); transition: transform .25s ease, opacity .2s ease; }
  .pillnav.nav-open .nav-toggle-bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .pillnav.nav-open .nav-toggle-bars i:nth-child(2) { opacity: 0; }
  .pillnav.nav-open .nav-toggle-bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* the nav becomes a full-width dropdown drawer (grid-rows collapse trick, animatable) */
  .pillnav .navwrap {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 79;
    display: grid; grid-template-rows: 0fr; overflow: hidden;
    background: color-mix(in srgb, var(--surface) 97%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 40px -22px rgba(2,47,90,.5);
    transition: grid-template-rows .28s ease;
  }
  .pillnav.nav-open .navwrap { grid-template-rows: 1fr; }
  .pillnav .navwrap > nav { min-height: 0; flex-direction: column; gap: 0; overflow: hidden; padding: 0.4rem clamp(0.9rem, 4vw, 1.4rem) 1.1rem; }
  .pillnav nav a {
    font-size: 1.05rem; padding: 0.9rem 0.4rem; border-radius: 10px; white-space: normal;
    border-bottom: 1px solid var(--border);
  }
  .pillnav nav a[aria-current="true"] { color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); background: transparent; }
  .drawer-cta { display: inline-flex; justify-content: center; margin-top: 0.9rem; border-bottom: 0; }
  .pillnav .nav-cta { display: none; }
}

/* ============================================================
   HERO  (full-bleed interactive scan — probe-reveal, cursor + touch)
   ============================================================ */
.hero-sec {
  position: relative; isolation: isolate; overflow: hidden; background: #071019;
  min-height: clamp(540px, 84svh, 860px); display: flex; align-items: center;
}
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
/* watermark layer — BEHIND the veil, never inside the scan signal; biased into the clear (scan) zone */
.hero-watermark {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; opacity: 0;
  transition: opacity .5s ease; pointer-events: none;
}
.hero-sec.wm-on .hero-watermark { opacity: 0.16; }
/* biased further right so the left legibility scrim never clips the wordmark's first letters */
.hero-watermark img { width: min(44%, 600px); height: auto; filter: brightness(0) invert(1); transform: translateX(46%); }
.hero-veil { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; touch-action: pan-y; }
/* legibility scrim: warm surface bleeding in from the copy side, clearing over the scan */
.hero-scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(96deg,
    var(--surface) 0%, var(--surface) 20%,
    color-mix(in srgb, var(--surface) 72%, transparent) 40%,
    transparent 66%);
}
.hero-sec.fine { cursor: none; }
.hero-sec.fine a, .hero-sec.fine button { cursor: pointer; }   /* keep a real cursor on controls */

.hero-inner { position: relative; z-index: 4; width: 100%; }
.hero-copy { max-width: 35rem; padding-block: clamp(2rem, 6vw, 3.5rem); }
.hero-copy .eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--primary); margin: 0 0 1em;
}
.hero-copy .eyebrow::before {
  content: ""; flex: none; width: 22px; height: 2px; border-radius: 2px; background: var(--primary);
}
.hero-copy h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.6rem); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.02; color: var(--primary-deep); margin: 0 0 0.5em;
}
.hero-copy .lead { font-size: clamp(1.05rem, 1.9vw, 1.28rem); line-height: 1.5; color: var(--ink-2); margin: 0 0 0.9em; max-width: 40ch; }
/* r7: investor/urologist outreach line, sits between the lead and the CTA row */
.hero-copy .hero-invite { font-size: clamp(0.92rem, 1.4vw, 1rem); line-height: 1.5; color: var(--ink-soft); margin: 0 0 1.4em; max-width: 38ch; }
.hero-copy .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.hero-hint {
  position: absolute; z-index: 6; bottom: 14px; right: 16px;
  font-size: 11px; letter-spacing: 0.05em; color: #cfe0f2; opacity: 0.9; text-transform: uppercase;
  pointer-events: none; text-shadow: 0 1px 8px rgba(0,0,0,.7); transition: opacity .5s ease;
}
/* handhelds: copy sits at the bottom over a vertical scrim; scan reads clean up top */
@media (max-width: 819px) {
  .hero-sec { align-items: flex-end; min-height: clamp(560px, 88svh, 760px); }
  .hero-scrim {
    background: linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--surface) 62%, transparent) 44%,
      var(--surface) 78%);
  }
  .hero-watermark img { transform: translateY(-14%); }
  /* copy is at the bottom on mobile, so guide the tap from the top of the clear scan zone */
  .hero-hint { top: 16px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
}
@media (min-width: 820px) {
  .hero-copy { max-width: 33rem; }
}

/* ============================================================
   HOW IT WORKS + DEVICE  (donor: probentis-spectrometer)
   ============================================================ */
/* R1: keep how-it-works and team to one window — tighter vertical padding scoped to
   these two sections only; the global --section-pad-y is untouched for every other section. */
#how-it-works, #team { padding-block: clamp(1rem, 1.5vw, 1.5rem); }
.hiw-stage { position: relative; margin-top: 0.5rem; }
.hiw-stagewrap {
  border: 1px solid var(--border); border-radius: 18px; background: var(--surface-2);
  padding: clamp(0.75rem, 2vw, 1.5rem); overflow: hidden;
}
/* caption removed per R2: client steps act as the diagram description. */
.hiw-svg { width: 100%; height: auto; max-height: min(30svh, 330px); display: block; }
/* on phones the 1280-wide diagram is otherwise crushed → render it larger and scroll/pan it (JS pans to
   the active step). Font-size is in the SVG's own coordinate space, so this enlarges labels with no new overlap. */
.hiw-svgscroll { overflow-x: auto; overflow-y: hidden; }
.hiw-svgscroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
@media (max-width: 819px) {
  .hiw-svg { min-width: 900px; max-height: none; }
  .hiw-svgscroll { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; padding-bottom: 4px; }
}
.hiw-detail-hint { text-align: right; font-size: 11px; color: var(--ink-2); margin-top: 0.2rem; line-height: 1.2; }

/* spectrometer SVG label tokens — enlarged for legibility (the SVG scales down to ~0.86× at
   its widest, so these render a few px smaller than authored) */
.hiw-svg .lbl { fill: var(--ink); font-size: 20px; font-weight: 600; }
.hiw-svg .lbl-sm { fill: var(--ink-2); font-size: 16px; }
.hiw-svg .lbl-axis { fill: var(--ink-2); font-size: 14px; }
.hiw-svg [data-detail] { cursor: help; }
.hiw-svg .grow { transform-box: fill-box; transform-origin: 50% 100%; }

/* rail: step chips + controls */
.hiw-rail { display: flex; align-items: center; justify-content: center; gap: 0.9rem; flex-wrap: wrap; margin-top: 0.9rem; }
/* the steps are whole sentences, so they stack and wrap: nowrap made each one a ~670px line that
   bled off both edges of a 390px phone (the page's only horizontal overflow — QA blocker). */
.hiw-steps { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; }
.hiw-step {
  appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 14px; font-weight: 600; border-radius: 999px; cursor: pointer;
  transition: all .25s ease; white-space: normal; text-align: left; max-width: 100%;
  /* Jay, 2026-08-07: the copy sat hard against the left boundary of each step box.
     A larger left pad (extra room for the number + sentence) rebalances the chip. */
  padding: 0.5rem 0.95rem 0.5rem 1.3rem;
}
.hiw-step .n { margin-right: 0.55em; }
.hiw-step:hover { border-color: var(--primary); color: var(--primary-deep); }
.hiw-step.active { border-color: var(--primary); background: var(--brand-soft); color: var(--primary-deep); transform: translateY(-4px); box-shadow: var(--elev-shadow); }
.hiw-step:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.hiw-step .n { color: var(--primary); font-weight: 700; }
.hiw-ctrls { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; justify-content: center; }
/* two always-visible scan-result buttons (before the Play/Replay button) */
.hiw-scan { display: inline-flex; gap: 0.4rem; }
.hiw-btn.scan { display: inline-flex; align-items: center; gap: 0.45em; }
.hiw-btn.scan .scan-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset; }
.hiw-btn.scan .scan-dot--c { background: #c0304a; }
.hiw-btn.scan .scan-dot--s { background: #2f8f6c; }
.hiw-btn.scan.active { border-color: var(--primary); background: var(--brand-soft); color: var(--primary-deep); }
.hiw-btn {
  appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 0.5rem 0.9rem; border-radius: 999px; cursor: pointer; transition: all .2s ease;
}
.hiw-btn:hover { border-color: var(--primary); background: var(--brand-soft); }
.hiw-btn.primary { border-color: var(--primary); background: var(--brand-soft); color: var(--primary-deep); }
.hiw-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Step 10 — ≥1100px: the diagram and the step list sit side by side. The diagram panel
   (hiw-stagewrap) takes ~62%, the step list + controls (hiw-rail) take ~38%, so the section
   height becomes the taller of the two columns instead of their sum and the diagram cap can
   rise back up. Vertically centred so the two columns read as one balanced panel.
   Below 1100px the stacked single-column layout is untouched. */
@media (min-width: 1100px) {
  .hiw-stage {
    display: grid;
    grid-template-columns: minmax(0, 70fr) minmax(0, 30fr);
    gap: var(--space);
    /* stretch, not centre: the step list is the taller column, so a centred diagram panel
       leaves dead air above and below it. Stretching makes the two columns read as one
       balanced block, with the drawing centred inside its own panel. */
    align-items: stretch;
  }
  .hiw-stagewrap { display: flex; flex-direction: column; justify-content: center; }
  .hiw-svg { max-height: min(46svh, 470px); }
  .hiw-rail {
    display: flex; flex-direction: column; align-items: stretch; gap: 1rem; margin-top: 0;
  }
  .hiw-steps { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; }
  .hiw-step { width: 100%; min-height: 44px; white-space: normal; text-align: left; }
  .hiw-ctrls { justify-content: flex-start; }
}

/* ---- brand-film embed (Ride the Light, r7) ---- */
/* margin:0 is load-bearing. A <figure> carries a UA default `margin: 1em 40px`, so the film was giving
   up 80px of width at every breakpoint — 265px of an available 344px on a phone. The panel is already
   centred and .panel-visual supplies the gap, the same way panels 1 and 2 get theirs. */
.solution-media { margin: 0; width: 100%; }
.solution-video {
  display: block; width: 100%; aspect-ratio: 16 / 9; height: auto;
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--media-bg);
}
.solution-media figcaption { font-size: 12.5px; color: var(--ink-2); margin-top: 0.7rem; }

/* ---- solution panels (Our Solution) ----
   Two-column panels: copy on the left (~40%) in a light --surface panel (the section itself
   now alternates to dark coffee, and a --surface-2 fill would vanish into it) with a single
   convex outward curve on the right edge; visual on the right, vertically centred. All
   measurements resolve to tokens or viewport-relative units. */
/* click-through tabs: one panel at a time, so the section fits one screen and the film keeps its size */
.sol-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.2rem 0 1rem; }
.sol-tab {
  font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  border: 2px solid var(--border); background: transparent; color: var(--ink-2);
  border-radius: 999px; padding: 0.45rem 1rem; display: inline-flex; align-items: center; gap: 0.5rem;
}
.sol-tab .n {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 999px;
  background: var(--tint); color: var(--primary); font-size: 0.75rem;
}
.sol-tab.is-active { border-color: var(--primary); color: var(--primary-deep); }
.sol-tab.is-active .n { background: var(--primary); color: var(--white); }
.sol-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* r3 5a collision: the --border outline on a transparent fill washes out on the
   dark-alternating section, so the tab takes the light fill. The active tab's
   --primary border is unaffected. */
.section--alt .sol-tab, #solution .sol-tab { background: var(--surface); }

.solution-panels { display: block; margin-top: 0.2rem; }
.solution-panel { padding: 0; }
.solution-panel[hidden] { display: none; }
.solution-panel:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.panel-grid { display: grid; grid-template-columns: 0.42fr 1fr; align-items: stretch; gap: clamp(0.6rem, 1.6vw, 1rem); min-height: min(58svh, 540px); }
.copy-panel { background: var(--surface); padding: clamp(0.9rem, 2.2vw, 1.1rem); color: var(--primary-deep); display:flex; flex-direction:column; justify-content:center; }
.curve-panel { border-radius: 0 var(--radius-lg) var(--radius-lg) 0 / 0 var(--curve-vert) var(--curve-vert) 0; }
/* r3 6a: larger text in the copy panel, per CEO feedback */
/* r7: a clearly visible gap between the sub-section title and its short statement, per client feedback */
.copy-panel h3 { color: var(--primary); margin: 0 0 clamp(1.5rem, 2.2vw, 2rem); font-size: 1.3rem; }
.copy-panel .copy-sub { color: var(--primary); margin: 0; font-size: clamp(1rem, 1.3vw, 1.1rem); }
.panel-visual { display: flex; align-items: center; justify-content: center; padding: clamp(0.4rem, 1vw, 0.7rem); }
/* Panel 2's visual is two columns: the setting it was measured on to the left, the results to the
   right (Jay's order, 2026-08-06). Splitting them is also what keeps the result pills to a readable
   length rather than stretched across the whole column; the pill column stays the wider of the two. */
.data-visual { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; width: 100%; }
.data-col { display: flex; flex-direction: column; gap: clamp(0.6rem, 1.6vw, 1rem); min-width: 0; }
.panel-visual img, .panel-visual .solution-video { width: auto; max-width: 100%; height: auto; object-fit: contain; border-radius: var(--radius); }

/* One panel is on screen at a time, so its visual gets the whole height budget. */
.panel-visual img, .panel-visual .solution-video { max-height: min(50svh, 500px); }

/* Panel 1's photograph fills its column instead of floating in it: the old device shot sat small in a
   mostly-empty half-panel, which was the page's weakest moment. It crops to the column rather than
   letterboxing, and mirrors the copy panel's radius so the two halves read as one object. */
.panel-photo { margin: 0; flex-direction: column; align-items: stretch; justify-content: center; gap: 0.5rem; }
/* Panel 1 treatment (Jay, 2026-08-07): the static device shot was the flattest moment of Our
   Solution. It now opens with a slow Ken Burns settle (scale 1.06 → 1) when the tab reveals,
   and the frame drifts gently with the cursor (touch / reduced-motion: static). app.js drives
   the .kb class + the --px/--py vars. */
.panel-photo .panel-photo-frame {
  width: 100%; height: 100%; max-height: min(52svh, 520px);
  overflow: hidden; border-radius: var(--radius-lg);
}
.panel-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 42% 55%;
  transform: translate(var(--px, 0px), var(--py, 0px)) scale(1.08);
  transition: transform 0.45s ease-out;
  will-change: transform;
}
.solution-panel.kb .panel-photo img {
  animation: kb-settle 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes kb-settle {
  from { transform: translate(0, 0) scale(1.18); }
  to   { transform: translate(var(--px, 0px), var(--py, 0px)) scale(1.08); }
}
.panel-photo figcaption { font-size: 12.5px; color: var(--ink-2); text-align: right; }

/* cohort counts — stacked rows, hairline between */
.dataset-counts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.dataset-counts li { padding: 0.5rem 0; display: flex; align-items: baseline; gap: 0.6rem; }
.dataset-counts li:not(:last-child) { border-bottom: 1px solid var(--border); }
.dataset-figure { font-weight: 700; color: var(--primary-deep); font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1; }
.dataset-label { font-size: 0.9rem; color: var(--ink-2); }

/* performance bars: solid deep-blue rounded pills, white label left, white circular chip right */
/* Comparative bars (donor: component-library/gallery/house-visual-aids, pattern 3, retokened).
   These were fixed-width pills, so 96 / 91 / 80 all looked identical and the reader had to compare
   the digits by eye. A bar encodes the value in its length, which is the whole point of showing
   three related percentages together. */
.perf-bars { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: clamp(0.55rem, 1.4vw, 0.8rem); }
/* Label and value share the top line; the track spans the full width beneath. The label gets its
   own row because "Negative Predictive Value" beside a bar would leave the bar too short to
   compare, and the bar is the thing being read. */
.perf-bar { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 0.75rem; row-gap: 0.32rem; }
.perf-label { color: var(--primary-deep); font-weight: 700; font-size: 0.95rem; }
.perf-chip { color: var(--primary-deep); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.perf-track { grid-column: 1 / -1; height: 10px; background: var(--tint); border-radius: 999px; overflow: hidden; }
.perf-fill { display: block; height: 100%; width: var(--w); border-radius: 999px; transform-origin: left; background: var(--primary-deep); }
/* The grow only arms once JS has added .animate, so a JS failure leaves the bars at full width
   rather than collapsed to nothing. Reduced-motion never arms it at all. */
@media (prefers-reduced-motion: no-preference) {
  .perf-bars.animate .perf-fill { transform: scaleX(0); transition: transform 0.9s cubic-bezier(0.32, 0.72, 0, 1); }
  .perf-bars.animate .perf-fill.in { transform: scaleX(1); }
}

.measurement { margin-top: 0; color: var(--ink-2); font-size: 0.78rem; font-style: italic; }

.visual-foot { margin-top: 0; display: flex; justify-content: flex-start; }
.visual-foot .draft-badge { margin-top: 0; }

/* Responsive: stack panels under ~900px; convert the convex right edge to a bottom curve */
@media (max-width: 900px) {
  .panel-grid { grid-template-columns: 1fr; min-height: 0; }
  .curve-panel { border-radius: 0 0 var(--radius-lg) var(--radius-lg) / 0 0 var(--curve-vert) var(--curve-vert); }
  .copy-panel { padding-bottom: 1rem; }
  .panel-visual { padding-top: clamp(0.4rem, 1vw, 0.7rem); }
  .data-visual { grid-template-columns: 1fr; }
  .sol-tab { font-size: 0.82rem; padding: 0.4rem 0.8rem; }
}

/* end solution panels */

/* ============================================================
   SHARED — Block-4 section utilities
   ============================================================ */
.stub-note { font-size: 0.95rem; color: var(--ink-2); margin: 1.4rem 0 0; }
.contact-block .pill-cta { margin-top: 1.2rem; }
.contact-block a.mail { color: var(--primary); font-weight: 700; }

/* ---- contact panel (step 8) — the client's Option B, concept p.10 ---- */
/* main > section is a flex container, so .section-inner sizes to its content unless told otherwise;
   without this the panel shrink-wraps to the text instead of spanning the column, as #solution did. */
#contact .section-inner { width: 100%; }
.contact-panel {
  background: var(--primary);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
}
.contact-title {
  font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.1; color: var(--white); margin: 0 0 0.8rem;
}
.contact-line {
  font-size: clamp(1rem, 1.7vw, 1.15rem); line-height: 1.6; color: var(--white);
  margin: 0 auto; max-width: 46ch;
}
.contact-panel .pill-cta { margin-top: 1.6rem; }
/* Step 11 — the panel is now the one committed moment on the page: solid --primary with
   --white type. The CTA inverts (white fill, --primary-deep label) so it stays legible on
   the blue, and takes a --white focus ring because the global --focus (--primary-deep) is
   too dark against --primary. Scoped so nothing else on the page inherits any of it. */
.contact-panel .pill-cta--primary {
  background: var(--white);
  color: var(--primary-deep);
}
.contact-panel .pill-cta--primary:hover { background: var(--tint); color: var(--primary-deep); }
.contact-panel .pill-cta--primary:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

/* ---- footer additions ---- */
.site-footer .foot-grid { display: grid; gap: 1rem; }
.site-footer .foot-logo { height: 20px; width: auto; opacity: 0.9; }
.site-footer .foot-links { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: 0.9rem; }
/* references — the trial citation, moved out of Evidence (linked from the in-text superscript) */
.site-footer .foot-refs {
  list-style: decimal; margin: 0.4rem 0 0; padding-left: 1.3rem;
  font-size: 0.78rem; line-height: 1.55; color: var(--ink-2); max-width: 90ch;
}
.site-footer .foot-refs li { padding-left: 0.2rem; }
.site-footer .foot-refs a { color: var(--primary); font-weight: 600; }
.site-footer .foot-refs li:target { color: var(--ink); }
.site-footer .foot-refs em { font-style: italic; }
.site-footer .foot-copyright { font-size: 0.8rem; color: var(--ink-2); margin-top: 0.4rem; }

/* ============================================================
   BLOCK 4 — TEAM · EVIDENCE · PROGRESS · OPPORTUNITY · CONTACT
   Everything resolves to the :root tokens above. No new brand colours.
   ============================================================ */

/* ---- TEAM — editorial bio rows (hairline dividers, NOT card boxes) ---- */
.bio-list { list-style: none; margin: 0; padding: 0; max-width: 62ch; }
.bio-row {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 1.6rem);
  align-items: start; padding: clamp(1.2rem, 3vw, 1.7rem) 0; border-bottom: 1px solid var(--border);
}
.bio-row:first-child { padding-top: 0; }
.bio-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; color: var(--primary);
  background: var(--brand-soft); border: 1px solid var(--border);
}
.bio-copy { min-width: 0; }
.bio-name { font-size: 1.1rem; font-weight: 700; color: var(--primary-deep); margin: 0 0 0.1rem; }
.bio-role { font-size: 0.9rem; font-weight: 600; color: var(--primary); margin: 0 0 0.4rem; }
.bio-line { font-size: 0.98rem; color: var(--ink-2); line-height: 1.55; margin: 0; max-width: 52ch; }
.bio-owed { margin: 0; }
.bio-owed .draft-badge { margin-top: 0.7rem; }

.pedigree { margin-top: clamp(1.4rem, 3vw, 2rem); }
.pedigree-line { font-size: 0.95rem; color: var(--ink-2); margin: 0; max-width: 62ch; }
.pedigree-extra .draft-badge { margin-top: 0; margin-left: 0.4em; }

/* ---- PUBLICATIONS — evidence cards (replaces previous accuracy bars + funnel visuals) ---- */
.pub-grid {
  display: grid; gap: clamp(1rem, 2.6vw, 1.4rem);
}
@media (min-width: 900px) { .pub-grid { grid-template-columns: 1fr 1fr; } }
.pub-card {
  background: var(--tint); /* sits on the light page tint */
  border-left: 4px solid var(--primary); /* thin spine down the left edge */
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 2.4vw, 1.25rem);
  box-shadow: none; /* soft page edge, keep subtle */
  /* equal-height cards (Jay, 2026-08-13): a flex column so .pub-foot (player + links)
     pins to the bottom and the two cards' play buttons sit on one line regardless of
     summary length — the grid default (stretch) makes both cards the same height. */
  display: flex; flex-direction: column;
  /* hover lift + scroll-reveal (signed-off 2026-08-07) */
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
  transform: translateY(0);
}
.pub-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(3, 74, 140, 0.15);
}
/* scroll-reveal: cards fade + rise in as they enter the viewport */
.pub-card.reveal {
  opacity: 0;
  transform: translateY(28px);
}
.pub-card.reveal.in {
  opacity: 1;
  transform: translateY(0);
  /* Jay, 2026-08-07: the reveal read as "already there" at 0.5s — a slower, longer
     rise (0.9s from 28px) makes the cards visibly arrive as they enter the viewport. */
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* hover lift wins over the reveal's translateY(0) */
.pub-card.reveal.in:hover {
  transform: translateY(-4px);
}
/* stagger the two cards */
.pub-card.reveal:nth-child(1) { transition-delay: 0.05s; }
.pub-card.reveal:nth-child(2) { transition-delay: 0.18s; }
.pub-masthead {
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 0.6rem;
}
.pub-title { margin: 0 0 0.45rem; }
.pub-title a { color: var(--primary-deep); font-weight: 700; text-decoration: none; font-size: 1.05rem; }
.pub-title a:hover, .pub-title a:focus-visible { text-decoration: underline; }
.pub-meta { font-size: 0.9rem; color: var(--ink-2); margin: 0 0 0.25rem; }
.pub-summary { color: var(--ink); margin-top: 0.6rem; line-height: 1.55; flex: 1 1 auto; }
.doi-chip {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.90rem; color: var(--primary-deep);
  background: var(--white); padding: 0.28rem 0.6rem; border-radius: 8px; text-decoration: none; border: 1px solid var(--border);
}
.pub-aux { color: var(--primary); font-weight: 600; text-decoration: none; font-size: 0.95rem; }
.pub-aux:hover, .pub-aux:focus-visible { text-decoration: underline; }

/* audio player — custom, tokenised colours */
/* pub-foot is laid out in two rows: player (full width) then links row (doi + free link).
   margin-top:auto pins it to the card bottom (with .pub-summary flex:1 above it) so both
   cards' players align; the former fixed 1rem rides the same gap either way. */
.pub-foot { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; margin-top: auto; padding-top: 1rem; }
.pub-player-row { width: 100%; }
.audio-player { display: flex; align-items: center; gap: 0.8rem; background: transparent; width: 100%; }
.play-btn {
  width: 44px; height: 44px; border-radius: 999px; border: none; background: var(--primary); color: var(--white);
  display: inline-grid; place-items: center; font-weight: 700; cursor: pointer; font-size: 1.05rem;
}
.play-btn:hover { background: var(--primary-deep); }
.play-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* progress grows to fill the space between the button and elapsed time; min-width prevents collapse */
.progress { flex: 1 1 auto; min-width: 120px; height: 6px; background: var(--white); border-radius: 999px; overflow: hidden; cursor: pointer; }
.progress-fill { height: 100%; background: var(--primary); width: 0%; transition: width 120ms linear; }
.elapsed { font-size: 0.9rem; color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.pub-links-row { display: flex; gap: 0.8rem; align-items: center; }


/* ---- TEAM CARDS — five-person card grid ---- */
.team-cards {
  --team-photo-max: 144px;
  display: grid;
  gap: clamp(0.7rem, 1.5vw, 1rem);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .team-cards { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1100px) {
  .team-cards { grid-template-columns: repeat(5, 1fr); }
}

.team-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Team touch-up (Jay, 2026-08-07): same language as the problem/evidence cards —
     staggered fade + rise on scroll-in, hover lift, and the portrait gently zooms. */
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
  transform: translateY(0);
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(3, 74, 140, 0.18);
}
.team-card:hover .team-card-photo { transform: scale(1.05); }
.team-card.reveal { opacity: 0; transform: translateY(24px); }
.team-card.reveal.in {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: center;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.team-card.reveal.in:hover { transform: translateY(-4px); }
.team-card.reveal:nth-child(1) { transition-delay: 0.03s; }
.team-card.reveal:nth-child(2) { transition-delay: 0.10s; }
.team-card.reveal:nth-child(3) { transition-delay: 0.17s; }
.team-card.reveal:nth-child(4) { transition-delay: 0.24s; }
.team-card.reveal:nth-child(5) { transition-delay: 0.31s; }

.team-card-photo {
  aspect-ratio: 1;
  background: var(--tint);
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: relative;
  overflow: hidden;
  padding: 1rem;
  max-height: calc(var(--team-photo-max) + 2rem);
}
.team-card-photo img {
  max-width: var(--team-photo-max);
  max-height: var(--team-photo-max);
  width: auto;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

@media (min-width: 1100px) {
  /* reduce the photo height to free vertical space at large breakpoints */
  .team-card-photo { aspect-ratio: 16 / 11; }
}

.team-card-plate {
  background: var(--primary);
  color: var(--white);
  padding: clamp(0.8rem, 2vw, 1rem);
  flex-shrink: 0;
  box-sizing: border-box;
  /* reserve space so all name plates line up even when roles wrap to multiple lines.
     7.2rem clears the tallest case (Claude's three-line role, 112px) so all five bio
     panels start on the same line across the row. */
  min-height: 7.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;          /* the mark bleeds off the right edge and is clipped by the plate */
}
/* The Probentis mark, watermarked into the name plate. It lives here rather than on the photo
   tile so it survives the client's portraits landing. Drawn with a mask rather than the SVG
   itself because the file is inked in --primary, which would be invisible on a --primary plate;
   masking lets the fill be --white and keeps the colour resolving to a token. Decorative, so it
   is a pseudo-element and never enters the accessibility tree. Opacity is low enough that the
   plate behind the white name stays around 7:1, comfortably past AA. */
.team-card-plate::after {
  content: "";
  position: absolute;
  right: -8%;
  top: 50%;
  translate: 0 -50%;
  width: 4.6rem;
  aspect-ratio: 1;
  background: var(--white);
  opacity: 0.13;
  -webkit-mask: url("/assets/logo-o.svg") no-repeat center / contain;
  mask: url("/assets/logo-o.svg") no-repeat center / contain;
  pointer-events: none;
}

.team-card-name {
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  font-weight: 700;
  margin: 0 0 0.15rem;
  color: var(--white);
  line-height: 1.2;
}

.team-card-role {
  font-size: clamp(0.75rem, 1.5vw, 0.85rem);
  font-weight: 600;
  margin: 0;
  color: var(--white);
  line-height: 1.3;
}

.team-linkedin {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  color: var(--white);
  z-index: 1;
}
.team-linkedin svg { width: 100%; height: 100%; }
.team-linkedin text { font-family: var(--font); }
.team-linkedin:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

.team-card-bio {
  background: var(--tint);
  color: var(--ink);
  padding: clamp(0.6rem, 1.6vw, 0.9rem);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.team-card-bio p {
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  line-height: 1.35;
  margin: 0;
  max-width: none;
}

/* keep the existing disclaimer / draft badge styles — no changes below */

/* in-text superscript reference marker → footer reference (citation lives in the footer now) */
.cite-ref { font-size: 0.62em; font-weight: 700; line-height: 0; vertical-align: super; }
.cite-ref a { color: var(--primary); text-decoration: none; padding: 0 0.12em; }
.cite-ref a:hover, .cite-ref a:focus-visible { text-decoration: underline; }