/* =====================================================================
   NutriStack — shared site styles
   "True app match" — mirrors the iOS app's refreshed UI (May 2026):
   teal as the primary interactive accent (selected tabs, action pills,
   evidence badges), terracotta retained as the brand-mark color, a
   multi-hue pastel palette for category surfaces, and a slightly cooler
   cream background. SF Pro system type, soft cards, score rings, pill tags.
   ===================================================================== */

:root {
  color-scheme: light dark;

  /* --- Surfaces (sampled from new app screenshots 2026-05-24, v2 set) --- */
  --bg:          #F8F7F4;   /* slightly cooler cream — closer to in-app */
  --bg-grad-top: #FBFAF7;
  --bg-grad-bot: #F1EFEB;
  --surface:     #FFFFFF;
  --surface-2:   #F4F2EE;
  --surface-3:   #EBE9E4;   /* recessed / search-bar fill */

  /* --- Ink --- */
  --ink:        #1A1916;
  --ink-soft:   #56524C;
  --ink-faint:  #807B73;
  --ink-ghost:  #A8A39A;

  /* --- Lines --- */
  --line:       #E6E2D9;
  --line-soft:  #EFECE3;

  /* --- Accent (TEAL — sampled from selected "Interactions" tab + the
     "Open Pairwise Matrix" / "Tap to inspect" pills in IMG_3262) --- */
  --accent:       #2C7A8C;
  --accent-deep:  #1F6473;
  --accent-press: #143F4A;
  --accent-2:     #7DBFCB;
  --on-accent:    #F1FAFC;

  /* --- Brand mark (terracotta — kept for the wordmark "Stack" emphasis
     and the small "NutriStack" badge that still appears in IMG_3264) --- */
  --brand:        #C2603C;
  --brand-deep:   #A04E2D;
  --brand-soft:   #E8A87C;

  /* --- Category palette (sampled from new icon tiles + AI mode cards) --- */
  --cat-purple:   #7B68C9;   /* L-Citrulline, L-Theanine, chat bubble */
  --cat-pink:     #E8758E;   /* Heart Health, NAC card */
  --cat-blue:     #4A90D9;   /* Fish Oil, AI sparkle */
  --cat-mint:     #5BAE89;   /* Wellness AI tile */
  --cat-peach:    #E8A87C;   /* Vitamin D3 / K2 tile */

  /* --- Semantic (sampled: stronger green #3FA76A from new Protocol
     Score ring + "Logged" pills + interaction-graph lines) --- */
  --synergy:    #3FA76A;
  --synergy-deep: #2D8857;
  --warn:       #C98A2C;
  --info:       #4A90D9;

  /* --- Callout / care / legal boxes --- */
  --amber-bg:   #F8EDD4;
  --amber-line: #E9CF98;
  --amber-edge: #CC9A3C;

  --care-bg:    #E5EEE6;
  --care-line:  #C5D8C8;
  --care-edge:  #4F7C60;
  --care-ink:   #38614A;

  --legal-bg:   #F2EDE0;
  --legal-line: #E2D9C4;

  --ph-bg:      #F7DDCF;
  --ph-line:    #DC9E83;
  --ph-ink:     #9C3D1E;

  /* --- Depth --- */
  --shadow-xs:    0 1px 2px rgba(74,54,38,.07);
  --shadow-sm:    0 1px 2px rgba(74,54,38,.06), 0 5px 14px -6px rgba(74,54,38,.12);
  --shadow-md:    0 2px 5px rgba(74,54,38,.06), 0 16px 34px -14px rgba(74,54,38,.20);
  --shadow-lg:    0 6px 16px -8px rgba(74,54,38,.14), 0 40px 64px -30px rgba(74,54,38,.34);
  --shadow-float: 0 10px 24px -8px rgba(74,54,38,.20), 0 28px 52px -22px rgba(74,54,38,.30);
  --ring-glow:    0 0 0 1px rgba(255,255,255,.55) inset;

  /* --- Geometry --- */
  --r-xs:   9px;
  --r-sm:   14px;
  --r:      20px;
  --r-lg:   28px;
  --r-xl:   38px;
  --pill:   999px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;

  --maxw: 1120px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0F1416;
    --bg-grad-top: #131A1D;
    --bg-grad-bot: #0A0E10;
    --surface:     #18211F;   /* slightly desaturated teal-leaning charcoal */
    --surface-2:   #131A1D;
    --surface-3:   #0E1416;

    --ink:        #EEF2F1;
    --ink-soft:   #A8B3B1;
    --ink-faint:  #76817F;
    --ink-ghost:  #57625F;

    --line:       #1F2A2D;
    --line-soft:  #182124;

    --accent:       #6DB3C2;
    --accent-deep:  #94CCD7;
    --accent-press: #4F95A6;
    --accent-2:     #7DBFCB;
    --on-accent:    #0A1518;

    --brand:        #E89B78;
    --brand-deep:   #F1B695;
    --brand-soft:   #E8A87C;

    --cat-purple:   #9F8DDB;
    --cat-pink:     #F39AAE;
    --cat-blue:     #6FA9E7;
    --cat-mint:     #6FC8A0;
    --cat-peach:    #ECB791;

    --synergy:    #5DC089;
    --warn:       #DBA552;
    --info:       #6FA9E7;

    --amber-bg:   #2C2410;
    --amber-line: #5B491D;
    --amber-edge: #C99A3C;

    --care-bg:    #16241B;
    --care-line:  #2D4636;
    --care-edge:  #6FA081;
    --care-ink:   #9CC6AA;

    --legal-bg:   #1D1810;
    --legal-line: #342A1A;

    --ph-bg:      #3A1B10;
    --ph-line:    #6E3522;
    --ph-ink:     #F0B49E;

    --shadow-xs:    0 1px 2px rgba(0,0,0,.45);
    --shadow-sm:    0 1px 2px rgba(0,0,0,.4), 0 6px 16px -8px rgba(0,0,0,.6);
    --shadow-md:    0 2px 5px rgba(0,0,0,.4), 0 18px 36px -16px rgba(0,0,0,.7);
    --shadow-lg:    0 8px 20px -10px rgba(0,0,0,.6), 0 44px 70px -34px rgba(0,0,0,.85);
    --shadow-float: 0 12px 28px -10px rgba(0,0,0,.65), 0 30px 56px -24px rgba(0,0,0,.8);
    --ring-glow:    0 0 0 1px rgba(255,255,255,.05) inset;
  }
}

/* =====================================================================
   Base
   ===================================================================== */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  background-image: linear-gradient(180deg, var(--bg-grad-top) 0%, var(--bg) 38%, var(--bg-grad-bot) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* atmospheric tint — kept very subtle, warm peach top-right meets cool
   teal bottom-left to echo the new app's pastel gradients (IMG_3263 etc.) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38vw 38vw at 86% -6%,  color-mix(in srgb, var(--cat-peach) 9%, transparent), transparent 70%),
    radial-gradient(44vw 44vw at -8% 106%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 72%),
    radial-gradient(36vw 36vw at 6% 4%,    color-mix(in srgb, var(--cat-pink) 5%, transparent), transparent 72%);
}

a { color: var(--accent-deep); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--accent-press); }

::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--ink); }

img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =====================================================================
   Typography
   ===================================================================== */

h1, h2, h3 {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -.03em;
}

h1 { font-size: clamp(33px, 5vw, 50px); line-height: 1.08; margin: 0 0 14px; }
h2 { font-size: clamp(25px, 3.3vw, 33px); line-height: 1.16; letter-spacing: -.026em; margin: 0 0 14px; }
h3 { font-size: 18px; line-height: 1.35; letter-spacing: -.014em; font-weight: 700; margin: 26px 0 8px; }

p, li { margin: 11px 0; }
ul { padding-left: 22px; }
li { padding-left: 3px; }

strong, b { font-weight: 700; }

.lead {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.62;
  color: var(--ink-soft);
}

.meta { color: var(--ink-soft); font-size: 15px; margin: 6px 0; }

.eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 13px;
}

.center { text-align: center; }
.muted  { color: var(--ink-soft); }

/* kicker — section label with a soft app-style icon tile */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 16px;
}
.kicker .ki {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent-deep);
  flex: none;
}
.kicker .ki svg { width: 15px; height: 15px; }
.kicker.center { justify-content: center; }

/* =====================================================================
   Layout helpers
   ===================================================================== */

.section {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 84px) clamp(20px, 5vw, 30px);
}

.section-title { text-align: center; margin: 0 auto 10px; }
.section-intro {
  text-align: center;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.6vw, 18px);
  max-width: 540px;
  margin: 0 auto 36px;
}

hr.rule { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

/* =====================================================================
   Header
   ===================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease;
}
.site-header.scrolled {
  border-bottom-color: var(--line-soft);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
}
.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px clamp(16px, 5vw, 34px);
}

.brand {
  display: inline-flex;
  align-items: center;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand .mark {
  width: 30px; height: 30px;
  display: block;
  margin-right: 9px;
  border-radius: 9px;
  box-shadow: var(--shadow-xs);
}
.brand b { color: var(--accent-deep); font-weight: 800; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  padding: 8px 13px;
  border-radius: var(--pill);
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.site-nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.site-nav a[aria-current="page"] {
  color: var(--accent-deep);
  text-shadow: 0 0 14px rgba(44, 122, 140, 0.45);
  animation: site-nav-glow 4.2s ease-in-out infinite;
}
@keyframes site-nav-glow {
  0%, 100% { text-shadow: 0 0 10px rgba(44, 122, 140, 0.35); }
  50%      { text-shadow: 0 0 18px rgba(44, 122, 140, 0.70),
                          0 0 32px rgba(91, 174, 137, 0.30); }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav a[aria-current="page"] { animation: none; }
}

.header-actions { display: flex; align-items: center; gap: 8px; }

.btn-app {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: var(--pill);
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: transform .12s var(--ease), background-color .15s ease;
}
.btn-app:hover { background: var(--accent-deep); color: var(--on-accent); }
.btn-app:active { transform: translateY(1px); }
.btn-app svg { width: 14px; height: 14px; }

/* mobile menu (native disclosure) */
.nav-menu { display: none; position: relative; }
.nav-menu > summary {
  list-style: none;
  cursor: pointer;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary svg { width: 19px; height: 19px; }
.nav-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: flex;
  flex-direction: column;
}
.nav-menu-panel a {
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 13px;
  border-radius: 10px;
}
.nav-menu-panel a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav-menu-panel hr { border: 0; border-top: 1px solid var(--line-soft); margin: 6px 4px; }

/* =====================================================================
   Buttons
   ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--pill);
  font-family: var(--font);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s var(--ease), background-color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn-primary:hover { background: var(--accent-deep); color: var(--on-accent); }

.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-xs);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--accent); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* App Store badge */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 20px;
  border-radius: 14px;
  background: #14110E;
  color: #fff;
  text-decoration: none;
  border: 1px solid #14110E;
  transition: transform .12s var(--ease), background-color .15s ease;
}
.store-badge:hover { color: #fff; background: #000; transform: translateY(-1px); }
.store-badge:active { transform: translateY(0); }
.store-badge svg { width: 22px; height: 22px; flex: none; }
.store-badge .t small { display: block; font-size: 10px; letter-spacing: .03em; opacity: .8; }
.store-badge .t b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }

/* =====================================================================
   Pills & tags
   ===================================================================== */

.pill-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  border-radius: var(--pill);
  padding: 7px 15px 7px 11px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 9px transparent; }
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 5px 11px;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  color: var(--accent-deep);
}
.tag.synergy { background: color-mix(in srgb, var(--synergy) 15%, var(--surface)); color: var(--synergy); }
.tag svg { width: 13px; height: 13px; }

/* =====================================================================
   Hero — split (landing)
   ===================================================================== */

.hero-split {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(34px, 6vw, 72px) clamp(20px, 5vw, 34px) clamp(28px, 5vw, 48px);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}
.hero-copy h1 {
  font-size: clamp(36px, 5.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -.038em;
  margin: 18px 0 16px;
}
.hero-copy h1 em { font-style: normal; color: var(--accent-deep); }
.hero-copy .lead { max-width: 488px; margin: 0; }
.hero-copy .btn-row { margin-top: 26px; }

/* hero stat cards */
.stats {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}
.hero-copy .stats {
  grid-template-columns: repeat(2, 1fr);
  max-width: 452px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-xs);
  padding: 14px 16px;
}
.stat .num {
  font-size: clamp(25px, 4vw, 31px);
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--accent-deep);
  line-height: 1;
}
.stat .label {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-top: 7px;
}

/* hero visual */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero-visual::before {
  content: "";
  position: absolute;
  inset: -8% -6% -4%;
  background: radial-gradient(50% 46% at 52% 44%,
    color-mix(in srgb, var(--accent) 34%, transparent), transparent 72%);
  filter: blur(14px);
  z-index: 0;
}
.hero-visual .device { position: relative; z-index: 1; }

/* =====================================================================
   Device frame
   ===================================================================== */

.device {
  position: relative;
  width: 100%;
  max-width: 296px;
  margin: 0 auto;
  padding: 11px;
  border-radius: 47px;
  background: linear-gradient(152deg, #4c4c52 0%, #232328 46%, #101013 100%);
  box-shadow:
    var(--shadow-lg),
    0 1px 1px rgba(255,255,255,.22) inset,
    0 -2px 6px rgba(0,0,0,.4) inset;
}
.device img {
  display: block;
  width: 100%;
  border-radius: 36px;
  background: var(--surface-3);
}

/* =====================================================================
   Floating app cards (hero + features)
   ===================================================================== */

.float-card {
  position: absolute;
  z-index: 3;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-float);
  padding: 13px 15px;
}
.float-card .fc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.float-score {
  top: 9%;
  left: clamp(-30px, -3vw, -10px);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: bob 6.5s ease-in-out infinite;
}
.float-io {
  bottom: 13%;
  right: clamp(-26px, -2.5vw, -8px);
  animation: bob 7.5s ease-in-out infinite reverse;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* score ring */
.ring {
  position: relative;
  width: 56px; height: 56px;
  flex: none;
}
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .ring-track { fill: none; stroke: var(--surface-3); stroke-width: 7; }
.ring .ring-fill {
  fill: none;
  stroke: var(--synergy);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 163.4;
  stroke-dashoffset: 163.4;
  transition: stroke-dashoffset 1.3s var(--ease) .25s;
}
.in-view .ring .ring-fill { stroke-dashoffset: 29.4; }   /* ~82% */
.ring .ring-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--ink);
}
.float-score .fc-text .fc-title { font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.float-score .fc-text .fc-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--synergy);
  margin-top: 1px;
}

/* interaction mini-card */
.io-row { display: flex; gap: 16px; margin-top: 8px; }
.io-stat { line-height: 1.15; }
.io-stat .io-num { font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.io-stat .io-cap {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--ink-faint);
}
.io-dot { width: 7px; height: 7px; border-radius: 50%; }

/* =====================================================================
   Hero — centered (interior pages)
   ===================================================================== */

.hero {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(46px, 8vw, 92px) clamp(20px, 5vw, 30px) clamp(24px, 4vw, 40px);
  text-align: center;
}
.hero .kicker, .hero .pill-eyebrow { margin-bottom: 18px; }
.hero h1 {
  font-size: clamp(34px, 6.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -.038em;
}
.hero h1 em { font-style: normal; color: var(--accent-deep); }
.hero .lead { max-width: 540px; margin: 16px auto 0; }
.hero .btn-row { justify-content: center; }

/* =====================================================================
   Statement band
   ===================================================================== */

.statement {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 76px) clamp(20px, 5vw, 30px);
  text-align: center;
}
.statement p {
  font-size: clamp(23px, 3.4vw, 35px);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.03em;
  margin: 0;
  color: var(--ink);
}
.statement .hl { color: var(--accent-deep); }

/* =====================================================================
   Category chip strip
   ===================================================================== */

.chip-band {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 30px) clamp(20px, 4vw, 40px);
  text-align: center;
}
.chip-band .chip-caption {
  font-size: 14px;
  color: var(--ink-faint);
  font-weight: 600;
  margin: 0 0 18px;
}
.chip-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--pill);
  padding: 8px 16px 8px 8px;
  font-size: 14px;
  font-weight: 650;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}
.cat-chip .cc-ico {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cc) 20%, var(--surface));
  color: var(--cc);
  flex: none;
}
.cat-chip .cc-ico svg { width: 17px; height: 17px; }
@media (prefers-color-scheme: dark) {
  .cat-chip .cc-ico {
    background: color-mix(in srgb, var(--cc) 30%, var(--surface));
    color: color-mix(in srgb, var(--cc) 58%, white);
  }
}

/* =====================================================================
   Feature rows
   ===================================================================== */

.feature {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(30px, 5vw, 64px) clamp(20px, 5vw, 34px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
}
.feature-visual { order: 1; }
.feature-copy   { order: 2; }
.feature.reverse .feature-visual { order: 2; }
.feature.reverse .feature-copy   { order: 1; }

.feature-copy h2 { margin-top: 4px; }
.feature-copy .lead { margin: 0 0 20px; }

.feature-visual {
  position: relative;
  display: flex;
  justify-content: center;
  padding: clamp(20px, 4vw, 44px) 0;
}
.visual-panel {
  position: absolute;
  inset: 0 clamp(6px, 4vw, 40px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(70% 60% at 50% 32%, color-mix(in srgb, var(--fa) 30%, var(--bg)), transparent 78%),
    color-mix(in srgb, var(--fa) 13%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--fa) 22%, var(--line-soft));
  z-index: 0;
}
.feature-visual .device { position: relative; z-index: 1; max-width: 262px; }

.feature-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--pill);
  box-shadow: var(--shadow-float);
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
  animation: bob 7s ease-in-out infinite;
}
.feature-chip .fci {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fa) 22%, var(--surface));
  color: var(--fa);
  flex: none;
}
.feature-chip .fci svg { width: 13px; height: 13px; }
.feature-chip.tl { top: 7%;   left: clamp(-14px, 1vw, 6px); }
.feature-chip.br { bottom: 9%; right: clamp(-14px, 1vw, 6px); animation-direction: reverse; }

/* feature accent themes */
.feature.acc-stack       { --fa: #2C7A8C; }
.feature.acc-interaction { --fa: #2E9B68; }
.feature.acc-explore     { --fa: #E8758E; }
.feature.acc-research    { --fa: #3B7BE0; }

/* mini feature list */
.mini-list { list-style: none; padding: 0; margin: 0; }
.mini-list li {
  position: relative;
  padding: 8px 0 8px 32px;
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
}
.mini-list li b { color: var(--ink); font-weight: 700; }
.mini-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 21px; height: 21px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--fa, var(--accent)) 16%, var(--surface));
}
.mini-list li::after {
  content: "";
  position: absolute;
  left: 6.5px; top: 12.5px;
  width: 8px; height: 4.5px;
  border-left: 2.2px solid var(--fa, var(--accent));
  border-bottom: 2.2px solid var(--fa, var(--accent));
  transform: rotate(-45deg);
}

/* =====================================================================
   AI advisor mock
   ===================================================================== */

.ai-mock {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  padding: clamp(18px, 3vw, 26px);
}
.ai-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.ai-avatar {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--accent), var(--accent-deep));
  color: var(--on-accent);
  flex: none;
}
.ai-avatar svg { width: 19px; height: 19px; }
.ai-head .ai-name { font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; }
.ai-head .ai-status { font-size: 12px; color: var(--ink-faint); }

.chat { display: flex; flex-direction: column; gap: 11px; }
.bubble {
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 88%;
}
.bubble .who {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .72;
  margin-bottom: 4px;
}
.bubble.user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--on-accent);
  border-bottom-right-radius: 6px;
}
.bubble.ai {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: 6px;
}
.research-note {
  align-self: flex-start;
  max-width: 88%;
  display: flex;
  gap: 9px;
  background: color-mix(in srgb, var(--info) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--info) 26%, transparent);
  border-radius: 14px;
  padding: 10px 13px;
  font-size: 13px;
  color: var(--ink-soft);
}
.research-note svg { width: 15px; height: 15px; flex: none; color: var(--info); margin-top: 2px; }
.research-note b { color: var(--ink); }

/* =====================================================================
   Cards / grids (about + generic)
   ===================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: clamp(20px, 4vw, 30px);
}

.card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.card-grid .card { box-shadow: var(--shadow-sm); }
.card-grid .card h3 { margin-top: 0; }
.card-grid .card p:last-child { margin-bottom: 0; }

/* belief card icon */
.belief-ico {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent-deep);
  margin-bottom: 14px;
}
.belief-ico svg { width: 23px; height: 23px; }

/* =====================================================================
   Stat card grid (about — "what's inside")
   ===================================================================== */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.stat-grid .stat { text-align: center; padding: 22px 14px; }
.stat-grid .stat .num { font-size: clamp(28px, 5vw, 36px); }
.stat-grid .stat .label { font-size: 13px; margin-top: 8px; }

/* =====================================================================
   Pricing
   ===================================================================== */

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
  gap: 18px;
  max-width: 720px;
  margin: 0 auto;
}
.price-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
}
.price-card.featured {
  border: 1.5px solid color-mix(in srgb, var(--accent) 70%, var(--line));
  box-shadow: var(--shadow-md);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface) 38%);
}
.price-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.price-card .tier {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.price-card.featured .tier { color: var(--accent-deep); }
.badge-pro {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent);
  padding: 4px 10px;
  border-radius: var(--pill);
}
.price-card .price {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  margin: 14px 0 4px;
}
.price-card .price small {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: -.01em;
}
.price-card .price-sub { color: var(--ink-soft); font-size: 14px; margin: 0 0 18px; }

.checks { list-style: none; padding: 0; margin: 0 0 22px; }
.checks li {
  position: relative;
  padding: 9px 0 9px 30px;
  font-size: 14.5px;
  border-top: 1px solid var(--line-soft);
}
.checks li:first-child { border-top: 0; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}
.checks li::after {
  content: "";
  position: absolute;
  left: 6px; top: 13.5px;
  width: 7.5px; height: 4px;
  border-left: 2.2px solid var(--accent-deep);
  border-bottom: 2.2px solid var(--accent-deep);
  transform: rotate(-45deg);
}
.price-card .btn { margin-top: auto; }
.price-note { font-size: 12.5px; color: var(--ink-faint); margin: 12px 0 0; text-align: center; }

/* =====================================================================
   FAQ
   ===================================================================== */

.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: border-color .15s ease;
}
.faq details[open] { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 19px;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -.016em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 20px; height: 20px;
  flex: none;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  background-image:
    linear-gradient(var(--accent-deep), var(--accent-deep)),
    linear-gradient(var(--accent-deep), var(--accent-deep));
  background-size: 9px 2px, 2px 9px;
  background-position: center, center;
  background-repeat: no-repeat;
  transition: transform .22s var(--ease);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq summary:hover { color: var(--accent-deep); }
.faq .answer {
  padding: 0 19px 17px;
  color: var(--ink-soft);
  font-size: 14.8px;
}
.faq .answer p:first-child { margin-top: 0; }
.faq .answer p:last-child { margin-bottom: 0; }

/* =====================================================================
   Contact / fact sheet
   ===================================================================== */

.contact-card { text-align: center; }
.contact-card .email {
  font-size: clamp(20px, 4vw, 27px);
  font-weight: 800;
  letter-spacing: -.03em;
  word-break: break-word;
  margin: 6px 0 10px;
}

.facts { margin: 0; }
.facts div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 14.5px;
}
.facts div:first-child { border-top: 0; }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; font-weight: 700; text-align: right; }

/* =====================================================================
   Final CTA
   ===================================================================== */

.cta-final {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 60px) clamp(20px, 5vw, 30px) clamp(48px, 8vw, 92px);
}
.cta-final .card {
  text-align: center;
  padding: clamp(30px, 5vw, 52px) clamp(22px, 4vw, 44px);
  background:
    radial-gradient(80% 120% at 50% -10%, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 70%);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
}
.cta-final h2 { margin-top: 8px; }
.cta-final .btn-row { justify-content: center; }

/* =====================================================================
   Disclaimer band
   ===================================================================== */

.disclaimer-band {
  background: var(--care-bg);
  border-top: 1px solid var(--care-line);
  border-bottom: 1px solid var(--care-line);
}
.disclaimer-band .inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px clamp(20px, 5vw, 30px);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--care-ink);
  text-align: center;
}

/* =====================================================================
   Site footer
   ===================================================================== */

.site-footer {
  border-top: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--surface) 50%, transparent);
}
.site-footer .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px clamp(20px, 5vw, 34px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px 40px;
  align-items: center;
}
.site-footer .brand { font-size: 18px; }
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 14px;
  justify-content: flex-end;
}
.site-footer nav a { color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.site-footer nav a:hover { color: var(--accent-deep); }
.site-footer .copyright {
  grid-column: 1 / -1;
  color: var(--ink-faint);
  font-size: 12.5px;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

/* =====================================================================
   Long-form / legal pages
   ===================================================================== */

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(30px, 6vw, 58px) clamp(20px, 5vw, 30px) 90px;
}
.wrap h2 {
  font-size: clamp(20px, 2.6vw, 24px);
  margin: 46px 0 12px;
  letter-spacing: -.022em;
}
.wrap h3 { font-size: 16.5px; }
.wrap p, .wrap li { font-size: 15.5px; }

.page-head {
  border-bottom: 2px solid var(--line);
  padding-bottom: 22px;
  margin-bottom: 12px;
}
.page-head h1 { font-size: clamp(29px, 5vw, 40px); }

.callout, .medical, .legalbox {
  border-radius: var(--r-sm);
  padding: 16px 18px;
  margin: 22px 0;
  font-size: 15px;
}
.callout {
  background: var(--amber-bg);
  border: 1px solid var(--amber-line);
  border-left: 4px solid var(--amber-edge);
}
.medical {
  background: var(--care-bg);
  border: 1px solid var(--care-line);
  border-left: 4px solid var(--care-edge);
}
.legalbox {
  background: var(--legal-bg);
  border: 1px solid var(--legal-line);
}
.callout p:first-child, .medical p:first-child, .legalbox p:first-child { margin-top: 0; }
.callout p:last-child, .medical p:last-child, .legalbox p:last-child { margin-bottom: 0; }
.legalbox ul { margin: 0; }

.placeholder {
  background: var(--ph-bg);
  border: 1px dashed var(--ph-line);
  border-radius: 5px;
  padding: 1px 6px;
  font-weight: 700;
  font-size: .92em;
  color: var(--ph-ink);
  white-space: nowrap;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 18px 0;
  font-size: 14.5px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
th, td {
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  padding: 11px 13px;
  text-align: left;
  vertical-align: top;
}
th:last-child, td:last-child { border-right: 0; }
tr:last-child td { border-bottom: 0; }
th { background: var(--surface-2); font-weight: 700; font-size: 13.5px; }

code {
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: .88em;
}

.wrap > footer {
  margin-top: 54px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13.5px;
}

/* =====================================================================
   Scroll-reveal
   ===================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .7s var(--ease),
    transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 900px) {
  .site-nav { display: none; }
  .nav-menu { display: block; }
}

@media (max-width: 860px) {
  .hero-split {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 36px;
  }
  .hero-copy .lead { margin-left: auto; margin-right: auto; }
  .hero-copy .btn-row { justify-content: center; }
  .hero-copy .stats { margin-left: auto; margin-right: auto; }
  .float-card { display: none; }

  .feature {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .feature-visual, .feature-copy { order: 0 !important; }
  .feature-copy { text-align: center; }
  .feature-copy .kicker { justify-content: center; }
  .mini-list { display: inline-block; text-align: left; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .card-grid { grid-template-columns: 1fr; }
  .site-footer .inner { grid-template-columns: 1fr; }
  .site-footer nav { justify-content: flex-start; }
  .hero-copy .stats { grid-template-columns: 1fr 1fr; }
  .feature-chip { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* =====================================================================
   REVAMP — Stack Builder hero (interactive constellation)
   ===================================================================== */

.builder-hero {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) clamp(18px, 5vw, 34px) clamp(24px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}

.builder-copy h1 {
  font-size: clamp(40px, 5.8vw, 72px);
  line-height: 1.0;
  letter-spacing: -.042em;
  margin: 18px 0 18px;
  font-weight: 850;
}
.builder-copy h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--accent-deep) 0%, var(--accent) 60%, var(--brand-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.builder-copy .lead {
  max-width: 488px;
  font-size: clamp(17px, 1.55vw, 19.5px);
}
.builder-copy .hint {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: -.005em;
}
.builder-copy .hint .arrow {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent-deep);
  animation: nudge 1.6s ease-in-out infinite;
}
.builder-copy .hint .arrow svg { width: 13px; height: 13px; }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* === Stack Builder panel === */
.builder-panel {
  position: relative;
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--accent) 4%, var(--surface)) 0%,
    var(--surface) 55%);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: clamp(20px, 2.4vw, 32px);
  box-shadow: var(--shadow-lg);
  padding: clamp(18px, 2.6vw, 26px);
  overflow: hidden;
}
.builder-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(70% 40% at 50% 100%, color-mix(in srgb, var(--synergy) 10%, transparent), transparent 70%);
}

.builder-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  z-index: 1;
}
.builder-head .left { min-width: 0; }
.builder-head .panel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.builder-head .panel-eyebrow .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--synergy);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--synergy) 60%, transparent);
  animation: ping 2s ease-in-out infinite;
}
.builder-head .panel-title {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 4px 0 0;
}
.builder-score {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 9px 14px 9px 9px;
  box-shadow: var(--shadow-xs);
}
.builder-score .b-ring {
  position: relative;
  width: 44px; height: 44px;
}
.builder-score .b-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.builder-score .b-ring .t { fill: none; stroke: var(--surface-3); stroke-width: 6; }
.builder-score .b-ring .f {
  fill: none;
  stroke: var(--synergy);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 119.4;
  stroke-dashoffset: 119.4;
  transition: stroke-dashoffset .8s var(--ease), stroke .3s ease;
}
.builder-score .b-ring .num {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800; letter-spacing: -.04em;
  color: var(--ink);
}
.builder-score .b-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.builder-score .b-meta b {
  font-size: 13px;
  letter-spacing: -.01em;
}
.builder-score .b-meta span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* === Constellation stage === */
.constellation {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 460px;
  margin: 6px auto 0;
}
.constellation svg {
  width: 100%; height: 100%;
  display: block;
}
.constellation .empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  color: var(--ink-faint);
  font-size: 14px;
  padding: 22px;
}
.constellation.is-empty .empty { opacity: 1; }
.constellation .ring-bg {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: .8;
}
.c-link {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity .5s var(--ease), stroke-dashoffset .8s var(--ease);
}
.c-link.in { opacity: 1; }
.c-link.synergy { stroke: var(--synergy); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--synergy) 38%, transparent)); }
.c-link.warn { stroke: var(--warn); stroke-dasharray: 5 5; }
.c-node {
  cursor: pointer;
  transition: opacity .35s var(--ease);
}
.c-node .nshade {
  fill: var(--c, var(--accent));
  opacity: .18;
}
.c-node .ntile {
  fill: var(--surface);
  stroke: color-mix(in srgb, var(--c, var(--accent)) 50%, var(--line));
  stroke-width: 1.6;
}
.c-node .ndot {
  fill: var(--c, var(--accent));
}
.c-node text {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -.015em;
  fill: var(--ink);
  text-anchor: middle;
  font-size: 13px;
  paint-order: stroke fill;
  stroke: var(--surface);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.c-node.entering { opacity: 0; }
.c-node.entering.shown { opacity: 1; }
.c-node.exiting { opacity: 0; }

/* === Insight pills === */
.builder-insights {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 16px;
  min-height: 30px;
}
.b-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--pill);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.b-pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.b-pill.synergy { background: color-mix(in srgb, var(--synergy) 14%, var(--surface)); color: var(--synergy); }
.b-pill.synergy .dot { background: var(--synergy); }
.b-pill.warn { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: color-mix(in srgb, var(--warn) 78%, var(--ink)); }
.b-pill.warn .dot { background: var(--warn); }
.b-pill.empty {
  background: color-mix(in srgb, var(--ink) 5%, var(--surface));
  color: var(--ink-faint);
  font-weight: 600;
}

/* === Supplement tray === */
.tray {
  position: relative;
  z-index: 1;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.tray-cap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.tray-cap b {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tray-cap .clear {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-deep);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.tray-cap .clear:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.tray-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.t-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 7px;
  border-radius: var(--pill);
  font-size: 13.5px;
  font-weight: 650;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform .12s var(--ease), border-color .15s, background-color .15s, color .15s;
  font-family: var(--font);
}
.t-chip:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--c) 60%, var(--line)); }
.t-chip .swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 22%, var(--surface));
  position: relative;
  flex: none;
}
.t-chip .swatch::after {
  content: "";
  position: absolute; inset: 6px;
  border-radius: 50%;
  background: var(--c);
}
.t-chip.is-on {
  background: color-mix(in srgb, var(--c) 15%, var(--surface));
  border-color: color-mix(in srgb, var(--c) 55%, var(--line));
  color: var(--ink);
}
.t-chip.is-on .swatch {
  background: var(--c);
}
.t-chip.is-on .swatch::after {
  inset: 4px;
  background: var(--on-accent, #fff);
  background-image: linear-gradient(45deg, transparent 41%, var(--c) 42%, var(--c) 58%, transparent 59%),
                    linear-gradient(135deg, transparent 41%, var(--c) 42%, var(--c) 58%, transparent 59%);
  background-size: 11px 2px, 11px 2px;
  background-position: 50% 60%, 50% 60%;
  background-repeat: no-repeat;
}
.t-chip.is-on .swatch::after {
  background: var(--c) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5 6.5 12 13 4.5'/></svg>") center/12px no-repeat;
}

/* =====================================================================
   REVAMP — Big stat band
   ===================================================================== */

.stat-band {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 5%, transparent),
    transparent 50%,
    color-mix(in srgb, var(--accent-2) 4%, transparent));
}
.stat-band .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(34px, 6vw, 70px) clamp(20px, 5vw, 34px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 2.5vw, 30px);
  align-items: end;
}
.stat-band .item { text-align: center; }
.stat-band .big {
  font-size: clamp(38px, 6.5vw, 76px);
  font-weight: 850;
  letter-spacing: -.05em;
  line-height: .95;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 68%, var(--accent-deep)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-band .cap {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
@media (max-width: 760px) {
  .stat-band .inner { grid-template-columns: repeat(2, 1fr); }
  .stat-band .item:nth-child(5) { grid-column: 1 / -1; }
}

/* =====================================================================
   REVAMP — Stat marquee (infinite horizontal ticker, sits below hero)
   ===================================================================== */

.stat-marquee {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 5%, transparent),
    transparent 55%,
    color-mix(in srgb, var(--synergy) 4%, transparent));
  overflow: hidden;
}
.stat-marquee .sm-viewport {
  padding: clamp(20px, 3vw, 38px) 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    #000 7%,
    #000 93%,
    transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0,
    #000 7%,
    #000 93%,
    transparent 100%);
}
.stat-marquee .sm-track {
  display: flex;
  width: max-content;
  animation: sm-scroll 55s linear infinite;
  will-change: transform;
}
.stat-marquee:hover .sm-track { animation-play-state: paused; }
.stat-marquee .sm-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.stat-marquee .sm-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 clamp(36px, 5vw, 64px);
  flex: 0 0 auto;
}
.stat-marquee .sm-big {
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 850;
  letter-spacing: -.04em;
  line-height: 1.05; /* room above caps so background-clip:text doesn't shave the top */
  padding-top: .06em; /* extra safety margin for cap height */
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg,
    var(--ink) 0%,
    color-mix(in srgb, var(--ink) 70%, var(--accent-deep)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-marquee .sm-cap {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.stat-marquee .sm-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  align-self: center;
  transform: translateY(6px); /* sit slightly low to match number baseline + caption stack */
}
@keyframes sm-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 640px) {
  .stat-marquee .sm-track { animation-duration: 38s; }
  .stat-marquee .sm-big { font-size: clamp(28px, 7.5vw, 40px); }
  .stat-marquee .sm-item { padding: 0 clamp(24px, 7vw, 36px); }
}
@media (prefers-reduced-motion: reduce) {
  .stat-marquee .sm-track { animation: none; transform: none; }
  .stat-marquee .sm-viewport {
    overflow: auto;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: none;
  }
  .stat-marquee .sm-viewport::-webkit-scrollbar { display: none; }
  .stat-marquee .sm-group:nth-of-type(2) { display: none; } /* hide duplicate group */
}

/* =====================================================================
   REVAMP — Scrollytelling scenes
   ===================================================================== */

.scene {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(48px, 9vw, 120px) clamp(20px, 5vw, 34px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 6vw, 80px);
  align-items: center;
  position: relative;
}
.scene.reverse .scene-visual { order: 2; }
.scene.reverse .scene-copy   { order: 1; }
.scene-copy { max-width: 460px; }
.scene-copy .kicker { margin-bottom: 14px; }
.scene-copy h2 {
  font-size: clamp(32px, 4.2vw, 48px);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -.038em;
  margin: 0 0 16px;
}
.scene-copy h2 em {
  font-style: normal;
  color: var(--sa, var(--accent-deep));
}
.scene-copy .lead {
  font-size: clamp(16.5px, 1.45vw, 18.5px);
  max-width: 440px;
}
.scene-copy .mini-list { margin-top: 22px; }

.scene-visual {
  position: relative;
  display: flex;
  justify-content: center;
  padding: clamp(20px, 4vw, 44px) 0;
}
.scene-visual .phone-wrap {
  position: relative;
  z-index: 1;
}
.scene-visual .visual-glow {
  position: absolute;
  inset: -8% -8%;
  background: radial-gradient(55% 45% at 50% 50%,
    color-mix(in srgb, var(--sa, var(--accent)) 22%, transparent),
    transparent 70%);
  filter: blur(36px);
  z-index: 0;
}
.scene-visual .device { max-width: 360px; }

/* scene accent (--sa) */
.scene.acc-today        { --sa: #2C7A8C; }
.scene.acc-stack        { --sa: #3FA76A; }
.scene.acc-interactions { --sa: #3FA76A; }
.scene.acc-explore      { --sa: #E8758E; }
.scene.acc-heart        { --sa: #E8758E; }
.scene.acc-evidence     { --sa: #2C7A8C; }
.scene.acc-ai           { --sa: #7B68C9; }
.evidence-scene {
  padding-top: clamp(42px, 6vw, 82px);
  padding-bottom: clamp(46px, 7vw, 92px);
}

/* Stack Score scene — floating ring chip overlayed on the phone */
.scene.acc-stack .score-ki {
  background: color-mix(in srgb, var(--sa) 16%, var(--surface));
  color: var(--sa);
}

.score-float {
  position: absolute;
  z-index: 4;
  top: 3%;
  right: clamp(-26px, -1.5vw, -8px);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  box-shadow: var(--shadow-float);
  padding: 12px 18px 12px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: bob 9s ease-in-out infinite;
}
.score-float .score-ring {
  width: 58px;
  height: 58px;
  display: block;
  flex: none;
  overflow: visible;
}
.score-float .score-ring-bg {
  fill: none;
  stroke: color-mix(in srgb, var(--sa, var(--synergy)) 18%, var(--line));
  stroke-width: 9;
}
.score-float .score-ring-fg {
  fill: none;
  stroke: var(--sa, var(--synergy));
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 276.46;
  stroke-dashoffset: 276.46;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 1.5s cubic-bezier(.22,.61,.36,1) .25s;
}
/* Static fallback: in-view fills to 82% (only when scroll-driven mode is NOT active) */
.score-float:not([data-scroll-ring]).in-view .score-ring-fg {
  /* 276.46 * (1 - 0.82) = 49.76 */
  stroke-dashoffset: 49.76;
}
/* Scroll-driven mode: JS sets --score-fill (0..1) on the .score-float root */
.score-float[data-scroll-ring] .score-ring-fg {
  stroke-dashoffset: calc(276.46 * (1 - var(--score-fill, 0)));
  transition: stroke-dashoffset .12s linear; /* short smoothing only */
}
@media (prefers-reduced-motion: reduce) {
  /* Drop scroll-driven mode in reduced-motion — fall back to the one-shot CSS fill */
  .score-float[data-scroll-ring] .score-ring-fg {
    stroke-dashoffset: 49.76;
    transition: none;
  }
}
.score-float .score-text { display: grid; gap: 3px; }
.score-float .score-num {
  font-size: 26px;
  font-weight: 850;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.score-float .score-cap {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.scene.acc-stack .evidence-chip {
  bottom: 4%;
  right: clamp(-22px, -1vw, -8px);
  left: auto;
  font-size: 12.5px;
}

@media (min-width: 861px) {
  .score-scene {
    grid-template-columns: .9fr 1.1fr;
  }
}

.score-scene {
  padding-top: clamp(36px, 6vw, 86px);
  padding-bottom: clamp(36px, 6vw, 86px);
}

@media (max-width: 560px) {
  .score-float {
    top: 2%;
    right: -6px;
    padding: 10px 14px 10px 10px;
    border-radius: 18px;
  }
  .score-float .score-ring { width: 48px; height: 48px; }
  .score-float .score-num { font-size: 22px; }
  .score-float .score-cap { font-size: 9.5px; }
}

/* Animated Stack Score graphic */
.stack-score-graphic {
  --score-p: .82;
  --score-color: var(--synergy);
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  min-height: 0;
  padding: clamp(14px, 2.2vw, 18px);
  border-radius: 8px;
  isolation: isolate;
  overflow: visible;
}

.stack-score-graphic::before {
  content: "";
  position: absolute;
  inset: -18px -16px -22px;
  z-index: -2;
  border-radius: 8px;
  background:
    radial-gradient(70% 38% at 48% 2%, color-mix(in srgb, var(--synergy) 13%, transparent), transparent 70%),
    radial-gradient(62% 45% at 96% 22%, color-mix(in srgb, var(--info) 10%, transparent), transparent 72%),
    radial-gradient(80% 56% at 50% 96%, color-mix(in srgb, var(--surface-2) 54%, transparent), transparent 76%);
  box-shadow:
    0 34px 70px -52px rgba(74,54,38,.38),
    0 1px 0 rgba(255,255,255,.55) inset;
  opacity: .96;
  pointer-events: none;
}

.stack-score-graphic::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: -30px;
  z-index: -3;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(74,54,38,.24), transparent 68%);
  filter: blur(14px);
  pointer-events: none;
}

/* Score card: ring on the left, the three-factor breakdown bars on the right,
   inside one bordered surface. Replaces the earlier .ssg-top + standalone
   .ssg-factors row, eliminating the dead whitespace under the ring. */
.ssg-score-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(140px, 168px) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 92%, transparent);
  border-radius: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, var(--surface-2)), color-mix(in srgb, var(--surface) 91%, var(--surface-2)));
  box-shadow: var(--shadow-sm), var(--ring-glow);
}

.ssg-supp,
.ssg-change-token {
  border: 1px solid color-mix(in srgb, var(--line-soft) 92%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, var(--surface-2)), color-mix(in srgb, var(--surface) 91%, var(--surface-2)));
  box-shadow: var(--shadow-sm), var(--ring-glow);
}

.ssg-score {
  position: relative;
  min-height: 148px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 80%, transparent);
  background:
    radial-gradient(58% 58% at 50% 52%, color-mix(in srgb, var(--score-color) 11%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 99%, var(--surface-2)), color-mix(in srgb, var(--surface) 94%, var(--surface-2))),
    color-mix(in srgb, var(--surface) 96%, var(--surface-2));
  box-shadow:
    0 1px 0 rgba(255,255,255,.65) inset,
    0 18px 38px -26px color-mix(in srgb, var(--score-color) 50%, rgba(74,54,38,.28)),
    0 2px 8px rgba(74,54,38,.08);
  overflow: hidden;
}

.ssg-score::before {
  content: "";
  position: absolute;
  width: 64%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--score-color) 13%, transparent), transparent 72%);
  filter: blur(14px);
  transform: translateY(20px);
  pointer-events: none;
}

.stack-score-graphic.is-score-pop .ssg-score {
  animation: stack-score-pop .48s var(--ease);
}

@keyframes stack-score-pop {
  0% { transform: scale(1); box-shadow: var(--shadow-xs); }
  42% {
    transform: scale(1.035);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--score-color) 26%, var(--line-soft)),
      0 20px 38px -24px color-mix(in srgb, var(--score-color) 60%, transparent);
  }
  100% { transform: scale(1); box-shadow: var(--shadow-xs); }
}

.ssg-ring {
  width: 124px;
  height: 124px;
  display: block;
  transform: rotate(-90deg);
  overflow: visible;
}

.ssg-ring-track,
.ssg-ring-fill {
  fill: none;
  stroke-width: 11;
}

.ssg-ring-track {
  stroke: color-mix(in srgb, var(--score-color) 15%, var(--line));
}

.ssg-ring-fill {
  stroke: var(--score-color);
  stroke-linecap: round;
  stroke-dasharray: 314.16;
  stroke-dashoffset: calc(314.16 * (1 - var(--score-p)));
  transition: stroke-dashoffset .7s var(--ease), stroke .35s ease;
}

.ssg-score-copy {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.ssg-score-value {
  display: block;
  color: var(--ink);
  font-size: 49px;
  line-height: .95;
  font-weight: 850;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.ssg-score-copy span:last-child {
  margin-top: 7px;
  color: var(--ink-faint);
  font-size: 9.5px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Score breakdown: three labeled bars (Evidence / Timing / Safety) packed
   beside the ring, replacing the older standalone .ssg-factors row. */
.ssg-breakdown {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-right: 4px;
}

.ssg-bd-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 8px;
}

.ssg-bd-label {
  grid-column: 1;
  grid-row: 1;
  color: var(--ink-faint);
  font-size: 9.5px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ssg-bd-row b {
  grid-column: 2;
  grid-row: 1;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.ssg-bd-bar {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  height: 6px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-faint) 18%, var(--surface));
}

.ssg-bd-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--factor, 80%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--score-color));
  transition: width .55s var(--ease), background .35s ease;
}

/* The .ssg-bd-row picks up the --factor custom property set inline on it,
   so the bar inside knows how wide to draw. */
.ssg-bd-row > .ssg-bd-bar i { width: var(--factor, 80%); }

/* Action log: stacked recent events (newest on top, capped at 3). Replaces
   the single .ssg-reason card so users see a running narrative of their
   clicks (or the demo tour) instead of one disappearing line. */
.ssg-log {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  margin-top: 10px;
  /* Reserved height for 3 log items at typical 2-line reason length. The tour
     auto-prepends items every 1.75s; without this, the container grew from 0
     -> 3 items and shoved the entire page (AI Console, bento) up and down as
     each entry appeared. */
  min-height: 240px;
  align-content: start;
}

.ssg-log-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  min-height: 70px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 92%, transparent);
  border-radius: 9px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, var(--surface-2)), color-mix(in srgb, var(--surface) 93%, var(--surface-2)));
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 8px 20px -18px rgba(74,54,38,.22);
  transition: opacity .35s ease, transform .35s ease;
}

.ssg-log-item.is-age-1 { opacity: .78; }
.ssg-log-item.is-age-2 { opacity: .58; }

.ssg-log-item.is-fresh {
  opacity: 0;
  transform: translateY(-6px);
}

.ssg-log-delta {
  min-width: 38px;
  height: 32px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 14.5px;
  line-height: 1;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  color: var(--synergy-deep);
  background: color-mix(in srgb, var(--synergy) 16%, var(--surface));
}
.ssg-log-delta.is-down {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 16%, var(--surface));
}
.ssg-log-delta.is-flat {
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
}

.ssg-log-body {
  min-width: 0;
}
.ssg-log-body b {
  display: block;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.16;
  font-weight: 850;
  letter-spacing: 0;
}
.ssg-log-body p {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 10.8px;
  line-height: 1.25;
}

.ssg-stack-panel {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--line-soft) 92%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(84% 36% at 50% 0%, rgba(255,255,255,.72), transparent 68%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, var(--surface-2)), color-mix(in srgb, var(--surface) 91%, var(--surface-2))),
    var(--surface);
  box-shadow:
    0 1px 0 rgba(255,255,255,.68) inset,
    0 24px 54px -34px rgba(74,54,38,.40),
    0 2px 8px rgba(74,54,38,.08);
  overflow: hidden;
}

.ssg-stack-panel::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 52px;
  bottom: 48px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 28%, transparent),
    color-mix(in srgb, var(--score-color) 36%, transparent),
    transparent);
  pointer-events: none;
}

.ssg-stack-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 1px 2px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 88%, transparent);
}

.ssg-stack-head b {
  color: var(--ink);
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0;
}

.ssg-stack-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  min-height: 250px;
  margin-top: 10px;
  align-content: start;
}

.ssg-supp {
  min-height: 38px;
  padding: 4px 6px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border-color: color-mix(in srgb, var(--supp) 14%, var(--line-soft));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, var(--supp) 2%), color-mix(in srgb, var(--surface) 94%, var(--supp) 4%));
  box-shadow:
    0 1px 0 rgba(255,255,255,.72) inset,
    0 8px 18px -16px color-mix(in srgb, var(--supp) 48%, rgba(74,54,38,.20)),
    0 1px 3px rgba(74,54,38,.07);
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
}

.ssg-supp.is-inactive:not(.is-leaving) {
  display: none;
}

.ssg-supp-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--supp);
  background: color-mix(in srgb, var(--supp) 15%, var(--surface));
}

.ssg-supp-icon svg {
  width: 13px;
  height: 13px;
}

.ssg-supp b,
.ssg-supp small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
}

.ssg-supp b {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.15;
  font-weight: 850;
}

.ssg-supp small {
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 9.5px;
  line-height: 1.1;
  font-weight: 650;
}

/* Per-supp contribution chip. Shows the supp's current score-delta:
   active rows render solid (the supp is "worth +X"); inactive rows render
   as a dashed preview ("would add +X if tapped"). Replaces the old static
   category tag (core/synergy/timing/etc.) with live data from the engine. */
.ssg-supp em,
.ssg-tag {
  justify-self: end;
  min-width: 38px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 70%, var(--surface));
  color: var(--ink-faint);
  border: 1px dashed color-mix(in srgb, var(--line) 60%, transparent);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.ssg-tag.is-active {
  border-style: solid;
  border-color: color-mix(in srgb, var(--supp, var(--accent)) 28%, var(--line-soft));
}
.ssg-tag.is-active.is-pos {
  background: color-mix(in srgb, var(--synergy) 18%, var(--surface));
  color: var(--synergy-deep);
  border-color: color-mix(in srgb, var(--synergy) 36%, var(--line-soft));
}
.ssg-tag.is-active.is-neg {
  background: color-mix(in srgb, var(--warn) 16%, var(--surface));
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 36%, var(--line-soft));
}
.ssg-tag.is-active.is-flat {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent-deep);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line-soft));
}

.ssg-supp.is-entering {
  animation: stack-card-enter .5s cubic-bezier(.18,.89,.32,1.12) both;
}

.ssg-supp.is-leaving {
  animation: stack-card-leave .42s cubic-bezier(.55,.06,.68,.19) both;
}

.stack-score-graphic.is-swapping .ssg-supp.is-entering {
  animation-name: stack-card-swap-in;
}

.stack-score-graphic.is-swapping .ssg-supp.is-leaving {
  animation-name: stack-card-swap-out;
}

@keyframes stack-card-enter {
  0% {
    opacity: 0;
    transform: translateX(46px) translateY(-4px) scale(.96);
    filter: blur(3px);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--supp) 18%, var(--line-soft));
  }
  58% {
    opacity: 1;
    transform: translateX(-5px) translateY(0) scale(1.015);
    filter: none;
    box-shadow: 0 18px 34px -24px color-mix(in srgb, var(--supp) 70%, transparent);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: none;
  }
}

@keyframes stack-card-leave {
  0% { opacity: 1; transform: translateX(0) scale(1); filter: none; }
  38% { opacity: .7; transform: translateX(-10px) scale(.985); filter: none; }
  100% { opacity: 0; transform: translateX(-62px) scale(.94); filter: blur(3px); }
}

@keyframes stack-card-swap-in {
  0% {
    opacity: 0;
    transform: translateX(64px) rotate(1.5deg) scale(.94);
    filter: blur(4px);
  }
  54% {
    opacity: 1;
    transform: translateX(-8px) rotate(-.6deg) scale(1.03);
    filter: none;
    box-shadow: 0 18px 34px -22px color-mix(in srgb, var(--supp) 78%, transparent);
  }
  100% { opacity: 1; transform: translateX(0) rotate(0) scale(1); filter: none; }
}

@keyframes stack-card-swap-out {
  0% { opacity: 1; transform: translateX(0) rotate(0) scale(1); filter: none; }
  100% { opacity: 0; transform: translateX(-70px) rotate(-2deg) scale(.92); filter: blur(4px); }
}

.ssg-change-token {
  position: relative;
  z-index: 1;
  width: max-content;
  max-width: 100%;
  min-height: 32px;
  margin-top: 14px;
  margin-left: 2px;
  padding: 8px 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: color-mix(in srgb, var(--supp) 88%, var(--ink));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, var(--supp) 2%), color-mix(in srgb, var(--surface) 91%, var(--supp) 7%));
  border-color: color-mix(in srgb, var(--supp) 20%, var(--line-soft));
  box-shadow:
    0 1px 0 rgba(255,255,255,.68) inset,
    0 12px 24px -18px color-mix(in srgb, var(--supp) 52%, rgba(74,54,38,.24)),
    0 1px 4px rgba(74,54,38,.08);
  font-size: 12.5px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0;
}

.ssg-change-token::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--supp);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--supp) 15%, transparent);
}

.ssg-change-token.is-adding {
  animation: stack-token-add .58s var(--ease) both;
}

.ssg-change-token.is-dropping {
  animation: stack-token-drop .58s var(--ease) both;
}

@keyframes stack-token-add {
  0% { opacity: 0; transform: translateX(90px) translateY(-8px) scale(.9); filter: blur(4px); }
  42% { opacity: 1; transform: translateX(12px) translateY(0) scale(1.05); filter: none; }
  100% { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}

@keyframes stack-token-drop {
  0% { opacity: 0; transform: translateX(-70px) translateY(8px) scale(.9); filter: blur(4px); }
  42% { opacity: 1; transform: translateX(8px) translateY(0) scale(1.05); filter: none; }
  100% { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}

/* =========================================================================
   Interactive Stack Score scene — clickable supplement cards + UI affordances
   ========================================================================= */

/* Make every supplement card clickable + keyboard-focusable. */
.ssg-supp {
  cursor: pointer;
  transition:
    transform .18s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease,
    filter .22s ease,
    opacity .22s ease;
  -webkit-tap-highlight-color: transparent;
}

.ssg-supp:hover {
  transform: translateY(-1px) scale(1.012);
  border-color: color-mix(in srgb, var(--supp) 36%, var(--line-soft));
  box-shadow:
    0 1px 0 rgba(255,255,255,.72) inset,
    0 14px 26px -18px color-mix(in srgb, var(--supp) 62%, rgba(74,54,38,.22)),
    0 2px 6px rgba(74,54,38,.10);
}

.ssg-supp:focus-visible {
  outline: none;
  border-color: var(--supp);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--supp) 36%, var(--surface)),
    0 0 0 4px color-mix(in srgb, var(--supp) 22%, transparent);
}

.ssg-supp:active {
  transform: translateY(0) scale(.985);
}

/* When the user has entered manual mode, show ALL nine supplements so
   inactive ones can be clicked to add them back. */
.stack-score-graphic.is-manual .ssg-supp.is-inactive:not(.is-leaving) {
  display: grid;
  opacity: .42;
  filter: saturate(.55);
}

.stack-score-graphic.is-manual .ssg-supp.is-inactive:hover {
  opacity: .82;
  filter: saturate(.92);
}

.stack-score-graphic.is-manual .ssg-supp.is-inactive .ssg-supp em {
  background: color-mix(in srgb, var(--supp) 8%, var(--surface));
  color: var(--ink-faint);
}

/* Subtle "+" affordance on inactive cards in manual mode */
.stack-score-graphic.is-manual .ssg-supp.is-inactive::after {
  content: "+";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--supp) 22%, var(--surface));
  color: color-mix(in srgb, var(--supp) 75%, var(--ink));
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .2s ease, transform .2s ease;
}

.stack-score-graphic.is-manual .ssg-supp.is-inactive {
  position: relative;
}

.stack-score-graphic.is-manual .ssg-supp.is-inactive:hover::after,
.stack-score-graphic.is-manual .ssg-supp.is-inactive:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

/* "Try it" hint */
.try-it {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 6px;
  padding: 11px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--synergy) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--synergy) 20%, var(--line));
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.5;
  transition: opacity .25s ease, transform .25s ease;
}

.try-it.is-hidden {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  overflow: hidden;
}

.try-it b {
  color: var(--ink);
  font-weight: 700;
}

.try-tap {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--synergy);
  color: white;
  margin-top: 1px;
  animation: try-tap-pulse 2.2s ease-in-out infinite;
}

.try-tap svg { width: 14px; height: 14px; }

@keyframes try-tap-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--synergy) 40%, transparent); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 8px color-mix(in srgb, var(--synergy) 0%, transparent); }
}

/* Reset / replay button */
.ssg-actions {
  margin-top: 14px;
}

.ssg-reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-dim);
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.ssg-reset:hover {
  background: color-mix(in srgb, var(--ink) 4%, var(--surface));
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 12%, var(--line));
  transform: translateY(-1px);
}

.ssg-reset svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .ssg-supp { transition: none; }
  .try-tap { animation: none; }
}

@media (max-width: 960px) {
  .stack-score-graphic {
    width: min(100%, 460px);
  }
  .ssg-log { min-height: 264px; }
  .ssg-log-item { min-height: 78px; }
}
@media (max-width: 560px) {
  .ssg-log { min-height: 288px; }
  .ssg-log-item { min-height: 84px; }
}

@media (max-width: 560px) {
  .stack-score-graphic {
    min-height: 0;
    padding: 12px 10px;
  }
  .stack-score-graphic::before {
    inset: -12px -8px -18px;
  }
  .stack-score-graphic::after {
    left: 11%;
    right: 11%;
    bottom: -24px;
    height: 58px;
  }
  .ssg-score-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }
  .ssg-score {
    min-height: 138px;
  }
  .ssg-ring {
    width: 112px;
    height: 112px;
  }
  .ssg-score-value {
    font-size: 44px;
  }
  .ssg-score-copy span:last-child {
    font-size: 8.5px;
  }
  .ssg-breakdown {
    padding-right: 0;
    gap: 7px;
  }
  .ssg-bd-label {
    font-size: 8.5px;
  }
  .ssg-bd-row b {
    font-size: 14px;
  }
  .ssg-stack-head span {
    font-size: 8.5px;
  }
  .ssg-log-item {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 7px 9px;
    gap: 8px;
  }
  .ssg-log-delta {
    min-width: 32px;
    height: 28px;
    font-size: 13px;
  }
  .ssg-log-body b {
    font-size: 12px;
  }
  .ssg-log-body p {
    font-size: 10.5px;
    line-height: 1.25;
  }
  .ssg-stack-panel {
    margin-top: 16px;
    padding: 10px;
  }
  .ssg-stack-panel::before {
    left: 26px;
    top: 50px;
    bottom: 46px;
  }
  .ssg-stack-grid {
    min-height: 240px;
    gap: 6px;
  }
  .ssg-supp {
    min-height: 36px;
    grid-template-columns: 23px minmax(0, 1fr) auto;
    grid-template-areas: "icon text tag";
    gap: 6px;
    padding: 5px 6px;
  }
  .ssg-supp-icon { grid-area: icon; width: 23px; height: 23px; }
  .ssg-supp div { grid-area: text; min-width: 0; }
  .ssg-supp em {
    grid-area: tag;
    justify-self: end;
    min-width: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ssg-ring-fill,
  .ssg-bd-bar i {
    transition: none;
  }
  .ssg-supp.is-entering,
  .ssg-supp.is-leaving,
  .stack-score-graphic.is-score-pop .ssg-score,
  .ssg-change-token.is-adding,
  .ssg-change-token.is-dropping {
    animation: none !important;
  }
}

/* paired phones */
.scene-visual .phones-pair {
  position: relative;
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: center;
}
.scene-visual .phones-pair .device { max-width: 286px; }
.scene-visual .phones-pair .device:first-child {
  transform: translateY(26px) rotate(-3.5deg);
  z-index: 1;
}
.scene-visual .phones-pair .device:last-child {
  transform: translateY(-14px) rotate(2.5deg);
  z-index: 2;
}

/* =====================================================================
   Evidence Library: live research index
   ===================================================================== */

.research-feed {
  display: block;
  max-width: 1180px;
  --rf-accent: #2C7A8C;
  --rf-accent-deep: #1F6473;
}

.rf-head {
  max-width: 880px;
  margin: 0 auto 26px;
  text-align: center;
}
.rf-head .kicker {
  justify-content: center;
  margin-bottom: 24px;
}

.rf-numeral-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 26px);
  flex-wrap: wrap;
}
.rf-numeral {
  font-size: clamp(82px, 12vw, 156px);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.045em;
  color: var(--rf-accent);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg,
    var(--rf-accent) 0%,
    color-mix(in srgb, var(--rf-accent) 70%, var(--ink)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rf-numeral-sub {
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.022em;
  text-align: left;
  color: var(--ink);
  margin: 0;
  max-width: 260px;
}
.rf-trace {
  max-width: 620px;
  margin: 20px auto 0;
  font-size: clamp(15px, 1.3vw, 16.5px);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Filter chip bar */
.rf-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 920px;
  margin: 0 auto 22px;
  padding: 0 4px;
}
.rf-chip {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 99px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .25s ease;
}
.rf-chip i {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12px;
  color: var(--ink-faint);
  padding: 2px 6px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink-faint) 12%, var(--surface));
}
.rf-chip:hover {
  border-color: color-mix(in srgb, var(--rf-accent) 30%, var(--line-soft));
  transform: translateY(-1px);
}
.rf-chip:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--rf-accent) 50%, transparent);
  outline-offset: 2px;
}
.rf-chip.is-active {
  background: color-mix(in srgb, var(--rf-accent) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--rf-accent) 45%, var(--line-soft));
  color: var(--rf-accent-deep);
  box-shadow:
    0 8px 22px -10px color-mix(in srgb, var(--rf-accent) 55%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--rf-accent) 25%, transparent);
}
.rf-chip.is-active i {
  background: color-mix(in srgb, var(--rf-accent) 18%, var(--surface));
  color: var(--rf-accent-deep);
}

.rf-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rf-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: #3FA76A;
  box-shadow: 0 0 0 0 color-mix(in srgb, #3FA76A 40%, transparent);
  animation: rfPulse 1.6s ease-out infinite;
}
@keyframes rfPulse {
  0%   { box-shadow: 0 0 0 0    color-mix(in srgb, #3FA76A 60%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in srgb, #3FA76A 0%, transparent); }
  100% { box-shadow: 0 0 0 0    color-mix(in srgb, #3FA76A 0%, transparent); }
}

/* Paper card grid */
.rf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 1080px;
  margin: 0 auto;
}

.rf-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 16px 16px 14px;
  display: grid;
  gap: 10px;
  grid-template-rows: auto auto auto 1fr auto;
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  color: inherit;
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .2s ease;
  opacity: 1;
  overflow: hidden;
}
.rf-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--tier-color, var(--rf-accent));
  opacity: .85;
}
.rf-card.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
}
.rf-card.is-entering {
  opacity: 0;
  transform: translateY(8px);
}
.rf-card:hover {
  border-color: color-mix(in srgb, var(--rf-accent) 25%, var(--line-soft));
  box-shadow: var(--shadow-sm);
}

.rf-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
}
.rf-supp {
  text-transform: uppercase;
  color: color-mix(in srgb, var(--rf-accent) 75%, var(--ink));
  background: color-mix(in srgb, var(--rf-accent) 10%, var(--surface));
  padding: 4px 9px;
  border-radius: 99px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.rf-tier {
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 99px;
  font-size: 10.5px;
  letter-spacing: .06em;
  background: color-mix(in srgb, var(--tier-color, var(--rf-accent)) 14%, var(--surface));
  color: color-mix(in srgb, var(--tier-color, var(--rf-accent)) 75%, var(--ink));
  white-space: nowrap;
}

.rf-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.012em;
  margin: 0;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rf-meta {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  line-height: 1.3;
}
.rf-meta i { font-style: normal; }
.rf-meta-type {
  font-weight: 800;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink-faint) 10%, var(--surface));
}
.rf-meta-journal {
  font-weight: 700;
  color: var(--ink);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-meta-year {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink-soft);
}

.rf-foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px dashed var(--line-soft);
  padding-top: 10px;
  font-size: 12px;
}
.rf-n {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.rf-pubmed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: color-mix(in srgb, var(--rf-accent) 75%, var(--ink));
  font-weight: 800;
  text-decoration: none;
}
.rf-pubmed:hover { color: var(--rf-accent-deep); text-decoration: underline; }
.rf-pubmed svg { width: 12px; height: 12px; }

/* Tier colors */
.rf-card[data-tier="strong"]   { --tier-color: #3FA76A; }
.rf-card[data-tier="moderate"] { --tier-color: #D6A035; }
.rf-card[data-tier="emerging"] { --tier-color: #8A8478; }
.rf-card[data-tier="insufficient"] { --tier-color: #C2603C; }

/* Foot CTA */
.rf-foot {
  text-align: center;
  margin: 28px 0 0;
}
.rf-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: 99px;
  background: var(--rf-accent);
  color: #fff;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.005em;
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--rf-accent) 60%, transparent);
  transition: transform .15s ease, background .2s ease;
}
.rf-cta span { font-size: 17px; line-height: 1; }
.rf-cta:hover {
  background: var(--rf-accent-deep);
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 980px) {
  .rf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .rf-grid { grid-template-columns: minmax(0, 1fr); }
  .rf-numeral-row { gap: 14px; }
  .rf-numeral-sub { text-align: center; max-width: none; }
  .rf-bar { gap: 6px; }
  .rf-chip { padding: 7px 11px; font-size: 12.5px; }
  .rf-pulse { width: 100%; justify-content: center; margin: 6px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rf-pulse-dot { animation: none; }
  .rf-card { transition: none; }
}

/* scene floating tag (variant of feature-chip with sa) */
.scene-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--pill);
  box-shadow: var(--shadow-float);
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
  animation: bob 7s ease-in-out infinite;
}
.scene-chip .ico {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sa) 22%, var(--surface));
  color: var(--sa);
  flex: none;
}
.scene-chip .ico svg { width: 13px; height: 13px; }
.scene-chip.tl { top: 6%; left: clamp(-12px, 1vw, 8px); }
.scene-chip.br { bottom: 8%; right: clamp(-12px, 1vw, 8px); animation-direction: reverse; }

/* huge evidence inline number */
.evidence-pop {
  font-size: clamp(70px, 12vw, 140px);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: .9;
  background: linear-gradient(140deg, var(--accent-deep) 0%, var(--accent) 55%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 4px;
  display: block;
}
.evidence-pop-cap {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 18px;
}

/* tier strip */
.tier-strip {
  display: grid;
  gap: 8px;
  margin: 22px 0 0;
  max-width: 380px;
}
.tier {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  padding: 6px 0;
}
.tier .bar {
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: var(--surface-3);
  position: relative;
  overflow: hidden;
}
.tier .bar::after {
  content: "";
  position: absolute; inset: 0;
  width: var(--w, 60%);
  background: var(--tc, var(--synergy));
  border-radius: inherit;
  transition: width 1s var(--ease);
}
.tier .label {
  width: 90px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
}
.tier .count {
  width: 30px;
  font-size: 12.5px;
  color: var(--ink-faint);
  font-weight: 600;
  text-align: right;
}

/* =====================================================================
   AI Advisor: interactive 6-mode console
   ===================================================================== */

.ai-console {
  display: block;
  max-width: 1180px;
  --ac-accent: #7B68C9;
  --ac-accent-deep: #5C4BA8;
}

.ac-head {
  max-width: 720px;
  margin: 0 auto 26px;
  text-align: center;
}
.ac-head .kicker { justify-content: center; }
.ac-head h2 {
  font-size: clamp(32px, 4.2vw, 48px);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -.038em;
  margin: 0 0 14px;
}
.ac-head h2 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--ac-accent) 0%, #B695E0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ac-head .ac-sub {
  margin: 0 auto;
  max-width: 560px;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.3vw, 16.5px);
  line-height: 1.5;
}

/* Pills row */
.ac-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 22px;
  max-width: 960px;
  padding: 0 4px;
}

.ac-pill {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  color: var(--ink);
  padding: 9px 14px 9px 11px;
  border-radius: 99px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .25s ease;
  flex: 0 0 auto;
}
.ac-pill .ac-pill-ico {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--pc) 18%, var(--surface));
  color: color-mix(in srgb, var(--pc) 80%, var(--ink));
  flex: 0 0 auto;
}
.ac-pill .ac-pill-ico svg { width: 13px; height: 13px; }
.ac-pill:hover {
  border-color: color-mix(in srgb, var(--pc) 35%, var(--line-soft));
  transform: translateY(-1px);
}
.ac-pill:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pc) 55%, transparent);
  outline-offset: 2px;
}
.ac-pill.is-active {
  background: color-mix(in srgb, var(--pc) 13%, var(--surface));
  border-color: color-mix(in srgb, var(--pc) 45%, var(--line-soft));
  box-shadow:
    0 8px 22px -10px color-mix(in srgb, var(--pc) 55%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--pc) 25%, transparent);
}
.ac-pill.is-active .ac-pill-ico {
  background: var(--pc);
  color: #fff;
}

/* Console window */
.ac-window {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ac-accent) 22%, var(--line-soft));
  border-radius: 22px;
  box-shadow:
    0 28px 64px -28px color-mix(in srgb, var(--ac-accent) 32%, transparent),
    var(--shadow-md);
  padding: 18px;
  display: grid;
  gap: 14px;
  overflow: hidden;
  transition: border-color .35s ease, box-shadow .35s ease;
}
.ac-window::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 50% 0%,
    color-mix(in srgb, var(--ac-accent) 11%, transparent),
    transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.ac-window > * { position: relative; z-index: 1; }

/* Toolbar */
.ac-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid var(--line-soft);
  margin: -4px -4px 0;
  padding: 0 8px 12px;
}
.ac-dot {
  width: 9px; height: 9px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink-faint) 26%, var(--surface));
  flex: 0 0 auto;
}
.ac-dot:nth-child(1) { background: #E8758E; }
.ac-dot:nth-child(2) { background: #D6A035; }
.ac-dot:nth-child(3) { background: #3FA76A; }
.ac-mode-label {
  flex: 1;
  margin-left: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.005em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-livepulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.ac-livepulse-dot {
  width: 7px; height: 7px;
  border-radius: 99px;
  background: var(--ac-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ac-accent) 40%, transparent);
  animation: acPulse 1.8s ease-out infinite;
}
@keyframes acPulse {
  0%   { box-shadow: 0 0 0 0    color-mix(in srgb, var(--ac-accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--ac-accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0    color-mix(in srgb, var(--ac-accent) 0%, transparent); }
}

/* Messages */
/* Reserved heights below match the longest Q/A across all six advisors so
   the typewriter fills into a stable container instead of growing the
   section as each character types in (which shoves the bento below up and
   down). Values are sized for the typical viewport and bumped on narrower
   widths where text wraps to more lines. */
.ac-msg {
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}
.ac-msg-q {
  background: color-mix(in srgb, var(--ac-accent) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ac-accent) 25%, var(--line-soft));
  font-weight: 600;
  min-height: 80px;
}
.ac-msg-a {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .35s ease, transform .35s ease;
  min-height: 184px;
}
@media (max-width: 720px) {
  .ac-msg-q { min-height: 96px; }
  .ac-msg-a { min-height: 232px; }
}
@media (max-width: 480px) {
  .ac-msg-q { min-height: 112px; }
  .ac-msg-a { min-height: 288px; }
}
.ac-msg-a.in {
  opacity: 1;
  transform: translateY(0);
}

.ac-tag {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ac-accent);
  margin-bottom: 5px;
}
.ac-tag-ai {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ac-accent-deep);
}
.ac-ai-dot {
  width: 7px; height: 7px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--ac-accent), #B695E0);
  box-shadow: 0 0 6px color-mix(in srgb, var(--ac-accent) 60%, transparent);
}

.ac-cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--ac-accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: acCaret 1s steps(2) infinite;
}
.ac-cursor.is-off { animation: none; opacity: 0; }
@keyframes acCaret { 50% { opacity: 0; } }

/* Cited footer */
.ac-cite {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--info, var(--ac-accent)) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--info, var(--ac-accent)) 22%, transparent);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .35s ease, transform .35s ease, background .2s ease;
}
.ac-cite.in {
  opacity: 1;
  transform: translateY(0);
}
.ac-cite svg {
  width: 14px;
  height: 14px;
  color: var(--ac-accent-deep);
  margin-top: 3px;
}
.ac-cite-body { display: grid; gap: 2px; font-size: 12.5px; color: var(--ink-soft); }
.ac-cite-body b { color: var(--ink); }
.ac-cite-label {
  color: var(--ink);
  font-weight: 600;
  min-height: 2.6em;
}
@media (max-width: 720px) {
  .ac-cite-label { min-height: 3.9em; }
}
.ac-cite-link {
  color: var(--ac-accent-deep);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ac-cite-link span {
  margin-left: 4px;
  font-size: 14px;
  display: inline-block;
  transform: translateY(-1px);
}
.ac-cite:hover {
  background: color-mix(in srgb, var(--info, var(--ac-accent)) 14%, var(--surface));
}

/* Responsive */
@media (max-width: 620px) {
  .ac-pills { gap: 6px; }
  .ac-pill { padding: 8px 12px 8px 10px; font-size: 12.5px; }
  .ac-toolbar { gap: 5px; }
  .ac-mode-label { font-size: 11.5px; margin-left: 9px; }
  .ac-msg { font-size: 13.5px; padding: 12px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-msg-a, .ac-cite { transition: none; }
  .ac-cursor, .ac-livepulse-dot { animation: none; }
}

/* =====================================================================
   REVAMP — Final CTA hero
   ===================================================================== */

.cta-final-revamp {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 7vw, 90px) clamp(20px, 5vw, 34px) clamp(48px, 8vw, 100px);
}
.cta-final-revamp .card {
  position: relative;
  text-align: center;
  overflow: hidden;
  padding: clamp(36px, 6vw, 70px) clamp(22px, 5vw, 54px);
  background:
    radial-gradient(80% 100% at 50% 0%, color-mix(in srgb, var(--accent) 18%, var(--surface)) 0%, var(--surface) 60%);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: clamp(20px, 2.4vw, 30px);
  box-shadow: var(--shadow-lg);
}
.cta-final-revamp h2 {
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 850;
  letter-spacing: -.04em;
  line-height: 1.04;
  margin: 14px 0 14px;
}
.cta-final-revamp h2 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--accent-deep) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta-final-revamp .lead { max-width: 480px; margin: 0 auto; }
.cta-final-revamp .btn-row { justify-content: center; margin-top: 28px; }

/* =====================================================================
   REVAMP — Builder hero responsive
   ===================================================================== */

@media (max-width: 960px) {
  .builder-hero {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .builder-copy .lead { margin-left: auto; margin-right: auto; }
  .builder-copy .hint { margin-left: auto; margin-right: auto; }
}

@media (max-width: 860px) {
  .scene {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .scene-visual, .scene-copy { order: 0 !important; }
  .scene-copy { text-align: center; margin-left: auto; margin-right: auto; }
  .scene-copy .kicker { justify-content: center; }
  .scene-copy .lead { margin-left: auto; margin-right: auto; }
  .scene-copy .mini-list { display: inline-block; text-align: left; }
  .tier-strip { margin-left: auto; margin-right: auto; }
}

@media (max-width: 560px) {
  .builder-copy h1 { font-size: clamp(34px, 11vw, 52px); }
  .builder-panel { padding: 14px; }
  .builder-head { flex-direction: column; gap: 10px; align-items: flex-start; }
  .builder-score { align-self: stretch; }
}

/* =====================================================================
   REVAMP — Homepage feature carousel (3 screenshots)
   ===================================================================== */

.carousel-section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 110px) clamp(20px, 5vw, 34px);
}
.carousel-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto clamp(28px, 4vw, 48px);
}
.carousel-head .kicker { justify-content: center; }
.carousel-head h2 {
  font-size: clamp(32px, 4.2vw, 50px);
  font-weight: 850;
  letter-spacing: -.04em;
  line-height: 1.05;
  margin: 0 0 14px;
}
.carousel-head h2 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--accent-deep) 0%, var(--accent) 60%, var(--brand-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.carousel-head .lead {
  font-size: clamp(16.5px, 1.45vw, 18.5px);
  color: var(--ink-soft);
  margin: 0;
}

.carousel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 6vw, 84px);
  align-items: center;
}

/* Caption stack — all 3 stacked, only active visible */
.carousel-captions {
  position: relative;
  min-height: 360px;
}
.ccap {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.ccap.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  position: relative;
}
.ccap .kicker {
  margin-bottom: 14px;
}
.ccap .kicker .ki {
  background: color-mix(in srgb, var(--ca, var(--accent)) 16%, var(--surface));
  color: var(--ca, var(--accent-deep));
}
.ccap h3 {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 850;
  letter-spacing: -.038em;
  line-height: 1.06;
  margin: 0 0 14px;
  color: var(--ink);
}
.ccap h3 em {
  font-style: normal;
  color: var(--ca, var(--accent-deep));
}
.ccap .lead {
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--ink-soft);
  margin: 0 0 22px;
  max-width: 460px;
}
.ccap .mini-list {
  --fa: var(--ca, var(--accent));
}

.ccap.acc-today        { --ca: #2C7A8C; }
.ccap.acc-interactions { --ca: #3FA76A; }
.ccap.acc-ai           { --ca: #7B68C9; }
.ccap.acc-stack        { --ca: #2C7A8C; }
.ccap.acc-evidence     { --ca: #2C7A8C; }

/* Phone stage — 3 phones layered, active visible */
.carousel-stage {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  aspect-ratio: 296 / 626;
}
.carousel-stage::before {
  content: "";
  position: absolute;
  inset: -6% -8% -6% -8%;
  background: radial-gradient(58% 48% at 50% 50%,
    color-mix(in srgb, var(--ca, var(--accent)) 24%, transparent),
    transparent 70%);
  filter: blur(40px);
  z-index: 0;
  transition: background .6s ease;
}
.cslide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .55s var(--ease), transform .6s var(--ease);
  pointer-events: none;
  display: flex;
  justify-content: center;
}
.cslide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.cslide .device { max-width: 100%; }
.cslide .device img {
  /* lock aspect via height too so layout doesn't reflow on swap */
  width: 100%;
  height: auto;
}

/* Carousel controls */
.carousel-controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: clamp(24px, 3vw, 34px);
}
.cnav {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: transform .12s var(--ease), border-color .15s, background .15s, color .15s;
  font-family: var(--font);
}
.cnav:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
  transform: translateY(-1px);
}
.cnav:active { transform: translateY(0); }
.cnav svg { width: 18px; height: 18px; }
.cdots {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cdot {
  display: block;
  width: 28px;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background .25s ease, width .25s ease;
}
.cdot:hover { background: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.cdot.is-active {
  background: var(--accent);
  width: 44px;
}

/* Carousel slide labels (mobile only — see below) */
.cslide-label {
  display: none;
}

@media (max-width: 860px) {
  .carousel {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .carousel-captions {
    min-height: 0;
    order: 2;
    text-align: center;
  }
  .ccap { position: absolute; }
  .ccap.is-active { position: relative; }
  .ccap .kicker { justify-content: center; }
  .ccap .mini-list { display: inline-block; text-align: left; }
  .carousel-stage { order: 1; max-width: 320px; }
}

@media (max-width: 560px) {
  .carousel-stage { max-width: 280px; }
  .ccap h3 { font-size: 26px; }
}

/* =====================================================================
   REVAMP — Fanned 3-phone HERO carousel
   ===================================================================== */

.hero-fan {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) clamp(18px, 5vw, 34px) clamp(28px, 5vw, 60px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}

/* === Copy column === */
.hf-copy { min-width: 0; }
.hf-copy .pill-eyebrow { margin-bottom: 20px; }

.hf-captions {
  position: relative;
  margin-bottom: 28px;
  min-height: 260px;
}
.hf-caption {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  pointer-events: none;
}
.hf-caption.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  position: relative;
}
.hf-caption .hf-eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hfa, var(--accent-deep));
  background: color-mix(in srgb, var(--hfa, var(--accent)) 12%, var(--surface));
  padding: 6px 13px;
  border-radius: var(--pill);
  margin: 0 0 18px;
}
.hf-caption h1 {
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 850;
  letter-spacing: -.04em;
  line-height: 1.02;
  margin: 0 0 18px;
}
.hf-caption h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--hfa-deep, var(--accent-deep)) 0%, var(--hfa, var(--accent)) 60%, var(--brand-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hf-caption .lead {
  font-size: clamp(16.5px, 1.55vw, 19.5px);
  max-width: 480px;
  margin: 0;
  color: var(--ink-soft);
}

.hf-caption.acc-today        { --hfa: #2C7A8C; --hfa-deep: #1F6473; }
.hf-caption.acc-interactions { --hfa: #3FA76A; --hfa-deep: #2D8857; }
.hf-caption.acc-ai           { --hfa: #7B68C9; --hfa-deep: #5A48A0; }

/* Controls */
.hf-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

/* === Phone stage (3 fanned phones) === */
.hf-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1.05 / 1;
  max-width: 640px;
  margin: 0 auto;
  perspective: 1400px;
}
.hf-glow {
  position: absolute;
  inset: 5% 8%;
  background:
    radial-gradient(46% 42% at 50% 50%,
      color-mix(in srgb, var(--stage-tint, var(--accent)) 30%, transparent), transparent 70%);
  filter: blur(48px);
  z-index: 0;
  transition: background 0.7s var(--ease);
  pointer-events: none;
}
.hf-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  max-width: 320px;
  transform-style: preserve-3d;
  transition:
    transform .8s cubic-bezier(.4, .0, .2, 1),
    opacity .7s var(--ease),
    filter .8s var(--ease),
    z-index 0s linear .35s;
  will-change: transform, opacity;
  cursor: pointer;
}
.hf-phone .device {
  margin: 0;
  /* override any padding inherit so we control sizing here */
}
.hf-phone .device img {
  display: block;
  width: 100%;
  height: auto;
}

/* Three states — center, left-back, right-back */
.hf-phone {
  /* default = right-back position so transition works on first render */
  transform: translate(-50%, -50%) translateX(34%) scale(.74) rotateZ(6deg);
  opacity: 0;
  z-index: 1;
  filter: blur(0.5px);
}
.hf-phone.is-active {
  transform: translate(-50%, -50%) translateX(0) scale(1) rotateZ(0);
  opacity: 1;
  z-index: 3;
  filter: none;
  transition-delay: 0s;
}
.hf-phone.is-left {
  transform: translate(-50%, -50%) translateX(-46%) scale(.72) rotateZ(-7deg);
  opacity: .55;
  z-index: 2;
  filter: blur(.6px);
}
.hf-phone.is-right {
  transform: translate(-50%, -50%) translateX(46%) scale(.72) rotateZ(7deg);
  opacity: .55;
  z-index: 2;
  filter: blur(.6px);
}

/* Make the bezel shadow slightly stronger on the active phone */
.hf-phone.is-active .device {
  box-shadow: var(--shadow-lg),
              0 0 0 1px rgba(255,255,255,.06) inset,
              0 -2px 6px rgba(0,0,0,.45) inset;
}

@media (max-width: 960px) {
  .hero-fan {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  .hf-copy { order: 2; }
  .hf-stage { order: 1; max-width: 520px; }
  .hf-captions { min-height: 220px; }
  .hf-caption .lead { margin-left: auto; margin-right: auto; }
  .hf-controls { justify-content: center; }
  .hf-copy .btn-row { justify-content: center; }
}

@media (max-width: 560px) {
  .hf-stage { max-width: 420px; }
  .hf-phone { width: 56%; }
  .hf-phone.is-left  { transform: translate(-50%, -50%) translateX(-38%) scale(.66) rotateZ(-6deg); }
  .hf-phone.is-right { transform: translate(-50%, -50%) translateX(38%) scale(.66) rotateZ(6deg); }
  .hf-captions { min-height: 240px; }
  .hf-caption h1 { font-size: clamp(30px, 9vw, 44px); }
}

/* =====================================================================
   REVAMP — Discovery scene: Explore decision system
   ===================================================================== */

.explore-flow {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  max-width: 440px;
}

.explore-flow-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-2));
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
}

.explore-flow-row .ef-ico {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--ef, var(--cat-pink));
  background: color-mix(in srgb, var(--ef, var(--cat-pink)) 15%, var(--surface));
}

.explore-flow-row .ef-ico svg {
  width: 17px;
  height: 17px;
}

.explore-flow-row b {
  display: block;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.2;
  letter-spacing: 0;
}

.explore-flow-row span:not(.ef-ico) {
  display: block;
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.42;
  letter-spacing: 0;
}

.explore-decision .phone-wrap {
  min-width: min(100%, 360px);
}

.explore-mock-app {
  position: relative;
  width: 100%;
  aspect-ratio: 552 / 1200;
  border-radius: 36px;
  overflow: hidden;
  background: linear-gradient(180deg, #FAFCFD 0%, #F5F8FA 58%, #EEF6F6 100%);
  color: #1A1916;
  font-family: var(--font);
}

.mock-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 24px 17px 92px;
}

.mock-scroll::-webkit-scrollbar {
  display: none;
}

.mock-status {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1;
  margin-bottom: 24px;
}

.mock-status b,
.mock-status em {
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0;
}

.mock-status span {
  justify-self: end;
  width: 46px;
  height: 11px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #D4DCE0 0 18%, transparent 18% 28%, #D4DCE0 28% 46%, transparent 46% 56%, #D4DCE0 56% 78%, transparent 78%),
    linear-gradient(90deg, transparent 0 58%, #1A1916 58% 68%, transparent 68% 75%, #1A1916 75% 84%, transparent 84%);
}

.mock-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.mock-title-row h3 {
  margin: 0;
  font-size: 29px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0;
  color: #1A1916;
}

.mock-tool {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: #FFFFFF;
  color: var(--accent);
  border: 1px solid rgba(28, 70, 80, .08);
  box-shadow: 0 8px 22px -16px rgba(28, 50, 60, .45);
}

.mock-tool svg {
  width: 21px;
  height: 21px;
}

.mock-search {
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  background: #FFFFFF;
  border: 1px solid rgba(28, 70, 80, .08);
  color: #A1A9AC;
  font-size: 14px;
  font-weight: 600;
}

.mock-search svg {
  width: 17px;
  height: 17px;
  color: #8A979C;
}

.mock-chip-row {
  display: flex;
  gap: 8px;
  margin: 16px 0 23px;
  padding: 2px 0;
  overflow: hidden;
}

.mock-chip {
  flex: none;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
}

.mock-chip.is-warm { color: #B97121; background: #F9EBD5; }
.mock-chip.is-pink { color: #B84E6A; background: #F9DEE5; }
.mock-chip.is-blue { color: #3667B1; background: #DDEBFF; }
.mock-chip.is-teal { color: #237381; background: #DDF2F2; }

.mock-section {
  margin-bottom: 24px;
}

.mock-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.mock-section-head h4 {
  margin: 0;
  font-size: 23px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0;
  color: #1A1916;
}

.mock-section-head h4::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(44, 122, 140, .11);
  vertical-align: 3px;
}

.mock-section-head span {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
  color: #237381;
  background: #DDF2F2;
}

.mock-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

.mock-supp-card,
.mock-goal-card,
.mock-protocol-card {
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(28, 70, 80, .10);
  box-shadow: 0 10px 22px -18px rgba(28, 50, 60, .45);
}

.mock-supp-card {
  border-radius: 18px;
  min-height: 166px;
  padding: 13px;
  display: grid;
  align-content: start;
}

.mock-supp-ico {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  margin-bottom: 11px;
  background: #DDF2F2;
}

.mock-supp-ico.is-pink { background: radial-gradient(circle at 50% 50%, #E8758E 0 26%, #F8DDE5 28% 100%); }
.mock-supp-ico.is-blue { background: radial-gradient(circle at 50% 50%, #4A90D9 0 26%, #DDEBFF 28% 100%); }
.mock-supp-ico.is-purple { background: radial-gradient(circle at 50% 50%, #7B68C9 0 26%, #E6E2FF 28% 100%); }
.mock-supp-ico.is-warm { background: radial-gradient(circle at 50% 50%, #E8A87C 0 26%, #F9EBD5 28% 100%); }

.mock-supp-card small,
.mock-goal-card small {
  color: #E8758E;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0;
}

.mock-supp-card b,
.mock-goal-card b,
.mock-protocol-card b {
  display: block;
  margin-top: 3px;
  color: #1A1916;
  font-size: 17px;
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: 0;
}

.mock-supp-card em {
  justify-self: start;
  margin: 9px 0;
  border-radius: 999px;
  padding: 5px 10px;
  background: #D8F0E7;
  color: #2D8857;
  font-size: 12px;
  line-height: 1;
  font-style: normal;
  font-weight: 850;
}

.mock-supp-card p,
.mock-goal-card p,
.mock-protocol-card p {
  margin: 0;
  color: #667073;
  font-size: 12px;
  line-height: 1.32;
  font-weight: 600;
}

.mock-goal-card {
  min-height: 136px;
  border-radius: 17px;
  padding: 13px;
}

.mock-goal-card .mock-supp-ico {
  width: 40px;
  height: 40px;
  margin-bottom: 13px;
}

.mock-goal-card small {
  display: block;
  margin-top: 12px;
  color: #8A8F98;
  font-weight: 700;
}

.mock-protocol-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mock-protocol-card {
  min-height: 126px;
  border-radius: 17px;
  padding: 13px;
  display: grid;
  align-content: start;
}

.mock-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 11px;
}

.mock-protocol-card .mock-supp-ico {
  width: 40px;
  height: 40px;
  margin: 0;
}

.mock-protocol-card em {
  border-radius: 999px;
  padding: 5px 7px;
  color: #7B68C9;
  background: #ECE9FF;
  font-size: 9px;
  line-height: 1;
  font-style: normal;
  font-weight: 850;
}

.mock-protocol-card b {
  min-height: 36px;
  font-size: 13px;
  line-height: 1.28;
}

.mock-safety-grid {
  display: grid;
  gap: 8px;
}

.mock-safety-grid span {
  border-radius: 14px;
  padding: 12px;
  color: #2D8857;
  background: rgba(216, 240, 231, .8);
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
}

.mock-tabbar {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 3;
  height: 62px;
  border-radius: 31px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(28, 70, 80, .08);
  box-shadow: 0 16px 38px -22px rgba(28, 50, 60, .48);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.mock-tabbar span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: #1A1916;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
}

.mock-tabbar svg {
  width: 20px;
  height: 20px;
  margin-bottom: 5px;
}

.mock-tabbar .is-active {
  color: var(--accent);
}

.mock-tabbar .is-active svg {
  filter: drop-shadow(0 0 13px rgba(44, 122, 140, .26));
}

.explore-screen-tour {
  position: absolute;
  inset: 11px;
  z-index: 2;
  overflow: hidden;
  border-radius: 36px;
  pointer-events: none;
}

.tour-frame {
  position: absolute;
  left: var(--tour-left, 5%);
  top: var(--tour-top, 27%);
  width: var(--tour-width, 90%);
  height: var(--tour-height, 25%);
  border: 2px solid var(--cat-pink);
  border-radius: 12px;
  color: var(--tour-color, var(--cat-pink));
  border-color: var(--tour-color, var(--cat-pink));
  background: color-mix(in srgb, var(--tour-color, var(--cat-pink)) 9%, transparent);
  box-shadow:
    0 0 0 999px rgba(255,255,255,.13),
    0 12px 34px -18px color-mix(in srgb, var(--tour-color, var(--cat-pink)) 80%, transparent),
    0 0 0 6px color-mix(in srgb, var(--tour-color, var(--cat-pink)) 12%, transparent);
  transition:
    left .62s var(--ease),
    top .62s var(--ease),
    width .62s var(--ease),
    height .62s var(--ease),
    color .35s ease,
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}

.tour-frame::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.28) 44%,
      rgba(255,255,255,.52) 50%,
      rgba(255,255,255,.28) 56%,
      transparent 100%);
  transform: translateX(-120%);
  animation: explore-tour-sweep 4s ease-in-out infinite;
}

.tour-frame::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  color: inherit;
  box-shadow: 0 0 0 7px color-mix(in srgb, currentColor 20%, transparent);
  animation: explore-tour-dot 1.8s ease-in-out infinite;
}

@keyframes explore-tour-sweep {
  0%, 22% { transform: translateX(-120%); opacity: 0; }
  38%, 62% { opacity: 1; }
  82%, 100% { transform: translateX(120%); opacity: 0; }
}

@keyframes explore-tour-dot {
  0%, 100% { transform: scale(.82); opacity: .68; }
  50% { transform: scale(1); opacity: 1; }
}

.explore-part-carousel {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.explore-part-card {
  position: absolute;
  right: clamp(-122px, -6.5vw, -42px);
  top: 18%;
  width: 196px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--part, var(--cat-pink)) 24%, var(--line-soft));
  box-shadow: var(--shadow-float);
  opacity: 0;
  transform: translateX(18px) scale(.96);
  transition: opacity .34s ease, transform .42s var(--ease);
}

.explore-part-card.part-goals { top: 49%; }
.explore-part-card.part-evidence { top: 68%; }
.explore-part-card.part-safety {
  top: 15%;
  left: auto;
  right: -174px;
  width: 174px;
  transform: translateX(18px) scale(.96);
}

.explore-part-card.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.explore-part-card.part-safety.is-active {
  transform: translateX(0) scale(1);
}

.explore-part-card .part-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex: none;
  color: var(--part, var(--cat-pink));
  background: color-mix(in srgb, var(--part, var(--cat-pink)) 15%, var(--surface));
}

.explore-part-card .part-ico svg {
  width: 17px;
  height: 17px;
}

.explore-part-card b,
.explore-part-card small {
  display: block;
  letter-spacing: 0;
}

.explore-part-card b {
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.15;
}

.explore-part-card small {
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.3;
}

.explore-decision-panel {
  position: absolute;
  z-index: 4;
  top: 16%;
  left: clamp(-178px, -10vw, -64px);
  width: 232px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--tour-color, var(--cat-pink)) 24%, var(--line-soft));
  border-radius: 8px;
  box-shadow: var(--shadow-float);
  animation: explore-panel-float 8s ease-in-out infinite;
}

@keyframes explore-panel-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.edp-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.edp-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--tour-color, var(--cat-pink));
  background: color-mix(in srgb, var(--tour-color, var(--cat-pink)) 16%, var(--surface));
  transition: background .35s ease, color .35s ease;
}

.edp-icon svg {
  width: 18px;
  height: 18px;
}

.edp-top span:not(.edp-icon),
.edp-score span,
.explore-quality-strip span {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.edp-top b {
  display: block;
  margin-top: 3px;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--ink);
}

.edp-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--tour-color, var(--synergy)) 14%, var(--surface)),
      color-mix(in srgb, var(--info) 11%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--tour-color, var(--synergy)) 20%, var(--line-soft));
  position: relative;
  overflow: hidden;
}

.edp-score::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--edp-score-fill, 92%);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--tour-color, var(--synergy)) 10%, transparent),
    color-mix(in srgb, var(--tour-color, var(--synergy)) 20%, transparent));
  transform: translateX(-100%);
  animation: explore-score-fill 4s var(--ease) infinite;
  transition: width .42s var(--ease), background .35s ease;
}

@keyframes explore-score-fill {
  0%, 18% { transform: translateX(-100%); opacity: .2; }
  44%, 82% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: .35; }
}

.edp-score b {
  position: relative;
  z-index: 1;
  font-size: 30px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0;
  color: var(--tour-ink, var(--synergy-deep));
  font-variant-numeric: tabular-nums;
}

.edp-score span {
  position: relative;
  z-index: 1;
}

.edp-checklist {
  display: grid;
  gap: 10px;
}

.edp-check {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.edp-dot {
  display: block;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--tour-color, var(--cat-pink));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tour-color, var(--cat-pink)) 13%, transparent);
  animation: explore-check-pulse 3.2s ease-in-out infinite;
}

.edp-check:nth-child(2) .edp-dot { animation-delay: .35s; }
.edp-check:nth-child(3) .edp-dot { animation-delay: .7s; }

@keyframes explore-check-pulse {
  0%, 100% {
    transform: scale(.9);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tour-color, var(--cat-pink)) 13%, transparent);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--tour-color, var(--cat-pink)) 6%, transparent);
  }
}

.edp-check b {
  display: block;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0;
}

.edp-check span:not(.edp-dot) {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0;
}

.explore-quality-strip {
  position: absolute;
  z-index: 4;
  right: clamp(-34px, -1.2vw, -8px);
  bottom: 5%;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 300px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  box-shadow: var(--shadow-float);
  animation: explore-strip-rise 8s ease-in-out infinite reverse;
}

@keyframes explore-strip-rise {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.explore-quality-strip b {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 11%, var(--surface));
  color: var(--accent-deep);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.explore-quality-strip b:nth-of-type(2) {
  background: color-mix(in srgb, var(--info) 12%, var(--surface));
  color: var(--info);
}

.explore-quality-strip b:nth-of-type(3) {
  background: color-mix(in srgb, var(--synergy) 13%, var(--surface));
  color: var(--synergy-deep);
}

@media (max-width: 860px) {
  .explore-flow {
    margin-left: auto;
    margin-right: auto;
  }

  .explore-part-carousel {
    position: relative;
    inset: auto;
    width: min(100%, 360px);
    height: 74px;
    margin: 14px auto 0;
  }

  .explore-part-card,
  .explore-part-card.part-goals,
  .explore-part-card.part-evidence,
  .explore-part-card.part-safety {
    top: 0;
    right: auto;
    left: 50%;
    width: min(100%, 335px);
    transform: translate(-50%, 12px) scale(.96);
  }

  .explore-part-card.is-active {
    transform: translate(-50%, 0) scale(1);
  }

  .explore-part-card.part-safety.is-active {
    transform: translate(-50%, 0) scale(1);
  }

  .explore-decision-panel {
    position: static;
    width: min(100%, 360px);
    margin: 16px auto 0;
    animation: none;
  }

  .explore-quality-strip {
    position: static;
    width: min(100%, 360px);
    margin: 10px auto 0;
    justify-content: center;
    flex-wrap: wrap;
    animation: none;
  }
}

@media (max-width: 560px) {
  .explore-flow-row {
    padding: 11px;
  }

  .explore-quality-strip span {
    flex-basis: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour-frame,
  .tour-frame::before,
  .tour-frame::after,
  .explore-part-card,
  .explore-decision-panel,
  .edp-score::before,
  .edp-dot,
  .explore-quality-strip {
    animation: none !important;
  }

  .tour-frame {
    left: var(--tour-left, 5%);
    top: var(--tour-top, 27%);
    width: var(--tour-width, 90%);
    height: var(--tour-height, 25%);
  }

  .tour-frame::before,
  .tour-frame::after {
    display: none;
  }

  .explore-part-card.part-for-you {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  .edp-score::before {
    transform: translateX(0);
  }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .explore-part-card.part-for-you {
    transform: translate(-50%, 0) scale(1);
  }
}

/* =====================================================================
   Interactive Explore goal switcher
   ===================================================================== */

.explore-scene {
  display: block;
  max-width: 1180px;
  text-align: left;
}

.explore-head {
  max-width: 720px;
  margin: 0 auto 30px;
  text-align: center;
}

.explore-head .kicker {
  justify-content: center;
}

.explore-head h2 {
  font-size: clamp(32px, 4.2vw, 48px);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -.038em;
  margin: 0 0 14px;
}

.explore-head h2 em {
  font-style: normal;
  color: var(--sa, var(--accent-deep));
}

.explore-head .explore-sub {
  margin: 0 auto;
  max-width: 560px;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.3vw, 16.5px);
  line-height: 1.5;
}

.goal-switcher {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(26px, 3.5vw, 40px);
  min-width: 0;
}
.goal-switcher > * { min-width: 0; }

.gs-glow {
  position: absolute;
  inset: 8% -6% 28% -6%;
  background: radial-gradient(55% 50% at 50% 50%,
    color-mix(in srgb, var(--gs-accent, var(--sa)) 22%, transparent),
    transparent 70%);
  filter: blur(48px);
  z-index: 0;
  pointer-events: none;
  transition: background .45s ease;
}

.gs-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
  justify-content: center;
  max-width: 940px;
  margin: 0 auto;
  width: 100%;
}

.gs-phone {
  position: relative;
  justify-self: center;
}
.gs-phone .device {
  max-width: 330px;
}

/* Overlay card sitting inside the phone's screen area */
.gs-overlay {
  position: absolute;
  left: 6.5%;
  right: 6.5%;
  top: 30%;
  bottom: 13%;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  transition: opacity .35s ease;
}

.gs-overlay-card {
  width: 100%;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--gs-accent, var(--sa)) 28%, var(--line-soft));
  border-radius: 18px;
  padding: 14px 14px 12px;
  box-shadow:
    0 24px 48px -28px color-mix(in srgb, var(--gs-accent, var(--sa)) 60%, transparent),
    0 6px 16px -6px rgba(0, 0, 0, .12);
  backdrop-filter: blur(6px);
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;
}

.gs-overlay.is-swap .gs-overlay-card {
  transform: translateY(8px);
  opacity: 0;
}

.gs-ov-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.gs-ov-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--gs-accent, var(--sa)) 16%, var(--surface));
  color: color-mix(in srgb, var(--gs-accent, var(--sa)) 80%, var(--ink));
}
.gs-ov-ico svg {
  width: 19px;
  height: 19px;
}

.gs-ov-titles {
  min-width: 0;
}
.gs-ov-kicker {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.gs-ov-titles h4 {
  margin: 1px 0 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-ov-rank {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gs-accent, var(--sa)) 18%, var(--surface));
  color: color-mix(in srgb, var(--gs-accent, var(--sa)) 75%, var(--ink));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Spotlight body: name + per-stack role for the highlighted supplement */
.gs-ov-spot {
  display: grid;
  gap: 4px;
  padding: 10px 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--gs-accent, var(--sa)) 16%, var(--line-soft));
  margin-bottom: 10px;
  transition: opacity .25s ease, transform .25s ease;
}
.gs-overlay.is-swap .gs-ov-spot,
.gs-ov-spot.is-spot-swap {
  opacity: 0;
  transform: translateY(4px);
}
.gs-ov-name {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.012em;
  color: var(--ink);
  line-height: 1.2;
}
.gs-ov-role {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink-soft);
}

.gs-ov-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
}
.gs-ov-tier {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--tier-c, var(--gs-accent)) 18%, var(--surface));
  color: color-mix(in srgb, var(--tier-c, var(--gs-accent)) 70%, var(--ink));
}
.gs-ov-dots {
  display: inline-flex;
  gap: 4px;
}
.gs-ov-dot {
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ink-faint) 35%, transparent);
  transition: background .25s ease, transform .25s ease;
}
.gs-ov-dot.is-active {
  background: var(--gs-accent, var(--sa));
  transform: scale(1.25);
}

/* Detail panel on the right */
.gs-detail {
  position: relative;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--gs-accent, var(--sa)) 18%, var(--line-soft));
  border-radius: 18px;
  padding: clamp(18px, 2vw, 26px);
  box-shadow: var(--shadow-sm);
  min-width: 0;
  display: grid;
  gap: 14px;
  transition: opacity .25s ease, transform .25s ease, border-color .35s ease;
}
.gs-detail.is-swap {
  opacity: 0;
  transform: translateY(6px);
}

.gs-detail-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gs-accent, var(--sa)) 70%, var(--ink-soft));
}
.gs-detail h3 {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 850;
  letter-spacing: -.024em;
  color: var(--ink);
}
.gs-detail-sub {
  margin: -6px 0 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 38ch;
}

/* Tier count chip strip — promoted from a tiny footnote bar to a prominent
   "stack quality at a glance" header below the goal subtitle. */
.gs-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 2px;
}
.gs-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cc) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cc) 30%, var(--line-soft));
  font-size: 12px;
  font-weight: 700;
  color: color-mix(in srgb, var(--cc) 55%, var(--ink));
  letter-spacing: -.005em;
}
.gs-count b {
  font-size: 13.5px;
  font-weight: 850;
  color: color-mix(in srgb, var(--cc) 75%, var(--ink));
  font-variant-numeric: tabular-nums;
}
.gs-count-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--cc);
}

.gs-supps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 7px;
}
.gs-supps li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 55%, var(--surface));
  border: 1px solid var(--line-soft);
  border-left: 3px solid color-mix(in srgb, var(--gs-accent, var(--sa)) 50%, var(--line-soft));
  border-radius: 12px;
  color: var(--ink);
  transition: transform .15s ease, border-color .2s ease, background .2s ease;
}
.gs-supps li:hover {
  transform: translateX(2px);
  background: color-mix(in srgb, var(--gs-accent, var(--sa)) 5%, var(--surface));
  border-left-color: var(--gs-accent, var(--sa));
}
.gs-supps .gs-supp-n {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 12px;
  color: color-mix(in srgb, var(--gs-accent, var(--sa)) 80%, var(--ink-faint));
  text-align: center;
  align-self: center;
}
.gs-supps .gs-supp-body {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.gs-supps .gs-supp-name {
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs-supps .gs-supp-role {
  font-size: 12px;
  font-weight: 550;
  line-height: 1.3;
  color: var(--ink-soft);
}
.gs-supps .gs-supp-tier {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--tier-c, var(--gs-accent)) 18%, var(--surface));
  color: color-mix(in srgb, var(--tier-c, var(--gs-accent)) 70%, var(--ink));
  align-self: center;
  white-space: nowrap;
}

.gs-cta {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 12px 18px;
  border-radius: 999px;
  background: var(--gs-accent, var(--sa));
  border: 1px solid color-mix(in srgb, var(--gs-accent, var(--sa)) 70%, #000 0%);
  color: #fff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -.005em;
  box-shadow:
    0 10px 24px -10px color-mix(in srgb, var(--gs-accent, var(--sa)) 65%, transparent),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
.gs-cta-arrow {
  font-size: 15px;
  line-height: 1;
  transition: transform .2s ease;
}
.gs-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 14px 30px -10px color-mix(in srgb, var(--gs-accent, var(--sa)) 70%, transparent),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.gs-cta:hover .gs-cta-arrow {
  transform: translateX(2px);
}
.gs-cta:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gs-accent, var(--sa)) 60%, transparent);
  outline-offset: 3px;
}

/* Chip rail */
.gs-rail-wrap {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}
.gs-rail {
  display: flex;
  gap: 10px;
  padding: 6px 4px 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  justify-content: center;
  flex-wrap: wrap;
  -webkit-overflow-scrolling: touch;
}
.gs-rail::-webkit-scrollbar { display: none; }

.gs-chip {
  appearance: none;
  border: 1px solid var(--line-soft);
  background: var(--surface);
  color: var(--ink);
  padding: 9px 14px 9px 11px;
  border-radius: 99px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.005em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .25s ease;
  flex: 0 0 auto;
}
.gs-chip .gs-chip-ico {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--gc) 18%, var(--surface));
  color: color-mix(in srgb, var(--gc) 80%, var(--ink));
  flex: 0 0 auto;
}
.gs-chip .gs-chip-ico svg {
  width: 14px;
  height: 14px;
}
.gs-chip:hover {
  border-color: color-mix(in srgb, var(--gc) 35%, var(--line-soft));
  transform: translateY(-1px);
}
.gs-chip:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gc) 55%, transparent);
  outline-offset: 2px;
}
.gs-chip.is-active {
  background: color-mix(in srgb, var(--gc) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--gc) 45%, var(--line-soft));
  box-shadow:
    0 8px 22px -10px color-mix(in srgb, var(--gc) 55%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--gc) 25%, transparent);
}
.gs-chip.is-active .gs-chip-ico {
  background: var(--gc);
  color: #fff;
}

/* Responsive */
@media (max-width: 980px) {
  .gs-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    max-width: 520px;
    width: 100%;
  }
  .gs-phone { order: 1; min-width: 0; }
  .gs-detail { order: 2; min-width: 0; }
  .gs-detail-sub { max-width: none; }
}

@media (max-width: 520px) {
  .gs-rail {
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    margin-left: calc(-1 * max(20px, env(safe-area-inset-left)));
    margin-right: calc(-1 * max(20px, env(safe-area-inset-right)));
  }
  .gs-phone .device { max-width: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-overlay-card,
  .gs-detail,
  .gs-bar-seg {
    transition: none;
  }
}

/* =====================================================================
   Research library
   ===================================================================== */

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

.research-hero {
  max-width: 930px;
  margin: 0 auto;
  padding: 72px clamp(20px, 5vw, 34px) 34px;
  text-align: center;
}

.research-hero h1 {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.research-hero .lead {
  max-width: 690px;
  margin-left: auto;
  margin-right: auto;
}

.research-narrow-hero {
  max-width: 820px;
}

.research-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 30px auto 0;
}

.research-hero-stats span,
.research-mini-stats span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 14px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.research-hero-stats b,
.research-mini-stats b {
  color: var(--accent-deep);
  font-size: 25px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0;
}

.research-mini-stats b {
  font-size: 15px;
}

.research-hero-stats small,
.research-mini-stats small {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.35;
}

.research-search-section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 26px clamp(20px, 5vw, 34px) 78px;
}

.research-search-panel {
  position: sticky;
  top: 72px;
  z-index: 12;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--shadow-md);
}

.research-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.research-search {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-3);
  color: var(--ink-faint);
}

.research-search svg {
  width: 19px;
  height: 19px;
}

.research-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  line-height: 1.3;
}

.research-search input::placeholder {
  color: var(--ink-faint);
}

.research-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.research-filter-row button,
.goal-chip-grid button {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--ink-soft);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s var(--ease);
}

.research-filter-row button:hover,
.goal-chip-grid button:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--ink);
}

.research-filter-row button:active,
.goal-chip-grid button:active {
  transform: translateY(1px);
}

.research-filter-row button.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.research-filter-row b {
  font-variant-numeric: tabular-nums;
}

.research-filter-label {
  margin-top: 14px;
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.research-result-line {
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}

.live-search-results {
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.live-search-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
}

.live-search-head b {
  color: var(--ink);
  font-size: 14px;
}

.live-search-head span,
.live-search-empty {
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.45;
}

.live-search-empty {
  margin: 0;
  padding: 14px;
}

.live-search-list {
  display: grid;
  max-height: min(58vh, 520px);
  overflow: auto;
}

.live-search-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  color: var(--ink);
  text-decoration: none;
  border-top: 1px solid var(--line-soft);
}

.live-search-item:first-child {
  border-top: 0;
}

.live-search-item:hover {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.live-search-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.live-search-copy b,
.live-search-copy small,
.live-search-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-search-copy b {
  font-size: 15px;
  line-height: 1.25;
  white-space: nowrap;
}

.live-search-copy small {
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.live-search-copy em {
  color: var(--ink-faint);
  font-size: 11.5px;
  font-style: normal;
  white-space: nowrap;
}

.live-search-action {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 800;
}

.research-intel-grid {
  display: grid;
  grid-template-columns: 1.25fr .9fr .95fr;
  gap: 16px;
  margin-top: 24px;
}

.research-intel-grid > section {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: var(--shadow-xs);
}

.research-intel-grid h2,
.research-directory-head h2 {
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0;
}

.goal-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.goal-chip-grid button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  text-align: left;
}

.goal-chip-grid button span {
  overflow-wrap: anywhere;
}

.goal-chip-grid button b {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  color: var(--accent-deep);
  font-size: 12px;
}

.research-mini-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.research-directory-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin: 46px 0 16px;
}

.research-directory-head .eyebrow {
  margin-bottom: 5px;
}

.research-directory-head p {
  max-width: 430px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  text-align: right;
}

.research-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(282px, 1fr));
  gap: 14px;
}

.research-card,
.interaction-card,
.profile-section,
.profile-side-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-xs);
}

.research-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px;
}

.research-card-top,
.interaction-card-top,
.profile-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.research-card h3,
.interaction-card h3,
.profile-interaction h3 {
  margin: 14px 0 8px;
  font-size: 18px;
  line-height: 1.28;
  letter-spacing: 0;
}

.research-card h3 a,
.interaction-card h3 a,
.profile-interaction h3 a {
  color: var(--ink);
  text-decoration: none;
}

.research-card h3 a:hover,
.interaction-card h3 a:hover,
.profile-interaction h3 a:hover {
  color: var(--accent-deep);
}

.research-card p,
.interaction-card p,
.profile-interaction p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.research-card-meta {
  margin-top: auto;
  padding-top: 8px;
  color: var(--ink-faint);
  font-size: 12.5px;
  line-height: 1.45;
}

.research-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.type-pill,
.evidence-pill,
.severity-pill,
.source-badge,
.research-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: var(--pill);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.type-pill {
  background: color-mix(in srgb, var(--info) 11%, var(--surface));
  color: var(--info);
}

.evidence-pill {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent-deep);
}

.source-badge-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-left: 8px;
  vertical-align: middle;
}

.source-badge {
  min-height: 22px;
  padding: 4px 7px;
  font-size: 10.5px;
}

.source-badge--source-linked {
  background: color-mix(in srgb, var(--synergy) 13%, var(--surface));
  color: var(--synergy-deep);
}

.source-badge--needs-review,
.source-badge--pmid-unconfirmed,
.source-badge--needs-source {
  background: color-mix(in srgb, var(--warn) 16%, var(--surface));
  color: color-mix(in srgb, var(--warn) 78%, var(--ink));
}

.source-badge--kind,
.source-badge--origin {
  background: color-mix(in srgb, var(--ink-faint) 11%, var(--surface));
  color: var(--ink-soft);
}

.evidence-strong {
  background: color-mix(in srgb, var(--synergy) 14%, var(--surface));
  color: var(--synergy-deep);
}

.evidence-moderate {
  background: color-mix(in srgb, var(--info) 13%, var(--surface));
  color: var(--info);
}

.evidence-emerging,
.evidence-traditional {
  background: color-mix(in srgb, var(--cat-purple) 14%, var(--surface));
  color: var(--cat-purple);
}

.evidence-insufficient,
.evidence-unrated {
  background: color-mix(in srgb, var(--ink-faint) 11%, var(--surface));
  color: var(--ink-soft);
}

.research-tag {
  background: var(--surface-2);
  color: var(--ink-soft);
}

.severity-info {
  background: color-mix(in srgb, var(--info) 12%, var(--surface));
  color: var(--info);
}

.severity-moderate {
  background: color-mix(in srgb, var(--warn) 15%, var(--surface));
  color: var(--warn);
}

.severity-serious {
  background: color-mix(in srgb, var(--cat-pink) 15%, var(--surface));
  color: var(--cat-pink);
}

.severity-dangerous {
  background: color-mix(in srgb, #CF3D36 16%, var(--surface));
  color: #B83530;
}

.research-empty {
  margin: 28px 0 0;
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  text-align: center;
}

.interaction-grid {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.interaction-card {
  padding: 18px;
  scroll-margin-top: 112px;
}

.interaction-card.is-anchor-target {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
    var(--shadow-md);
}

.interaction-card h3 {
  font-size: 19px;
}

.interaction-card h3 span {
  color: var(--ink-faint);
  font-weight: 700;
}

.interaction-card details {
  margin-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.interaction-card summary {
  cursor: pointer;
  padding: 13px 0 0;
  color: var(--accent-deep);
  font-size: 13.5px;
  font-weight: 800;
}

.interaction-detail {
  padding: 10px 0 2px;
}

.interaction-detail h4 {
  margin: 12px 0 4px;
  font-size: 13px;
  color: var(--ink);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 24px;
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 700;
}

.breadcrumbs a {
  color: var(--ink-soft);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--accent-deep);
}

.profile-hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 46px clamp(20px, 5vw, 34px) 18px;
}

.profile-hero-copy {
  max-width: 830px;
}

.profile-hero-copy .lead {
  max-width: 760px;
}

.profile-pill-row {
  margin-top: 22px;
}

.profile-layout {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px clamp(20px, 5vw, 34px) 82px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: start;
}

.profile-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.profile-section,
.profile-side-panel {
  padding: 22px;
}

.profile-section h2,
.profile-side-panel h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(22px, 2.2vw, 26px);
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 0;
}

.profile-section h3,
.profile-side-panel h3 {
  margin-top: 0;
  letter-spacing: 0;
}

.profile-section p:first-child,
.profile-side-panel p:first-child {
  margin-top: 0;
}

.profile-section p:last-child,
.profile-side-panel p:last-child {
  margin-bottom: 0;
}

.profile-aside {
  position: sticky;
  top: 86px;
  display: grid;
  gap: 14px;
}

.profile-facts {
  margin: 0;
}

.profile-facts div {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
}

.profile-facts div:first-child {
  border-top: 0;
}

.profile-facts dt {
  color: var(--ink-faint);
  font-weight: 700;
}

.profile-facts dd {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.profile-facts.compact {
  margin-bottom: 14px;
}

.profile-facts.compact div {
  grid-template-columns: 138px minmax(0, 1fr);
}

.source-review-notice {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.source-review-notice b {
  color: var(--ink);
}

.source-review-notice--needs-review,
.source-review-notice--needs-source {
  border-color: color-mix(in srgb, var(--warn) 28%, var(--line-soft));
  background: color-mix(in srgb, var(--warn) 8%, var(--surface));
}

.source-review-notice--source-linked {
  border-color: color-mix(in srgb, var(--synergy) 24%, var(--line-soft));
  background: color-mix(in srgb, var(--synergy) 7%, var(--surface));
}

.safety-grid,
.goal-dose-grid,
.profile-interaction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.safety-grid > div,
.goal-dose-grid > article,
.profile-interaction {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-2);
}

.goal-dose-grid h3 {
  margin-bottom: 8px;
}

.source-list {
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.source-list li {
  padding: 13px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-2);
}

.source-item--needs-review,
.source-item--pmid-unconfirmed,
.source-item--needs-source {
  border-color: color-mix(in srgb, var(--warn) 30%, var(--line-soft));
}

.source-list.compact {
  margin-top: 10px;
}

.source-list.compact li {
  padding: 10px 11px;
}

.source-list b,
.source-list small,
.source-list p {
  display: block;
}

.source-heading {
  display: block;
}

.source-heading b {
  display: inline;
}

.source-list small {
  margin-top: 4px;
  color: var(--ink-faint);
  font-size: 12px;
  line-height: 1.4;
}

.source-list p {
  margin: 7px 0 0;
  color: var(--ink-soft);
  font-size: 13.5px;
}

.source-list .source-review-note {
  color: color-mix(in srgb, var(--warn) 78%, var(--ink));
  font-weight: 700;
}

.profile-section-link {
  margin-top: 16px;
  font-weight: 700;
}

.related-link-grid {
  display: grid;
  gap: 8px;
}

.related-link-grid a {
  display: grid;
  gap: 2px;
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
}

.related-link-grid a:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.related-link-grid span {
  color: var(--ink-faint);
  font-size: 12px;
}

.profile-cta {
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--accent) 14%, var(--surface)),
      color-mix(in srgb, var(--cat-mint) 10%, var(--surface)) 72%);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}

.profile-cta h2 {
  font-size: 22px;
  letter-spacing: -.012em;
  margin: 4px 0 10px;
  line-height: 1.18;
}

.profile-cta-eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-deep);
  margin: 0;
}

.profile-cta-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 18px;
  display: grid;
  gap: 8px;
}

.profile-cta-list li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.45;
}

.profile-cta-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%,
      color-mix(in srgb, var(--accent) 80%, white) 0 38%,
      var(--accent) 40% 100%);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.profile-cta-btn {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.profile-cta-foot {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
}

/* ============ Profile evidence stack (atlas hero) ============ */
.evidence-stack {
  margin-top: 28px;
  max-width: 760px;
  padding: 16px 18px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-2) 70%, var(--surface)),
      var(--surface));
  display: grid;
  gap: 12px;
}

.evidence-stack-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.evidence-stack-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.evidence-stack-meta {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.evidence-stack-bar {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink-faint) 9%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.evidence-stack-seg {
  display: block;
  height: 100%;
  transition: width .4s ease;
}

.evidence-stack-seg + .evidence-stack-seg {
  border-left: 1px solid color-mix(in srgb, var(--surface) 60%, transparent);
}

.evidence-stack-seg--meta          { background: var(--synergy); }
.evidence-stack-seg--rct           { background: var(--accent); }
.evidence-stack-seg--review        { background: var(--cat-mint); }
.evidence-stack-seg--observational { background: var(--info); }
.evidence-stack-seg--mechanistic   { background: var(--cat-purple); }
.evidence-stack-seg--other         { background: color-mix(in srgb, var(--ink-faint) 60%, var(--surface)); }

.evidence-stack-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px 14px;
}

.evidence-stack-legend-item {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink-soft);
}

.evidence-stack-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.evidence-stack-tier {
  color: var(--ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evidence-stack-count {
  color: var(--ink-faint);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.evidence-stack-legend-item--meta          .evidence-stack-dot { background: var(--synergy); }
.evidence-stack-legend-item--rct           .evidence-stack-dot { background: var(--accent); }
.evidence-stack-legend-item--review        .evidence-stack-dot { background: var(--cat-mint); }
.evidence-stack-legend-item--observational .evidence-stack-dot { background: var(--info); }
.evidence-stack-legend-item--mechanistic   .evidence-stack-dot { background: var(--cat-purple); }
.evidence-stack-legend-item--other         .evidence-stack-dot { background: color-mix(in srgb, var(--ink-faint) 60%, var(--surface)); }

/* ============ Profile bottom-line summary ============ */
.profile-bottom-line {
  margin: 0 0 4px;
  padding: 18px 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line-soft));
  border-left-width: 3px;
  border-left-color: var(--accent);
  border-radius: 14px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 5%, var(--surface)),
      var(--surface));
}

.profile-bottom-line p {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -.003em;
}

/* ============ Pull quote (highlighted finding) ============ */
.profile-pullquote {
  position: relative;
  margin: 0;
  padding: 26px 26px 22px 60px;
  border: 1px solid color-mix(in srgb, var(--cat-purple) 22%, var(--line-soft));
  border-radius: 16px;
  background:
    linear-gradient(140deg,
      color-mix(in srgb, var(--cat-purple) 7%, var(--surface)),
      color-mix(in srgb, var(--accent) 4%, var(--surface)) 72%);
}

.profile-pullquote-mark {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 28px;
  height: 28px;
  color: color-mix(in srgb, var(--cat-purple) 75%, var(--accent));
  opacity: .85;
}

.profile-pullquote-quote {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--ink);
  font-style: normal;
}

.profile-pullquote-attr {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-faint);
  font-weight: 700;
  line-height: 1.4;
}

.profile-pullquote-attr a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-faint) 40%, transparent);
}

.profile-pullquote-attr a:hover {
  color: var(--accent-deep);
  border-bottom-color: var(--accent);
}

.profile-pullquote-attr span {
  color: var(--ink-faint);
  font-weight: 600;
}

/* ============ Section subtitle ============ */
.profile-section-sub {
  margin: -4px 0 14px;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 500;
}

/* ============ Sources grouped by tier ============ */
.profile-section--sources {
  display: grid;
  gap: 16px;
}

.source-group {
  display: grid;
  gap: 10px;
}

.source-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.source-group-head h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.005em;
  color: var(--ink);
}

.source-group-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}

.source-group-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}

.source-group--meta          .source-group-dot { background: var(--synergy); }
.source-group--rct           .source-group-dot { background: var(--accent); }
.source-group--review        .source-group-dot { background: var(--cat-mint); }
.source-group--observational .source-group-dot { background: var(--info); }
.source-group--mechanistic   .source-group-dot { background: var(--cat-purple); }
.source-group--other         .source-group-dot { background: color-mix(in srgb, var(--ink-faint) 60%, var(--surface)); }

/* ============ Profile TOC (sticky on desktop) ============ */
.profile-toc {
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: var(--surface);
}

.profile-toc-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.profile-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
  display: grid;
  gap: 2px;
}

.profile-toc li {
  counter-increment: toc;
}

.profile-toc a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.profile-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--ink-ghost);
  font-variant-numeric: tabular-nums;
}

.profile-toc a:hover {
  color: var(--ink);
  background: var(--surface-2);
}

.profile-toc a.is-active {
  color: var(--accent-deep);
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.profile-toc a.is-active::before {
  color: var(--accent);
}

/* Scroll target offset so anchored sections clear the sticky header */
.profile-section,
.source-group {
  scroll-margin-top: 96px;
}

@media (max-width: 940px) {
  .profile-toc {
    display: none;
  }
  .profile-pullquote {
    padding: 22px 20px 18px 54px;
  }
  .profile-pullquote-mark {
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
  }
  .profile-bottom-line {
    padding: 16px 18px;
  }
  .profile-bottom-line p {
    font-size: 15px;
  }
}

/* ============ Research hero (atlas variant) ============ */
.research-hero--atlas {
  padding-top: 60px;
  padding-bottom: 8px;
}

.research-hero--atlas h1 {
  font-size: clamp(36px, 5.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -.028em;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.research-hero--atlas .lead {
  font-size: clamp(16px, 1.7vw, 19px);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.research-hero--atlas .lead b {
  color: var(--ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.research-hero-stats--compact {
  margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.research-hero-stats--compact span {
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 50%, var(--surface));
}

.research-hero-stats--compact b {
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -.018em;
  color: var(--ink);
}

.research-hero-stats--compact small {
  font-size: 11px;
  letter-spacing: .04em;
}

/* ============ Hero search (research home centerpiece) ============ */
.hero-search {
  position: relative;
  margin: 30px auto 0;
  max-width: 640px;
  width: 100%;
  display: grid;
  gap: 12px;
}

.hero-search-input {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  height: 64px;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.hero-search-input:focus-within {
  border-color: var(--accent);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent),
    var(--shadow-md);
}

.hero-search-icon {
  width: 22px;
  height: 22px;
  color: var(--ink-faint);
  flex: none;
}

.hero-search-input input {
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 600;
  letter-spacing: -.006em;
  color: var(--ink);
  width: 100%;
  min-width: 0;
}

.hero-search-input input::placeholder {
  color: var(--ink-ghost);
  font-weight: 500;
}

.hero-search-input input::-webkit-search-cancel-button {
  appearance: none;
}

.hero-search-kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-faint);
  flex: none;
  line-height: 1;
}

.hero-search-results {
  position: absolute;
  top: calc(64px + 6px);
  left: 0;
  right: 0;
  max-height: 480px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  z-index: 30;
  display: grid;
  gap: 4px;
}

.hero-search-results[hidden] {
  display: none;
}

.hero-search-empty {
  padding: 18px 14px;
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
}

.hero-search-empty b {
  color: var(--ink);
}

.hero-search-result {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
}

.hero-search-result:hover,
.hero-search-result.is-active {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line-soft));
}

.hero-search-result-top {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.hero-search-result-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.014em;
  color: var(--ink);
  line-height: 1.2;
}

.hero-search-result-name mark {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: inherit;
  padding: 0 1px;
  border-radius: 3px;
}

.hero-search-result-summary {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.hero-search-result-meta {
  display: flex;
  gap: 12px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-faint);
  font-weight: 600;
  align-items: center;
}

.hero-search-result-meta span:not(.hero-search-result-arrow) {
  display: inline-flex;
  align-items: center;
}

.hero-search-result-meta span:not(.hero-search-result-arrow) + span:not(.hero-search-result-arrow)::before {
  content: "·";
  margin-right: 12px;
  color: var(--ink-ghost);
}

.hero-search-result-arrow {
  margin-left: auto;
  color: var(--accent-deep);
  font-weight: 800;
  font-size: 16px;
  transform: translateX(0);
  transition: transform .15s ease;
}

.hero-search-result:hover .hero-search-result-arrow,
.hero-search-result.is-active .hero-search-result-arrow {
  transform: translateX(4px);
}

.hero-search-tries {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
}

.hero-search-tries-label {
  color: var(--ink-faint);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
  margin-right: 4px;
}

.hero-search-tries button {
  appearance: none;
  cursor: pointer;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  font-family: inherit;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.hero-search-tries button:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

@media (max-width: 620px) {
  .hero-search-input {
    height: 56px;
    padding: 0 14px;
    gap: 10px;
  }
  .hero-search-kbd {
    display: none;
  }
  .hero-search-results {
    top: calc(56px + 6px);
    max-height: 70vh;
  }
}

/* ============ Library composition bar ============ */
.library-comp {
  max-width: var(--maxw);
  margin: 24px auto 0;
  padding: clamp(22px, 3.5vw, 32px) clamp(22px, 4vw, 36px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(80% 100% at 0% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%),
    var(--surface);
  display: grid;
  gap: 14px;
}

.library-comp-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
}

.library-comp-head .eyebrow {
  margin: 0 0 2px;
}

.library-comp-head h2 {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: 1.2;
  color: var(--ink);
  max-width: 720px;
}

.library-comp-meta {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.library-comp-bar {
  display: flex;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink-faint) 9%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.library-comp-seg {
  display: block;
  height: 100%;
  transition: filter .2s ease;
}

.library-comp-seg + .library-comp-seg {
  border-left: 1px solid color-mix(in srgb, var(--surface) 60%, transparent);
}

.library-comp-seg--meta          { background: var(--synergy); }
.library-comp-seg--rct           { background: var(--accent); }
.library-comp-seg--review        { background: var(--cat-mint); }
.library-comp-seg--observational { background: var(--info); }
.library-comp-seg--mechanistic   { background: var(--cat-purple); }
.library-comp-seg--other         { background: color-mix(in srgb, var(--ink-faint) 60%, var(--surface)); }

.library-comp-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 18px;
}

.library-comp-legend-item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-soft);
}

.library-comp-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.library-comp-tier-label {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-comp-tier-count {
  color: var(--ink-faint);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

.library-comp-legend-item--meta          .library-comp-dot { background: var(--synergy); }
.library-comp-legend-item--rct           .library-comp-dot { background: var(--accent); }
.library-comp-legend-item--review        .library-comp-dot { background: var(--cat-mint); }
.library-comp-legend-item--observational .library-comp-dot { background: var(--info); }
.library-comp-legend-item--mechanistic   .library-comp-dot { background: var(--cat-purple); }
.library-comp-legend-item--other         .library-comp-dot { background: color-mix(in srgb, var(--ink-faint) 60%, var(--surface)); }

/* ============ The Atlas mosaic ============ */
.atlas {
  max-width: var(--maxw);
  margin: 28px auto 0;
  padding: clamp(28px, 4vw, 44px) clamp(22px, 4vw, 36px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--cat-purple) 7%, transparent), transparent 60%),
    radial-gradient(80% 100% at 0% 100%, color-mix(in srgb, var(--synergy) 6%, transparent), transparent 65%),
    linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-2) 30%, var(--surface)));
  box-shadow: var(--shadow-md);
  display: grid;
  gap: 22px;
}

.atlas-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  flex-wrap: wrap;
}

.atlas-head .eyebrow {
  margin: 0 0 4px;
}

.atlas-head h2 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.15;
  color: var(--ink);
  max-width: 620px;
}

.atlas-blurb {
  margin: 0;
  max-width: 420px;
  text-align: right;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.atlas-grid {
  display: grid;
  gap: 16px;
}

.atlas-band {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 18px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.atlas-band:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.atlas-band-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 6px;
}

.atlas-band-name {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.008em;
  color: var(--ink);
}

.atlas-band-count {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.atlas-band-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.atlas-dot {
  display: inline-block;
  border-radius: 50%;
  transition: transform .15s ease, box-shadow .15s ease, outline-color .15s ease;
  outline: 0 solid transparent;
  flex: none;
  position: relative;
  text-decoration: none;
}

.atlas-dot--sm { width: 8px;  height: 8px;  }
.atlas-dot--md { width: 10px; height: 10px; }
.atlas-dot--lg { width: 13px; height: 13px; }
.atlas-dot--xl { width: 16px; height: 16px; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 22%, transparent); }

.atlas-dot:hover {
  transform: scale(1.45);
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
  z-index: 2;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ink) 30%, transparent);
}

.atlas-dot:focus-visible {
  transform: scale(1.45);
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  z-index: 2;
}

.atlas-dot--prescription { background: var(--accent); }
.atlas-dot--vitamin      { background: var(--warn); }
.atlas-dot--mineral      { background: var(--cat-mint); }
.atlas-dot--herb         { background: var(--synergy); }
.atlas-dot--amino        { background: var(--cat-purple); }
.atlas-dot--omega        { background: var(--info); }
.atlas-dot--adaptogen    { background: var(--cat-pink); }
.atlas-dot--antioxidant  { background: color-mix(in srgb, var(--warn) 70%, var(--cat-pink)); }
.atlas-dot--hormone      { background: color-mix(in srgb, var(--cat-purple) 70%, var(--cat-pink)); }
.atlas-dot--probiotic    { background: color-mix(in srgb, var(--cat-mint) 65%, var(--info)); }
.atlas-dot--enzyme       { background: color-mix(in srgb, var(--info) 60%, var(--cat-purple)); }
.atlas-dot--other        { background: color-mix(in srgb, var(--ink-faint) 55%, var(--ink-ghost)); }

@media (max-width: 940px) {
  .research-hero--atlas h1 {
    font-size: clamp(30px, 7vw, 42px);
  }
  .atlas-head {
    flex-direction: column;
    align-items: stretch;
  }
  .atlas-blurb {
    text-align: left;
    max-width: none;
  }
  .atlas-band {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .atlas-band-head {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding-top: 0;
  }
  .library-comp-head {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============ Featured editorial card (atlas hero lead-in) ============ */
.research-feature {
  max-width: var(--maxw);
  margin: 24px auto 0;
  padding: clamp(28px, 4vw, 40px) clamp(22px, 4vw, 44px);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 22px;
  background:
    radial-gradient(120% 80% at 8% 0%, color-mix(in srgb, var(--cat-purple) 9%, transparent), transparent 60%),
    radial-gradient(120% 100% at 100% 100%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 65%),
    linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-2) 50%, var(--surface)));
  box-shadow: var(--shadow-md);
  display: grid;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

.research-feature-eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.research-feature-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  animation: research-feature-pulse 2.6s ease-in-out infinite;
}

@keyframes research-feature-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 6%, transparent); }
}

.research-feature-quote {
  margin: 0;
  font-family: inherit;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--ink);
  max-width: 880px;
}

.research-feature-attr {
  margin: 0;
  font-size: 13px;
  color: var(--ink-faint);
  font-weight: 600;
  line-height: 1.45;
}

.research-feature-attr a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-faint) 40%, transparent);
}

.research-feature-attr a:hover {
  color: var(--accent-deep);
  border-bottom-color: var(--accent);
}

.research-feature-attr span {
  color: var(--ink-faint);
  font-weight: 600;
}

.research-feature-foot {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

.research-feature-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.research-feature-tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
  border: 1px solid var(--line-soft);
  color: var(--ink-soft);
}

.research-feature-tier b {
  font-weight: 900;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.research-feature-tier--meta          b { color: var(--synergy-deep); }
.research-feature-tier--rct           b { color: var(--accent-deep); }
.research-feature-tier--review        b { color: var(--synergy-deep); }
.research-feature-tier--observational b { color: var(--info); }
.research-feature-tier--mechanistic   b { color: var(--cat-purple); }

.research-feature-cta {
  flex: none;
}

/* ============ Lens rows (curated atlas) ============ */
.research-lenses {
  max-width: var(--maxw);
  margin: 12px auto 0;
  padding: 0 clamp(20px, 5vw, 34px);
  display: grid;
  gap: 36px;
  padding-top: 32px;
  padding-bottom: 12px;
}

.lens-row {
  display: grid;
  gap: 16px;
}

.lens-row-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  flex-wrap: wrap;
}

.lens-row-head .eyebrow {
  margin-bottom: 4px;
}

.lens-row-head h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: 1.2;
  color: var(--ink);
}

.lens-row-blurb {
  margin: 0;
  max-width: 440px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
  text-align: right;
}

.lens-row-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 12px;
}

.lens-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 16px 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  min-width: 0;
}

.lens-card:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.lens-card-top {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.lens-card h3 {
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.012em;
  line-height: 1.2;
  color: var(--ink);
}

.lens-card-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line-soft));
}

.lens-card-stat b {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.012em;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.lens-card-stat span {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-faint);
}

.lens-card-summary {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.lens-row--strong       .lens-card-stat { background: color-mix(in srgb, var(--synergy) 8%, var(--surface-2)); border-color: color-mix(in srgb, var(--synergy) 14%, var(--line-soft)); }
.lens-row--strong       .lens-card-stat b { color: var(--synergy-deep); }
.lens-row--emerging     .lens-card-stat { background: color-mix(in srgb, var(--cat-purple) 8%, var(--surface-2)); border-color: color-mix(in srgb, var(--cat-purple) 14%, var(--line-soft)); }
.lens-row--emerging     .lens-card-stat b { color: var(--cat-purple); }
.lens-row--interactions .lens-card-stat { background: color-mix(in srgb, var(--info) 8%, var(--surface-2)); border-color: color-mix(in srgb, var(--info) 14%, var(--line-soft)); }
.lens-row--interactions .lens-card-stat b { color: var(--info); }

/* ============ Interaction network preview ============ */
.research-network {
  display: block;
  max-width: var(--maxw);
  margin: 12px auto 0;
  padding: 22px clamp(20px, 4vw, 34px) 18px;
  background:
    radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--info) 9%, transparent), transparent 70%),
    radial-gradient(80% 100% at 100% 100%, color-mix(in srgb, var(--cat-mint) 9%, transparent), transparent 70%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.research-network:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: var(--shadow-sm);
}

.research-network-head {
  display: grid;
  gap: 4px;
  max-width: 760px;
  margin-bottom: 8px;
}

.research-network-head .eyebrow {
  margin: 0 0 2px;
}

.research-network-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.018em;
  color: var(--ink);
}

.research-network-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

.research-network-hubs {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-soft);
  font-weight: 600;
}

.research-network-hubs b {
  color: var(--ink);
  font-weight: 800;
}

.research-network-canvas {
  width: 100%;
  margin: 6px 0 8px;
}

.ix-network {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.ix-edge {
  stroke: color-mix(in srgb, var(--accent) 32%, var(--ink-ghost));
  stroke-width: 1.2;
  opacity: .55;
}

.ix-node {
  stroke-width: 1.6;
}

.ix-node--hub {
  fill: var(--accent);
  stroke: color-mix(in srgb, var(--accent) 50%, white);
  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent));
}

.ix-node--neighbor {
  fill: color-mix(in srgb, var(--cat-mint) 60%, var(--surface));
  stroke: color-mix(in srgb, var(--synergy) 65%, var(--line));
}

.ix-hub-label {
  fill: white;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -.005em;
}

.ix-label {
  fill: var(--ink-soft);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
}

.research-network-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--accent-deep);
}

.research-network:hover .research-network-cta {
  color: var(--accent-press);
}

/* ============ Goal tile grid (upgrade of chip row) ============ */
.goal-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.goal-tile {
  cursor: pointer;
  display: grid;
  gap: 6px;
  padding: 12px 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
  min-width: 0;
}

.goal-tile:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

.goal-tile-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.goal-tile-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goal-tile-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent-deep);
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.goal-tile-samples {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.goal-tile-sample {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  white-space: nowrap;
}

@media (max-width: 940px) {
  .lens-row-head { flex-direction: column; align-items: stretch; }
  .lens-row-blurb { text-align: left; max-width: none; }
  .research-feature-foot { flex-direction: column; align-items: stretch; }
  .research-feature-cta { width: 100%; justify-content: center; display: inline-flex; }
}

@media (max-width: 620px) {
  .research-feature { border-radius: 18px; }
  .lens-row-track { grid-template-columns: 1fr; }
  .goal-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ /research/compare ============ */
.compare-hero { padding-bottom: 12px; }

.compare-section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px clamp(20px, 5vw, 34px) 82px;
  display: grid;
  gap: 24px;
}

.compare-picker {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  position: sticky;
  top: 76px;
  z-index: 20;
}

.compare-picker-side {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.compare-picker-side label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.compare-picker-side input {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-2);
  width: 100%;
  font-family: inherit;
  letter-spacing: -.005em;
}

.compare-picker-side input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  background: var(--surface);
}

.compare-swap {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.compare-swap:hover {
  color: var(--accent-deep);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.compare-swap svg {
  width: 18px;
  height: 18px;
}

.compare-empty-head {
  margin-bottom: 14px;
}

.compare-empty-head .eyebrow {
  margin-bottom: 4px;
}

.compare-empty-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.018em;
  color: var(--ink);
}

.compare-suggestion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.compare-suggestion {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.compare-suggestion:hover {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.compare-suggestion .eyebrow {
  margin: 0 0 2px;
}

.compare-suggestion h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.014em;
  line-height: 1.25;
  color: var(--ink);
}

.compare-suggestion-vs {
  color: var(--ink-faint);
  font-weight: 700;
  margin: 0 4px;
}

.compare-suggestion p {
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.compare-suggestion-cta {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--accent-deep);
}

.compare-suggestion:hover .compare-suggestion-cta {
  color: var(--accent-press);
}

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.compare-pane {
  padding: 22px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--surface);
  display: grid;
  gap: 14px;
  min-width: 0;
}

.compare-pane-top {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.compare-pane-name {
  margin: 2px 0 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: 1.15;
  color: var(--ink);
}

.compare-pane-name a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.compare-pane-name a:hover {
  border-bottom-color: var(--accent);
  color: var(--accent-deep);
}

.compare-pane-bottom-line {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-2));
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 600;
}

.compare-pane-section {
  display: grid;
  gap: 6px;
  padding: 12px 0 0;
  border-top: 1px solid var(--line-soft);
}

.compare-pane-section h3 {
  margin: 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.compare-pane-section p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.compare-list {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}

.compare-list li {
  margin: 2px 0;
}

.compare-mix {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.compare-mix-item {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-soft);
}

.compare-mix-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.compare-mix-label {
  color: var(--ink);
  font-weight: 600;
}

.compare-mix-count {
  font-weight: 800;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.compare-mix-item--meta          .compare-mix-dot { background: var(--synergy); }
.compare-mix-item--rct           .compare-mix-dot { background: var(--accent); }
.compare-mix-item--review        .compare-mix-dot { background: var(--cat-mint); }
.compare-mix-item--observational .compare-mix-dot { background: var(--info); }
.compare-mix-item--mechanistic   .compare-mix-dot { background: var(--cat-purple); }
.compare-mix-item--other         .compare-mix-dot { background: color-mix(in srgb, var(--ink-faint) 60%, var(--surface)); }

.compare-pane-open {
  align-self: start;
  margin-top: 4px;
}

.compare-bridge {
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 18px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 5%, var(--surface)), var(--surface) 70%);
  display: grid;
  gap: 14px;
}

.compare-bridge-head { display: grid; gap: 4px; }
.compare-bridge-head .eyebrow { margin: 0 0 2px; }
.compare-bridge-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.018em;
  color: var(--ink);
}

.compare-bridge-vs {
  color: var(--accent);
  font-weight: 700;
  margin: 0 8px;
}

.compare-bridge-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.compare-bridge-interaction.interaction-card {
  margin: 0;
  background: var(--surface);
  border-color: var(--line-soft);
  padding: 18px;
}

.compare-bridge-interaction h3 {
  margin: 8px 0 6px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.005em;
  color: var(--ink);
}

.compare-bridge-interaction p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

.compare-bridge-props {
  margin: 0;
  display: grid;
  gap: 8px;
}

.compare-bridge-props > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 13.5px;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
}

.compare-bridge-props > div:first-child { border-top: 0; }

.compare-bridge-props dt {
  color: var(--ink-faint);
  font-weight: 800;
  letter-spacing: -.003em;
}

.compare-bridge-props dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 940px) {
  .compare-picker {
    grid-template-columns: 1fr;
    gap: 8px;
    position: static;
  }
  .compare-swap {
    width: 100%;
    height: 38px;
  }
  .compare-grid { grid-template-columns: 1fr; }
  .compare-bridge-props > div { grid-template-columns: 1fr; }
}

/* ============ Profile compare link ============ */
.profile-compare-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
  color: var(--accent-deep);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.35;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.profile-compare-link:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  color: var(--accent-press);
}

.profile-compare-link svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* ============ Interactions page severity stack ============ */
.severity-stack {
  max-width: 760px;
  margin: 22px auto 0;
  padding: 16px 18px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 70%, var(--surface)), var(--surface));
  display: grid;
  gap: 12px;
  text-align: left;
}

.severity-stack-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.severity-stack-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.severity-stack-meta {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.severity-stack-bar {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink-faint) 9%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--line-soft);
}

.severity-stack-seg {
  display: block;
  height: 100%;
}

.severity-stack-seg + .severity-stack-seg {
  border-left: 1px solid color-mix(in srgb, var(--surface) 60%, transparent);
}

.severity-stack-seg--dangerous { background: #CF3D36; }
.severity-stack-seg--serious   { background: var(--cat-pink); }
.severity-stack-seg--moderate  { background: var(--warn); }
.severity-stack-seg--info      { background: var(--info); }

.severity-stack-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 14px;
}

.severity-stack-legend-item {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink-soft);
}

.severity-stack-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.severity-stack-name {
  color: var(--ink);
  font-weight: 600;
}

.severity-stack-count {
  color: var(--ink-faint);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.severity-stack-legend-item--dangerous .severity-stack-dot { background: #CF3D36; }
.severity-stack-legend-item--serious   .severity-stack-dot { background: var(--cat-pink); }
.severity-stack-legend-item--moderate  .severity-stack-dot { background: var(--warn); }
.severity-stack-legend-item--info      .severity-stack-dot { background: var(--info); }

/* ============ Sticky bottom CTA bar (research pages) ============ */
.sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  padding: 14px max(env(safe-area-inset-left), 14px) calc(14px + env(safe-area-inset-bottom)) max(env(safe-area-inset-right), 14px);
  pointer-events: none;
  display: flex;
  justify-content: center;
  transform: translateY(140%);
  transition: transform .42s cubic-bezier(.2,.7,.2,1);
}

.sticky-cta.is-visible {
  transform: translateY(0);
}

.sticky-cta.is-dismissed {
  display: none;
}

.sticky-cta-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 720px;
  width: 100%;
  padding: 10px 12px 10px 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 96%, var(--accent));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  box-shadow:
    0 16px 40px -16px color-mix(in srgb, var(--ink) 38%, transparent),
    0 2px 6px color-mix(in srgb, var(--ink) 8%, transparent);
  backdrop-filter: saturate(1.1) blur(6px);
}

.sticky-cta-mark {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: white;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 14%, transparent);
}

.sticky-cta-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sticky-cta-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.3;
}

.sticky-cta-copy b {
  font-weight: 650;
  font-size: 14.5px;
  letter-spacing: -.005em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sticky-cta-copy small {
  font-size: 12.5px;
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sticky-cta-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: var(--accent-deep);
  color: white;
  font-weight: 650;
  font-size: 14px;
  letter-spacing: -.005em;
  border-radius: 12px;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}

.sticky-cta-btn:hover {
  background: color-mix(in srgb, var(--accent-deep) 88%, black);
  transform: translateY(-1px);
}

.sticky-cta-close {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  border-radius: 50%;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.sticky-cta-close:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}

.sticky-cta-close svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 640px) {
  .sticky-cta-inner {
    padding: 10px 10px 10px 12px;
    gap: 10px;
    border-radius: 16px;
  }
  .sticky-cta-mark { width: 30px; height: 30px; }
  .sticky-cta-copy small { display: none; }
  .sticky-cta-btn { padding: 9px 13px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* Make room at the bottom of every research page so the bar never covers content. */
body:has(.sticky-cta) .site-footer { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }

@media (max-width: 940px) {
  .research-hero-stats,
  .research-intel-grid,
  .profile-layout {
    grid-template-columns: 1fr;
  }

  .profile-aside,
  .research-search-panel {
    position: static;
  }

  .research-directory-head {
    display: block;
  }

  .research-directory-head p {
    max-width: none;
    margin-top: 8px;
    text-align: left;
  }
}

@media (max-width: 620px) {
  .research-hero {
    padding-top: 46px;
  }

  .research-hero-stats,
  .research-mini-stats,
  .research-search-row,
  .profile-facts div,
  .profile-facts.compact div {
    grid-template-columns: 1fr;
  }

  .research-search-panel {
    padding: 12px;
  }

  .research-search-row .btn {
    width: 100%;
  }

  .live-search-head,
  .live-search-item {
    display: grid;
    grid-template-columns: 1fr;
  }

  .live-search-head {
    align-items: start;
  }

  .live-search-action {
    justify-self: start;
  }

  .research-card-grid {
    grid-template-columns: 1fr;
  }

  .profile-section,
  .profile-side-panel {
    padding: 18px;
  }
}

/* =====================================================================
   TOOLKIT BENTO  —  every-feature showcase, live
   ===================================================================== */

.bento.scene.acc-toolkit {
  --sa: #2C7A8C;
  --sa-deep: #1F6473;
  --sa-soft: #7DBFCB;
  --sa-tint: color-mix(in srgb, #2C7A8C 8%, var(--surface));
  --sa-tint-2: color-mix(in srgb, #2C7A8C 14%, var(--surface));
  --sa-line: color-mix(in srgb, #2C7A8C 22%, var(--line));
  display: block;
  padding: clamp(22px, 2.8vw, 36px) clamp(20px, 5vw, 34px);
}

.bn-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 16px;
}
.bn-head .kicker { margin-bottom: 8px; font-size: 11.5px; }
.bn-head h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 850;
  line-height: 1.06;
  letter-spacing: -.03em;
  margin: 0 0 6px;
}
.bn-head h2 em {
  font-style: normal;
  color: var(--sa);
}
.bn-sub {
  color: var(--ink-soft);
  font-size: clamp(13px, 1.1vw, 14.5px);
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.4;
}

/* ---- Grid: 4-col × 3-row, single-viewport ---- */
.bn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 196px 150px 150px;
  gap: 10px;
  max-width: var(--maxw);
  margin: 0 auto;
}

.bn-scanner  { grid-column: span 2; grid-row: 1; }
.bn-int      { grid-column: span 2; grid-row: 1; }
.bn-price    { grid-column: span 1; grid-row: 2; }
.bn-ring     { grid-column: span 1; grid-row: 2; }
.bn-score    { grid-column: span 1; grid-row: 2; }
.bn-brand    { grid-column: span 1; grid-row: 2; }
.bn-wellness { grid-column: span 1; grid-row: 3; }
.bn-bio      { grid-column: span 1; grid-row: 3; }
.bn-depl     { grid-column: span 1; grid-row: 3; }
.bn-reorder  { grid-column: span 1; grid-row: 3; }

/* ---- Tile chrome ---- */
.bn-tile {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s ease;
  min-height: 0;
}
.bn-tile::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 70%;
  background: radial-gradient(60% 60% at 50% 100%,
    color-mix(in srgb, var(--sa) 14%, transparent) 0%,
    transparent 70%);
  z-index: -1;
  opacity: .7;
  pointer-events: none;
}
.bn-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--sa-line);
}

.bn-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sa);
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sa) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--sa) 22%, var(--line));
}
.bn-eyebrow svg { width: 12px; height: 12px; }
.bn-eyebrow-pill {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-faint);
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}

.bn-visual {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bn-foot { margin-top: 0; }
.bn-foot h3 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--ink);
  line-height: 1.2;
}
.bn-foot p { display: none; }
.bn-scanner .bn-foot h3,
.bn-int .bn-foot h3 {
  font-size: 14.5px;
}

/* ===================================================================== */
/* 1. SCANNER                                                            */
/* ===================================================================== */
.bn-scanner-vis {
  min-height: 0;
  height: 100%;
  padding: 2px 0 0;
}
.bns-phone {
  position: relative;
  width: min(78%, 260px);
  aspect-ratio: 18 / 10;
  border-radius: 28px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sa) 6%, var(--surface-2)) 0%,
    var(--surface-2) 100%);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 16px 40px -22px rgba(74,54,38,.32);
  overflow: hidden;
  display: grid;
  grid-template-rows: 14px 1fr auto;
  padding: 0;
}
.bns-notch {
  width: 64px;
  height: 4px;
  border-radius: 99px;
  background: var(--ink-ghost);
  opacity: .45;
  justify-self: center;
  align-self: end;
  margin-bottom: -2px;
}
.bns-cam {
  position: relative;
  margin: 4px 10px 0;
  border-radius: 11px;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(0,0,0,.06), transparent 60%),
    linear-gradient(180deg, #1A1916 0%, #2A2722 100%);
  overflow: hidden;
  min-height: 70px;
  display: grid;
  place-items: center;
}
.bns-corners { position: absolute; inset: 8px; pointer-events: none; }
.bns-c {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--sa-soft);
  border-radius: 3px;
}
.bns-c-tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.bns-c-tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.bns-c-bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.bns-c-br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
/* Scanner: one-shot. Plays through once on reveal and settles with the
   result card visible. Previously looped every 8s, which kept the laser,
   flash, and result repainting constantly. */
.bns-barcode {
  width: 64%;
  color: rgba(255,255,255,.92);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
  transform-origin: center;
  animation: bns-bcode 2.4s var(--ease) 1.2s forwards;
}
@keyframes bns-bcode {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.985); }
}
.bns-laser {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 10%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--sa-soft) 14%,
    #fff 50%,
    var(--sa-soft) 86%,
    transparent 100%);
  box-shadow:
    0 0 12px rgba(232,162,107,.85),
    0 0 24px rgba(232,162,107,.5);
  border-radius: 99px;
  opacity: 0;
  animation: bns-laser 1.6s var(--ease) .2s forwards;
}
@keyframes bns-laser {
  0%   { transform: translateY(0);    opacity: 0; }
  15%  { opacity: 1; }
  85%  { transform: translateY(55px); opacity: .85; }
  100% { transform: translateY(55px); opacity: 0; }
}
.bns-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 50% 55%, rgba(255,255,255,.55), transparent 70%);
  opacity: 0;
  animation: bns-flash .55s var(--ease) 1.7s forwards;
}
@keyframes bns-flash {
  0%   { opacity: 0; }
  40%  { opacity: .55; }
  100% { opacity: 0; }
}
.bns-result {
  margin: 4px 8px 8px;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px -10px rgba(74,54,38,.3);
  transform: translateY(120%);
  opacity: 0;
  animation: bns-result .7s var(--ease) 2.1s forwards;
}
@keyframes bns-result {
  0%   { transform: translateY(120%); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
.bns-result-logo {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: linear-gradient(135deg, #1B4E66, #2C7A8C);
  color: #fff;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: -.02em;
}
.bns-result-body { min-width: 0; }
.bns-result-brand {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}
.bns-result-product {
  font-size: 9.5px;
  color: var(--ink-faint);
  font-weight: 600;
  line-height: 1.15;
}
.bns-grade {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -.01em;
  padding: 2px 7px;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(135deg, #3FA76A, #2E8854);
  box-shadow: 0 4px 10px -4px rgba(63,167,106,.55);
}

/* ===================================================================== */
/* 2. INTERACTIONS                                                       */
/* ===================================================================== */
.bn-int-vis {
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  padding: 0;
  height: 100%;
}
.bn-int-svg {
  width: 100%;
  max-width: 220px;
  max-height: 116px;
  height: auto;
  font-family: inherit;
}
.bn-int-svg text {
  font-size: 13px;
  font-weight: 800;
  fill: #fff;
  text-anchor: middle;
  letter-spacing: -.01em;
  pointer-events: none;
}
.bn-node circle {
  fill: var(--accent);
  stroke: color-mix(in srgb, var(--accent) 60%, #fff);
  stroke-width: 2;
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  animation: bn-node-in .6s var(--ease) forwards;
}
.bn-node:nth-child(1) circle { animation-delay: .05s; }
.bn-node:nth-child(2) circle { animation-delay: .2s; }
.bn-node:nth-child(3) circle { animation-delay: .3s; }
.bn-node:nth-child(4) circle { animation-delay: .4s; }
.bn-node:nth-child(5) circle { animation-delay: .5s; }
.bn-node:nth-child(6) circle { animation-delay: .6s; }
.bn-node:nth-child(7) circle { animation-delay: .7s; }
.bn-node-center circle {
  fill: var(--sa);
  stroke: var(--sa-soft);
  stroke-width: 2.5;
}
.bn-node-warn circle {
  fill: #C84A4A;
  stroke: #EE8585;
}
.bn-int-nodes text { opacity: 0; animation: bn-node-in .6s var(--ease) forwards; }
.bn-int-nodes g:nth-child(1) text { animation-delay: .15s; }
.bn-int-nodes g:nth-child(2) text { animation-delay: .3s; }
.bn-int-nodes g:nth-child(3) text { animation-delay: .4s; }
.bn-int-nodes g:nth-child(4) text { animation-delay: .5s; }
.bn-int-nodes g:nth-child(5) text { animation-delay: .6s; }
.bn-int-nodes g:nth-child(6) text { animation-delay: .7s; }
.bn-int-nodes g:nth-child(7) text { animation-delay: .8s; }

@keyframes bn-node-in {
  0%   { opacity: 0; transform: scale(.4); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* Interactions edges: one-shot draw-in. Previously each of the 7 edges
   looped its dash/opacity every 8s, so the SVG paint was running every
   frame indefinitely. Now they draw in once and stay. */
.bn-edge {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  opacity: 0;
  animation: bn-edge-draw 1.4s var(--ease) forwards;
}
.bn-edge-green  { stroke: #3FA76A; }
.bn-edge-amber  { stroke: #D9A52F; }
.bn-edge-red    { stroke: #C84A4A; }
.bn-edge[data-edge-i="1"] { animation-delay: .9s; }
.bn-edge[data-edge-i="2"] { animation-delay: 1.05s; }
.bn-edge[data-edge-i="7"] { animation-delay: 1.2s; }
.bn-edge[data-edge-i="3"] { animation-delay: 1.4s; }
.bn-edge[data-edge-i="4"] { animation-delay: 1.55s; }
.bn-edge[data-edge-i="5"] { animation-delay: 1.75s; }
.bn-edge[data-edge-i="6"] { animation-delay: 1.9s; }
@keyframes bn-edge-draw {
  0%   { stroke-dashoffset: 220; opacity: 0; }
  20%  { opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 1; }
}

.bn-int-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-soft);
}
.bn-leg { display: inline-flex; align-items: center; gap: 4px; }
.bn-leg i {
  width: 6px; height: 6px; border-radius: 99px; display: inline-block;
}
.bn-leg-green i { background: #3FA76A; }
.bn-leg-amber i { background: #D9A52F; }
.bn-leg-red   i { background: #C84A4A; }

/* ===================================================================== */
/* 3. PRICE                                                              */
/* ===================================================================== */
.bn-price-vis {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  padding: 0;
  min-height: 0;
}
.bn-price-figure {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.bn-price-curr {
  font-size: 14px;
  font-weight: 800;
  color: var(--sa);
  line-height: 1;
}
.bn-price-num {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bn-price-tag {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-faint);
  letter-spacing: -.005em;
  margin-left: 4px;
}
.bn-price-tags { display: none; }
.bn-spark {
  width: 100%;
  height: 44px;
  display: block;
  overflow: visible;
}
.bn-spark-line {
  fill: none;
  stroke: var(--sa);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: bn-spark-draw 2.4s var(--ease) forwards;
}
.bn-spark-area { opacity: 0; animation: bn-spark-fade 1.4s var(--ease) 1.8s forwards; }
.bn-spark-dot {
  fill: var(--sa);
  stroke: var(--surface);
  stroke-width: 2.5;
  opacity: 0;
  transform-origin: 246px 22px;
  animation: bn-spark-dot-in .5s var(--ease) 2.4s forwards;
}
@keyframes bn-spark-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes bn-spark-fade {
  to { opacity: 1; }
}
@keyframes bn-spark-dot-in {
  0%   { opacity: 0; transform: scale(.3); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes bn-spark-dot-pulse {
  0%, 100% { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(44,122,140,.5)); }
  50%      { transform: scale(1.25); filter: drop-shadow(0 0 6px rgba(44,122,140,.9)); }
}
.bn-price-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bn-pricepill {
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bn-pricepill-good {
  background: color-mix(in srgb, #3FA76A 12%, var(--surface));
  border-color: color-mix(in srgb, #3FA76A 25%, var(--line));
  color: #2E8854;
}
.bn-pricepill-good i {
  width: 7px; height: 7px; border-radius: 99px;
  background: #3FA76A;
  box-shadow: 0 0 0 0 rgba(63,167,106,.55);
  animation: bn-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes bn-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63,167,106,.55); }
  60%      { box-shadow: 0 0 0 8px rgba(63,167,106,0); }
}

/* ===================================================================== */
/* 4. DAILY RING                                                         */
/* ===================================================================== */
.bn-ring-vis {
  flex-direction: column;
  gap: 0;
  padding: 0;
  min-height: 0;
  justify-content: center;
}
.bn-ring-svg {
  width: auto;
  height: 100px;
}
.bn-ring-legend { display: none; }
.bn-ring-track {
  fill: none;
  stroke: var(--surface-2);
  stroke-width: 14;
}
.bn-ring-fill {
  fill: none;
  stroke: var(--sa);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 540.4;             /* 2 * PI * 86 */
  stroke-dashoffset: 540.4;
  transform: rotate(-90deg);
  transform-origin: 110px 110px;
  animation: bn-ring-fill 3.4s var(--ease) forwards;
}
@keyframes bn-ring-fill {
  to { stroke-dashoffset: 309; }       /* ~43% closed (3 of 7) */
}
.bn-ring-node {
  fill: var(--surface);
  stroke: var(--sa);
  stroke-width: 2.5;
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: bn-node-in .55s var(--ease) forwards;
}
.bn-ring-n1 { animation-delay: .4s; fill: #3FA76A; stroke: #3FA76A; }
.bn-ring-n2 { animation-delay: 1.0s; fill: #D9A52F; stroke: #D9A52F; }
.bn-ring-n3 { animation-delay: 1.6s; fill: #7B68C9; stroke: #7B68C9; }
.bn-ring-n4 { animation-delay: 2.2s; }
.bn-ring-time {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -.025em;
  fill: var(--ink);
  opacity: 0;
  animation: bn-fade-in .5s var(--ease) 2.6s forwards;
}
.bn-ring-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  fill: var(--ink-faint);
  opacity: 0;
  animation: bn-fade-in .5s var(--ease) 2.8s forwards;
}
.bn-ring-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
}
.bn-ring-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bn-ring-legend i {
  width: 7px; height: 7px; border-radius: 99px; display: inline-block;
}
@keyframes bn-fade-in { to { opacity: 1; } }

/* ===================================================================== */
/* 5. STACK SCORE GAUGE                                                  */
/* ===================================================================== */
.bn-score-vis {
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  min-height: 0;
}
.bn-score-wrap {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
}
.bn-score-gauge {
  width: auto;
  height: 70px;
  display: block;
}
.bn-score-bars { display: none; }
.bn-gauge-track { stroke: var(--surface-2); }
.bn-gauge-fill {
  stroke: var(--sa);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: bn-gauge-fill 2.4s var(--ease) forwards;
}
@keyframes bn-gauge-fill {
  to { stroke-dashoffset: 18; }        /* 82% filled */
}
.bn-score-num {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bn-score-bars {
  display: grid;
  gap: 7px;
  width: 100%;
}
.bn-score-bar {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--ink-soft);
}
.bn-bar-track {
  display: block;
  height: 6px;
  background: var(--surface-2);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.bn-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--sa), var(--sa-soft));
  border-radius: 99px;
  transition: width 1.4s var(--ease);
}
.bn-tile.in-view .bn-bar-fill { width: var(--bw, 50%); }
.bn-score-bar:nth-child(1) .bn-bar-fill { transition-delay: .4s; }
.bn-score-bar:nth-child(2) .bn-bar-fill { transition-delay: .55s; }
.bn-score-bar:nth-child(3) .bn-bar-fill { transition-delay: .7s; }
.bn-score-bar:nth-child(4) .bn-bar-fill { transition-delay: .85s; }

/* ===================================================================== */
/* 6. BRAND QUALITY                                                      */
/* ===================================================================== */
.bn-brand-vis {
  flex-direction: column;
  gap: 6px;
  padding: 0;
  justify-content: center;
  min-height: 0;
}
.bn-brand-stack {
  position: relative;
  width: 100%;
  height: 80px;
  perspective: 800px;
}
.bn-brand-chips { display: none; }
.bn-brand-c3 { display: none; }
.bn-brand-card {
  position: absolute;
  left: 0; right: 0;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}
.bn-brand-c1 { top: 0;   z-index: 3; transform: translateY(0)    rotate(-1.5deg); animation: bn-brand-1 .9s var(--ease) .3s both; }
.bn-brand-c2 { top: 26px; z-index: 2; transform: translateY(10px) rotate(.8deg);   animation: bn-brand-2 .9s var(--ease) .5s both; }
.bn-brand-c3 { top: 52px; z-index: 1; transform: translateY(20px) rotate(-.4deg);  animation: bn-brand-3 .9s var(--ease) .7s both; }
@keyframes bn-brand-1 { 0% { opacity: 0; transform: translateY(-16px) rotate(0); } 100% { opacity: 1; transform: translateY(0) rotate(-1.5deg); } }
@keyframes bn-brand-2 { 0% { opacity: 0; transform: translateY(-16px) rotate(0); } 100% { opacity: 1; transform: translateY(10px) rotate(.8deg); } }
@keyframes bn-brand-3 { 0% { opacity: 0; transform: translateY(-16px) rotate(0); } 100% { opacity: 1; transform: translateY(20px) rotate(-.4deg); } }

.bn-brand-mono {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: linear-gradient(135deg, #1B4E66, #2C7A8C);
  color: #fff;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: -.01em;
}
.bn-brand-name {
  font-size: 11px;
  color: var(--ink);
  letter-spacing: -.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}
.bn-brand-grade {
  font-size: 11px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 6px;
  color: #fff;
  letter-spacing: -.01em;
}
.bn-bg-a { background: linear-gradient(135deg, #3FA76A, #2E8854); box-shadow: 0 4px 10px -4px rgba(63,167,106,.55); }
.bn-bg-b { background: linear-gradient(135deg, #D9A52F, #B08522); }
.bn-bg-f { background: linear-gradient(135deg, #C84A4A, #9A3838); }

.bn-brand-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.bn-chip {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--sa-tint);
  border: 1px solid color-mix(in srgb, var(--sa) 22%, var(--line-soft));
  color: var(--sa);
}

/* ===================================================================== */
/* 7. WELLNESS                                                           */
/* ===================================================================== */
.bn-well-vis {
  flex-direction: column;
  gap: 4px;
  padding: 0;
  justify-content: center;
  min-height: 0;
}
.bn-well-faces {
  position: relative;
  width: 100%;
  height: 36px;
  display: grid;
  place-items: center;
}
.bn-well-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.6);
}
.bn-well-face svg { width: 32px; height: 32px; filter: drop-shadow(0 4px 10px rgba(74,54,38,.18)); }
.bn-well-meta { display: none; }
/* Wellness face: one-shot. Each face used to cycle in/out on a 6s infinite
   loop; now the trend lands on the positive face and stays. */
.bn-well-f1, .bn-well-f2 { display: none; }
.bn-well-f3 {
  opacity: 0;
  transform: scale(.6);
  animation: bn-face 1.6s var(--ease) .4s forwards;
}
@keyframes bn-face {
  0%   { opacity: 0; transform: scale(.6); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
.bn-well-trend {
  width: 100%;
  height: 44px;
  overflow: visible;
}
.bn-well-line {
  fill: none;
  stroke: var(--sa);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: bn-spark-draw 2.6s var(--ease) .6s forwards;
}
.bn-well-dots circle {
  fill: var(--sa);
  opacity: 0;
  animation: bn-fade-in .4s var(--ease) forwards;
}
.bn-well-dots circle:nth-child(1) { animation-delay: 1.4s; }
.bn-well-dots circle:nth-child(2) { animation-delay: 2.0s; }
.bn-well-dot-tip {
  animation: bn-fade-in .4s var(--ease) 2.6s forwards;
}
.bn-well-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.bn-well-meta b {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ===================================================================== */
/* 8. LAB BIOMARKERS                                                     */
/* ===================================================================== */
.bn-bio-vis {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  padding: 0;
  min-height: 0;
}
.bn-bio-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11.5px;
}
.bn-bio-label b { font-weight: 800; color: var(--ink); letter-spacing: -.012em; }
.bn-bio-unit { font-size: 9.5px; color: var(--ink-faint); }
.bn-bio-bar {
  position: relative;
  height: 10px;
  border-radius: 99px;
  display: flex;
  overflow: visible;
  background: var(--surface-2);
}
.bn-bio-row { display: none; }
.bn-bio-band {
  flex: 1;
  height: 100%;
  position: relative;
}
.bn-bio-band-low { background: color-mix(in srgb, #C84A4A 35%, transparent); border-radius: 99px 0 0 99px; }
.bn-bio-band-ok  { background: color-mix(in srgb, #3FA76A 45%, transparent); }
.bn-bio-band-hi  { background: color-mix(in srgb, #D9A52F 35%, transparent); border-radius: 0 99px 99px 0; }
.bn-bio-dot {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  border-radius: 99px;
  background: #fff;
  border: 2.5px solid var(--sa);
  transform: translate(-50%, -50%);
  left: 18%;                           /* starting (low) */
  box-shadow: 0 4px 10px -4px rgba(74,54,38,.4);
  transition: left 2s var(--ease);
}
.bn-tile.in-view .bn-bio-dot {
  left: 48%;                           /* lands in optimal */
  animation: bn-spark-dot-pulse 2.2s ease-in-out 2.2s infinite;
}
.bn-bio-axis {
  position: absolute;
  inset: auto 0 -14px 0;
  height: 10px;
}
.bn-bio-axis i {
  position: absolute;
  transform: translateX(-50%);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.bn-bio-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -.005em;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  color: var(--ink-faint);
}
.bn-bio-pill-now {
  background: color-mix(in srgb, #3FA76A 14%, var(--surface));
  border-color: color-mix(in srgb, #3FA76A 28%, var(--line));
  color: #2E8854;
}
.bn-bio-pill-target {
  background: var(--sa-tint);
  border-color: color-mix(in srgb, var(--sa) 22%, var(--line));
  color: var(--sa);
}

/* ===================================================================== */
/* 9. NUTRIENT DEPLETIONS                                                */
/* ===================================================================== */
.bn-depl-vis {
  flex-direction: column;
  gap: 0;
  padding: 0;
  justify-content: center;
  min-height: 0;
}
.bn-depl-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
}
.bn-depl-rx {
  display: grid;
  gap: 0;
  padding: 5px 9px;
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, #C84A4A 18%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, #C84A4A 22%, var(--line));
}
.bn-depl-rx-name {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -.012em;
  color: #C84A4A;
  line-height: 1.15;
}
.bn-depl-rx-sub {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.1;
}
.bn-depl-arrows {
  display: grid;
  gap: 3px;
}
.bn-depl-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px 2px 17px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateX(-10px);
  align-self: start;
  width: max-content;
  max-width: 100%;
}
.bn-depl-fix { display: none; }
.bn-depl-arrow b { color: var(--ink); }
.bn-depl-arrow::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 7px;
  height: 1.6px;
  background: #C84A4A;
  transform: translateY(-50%);
  border-radius: 99px;
  box-shadow: 0 0 0 0 rgba(200,74,74,.5);
}
.bn-depl-arrow::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 0; height: 0;
  border-left: 4px solid #C84A4A;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform: translateY(-50%);
}
.bn-depl-a1 { animation: bn-depl-fire .6s var(--ease) .4s forwards; }
.bn-depl-a2 { animation: bn-depl-fire .6s var(--ease) .65s forwards; }
.bn-depl-a3 { animation: bn-depl-fire .6s var(--ease) .9s forwards; }
@keyframes bn-depl-fire {
  to { opacity: 1; transform: translateX(0); }
}

.bn-depl-fix {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(8px);
  animation: bn-depl-fix .6s var(--ease) 1.4s forwards;
}
@keyframes bn-depl-fix {
  to { opacity: 1; transform: translateY(0); }
}
.bn-depl-fix-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, #3FA76A 12%, var(--surface));
  border: 1px solid color-mix(in srgb, #3FA76A 26%, var(--line));
  color: #2E8854;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -.005em;
}
.bn-depl-fix-pill svg { width: 12px; height: 12px; color: #3FA76A; }

/* ===================================================================== */
/* 10. REORDER ALERTS                                                    */
/* ===================================================================== */
.bn-reorder-vis {
  padding: 0;
  min-height: 0;
}
.bn-reorder-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 90px;
}
.bn-jar {
  position: absolute;
  left: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 70px;
  border-radius: 8px 8px 11px 11px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--sa) 18%, var(--surface)) 0%,
      var(--surface-2) 100%);
  border: 1.2px solid var(--line);
  display: grid;
  grid-template-rows: 8px 1fr 11px;
  overflow: hidden;
}
.bn-jar-lid {
  background: var(--ink-soft);
  border-radius: 3px 3px 0 0;
  margin: 0 5px;
}
.bn-jar-pills {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  justify-content: center;
  gap: 2px;
  padding: 3px 4px 5px;
}
.bn-jar-pills i {
  display: block;
  width: 8px;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--sa-soft), var(--sa));
  opacity: 1;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.bn-tile.in-view .bn-jar-pills i:nth-child(1) { opacity: 0; transform: translateY(-12px); transition-delay: .4s; }
.bn-tile.in-view .bn-jar-pills i:nth-child(2) { opacity: 0; transform: translateY(-12px); transition-delay: .55s; }
.bn-tile.in-view .bn-jar-pills i:nth-child(3) { opacity: 0; transform: translateY(-12px); transition-delay: .7s; }
.bn-tile.in-view .bn-jar-pills i:nth-child(4) { opacity: 0; transform: translateY(-12px); transition-delay: .85s; }
.bn-tile.in-view .bn-jar-pills i:nth-child(5) { opacity: 0; transform: translateY(-12px); transition-delay: 1s; }
.bn-jar-label { display: none; }
.bn-notif {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translate(14px, -50%);
  width: 62%;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 9px;
  background: linear-gradient(180deg, #1E2326, #15191B);
  color: #fff;
  box-shadow:
    0 6px 14px -6px rgba(0,0,0,.5),
    0 18px 30px -16px rgba(0,0,0,.45);
  opacity: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bn-tile.in-view .bn-notif {
  animation: bn-notif-in .65s var(--ease) 1.1s forwards;
}
@keyframes bn-notif-in {
  0%   { opacity: 0; transform: translate(14px, -50%) scale(.96); }
  100% { opacity: 1; transform: translate(0,   -50%) scale(1); }
}
.bn-notif-icon {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--sa-soft), var(--sa));
  color: #fff;
}
.bn-notif-icon svg { width: 11px; height: 11px; }
.bn-notif-body { min-width: 0; }
.bn-notif-top {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: rgba(255,255,255,.7);
  margin-bottom: 1px;
  line-height: 1.1;
}
.bn-notif-top b { color: #fff; font-weight: 800; }
.bn-notif-msg {
  font-size: 9.5px;
  line-height: 1.25;
  color: rgba(255,255,255,.92);
}
.bn-notif-msg b { color: var(--sa-soft); font-weight: 800; }

/* ===================================================================== */
/* 3b. COST TRACKER — monthly spend bar chart (replaces price-spark)     */
/* ===================================================================== */
.bn-cost-bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 5px;
  width: 100%;
  height: 50px;
  margin-top: 4px;
}
.bn-cost-bar {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 3px;
  align-items: end;
  height: 100%;
}
.bn-cost-bar i {
  display: block;
  height: 0;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--sa-soft), var(--sa));
  opacity: .65;
  transition: height 1.1s var(--ease);
  align-self: end;
}
.bn-tile.in-view .bn-cost-bar i { height: var(--h, 50%); }
.bn-cost-bar:nth-child(1) i { transition-delay: .15s; }
.bn-cost-bar:nth-child(2) i { transition-delay: .25s; }
.bn-cost-bar:nth-child(3) i { transition-delay: .35s; }
.bn-cost-bar:nth-child(4) i { transition-delay: .45s; }
.bn-cost-bar:nth-child(5) i { transition-delay: .55s; }
.bn-cost-bar:nth-child(6) i { transition-delay: .65s; }
.bn-cost-bar-current i {
  opacity: 1;
  background: linear-gradient(180deg, var(--sa), var(--sa-deep));
}
.bn-cost-bar label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1;
}
.bn-cost-bar-current label { color: var(--sa); }

/* ===================================================================== */
/* 8b. FOOD EQUIVALENTS — capsule = food                                 */
/* ===================================================================== */
.bn-food-vis {
  padding: 0;
  min-height: 0;
  justify-content: center;
}
.bn-food-trio {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 240px;
}
.bn-food-cap,
.bn-food-portion {
  display: grid;
  grid-template-rows: 28px auto auto;
  justify-items: center;
  gap: 1px;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
}
.bn-tile.in-view .bn-food-cap     { animation: bn-food-in .55s var(--ease) .15s forwards; }
.bn-tile.in-view .bn-food-portion { animation: bn-food-in .55s var(--ease) .45s forwards; }
.bn-food-cap svg, .bn-food-portion svg {
  width: 28px; height: 28px;
  display: block;
  filter: drop-shadow(0 3px 8px rgba(74,54,38,.18));
}
.bn-food-cap-dose,
.bn-food-amt {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.1;
}
.bn-food-cap-name,
.bn-food-name {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-faint);
  text-transform: uppercase;
  line-height: 1.1;
}
.bn-food-eq {
  font-size: 18px;
  font-weight: 900;
  color: var(--sa);
  letter-spacing: -.02em;
  opacity: 0;
}
.bn-tile.in-view .bn-food-eq { animation: bn-food-in .4s var(--ease) .3s forwards; }
@keyframes bn-food-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ===================================================================== */
/* 10b. REORDER — in-app low-stock list (replaces iOS push card)         */
/* ===================================================================== */
.bn-lowlist {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translate(8px, -50%);
  width: 64%;
  display: grid;
  gap: 4px;
  opacity: 0;
}
.bn-tile.in-view .bn-lowlist {
  animation: bn-lowlist-in .55s var(--ease) .9s forwards;
}
@keyframes bn-lowlist-in {
  to { opacity: 1; transform: translate(0, -50%); }
}
.bn-lowlist-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px -3px rgba(74,54,38,.15);
}
.bn-lowlist-dot {
  width: 7px; height: 7px;
  border-radius: 99px;
  background: #C84A4A;
  box-shadow: 0 0 0 0 rgba(200,74,74,.5);
}
.bn-lowlist-dot-amber { background: #D9A52F; }
.bn-lowlist-body { min-width: 0; }
.bn-lowlist-name {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: -.012em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}
.bn-lowlist-sub {
  font-size: 8.5px;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: .01em;
  line-height: 1.1;
}
.bn-lowlist-pill {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: -.005em;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  color: var(--ink-soft);
}
.bn-lowlist-pill-low {
  background: color-mix(in srgb, #C84A4A 12%, var(--surface));
  border-color: color-mix(in srgb, #C84A4A 26%, var(--line));
  color: #C84A4A;
}

/* ---- Compact mode: hide secondary content trimmed for single-viewport ---- */
.bn-price-tags,
.bn-ring-legend,
.bn-score-bars,
.bn-brand-chips,
.bn-brand-c3,
.bn-well-meta,
.bn-bio-row,
.bn-depl-fix,
.bn-jar-label,
.bn-eyebrow-pill {
  display: none !important;
}

/* ---- Pause every bento animation until its tile enters view ----
   data-reveal toggles .in-view on first scroll-in; until then we hold
   each animation at frame 0 so users actually witness the reveal
   instead of catching the static end-state. */
.bn-tile * { animation-play-state: paused; }
.bn-tile.in-view * { animation-play-state: running; }

/* ---- Responsive ---- */
@media (max-width: 920px) {
  .bn-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 220px repeat(4, 168px);
    gap: 10px;
  }
  .bn-scanner  { grid-column: span 2; grid-row: 1; }
  .bn-int      { grid-column: span 2; grid-row: 2; }
  .bn-price    { grid-column: span 1; grid-row: 3; }
  .bn-ring     { grid-column: span 1; grid-row: 3; }
  .bn-score    { grid-column: span 1; grid-row: 4; }
  .bn-brand    { grid-column: span 1; grid-row: 4; }
  .bn-wellness { grid-column: span 1; grid-row: 5; }
  .bn-bio      { grid-column: span 1; grid-row: 5; }
  .bn-depl     { grid-column: span 1; grid-row: 6; }
  .bn-reorder  { grid-column: span 1; grid-row: 6; }
  .bn-grid { grid-template-rows: 220px 220px 168px 168px 168px 168px; }
}
@media (max-width: 560px) {
  .bn-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(10, auto);
    gap: 10px;
  }
  .bn-scanner  { grid-column: 1; grid-row: 1; }
  .bn-int      { grid-column: 1; grid-row: 2; }
  .bn-price    { grid-column: 1; grid-row: 3; }
  .bn-ring     { grid-column: 1; grid-row: 4; }
  .bn-score    { grid-column: 1; grid-row: 5; }
  .bn-brand    { grid-column: 1; grid-row: 6; }
  .bn-wellness { grid-column: 1; grid-row: 7; }
  .bn-bio      { grid-column: 1; grid-row: 8; }
  .bn-depl     { grid-column: 1; grid-row: 9; }
  .bn-reorder  { grid-column: 1; grid-row: 10; }
  .bn-tile { min-height: 168px; }
  .bn-scanner, .bn-int { min-height: 220px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .bns-laser, .bns-barcode, .bns-flash, .bns-result,
  .bn-edge, .bn-node circle, .bn-int-nodes text,
  .bn-spark-line, .bn-spark-area, .bn-spark-dot,
  .bn-ring-fill, .bn-ring-node, .bn-ring-time, .bn-ring-label,
  .bn-gauge-fill, .bn-bar-fill,
  .bn-brand-c1, .bn-brand-c2, .bn-brand-c3,
  .bn-well-face, .bn-well-line, .bn-well-dots circle, .bn-well-dot-tip,
  .bn-bio-dot,
  .bn-depl-a1, .bn-depl-a2, .bn-depl-a3, .bn-depl-fix,
  .bn-jar-pills i, .bn-notif,
  .bn-pricepill-good i,
  .bn-food-cap, .bn-food-portion, .bn-food-eq,
  .bn-lowlist, .bn-lowlist-dot,
  .bn-cost-bar i {
    animation: none !important;
    transition: none !important;
  }
  .bn-spark-line  { stroke-dashoffset: 0; }
  .bn-spark-area  { opacity: 1; }
  .bn-spark-dot   { opacity: 1; }
  .bn-ring-fill   { stroke-dashoffset: 309; }
  .bn-ring-node, .bn-ring-time, .bn-ring-label,
  .bn-edge, .bn-node circle, .bn-int-nodes text,
  .bn-well-face, .bn-well-dots circle,
  .bn-brand-c1, .bn-brand-c2, .bn-brand-c3,
  .bn-depl-a1, .bn-depl-a2, .bn-depl-a3, .bn-depl-fix,
  .bn-notif,
  .bn-food-cap, .bn-food-portion, .bn-food-eq { opacity: 1; transform: none; }
  .bn-lowlist { opacity: 1; transform: translate(0, -50%); }
  .bn-gauge-fill  { stroke-dashoffset: 18; }
  .bn-bar-fill    { width: var(--bw, 50%); }
  .bn-cost-bar i  { height: var(--h, 50%); }
  .bn-well-line   { stroke-dashoffset: 0; }
  .bn-bio-dot     { left: 48%; }
  .bn-brand-c1 { transform: translateY(0) rotate(-1.5deg); }
  .bn-brand-c2 { transform: translateY(10px) rotate(.6deg); }
  .bn-brand-c3 { transform: translateY(20px) rotate(-.4deg); }
}

/* =====================================================================
   Comparison page (/vs/*)
   ===================================================================== */

.vs-table {
  max-width: 1100px;
  margin: 32px auto 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.vs-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.2fr;
  border-top: 1px solid var(--line-soft);
}
.vs-row:first-child { border-top: 0; }

.vs-row--header {
  background: var(--surface-2);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
}
.vs-row--header > div {
  padding: 14px 20px;
}

.vs-feature {
  padding: 22px 20px;
  background: var(--surface-2);
  border-right: 1px solid var(--line-soft);
}
.vs-feature h3 {
  margin: 0 0 6px;
  font-size: 17px;
  letter-spacing: -.01em;
}
.vs-feature p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.vs-cell {
  padding: 22px 20px;
  border-right: 1px solid var(--line-soft);
}
.vs-cell:last-child { border-right: 0; }
.vs-cell p {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.vs-cell p:last-child { margin-bottom: 0; }

.vs-verdict {
  font-size: 14.5px !important;
  font-weight: 700;
  letter-spacing: -.005em;
  margin: 0 0 10px !important;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 12px;
  border-radius: 999px;
}
.vs-verdict sup {
  font-weight: 600;
  font-size: 11px;
}
.vs-verdict sup a {
  color: inherit;
  text-decoration: none;
  opacity: .6;
}
.vs-verdict sup a:hover { opacity: 1; text-decoration: underline; }
.vs-verdict--hit {
  background: color-mix(in srgb, var(--synergy) 14%, var(--surface));
  color: var(--synergy-deep);
}
.vs-verdict--miss {
  background: color-mix(in srgb, var(--warn) 18%, var(--surface));
  color: #8C5C1A;
}
.vs-verdict--neutral {
  background: var(--surface-3);
  color: var(--ink-soft);
}

/* Sources list */
.sources-list {
  list-style: decimal;
  padding-left: 22px;
  margin: 0;
}
.sources-list li {
  font-size: 14.5px;
  line-height: 1.6;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-soft);
}
.sources-list li:first-child { border-top: 0; padding-top: 0; }
.sources-list a { color: var(--accent-deep); }

/* Mobile: stack the row vertically */
@media (max-width: 760px) {
  .vs-row {
    grid-template-columns: 1fr;
  }
  .vs-row--header { display: none; }
  .vs-feature {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .vs-cell {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .vs-row:last-child .vs-cell:last-child { border-bottom: 0; }
  .vs-cell::before {
    display: block;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-faint);
    margin-bottom: 10px;
  }
  .vs-cell.vs-them::before { content: "Suppco"; }
  .vs-cell.vs-us::before { content: "NutriStack"; color: var(--synergy-deep); }
}

/* =====================================================================
   EDITORIAL LAYER (2026-05-26 redesign, Phase 1)
   Shifts homepage tone toward journal / medical-reference. Adds a serif
   typestack, a left-aligned editorial hero (no phones), a static methods
   snapshot replacing the stat marquee, and a quieter independence
   statement. Coexists with all app-mirror scene styles above so we can
   migrate the feature sections in Phase 2.
   ===================================================================== */

:root {
  --font-serif: ui-serif, "New York", "Iowan Old Style", "Source Serif 4",
                "Source Serif Pro", Charter, Georgia, "Times New Roman", serif;
}

/* ------- Editorial hero ------- */

/* Hero zone wraps the masthead + hero so they together fill exactly one
   viewport on first paint. The header keeps its natural height; the hero
   flex-grows to fill the remainder with its content centered vertically. */
.hero-zone {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.hero-zone .site-header {
  flex-shrink: 0;
}
.hero-zone .editorial-hero {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(24px, 4vw, 56px);
}

.editorial-hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(56px, 9vw, 120px) clamp(20px, 5vw, 30px) clamp(28px, 5vw, 56px);
  text-align: left;
}
.editorial-hero .eh-meta {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.editorial-hero .eh-meta .dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink-ghost);
}
.editorial-hero h1 {
  font-family: var(--font);
  font-weight: 600;
  font-style: normal;
  font-size: clamp(40px, 7vw, 76px);
  line-height: 1.04;
  letter-spacing: -.034em;
  color: var(--ink);
  margin: 0;
  max-width: 20ch;
}
.editorial-hero h1 .eh-accent {
  color: var(--accent-deep);
  font-style: normal;
  font-weight: 600;
}

/* Rotating accent word — locks min-width to the widest entry to prevent
   layout shift, fades + slides on swap. JS sets the words and min-width. */
.editorial-hero .eh-rotator {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  white-space: nowrap;
}
.editorial-hero .eh-rotator-word {
  display: inline-block;
  transition: opacity .28s ease, transform .28s ease;
  will-change: opacity, transform;
}
.editorial-hero .eh-rotator.is-swapping .eh-rotator-word {
  opacity: 0;
  transform: translateY(-6px);
}
.editorial-hero .eh-rotator-dot {
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .editorial-hero .eh-rotator-word {
    transition: none;
  }
}
.editorial-hero .eh-lead {
  font-family: var(--font);
  font-size: clamp(17px, 1.6vw, 20.5px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 28px 0 0;
}
.editorial-hero .eh-lead strong {
  color: var(--ink);
  font-weight: 600;
}
.editorial-hero .eh-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 820px;
  margin: 24px 0 0;
}
.editorial-hero .eh-proof-pill {
  min-width: 0;
  min-height: 78px;
  padding: 14px 14px 13px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 78%, transparent),
      color-mix(in srgb, var(--bg) 84%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
.editorial-hero .eh-proof-num {
  display: block;
  font-family: var(--font);
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--ink);
}
.editorial-hero .eh-proof-label {
  display: block;
  margin-top: 9px;
  font-family: var(--font);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  overflow-wrap: break-word;
  font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1;
}
.editorial-hero .eh-proof-label .mn-mark {
  margin-left: 3px;
  letter-spacing: 0;
}
.editorial-hero .btn-row { margin-top: 36px; gap: 10px; }

/* Editorial button variant: square, ink-on-cream, restrained */
.btn-editorial {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn-editorial:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--on-accent);
}
.btn-editorial.is-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-editorial.is-ghost:hover {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

/* App Store CTA — matches the rotating hero accent (--accent-deep). */
.btn-editorial.is-app-store {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--on-accent, #fff);
}
.btn-editorial.is-app-store:hover {
  background: var(--accent-press);
  border-color: var(--accent-press);
  color: var(--on-accent, #fff);
}
.btn-editorial.is-ghost.is-app-store {
  background: transparent;
  border-color: color-mix(in srgb, var(--accent-deep) 60%, transparent);
  color: var(--accent-deep);
}
.btn-editorial.is-ghost.is-app-store:hover {
  background: color-mix(in srgb, var(--accent-deep) 8%, transparent);
  border-color: var(--accent-deep);
  color: var(--accent-deep);
}

@media (max-width: 760px) {
  .editorial-hero .eh-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 520px;
  }
}

@media (max-width: 420px) {
  .editorial-hero .eh-proof {
    gap: 8px;
  }
  .editorial-hero .eh-proof-pill {
    min-height: 74px;
    padding: 12px 11px;
  }
  .editorial-hero .eh-proof-num {
    font-size: 25px;
  }
  .editorial-hero .eh-proof-label {
    font-size: 10px;
    letter-spacing: .07em;
  }
}

/* ------- Methods snapshot (replaces stat marquee) ------- */

.methods-snapshot {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) clamp(20px, 5vw, 30px) clamp(28px, 4vw, 48px);
}
.methods-snapshot .ms-head {
  max-width: 70ch;
  margin: 0 0 clamp(22px, 3vw, 32px);
}
.methods-snapshot .ms-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 9px;
}
.methods-snapshot .ms-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--synergy), var(--accent), var(--cat-purple));
}
.methods-snapshot .ms-head h2 {
  font-family: var(--font);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(32px, 3.35vw, 40px);
  line-height: 1.04;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 10px;
  max-width: none;
}
.methods-snapshot .ms-sub {
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.48;
  color: var(--ink-soft);
  margin: 0;
  max-width: 64ch;
}
.methods-snapshot .ms-frame {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.methods-snapshot .ms-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
}
.methods-snapshot .ms-caption .ms-date {
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.methods-snapshot .ms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.methods-snapshot .ms-col {
  padding: 24px 24px 26px;
  border-right: 1px solid var(--line-soft);
}
.methods-snapshot .ms-col:last-child { border-right: 0; }
.methods-snapshot .ms-col h3 {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 16px;
}
.methods-snapshot .ms-note {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin: 16px 0 0;
  line-height: 1.5;
}
.methods-snapshot .ms-note a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.methods-snapshot .ms-grade {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
}
.methods-snapshot .ms-grade.is-strong {
  background: color-mix(in srgb, var(--synergy) 16%, var(--surface));
  color: var(--synergy-deep);
}
.methods-snapshot .ms-grade.is-moderate {
  background: color-mix(in srgb, var(--warn) 16%, var(--surface));
  color: var(--warn);
}
.methods-snapshot .ms-grade.is-emerging {
  background: var(--surface-2);
  color: var(--ink-soft);
}
.methods-snapshot .ms-grade .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.methods-snapshot .ms-stats,
.methods-snapshot .ms-sources,
.methods-snapshot .ms-grades {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.methods-snapshot .ms-stats li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  font-size: 13.5px;
  color: var(--ink-soft);
  font-weight: 500;
}
.methods-snapshot .ms-stats li:last-child { border-bottom: 0; }
.methods-snapshot .ms-stats li b {
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.methods-snapshot .ms-sources li {
  padding: 9px 0;
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px dashed color-mix(in srgb, var(--line) 70%, transparent);
}
.methods-snapshot .ms-sources li:last-child { border-bottom: 0; }

.methods-snapshot .ms-grades li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--line) 70%, transparent);
}
.methods-snapshot .ms-grades li:last-child { border-bottom: 0; }
.methods-snapshot .ms-grade-desc {
  font-size: 13px;
  color: var(--ink-soft);
  padding-left: 2px;
}

@media (max-width: 760px) {
  .methods-snapshot .ms-grid { grid-template-columns: 1fr; }
  .methods-snapshot .ms-col {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .methods-snapshot .ms-col:last-child { border-bottom: 0; }
}

/* ------- Statement masthead (restyle of the independence band) ------- */

.statement-mast {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 30px) clamp(24px, 4vw, 44px);
  text-align: center;
}
.statement-mast .sm-rule {
  display: block;
  width: 44px;
  height: 1px;
  background: var(--ink-ghost);
  margin: 0 auto 26px;
}
.statement-mast p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.8vw, 30px);
  line-height: 1.42;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.statement-mast .sm-foot {
  font-family: var(--font);
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 26px 0 0;
}
.statement-mast .sm-foot a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.statement-mast .sm-foot .sm-sep {
  display: inline-block;
  margin: 0 12px;
  color: var(--ink-ghost);
}

/* =====================================================================
   INSIDE THE APP — feature showcase (rewritten 2026-05-27)
   Three-column stage inside one bordered frame: a vertical feature card
   list (left) drives a hero phone (centre) and a detail panel (right).
   No floating mode card, no grid background, larger phone, primary CTA
   per panel. Auto-cycles, pauses on hover, click-to-jump.
   ===================================================================== */

.inside-app {
  width: min(100%, var(--maxw));
  height: 100vh;
  height: 100svh;
  margin: 0 auto;
  padding: 18px clamp(20px, 5vw, 30px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
  scroll-margin-top: 0;
}
.editorial-hero + .inside-app { padding-top: 18px; }

.inside-app .ia-head {
  max-width: 70ch;
  margin: 0;
}
.inside-app .ia-head-copy { min-width: 0; }
.inside-app .ia-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 9px;
}
.inside-app .ia-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--synergy), var(--accent), var(--cat-purple));
}
.inside-app h2 {
  font-family: var(--font);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(32px, 3.35vw, 40px);
  line-height: 1.04;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 10px;
  max-width: none;
}
.inside-app .ia-sub {
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.48;
  color: var(--ink-soft);
  margin: 0;
  max-width: 64ch;
}

/* Frame */
.inside-app .ia-frame {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 3px;
  background:
    radial-gradient(120% 80% at 15% 50%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 60%),
    radial-gradient(110% 80% at 88% 60%, color-mix(in srgb, var(--cat-peach) 8%, transparent), transparent 65%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--surface) 95%, var(--accent) 5%) 0%,
      var(--surface) 48%,
      color-mix(in srgb, var(--surface) 92%, var(--cat-peach) 8%) 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.inside-app .ia-frame::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -38%;
  width: 34%;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent);
  animation: ia-frame-sweep 8.4s var(--ease) infinite;
}
@keyframes ia-frame-sweep {
  0%, 18% { transform: translateX(0); opacity: 0; }
  36%     { opacity: 1; }
  76%     { transform: translateX(410%); opacity: 0; }
  100%    { transform: translateX(410%); opacity: 0; }
}

/* Stage: 3 columns — features | phone | panel */
.inside-app .ia-stage {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(238px, 268px) minmax(240px, 340px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 38px);
  padding: clamp(20px, 2.6vw, 32px) clamp(24px, 3.4vw, 40px);
  align-items: stretch;
}

/* Feature card column */
.inside-app .ia-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  align-self: center;
}
.inside-app .ia-feature {
  --feature-color: var(--ink-faint);
  appearance: none;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 10px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: var(--font);
  position: relative;
  isolation: isolate;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.inside-app .ia-feature:hover {
  background: color-mix(in srgb, var(--surface) 70%, var(--feature-color) 7%);
  border-color: color-mix(in srgb, var(--feature-color) 22%, var(--line));
  transform: translateY(-1px);
}
.inside-app .ia-feature.is-active {
  background: color-mix(in srgb, var(--surface) 62%, var(--feature-color) 11%);
  border-color: color-mix(in srgb, var(--feature-color) 32%, var(--line));
  box-shadow: var(--shadow-xs);
}
.inside-app .ia-feature.is-active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 2px;
  background: var(--feature-color);
}
.inside-app .ia-feature[data-feature="today"]        { --feature-color: #3FA76A; }
.inside-app .ia-feature[data-feature="score"]        { --feature-color: var(--accent-deep); }
.inside-app .ia-feature[data-feature="interactions"] { --feature-color: var(--accent-press); }
.inside-app .ia-feature[data-feature="explore"]      { --feature-color: #7B68C9; }
.inside-app .ia-feature[data-feature="ai"]           { --feature-color: #4A90D9; }

.inside-app .ia-feature-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--feature-color);
  opacity: .55;
  flex-shrink: 0;
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.inside-app .ia-feature:hover .ia-feature-dot { opacity: .85; }
.inside-app .ia-feature.is-active .ia-feature-dot {
  opacity: 1;
  transform: scale(1.15);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--feature-color) 16%, transparent);
  animation: ia-feature-pulse 2.2s ease-in-out infinite;
}
@keyframes ia-feature-pulse {
  0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--feature-color) 16%, transparent); }
  50%      { box-shadow: 0 0 0 10px color-mix(in srgb, var(--feature-color) 0%, transparent); }
}
.inside-app .ia-feature-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.inside-app .ia-feature-name {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  line-height: 1.18;
}
.inside-app .ia-feature-line {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-faint);
  line-height: 1.32;
  margin-top: 2px;
}
.inside-app .ia-feature-step {
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  opacity: .45;
  transition: opacity .2s ease, color .2s ease;
}
.inside-app .ia-feature.is-active .ia-feature-step {
  opacity: 1;
  color: color-mix(in srgb, var(--feature-color) 62%, var(--ink));
}
.inside-app .ia-feature:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Hero phone — width capped by available section height so the whole phone
   stays within the frame's clipped 100svh box, no bottom overhang. */
.inside-app .ia-phone-shell {
  position: relative;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: min(100%, 320px, calc((100svh - 290px) * (1200 / 2610)));
  transform-origin: center;
  animation: ia-phone-float 6.2s ease-in-out infinite;
}
@keyframes ia-phone-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.inside-app .ia-phone {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 2610;
  border-radius: 34px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  overflow: hidden;
  box-shadow:
    0 30px 60px -28px rgba(20, 30, 40, .38),
    0 8px 20px -10px rgba(20, 30, 40, .18);
}
.inside-app .ia-phone::before,
.inside-app .ia-phone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.inside-app .ia-phone::before {
  background:
    linear-gradient(105deg, transparent 0 38%, color-mix(in srgb, #fff 18%, transparent) 48%, transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, #fff 18%, transparent), transparent 28%);
  opacity: .48;
  mix-blend-mode: screen;
}
.inside-app .ia-phone::after {
  inset: -14% 0 auto;
  height: 24%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent);
  transform: translateY(-120%);
  animation: ia-phone-scan 5.8s ease-in-out infinite;
}
@keyframes ia-phone-scan {
  0%, 22% { transform: translateY(-120%); opacity: 0; }
  42%     { opacity: .9; }
  78%     { transform: translateY(620%); opacity: 0; }
  100%    { transform: translateY(620%); opacity: 0; }
}
.inside-app .ia-phone img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s ease;
}
.inside-app .ia-phone img.is-active { opacity: 1; }

/* Live signal pill (floats over phone) */
.inside-app .ia-phone-signals {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 5;
  width: max-content;
  max-width: calc(100% - 30px);
  transform: translateX(-50%);
}
.inside-app .ia-phone-signal {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, #fff 38%, transparent);
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  color: var(--ink);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  box-shadow: 0 10px 22px -16px rgba(0,0,0,.45);
  white-space: nowrap;
}
.inside-app .ia-phone-signal::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--synergy);
  flex: none;
}
.inside-app .ia-phone-signal.is-active {
  display: inline-flex;
  animation: ia-signal-in .42s var(--ease) both;
}
@keyframes ia-signal-in {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Right detail panel (crossfade) */
.inside-app .ia-panels {
  position: relative;
  min-height: 0;
  height: 100%;
}
.inside-app .ia-panel {
  position: absolute;
  inset: 50% 0 auto;
  opacity: 0;
  transform: translateY(calc(-50% + 10px));
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.inside-app .ia-panel.is-active {
  opacity: 1;
  transform: translateY(-50%);
  pointer-events: auto;
}
.inside-app .ia-panel[hidden] { display: block; }

.inside-app .ia-panel-kicker {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 10px;
}
.inside-app .ia-panel h3 {
  font-family: var(--font);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 12px;
  max-width: 22ch;
}
.inside-app .ia-panel p {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 18px;
  max-width: 46ch;
}

.inside-app .ia-stats {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 460px;
}
.inside-app .ia-stats li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 72px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 76%, var(--accent-2) 6%);
  box-shadow: var(--shadow-xs);
}
.inside-app .ia-stats li b {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.inside-app .ia-stats li span {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.inside-app .ia-cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.inside-app .ia-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 11px 18px;
  border-radius: var(--pill);
  background: var(--ink);
  color: var(--surface);
  border: 1px solid var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .2s var(--ease);
  box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 10px 18px -14px rgba(0,0,0,.4);
}
.inside-app .ia-cta::after {
  content: "→";
  display: inline-block;
  transform: translateX(0);
  transition: transform .2s var(--ease);
}
.inside-app .ia-cta:hover {
  background: color-mix(in srgb, var(--ink) 90%, var(--accent) 10%);
  transform: translateY(-1px);
  box-shadow: 0 2px 0 rgba(0,0,0,.06), 0 14px 24px -14px rgba(0,0,0,.4);
}
.inside-app .ia-cta:hover::after { transform: translateX(3px); }
.inside-app .ia-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.inside-app .ia-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.inside-app .ia-link:hover { text-decoration-thickness: 1.5px; }

/* Auto-cycle progress bar */
.inside-app .ia-cycle {
  height: 3px;
  width: 100%;
  background: var(--line-soft);
  overflow: hidden;
}
.inside-app .ia-cycle-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--synergy), var(--accent), var(--cat-purple), var(--cat-blue));
}

@media (prefers-reduced-motion: reduce) {
  .inside-app .ia-cycle { display: none; }
  .inside-app .ia-frame::after,
  .inside-app .ia-phone::after,
  .inside-app .ia-phone-shell,
  .inside-app .ia-feature.is-active .ia-feature-dot,
  .inside-app .ia-phone-signal.is-active { animation: none; }
  .inside-app .ia-panel { transition: none; }
  .inside-app .ia-phone img { transition: none; }
}

/* Compact viewport heights — tighten everything so phone stays prominent */
@media (max-height: 780px) and (min-width: 1101px) {
  .inside-app { padding: 14px clamp(20px, 5vw, 30px); gap: 12px; }
  .inside-app h2 { font-size: 34px; margin-bottom: 8px; }
  .inside-app .ia-sub { font-size: 14.5px; line-height: 1.42; }
  .inside-app .ia-stage { padding: 16px clamp(20px, 3vw, 32px); gap: clamp(16px, 2.4vw, 28px); }
  .inside-app .ia-features { gap: 6px; }
  .inside-app .ia-feature { padding: 10px 12px; gap: 10px; }
  .inside-app .ia-feature-line { display: none; }
  .inside-app .ia-feature-name { font-size: 13.5px; }
  .inside-app .ia-feature.is-active::before { top: 11px; bottom: 11px; }
  .inside-app .ia-phone-shell { max-width: min(100%, 290px, calc((100svh - 250px) * (1200 / 2610))); }
  .inside-app .ia-panel h3 { font-size: 24px; }
  .inside-app .ia-panel p { font-size: 14px; line-height: 1.44; margin-bottom: 14px; }
  .inside-app .ia-stats { margin-bottom: 16px; gap: 8px; }
  .inside-app .ia-stats li { min-height: 62px; padding: 10px; }
  .inside-app .ia-stats li b { font-size: 19px; }
  .inside-app .ia-cta { padding: 10px 16px; font-size: 13.5px; }
}

/* Tablet / smaller desktop — features become horizontal strip ABOVE phone+panel.
   Placing the strip on top instead of below ensures it never gets clipped by
   the section's height: 100svh + overflow: hidden constraint. */
@media (max-width: 1100px) and (min-width: 861px) {
  .inside-app .ia-stage {
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    grid-template-areas: "features features" "phone panel";
    gap: clamp(18px, 2.6vw, 28px);
    row-gap: 14px;
    align-items: center;
    padding: clamp(16px, 2.4vw, 26px) clamp(20px, 3vw, 32px);
  }
  .inside-app .ia-phone-shell {
    grid-area: phone;
    max-width: min(100%, 280px, calc((100svh - 300px) * (1200 / 2610)));
  }
  .inside-app .ia-panels { grid-area: panel; }
  .inside-app .ia-features {
    grid-area: features;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    margin: 0;
    padding: 0 0 4px;
    align-self: stretch;
  }
  .inside-app .ia-features::-webkit-scrollbar { display: none; }
  .inside-app .ia-feature {
    flex: 0 0 auto;
    min-width: 196px;
    padding: 10px 12px;
  }
  .inside-app .ia-feature-line { display: none; }
  .inside-app .ia-feature.is-active::before {
    left: 12px;
    top: auto;
    bottom: -5px;
    width: 28px;
    height: 3px;
  }
  .inside-app .ia-panel h3 { font-size: 24px; }
  .inside-app .ia-panel p { font-size: 14px; line-height: 1.44; margin-bottom: 14px; }
  .inside-app .ia-stats { gap: 8px; margin-bottom: 16px; }
  .inside-app .ia-stats li { min-height: 64px; padding: 10px; }
  .inside-app .ia-stats li b { font-size: 20px; }
  .inside-app .ia-cta { padding: 10px 16px; font-size: 13.5px; }
}

/* Mobile */
@media (max-width: 860px) {
  .inside-app {
    height: auto;
    min-height: 0;
    padding: 18px 16px;
    gap: 13px;
  }
  .editorial-hero + .inside-app { padding-top: 18px; }
  .inside-app .ia-head { max-width: 48ch; }
  .inside-app .ia-head-copy { max-width: 48ch; }
  .inside-app .ia-kicker { margin-bottom: 6px; }
  .inside-app h2 { font-size: 30px; }
  .inside-app .ia-sub {
    margin: 8px 0 0;
    max-width: 46ch;
    font-size: 14.5px;
    line-height: 1.38;
  }
  .inside-app .ia-frame { border-radius: 10px; }
  .inside-app .ia-stage {
    grid-template-columns: 1fr;
    grid-template-areas: "features" "phone" "panel";
    padding: 14px 14px 16px;
    gap: 16px;
    align-items: start;
  }
  .inside-app .ia-features {
    grid-area: features;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -14px;
    padding: 0 14px 4px;
    gap: 8px;
  }
  .inside-app .ia-features::-webkit-scrollbar { display: none; }
  .inside-app .ia-feature {
    flex: 0 0 auto;
    padding: 9px 12px;
    border-radius: 8px;
    min-width: 0;
    grid-template-columns: auto auto;
    gap: 8px;
  }
  .inside-app .ia-feature-line { display: none; }
  .inside-app .ia-feature-name { font-size: 13px; white-space: nowrap; }
  .inside-app .ia-feature-step { display: none; }
  .inside-app .ia-feature.is-active::before {
    left: 12px;
    top: auto;
    bottom: -5px;
    width: 24px;
    height: 3px;
  }
  .inside-app .ia-phone-shell {
    grid-area: phone;
    width: min(48vw, 200px);
    max-width: 220px;
    margin: 0 auto;
  }
  .inside-app .ia-phone { border-radius: 22px; }
  .inside-app .ia-phone-signals { bottom: 12px; }
  .inside-app .ia-phone-signal { padding: 6px 10px; font-size: 11px; }
  .inside-app .ia-panels {
    grid-area: panel;
    min-height: 0;
    height: auto;
  }
  .inside-app .ia-panel {
    position: relative;
    inset: auto;
    transform: none;
  }
  .inside-app .ia-panel.is-active { transform: none; }
  .inside-app .ia-panel:not(.is-active) { display: none; }
  .inside-app .ia-panel h3 {
    font-size: 22px;
    line-height: 1.16;
    margin-bottom: 9px;
  }
  .inside-app .ia-panel p {
    font-size: 14px;
    line-height: 1.42;
    margin-bottom: 14px;
    max-width: none;
  }
  .inside-app .ia-panel-kicker {
    font-size: 10px;
    margin-bottom: 7px;
  }
  .inside-app .ia-stats {
    gap: 7px;
    margin-bottom: 14px;
    max-width: none;
  }
  .inside-app .ia-stats li {
    min-height: 60px;
    padding: 9px;
  }
  .inside-app .ia-stats li b { font-size: 18px; }
  .inside-app .ia-stats li span {
    font-size: 10px;
    line-height: 1.14;
    letter-spacing: .04em;
  }
  .inside-app .ia-cta { font-size: 13.5px; padding: 10px 16px; }
  .inside-app .ia-link { font-size: 13px; }
  .inside-app .ia-cta-row { gap: 12px; }
}

@media (max-width: 420px) {
  .inside-app h2 { font-size: 27px; }
  .inside-app .ia-sub { font-size: 13.5px; }
  .inside-app .ia-stage { padding-left: 12px; padding-right: 12px; }
  .inside-app .ia-phone-shell { width: min(50vw, 180px); }
  .inside-app .ia-stats li { min-height: 56px; padding: 8px; }
}

/* =====================================================================
   WORKED EXAMPLE — one sourced interaction pair, shown in journal
   abstract format. Phase 3, 2026-05-26. Replaces the Evidence Library
   "live feed" with a static specimen of the methodology in practice.
   ===================================================================== */

.worked-example {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 30px);
}
.worked-example .we-head {
  max-width: 70ch;
  margin: 0 0 clamp(22px, 3vw, 32px);
}
.worked-example .we-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 9px;
}
.worked-example .we-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--synergy), var(--accent), var(--cat-purple));
}
.worked-example .we-head h2 {
  font-family: var(--font);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(32px, 3.35vw, 40px);
  line-height: 1.04;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 10px;
  max-width: none;
}
.worked-example .we-sub {
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.48;
  color: var(--ink-soft);
  margin: 0;
  max-width: 64ch;
}

.worked-example .we-paper {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
  padding: clamp(28px, 4vw, 48px);
}

.worked-example .we-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 26px;
}
.worked-example .we-meta-label {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.worked-example .we-meta-date {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.worked-example .we-title {
  font-family: var(--font);
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 14px;
}
.worked-example .we-title em {
  font-style: normal;
  font-weight: 500;
  color: var(--ink-ghost);
  margin: 0 .25ch;
}

.worked-example .we-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 30px;
}
.worked-example .we-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
}
.worked-example .we-badge.is-synergy {
  background: color-mix(in srgb, var(--synergy) 16%, var(--surface));
  color: var(--synergy-deep);
}
.worked-example .we-badge.is-evidence {
  background: color-mix(in srgb, var(--warn) 16%, var(--surface));
  color: var(--warn);
}
.worked-example .we-badge.is-neutral {
  background: var(--surface-2);
  color: var(--ink-soft);
}
.worked-example .we-badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.worked-example .we-body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
}
.worked-example .we-body .we-section {
  margin: 0 0 22px;
  max-width: 70ch;
}
.worked-example .we-body .we-section:last-child { margin-bottom: 0; }
.worked-example .we-body h4 {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 8px;
}
.worked-example .we-body p { margin: 0; }

.worked-example .we-rule {
  border: 0;
  border-top: 1px solid var(--line-soft);
  margin: 30px 0 22px;
}

.worked-example .we-sources h4 {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}
.worked-example .we-sources ol {
  list-style: none;
  counter-reset: src;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.worked-example .we-sources li {
  counter-increment: src;
  position: relative;
  padding-left: 32px;
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.worked-example .we-sources li i {
  font-style: italic;
  color: var(--ink);
}
.worked-example .we-sources li::before {
  content: counter(src) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink);
}
.worked-example .we-pmid {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.worked-example .we-pmid:hover {
  background: var(--ink);
  color: var(--bg);
}

.worked-example .we-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.worked-example .we-foot a {
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.worked-example .we-foot .we-foot-meta {
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink-faint);
}
.worked-example .we-foot .we-foot-meta a {
  font-size: 13px;
  margin-left: 6px;
}

/* =====================================================================
   RESEARCH INDEX — publication contents page (Phase 4, 2026-05-26)
   Replaces the generic "Public research library" card grid with a
   journal-style table of contents linking to the 28 in-house deep dives.
   ===================================================================== */

.research-index {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 30px);
}
.research-index .ri-head {
  max-width: 70ch;
  margin: 0 0 clamp(22px, 3vw, 32px);
}
.research-index .ri-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 9px;
}
.research-index .ri-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: var(--pill);
  background: linear-gradient(90deg, var(--synergy), var(--accent), var(--cat-purple));
}
.research-index .ri-head h2 {
  font-family: var(--font);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(32px, 3.35vw, 40px);
  line-height: 1.04;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 10px;
  max-width: none;
}
.research-index .ri-sub {
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.48;
  color: var(--ink-soft);
  margin: 0;
  max-width: 64ch;
}

.research-index .ri-paper {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.research-index .ri-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
}
.research-index .ri-meta-counts {
  letter-spacing: .03em;
  text-transform: none;
  color: var(--ink-soft);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.research-index table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font);
  font-size: 14.5px;
}
.research-index thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 700;
}
.research-index thead th.col-go { width: 60px; }
.research-index tbody td {
  padding: 16px 24px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  vertical-align: baseline;
}
.research-index tbody tr:last-child td { border-bottom: 0; }
.research-index tbody tr { transition: background-color .15s ease; }
.research-index tbody tr:hover {
  background: color-mix(in srgb, var(--ink) 2.5%, var(--surface));
}

.research-index .ri-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink-ghost);
  width: 1%;
  white-space: nowrap;
  font-size: 14px;
}
.research-index .ri-title a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.research-index .ri-title a:hover {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.research-index .ri-topic {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-faint);
  width: 1%;
  white-space: nowrap;
}
.research-index .ri-tier { width: 1%; white-space: nowrap; }
.research-index .ri-tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
}
.research-index .ri-tier-pill.is-strong   { background: color-mix(in srgb, var(--synergy) 16%, var(--surface)); color: var(--synergy-deep); }
.research-index .ri-tier-pill.is-moderate { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn); }
.research-index .ri-tier-pill.is-emerging { background: var(--surface-2); color: var(--ink-soft); }
.research-index .ri-tier-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.research-index .ri-updated {
  font-size: 12.5px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  width: 1%;
  white-space: nowrap;
}
.research-index .ri-go { text-align: right; width: 1%; white-space: nowrap; }
.research-index .ri-go a {
  color: var(--accent-deep);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
}
.research-index .ri-foot {
  padding: 16px 24px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.research-index .ri-foot a {
  color: var(--accent-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-variant-numeric: normal;
}

@media (max-width: 760px) {
  .research-index thead th.col-topic,
  .research-index thead th.col-updated,
  .research-index .ri-topic,
  .research-index .ri-updated { display: none; }
  .research-index tbody td { padding: 14px 16px; }
  .research-index thead th { padding: 12px 16px; }
  .research-index .ri-meta,
  .research-index .ri-foot { padding-left: 16px; padding-right: 16px; }
}

/* =====================================================================
   METHODOLOGY PILLAR — editorial close before the broader research
   index. Two-paragraph statement with a byline, paired with a small
   "editorial principles" card. Phase 5, 2026-05-26.
   ===================================================================== */

.methodology-pillar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 30px);
}
.methodology-pillar .mp-head {
  max-width: 60ch;
  margin: 0 0 40px;
}
.methodology-pillar .mp-kicker {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}
.methodology-pillar h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
}
.methodology-pillar .mp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 72px);
  align-items: start;
}
.methodology-pillar .mp-body {
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.methodology-pillar .mp-lead {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 22px;
  font-weight: 400;
  max-width: 38ch;
}
.methodology-pillar .mp-body p {
  margin: 0 0 20px;
  max-width: 42ch;
}
.methodology-pillar .mp-body p:last-child { margin-bottom: 0; }
.methodology-pillar .mp-byline {
  font-size: 13.5px !important;
  line-height: 1.55;
  color: var(--ink-faint);
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  margin-top: 26px;
}
.methodology-pillar .mp-byline a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 600;
  white-space: nowrap;
}

.methodology-pillar .mp-principles {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 26px;
  box-shadow: var(--shadow-xs);
}
.methodology-pillar .mp-principles-label {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.methodology-pillar .mp-principles dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.methodology-pillar .mp-principles dl > div {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 4px;
}
.methodology-pillar .mp-principles dt {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink-ghost);
  font-size: 14px;
  padding-top: 2px;
  font-family: var(--font);
}
.methodology-pillar .mp-principles dd {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.methodology-pillar .mp-principles dd b {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 860px) {
  .methodology-pillar .mp-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* =====================================================================
   MASTHEAD FOOTER — journal-style footer (Phase 5)
   Drops the old .site-footer class on the homepage footer entirely.
   Existing .site-footer rules continue to apply on other pages until
   they are migrated.
   ===================================================================== */

.site-mast {
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.site-mast .mast-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 30px) clamp(28px, 4vw, 48px);
}
.site-mast .mast-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: clamp(36px, 5vw, 64px);
  margin-bottom: 40px;
}
.site-mast .mast-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.site-mast .mast-brand .brand {
  font-size: 22px;
  letter-spacing: -.025em;
}
.site-mast .mast-brand .brand .mark {
  width: 32px; height: 32px;
  margin-right: 10px;
}
.site-mast .mast-edition {
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.site-mast .mast-credit {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-faint);
  margin: 6px 0 0;
}
.site-mast .mast-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.site-mast .mast-nav-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.site-mast .mast-nav-label {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 6px;
}
.site-mast .mast-nav a {
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  width: fit-content;
}
.site-mast .mast-nav a:hover {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.site-mast .mast-rule {
  border: 0;
  border-top: 1px solid var(--line-soft);
  margin: 0 0 30px;
}
.site-mast .mast-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: 36px;
}
.site-mast .mast-disclosure-label {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px;
}
.site-mast .mast-bottom p {
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 48ch;
}
.site-mast .mast-citation i {
  font-style: italic;
  color: var(--ink);
}
.site-mast .mast-copyright {
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--ink-faint);
  border-top: 1px solid var(--line-soft);
  padding-top: 22px;
  margin: 0;
}
@media (max-width: 860px) {
  .site-mast .mast-top { grid-template-columns: 1fr; gap: 32px; }
  .site-mast .mast-bottom { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 540px) {
  .site-mast .mast-nav { grid-template-columns: 1fr 1fr; gap: 22px; }
}

/* =====================================================================
   PRICING RATE-CARD — editorial pricing block (Phase 6, 2026-05-26)
   Replaces the centered "Simple, honest pricing." card pair with a
   publication-style rate card: left-aligned kicker, serif H2, two
   bordered tiers in the same 12px / 1px / shadow-xs language as the
   worked example and methodology pillar.
   ===================================================================== */

.rate-card {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 30px);
}
.rate-card .rc-head {
  max-width: 62ch;
  margin: 0 0 36px;
}
.rate-card .rc-kicker {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}
.rate-card h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 26ch;
}
.rate-card .rc-sub {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 62ch;
}

.rate-card .rc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.rate-card .rc-tier {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
}
.rate-card .rc-tier-head {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 20px;
}
.rate-card .rc-tier-label {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 6px;
}
.rate-card .rc-tier-tagline {
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}
.rate-card .rc-price {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 22px;
  line-height: 1.1;
}
.rate-card .rc-price span {
  display: block;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-faint);
  margin-top: 6px;
  letter-spacing: 0;
}
.rate-card .rc-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rate-card .rc-features li {
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  padding-left: 18px;
  position: relative;
}
.rate-card .rc-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 7px;
  height: 1px;
  background: var(--ink-ghost);
}
.rate-card .rc-note {
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--ink-faint);
  line-height: 1.5;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 720px) {
  .rate-card .rc-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   FAQ — editorial reader-questions block (Phase 6, 2026-05-26)
   Replaces the rounded summary cards with a journal-style rule list
   and custom +/− glyph. The evidence question now points to the
   Methods snapshot rather than restating coverage counts.
   ===================================================================== */

.faq-edit {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 30px);
}
.faq-edit .fq-head {
  max-width: 62ch;
  margin: 0 0 28px;
}
.faq-edit .fq-kicker {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}
.faq-edit h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 22ch;
}
.faq-edit .fq-sub {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 62ch;
}
.faq-edit .fq-sub a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.faq-edit .fq-list {
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.faq-edit .fq-item {
  border-bottom: 1px solid var(--line);
}
.faq-edit .fq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.005em;
  transition: color .15s ease;
}
.faq-edit .fq-item > summary::-webkit-details-marker { display: none; }
.faq-edit .fq-item > summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-52%);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-faint);
  line-height: 1;
  transition: color .15s ease;
}
.faq-edit .fq-item[open] > summary::after {
  content: "−";
  color: var(--ink);
}
.faq-edit .fq-item > summary:hover { color: var(--accent-deep); }
.faq-edit .fq-item > summary:hover::after { color: var(--accent-deep); }
.faq-edit .fq-answer {
  padding: 2px 44px 24px 0;
  max-width: 72ch;
}
.faq-edit .fq-answer p {
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.faq-edit .fq-answer p:last-child { margin-bottom: 0; }
.faq-edit .fq-answer a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.faq-edit .fq-foot {
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--ink-faint);
  margin: 26px 0 0;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.faq-edit .fq-foot a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* =====================================================================
   FINAL NOTE — editorial close (Phase 6, 2026-05-26)
   Replaces the rounded "Your stack deserves science." card with a
   sober statement-style close. No App Store pill badge, no italic
   teal accent — the only italic accent on the page lives in the hero.
   ===================================================================== */

.final-note {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 30px) clamp(40px, 6vw, 80px);
  border-top: 1px solid var(--line-soft);
}
.final-note .fn-rule {
  display: block;
  width: 44px;
  height: 1px;
  background: var(--ink-ghost);
  margin: 0 0 26px;
}
.final-note .fn-kicker {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}
.final-note h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 26ch;
}
.final-note .fn-sub {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 62ch;
}
.final-note .btn-row {
  margin-top: 30px;
  gap: 10px;
}

/* =====================================================================
   METHODOLOGY PAGE — editorial harmonization (Phase 7A, 2026-05-26)
   Section pattern reused across /methodology: left-aligned kicker,
   serif H2, body lead, then one or more bordered panels with figure
   rows, bullet rules, or a five-cell tier grid. Mirrors the homepage
   editorial grammar exactly so a visitor crossing from /#methodology-
   pillar to /methodology lands in the same publication.
   ===================================================================== */

.md-section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 30px);
}
.md-section .md-head {
  max-width: 62ch;
  margin: 0 0 32px;
}
.md-section .md-kicker {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}
.md-section h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 26ch;
}
.md-section .md-lead {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 62ch;
}

.md-section .md-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
  padding: clamp(24px, 3vw, 32px);
  margin: 0 0 18px;
  max-width: 760px;
}
.md-section .md-panel:last-of-type { margin-bottom: 0; }
.md-section .md-panel-label {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.md-section .md-panel-prose {
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 64ch;
}
.md-section .md-panel-prose:last-child { margin-bottom: 0; }
.md-section .md-panel-prose a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.md-section .md-panel-prose strong {
  color: var(--ink);
  font-weight: 600;
}
.md-section .md-panel-note {
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.55;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.md-section .md-figures {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.md-section .md-figures > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}
.md-section .md-figures > div:first-child { border-top: 0; padding-top: 0; }
.md-section .md-figures > div:last-child { padding-bottom: 0; }
.md-section .md-figures dt {
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--ink-soft);
  font-weight: 500;
  margin: 0;
}
.md-section .md-figures dd {
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.md-section .md-figures dd strong {
  font-weight: 700;
  color: var(--ink);
}

.md-section .md-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.md-section .md-bullets li {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  padding-left: 20px;
  position: relative;
}
.md-section .md-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 8px;
  height: 1px;
  background: var(--ink-ghost);
}
.md-section .md-bullets li strong {
  color: var(--ink);
  font-weight: 600;
}
.md-section .md-bullets li a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.md-section .md-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.md-section .md-tier {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
  padding: 22px 24px 24px;
}
.md-section .md-tier h3 {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.008em;
  line-height: 1.35;
  color: var(--ink);
  margin: 14px 0 8px;
}
.md-section .md-tier p {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.md-section .md-tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 11px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}
.md-section .md-tier-pill.is-strong {
  background: color-mix(in srgb, var(--synergy) 16%, var(--surface));
  color: var(--synergy-deep);
}
.md-section .md-tier-pill.is-moderate {
  background: color-mix(in srgb, var(--warn) 16%, var(--surface));
  color: var(--warn);
}
.md-section .md-tier-pill.is-emerging {
  background: var(--surface-2);
  color: var(--ink-soft);
}
.md-section .md-tier-pill.is-limited {
  background: var(--surface-2);
  color: var(--ink-faint);
}
.md-section .md-tier-pill.is-traditional {
  background: var(--surface-2);
  color: var(--ink-faint);
  font-style: italic;
}
.md-section .md-tier-pill.is-synergy {
  background: color-mix(in srgb, var(--synergy) 16%, var(--surface));
  color: var(--synergy-deep);
}
.md-section .md-tier-pill.is-caution,
.md-section .md-tier-pill.is-timing {
  background: color-mix(in srgb, var(--warn) 16%, var(--surface));
  color: var(--warn);
}
.md-section .md-tier-pill.is-conflict {
  background: color-mix(in srgb, #9B3C32 14%, var(--surface));
  color: #8A332B;
}
.md-section .md-tier-pill.is-contra {
  background: color-mix(in srgb, #9B3C32 22%, var(--surface));
  color: #7A2C25;
  font-weight: 700;
}
.md-section .md-tier-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.md-section .md-tier-num {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ink-faint);
  line-height: 1;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.md-section .md-tier-num.is-positive { color: var(--synergy-deep); }
.md-section .md-tier-num.is-warn { color: var(--warn); }
.md-section .md-tier-num.is-danger { color: #9B3C32; }

/* Breadcrumb above editorial heroes on deep-dive pages */
.md-breadcrumb {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px clamp(20px, 5vw, 30px) 0;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.md-breadcrumb a {
  color: var(--ink-faint);
  text-decoration: none;
  transition: color .15s ease;
}
.md-breadcrumb a:hover {
  color: var(--accent-deep);
}
.md-breadcrumb .sep {
  display: inline-block;
  margin: 0 10px;
  color: var(--ink-ghost);
  font-weight: 400;
}
.md-breadcrumb .current {
  color: var(--ink);
}

/* Horizontal bar chart for tier distributions on the evidence-tiers deep dive */
.md-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 0 0;
}
.md-bar {
  display: grid;
  grid-template-columns: 92px 1fr 48px;
  align-items: center;
  gap: 14px;
}
.md-bar-label {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
}
.md-bar-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: var(--surface-2);
  overflow: hidden;
}
.md-bar-fill {
  position: absolute;
  inset: 0;
  border-radius: 5px;
}
.md-bar-count {
  font-family: var(--font);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  text-align: right;
  font-weight: 600;
}

/* Editorial code block, used inside .md-panel for deep-dive pages */
.md-code {
  margin: 0;
  padding: 18px 20px;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  overflow: auto;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.65;
}
.md-code .c { color: var(--ink-faint); font-style: italic; }
.md-code .n { color: var(--ink); font-weight: 600; }
.md-code .ok { color: var(--synergy-deep); font-weight: 600; }
.md-code .w { color: var(--warn); font-weight: 600; }
.md-code .d { color: #9B3C32; font-weight: 600; }

.md-section .md-deeplink {
  margin: 22px 0 0;
  max-width: 62ch;
}
.md-section .md-deeplink a {
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.md-section .md-deeplink span {
  display: block;
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 6px;
  line-height: 1.5;
}

/* ============================================================
   Editorial grammar additions for generator-produced pages.
   .editorial-page wraps each generated <main> and constrains
   the width to match index.html / methodology.html.
   ============================================================ */

main.editorial-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

main.editorial-page > .md-breadcrumb {
  max-width: 760px;
  margin: 24px auto 0;
}

/* Profile pill band sits below the editorial hero on entity pages */
.profile-pill-band {
  max-width: 760px;
  margin: 4px auto 28px;
  padding: 0;
}
.profile-pill-band .profile-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

/* Tables used in directory / featured / browse sections */
.md-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font);
  font-size: 14.5px;
  margin: 0;
}
.md-table thead th {
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  padding: 0 14px 10px 0;
  vertical-align: bottom;
}
.md-table tbody td {
  border-bottom: 1px solid var(--line-soft);
  padding: 14px 14px 14px 0;
  vertical-align: top;
  color: var(--ink);
  line-height: 1.5;
}
.md-table tbody tr:last-child td {
  border-bottom: 0;
}
.md-table-tier { white-space: nowrap; }
.md-table-title a {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent-deep) 50%, transparent);
}
.md-table-title a:hover {
  text-decoration-color: var(--accent-deep);
}
.md-table-summary {
  color: var(--ink-soft, var(--ink-faint));
  font-size: 14px;
}
.md-table-count,
.md-table-meta {
  color: var(--ink-faint);
  font-size: 13px;
  white-space: nowrap;
}

/* Bar chart used inside the interaction checker landing */
.md-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.md-bar-label {
  width: 132px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-faint);
}
.md-bar-track {
  flex: 1;
  height: 8px;
  background: var(--line-soft);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.md-bar-fill {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: var(--accent-deep);
}
.md-bar-fill--synergy { background: var(--synergy-deep); }
.md-bar-fill--caution,
.md-bar-fill--timingsensitive { background: var(--warn); }
.md-bar-fill--conflict,
.md-bar-fill--contraindicated { background: #9B3C32; }
.md-bar-count {
  width: 60px;
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}

/* Per-study citation list used on claim deep dives */
.md-study-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.md-study {
  border-top: 1px solid var(--line-soft);
  padding: 16px 0 0;
}
.md-study:first-child {
  border-top: 0;
  padding-top: 0;
}
.md-study-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 4px;
}
.md-study-type {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-deep);
}
.md-study-meta {
  font-size: 12.5px;
  color: var(--ink-faint);
}
.md-study-title {
  margin: 0 0 6px;
  font-size: 15.5px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink);
}
.md-study-title a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent-deep) 50%, transparent);
}
.md-study-finding {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft, var(--ink));
  line-height: 1.6;
}
.md-study--empty {
  color: var(--ink-faint);
  font-style: italic;
}
.md-source-pmid,
.md-source-attr {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-faint);
}
.md-source-pmid { margin-left: 4px; }
.md-source-attr { margin-left: 6px; }

/* Per-row source disclosure on pair pages */
.md-sources {
  margin-top: 10px;
  border-top: 1px dashed var(--ink-ghost);
  padding-top: 10px;
}
.md-sources summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  list-style: none;
  padding: 4px 0;
}
.md-sources summary::-webkit-details-marker { display: none; }
.md-sources[open] summary { color: var(--accent-deep); }
.md-source-list {
  margin: 10px 0 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.55;
}

/* Related-pair / hub / goal lists across pair and claim pages */
.md-rel-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.md-rel-list li {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  border-top: 1px dashed var(--ink-ghost);
  padding: 10px 0 0;
}
.md-rel-list li:first-child {
  border-top: 0;
  padding-top: 0;
}
.md-rel-list a {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent-deep) 50%, transparent);
}
.md-rel-type {
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
}

/* Free interaction checker form, in editorial chrome */
.md-checker-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 4px 0 0;
}
.md-checker-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font);
}
.md-checker-field > span {
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
}
.md-checker-field select {
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  font-family: var(--font);
}
.md-checker-form button {
  align-self: flex-start;
}
.md-checker-msg {
  margin: 0;
  font-size: 14px;
  min-height: 1em;
  color: var(--ink-faint);
}
.md-checker-msg strong { color: var(--ink); }
.md-checker-msg a {
  color: var(--accent-deep);
  font-weight: 600;
}

/* ============================================================
   Editorial widgets used on /research index
   (ed-*) — palette is locked to ink + teal + synergy + warn.
   No cat-* rainbow, no terracotta brand.
   ============================================================ */

/* Library composition: single segmented bar + figure-list legend */
.ed-comp-bar {
  display: flex;
  width: 100%;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
  background: color-mix(in srgb, var(--line) 80%, var(--surface));
  margin: 4px 0 16px;
  border: 1px solid var(--line);
}
.ed-comp-seg { display: block; height: 100%; }
.ed-comp-seg + .ed-comp-seg { border-left: 1px solid var(--bg); }
.ed-comp-seg--meta          { background: var(--accent-deep); }
.ed-comp-seg--rct           { background: var(--accent); }
.ed-comp-seg--review        { background: var(--synergy-deep); }
.ed-comp-seg--observational { background: var(--ink-soft); }
.ed-comp-seg--mechanistic   { background: var(--ink-faint); }
.ed-comp-seg--other         { background: color-mix(in srgb, var(--ink-faint) 45%, var(--surface)); }
.ed-comp-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 1px;
}
.ed-comp-dot--meta          { background: var(--accent-deep); }
.ed-comp-dot--rct           { background: var(--accent); }
.ed-comp-dot--review        { background: var(--synergy-deep); }
.ed-comp-dot--observational { background: var(--ink-soft); }
.ed-comp-dot--mechanistic   { background: var(--ink-faint); }
.ed-comp-dot--other         { background: color-mix(in srgb, var(--ink-faint) 45%, var(--surface)); }

/* Featured pull-quote inside an md-panel */
.ed-feature-quote {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
  margin: 4px 0 12px;
  padding-left: 14px;
  border-left: 2px solid var(--accent-deep);
}
.ed-feature-attr {
  font-size: 13.5px;
  color: var(--ink-faint);
  margin: 0 0 16px;
  line-height: 1.5;
}
.ed-feature-attr a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent-deep) 45%, transparent);
}
.ed-feature-attr-meta { color: var(--ink-faint); }

/* Most-studied ranking list, rendered with md-figures */
.ed-rank-figures dt a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent-deep) 45%, transparent);
}
.ed-list-meta {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  margin-left: 10px;
}

/* Interaction network SVG, ink + teal palette */
.ed-net-canvas {
  background: color-mix(in srgb, var(--accent-deep) 4%, var(--surface));
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  margin: 4px 0 14px;
}
.ed-net-svg { display: block; width: 100%; height: auto; }
.ed-net-edge {
  stroke: color-mix(in srgb, var(--ink-faint) 50%, transparent);
  stroke-width: 1;
}
.ed-net-node {
  fill: var(--surface);
  stroke: var(--ink-soft);
  stroke-width: 1.25;
}
.ed-net-hub {
  fill: var(--accent-deep);
  stroke: var(--accent-deep);
}
.ed-net-label {
  font-family: var(--font);
  font-size: 10.5px;
  fill: var(--ink-faint);
  font-weight: 500;
}
.ed-net-hub-label {
  font-family: var(--font);
  font-size: 12px;
  fill: var(--on-accent);
  font-weight: 700;
}

/* Atlas dot mosaic (uniform ink dots, sized by source count) */
.ed-atlas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px 22px;
  margin: 4px 0 0;
}
.ed-atlas-band {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ed-atlas-band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 4px;
}
.ed-atlas-band-name {
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
}
.ed-atlas-band-count {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
}
.ed-atlas-band-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ed-atlas-dot {
  display: block;
  border-radius: 50%;
  background: var(--ink-soft);
  transition: background-color .12s ease, transform .12s ease;
}
.ed-atlas-dot:hover {
  background: var(--accent-deep);
  transform: scale(1.15);
}
.ed-atlas-dot--sm { width: 7px; height: 7px; }
.ed-atlas-dot--md { width: 10px; height: 10px; }
.ed-atlas-dot--lg { width: 13px; height: 13px; }
.ed-atlas-dot--xl { width: 17px; height: 17px; }
.ed-atlas-band--prescription .ed-atlas-dot { background: var(--accent); }
.ed-atlas-band--prescription .ed-atlas-dot:hover { background: var(--accent-deep); }

/* Goal tiles (editorial — quiet buttons that filter the directory) */
.ed-goal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 4px 0 0;
}
.ed-goal-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: border-color .12s ease, background-color .12s ease;
}
.ed-goal-tile:hover {
  border-color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent-deep) 5%, var(--surface));
}
.ed-goal-tile-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ed-goal-tile-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.ed-goal-tile-count {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--accent-deep);
  font-weight: 500;
}
.ed-goal-tile-samples {
  font-size: 12.5px;
  color: var(--ink-faint);
  line-height: 1.45;
}

/* Editorial filter button row (replaces research-filter-row in directory) */
.ed-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ed-filter-row button {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  padding: 8px 14px;
  border-radius: 6px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.003em;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
.ed-filter-row button:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
}
.ed-filter-row button.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* Live search results panel inside the directory md-panel */
.ed-live-results {
  margin-top: 12px;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}

/* ============================================================
   Entity profile editorial body
   Kicker + serif H2 inside each profile-section. The card frame
   (border + padding) stays for layout; the typography is the
   editorial pair you see on methodology.html.
   ============================================================ */
.profile-section-head {
  margin: 0 0 14px;
}
.profile-section-kicker {
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 8px;
}
.profile-section-head h2 + .profile-section-sub,
.profile-section-head .profile-section-sub {
  margin: 8px 0 0;
  color: var(--ink-faint);
  font-size: 13.5px;
  line-height: 1.5;
}

/* Editorial palette for related-claim / goal-hub aside cards */
.profile-side-panel--research {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.profile-aside-blurb {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin: -6px 0 4px;
  line-height: 1.5;
}
.profile-aside-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile-aside-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-faint);
  border-radius: 0 6px 6px 0;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s ease, background-color .12s ease;
}
.profile-aside-card:hover {
  border-color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink-faint) 6%, var(--surface));
}
.profile-aside-card--accent {
  border-left-color: var(--accent-deep);
}
.profile-aside-card--accent:hover {
  background: color-mix(in srgb, var(--accent-deep) 6%, var(--surface));
}
.profile-aside-card-kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.profile-aside-card--accent .profile-aside-card-kicker {
  color: var(--accent-deep);
}
.profile-aside-card-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

/* Source-status badges, recolored to editorial (teal + ink, no rainbow) */
.source-badge--source-linked {
  background: color-mix(in srgb, var(--accent-deep) 10%, var(--surface));
  color: var(--accent-deep);
}
.source-badge--needs-review,
.source-badge--pmid-unconfirmed,
.source-badge--needs-source {
  background: color-mix(in srgb, var(--ink-faint) 12%, var(--surface));
  color: var(--ink-soft);
}
.source-badge--kind,
.source-badge--origin {
  background: transparent;
  color: var(--ink-faint);
  border: 1px solid var(--line);
}

/* Quiet down the source-review notice (was warn-amber on needs-review) */
.source-review-notice--needs-review,
.source-review-notice--needs-source {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
}
.source-review-notice--source-linked {
  border-color: color-mix(in srgb, var(--accent-deep) 22%, var(--line));
  background: color-mix(in srgb, var(--accent-deep) 5%, var(--surface));
}

/* Source-item warn border off; everything looks like the same publication */
.source-item--needs-review,
.source-item--pmid-unconfirmed,
.source-item--needs-source {
  border-color: var(--line-soft);
}

/* Profile compare link now a plain underlined editorial link */
.profile-compare-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent-deep) 50%, transparent);
}
.profile-compare-link svg { display: none; }

/* ============================================================
   Editorial entity directory card (replaces .research-card on /research)
   ============================================================ */
.research-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.ed-entity-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  transition: border-color .15s ease, transform .15s ease;
}
.ed-entity-card:hover {
  border-color: var(--accent-deep);
  transform: translateY(-1px);
}
.ed-entity-card-kicker {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}
.ed-entity-card-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
}
.ed-entity-card-title a {
  color: inherit;
  text-decoration: none;
}
.ed-entity-card-title a:hover {
  color: var(--accent-deep);
}
.ed-entity-card-summary {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 2px 0 6px;
}
.ed-entity-card-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: auto 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.ed-entity-card-figures > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ed-entity-card-figures dt {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
}
.ed-entity-card-figures dd {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

/* ============================================================
   Editorial interaction (pair) card for /research/interactions
   Severity palette is locked to: synergy (teal-green), warn (amber),
   danger (deep red), neutral (ink). No rainbow.
   ============================================================ */
.ed-pair-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.ed-pair-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  transition: border-color .15s ease;
  scroll-margin-top: 88px;
}
.ed-pair-card:hover {
  border-color: var(--ink-soft);
}
.ed-pair-card:target,
.ed-pair-card.is-anchor-target {
  border-color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent-deep) 4%, var(--surface));
}
.ed-pair-card-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  margin: 0;
}
.ed-pair-card-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
}
.ed-pair-card-title a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent-deep) 40%, transparent);
}
.ed-pair-card-title a:hover { color: var(--accent-deep); }
.ed-pair-card-plus {
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink-faint);
  margin: 0 2px;
}
.ed-pair-card-summary {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.ed-pair-card-evidence {
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-faint);
  font-weight: 600;
}
.ed-pair-card-details {
  margin-top: 2px;
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
}
.ed-pair-card-details summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  list-style: none;
}
.ed-pair-card-details summary::-webkit-details-marker { display: none; }
.ed-pair-card-details summary::after {
  content: " +";
  color: var(--ink-faint);
}
.ed-pair-card-details[open] summary::after { content: " –"; }
.ed-pair-card-detail-body {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.ed-pair-card-detail-body p { margin: 0; }
.ed-pair-card-detail-label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
  margin-top: 4px;
}
.ed-pair-card-detail-body .source-list { margin-top: 8px; }

/* Editorial severity pills (synergy / warn / danger / neutral) */
.ed-sev-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 3px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.15;
  border: 1px solid transparent;
}
.ed-sev-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.ed-sev-pill.is-ghost {
  background: transparent;
  color: var(--ink-faint);
  border-color: var(--line);
}
.ed-sev-pill.is-ghost .dot { display: none; }
.ed-sev-pill--synergy {
  background: color-mix(in srgb, var(--synergy-deep) 10%, var(--surface));
  color: var(--synergy-deep);
}
.ed-sev-pill--warn {
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  color: color-mix(in srgb, var(--warn) 78%, var(--ink));
}
.ed-sev-pill--danger {
  background: color-mix(in srgb, #9B3C32 10%, var(--surface));
  color: #9B3C32;
}
.ed-sev-pill--neutral {
  background: color-mix(in srgb, var(--ink-faint) 10%, var(--surface));
  color: var(--ink-soft);
}

/* Editorial severity distribution bar */
.ed-sev-bar {
  display: flex;
  width: 100%;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  margin: 4px 0 14px;
  background: color-mix(in srgb, var(--line) 80%, var(--surface));
}
.ed-sev-bar-seg { display: block; height: 100%; }
.ed-sev-bar-seg + .ed-sev-bar-seg { border-left: 1px solid var(--bg); }
.ed-sev-bar-seg--danger  { background: #9B3C32; }
.ed-sev-bar-seg--warn    { background: var(--warn); }
.ed-sev-bar-seg--neutral { background: var(--ink-soft); }
.ed-sev-bar-seg--synergy { background: var(--synergy-deep); }
.ed-sev-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 1px;
}
.ed-sev-dot--danger  { background: #9B3C32; }
.ed-sev-dot--warn    { background: var(--warn); }
.ed-sev-dot--neutral { background: var(--ink-soft); }
.ed-sev-dot--synergy { background: var(--synergy-deep); }

.ed-filter-label {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
  margin: 0 0 6px;
}

/* =====================================================================
   MAGIC LAYER (2026-05-26): typographic illumination, living specimen
   cards, margin footnotes, breathing atmosphere. Site-wide where the
   markup supports it. Respects prefers-reduced-motion throughout.
   ===================================================================== */

:root {
  --ornament-ink: color-mix(in srgb, var(--ink-faint) 70%, transparent);
  --grain-opacity: .04;
  --stamp-ink: var(--brand-deep);
}

/* ---- 1. Typographic illumination ----
   Old-style numerals + ligatures in display serifs, small-caps in the
   editorial label/kicker family. All opt-in via existing class names so
   nothing else on the page shifts. */

.editorial-hero h1,
.statement-mast p,
.we-title,
.mp-head h2,
.ia-head h2,
.ms-head h2,
.rc-head h2,
.fq-head h2,
.ri-head h2,
.we-head h2,
.final-note h2,
.mast-citation p:last-child {
  font-feature-settings: "onum" 1, "liga" 1, "dlig" 1, "kern" 1;
}

.eh-meta,
.eh-byline,
.ms-caption,
.ms-col h3,
.ms-kicker,
.ia-kicker,
.we-kicker,
.we-meta-label,
.mp-kicker,
.mp-principles-label,
.rc-kicker,
.rc-tier-label,
.fq-kicker,
.ri-kicker,
.ri-meta,
.fn-kicker,
.sm-foot,
.mast-disclosure-label,
.mast-nav-label {
  font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1;
  letter-spacing: .16em;
}

/* Drop cap — opt-in via .has-drop-cap on the paragraph that should bloom.
   Uses the serif italic accent to echo the hero's italic word. */
.has-drop-cap::first-letter {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  float: left;
  font-size: 4.4em;
  line-height: .86;
  padding: .04em .14em 0 0;
  margin: .12em .06em -.06em -.04em;
  color: var(--accent-deep);
  font-feature-settings: "onum" 1, "dlig" 1, "liga" 1;
}
@media (max-width: 640px) {
  .has-drop-cap::first-letter {
    font-size: 3.6em;
    margin: .10em .06em -.04em -.02em;
  }
}

/* Fleuron divider — overrides the existing flat horizontal rules so the
   ornament shows everywhere those classes already appear. */
.sm-rule,
.fn-rule {
  display: block;
  width: auto;
  height: auto;
  background: transparent;
  margin: 0 auto 26px;
  text-align: center;
  font-family: var(--font-serif);
  color: var(--ornament-ink);
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0;
}
.sm-rule::before,
.fn-rule::before {
  content: "❦";
  display: inline-block;
  font-style: italic;
  transform: translateY(-1px);
}

/* Asterism between the major body sections of the worked example. */
.we-rule {
  display: block;
  border: 0;
  width: auto;
  height: auto;
  background: transparent;
  margin: 26px auto 24px;
  text-align: center;
  font-family: var(--font-serif);
  color: var(--ornament-ink);
  font-size: 16px;
  letter-spacing: .9em;
  line-height: 1;
}
.we-rule::before {
  content: "⁂";
  display: inline-block;
  letter-spacing: 0;
}

/* Letterpress underline for the hero's italic accent word.
   Replaces flat color with a baseline-aligned rule that looks set, not styled. */
.editorial-hero h1 .eh-accent {
  background-image: linear-gradient(
    transparent 0 88%,
    color-mix(in srgb, var(--accent-deep) 38%, transparent) 88% 96%,
    transparent 96%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 .04em .06em;
}

/* ---- 2. Living specimen card ----
   Paper grain + cursor-following tilt + a "VERIFIED" press stamp.
   Tilt is wired by JS reading [data-tilt]; grain and stamp are CSS-only. */

[data-tilt] {
  transform-style: preserve-3d;
  transition: transform .42s var(--ease);
  will-change: transform;
}

[data-grain] {
  position: relative;
  isolation: isolate;
}
[data-grain]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .12  0 0 0 0 .10  0 0 0 0 .06  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  mix-blend-mode: multiply;
  border-radius: inherit;
}
[data-grain] > * { position: relative; z-index: 1; }
@media (prefers-color-scheme: dark) {
  [data-grain]::after {
    mix-blend-mode: screen;
    opacity: .03;
  }
}

/* Press stamp — debossed mark in the upper-right of the specimen.
   Rotated, low ink, faintly bleeding into the paper. */
.press-stamp {
  position: absolute;
  top: clamp(20px, 3vw, 32px);
  right: clamp(22px, 3.4vw, 40px);
  transform: rotate(-8deg);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--stamp-ink) 78%, transparent);
  border: 1.8px solid color-mix(in srgb, var(--stamp-ink) 55%, transparent);
  padding: 8px 12px 6px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 3;
  line-height: 1.1;
  text-align: center;
  opacity: .82;
  background: transparent;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--stamp-ink) 10%, transparent),
    inset 0 0 8px color-mix(in srgb, var(--stamp-ink) 14%, transparent);
  /* Tiny baseline drop so the stamp reads as pressed onto the page. */
  filter: drop-shadow(0 .5px 0 color-mix(in srgb, var(--surface) 55%, transparent));
}
.press-stamp small {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .26em;
  margin-top: 3px;
  opacity: .82;
}
@media (max-width: 640px) {
  .press-stamp {
    top: 14px;
    right: 14px;
    transform: rotate(-7deg) scale(.84);
    padding: 7px 10px 5px;
  }
}

/* ---- 3. Margin footnotes ----
   Superscript numeric marks in body copy. On wide viewports the notes
   float into the right gutter, aligned with their mark. On narrow
   viewports they collapse into a popover under the marked phrase. */

[data-margin-notes] {
  position: relative;
}

.mn-mark {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .68em;
  line-height: 0;
  vertical-align: super;
  margin-left: 2px;
  color: var(--accent-deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--accent-deep) 55%, transparent);
  padding: 0 2px;
  cursor: help;
  font-feature-settings: "onum" 1;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.mn-mark:hover,
.mn-mark:focus-visible,
.mn-mark.is-active {
  color: var(--brand-deep);
  background: color-mix(in srgb, var(--brand-deep) 8%, transparent);
  border-bottom-color: var(--brand-deep);
  outline: none;
}

.mn-notes {
  position: absolute;
  top: 0;
  left: calc(100% + 36px);
  width: 248px;
  pointer-events: none;
}
.mn-note {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 13px 16px 14px;
  background: color-mix(in srgb, var(--surface) 96%, var(--bg));
  border-left: 2px solid var(--accent);
  border-radius: 0 6px 6px 0;
  box-shadow: var(--shadow-xs);
  font-family: var(--font);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: auto;
}
.mn-note.is-active {
  opacity: 1;
  transform: translateX(0);
}
.mn-note .mn-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--ink-faint);
  margin-bottom: 5px;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  text-transform: uppercase;
}
.mn-note b {
  color: var(--ink);
  font-weight: 600;
}
.mn-note a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* On narrow viewports collapse the notes into an inline popover. */
@media (max-width: 1280px) {
  .mn-notes {
    position: static;
    width: 100%;
    margin-top: 14px;
    min-height: 0;
  }
  .mn-note {
    position: relative;
    width: 100%;
    margin-bottom: 8px;
    border-radius: 6px;
    border-left-width: 3px;
    opacity: 0;
    transform: translateY(-4px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    transition: opacity .2s var(--ease), max-height .25s var(--ease),
                padding .2s var(--ease), transform .2s var(--ease);
  }
  .mn-note.is-active {
    opacity: 1;
    transform: translateY(0);
    max-height: 320px;
    padding-top: 13px;
    padding-bottom: 14px;
  }
}

/* ---- 4. Breathing atmosphere ----
   The existing body::before holds the radial cream/teal tints. Add a
   very slow opacity sway so the page feels alive without drawing the
   eye. No transform on the fixed element (would break fixed-positioning
   on descendants in some engines). */

@keyframes magic-breath {
  0%, 100% { opacity: 1;   }
  50%      { opacity: .82; }
}

body::before {
  animation: magic-breath 96s ease-in-out infinite;
  will-change: opacity;
}

/* ---- Universal reduced-motion / fine-pointer guards ---- */

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  [data-tilt] { transform: none !important; transition: none; }
  .mn-note { transition: none; }
}

@media (hover: none) {
  /* Touch devices: kill tilt entirely, the press stamp is enough. */
  [data-tilt] { transform: none !important; }
}

/* =====================================================================
   SOFT GRAPHICS LAYER (2026-05-26 v2): dial back the editorial layer,
   add illustrative pill graphics. Overrides earlier magic-layer rules
   for the drop cap, fleurons, asterism, and footnote positioning.
   ===================================================================== */

/* ---- Dial-back overrides ---- */

/* Drop cap: smaller, neutral, less ornamental */
.has-drop-cap::first-letter {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: normal;
  float: left;
  font-size: 3.2em;
  line-height: .9;
  padding: .04em .12em 0 0;
  margin: .12em .04em -.02em -.02em;
  color: color-mix(in srgb, var(--ink) 78%, var(--accent-deep));
}
@media (max-width: 640px) {
  .has-drop-cap::first-letter {
    font-size: 2.8em;
    margin: .10em .04em -.02em 0;
  }
}

/* Soften the italic-accent underline so it doesn't read as a marker */
.editorial-hero h1 .eh-accent {
  background-image: linear-gradient(
    transparent 0 90%,
    color-mix(in srgb, var(--accent-deep) 22%, transparent) 90% 96%,
    transparent 96%
  );
}

/* Restore the worked-example mid-rule to a plain hairline */
.we-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--line);
  margin: 22px 0;
  border: 0;
  letter-spacing: 0;
}
.we-rule::before { content: none; }

/* Hide any leftover press stamps (HTML removal handles new pages, this
   guarantees no stale stamp anywhere) */
.press-stamp { display: none; }

/* ---- Soft section ornament (replaces fleuron on .sm-rule / .fn-rule) ---- */

.sm-rule,
.fn-rule {
  display: block;
  width: 72px;
  height: 16px;
  margin: 0 auto 26px;
  background: transparent;
  text-align: center;
  font-size: 0;
  line-height: 0;
}
.sm-rule::before,
.fn-rule::before {
  content: "";
  display: inline-block;
  width: 72px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 16' fill='none'><line x1='14' y1='8' x2='34' y2='8' stroke='%23A8A39A' stroke-width='0.9'/><line x1='38' y1='8' x2='58' y2='8' stroke='%23A8A39A' stroke-width='0.9'/><ellipse cx='8' cy='8' rx='6' ry='4.4' fill='%23E8A87C' opacity='0.78'/><circle cx='36' cy='8' r='5.2' fill='%234FA8C4' opacity='0.78'/><ellipse cx='64' cy='8' rx='6' ry='4.4' fill='%237B68C9' opacity='0.78'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform: none;
}

/* ---- Footnotes: popover-only (no margin-positioning) ---- */

.mn-notes {
  position: static;
  width: 100%;
  margin-top: 14px;
  min-height: 0;
  pointer-events: none;
}
.mn-note {
  position: relative;
  left: auto;
  top: auto !important;  /* JS may still write inline top; force off */
  width: 100%;
  margin-bottom: 0;
  border-radius: 6px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--surface) 96%, var(--bg));
  opacity: 0;
  transform: translateY(-4px);
  max-height: 0;
  padding: 0 16px;
  overflow: hidden;
  transition: opacity .2s var(--ease), max-height .25s var(--ease),
              padding .2s var(--ease), transform .2s var(--ease);
}
.mn-note.is-active {
  opacity: 1;
  transform: translateY(0);
  max-height: 320px;
  margin-bottom: 8px;
  padding: 13px 16px 14px;
}

/* ===================================================================
   1. HERO: 2-column layout, only when an .eh-art exists.
   Pages without art keep the original single-column behavior.
   =================================================================== */

.editorial-hero:has(.eh-art) {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.editorial-hero:has(.eh-art) .eh-text { min-width: 0; }
.editorial-hero .eh-art {
  position: relative;
  min-width: 0;
  width: 100%;
  align-self: center;
}

@media (max-width: 920px) {
  .editorial-hero:has(.eh-art) {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .editorial-hero .eh-art {
    order: -1;
    max-width: 460px;
    margin: 0 auto;
  }
}

/* ---- Pill constellation SVG ---- */

.pill-constellation {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Lines and pills: OPACITY-ONLY animations. The pill <g> elements use
   SVG `transform="translate(...)"` attributes for positioning; applying
   CSS transform here would override that and collapse every pill to the
   SVG origin. So we only animate opacity. */

.pill-constellation .pc-link {
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0;
  animation: pc-line-fade 0.9s var(--ease) forwards;
}
.pill-constellation .pc-link.is-syn  { stroke: #2C7A8C; animation-delay: 0.65s; }
.pill-constellation .pc-link.is-warn { stroke: #C98A2C; stroke-dasharray: 4 5; animation-delay: 0.85s; }
@keyframes pc-line-fade { to { opacity: 0.55; } }

.pill-constellation .pc-pill {
  opacity: 0;
  animation: pc-pill-fade 0.55s var(--ease) forwards;
}
@keyframes pc-pill-fade { to { opacity: 1; } }

.pill-constellation .pc-pill:nth-of-type(1)  { animation-delay: 0.00s; }
.pill-constellation .pc-pill:nth-of-type(2)  { animation-delay: 0.06s; }
.pill-constellation .pc-pill:nth-of-type(3)  { animation-delay: 0.12s; }
.pill-constellation .pc-pill:nth-of-type(4)  { animation-delay: 0.18s; }
.pill-constellation .pc-pill:nth-of-type(5)  { animation-delay: 0.24s; }
.pill-constellation .pc-pill:nth-of-type(6)  { animation-delay: 0.30s; }
.pill-constellation .pc-pill:nth-of-type(7)  { animation-delay: 0.36s; }
.pill-constellation .pc-pill:nth-of-type(8)  { animation-delay: 0.42s; }
.pill-constellation .pc-pill:nth-of-type(9)  { animation-delay: 0.48s; }
.pill-constellation .pc-pill:nth-of-type(10) { animation-delay: 0.54s; }

@media (hover: hover) {
  .pill-constellation .pc-pill { transition: filter .25s var(--ease); }
  .pill-constellation .pc-pill:hover { filter: brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .pill-constellation .pc-link { animation: none; opacity: 0.55; }
  .pill-constellation .pc-pill { animation: none; opacity: 1; }
}

/* Caption strip beneath the constellation */
.eh-art .eh-art-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding: 0 6px;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.eh-art .eh-art-caption span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.eh-art .eh-art-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.eh-art .eh-art-dot.is-syn  { background: var(--accent);    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.eh-art .eh-art-dot.is-warn { background: var(--warn);      box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }

/* ===================================================================
   2. COVERAGE STAT GLYPHS (Methods at a glance, Coverage column)
   =================================================================== */

/* ===================================================================
   3. WORKED-EXAMPLE PAIR GLYPH
   =================================================================== */

.we-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0 10px;
}
.we-pair-glyph {
  flex: 0 0 auto;
  width: 88px;
  height: 36px;
  display: block;
}
.we-title-row .we-title {
  margin: 0;
}

@media (max-width: 520px) {
  .we-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .we-pair-glyph {
    width: 76px;
    height: 32px;
  }
}

/* =====================================================================
   SUBTLE REVERT (2026-05-26 v3): the prior "magic" + soft-graphics layers
   were too loud. This block dials everything to the floor. Hero is single
   column, drop cap is gone, specimen tilt is gone, the only graphics
   that remain are the small stat glyphs, the worked-example pair glyph,
   and the 3-pill section ornament. Animations are scroll-fade + the
   already-quiet breathing tints. Nothing else.
   ===================================================================== */

/* Kill the hero pill constellation entirely if any markup still references it */
.editorial-hero .eh-art { display: none !important; }
.editorial-hero:has(.eh-art) {
  display: block;
  grid-template-columns: none;
  gap: 0;
}

/* Drop cap off */
.has-drop-cap::first-letter {
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  float: none;
  font-size: inherit;
  line-height: inherit;
  padding: 0;
  margin: 0;
  color: inherit;
}

/* Specimen tilt off (paper grain stays — it's barely perceptible) */
[data-tilt] {
  transform: none !important;
  transition: none !important;
  will-change: auto;
}

/* Press stamp already hidden; keep it hidden */
.press-stamp { display: none !important; }

/* Pull the breathing animation back so it's almost invisible */
@keyframes magic-breath {
  0%, 100% { opacity: 1;   }
  50%      { opacity: .92; }
}

/* Soften the italic accent baseline marker further */
.editorial-hero h1 .eh-accent {
  background-image: linear-gradient(
    transparent 0 91%,
    color-mix(in srgb, var(--accent-deep) 14%, transparent) 91% 96%,
    transparent 96%
  );
}

/* Make sure the small ornament between sections stays as the soft 3-pill
   glyph (already done above, but explicit so any later override won't undo) */

/* =====================================================================
   SITE HEADER MASTHEAD (2026-05-26 v4)
   Uses the downloaded hero mockup as layout inspiration while keeping the
   deployed site's NutriStack palette, icon mark, and existing navigation.
   ===================================================================== */

.site-header {
  position: relative;
  top: auto;
  z-index: 60;
  background: transparent;
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.site-header.scrolled {
  background: transparent;
  border-bottom-color: transparent;
}

.site-header .header-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px clamp(20px, 5vw, 30px) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 0 clamp(24px, 4vw, 44px);
}
.site-header .header-inner::before {
  content: "NSTK \00B7 01.2026\AIndependent supplement reference";
  grid-column: 1;
  grid-row: 1;
  white-space: pre-line;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.site-header .header-inner::after {
  content: "";
  grid-column: 1 / -1;
  grid-row: 2;
  height: 1px;
  margin-top: 26px;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--ink) 18%, transparent);
}

.site-header .brand {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0;
}
.site-header .brand .mark {
  width: 42px;
  height: 42px;
  margin-right: 13px;
  border-radius: 12px;
}
.site-header .brand b {
  color: var(--accent-deep);
  font-weight: 800;
}

.site-header .header-actions {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: grid;
  justify-items: end;
  gap: 8px;
}
.site-header .header-actions::before {
  content: "Edition 1.0\AReviewed May 26, 2026";
  white-space: pre-line;
  text-align: right;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.site-header .btn-app {
  min-height: 48px;
  padding: 12px 20px;
  border-radius: var(--pill);
  font-size: 15.5px;
  letter-spacing: 0;
}
.site-header .btn-app svg {
  width: 15px;
  height: 15px;
}

.site-header .site-nav {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: clamp(18px, 2.8vw, 31px);
  margin: 19px 0 0;
  padding-bottom: 9px;
}
.site-header .site-nav a {
  padding: 0;
  border-radius: 0;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.site-header .site-nav a:hover {
  color: var(--accent-deep);
  background: transparent;
}
.site-header .site-nav a[aria-current="page"] {
  color: var(--accent-deep);
}

.site-header + .editorial-hero {
  padding-top: clamp(30px, 4vw, 52px);
}

@media (max-width: 980px) {
  .site-header .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    padding-top: 16px;
    gap: 0 18px;
  }
  .site-header .header-inner::before,
  .site-header .header-actions::before,
  .site-header .site-nav {
    display: none;
  }
  .site-header .header-inner::after {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 15px;
  }
  .site-header .brand {
    grid-column: 1;
    justify-self: start;
    font-size: 20px;
  }
  .site-header .brand .mark {
    width: 30px;
    height: 30px;
    margin-right: 9px;
  }
  .site-header .header-actions {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .site-header .nav-menu {
    display: block;
  }
}

@media (max-width: 520px) {
  .site-header .header-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
  .site-header .brand {
    font-size: 19px;
  }
  .site-header .btn-app {
    padding: 8px 11px;
    font-size: 12px;
  }
}


/* ============================================================
   GLOWING SUPPLEMENT PROFILE  (pf-*)  — entity profile pages
   Centered cover + floating left rail that appears on scroll.
   Scoped to .pf-* and body.pf-body; safe alongside the rest.
   ============================================================ */
:root{
  --pf-mono: ui-monospace,"SF Mono","JetBrains Mono","Menlo",monospace;
  --pf-glow-1: rgba(44,122,140,.55);
  --pf-glow-2: rgba(91,174,137,.48);
  --pf-glow-3: rgba(194,96,60,.40);
  --pf-w: 760px;
  --pf-card-line: color-mix(in srgb, var(--accent) 14%, var(--line));
}
body.pf-body::before{ display:none !important; }

.pf-page{ position:relative; overflow:clip; }
.pf-wrap{ width:100%; max-width:var(--pf-w); margin:0 auto; padding:0 24px; }

.pf-reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.pf-reveal.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .pf-reveal{ opacity:1; transform:none; } }

.pf-cite{ font-size:.62em; line-height:0; vertical-align:super; font-weight:700; white-space:nowrap; }
.pf-cite a{ color:var(--accent-deep); text-decoration:none; padding:0 .5px; }
.pf-cite a:hover{ text-decoration:underline; }

/* HERO */
.pf-hero{ position:relative; text-align:center; padding:46px 24px 30px; isolation:isolate; }
.pf-hero-inner{ max-width:760px; margin:0 auto; }
.pf-hero-halo{ position:absolute; left:50%; top:90px; width:min(640px,82vw); height:340px; transform:translateX(-50%); z-index:-1; pointer-events:none; border-radius:50%;
  background:radial-gradient(50% 60% at 30% 38%, var(--pf-glow-1), transparent 70%),radial-gradient(46% 60% at 70% 52%, var(--pf-glow-2), transparent 72%),radial-gradient(40% 56% at 50% 92%, var(--pf-glow-3), transparent 76%);
  filter:blur(80px); opacity:.85; animation:pf-breathe 8s ease-in-out infinite; }
@keyframes pf-breathe{ 0%,100%{transform:translateX(-50%) scale(1);opacity:.8} 50%{transform:translateX(-50%) scale(1.08);opacity:.95} }
@media (prefers-reduced-motion: reduce){ .pf-hero-halo{ animation:none; } }
.pf-breadcrumb{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; font-size:13px; color:var(--ink-faint); margin-bottom:24px; }
.pf-breadcrumb a{ color:var(--ink-faint); text-decoration:none; }
.pf-breadcrumb a:hover{ color:var(--accent-deep); }
.pf-breadcrumb .sep{ color:var(--ink-ghost); }
.pf-breadcrumb .current{ color:var(--ink-soft); }
.pf-title{ font-size:clamp(48px,9vw,92px); line-height:.96; letter-spacing:-.035em; font-weight:620; color:var(--ink); margin:0; }
.pf-tagline{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; margin:18px 0 0; font-family:var(--pf-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.pf-tagline .dot{ width:6px;height:6px;border-radius:50%; background:var(--accent); box-shadow:0 0 9px rgba(44,122,140,.7); animation:pf-pulse 2.4s ease-in-out infinite; }
@keyframes pf-pulse{ 0%,100%{opacity:.55;transform:scale(.9)} 50%{opacity:1;transform:scale(1.15)} }
.pf-tagline .accent{ background:linear-gradient(96deg,var(--accent-deep),var(--accent),var(--brand)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; }
.pf-tagline .sep{ color:var(--ink-ghost); }
.pf-lead{ max-width:620px; margin:22px auto 0; font-size:clamp(17px,2.2vw,20px); line-height:1.55; color:var(--ink-soft); }
.pf-statband{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:30px auto 0; max-width:720px; }
a.pf-stat{ position:relative; flex:1 1 150px; min-width:140px; padding:16px 16px 14px; text-decoration:none; text-align:left; background:color-mix(in srgb,var(--surface) 84%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--pf-card-line); border-radius:16px; box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 16px 36px -28px rgba(44,122,140,.6); transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
a.pf-stat:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 24px 46px -26px rgba(44,122,140,.75); }
a.pf-stat::after{ content:"↗"; position:absolute; top:12px; right:13px; font-size:12px; color:var(--ink-ghost); opacity:0; transition:opacity .2s var(--ease); }
a.pf-stat:hover::after{ opacity:1; }
.pf-stat-k{ font-family:var(--pf-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.pf-stat-v{ font-size:23px; font-weight:600; color:var(--ink); margin-top:5px; letter-spacing:-.02em; display:flex; align-items:baseline; gap:6px; }
.pf-stat-v small{ font-size:12px; font-weight:500; color:var(--ink-faint); }
.pf-stat-dots{ letter-spacing:1.5px; font-size:12px; }
.pf-stat-dots.is-strong{ color:var(--synergy); }
.pf-stat-dots.is-moderate{ color:var(--accent); }
.pf-stat-dots.is-emerging{ color:var(--warn); }
.pf-stat-dots.is-limited{ color:var(--ink-faint); }
.pf-cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:28px 0 0; }
.pf-btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:13px; font-weight:560; font-size:15px; text-decoration:none; transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.pf-btn-primary{ background:linear-gradient(180deg,var(--accent),var(--accent-deep)); color:var(--on-accent); box-shadow:0 10px 26px -10px rgba(44,122,140,.7); }
.pf-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(44,122,140,.8); }
.pf-btn-ghost{ background:var(--surface); color:var(--ink); border:1px solid var(--pf-card-line); }
.pf-btn-ghost:hover{ transform:translateY(-2px); border-color:var(--accent); }

/* FLOATING LEFT RAIL */
.pf-rail{ position:fixed; top:128px; right:calc(50% + (var(--pf-w) / 2) + 28px); width:212px; z-index:40; opacity:0; transform:translateX(-10px); pointer-events:none; transition:opacity .4s var(--ease), transform .4s var(--ease); }
body.rail-on .pf-rail{ opacity:1; transform:none; pointer-events:auto; }
.pf-rail-home{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:560; color:var(--accent-deep); text-decoration:none; margin-bottom:14px; }
.pf-rail-home:hover{ text-decoration:underline; }
.pf-rail-title{ font-family:var(--pf-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 8px; }
.pf-rail ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; border-left:2px solid var(--line); }
.pf-rail a{ display:block; padding:6px 0 6px 14px; margin-left:-2px; border-left:2px solid transparent; font-size:13.5px; color:var(--ink-faint); text-decoration:none; transition:all .18s var(--ease); }
.pf-rail a:hover{ color:var(--ink); }
.pf-rail a.is-active{ color:var(--accent-deep); border-left-color:var(--accent); font-weight:600; }
@media (max-width:1199px){ .pf-rail{ display:none; } }

/* CONTENT */
.pf-body-content{ margin-top:6px; }
.pf-section{ scroll-margin-top:104px; margin-top:34px; }
.pf-shead{ margin-bottom:16px; }
.pf-kicker{ display:inline-flex; align-items:center; gap:8px; font-family:var(--pf-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); }
.pf-kicker .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px rgba(44,122,140,.7); }
.pf-h2{ font-size:clamp(23px,3.4vw,30px); font-weight:580; letter-spacing:-.02em; color:var(--ink); margin:7px 0 0; }
.pf-h2 .accent{ background:linear-gradient(96deg,var(--accent-deep),var(--accent),var(--brand-soft)); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:italic; }
.pf-sub{ color:var(--ink-faint); font-size:14.5px; margin:8px 0 0; }
.pf-prose{ font-size:16.5px; line-height:1.68; color:var(--ink-soft); }
.pf-prose b{ color:var(--ink); }

/* compact benefits / watch-for */
.pf-glance{ margin-top:30px; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 20px 50px -36px rgba(44,122,140,.5); }
.pf-glance-grid{ display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:600px){ .pf-glance-grid{ grid-template-columns:1fr; } }
.pf-gcol{ padding:18px 20px 20px; }
.pf-gcol.good{ background:linear-gradient(160deg,color-mix(in srgb,var(--synergy) 11%,var(--surface)),var(--surface)); }
.pf-gcol.warn{ background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 10%,var(--surface)),var(--surface)); border-left:1px solid var(--line); }
@media (max-width:600px){ .pf-gcol.warn{ border-left:0; border-top:1px solid var(--line); } }
.pf-gh{ display:flex; align-items:center; gap:9px; margin-bottom:12px; font-family:var(--pf-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; }
.pf-gcol.good .pf-gh{ color:var(--synergy-deep); }
.pf-gcol.warn .pf-gh{ color:var(--brand-deep); }
.pf-gh svg{ width:15px; height:15px; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.pf-gl{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.pf-gl li{ position:relative; padding-left:20px; font-size:14.5px; line-height:1.4; color:var(--ink); }
.pf-gl li svg{ position:absolute; left:0; top:2px; width:14px; height:14px; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.pf-gcol.good .pf-gl li svg{ stroke:var(--synergy-deep); }
.pf-gcol.warn .pf-gl li svg{ stroke:var(--brand-deep); }
.pf-gl em{ color:var(--ink-faint); font-style:normal; font-size:12.5px; }

/* verdict */
.pf-verdict{ position:relative; overflow:hidden; margin-top:30px; padding:20px 24px; border-radius:16px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,var(--surface)),var(--surface)); border:1px solid var(--pf-card-line); }
.pf-verdict-k{ font-family:var(--pf-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); }
.pf-verdict p{ margin:9px 0 0; font-size:16px; line-height:1.6; color:var(--ink); }

/* mechanism */
.pf-mech-core{ margin-top:16px; padding:20px 22px; border-radius:16px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),var(--surface)); border:1px solid var(--pf-card-line); }
.pf-mech-core .k{ font-family:var(--pf-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-deep); }
.pf-mech-core p{ margin:8px 0 0; font-size:16px; line-height:1.62; color:var(--ink); }
.pf-mech-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
@media (max-width:600px){ .pf-mech-facts{ grid-template-columns:1fr 1fr; } }
.pf-mfact{ padding:13px 14px; border-radius:11px; background:var(--surface-2); }
.pf-mfact .k{ font-family:var(--pf-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.pf-mfact .v{ font-size:13.5px; font-weight:540; color:var(--ink); margin-top:4px; line-height:1.32; }

/* dosing + protocol */
.pf-dose-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .pf-dose-grid{ grid-template-columns:1fr; } }
.pf-dose-tile{ padding:18px; border-radius:14px; background:var(--surface); border:1px solid var(--line); }
.pf-dose-tile .k{ font-family:var(--pf-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.pf-dose-tile .v{ font-size:19px; font-weight:580; color:var(--ink); margin-top:6px; }
.pf-dose-note{ margin-top:13px; font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
.pf-protocol{ margin-top:16px; padding:18px 20px; border-radius:14px; background:color-mix(in srgb,var(--accent) 6%,var(--surface)); border:1px solid var(--pf-card-line); }
.pf-protocol-track{ position:relative; height:44px; margin:14px 0 6px; }
.pf-protocol-seg{ position:absolute; top:0; height:100%; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--on-accent); overflow:hidden; white-space:nowrap; padding:0 10px; }
.pf-seg-load{ left:0; width:24%; background:linear-gradient(180deg,var(--brand),var(--brand-deep)); }
.pf-seg-maint{ left:26%; right:0; background:linear-gradient(180deg,var(--accent),var(--accent-deep)); }
.pf-protocol-legend{ font-size:13px; color:var(--ink-soft); }
.pf-protocol-legend b{ color:var(--ink); }
.pf-chip-row{ display:flex; gap:9px; flex-wrap:wrap; margin-top:13px; }
.pf-flag{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:500; background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); }
.pf-flag.is-yes{ color:var(--accent-deep); border-color:var(--pf-card-line); }

/* forms */
.pf-forms{ display:flex; flex-direction:column; gap:11px; }
.pf-form{ position:relative; display:grid; grid-template-columns:1fr auto; gap:5px 16px; padding:16px 18px; border-radius:14px; background:var(--surface); border:1px solid var(--line); transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.pf-form:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.pf-form.is-best{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%,var(--surface)); box-shadow:0 16px 40px -28px rgba(44,122,140,.7); }
.pf-form-name{ font-size:16px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.pf-best-badge{ font-family:var(--pf-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:6px; background:var(--accent); color:var(--on-accent); }
.pf-form-notes{ grid-column:1/2; font-size:13.5px; line-height:1.5; color:var(--ink-soft); }
.pf-form-meta{ grid-column:2/3; grid-row:1/3; display:flex; flex-direction:column; align-items:flex-end; gap:7px; text-align:right; min-width:110px; }
.pf-form-dose{ font-size:13.5px; font-weight:560; color:var(--ink); }
.pf-bio{ grid-column:1/3; margin-top:6px; }
.pf-bio-track{ height:7px; border-radius:5px; background:var(--surface-3); overflow:hidden; }
.pf-bio-fill{ height:100%; width:0; border-radius:5px; background:linear-gradient(90deg,var(--accent),var(--cat-mint)); transition:width 1.1s var(--ease); }
.in-view .pf-bio-fill{ width:var(--pct); }
.pf-bio-label{ font-family:var(--pf-mono); font-size:10.5px; color:var(--ink-faint); margin-top:4px; }
.pf-cost-tier{ display:inline-flex; align-items:center; font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:999px; }
.pf-cost-tier.budget{ background:color-mix(in srgb,var(--synergy) 16%,var(--surface)); color:var(--synergy-deep); }
.pf-cost-tier.mid{ background:color-mix(in srgb,var(--warn) 16%,var(--surface)); color:var(--warn); }
.pf-cost-tier.premium{ background:color-mix(in srgb,var(--brand) 16%,var(--surface)); color:var(--brand-deep); }

/* cost */
.pf-cost-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:560px){ .pf-cost-grid{ grid-template-columns:1fr; } }
.pf-cost-card{ padding:18px; border-radius:14px; background:var(--surface); border:1px solid var(--line); }
.pf-cost-card.is-value{ border-color:var(--synergy); box-shadow:0 16px 40px -30px rgba(63,167,106,.7); }
.pf-cost-tierlabel{ display:flex; align-items:center; justify-content:space-between; }
.pf-cost-name{ font-family:var(--pf-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.pf-value-badge{ font-family:var(--pf-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:6px; background:var(--synergy); color:#fff; }
.pf-cost-month{ font-size:27px; font-weight:640; color:var(--ink); margin-top:10px; letter-spacing:-.02em; }
.pf-cost-month small{ font-size:12px; font-weight:500; color:var(--ink-faint); }
.pf-cost-dose{ font-size:13px; color:var(--ink-soft); margin-top:3px; }
.pf-cost-bar{ height:7px; border-radius:5px; background:var(--surface-3); overflow:hidden; margin-top:12px; }
.pf-cost-bar i{ display:block; height:100%; width:0; border-radius:5px; transition:width 1.1s var(--ease); }
.in-view .pf-cost-bar i{ width:var(--pct); }
.pf-cost-bar.budget i{ background:linear-gradient(90deg,var(--synergy),var(--cat-mint)); }
.pf-cost-bar.mid i{ background:linear-gradient(90deg,var(--warn),var(--brand-soft)); }
.pf-cost-bar.premium i{ background:linear-gradient(90deg,var(--brand),var(--brand-deep)); }
.pf-cost-note{ margin-top:14px; font-size:13.5px; line-height:1.6; color:var(--ink-soft); }

/* food */
.pf-food-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .pf-food-grid{ grid-template-columns:1fr; } }
.pf-food-card{ padding:18px; border-radius:14px; background:color-mix(in srgb,var(--brand) 5%,var(--surface)); border:1px solid color-mix(in srgb,var(--brand) 16%,var(--line)); }
.pf-food-dose{ font-family:var(--pf-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-deep); }
.pf-food-eq{ font-size:18px; font-weight:580; color:var(--ink); margin-top:7px; line-height:1.35; }
.pf-food-note{ font-size:13px; line-height:1.5; color:var(--ink-soft); margin-top:7px; }

/* goals */
.pf-goal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .pf-goal-grid{ grid-template-columns:1fr; } }
.pf-goal{ padding:18px; border-radius:14px; background:var(--surface); border:1px solid var(--line); }
.pf-goal h3{ font-size:15px; font-weight:600; color:var(--ink); margin:0 0 9px; }
.pf-goal p{ font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin:4px 0; }
.pf-goal p b{ color:var(--ink); }

/* depletions (Rx) */
.pf-depl{ display:flex; flex-direction:column; gap:11px; }
.pf-deplcard{ display:grid; grid-template-columns:1fr auto; gap:6px 16px; padding:16px 18px; border-radius:14px; background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 7%,var(--surface)),var(--surface)); border:1px solid color-mix(in srgb,var(--brand) 18%,var(--line)); }
.pf-deplcard h3{ grid-column:1/2; font-size:16px; font-weight:600; color:var(--ink); margin:0; }
.pf-deplcard .sev{ grid-column:2/3; grid-row:1/2; justify-self:end; font-family:var(--pf-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:999px; height:fit-content; }
.pf-deplcard .sev.severe{ background:color-mix(in srgb,var(--brand) 18%,var(--surface)); color:var(--brand-deep); }
.pf-deplcard .sev.moderate{ background:color-mix(in srgb,var(--warn) 16%,var(--surface)); color:var(--warn); }
.pf-deplcard .sev.mild{ background:var(--surface-2); color:var(--ink-soft); }
.pf-deplcard p{ grid-column:1/3; font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin:0; }
.pf-deplcard .repl{ grid-column:1/3; display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.pf-deplcard .repl a, .pf-deplcard .repl span{ font-size:12.5px; padding:5px 11px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--ink); text-decoration:none; }
.pf-deplcard .repl a:hover{ border-color:var(--accent); color:var(--accent-deep); }
.pf-deplcard .repl b{ color:var(--ink-faint); font-weight:600; font-family:var(--pf-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; }

/* genetics */
.pf-gene{ padding:20px; border-radius:16px; background:linear-gradient(135deg,color-mix(in srgb,var(--cat-purple) 8%,var(--surface)),var(--surface)); border:1px solid color-mix(in srgb,var(--cat-purple) 22%,var(--line)); margin-bottom:11px; }
.pf-gene:last-child{ margin-bottom:0; }
.pf-gene-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pf-gene-name{ font-family:var(--pf-mono); font-size:13.5px; font-weight:600; color:var(--ink); }
.pf-gene-variant{ font-size:12.5px; color:var(--ink-faint); }
.pf-gene-pop{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft); }
.pf-gene-pop b{ color:var(--cat-purple); font-size:15px; }
.pf-gene p{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:13px 0 0; }
.pf-gene p b{ color:var(--ink); }

/* safety */
.pf-safety-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .pf-safety-grid{ grid-template-columns:1fr; } }
.pf-safety-card{ padding:18px; border-radius:14px; background:var(--surface); border:1px solid var(--line); }
.pf-safety-card h3{ font-size:12px; font-family:var(--pf-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 11px; }
.pf-safety-card ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.pf-safety-card li{ position:relative; padding-left:18px; font-size:14.5px; line-height:1.42; color:var(--ink-soft); }
.pf-safety-card li::before{ content:""; position:absolute; left:2px; top:7px; width:6px; height:6px; border-radius:50%; background:var(--warn); }
.pf-safety-card.is-contra li::before{ background:var(--brand); }

/* interactions */
.pf-int-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:600px){ .pf-int-grid{ grid-template-columns:1fr; } }
.pf-int{ padding:16px 18px; border-radius:14px; background:var(--surface); border:1px solid var(--line); transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.pf-int:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.pf-int-pills{ display:flex; gap:7px; margin-bottom:9px; flex-wrap:wrap; }
.pf-sev{ display:inline-flex; align-items:center; font-size:10.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; padding:3px 9px; border-radius:999px; }
.pf-sev.synergy{ background:color-mix(in srgb,var(--synergy) 16%,var(--surface)); color:var(--synergy-deep); }
.pf-sev.caution{ background:color-mix(in srgb,var(--brand) 16%,var(--surface)); color:var(--brand-deep); }
.pf-sev.info{ background:var(--surface-2); color:var(--ink-soft); }
.pf-int h3{ font-size:15px; font-weight:600; margin:0 0 7px; }
.pf-int h3 a{ color:var(--ink); text-decoration:none; }
.pf-int h3 a:hover{ color:var(--accent-deep); }
.pf-int p{ font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin:5px 0 0; }
.pf-int p b{ color:var(--ink); }
.pf-section-link{ margin-top:14px; font-size:14px; }
.pf-section-link a{ color:var(--accent-deep); font-weight:560; text-decoration:none; }
.pf-section-link a:hover{ text-decoration:underline; }
.pf-muted{ color:var(--ink-faint); font-size:14.5px; }

/* sources */
.pf-src-group{ margin-top:16px; }
.pf-src-head{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.pf-src-head h3{ font-size:14.5px; font-weight:600; color:var(--ink); margin:0; }
.pf-src-dot{ width:9px; height:9px; border-radius:50%; }
.pf-src-dot.meta{ background:var(--synergy); }
.pf-src-dot.rct{ background:var(--accent); }
.pf-src-dot.review{ background:var(--cat-mint); }
.pf-src-dot.observational{ background:var(--info); }
.pf-src-dot.mechanistic{ background:var(--cat-purple); }
.pf-src-dot.other{ background:var(--ink-faint); }
.pf-src-count{ margin-left:auto; font-family:var(--pf-mono); font-size:11.5px; color:var(--ink-faint); }
.pf-src-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.pf-src{ position:relative; padding:13px 15px 13px 44px; border-radius:11px; background:var(--surface); border:1px solid var(--line); transition:border-color .25s var(--ease), box-shadow .25s var(--ease); }
.pf-src-num{ position:absolute; left:12px; top:13px; width:23px; height:23px; border-radius:7px; background:var(--surface-2); color:var(--accent-deep); font-family:var(--pf-mono); font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.pf-src:target{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }
.pf-src:target .pf-src-num{ background:var(--accent); color:var(--on-accent); }
.pf-src a.t{ color:var(--ink); font-weight:560; text-decoration:none; font-size:14px; line-height:1.45; }
.pf-src b.t{ color:var(--ink); font-weight:560; font-size:14px; line-height:1.45; }
.pf-src a.t:hover{ color:var(--accent-deep); }
.pf-src small{ display:block; color:var(--ink-faint); font-size:12px; margin-top:5px; }
.pf-src p{ font-size:13px; line-height:1.5; color:var(--ink-soft); margin:7px 0 0; }
.pf-badges{ display:inline-flex; gap:5px; margin-left:7px; vertical-align:middle; flex-wrap:wrap; }
.pf-badge{ font-family:var(--pf-mono); font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; padding:2px 6px; border-radius:5px; background:var(--surface-2); color:var(--ink-faint); }
.pf-badge.needs-review{ background:color-mix(in srgb,var(--warn) 14%,var(--surface)); color:var(--warn); }
.pf-badge.needs-source{ background:color-mix(in srgb,var(--brand) 12%,var(--surface)); color:var(--brand-deep); }
.pf-badge.source-linked{ background:color-mix(in srgb,var(--synergy) 14%,var(--surface)); color:var(--synergy-deep); }

/* keep-exploring */
.pf-explore-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:600px){ .pf-explore-grid{ grid-template-columns:1fr; } }
.pf-ecard{ padding:16px 18px; border-radius:14px; background:var(--surface-2); text-decoration:none; transition:all .18s var(--ease); }
.pf-ecard:hover{ background:color-mix(in srgb,var(--accent) 8%,var(--surface)); transform:translateY(-2px); }
.pf-ecard.accent{ background:color-mix(in srgb,var(--brand) 7%,var(--surface)); }
.pf-ecard-k{ display:block; font-family:var(--pf-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep); }
.pf-ecard.accent .pf-ecard-k{ color:var(--brand-deep); }
.pf-ecard-t{ display:block; font-size:14px; font-weight:560; color:var(--ink); margin-top:5px; line-height:1.35; }
.pf-related-row{ display:flex; gap:8px; flex-wrap:wrap; }
.pf-related-row a{ display:inline-flex; flex-direction:column; padding:10px 14px; border-radius:11px; background:var(--surface-2); text-decoration:none; transition:all .18s var(--ease); }
.pf-related-row a:hover{ background:color-mix(in srgb,var(--accent) 8%,var(--surface)); }
.pf-related-row b{ font-size:13.5px; color:var(--ink); font-weight:560; }
.pf-related-row span{ font-size:11.5px; color:var(--ink-faint); }
.pf-medical{ margin-top:18px; padding:16px 18px; border-radius:13px; background:var(--care-bg); border:1px solid var(--care-line); font-size:13px; line-height:1.55; color:var(--care-ink); }

/* final */
.pf-final{ position:relative; max-width:760px; margin:64px auto 36px; padding:46px 24px; text-align:center; overflow:hidden; }
.pf-final-halo{ position:absolute; left:50%; top:50%; width:560px; height:280px; transform:translate(-50%,-50%); z-index:-1; background:radial-gradient(50% 60% at 40% 40%,var(--pf-glow-1),transparent 70%),radial-gradient(46% 60% at 70% 60%,var(--pf-glow-2),transparent 72%); filter:blur(70px); opacity:.7; }
.pf-final-k{ font-family:var(--pf-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); }
.pf-final h2{ font-size:clamp(27px,4vw,38px); font-weight:600; letter-spacing:-.02em; color:var(--ink); margin:12px 0 0; }
.pf-final p{ max-width:520px; margin:13px auto 0; font-size:16px; line-height:1.6; color:var(--ink-soft); }
.pf-final .pf-cta{ margin-top:24px; }

/* ----- pf-* data sections: lab markers, symptom matches, protocols (2026-05-29) ----- */
.pf-labrange{margin-top:14px}
.pf-labrange-track{position:relative;height:8px;border-radius:999px;background:color-mix(in srgb, currentColor 12%, transparent);overflow:hidden}
.pf-labrange-opt{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--accent);opacity:.9}
.pf-labrange-scale{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;letter-spacing:.02em;opacity:.62}
.pf-labrange-scale span:nth-child(2){color:var(--accent);opacity:1;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:10px}
.pf-labcard h3 small{font-weight:500;opacity:.62;font-size:.8em;margin-left:5px}
.pf-flag.is-goal{color:var(--accent);font-weight:600}
.pf-datafacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:9px;margin-top:13px}
.pf-datafacts .pf-mfact{padding:11px 13px;border-radius:11px;background:var(--surface-2)}

/* ===== Symptom ranked-match cards (pf-*) ===== */
.pf-match-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.pf-match{ display:flex; gap:18px; align-items:flex-start; padding:20px 22px; background:color-mix(in srgb,var(--surface) 86%,transparent); border:1px solid var(--pf-card-line,var(--line)); border-radius:18px; box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 1px 2px rgba(26,25,22,.04); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.pf-match:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); box-shadow:0 6px 22px rgba(26,25,22,.08); }
.pf-match-rank{ flex:0 0 auto; min-width:34px; font-variant-numeric:tabular-nums; font-weight:800; font-size:18px; color:color-mix(in srgb,var(--accent) 72%,var(--ink-soft)); letter-spacing:.01em; padding-top:3px; }
.pf-match-main{ flex:1 1 auto; min-width:0; }
.pf-match-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pf-match-name{ font-weight:700; font-size:17px; color:var(--ink); text-decoration:none; }
a.pf-match-name:hover{ color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; }
.pf-match-rel{ display:flex; align-items:center; gap:12px; margin:11px 0 2px; }
.pf-match-bar{ position:relative; flex:1 1 auto; height:7px; max-width:260px; border-radius:99px; background:color-mix(in srgb,var(--line) 70%,transparent); overflow:hidden; }
.pf-match-bar > span{ position:absolute; inset:0 auto 0 0; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-deep)); }
.pf-match-pct{ flex:0 0 auto; font-size:13px; font-weight:700; color:var(--accent-deep); font-variant-numeric:tabular-nums; }
.pf-match-why{ margin:9px 0 0; color:var(--ink-soft); font-size:15px; line-height:1.6; }
.pf-match-dose{ margin-top:13px; padding-top:12px; border-top:1px solid var(--line-soft,var(--line)); font-size:13.5px; line-height:1.55; color:var(--ink-soft); }
.pf-match-dose-k{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint,var(--ink-soft)); margin-right:9px; vertical-align:1px; }
.pf-chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.pf-chip{ display:inline-flex; align-items:center; padding:8px 15px; background:color-mix(in srgb,var(--surface) 80%,transparent); border:1px solid var(--pf-card-line,var(--line)); border-radius:99px; font-size:14px; color:var(--ink); text-decoration:none; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.pf-chip:hover{ border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); color:var(--accent-deep); background:var(--surface); }
@media (max-width:560px){ .pf-match{ flex-direction:column; gap:10px; padding:18px; } .pf-match-rank{ padding-top:0; } .pf-match-bar{ max-width:none; } }
/* Evidence pills on ranked matches (pf-pill was previously unstyled) */
.pf-pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:11px; font-weight:700; letter-spacing:.02em; border:1px solid var(--pf-card-line,var(--line)); color:var(--ink-soft); background:color-mix(in srgb,var(--surface) 70%,transparent); }
.pf-pill.is-strong{ color:var(--synergy-deep); border-color:color-mix(in srgb,var(--synergy) 40%,var(--line)); background:color-mix(in srgb,var(--synergy) 12%,var(--surface)); }
.pf-pill.is-moderate{ color:var(--accent-deep); border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); background:color-mix(in srgb,var(--accent) 11%,var(--surface)); }
.pf-pill.is-limited{ color:var(--ink-faint); border-color:var(--line); background:color-mix(in srgb,var(--surface) 70%,transparent); }
/* Symptom hero: phrase-length headline + gradient accent (reuses profile pf-title grammar) */
.pf-title-phrase{ font-size:clamp(34px,5.2vw,58px); line-height:1.04; letter-spacing:-.03em; }
.pf-title .accent{ background:linear-gradient(96deg,var(--accent-deep),var(--accent),var(--brand)); -webkit-background-clip:text; background-clip:text; color:transparent; }