/* =========================================================
   Saccade — site-brand.css
   2026 identity reskin: deep emerald green + mint accent,
   high-contrast editorial serif headlines, white "clinical"
   cards (chart / tasks / journal papers) floating on green.

   Loaded LAST, after site-v2…v5.css. Owns the palette.
   The base sheets are a light theme where --ink triple-duties
   as text, hairline border, AND dark-section background; this
   layer re-points the tokens to a dark-green theme and patches
   the few white-card surfaces that still need dark ink.
   ========================================================= */

:root{
  /* ---- core greens ---- */
  --g-emerald:#0C4A35;   /* primary section bg */
  --g-warm:#0A4030;      /* alternating section bg */
  --g-deep:#06281D;      /* feature / trust / pharma / contact */
  --g-panel:#0F5740;     /* elevated panel on green */

  /* ---- ink / type ---- */
  --cream:#EDF3ED;
  --mint:#8FD3AB;
  --mint-bright:#A9E0C1; /* headline highlight */
  --mint-deep:#73C295;   /* hover */
  --forest:#2C7150;      /* accent text ON white cards */

  /* ---- re-point base tokens ---- */
  --bg:var(--g-emerald);
  --bg-warm:var(--g-warm);
  --ink:var(--cream);
  --ink-soft:rgba(237,243,237,.74);
  --muted:rgba(237,243,237,.52);
  --muted-2:rgba(237,243,237,.36);
  --rule:rgba(237,243,237,.13);
  --rule-strong:rgba(237,243,237,.22);
  --accent:var(--mint);
  --accent-deep:var(--mint-deep);
  --accent-tint:rgba(143,211,171,.10);
  --hero-bg:var(--g-warm);
  --hero-fg:var(--cream);
  --hero-muted:rgba(237,243,237,.58);
  --hero-rule:rgba(237,243,237,.13);
  --hero-rule-strong:rgba(237,243,237,.24);
  --paper:#FFFFFF;
  --tint:var(--g-panel);

  /* ---- type system ---- */
  --font-display:"Playfair Display", "Source Serif 4", Georgia, serif;

  /* ---- gaze-trace color, read by site-v2.js ---- */
  --gaze-rgb:143,211,171;
  --reticle-rgb:237,243,237;
}

html{background:var(--g-deep);}
body{background:var(--bg);color:var(--ink);}
::selection{background:var(--mint);color:#06281D;}

/* =========================================================
   HEADLINE TYPE — editorial high-contrast serif
   ========================================================= */
.hero h1,
h2.serif,
.contact h2,
.science .stat-bar .sv,
.funnel-foot .ff .fv,
.funnel-punch .fp-num,
.hero-bottom .cell .v{
  font-family:var(--font-display);
  font-weight:600;
}
h2.serif{letter-spacing:-0.01em;line-height:1.04;}
.hero h1{letter-spacing:-0.015em;line-height:1.02;font-weight:600;}
.hero h1 .acc,
h2.serif .acc,
.contact h2 .acc{font-style:italic;font-weight:500;color:var(--mint-bright);}
.funnel-punch .fp-num,.funnel-foot .ff .fv{font-weight:600;letter-spacing:-0.02em;}

/* =========================================================
   STRUCTURAL RULES — soften the old near-black grid borders
   (base used var(--ink) which is now bright cream)
   ========================================================= */
.tasks,
.whynow-grid,
.claims,
.papers,
.evidence-studies,
.reg-table,
.who-grid{
  border-top-color:var(--rule-strong) !important;
  border-bottom-color:var(--rule-strong) !important;
}
.science .stat-bar{border-left-color:var(--rule-strong);}
.nav-cta{border-color:var(--rule-strong);}

/* =========================================================
   NAV
   ========================================================= */
.nav .wordmark-img{height:24px;width:auto;filter:none;}
.nav.over-dark .nav-links a{color:rgba(237,243,237,.66);}
.nav.over-dark .nav-links a:hover,
.nav.over-dark .nav-links a.active{color:var(--cream);}
.nav.over-dark .nav-cta{border-color:rgba(237,243,237,.30);color:var(--cream);}
.nav.over-dark .nav-cta:hover{background:var(--mint);border-color:var(--mint);color:#06281D;}
.nav:not(.over-dark){background:rgba(10,58,43,.86);backdrop-filter:saturate(1.2) blur(14px);}
.nav.scrolled{border-bottom-color:var(--rule);}
.nav-cta:hover{background:var(--mint);border-color:var(--mint);color:#06281D;}
.nav-links a.active::after{background:var(--mint);}

/* =========================================================
   HERO — deck-style: emerald vignette + faint mark watermark
   ========================================================= */
.hero{
  background:
    radial-gradient(120% 120% at 28% 38%, #0F5942 0%, #0A3E2E 52%, #072B20 100%);
  position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  right:-6%;top:50%;transform:translateY(-50%);
  width:min(46vw,720px);aspect-ratio:1.85;
  background:url("assets/brand-mark.png") center/contain no-repeat;
  opacity:.05;
}
.hero-inner,.hero-bottom,.hero-corner{position:relative;z-index:2;}
.saccade-canvas{opacity:.85;}
.hero-status .pulse{background:var(--mint);box-shadow:0 0 0 4px rgba(143,211,171,.18);}
.hero h1 .acc{color:var(--mint-bright);}
.hero-ctas .primary{background:var(--mint);border-color:var(--mint);color:#06281D;}
.hero-ctas .primary:hover{background:#fff;border-color:#fff;color:#06281D;transform:translateY(-1px);}
.hero-bottom .cell .v .accent{color:var(--mint-bright);}
.hero-corner .dot{background:var(--mint);}

/* =========================================================
   DARK FEATURE SECTIONS — were background:var(--ink)
   ========================================================= */
.trust{background:var(--g-deep) !important;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.pharma{background:var(--g-deep) !important;border-top:1px solid var(--rule);}
.contact{background:var(--g-deep) !important;}
.contact-grid .lines a{color:var(--mint);}
.contact-ctas .c-btn.primary{background:var(--mint);border-color:var(--mint);color:#06281D;}
.contact-ctas .c-btn.primary:hover{background:#fff;border-color:#fff;color:#06281D;}

/* =========================================================
   SECTION BACKGROUND RHYTHM (all green, subtle alternation)
   ========================================================= */
.whynow{background:var(--g-warm);}
.stakes{background:var(--g-emerald);}
.how{background:var(--g-warm);}
.moat{background:var(--g-emerald);}
.headtohead{background:var(--g-warm);}
.science{background:var(--g-emerald);}
.reg{background:var(--g-warm);}
.refs{background:var(--g-emerald);}

/* the "now" highlight cell in Why-now */
.whynow-cell.now{background:rgba(143,211,171,.10);}
.whynow-cell.now .y,.whynow-cell.now .ix{color:var(--mint);}

/* =========================================================
   WHITE CARD SURFACES — re-assert dark ink on bright cards
   ========================================================= */
/* --- journal paper cards (deck treatment) --- */
a.paper{
  background:#fff;border:1px solid rgba(6,40,29,.10);
  border-radius:3px;padding:26px 24px 22px;
  box-shadow:0 18px 40px -28px rgba(0,0,0,.55);
}
a.paper:hover{border-color:var(--forest);box-shadow:0 22px 48px -26px rgba(0,0,0,.6);}
a.paper .src{
  color:var(--forest);
  border-bottom:1px solid rgba(6,40,29,.12);
  padding-bottom:12px;margin-bottom:14px;
}
a.paper .src .yr{color:rgba(6,40,29,.5);}
a.paper .src .ref-num{color:var(--forest);}
a.paper .desc{color:#15281F;}
a.paper .stat{color:var(--forest);}
a.paper::after{color:rgba(6,40,29,.35);}
a.paper:hover::after{color:var(--forest);}

/* --- task cards --- */
.task{background:#fff;}
.task .n{color:var(--forest);}
.task .t{color:#15281F;}
.task .d{color:rgba(6,40,29,.62);}
.task .viz{border-color:rgba(6,40,29,.12);background:#06231A;}
.task .viz .hz,.task .viz .lbl{color:rgba(237,243,237,.7);}

/* --- task legend swatches --- */
.task-legend .tl-sw.healthy{background:rgba(6,40,29,.45);}
.task-legend .tl-sw.ad{background:var(--forest);}
.task-legend .tl-k{color:var(--ink-soft);}

/* --- biomarker chart (white paper) --- */
.stakes-chart{background:#fff;border:1px solid rgba(6,40,29,.10);border-radius:3px;
  box-shadow:0 18px 44px -30px rgba(0,0,0,.55);}
.stakes-chart .ch-label,.stakes-chart .ch-title{color:rgba(6,40,29,.55);}
.stakes-chart .legend{color:#15281F;}

/* --- sample report frame --- */
.report-stack .report-card,.report-card{border-color:var(--rule-strong);}

/* --- badges → outline chips on green (no white) --- */
.badge{background:rgba(237,243,237,.04);border:1px solid var(--rule-strong);color:var(--ink);}
.badge .d{color:var(--mint);}

/* =========================================================
   EVIDENCE / STUDIES / REG accent recolors
   ========================================================= */
.evidence-study .es-site{color:var(--mint);}
.science .stat-bar .sv{color:var(--mint-bright);}
.reg-row .when{color:var(--mint);}
.reg-row::before{background:var(--g-warm);border-color:var(--mint);}
.inline-link{color:var(--mint);border-bottom:1px solid rgba(143,211,171,.4);}

/* claims */
.claim .num{color:var(--mint);}
.claim details summary,.claim details summary::after{color:var(--mint);}
.claim details summary:hover{color:var(--mint-deep);}
.eye-figure-tight details summary,
.eye-figure-tight details summary::after{color:var(--mint);}

/* =========================================================
   PHARMA funnel recolors (rust → mint)
   ========================================================= */
.funnel{background:rgba(237,243,237,.02);border-color:var(--hero-rule);}
.funnel .col.r .hd{color:var(--mint);}
.funnel .col.r .bar .fill{background:var(--mint);}
.funnel-punch{background:linear-gradient(180deg, rgba(143,211,171,0) 0%, rgba(143,211,171,.05) 100%);}
.funnel-foot .ff.r .fv,.fp-kicker.accent{color:var(--mint);}
.fp-num.huge,.fp-center .fp-num{color:var(--mint-bright);}
.fp-num.strike-num{color:rgba(237,243,237,.45);text-decoration-color:rgba(143,211,171,.6);}
.fp-arrow-line{background:var(--mint);}
.fp-arrow-head{border-left-color:var(--mint);}

/* head-to-head */
.versus-card.v-us{border-color:rgba(143,211,171,.35);}
.versus-card .vc-kicker.accent{color:var(--mint);}
.versus-vs{color:var(--muted);}
.h2h-meta .v.accent{color:var(--mint);}
.h2h-stake em{color:var(--mint-bright);}

/* =========================================================
   EYEBROW chapter label → mint
   ========================================================= */
.eyebrow::before{background:var(--mint);}
.eyebrow > span:last-of-type{color:var(--mint);}
.pharma .eyebrow > span:last-of-type,
.contact .eyebrow > span:last-of-type{color:var(--mint);}

/* =========================================================
   FOOTER
   ========================================================= */
footer{background:var(--g-deep);border-top:1px solid var(--rule);}
.footer-col a:hover{color:var(--mint);}
.refs-list a,.refs-note a{color:var(--mint);}

/* =========================================================
   MISC links / references on green
   ========================================================= */
.ref sup{color:var(--mint);}
.stakes .src-line{color:var(--muted);}

/* =========================================================
   PATCH LAYER — 2026-05 fixes
   ========================================================= */

/* (1) Wordmark stays WHITE at all times. The base sheet inverts it to
   black once the nav leaves the hero (.scrolled) — wrong on dark green. */
.nav .wordmark-img,
.nav.scrolled .wordmark-img{filter:none !important;}

/* (2) Head-to-head versus block: base sheet painted these white/ink for a
   LIGHT theme, so on green the text rendered invisible. Repaint for dark. */
.h2h-versus{background:var(--g-deep);border-color:var(--rule-strong);}
.versus-card.v-them{background:transparent;border-right:1px solid var(--rule);}
.versus-card.v-us{
  background:linear-gradient(180deg, rgba(143,211,171,.13), rgba(143,211,171,.04));
  border-color:transparent;
}
.versus-card.v-us .vc-list{border-top-color:rgba(143,211,171,.22);}
.versus-card.v-us .vc-list li{border-bottom-color:rgba(143,211,171,.16);}
.versus-vs{
  background:var(--g-panel);color:var(--mint);
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule-strong);
}

/* (3) Product photography — real hardware breaking up the text */
.hero-product{
  position:absolute;z-index:1;right:-2%;bottom:0;
  width:min(54%,720px);height:auto;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 100%);
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.5));
}
@media (max-width:1080px){.hero-product{display:none;}}

/* corner micro-label now collides with the product image — retire it */
.hero .hero-corner{display:none;}

.product-band{
  margin:8px 0 56px;
  border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong);
  padding:40px 0 8px;
}
.product-band .pb-lede{
  font-family:"Source Serif 4",serif;font-weight:500;font-size:clamp(20px,2.1vw,28px);
  line-height:1.28;letter-spacing:-0.01em;color:var(--cream);margin:0 auto 36px;
  max-width:30ch;text-align:center;text-wrap:balance;
}
.product-band .pb-lede em{font-style:italic;color:var(--mint-bright);}

.product-band .pb-compare{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  margin:0 0 8px;
}
.product-band .pb-shot{margin:0;display:flex;flex-direction:column;gap:16px;}
.product-band .pb-img{
  position:relative;aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 130% at 50% 18%, rgba(255,255,255,.07), rgba(255,255,255,0) 62%),
    rgba(255,255,255,.025);
  border:1px solid var(--rule);
}
.product-band .pb-shot-us .pb-img{
  background:
    radial-gradient(120% 130% at 50% 18%, rgba(143,211,171,.16), rgba(143,211,171,0) 62%),
    rgba(143,211,171,.05);
  border-color:rgba(143,211,171,.30);
}
.product-band .pb-img img{
  width:88%;height:88%;object-fit:contain;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.42));
}
.product-band figcaption{display:flex;flex-direction:column;gap:3px;padding-left:2px;}
.product-band figcaption .t{
  font-family:"Source Serif 4",serif;font-weight:600;font-size:17px;
  letter-spacing:-0.01em;color:var(--cream);
}
.product-band .pb-shot-us figcaption .t{color:var(--mint-bright);}
.product-band figcaption .s{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--muted);
}
.product-band .pb-plus{align-self:start;margin-top:14%;}
.product-band .pb-plus span{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--g-panel);border:1px solid var(--rule-strong);
  color:var(--mint);font-family:"Source Serif 4",serif;font-size:24px;line-height:1;
}

.product-band .pb-spec{
  list-style:none;margin:36px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);
}
.product-band .pb-spec li{
  display:flex;flex-direction:column;gap:5px;
  padding:18px 22px 4px 0;border-right:1px solid var(--rule);
}
.product-band .pb-spec li:not(:first-child){padding-left:22px;}
.product-band .pb-spec li:last-child{border-right:none;}
.product-band .pb-spec .k{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--muted);
}
.product-band .pb-spec .v{font-size:15px;color:var(--cream);font-weight:500;line-height:1.2;}
@media (max-width:880px){
  .product-band .pb-compare{grid-template-columns:1fr;gap:18px;}
  .product-band .pb-plus{justify-self:center;margin:0;}
  .product-band .pb-plus span{transform:rotate(0deg);}
  .product-band .pb-spec{grid-template-columns:1fr 1fr;}
  .product-band .pb-spec li:nth-child(2){border-right:none;}
}