/* ============================================================
   Build My Longevity — shared design system
   One stylesheet for every page. Rebranded 24 Sep 2026: white
   background, violet/teal/orange bright-startup palette, Plus
   Jakarta Sans throughout. See docs/01-domain-migration-status.md
   for the full rebrand log and the approved Canva/Design-canvas
   mockups this token set was drawn from.
   ============================================================ */

/* Self-hosted fonts (6 Oct 2026; replaced a render-blocking Google Fonts
   @import). Latin subset only. Jakarta is one variable file covering 400–800. */
@font-face{font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:400 800; font-display:swap; src:url(../fonts/plus-jakarta-sans-latin.woff2) format("woff2");}
@font-face{font-family:"Plus Jakarta Sans"; font-style:italic; font-weight:400; font-display:swap; src:url(../fonts/plus-jakarta-sans-italic-latin.woff2) format("woff2");}
@font-face{font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/ibm-plex-mono-400-latin.woff2) format("woff2");}
@font-face{font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/ibm-plex-mono-500-latin.woff2) format("woff2");}
@font-face{font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/ibm-plex-mono-600-latin.woff2) format("woff2");}

/* Type scale and corner radii (6 Oct 2026). Use these tokens, not raw px:
   13px is the floor for any text, including mono labels. */
:root{
  --fs-xs:13px;    /* mono labels, badges, metadata, footer */
  --fs-sm:14px;    /* nav links, filter pills */
  --fs-body:15px;  /* card copy, table cells, notes, buttons */
  --fs-base:16px;  /* main prose */
  --fs-md:18px;    /* hero lede, card titles */
  --fs-lg:20px;    /* card names, sub-headings */
  --fs-xl:26px;    /* section titles */
  --fs-2xl:clamp(30px,4.2vw,44px); /* page H1 */
  --r-sm:10px;     /* chips, inputs, notes, small tiles */
  --r-card:20px;   /* cards, panels, table wrappers, menus */
  --r-pill:999px;  /* buttons, filter pills, badges */
}

:root{
  color-scheme: light;
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f8f6fe;
  --ink:#000030; --ink-soft:#55556b; --ink-faint:#62627c; /* was #9a9ab0 (2.75:1); darkened 28 Sep 2026 to pass WCAG AA */
  --accent:#5e50d0; --accent-soft:#f1eefc;
  --accent-mid:#8b7ff0; --accent-light:#d9d3f7;
  --teal:#00c4a8; --teal-soft:#e3faf6;
  --stamp:#f4a635; --stamp-soft:#fff3e2;
  --line:#ece9f9;
  --flag:#d1435f; --flag-soft:#fbe6ea;
  /* Text-safe shades (28 Sep 2026): the vivid brand hues stay for fills, bars, dots and icons;
     these darker versions are used wherever the colour is TEXT, so it passes WCAG AA (4.5:1) on white and on its own soft tint. */
  --teal-ink:#00796a; --stamp-ink:#9a5800; --blue-ink:#1f63c7; --flag-ink:#b3304c; --skin-ink:#a82a70;
  --glucose-ink:#ad3a1e; /* glucose category text (9 Oct 2026): 6.2:1 on white, 5.4:1 on its soft tint */
  --on-accent:#ffffff; /* text on violet fills (buttons, active pills) */
  --cat-wearables:#5e50d0; --cat-wearables-soft:#f1eefc;
  --cat-sleep:#2f7de1; --cat-sleep-soft:#e7f0fd;
  --cat-recovery:#00c4a8; --cat-recovery-soft:#e3faf6;
  --cat-skin:#d1428f; --cat-skin-soft:#fce8f5;
  --cat-bodycomp:#f4a635; --cat-bodycomp-soft:#fff3e2;
  --cat-glucose:#ef6a4a; --cat-glucose-soft:#fdece7;
  --cat-clinician:#5e50d0; --cat-clinician-soft:#f1eefc;
  --cat-pathology:#00c4a8; --cat-pathology-soft:#e3faf6;
  --cat-imaging:#f4a635; --cat-imaging-soft:#fff3e2;
  --cat-dna:#2f7de1; --cat-dna-soft:#e7f0fd;
  --shadow: 0 4px 18px rgba(20,10,60,.06);
  --shadow-hover: 0 16px 32px rgba(20,10,60,.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e0b22; --surface:#161330; --surface-2:#1c1938;
    --ink:#f1f0fb; --ink-soft:#b3aed6; --ink-faint:#a39dc9;
    --accent:#9b8ff5; --accent-soft:#2a2350;
    --accent-mid:#b7aef8; --accent-light:#2a2350;
    --teal:#3fe0c4; --teal-soft:#123832;
    --stamp:#ffbe66; --stamp-soft:#3a2c14;
    --line:#2c2750;
    --flag:#f0728c; --flag-soft:#3a2030;
    --teal-ink:var(--teal); --stamp-ink:var(--stamp); --blue-ink:var(--cat-dna); --flag-ink:var(--flag); --skin-ink:var(--cat-skin); --glucose-ink:var(--cat-glucose);
    --on-accent:#0e0b22; /* dark mode accent is light violet, so its text goes navy (7.0:1) */
    --cat-wearables:#9b8ff5; --cat-wearables-soft:#2a2350;
    --cat-sleep:#7aa8f2; --cat-sleep-soft:#1c2c4a;
    --cat-recovery:#3fe0c4; --cat-recovery-soft:#123832;
    --cat-skin:#ec7fbd; --cat-skin-soft:#3a2030;
    --cat-bodycomp:#ffbe66; --cat-bodycomp-soft:#3a2c14;
    --cat-glucose:#ff9a80; --cat-glucose-soft:#3a2019;
    --cat-clinician:#9b8ff5; --cat-clinician-soft:#2a2350;
    --cat-pathology:#3fe0c4; --cat-pathology-soft:#123832;
    --cat-imaging:#ffbe66; --cat-imaging-soft:#3a2c14;
    --cat-dna:#7aa8f2; --cat-dna-soft:#1c2c4a;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    --shadow-hover: 0 16px 36px -10px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0e0b22; --surface:#161330; --surface-2:#1c1938;
  --ink:#f1f0fb; --ink-soft:#b3aed6; --ink-faint:#a39dc9;
  --accent:#9b8ff5; --accent-soft:#2a2350;
  --accent-mid:#b7aef8; --accent-light:#2a2350;
  --teal:#3fe0c4; --teal-soft:#123832;
  --stamp:#ffbe66; --stamp-soft:#3a2c14;
  --line:#2c2750;
  --flag:#f0728c; --flag-soft:#3a2030;
  --teal-ink:var(--teal); --stamp-ink:var(--stamp); --blue-ink:var(--cat-dna); --flag-ink:var(--flag); --skin-ink:var(--cat-skin); --glucose-ink:var(--cat-glucose);
  --on-accent:#0e0b22; /* dark mode accent is light violet, so its text goes navy (7.0:1) */
  --cat-wearables:#9b8ff5; --cat-wearables-soft:#2a2350;
  --cat-sleep:#7aa8f2; --cat-sleep-soft:#1c2c4a;
  --cat-recovery:#3fe0c4; --cat-recovery-soft:#123832;
  --cat-skin:#ec7fbd; --cat-skin-soft:#3a2030;
  --cat-bodycomp:#ffbe66; --cat-bodycomp-soft:#3a2c14;
  --cat-glucose:#ff9a80; --cat-glucose-soft:#3a2019;
  --cat-clinician:#9b8ff5; --cat-clinician-soft:#2a2350;
  --cat-pathology:#3fe0c4; --cat-pathology-soft:#123832;
  --cat-imaging:#ffbe66; --cat-imaging-soft:#3a2c14;
  --cat-dna:#7aa8f2; --cat-dna-soft:#1c2c4a;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-hover: 0 16px 36px -10px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
html{background:var(--bg);}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Plus Jakarta Sans",system-ui,sans-serif; line-height:1.55;
}
img{max-width:100%;}
[hidden]{display:none!important;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px 96px;}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;}
h1,h2,h3{font-family:"Plus Jakarta Sans",system-ui,sans-serif; font-weight:700; letter-spacing:-0.02em; text-wrap:balance; margin:0;}
a{color:var(--accent);}
p{margin:0;}

.skip-link{
  position:absolute; left:12px; top:-48px; background:var(--accent); color:var(--on-accent);
  padding:10px 16px; border-radius:var(--r-sm); z-index:100; text-decoration:none; font-weight:700;
  transition:top .15s;
}
.skip-link:focus{top:12px;}

/* ---------- site header ---------- */
header.site{border-bottom:1px solid var(--line); background:var(--bg);}
.site-inner{
  max-width:1080px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.wordmark{font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; letter-spacing:-0.02em; font-size:var(--fs-md); color:var(--ink); text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center;}
.wordmark .dot{color:var(--accent);}
.brandmark{width:22px; height:20px; margin-right:8px; flex-shrink:0;}
.brandmark .bm-tier-1{fill:var(--accent-light);}
.brandmark .bm-tier-2{fill:var(--accent-mid);}
.brandmark .bm-tier-3{fill:var(--teal);}
.brandmark .bm-tier-4{fill:var(--accent);}
nav.sitenav{display:flex; gap:22px; flex-wrap:wrap;}
nav.sitenav a{font-size:var(--fs-sm); color:var(--ink); font-weight:600; text-decoration:none;}
nav.sitenav a:hover{color:var(--accent);}
nav.sitenav a.current{color:var(--accent);}
@media (max-width:640px){
  .site-inner{padding:14px 20px;}
  nav.sitenav{gap:14px;}
  nav.sitenav a{font-size:var(--fs-xs);}
}

/* ---------- page header ---------- */
header.top{border-bottom:1px solid var(--line); padding:40px 24px 28px;}
.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent); margin-bottom:14px;
}
h1.title{font-size:var(--fs-2xl); font-weight:800; max-width:20ch;}
.lede{color:var(--ink-soft); font-size:var(--fs-md); max-width:62ch; margin-top:14px;}
.stampline{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px;}
.stamp{
  font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); color:var(--ink-soft);
  display:flex; align-items:baseline; gap:6px;
}
.stamp b{color:var(--ink); font-weight:700;}
.stamp .dot{color:var(--line);}

/* ---------- buttons / CTAs ---------- */
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}
.btn{
  font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:var(--fs-body); text-decoration:none;
  padding:13px 24px; border-radius:var(--r-pill); display:inline-flex; align-items:center; gap:8px;
  border:2px solid transparent; cursor:pointer;
}
.btn.primary{background:var(--accent); color:var(--on-accent); box-shadow:0 10px 22px -8px rgba(94,80,208,.5);}
.btn.primary:hover{opacity:.94;}
.btn.secondary{background:var(--surface); color:var(--accent); border-color:var(--accent-soft);}
.btn.secondary:hover{border-color:var(--accent);}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* ---------- trust band ---------- */
.trust-band{
  margin-top:28px; border:1px solid var(--accent-soft); background:var(--accent-soft);
  border-radius:var(--r-card); padding:16px 20px; font-size:var(--fs-base); color:var(--ink);
  max-width:70ch; line-height:1.5;
}
.trust-band b{color:var(--accent);}

/* ---------- section shell ---------- */
section{padding:52px 24px 0;}
section > .wrap{padding:0;}
.section-head{margin-bottom:22px;}
.section-label{
  font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); margin-bottom:8px;
}
h2.section-title{font-size:var(--fs-xl); font-weight:800;}
.section-note{color:var(--ink-soft); font-size:var(--fs-body); max-width:64ch; margin-top:8px;}
.th-sub{display:block; font-family:"Plus Jakarta Sans",sans-serif; text-transform:none; letter-spacing:0; font-size:var(--fs-xs); font-weight:400; color:var(--ink-faint); margin-top:2px;}
.col-key{
  display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--surface); padding:12px 16px; margin-bottom:16px; font-size:var(--fs-body); color:var(--ink-soft);
}
.col-key svg{width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--ink-faint);}
.col-key b{color:var(--ink);}

/* ---------- category cards (homepage) ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px;}
.cat-card{
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:var(--shadow);
  padding:24px 24px 22px; text-decoration:none; color:var(--ink); display:block;
}
.cat-card:hover{border-color:var(--accent-soft);}
.cat-card h3{font-size:var(--fs-md); font-weight:700; margin-bottom:6px;}
.cat-card .count{font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); color:var(--accent); margin-bottom:10px; display:block;}
.cat-card p{font-size:var(--fs-body); color:var(--ink-soft); line-height:1.5;}

/* ---------- table preview (homepage) ---------- */
.table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:var(--shadow);}
table{border-collapse:collapse; width:100%; min-width:820px;}
thead th{
  text-align:left; font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs);
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
  background:var(--surface-2); padding:14px 20px; border-bottom:2px solid var(--line);
  cursor:pointer; user-select:none; white-space:nowrap;
}
thead th:hover{color:var(--accent);}
thead th.no-sort{cursor:default;}
thead th .arrow{opacity:.4; margin-left:4px; font-size:10px;}
thead th.active .arrow{opacity:1; color:var(--accent);}
tbody td{padding:16px 20px; border-bottom:1px solid var(--line); vertical-align:top; font-size:var(--fs-body);}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}
td.provider{font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:var(--fs-base);}
td.provider a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);}
td.provider a:hover{color:var(--accent); border-color:var(--accent);}
td.price{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:var(--fs-body);}
td .sub{display:block; font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); color:var(--ink-faint); font-weight:400; margin-top:2px;}
.badge{display:inline-block; font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:var(--fs-xs); padding:5px 12px; border-radius:var(--r-pill); white-space:nowrap;}
.badge.full{background:var(--teal-soft); color:var(--teal-ink);}
.badge.partial{background:var(--stamp-soft); color:var(--stamp-ink);}
.badge.none{background:var(--surface-2); color:var(--ink-faint);}
.badge.deal{background:var(--teal-soft); color:var(--teal-ink);}
.badge.cat-wearables{background:var(--cat-wearables-soft); color:var(--cat-wearables);}
.badge.cat-sleep{background:var(--cat-sleep-soft); color:var(--blue-ink);}
.badge.cat-recovery{background:var(--cat-recovery-soft); color:var(--teal-ink);}
.badge.cat-skin{background:var(--cat-skin-soft); color:var(--skin-ink);}
.badge.cat-bodycomp{background:var(--cat-bodycomp-soft); color:var(--stamp-ink);}
.badge.cat-glucose{background:var(--cat-glucose-soft); color:var(--glucose-ink);}
.badge.cat-clinician{background:var(--cat-clinician-soft); color:var(--cat-clinician);}
.badge.cat-pathology{background:var(--cat-pathology-soft); color:var(--teal-ink);}
.badge.cat-imaging{background:var(--cat-imaging-soft); color:var(--stamp-ink);}
.badge.cat-dna{background:var(--cat-dna-soft); color:var(--blue-ink);}
.cat-badges{display:flex; flex-wrap:wrap; gap:4px;}
.deal-note{display:block; font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); color:var(--ink-faint); margin-top:3px;}
.fact.news{grid-column:1/-1; border-left:3px solid var(--teal); padding-left:12px;}
.visit-link{font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); white-space:nowrap;}
.table-more{margin-top:14px; font-size:var(--fs-body); color:var(--ink-soft);}

/* ---------- filter pills ---------- */
.filter-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
.filter-pill{
  font-family:"Plus Jakarta Sans",sans-serif; font-size:var(--fs-sm); font-weight:600;
  background:var(--surface); color:var(--ink-soft); border:1.5px solid var(--line);
  border-radius:var(--r-pill); padding:8px 16px; cursor:pointer;
}
.filter-pill .mono{font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); margin-left:4px; opacity:.7;}
.filter-pill:hover{border-color:var(--accent); color:var(--ink);}
.filter-pill.active{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.filter-pill.active .mono{opacity:.85;}
tbody tr.hidden-row{display:none;}
.card.hidden-row{display:none;}

/* ---------- quiz promo band ---------- */
.quiz-promo{
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface-2);
  box-shadow:none; padding:30px 32px; display:flex; flex-wrap:wrap;
  gap:20px; align-items:center; justify-content:space-between;
}
.quiz-promo .qp-copy{flex:1 1 380px;}
.quiz-promo h3{font-size:var(--fs-lg); font-weight:800; margin-bottom:8px;}
.quiz-promo p{color:var(--ink-soft); font-size:var(--fs-base); max-width:56ch;}

/* ---------- ruled-out callout ---------- */
.ruledout{
  margin-top:22px; border:1px solid var(--flag); border-left-width:4px; border-radius:var(--r-sm);
  background:var(--flag-soft); padding:18px 20px;
}
.ruledout h3{font-size:var(--fs-body); font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; color:var(--flag-ink); margin-bottom:8px;}
.ruledout ul{margin:0; padding-left:20px; font-size:var(--fs-body); color:var(--ink-soft);}
.ruledout li{margin-bottom:4px;}
.ruledout b{color:var(--ink);}

/* ---------- provider cards ---------- */
.cards{display:flex; flex-direction:column; gap:16px;}
.card{
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface);
  box-shadow:var(--shadow); overflow:hidden; scroll-margin-top:24px;
}
.card > summary{
  list-style:none; cursor:pointer; padding:22px 24px; display:flex;
  align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.card > summary::-webkit-details-marker{display:none;}
.card-head-left{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;}
.card-head-left .avatar{align-self:center; width:30px; height:30px; font-size:var(--fs-xs);}
.card[data-region="global"] .card-head-left .avatar{background:var(--stamp-soft); color:var(--stamp-ink);}
.card-name{font-family:"Plus Jakarta Sans",sans-serif; font-size:var(--fs-lg); font-weight:700;}
.card-tag{font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); color:var(--ink-faint);}
.card-price{font-family:"IBM Plex Mono",monospace; font-size:var(--fs-body); font-weight:700; color:var(--accent);}
.toggle-icon{font-family:"IBM Plex Mono",monospace; color:var(--ink-faint); font-size:var(--fs-xs); flex-shrink:0;}
.card[open] .toggle-icon::before{content:"– collapse";}
.card:not([open]) .toggle-icon::before{content:"+ full profile";}
.card-teaser{flex:1 0 100%; margin:0; font-size:var(--fs-body); color:var(--ink-soft); line-height:1.5; max-width:70ch;}
.card[open] .card-teaser{display:none;}

.card-body{padding:0 24px 26px; border-top:1px solid var(--line); padding-top:20px;}
.service-note{
  background:var(--stamp-soft); color:var(--stamp-ink); border-radius:var(--r-sm); padding:12px 16px;
  font-size:var(--fs-body); margin-bottom:18px;
}
.angle{font-size:var(--fs-base); color:var(--ink); max-width:70ch; margin-bottom:18px;}
.angle::before{content:"\2192  "; color:var(--accent); font-weight:700;}
.credential{color:var(--ink-soft); font-size:var(--fs-base); max-width:70ch; margin-bottom:14px;}

.marker-grid{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px;}
.marker{
  font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); padding:6px 10px; border-radius:var(--r-sm);
  border:1px solid var(--line); display:flex; gap:6px; align-items:center;
}
.marker .k{color:var(--ink-soft);}
.marker.yes{background:var(--teal-soft); border-color:transparent;}
.marker.yes .k{color:var(--teal-ink); font-weight:700;}
.marker.addon{background:var(--stamp-soft); border-color:transparent;}
.marker.addon .k{color:var(--stamp-ink);}
.marker.no .k{color:var(--ink-faint);}

.fact-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px 24px;
  margin-bottom:20px;
}
.fact dt{
  font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:5px;
}
.fact dd{margin:0; font-size:var(--fs-body); color:var(--ink); line-height:1.5;}

.card-footer{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  border-top:1px solid var(--line); padding-top:16px; margin-top:20px;
  font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); color:var(--ink-faint);
}
.card-footer a{color:var(--ink-soft);}

.reclist{margin:0; padding-left:1.3em;}
.reclist li{margin-bottom:9px; font-size:var(--fs-base); color:var(--ink); line-height:1.55;}
.reclist li::marker{font-family:"IBM Plex Mono",monospace; font-size:.85em; color:var(--accent);}
.reclist li:last-child{margin-bottom:0;}

.crossref{
  border:1px dashed var(--line); border-radius:var(--r-card); background:var(--surface);
  padding:16px 20px; font-size:var(--fs-body); color:var(--ink-soft); margin-bottom:16px;
}
.crossref a{color:var(--accent); font-weight:700;}

/* ---------- rank table (thought leaders consensus) ---------- */
.rank-table{display:flex; flex-direction:column;}
.rank-row{
  display:grid; grid-template-columns:160px 1fr 54px; align-items:center; gap:16px;
  padding:14px 0; border-top:1px solid var(--line);
}
.rank-row:first-child{border-top:none; padding-top:4px;}
.rank-name{font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:var(--fs-body); color:var(--ink);}
.rank-bar-track{height:9px; border-radius:var(--r-sm); background:var(--surface-2); overflow:hidden;}
.rank-bar-fill{height:100%; background:var(--accent); border-radius:var(--r-sm);}
.rank-score{font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); color:var(--accent); text-align:right; font-weight:700;}
.rank-who{
  grid-column:2 / 3; margin-top:6px; font-size:var(--fs-xs); color:var(--ink-faint);
  font-family:"IBM Plex Mono",monospace;
}
.rank-who a{color:var(--ink-faint);}
.rank-single{font-size:var(--fs-body); color:var(--ink-soft); margin-top:16px; padding-top:16px; border-top:1px solid var(--line);}
.rank-single a{color:var(--ink-soft); text-decoration:underline;}
@media (max-width:640px){ .rank-row{grid-template-columns:110px 1fr 40px; gap:10px;} }

/* ---------- longevity tech tiers (kept for internal/future use) ---------- */
.tier{margin-bottom:22px;}
.tier:last-child{margin-bottom:0;}
.tier-h{font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:var(--fs-body); color:var(--ink); margin-bottom:8px; display:flex; align-items:center; gap:8px;}
.tier-h .mono{font-weight:500; color:var(--ink-faint); font-size:var(--fs-xs);}
.tier ul{margin:0; padding-left:1.2em;}
.tier li{font-size:var(--fs-body); color:var(--ink-soft); margin-bottom:7px; line-height:1.5;}
.tier li:last-child{margin-bottom:0;}
.tier li b{color:var(--ink);}
.tier li a{color:var(--ink); font-weight:700;}

/* ---------- methodology / prose ---------- */
.method{
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface);
  padding:28px 30px; box-shadow:var(--shadow);
}
.method p{color:var(--ink-soft); font-size:var(--fs-body); max-width:70ch;}
.method p + p{margin-top:12px;}
.method strong{color:var(--ink);}
.method h3{font-size:var(--fs-base); color:var(--ink); margin-top:22px; margin-bottom:6px;}
.method h3:first-child{margin-top:0;}
.method ul{color:var(--ink-soft); font-size:var(--fs-body); max-width:70ch; padding-left:1.3em;}
.method li{margin-bottom:6px;}

/* ---------- FAQ ---------- */
.faq{display:flex; flex-direction:column; gap:2px;}
.faq-item{border-bottom:1px solid var(--line); padding:18px 2px;}
.faq-item:first-child{border-top:1px solid var(--line);}
.faq-q{font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:var(--fs-md); margin-bottom:8px;}
.faq-a{color:var(--ink-soft); font-size:var(--fs-base); max-width:70ch;}
.faq-a .cite{color:var(--ink-faint); font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs);}

/* ---------- quiz ---------- */
.quiz-shell{max-width:640px; margin:0 auto;}
.quiz-progress{display:flex; align-items:center; gap:6px; margin-bottom:8px;}
.quiz-progress .step-dot{flex:1; height:4px; border-radius:var(--r-sm); background:var(--line);}
.quiz-progress .step-dot.done{background:var(--accent);}
.quiz-progress .step-dot.now{background:var(--stamp);}
.quiz-step-label{font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:18px;}
.quiz-q{font-size:var(--fs-xl); font-weight:800; margin-bottom:8px;}
.quiz-sub{color:var(--ink-soft); font-size:var(--fs-base); margin-bottom:24px; max-width:56ch;}
.option-grid{display:flex; flex-direction:column; gap:10px; margin-bottom:28px;}
.option-grid.two-col{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.option-card{
  border:1.5px solid var(--line); border-radius:var(--r-card); background:var(--surface);
  padding:16px 18px; cursor:pointer; text-align:left; font-family:"Plus Jakarta Sans",sans-serif; width:100%;
}
.option-card:hover{border-color:var(--accent);}
.option-card.selected{border-color:var(--accent); background:var(--accent-soft);}
.option-card .opt-title{display:block; font-weight:700; font-size:var(--fs-base); color:var(--ink); margin-bottom:4px;}
.option-card .opt-note{display:block; font-size:var(--fs-xs); color:var(--ink-soft); line-height:1.45;}
.option-card.selected .opt-title{color:var(--accent);}
.checkbox-row{
  display:flex; align-items:flex-start; gap:10px; border:1px solid var(--line); border-radius:var(--r-card);
  padding:14px 16px; margin-bottom:12px; background:var(--surface); font-size:var(--fs-body); color:var(--ink-soft);
}
.checkbox-row input{margin-top:3px; flex-shrink:0; width:16px; height:16px;}
.field-row{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.field-row label{font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);}
.field-row input[type=text],.field-row input[type=email],.field-row textarea{
  font-family:"Plus Jakarta Sans",sans-serif; font-size:var(--fs-body); padding:12px 15px; border:1.5px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); color:var(--ink);
}
.field-row textarea{resize:vertical; line-height:1.5;}
.quiz-nav{display:flex; justify-content:space-between; gap:12px; margin-top:8px;}
.quiz-trust{font-size:var(--fs-xs); color:var(--ink-faint); margin-top:16px; max-width:56ch;}
.result-card{
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:var(--shadow);
  padding:22px 24px; margin-bottom:14px;
}
.result-rank{font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); color:var(--accent); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px;}
.result-head{display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:8px;}
.result-name{font-family:"Plus Jakarta Sans",sans-serif; font-size:var(--fs-lg); font-weight:700;}
.result-price{font-family:"IBM Plex Mono",monospace; font-weight:700; color:var(--accent);}
.result-why{font-size:var(--fs-body); color:var(--ink-soft); margin-bottom:10px;}
.result-why b{color:var(--ink);}
.result-meta{font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); color:var(--ink-faint); display:flex; gap:16px; flex-wrap:wrap;}
.fallback-note{
  border:1px solid var(--stamp); background:var(--stamp-soft); color:var(--stamp-ink);
  border-radius:var(--r-sm); padding:12px 16px; font-size:var(--fs-body); margin-bottom:18px;
}
.result-section{margin-bottom:32px;}
.result-section:last-child{margin-bottom:0;}
.result-section-head{margin-bottom:14px;}
.result-section-label{font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--accent);}
.result-section-title{font-family:"Plus Jakarta Sans",sans-serif; font-size:var(--fs-lg); font-weight:700; margin-top:2px;}
.result-section-note{font-size:var(--fs-body); color:var(--ink-soft); margin-top:4px;}
.managed-badge{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); font-weight:600; background:var(--accent-soft); color:var(--accent); border-radius:var(--r-pill); padding:3px 10px; margin-left:8px; vertical-align:middle;}

/* ---------- footer ---------- */
footer.site-footer{
  margin-top:60px; padding:24px; border-top:1px solid var(--line);
  text-align:center; font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); color:var(--ink-faint);
}
.footer-nav{display:flex; justify-content:center; gap:20px; flex-wrap:wrap; margin-bottom:10px; font-family:"Plus Jakarta Sans",sans-serif; font-size:var(--fs-xs);}
.footer-nav a{color:var(--ink-soft); text-decoration:none;}
.footer-nav a:hover{color:var(--accent);}
.footer-region{margin-bottom:10px; font-family:"Plus Jakarta Sans",sans-serif; font-size:var(--fs-xs); color:var(--ink-faint);}
.footer-region a{color:var(--ink-soft);}
.footer-region a:hover{color:var(--accent);}
.footer-region-current{color:var(--ink-soft); font-weight:600;}

@media (max-width:640px){
  header.top{padding:32px 20px 24px;}
  section{padding:40px 20px 0;}
  .wrap{padding:0 20px 80px;}
  .quiz-q{font-size:var(--fs-lg);}
}

/* ============================================================
   Premium editorial pass — 7 Sep 2026 (kept, recoloured 24 Sep)
   Two layers below: (1) sitewide motion/interaction polish that
   every page already benefits from with no markup changes, and
   (2) homepage-only components (hero grid, stamp seal, category
   icons, table avatars). See docs/01-domain-migration-status.md.
   ============================================================ */

/* ---- 1. Sitewide motion polish ---- */
.btn,.cat-card,.pillar-card,.path-card,.quiz-promo,nav.sitenav a,.filter-pill,.option-card,
td.provider a,.card>summary,.brandmark{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease,
             color .18s ease, background-color .18s ease, opacity .18s ease;
}
.btn.primary:hover{transform:translateY(-1px); box-shadow:0 14px 26px -8px rgba(94,80,208,.55);}
.btn.secondary:hover{transform:translateY(-1px);}
.btn .arrow{display:inline-block; transition:transform .18s ease;}
.btn:hover .arrow{transform:translateX(3px);}
.cat-card:hover,.pillar-card:hover,.path-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-hover);}
.quiz-promo:hover{box-shadow:0 14px 30px -16px rgba(94,80,208,.18);}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.001ms!important; animation-duration:.001ms!important; scroll-behavior:auto!important;}
}

/* ---- 2. Homepage hero: editorial two-column layout ---- */
header.hero-editorial{
  border-bottom:1px solid var(--line); padding:56px 24px 36px;
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:20px 20px; background-position:-10px -10px;
}
.hero-grid{
  max-width:1080px; margin:0 auto; display:grid;
  grid-template-columns:1fr auto; gap:52px; align-items:start;
}
.hero-copy{min-width:0;}
.eyebrow-rule{display:inline-flex; align-items:center; gap:10px; margin-bottom:14px;}
.eyebrow-rule .rule{width:28px; height:1px; background:var(--accent); display:inline-block;}
.eyebrow-rule .eyebrow{margin-bottom:0;}

/* ---- Hero preview card (6 Oct 2026; replaced the logo "stamp seal") ----
   Three real rows from the comparison table, so the hero shows the product
   itself. Curated by hand like the homepage preview table. */
.hero-preview{
  display:flex; flex-direction:column; width:340px; flex-shrink:0; margin-top:6px;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface);
  box-shadow:var(--shadow); padding:18px 20px 16px; text-decoration:none; color:var(--ink);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hero-preview:hover{transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:var(--accent-light);}
.hero-preview:active{transform:translateY(-1px);}
.hp-head{font-size:var(--fs-xs); color:var(--ink-soft); padding-bottom:10px;}
.hp-row{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line);}
.hp-row .avatar{width:32px; height:32px;}
.hp-name{flex:1; min-width:0; font-weight:700; font-size:var(--fs-body); line-height:1.3;}
.hp-cat{display:block; font-weight:400; font-size:var(--fs-xs); color:var(--ink-soft);}
.hp-price{font-weight:600; font-size:var(--fs-body); white-space:nowrap;}
.hp-foot{font-size:var(--fs-xs); color:var(--ink-soft); padding-top:12px; border-top:1px solid var(--line);}
.hp-foot b{color:var(--ink); white-space:nowrap;}
.trust-band-lead{margin:36px 0 0; max-width:none;}
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr; gap:32px;}
  .hero-preview{width:auto; max-width:440px; margin-top:0;}
}

/* ---- Category cards: icon + editorial numbering ---- */
.cat-card{position:relative;}
.cat-card .cat-num{
  position:absolute; top:20px; right:22px; font-family:"IBM Plex Mono",monospace;
  font-size:var(--fs-xs); color:var(--ink-faint);
}
.cat-icon{
  width:44px; height:44px; border-radius:var(--r-card); background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.cat-icon svg{width:22px; height:22px; color:var(--accent); stroke-width:2;}
.cat-icon.i-teal{background:var(--teal-soft);}
.cat-icon.i-teal svg{color:var(--teal);}
.cat-icon.i-orange{background:var(--stamp-soft);}
.cat-icon.i-orange svg{color:var(--stamp);}
.cat-icon.i-blue{background:var(--cat-dna-soft);}
.cat-icon.i-blue svg{color:var(--cat-dna);}

/* ---- Table preview: initial avatars ---- */
td.provider{display:flex; align-items:center; gap:10px;}
.avatar{
  width:26px; height:26px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:var(--fs-xs);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  overflow:hidden;
}
/* Provider logo chip: fixed white backing regardless of site theme, since most
   brand marks assume a light background — same box size as the text-initial
   fallback above so rows stay aligned whether or not a logo has been sourced yet. */
.avatar:has(img){background:#fff; border:1px solid var(--line);}
.avatar img{width:100%; height:100%; object-fit:contain; padding:4px; box-sizing:border-box;}

/* ---- Trust band icon ---- */
.trust-band{display:flex; gap:12px; align-items:flex-start;}
.trust-band svg{width:18px; height:18px; color:var(--accent); flex-shrink:0; margin-top:1px;}
.trust-band .tb-text{flex:1;}

/* ============================================================
   Guide page — 7 Sep 2026 (pillar grid + two-path cards)
   ============================================================ */
.pillar-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px;}
.pillar-card{
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface);
  box-shadow:var(--shadow); padding:22px 22px 24px;
}
.pillar-icon{width:40px; height:40px; border-radius:var(--r-card); background:var(--accent-soft); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.pillar-icon svg{width:20px; height:20px; color:var(--accent);}
.pillar-card h3{font-size:var(--fs-base); font-weight:700; margin-bottom:6px;}
.pillar-card p{font-size:var(--fs-body); color:var(--ink-soft); line-height:1.5;}

.path-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px;}
.path-card{
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface);
  box-shadow:var(--shadow); padding:28px 28px 26px;
}
.path-icon{width:46px; height:46px; border-radius:var(--r-card); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.path-icon svg{width:23px; height:23px;}
.path-card.managed .path-icon{background:var(--accent-soft);}
.path-card.managed .path-icon svg{color:var(--accent);}
.path-card.diy .path-icon{background:var(--stamp-soft);}
.path-card.diy .path-icon svg{color:var(--stamp);}
.path-card h3{font-size:var(--fs-lg); margin-bottom:8px;}
.path-card > p{font-size:var(--fs-base); color:var(--ink-soft); line-height:1.55;}
.path-card ul{margin:16px 0 20px; padding-left:1.2em;}
.path-card li{font-size:var(--fs-body); color:var(--ink-soft); margin-bottom:7px; line-height:1.5;}
.path-card li b{color:var(--ink);}

/* ============================================================
   Research page — 10 Sep 2026
   Reuses .cards/.card/.card-footer/.badge/.fact-grid/.toggle-icon
   as-is; only the pieces genuinely specific to a research entry
   (tag row, gist line, expand-row) are new.
   ============================================================ */
.research-tags{display:flex; gap:8px; align-items:center; margin-bottom:11px; flex-wrap:wrap; flex:1 0 100%;}
.research-gist{font-size:var(--fs-base); color:var(--ink-soft); max-width:64ch;}
.research-meta{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:14px; flex:1 0 100%;}
/* .card-name sits as a direct child of <summary> only in this research/glossary
   card pattern (elsewhere it's nested inside .card-head-left) — force it onto
   its own full-width row so it can never get pulled to the row's right edge
   by justify-content:space-between when a short title leaves room for the
   next flex item (.card-teaser/.research-gist) to join the same line. */
.card > summary > .card-name{flex:1 0 100%; margin:2px 0 0;}
.card.research[open] .toggle-icon::before{content:"– hide the technical bit";}
.card.research:not([open]) .toggle-icon::before{content:"+ the technical bit";}
.badge.strong-evidence{background:var(--teal-soft); color:var(--teal-ink);}
.badge.moderate-evidence{background:var(--stamp-soft); color:var(--stamp-ink);}
.badge.early-evidence{background:var(--surface-2); color:var(--ink-faint);}

/* ============================================================
   Supplements page (added 11 Sep 2026)
   Two paths (individual ingredients vs. all-in-one stacks),
   reusing .card/.badge/.service-note/.section-* as-is. Classes
   below are prefixed .supp- since a bare .tier already exists
   (used elsewhere) with an unrelated meaning — do not rename
   that one to "fix" this, they're deliberately kept apart.
   ============================================================ */
.supp-path-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:8px;}
@media (max-width:640px){.supp-path-row{grid-template-columns:1fr;}}
.supp-path-card{
  display:block; text-decoration:none; color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r-card); background:var(--surface); box-shadow:var(--shadow); padding:24px 26px;
}
.supp-path-eyebrow{font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px;}
.supp-path-card.p1 .supp-path-eyebrow, .supp-path-card.p1 .supp-path-arrow{color:var(--accent);}
.supp-path-card.p2 .supp-path-eyebrow, .supp-path-card.p2 .supp-path-arrow{color:var(--stamp-ink);}
.supp-path-title{font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:var(--fs-lg); margin-bottom:8px;}
.supp-path-desc{font-size:var(--fs-body); color:var(--ink-soft); margin:0;}
.supp-path-arrow{font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); margin-top:14px; display:block;}

.supp-tier-chooser{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:640px){.supp-tier-chooser{grid-template-columns:1fr;}}
.supp-tier-choice{display:block; text-decoration:none; text-align:center; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:var(--shadow); padding:28px 22px;}
.supp-tier-icon{width:34px; height:34px; margin-bottom:14px;}
.supp-tier-choice[data-tier="1"] .supp-tier-icon, .supp-tier-choice[data-tier="1"] .supp-tier-label{color:var(--accent);}
.supp-tier-choice[data-tier="2"] .supp-tier-icon, .supp-tier-choice[data-tier="2"] .supp-tier-label{color:var(--stamp-ink);}
.supp-tier-choice[data-tier="3"] .supp-tier-icon, .supp-tier-choice[data-tier="3"] .supp-tier-label{color:var(--ink-faint);}
.supp-tier-label{font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); letter-spacing:.06em; margin-bottom:8px;}
.supp-tier-name{font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:var(--fs-lg); color:var(--ink); margin-bottom:6px;}
.supp-tier-evidence{font-size:var(--fs-xs); color:var(--ink-soft);}

.supp-tier-section{padding:36px 0; border-top:1px solid var(--line); scroll-margin-top:24px;}
.supp-tier-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:6px;}
.supp-tier-num{font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); padding:4px 12px; border-radius:var(--r-pill); font-weight:700;}
.supp-tier-section[data-tier="1"] .supp-tier-num{background:var(--accent-soft); color:var(--accent);}
.supp-tier-section[data-tier="2"] .supp-tier-num{background:var(--stamp-soft); color:var(--stamp-ink);}
.supp-tier-section[data-tier="3"] .supp-tier-num{background:var(--surface-2); color:var(--ink-faint);}
.supp-tier-role{font-size:var(--fs-base); color:var(--ink-soft); max-width:62ch; margin:8px 0 24px;}

.supp-ingredients{display:flex; flex-direction:column; gap:14px;}
.supp-ingredient{padding:20px 22px;}
.supp-ing-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:8px;}
.supp-ing-meta{display:flex; gap:16px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--ink-faint); font-family:"IBM Plex Mono",monospace; margin:10px 0;}
.supp-who-agrees{display:inline-flex; align-items:center; gap:6px; font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); color:var(--ink-faint);}

.supp-stacks{display:flex; flex-direction:column; gap:20px;}
.supp-stack{padding:22px 24px;}
.supp-stack-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:6px;}
.stack-head-left{display:flex; align-items:center; gap:10px;}
.supp-stack-price{font-family:"IBM Plex Mono",monospace; font-size:var(--fs-body); color:var(--ink-soft); white-space:nowrap;}
.supp-stack-tag{font-size:var(--fs-body); color:var(--ink-faint); margin-bottom:16px;}
.supp-comp-label{font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px;}
.supp-comp-bar{display:flex; height:22px; border-radius:var(--r-sm); overflow:hidden; margin-bottom:12px; border:1px solid var(--line);}
.supp-comp-seg{display:flex; align-items:center; justify-content:center; font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); font-weight:600; white-space:nowrap; overflow:hidden;}
.supp-comp-seg.t1{background:var(--accent-soft); color:var(--accent);}
.supp-comp-seg.t2{background:var(--stamp-soft); color:var(--stamp-ink);}
.supp-comp-seg.t3{background:var(--surface-2); color:var(--ink-faint);}
.supp-category-chips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px;}
.supp-category-chip{font-family:"IBM Plex Mono",monospace; font-size:var(--fs-xs); padding:5px 11px; border-radius:var(--r-pill); background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line);}
.supp-too-big{background:var(--surface-2); color:var(--ink-soft); border-radius:var(--r-sm); padding:12px 14px; font-size:var(--fs-body); margin-bottom:14px;}
.supp-undosed{font-size:var(--fs-xs); color:var(--ink-faint); margin:-4px 0 14px;}

/* ---------- Mobile / tablet menu (added 28 Sep 2026) ----------
   Below 860px the nav (5 items since 28 Sep 2026; 8 before) no longer fits beside the wordmark and
   wrapped onto 2-3 lines (163px header on phones). The links now sit
   behind a Menu button. Only applies once nav.js has run (html.js-nav),
   so without JavaScript the old wrapping nav still shows. */
.nav-toggle{display:none;}
@media (max-width:859px){
  html.js-nav .nav-toggle{
    display:inline-flex; align-items:center; gap:8px;
    min-height:44px; padding:0 14px; margin-left:auto;
    border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface);
    color:var(--ink); font:600 14px/1 "Plus Jakarta Sans",sans-serif; cursor:pointer;
  }
  html.js-nav .nav-toggle:hover{border-color:var(--accent);}
  html.js-nav .nav-toggle-bars{display:inline-block; width:16px; height:10px; position:relative;
    border-top:2px solid currentColor; border-bottom:2px solid currentColor; box-sizing:border-box;}
  html.js-nav .nav-toggle-bars::after{content:""; position:absolute; left:0; right:0; top:2px; border-top:2px solid currentColor;}
  html.js-nav .nav-toggle[aria-expanded="true"] .nav-toggle-bars{border-color:transparent;}
  html.js-nav .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{top:2px; transform:rotate(45deg);}
  html.js-nav .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{content:""; position:absolute; left:0; right:0; top:2px; border-top:2px solid currentColor; transform:rotate(-45deg);}
  html.js-nav nav.sitenav{display:none;}
  html.js-nav nav.sitenav.open{display:flex; flex-direction:column; gap:0; flex-basis:100%; padding:6px 0 4px;}
  html.js-nav nav.sitenav.open a{font-size:var(--fs-base); min-height:44px; display:flex; align-items:center; border-top:1px solid var(--line);}
}
@media (prefers-reduced-motion: no-preference){
  html.js-nav .nav-toggle-bars::after, html.js-nav .nav-toggle-bars::before{transition:transform .15s ease;}
}

/* ---------- All-in-one stacks table (supplements.html, 28 Sep 2026) ----------
   Reuses the provider-table look. Sorting uses real <button>s inside the
   header cells (keyboard reachable, aria-sort updated by script), each with a
   44px-tall hit area. The tier mix always carries text numbers beside the bar,
   so the colour is never the only signal. */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.stacks-table{min-width:880px;}
.stacks-table thead th{padding:0; cursor:default;}
.stacks-table thead th.no-sort{padding:14px 20px;}
.stacks-table thead th button{
  all:unset; box-sizing:border-box; display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  width:100%; min-height:44px; padding:14px 20px; cursor:pointer;
  font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit;
}
.stacks-table thead th button:hover{color:var(--accent);}
.stacks-table thead th button:focus-visible{outline:2px solid var(--accent); outline-offset:-3px; border-radius:var(--r-sm);}
.stacks-table thead th .th-sub{display:block; flex-basis:100%; text-transform:none; letter-spacing:0;}
.stacks-table thead th.active .arrow{opacity:1; color:var(--accent);}
.stacks-table td.provider a{font-size:var(--fs-body);}
.stacks-table td.num{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:var(--fs-body); white-space:nowrap;}
.stacks-table td.price{font-variant-numeric:tabular-nums; white-space:nowrap;}
.stacks-table td .sub{display:block; font-family:"Plus Jakarta Sans",sans-serif; white-space:normal;}
.stacks-table td .badge + .sub{margin-top:4px;}
.stacks-table .mix-bar{display:flex; width:120px; height:10px; border-radius:var(--r-pill); overflow:hidden; background:var(--line); margin-bottom:6px;}
.stacks-table .mix-bar .t1{background:var(--accent);}
.stacks-table .mix-bar .t2{background:var(--stamp);}
.stacks-table .mix-bar .t3{background:var(--ink-faint);}
.stacks-table .mix-text{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:var(--fs-xs); color:var(--ink-soft);}
.table-footnote{font-size:var(--fs-body); color:var(--ink-soft); margin-top:14px; max-width:78ch;}
/* keep the name cell a real table cell (the shared td.provider rule makes it
   display:flex, which breaks row alignment); flex lives on the inner .prov */
.stacks-table td.provider{display:table-cell; vertical-align:middle;}
.stacks-table td.provider .prov{display:flex; align-items:center; gap:10px;}
.stacks-table tbody td{vertical-align:middle;}
.stacks-table thead th button{display:block; white-space:nowrap;}
.stacks-table thead th .th-sub{white-space:normal;}

/* ---------- 5-item nav with "Learn" disclosure (28 Sep 2026) ----------
   Compare · Longevity products · Supplements · Learn ▾ · Take the quiz.
   Learn is a native <details>, so it opens on click/tap/Enter (never hover-only)
   and works without JavaScript; nav.js adds close-on-outside-click / Escape. */
nav.sitenav{align-items:center;}
.nav-learn{position:relative;}
.nav-learn > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px;
  font-size:var(--fs-sm); font-weight:600; color:var(--ink); border-radius:var(--r-sm);
}
.nav-learn > summary::-webkit-details-marker{display:none;}
.nav-learn > summary::after{
  content:""; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.nav-learn[open] > summary::after{transform:translateY(1px) rotate(-135deg);}
.nav-learn > summary:hover, .nav-learn > summary.current{color:var(--accent);}
.nav-learn > summary:focus-visible{outline:2px solid var(--accent); outline-offset:4px;}
.nav-learn-menu{
  position:absolute; top:calc(100% + 14px); left:-14px; z-index:60; min-width:220px;
  display:flex; flex-direction:column; padding:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-hover);
}
nav.sitenav .nav-learn-menu a{padding:10px 12px; border-radius:var(--r-sm); min-height:40px; display:flex; align-items:center;}
nav.sitenav .nav-learn-menu a:hover{background:var(--accent-soft);}
nav.sitenav a.nav-cta{
  background:var(--accent); color:var(--on-accent); padding:9px 16px; border-radius:var(--r-pill);
  box-shadow:0 8px 18px -8px rgba(94,80,208,.55);
}
nav.sitenav a.nav-cta:hover{color:var(--on-accent); opacity:.94;}
nav.sitenav a.nav-cta.current{outline:2px solid var(--accent); outline-offset:2px;}
@media (max-width:859px){
  html.js-nav nav.sitenav.open .nav-learn{border-top:1px solid var(--line);}
  html.js-nav nav.sitenav.open .nav-learn > summary{min-height:44px; font-size:var(--fs-base);}
  html.js-nav nav.sitenav.open .nav-learn-menu{position:static; box-shadow:none; border:none; padding:0 0 6px 14px; min-width:0; background:transparent;}
  html.js-nav nav.sitenav.open .nav-learn-menu a{border-top:none; min-height:44px; padding:0 4px; border-radius:0;}
  html.js-nav nav.sitenav.open a.nav-cta{justify-content:center; margin-top:10px; border-top:none; padding:0 16px;}
}

/* ---------- Feedback motion (6 Oct 2026, taste-skill review item 7) ----------
   Press feedback on everything clickable, a quiet hover on expandable cards,
   and a short fade when a filter reveals cards. All of it is switched off by
   the prefers-reduced-motion block near the top of the file. */
.btn:active,.filter-pill:active,nav.sitenav a.nav-cta:active,.option-card:active,.nav-toggle:active{transform:translateY(1px) scale(.98);}
.cat-card:active,.pillar-card:active,.path-card:active,.supp-path-card:active,.supp-tier-choice:active{transform:translateY(-2px);}
.card{transition:border-color .18s ease, box-shadow .18s ease;}
.card:hover{border-color:var(--accent-light); box-shadow:var(--shadow-hover);}
.supp-path-card,.supp-tier-choice{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.supp-path-card:hover,.supp-tier-choice:hover{transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--accent-light);}
@media (prefers-reduced-motion: no-preference){
  .cards > .card{animation:card-in .28s cubic-bezier(.16,1,.3,1) both;}
}
@keyframes card-in{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* ---------- Thought leaders: grouped 2-column directory (6 Oct 2026) ----------
   Cards sit two-up from 900px; an opened profile, the group headings and the
   cross-reference note span both columns. "dense" back-fills the gap an opened
   card leaves, so the grid never shows a hole. */
.tl-grid{display:grid; grid-template-columns:1fr; gap:16px;}
.tl-group{font-size:var(--fs-md); font-weight:700; margin:10px 0 -2px;}
.tl-group:first-child{margin-top:0;}
.tl-grid > .crossref{margin-bottom:0;}
.tl-group.hidden-row,.tl-grid > .crossref.hidden-row{display:none;}
@media (min-width:900px){
  .tl-grid{grid-template-columns:1fr 1fr; grid-auto-flow:row dense; align-items:start;}
  .tl-grid > .tl-group,.tl-grid > .crossref,.tl-grid > .card[open]{grid-column:1 / -1;}
}

/* Tier-mix bar labels went to 13px with the type scale; let a narrow segment
   grow just enough to show its label on phones instead of clipping it. */
.supp-comp-seg{min-width:max-content; padding:0 4px;}
@media (max-width:480px){
  .supp-stack{padding:20px 16px;}
  .supp-comp-seg{padding:0 2px; letter-spacing:-.03em;}
}
@media (max-width:359px){
  .supp-comp-bar{flex-wrap:wrap; height:auto;}
  .supp-comp-seg{min-height:22px; flex-grow:1;}
}