/* ===== EBL Redesign. Custom styles ===== */
/* Tailwind handles 90%. This file covers what Tailwind can't: fonts, marquee,
   custom selection, scrollbar, layered background, grain overlay. */

:root {
  --bg-0: #07090a;
  --bg-1: #0b0f0e;
  --bg-2: #11161a;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);
  --ink-0: #f4f6f3;
  --ink-1: #c9cfc6;
  --ink-2: #a3aaa1;
  --ink-3: #979e95;

  --lime: #c6ff3a;
  --lime-soft: #d6ff66;
  --lime-glow: rgba(198, 255, 58, 0.18);
  --blue: #7cc5ff;
  --amber: #ffb547;
  --rust: #ff6b4a;

  --radius-card: 14px;
  --radius-chip: 999px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "ss02", "cv11";
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(198,255,58,0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(124,197,255,0.04), transparent 60%),
    var(--bg-0);
  color: var(--ink-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grain overlay. Subtle, fixed */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>");
}

/* Display & mono families (loaded via <link> in HTML) */
.font-display { font-family: 'Newsreader', 'Fraunces', Georgia, serif; font-feature-settings: "ss01"; letter-spacing: -0.01em; }
.font-mono    { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; }

/* Hero headline polish */
.h-hero {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.6rem, 6vw + 1rem, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.h-hero em {
  font-style: italic;
  color: var(--lime);
  font-weight: 500;
}

/* Section title */
.h-section {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.8rem, 2.6vw + 0.8rem, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Eyebrow */
.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Selection */
::selection { background: var(--lime); color: #06090a; }

/* Scrollbar. Lime thumb on a faint track so the page position is visible on
   the dark background (October 2026: the old 8%-white thumb was barely
   visible). Same block lives in assets/tw.css for the pages that load only tw.css. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
::-webkit-scrollbar-thumb { background: rgba(198,255,58,0.55); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background: #c6ff3a; background-clip: padding-box; }
@supports not selector(::-webkit-scrollbar) { html { scrollbar-color: rgba(198,255,58,0.55) rgba(255,255,255,0.05); } }

/* Card */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  transition: border-color 200ms ease, transform 300ms ease, background 300ms ease;
}
.card:hover { border-color: var(--line-strong); }
.card-hover:hover { transform: translateY(-2px); }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.15rem;
  border-radius: var(--radius-chip);
  background: var(--lime);
  color: #06090a;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  border: 1px solid var(--lime);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
  box-shadow: 0 0 0 0 var(--lime-glow);
}
.btn-primary:hover {
  background: var(--lime-soft);
  box-shadow: 0 0 0 8px var(--lime-glow);
  transform: translateY(-1px);
}
.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.15rem;
  border-radius: var(--radius-chip);
  color: var(--ink-0);
  font-weight: 500;
  font-size: 14px;
  border: 1px solid var(--line-strong);
  background: transparent;
  transition: border-color 200ms ease, background 200ms ease;
}
.btn-ghost:hover { border-color: var(--ink-1); background: rgba(255,255,255,0.03); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--lime);
  font-weight: 500;
  font-size: 14px;
}
.link-arrow .arrow { transition: transform 200ms ease; }
.link-arrow:hover .arrow { transform: translateX(3px); }

/* Tier badges */
.tier { display:inline-flex; align-items:center; justify-content:center; width: 28px; height: 28px; border-radius: 6px; font-family: 'Newsreader', serif; font-weight: 600; font-size: 17px; }
/* Tier badges. October 2026: one letter, one color, sitewide. These badges carried an older
   palette (A emerald, B navy, C slate, D AMBER) on 62 pages while the homepage, search,
   the supplements grid and the check used A lime, B blue, C AMBER, D rust: the same amber
   meant C on one page and D on the next. Now the same four colors everywhere. */
.tier-A { background: rgba(198,255,58,0.14); color: #c6ff3a; border:1px solid rgba(198,255,58,0.45); }
.tier-B { background: rgba(124,197,255,0.16); color: #7cc5ff; border:1px solid rgba(124,197,255,0.45); }
.tier-C { background: rgba(255,181,71,0.16); color: #ffb547; border:1px solid rgba(255,181,71,0.45); }
.tier-D { background: rgba(255,107,74,0.16); color: #ff6b4a; border:1px solid rgba(255,107,74,0.45); }
.tier-NA { background: rgba(148,163,184,0.08); color: #7c8593; border:1px dashed rgba(148,163,184,0.35); }

/* Marquee (single-row, CSS-only loop) */
.marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee 60s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms cubic-bezier(.2,.6,.2,1), transform 700ms cubic-bezier(.2,.6,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
/* Staggered children) set --i index on each child for sequential reveal */
.reveal-stagger > * { opacity: 0; transform: translateY(12px); transition: opacity 600ms cubic-bezier(.2,.6,.2,1), transform 600ms cubic-bezier(.2,.6,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }

/* Hero word stagger */
.hero-word { display: inline-block; opacity: 0; transform: translateY(18px); animation: hero-rise 800ms cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes hero-rise { to { opacity: 1; transform: translateY(0); } }

/* Page enter */
body { opacity: 0; animation: page-fade 500ms ease-out 50ms forwards; }
@keyframes page-fade { to { opacity: 1; } }

/* Nav mark entrance, subtle scale + fade on first paint */
header svg[viewBox="0 0 36 36"] {
  animation: mark-in 700ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes mark-in {
  from { opacity: 0; transform: scale(0.85) rotate(-2deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

/* Stat counter. Smoother number swap */
.stat-num { transition: color 300ms ease; }
.stat-num.counting { color: var(--lime); }

/* Card hover refinement */
.card-hover { transition: transform 320ms cubic-bezier(.2,.6,.2,1), border-color 320ms ease, background 320ms ease, box-shadow 320ms ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -24px rgba(198, 255, 58, 0.18); }

/* Marquee speed adjust */
.marquee__track { animation-duration: 160s !important; }

/* Line clamp utilities */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Modal */
#detail-modal { display: none; }
#detail-modal.flex { display: flex; }
#detail-modal-card { animation: modal-in 320ms cubic-bezier(.2,.7,.2,1); }
@keyframes modal-in { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Nav link hover underline */
.nav-link { position: relative; color: var(--ink-1); font-size: 14px; }
.nav-link:hover { color: var(--ink-0); }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform 220ms ease;
}
.nav-link:hover::after { transform: scaleX(1); }

/* Divider rule */
.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }

/* Stat number */
.stat-num {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Tier bar (distribution) */
.bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.05); overflow: hidden; }
.bar > span { display:block; height: 100%; border-radius: 999px; }

/* Tool result animation */
.fade-swap { animation: fade-swap 350ms ease; }
@keyframes fade-swap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Focus rings */
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 6px; }

/* Mobile nav */
.mobile-menu { display: none; }
.mobile-menu.open { display: block; }

/* Big editorial pull-quote */
.pull {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Print-style table for supplements */
.table-grid { width: 100%; }
.supp-row, .supp-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.4fr) 120px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  transition: background 200ms ease;
}
.supp-row > div, .supp-head > div {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--ink-1);
  min-width: 0;
}
.supp-head > div {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-strong);
}
.supp-row:hover { background: rgba(198,255,58,0.025); }
.supp-row:hover > div { color: var(--ink-0); }
@media (max-width: 768px) {
  .supp-row, .supp-head { grid-template-columns: 48px minmax(0, 1fr) 90px; }
  .col-hide { display: none !important; }
}


/* ===== Learn page tabs ===== */
.learn-tab {
  padding: 8px 14px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid transparent;
  background: transparent;
  white-space: nowrap;
  transition: all 180ms ease;
}
.learn-tab:hover { color: var(--ink-0); border-color: var(--line); }
.learn-tab.is-active {
  background: rgba(198,255,58,0.07);
  border-color: rgba(198,255,58,0.35);
  color: var(--lime);
}

/* ===== Evidence pyramid (standard medical shape: narrow top, wide bottom) ===== */
.pyramid-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 32px 8px 8px;
}
.pyramid-row {
  width: var(--row-width);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background 220ms ease, transform 220ms ease, border-color 220ms ease;
  position: relative;
}
.pyramid-row::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--row-color);
  border-radius: 3px 0 0 3px;
  opacity: 0.6;
}
.pyramid-row:hover { background: rgba(255,255,255,0.025); transform: translateY(-1px); }
.pyramid-row.is-active { background: rgba(255,255,255,0.04); border-color: var(--row-color); }
.pyramid-row.is-active::before { opacity: 1; width: 4px; }
.pyramid-row-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.pyramid-num {
  font-family: 'Newsreader', serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  opacity: 0.85;
}
.pyramid-row-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pyramid-row-label {
  font-family: 'Newsreader', serif;
  font-size: 15px;
  color: var(--ink-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pyramid-row-short {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}
.pyramid-axis {
  position: absolute;
  right: 4px;
  top: 8px;
  bottom: 8px;
  width: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.pyramid-axis-top, .pyramid-axis-bot {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.pyramid-axis-top { color: var(--lime); }
.pyramid-axis-bot { color: #ff8e53; }
.pyramid-detail {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  padding: 22px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
  margin-top: 4px;
}
.pyramid-rule {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
@media (max-width: 640px) {
  .pyramid-row { padding: 10px 12px; }
  .pyramid-row[style*="--row-width:36%"] { --row-width: 60% !important; }
  .pyramid-row[style*="--row-width:52%"] { --row-width: 70% !important; }
  .pyramid-row[style*="--row-width:70%"] { --row-width: 82% !important; }
  .pyramid-row[style*="--row-width:86%"] { --row-width: 92% !important; }
  .pyramid-stack { padding-right: 8px; }
  .pyramid-axis { display: none; }
}

/* hide old pyramid-tier styles to avoid bleed */
.pyramid-tier { display: none !important; }


/* ===== Condition card ===== */
.condition-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: rgba(255,255,255,0.012);
  transition: all 220ms ease;
}
.condition-card:hover { border-color: var(--line-strong); background: rgba(198,255,58,0.025); transform: translateY(-2px); }

/* ===== Contraindications result row ===== */
.cx-row {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: rgba(255,255,255,0.012);
}
.cx-row mark {
  background: rgba(198,255,58,0.18);
  color: var(--lime);
  border-radius: 3px;
  padding: 1px 3px;
}

/* ===== Evidence Log timeline ===== */
.log-entry {
  position: relative;
  padding-left: 28px;
}
.log-entry::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 22px;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.log-entry:last-child::before { display: none; }
.log-entry .dot {
  position: absolute;
  left: 0;
  top: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg-0);
}
.log-entry[data-kind="upgrade"] .dot { background: var(--lime); }
.log-entry[data-kind="downgrade"] .dot { background: var(--rust); }
.log-entry[data-kind="maintained"] .dot { background: var(--blue); }
.log-entry[data-kind="interaction"] .dot { background: var(--amber); }
.log-entry[data-kind="added"] .dot { background: var(--ink-3); }
.log-entry[data-kind="correction"] .dot { background: var(--amber); }

/* Watchlist star button states */
.watch-btn.is-watched { color:#c6ff3a; border-color:#c6ff3a; background:rgba(198,255,58,0.08); }
.watch-btn.is-watched span { transform:scale(1.05); }
#watch-pill:hover { filter:brightness(1.05); transform:translateY(-1px); }
#watch-pill:active { transform:translateY(0); }


/* Evidence Finder filter chips */
.evi-chip {
  display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-1);
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  border-radius: 999px;
  padding: 5px 11px;
  transition: all 160ms ease;
  cursor: pointer;
}
.evi-chip:hover { border-color: rgba(198,255,58,0.40); color: var(--lime); }
.evi-chip.is-on { background: rgba(198,255,58,0.10); border-color: rgba(198,255,58,0.55); color: var(--lime); }
.evi-card-head { cursor: pointer; }
.evi-card-head:hover { background: rgba(255,255,255,0.015); }

/* ===== EBL 5-Step Workflow · the hallmark ===== */
.step-row { position: relative; }
.step-card {
  display: grid;
  grid-template-columns: 90px 1fr 220px;
  gap: 22px;
  align-items: stretch;
  padding: 20px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 220ms ease, transform 220ms ease, background 220ms ease;
  position: relative;
  overflow: hidden;
}
.step-card::before {
  content: '';
  position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, #c6ff3a 0%, rgba(198,255,58,0.10) 100%);
  opacity: 0.65;
  transition: opacity 220ms ease, width 220ms ease;
}
.step-card:hover { border-color: rgba(198,255,58,0.40); background: linear-gradient(180deg, rgba(198,255,58,0.04), rgba(255,255,255,0.005)); }
.step-card:hover::before { opacity: 1; width: 5px; }
.step-card:hover .step-arrow { color: #c6ff3a; }
.step-numeral {
  font-family: 'Newsreader', serif;
  font-size: 64px;
  line-height: 0.85;
  color: #c6ff3a;
  font-weight: 400;
  letter-spacing: -0.04em;
  align-self: start;
  padding-top: 4px;
}
.step-body { display: flex; flex-direction: column; gap: 8px; }
.step-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}
.step-title {
  font-family: 'Newsreader', serif;
  font-size: 21px;
  line-height: 1.15;
  color: #f4f6f3;
  letter-spacing: -0.01em;
  margin: 1px 0 2px;
}
.step-lede { color: #c9cfc6; font-size: 13px; line-height: 1.55; margin: 0; max-width: 56ch; }
.step-bullets { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 3px; }
.step-bullets li { position: relative; padding-left: 16px; color: #c9cfc6; font-size: 12.5px; line-height: 1.45; }
.step-bullets li::before { content: '→'; position: absolute; left: 0; color: #c6ff3a; font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.step-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.step-chips span {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  color: #c9cfc6;
}
.step-meta {
  border-left: 1px dashed rgba(255,255,255,0.10);
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.step-meta-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.step-meta-name {
  font-family: 'Newsreader', serif;
  font-size: 16px;
  color: #f4f6f3;
  line-height: 1.2;
  margin-bottom: 4px;
}
.step-arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #c9cfc6;
  margin-top: 2px;
  transition: color 220ms ease;
}
.step-card-keystone {
  background: linear-gradient(180deg, rgba(198,255,58,0.06), rgba(198,255,58,0.01));
  border-color: rgba(198,255,58,0.30);
}
.step-card-keystone::before { opacity: 1; width: 5px; }
.step-connector {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  padding: 6px 0 2px;
  position: relative;
}
.step-connector span { display: block; font-size: 12px; color: #c6ff3a; margin-bottom: 2px; }
.step-connector-end { color: #c6ff3a; font-weight: 500; }
.step-connector-end span { display: none; }

@media (max-width: 900px) {
  .step-card { grid-template-columns: 60px 1fr; padding: 16px 16px; gap: 14px; }
  .step-numeral { font-size: 44px; }
  .step-title { font-size: 18px; }
  .step-meta { grid-column: 1 / -1; border-left: 0; border-top: 1px dashed rgba(255,255,255,0.10); padding-left: 0; padding-top: 12px; margin-top: 4px; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
  .step-meta-name { margin-bottom: 0; }
}

/* ===== Entry-point chooser ===== */
.chooser-tile {
  display: grid; grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 14px; row-gap: 2px;
  text-align: left; align-items: center;
  padding: 16px 18px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  color: #f4f6f3; text-decoration: none;
  cursor: pointer; transition: border-color 220ms ease, background 220ms ease;
}
.chooser-tile:hover { border-color: rgba(198,255,58,0.45); background: rgba(198,255,58,0.04); }
.chooser-num {
  grid-row: 1 / 3; grid-column: 1;
  font-family: 'Newsreader', serif; font-size: 34px; line-height: 1; color: #c6ff3a;
  font-weight: 500; padding-right: 4px;
}
.chooser-label { grid-row: 1; grid-column: 2; font-family: 'Newsreader', serif; font-size: 16px; color: #f4f6f3; line-height: 1.2; }
.chooser-sub { grid-row: 2; grid-column: 2; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase; color: #a3aaa1; }
.chooser-arrow { grid-row: 1 / 3; grid-column: 3; font-family: 'JetBrains Mono', monospace; color: #c6ff3a; font-size: 18px; opacity: 0.7; }
.chooser-tile:hover .chooser-arrow { opacity: 1; transform: translateX(2px); }
.chooser-tile-sm { grid-template-rows: auto; padding: 12px 14px; }
.chooser-tile-sm .chooser-num-sm { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.20em; color: #c6ff3a; padding-right: 8px; border-right: 1px solid rgba(198,255,58,0.30); margin-right: 8px; }
.chooser-tile-sm .chooser-label-sm { font-family: 'Geist', system-ui, sans-serif; font-size: 13px; color: #c9cfc6; line-height: 1.3; }
.chooser-tile-sm { display: flex; align-items: center; }
.chooser-back { background: transparent; }


/* ===== MOBILE OPTIMIZATIONS ===== */

/* Prevent horizontal scroll on mobile */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Hide the grades sidebar on mobile (too much vertical space */
@media (max-width: 1023px) {
  #hero-grades { display: none !important; }
  /* The card wrapping the sidebar */
  .lg\:col-span-4:has(#hero-grades) { display: none !important; }
}

/* Tighter hero padding on mobile */
@media (max-width: 640px) {
  .h-hero {
    font-size: clamp(2rem, 8vw, 3rem) !important;
    line-height: 1.08 !important;
  }
  
  .h-section {
    font-size: clamp(1.4rem, 5vw, 2rem) !important;
  }
  
  /* Tighter section padding on small screens */
  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  /* Stats strip) 3 columns on mobile instead of 6 */
  .stat-strip {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  
  /* Step cards. More compact */
  .step-card {
    padding: 12px !important;
    gap: 10px !important;
  }
  
  .step-numeral {
    font-size: 36px !important;
  }
  
  .step-lede {
    font-size: 12px !important;
  }
  
  /* Make all buttons/links at least 44px tall for touch */
  .btn-primary,
  .link-arrow,
  a[class*="btn"],
  button[class*="btn"],
  .chooser-tile {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  
  /* Safety form, full width, no min-width */
  #hero-safety-bar {
    min-width: 0 !important;
    width: 100% !important;
  }
  
  #hero-safety-bar input {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 16px !important; /* prevents iOS zoom */
  }
  
  /* Compact the "Try:" links */
  .try-links {
    gap: 4px !important;
  }
  
  /* Protocol cards (single column */
  .protocol-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Condition cards) single column */
  .condition-card {
    padding: 16px !important;
  }
  
  /* Priority strip (stack vertically, bigger button */
  .priority-strip {
    flex-direction: column !important;
    text-align: center;
    gap: 12px !important;
  }
  
  /* Ensure images don't overflow */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Fix nav drawer spacing */
  .mobile-drawer a {
    padding: 12px 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  
  /* Ticker/marquee) prevent overflow */
  .marquee-track {
    overflow: hidden;
  }
  
  /* Cards, reduce border radius on small screens for more content space */
  .card {
    border-radius: 10px !important;
    padding: 16px !important;
  }
}

/* Slightly larger screens (tablets) */
@media (min-width: 641px) and (max-width: 1023px) {
  .h-hero {
    font-size: clamp(2.4rem, 5vw, 3.5rem) !important;
  }
  
  /* Two columns for stats instead of 6 */
  .stat-strip {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* SELECT OPTION CONTRAST.
   Every <select> on the site is styled `text-white` over a near-transparent
   background, which is correct for the CLOSED control sitting on a dark page.
   The OPEN dropdown list is different: on Windows Chrome and Edge the popup is
   painted by the operating system with a WHITE background, and the white text
   is inherited into it. The result is a list that reads as blank until the
   pointer moves over a row and the highlight reveals it. Reported by Arnold on
   August 2026 against the contact form.

   Six selects across four pages were affected: contact.html (topic),
   apply-clinical.html (three), stack-audit.html (per-supplement use) and
   challenge.html (unpublished). Fixing them one class at a time would leave
   the seventh select broken on the day it is written, so the rule is on the
   element.

     A CONTROL IS NOT STYLED UNTIL ITS OPEN STATE IS STYLED.
*/
select option,
select optgroup {
  background-color: #11161a;
  color: #f4f6f3;
}

/* iOS input zoom prevention */
/* Raised from 768px to 1024px in August 2026. iPadOS zooms the page on focus for
   the same reason iOS does, and an iPad in landscape is 1024px wide, so the
   guard was ending 256px short of the device class it was written for. The
   symptom is the whole page jumping when a reader taps the search box, which is
   the control we just put on all 284 pages. */
@media screen and (max-width: 1024px) {
  input[type="text"],
  input[type="email"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Safe area insets for notched phones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .sticky-cta,
  .fixed-bar {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* --- slim nav dropdowns + Start Here (added June 2026)) --- */
.start-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#c6ff3a;box-shadow:0 0 8px rgba(198,255,58,.7);margin-right:6px;vertical-align:middle}
.has-dd{position:relative}
.nav-dd-btn{background:none;border:none;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.dd-caret{width:14px;height:14px;transition:transform .16s}
.has-dd:hover .dd-caret,.has-dd:focus-within .dd-caret{transform:rotate(180deg)}
.dd{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);min-width:240px;background:#0b0f0e;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:8px;opacity:0;visibility:hidden;transition:all .16s ease;box-shadow:0 24px 60px rgba(0,0,0,.55);z-index:60}
.has-dd:hover .dd,.has-dd:focus-within .dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd a{display:block;padding:9px 12px;border-radius:9px;color:#f4f6f3;font-size:14px;text-decoration:none}
.dd a:hover{background:rgba(198,255,58,.10);color:#ffffff}
.dd-div{height:1px;background:rgba(255,255,255,.07);margin:6px 8px}
.dd a.dd-emerging{color:#cdd6de}
.dd a.dd-emerging:hover{background:rgba(205,214,222,.12);color:#f4f6f3}
.dd-tag{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:#aeb8c1;margin-top:2px}
.mm-group{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#9aa39a;padding-top:6px}


/* ============================================================
   MOBILE + 45+ LEGIBILITY PASS (added June 2026)
   ------------------------------------------------------------
   Master reading-size dial. Tailwind's text scale is rem-based,
   so changing the root html font-size below scales ALL text on
   every page that links this stylesheet, proportionally.

   To make the whole site bigger or smaller, change just the two
   font-size values marked << TUNE >>. Browser default base = 16px.
   ============================================================ */

html { font-size: 17px; }                 /* << TUNE >> desktop base (was 16px) */

@media (max-width: 640px) {
  html { font-size: 18px; }               /* << TUNE >> phone base, larger for reading */

  /* These labels use fixed px sizes, so they DON'T scale with the
     dial above. Raise their floor so small mono/eyebrow text stays
     legible for a 45+ reader on a phone. */
  .eyebrow          { font-size: 12px !important; }
  .dd-tag,
  .mm-group         { font-size: 11.5px !important; letter-spacing: 0.10em; }
  .chooser-sub      { font-size: 12px !important; }
  .chooser-num-sm   { font-size: 12px !important; }
  .step-bullets li  { font-size: 14px !important; line-height: 1.5; }
  .learn-tab        { font-size: 12px !important; }
  .nav-link,
  .dd a             { font-size: 15px !important; }
}


.ebl-skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.ebl-skip:focus{left:8px;top:8px;width:auto;height:auto;z-index:60;padding:.5rem .9rem;background:#c6ff3a;color:#06090a;border-radius:8px;font-weight:600;text-decoration:none}
/* ============================================================
   Homepage evidence blocks
   Added August 2026 for render_grade_distribution.py and
   render_homepage_cases.py. Uses existing :root tokens only:
   no new colour is introduced, so gate_g20_color_tokens.py has
   nothing new to reconcile across the three palette files, and
   no new Tailwind utility is used, so gate_g21_tailwind_classes.py
   has nothing to look for in the committed tw.css.
   ============================================================ */

.ebl-gd-eyebrow{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:1.15rem;text-align:center;
}
.ebl-gd-h2{
  font-family:Newsreader,Georgia,serif;font-weight:600;
  font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.15;
  letter-spacing:-.01em;text-align:center;color:var(--ink-0);
  margin:0 auto 2.1rem;max-width:46rem;text-wrap:balance;
}
.ebl-gd-h2-sub{color:var(--ink-2);}

.ebl-gd-bar{
  display:flex;width:100%;height:16px;overflow:hidden;
  border-radius:999px;border:1px solid var(--line-strong);
  background:var(--bg-2);
}
.ebl-gd-seg{height:100%;}
.ebl-gd-seg + .ebl-gd-seg{border-left:1px solid var(--bg-0);}

.ebl-gd-keys{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:.55rem 1.6rem;list-style:none;margin:1.5rem 0 0;padding:0;
}
.ebl-gd-key{
  display:flex;align-items:baseline;gap:.55rem;
  font-size:13px;color:var(--ink-2);line-height:1.45;
}
.ebl-gd-swatch{
  flex:0 0 auto;width:9px;height:9px;border-radius:2px;
  transform:translateY(-1px);
}
.ebl-gd-letter{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;font-weight:600;color:var(--ink-0);
}
.ebl-gd-n{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:13px;font-weight:600;color:var(--ink-0);
  min-width:2.1ch;text-align:right;
}
.ebl-gd-gloss{color:var(--ink-2);}

.ebl-gd-note{
  margin:1.9rem auto 0;max-width:46rem;text-align:center;
  font-size:14px;line-height:1.65;color:var(--ink-2);
}
.ebl-gd-cta{margin:1.15rem 0 0;text-align:center;font-size:13px;}
.ebl-gd-cta a{color:var(--lime);text-decoration:none;}
.ebl-gd-cta a:hover,.ebl-gd-cta a:focus-visible{
  text-decoration:underline;text-underline-offset:4px;
}

/* --- worked example cards --- */
/* Four cards (render_homepage_cases.CARD_COUNT), laid out 4 across, 2 x 2 or 1
   column, never 3 + 1. The old auto-fit with a 17rem minimum fitted three in the
   1088px section and orphaned the fourth on its own row (Arnold, September 2026). The
   section is now max-w-7xl, the hero's width, so four cards run about 290px each. */
.ebl-ec-grid{
  display:grid;grid-template-columns:1fr;
  gap:1rem;margin-top:.4rem;
}
@media (min-width:640px){ .ebl-ec-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (min-width:1200px){ .ebl-ec-grid{grid-template-columns:repeat(4,minmax(0,1fr));} }
.ebl-ec-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line-strong);border-radius:var(--radius-card);
  background:var(--bg-1);padding:1.35rem 1.3rem 1.4rem;
  transition:border-color .25s ease;
}
.ebl-ec-card:hover{border-color:rgba(198,255,58,.32);}
.ebl-ec-tag{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 .75rem;
}
.ebl-ec-title{
  font-family:Newsreader,Georgia,serif;font-weight:500;
  font-size:1.16rem;line-height:1.3;color:var(--ink-0);margin:0 0 1rem;
}
.ebl-ec-dl{margin:0 0 1.15rem;}
.ebl-ec-dl dt{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 .3rem;
}
.ebl-ec-dl dd{
  margin:0 0 .95rem;font-size:13.5px;line-height:1.6;color:var(--ink-1);
}
.ebl-ec-dl dd:last-child{margin-bottom:0;}
.ebl-ec-more{
  margin:auto 0 0;padding-top:1rem;
  border-top:1px solid var(--line);font-size:13px;
}
.ebl-ec-more a{color:var(--lime);text-decoration:none;}
.ebl-ec-more a:hover,.ebl-ec-more a:focus-visible{
  text-decoration:underline;text-underline-offset:4px;
}

@media (max-width:640px){
  .ebl-gd-keys{grid-template-columns:1fr;}
  .ebl-gd-note,.ebl-gd-h2{text-align:left;}
  .ebl-gd-eyebrow{text-align:left;}
}
@media (prefers-reduced-motion:reduce){
  .ebl-ec-card{transition:none;}
}

/* title_kind qualifier on worked-example cards. Added August 2026 with
   gate_g56_case_title_kind.py. Uses existing tokens only. */
.ebl-ec-kind{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 .4rem;
}
.ebl-ec-kind[data-title-kind="claim"]{
  color:var(--rust);
}

/* ============================================================================
   MOBILE TYPE FLOOR
   ----------------------------------------------------------------------------
   Measured August 2026 on the built tree: 5,446 arbitrary text-size class uses
   that ACTUALLY RESOLVE to a rule in tw.css render below 12px, across all 279
   published pages. 10px accounts for 2,826 of them and 11px for 2,347. A further
   1,175 sub-12px classes are inert (no matching rule) and are left alone here,
   because changing something that renders nothing is not a fix.

   Reader 5 on an actual phone was the first person to test this surface. Arnold
   works from a Windows PC, so mobile rendering is the least-observed thing on
   the site. Independent corroboration on file: the August typography measurement
   and an external review that named the 8-11px classes.

   WHY A MEDIA QUERY AND NOT A REWRITE OF 279 PAGES.
   The desktop composition is deliberate and is not the thing anybody complained
   about. Rewriting the class strings would change both surfaces to fix one, put
   5,446 edits into the repo, and rename a class so that text-[10px] no longer
   means 10px. This block changes the rendered size on narrow screens only,
   leaves every class name honest, sits in the one stylesheet that loads AFTER
   tw.css so it wins on equal specificity, and is reverted by deleting it.

   THE TRACKING RULE IS NOT COSMETIC. The dominant use of these classes is
   font-mono + uppercase + tracking-widest: eyebrows, notice bars and micro
   labels. Wide letter-spacing on small uppercase text is the least legible
   combination on the list, and it also costs horizontal width on a 360px
   screen. Where the type is enlarged, the tracking comes back in.

   Breakpoint is 480px so it covers every phone in portrait (360, 390, 414, 430)
   and no tablet or desktop.
   ========================================================================== */
@media (max-width: 480px) {
  .text-\[8px\],
  .text-\[9px\]   { font-size: 11px; }
  .text-\[10px\]  { font-size: 12.5px; }
  .text-\[11px\]  { font-size: 13px; }

  .tracking-widest.text-\[8px\],
  .tracking-widest.text-\[9px\],
  .tracking-widest.text-\[10px\],
  .tracking-widest.text-\[11px\] { letter-spacing: .06em; }

  /* INLINE font-size beats any class rule, so the class ladder above cannot
     reach it. Measured: 237 inline declarations under 11px, 198 of them at 10px
     and 39 at 9px, concentrated in longevity-lab-panel.html (34) and the rx/
     and s/ chip markup. Matching the style attribute's text is the only way to
     catch a declaration that is not expressed as a class, and !important is
     required because an inline declaration outranks a stylesheet without it.
     This is the narrow case !important is for: one deliberate accessibility
     floor, scoped to one breakpoint, overriding scattered inline sizes that
     nobody is going to re-author by hand. gate_g61 fails the build if a new
     inline size appears that these two selectors do not cover. */
  [style*="font-size:9px"],
  [style*="font-size: 9px"]   { font-size: 11px !important; }
  [style*="font-size:10px"],
  [style*="font-size: 10px"]  { font-size: 12.5px !important; }

  /* EXTENDED October 2026 after a phone audit of all 379 published pages (iPhone 13
     and Pixel 5 sizes): 139 pages still showed type under 12px. The ladder above
     lifted 8, 9, 10 and 11px classes but not the half sizes (9.5, 10.5, 11.5px,
     578 uses), left 8 and 9px at 11px, and missed inline 11px, which is what the
     evidence-flag chips on supplements.html carry (145 chips on that page alone).
     Every size now clears 12px on a phone. */
  .text-\[8px\],
  .text-\[9px\],
  .text-\[9\.5px\]  { font-size: 12px; }
  .text-\[10\.5px\] { font-size: 12.5px; }
  .text-\[11\.5px\] { font-size: 13px; }
  .tracking-widest.text-\[9\.5px\],
  .tracking-widest.text-\[10\.5px\] { letter-spacing: .06em; }
  [style*="font-size:9px"],
  [style*="font-size: 9px"],
  [style*="font-size:9.5px"],
  [style*="font-size:10.5px"],
  [style*="font-size:11px"],
  [style*="font-size: 11px"],
  [style*="font-size:11.5px"] { font-size: 12.5px !important; }
}

/* ==========================================================================
   TABLET TYPE FLOOR, added August 2026.

   THE HOLE THIS FILLS. The block above stops at 480px, and its own comment
   says why: "covers every phone in portrait and no tablet or desktop." That
   was correct when the only report was Reader 5 on a phone. It leaves an iPad
   in portrait (768px) and in landscape (1024px) rendering the raw 9px, 10px
   and 11px type, which is the same defect the block above exists to fix,
   untouched on the entire tablet class. Measured on the published tree:
   341 sub-12px class uses on longevity-lab-panel.html, 68 on s/nmn.html,
   39 on index.html.

   Nobody had seen it because nobody had looked. Arnold works from a Windows
   PC, the one phone reader produced the 480px block, and no reader has ever
   opened this site on a tablet.

   WHY A SECOND BAND AND NOT A WIDER FIRST ONE. Moving 480 up to 1024 would
   apply the phone lift to a 1023px window, where the layout is already at its
   desktop proportions and a 12.5px eyebrow next to 15px body copy reads as a
   mistake rather than a floor. A tablet has more room than a phone and less
   than a desktop, so the lift is gentler: enough to clear the floor, not
   enough to flatten the type hierarchy the design depends on.

   BAND EDGES. min-width 481px starts exactly where the phone band ends, so
   there is no width at which neither applies. max-width 1024px is the iPad
   Pro landscape width; above it the desktop type is being read at desktop
   distance on a desktop-sized window, which is the case this site was
   designed for and the only case that has ever been observed.

   Same three properties as the block above, for the same reasons: the class
   names stay honest, this file loads after tw.css so it wins on source order,
   and deleting these rules reverts it. gate_g61_mobile_type_floor.py holds
   BOTH bands, so this one cannot be dropped silently either.
   ========================================================================== */
@media (min-width: 481px) and (max-width: 1024px) {
  .text-\[8px\],
  .text-\[9px\]   { font-size: 11.5px; }
  .text-\[10px\]  { font-size: 12px; }
  .text-\[11px\]  { font-size: 12.5px; }

  .tracking-widest.text-\[8px\],
  .tracking-widest.text-\[9px\],
  .tracking-widest.text-\[10px\],
  .tracking-widest.text-\[11px\] { letter-spacing: .07em; }

  /* Inline declarations, same argument as the phone band: an inline font-size
     outranks any stylesheet rule, so the class ladder above cannot reach it and
     !important is the only thing that can. gate_g61 fails the build if a new
     inline size appears that these selectors do not cover, in EITHER band. */
  [style*="font-size:9px"],
  [style*="font-size: 9px"]   { font-size: 11.5px !important; }
  [style*="font-size:10px"],
  [style*="font-size: 10px"]  { font-size: 12px !important; }
}

/* ============================================================
   SUPPLEMENT READING LAYER, September 2026.
   Keyed to data-ebl-page="supplement", which render_supp_layout.py
   stamps on every /s/ page. Raises the type floor, opens the line
   height, adds air, and styles the jump row and the folded blocks.
   Existing :root tokens only (G20); no new Tailwind classes (G21).
   ============================================================ */
[data-ebl-page="supplement"] { font-size: 16px; }
[data-ebl-page="supplement"] p { line-height: 1.68; }
[data-ebl-page="supplement"] .text-\[9px\],
[data-ebl-page="supplement"] .text-\[9\.5px\],
[data-ebl-page="supplement"] .text-\[10px\],
[data-ebl-page="supplement"] .text-\[10\.5px\],
[data-ebl-page="supplement"] .text-\[11px\] { font-size: 12.5px !important; }
[data-ebl-page="supplement"] .text-\[12px\],
[data-ebl-page="supplement"] .text-\[12\.5px\] { font-size: 13.5px !important; }
[data-ebl-page="supplement"] .text-\[13px\],
[data-ebl-page="supplement"] .text-\[13\.5px\] { font-size: 15px !important; }
[data-ebl-page="supplement"] .text-\[14px\],
[data-ebl-page="supplement"] .text-\[14\.5px\] { font-size: 16px !important; }
[data-ebl-page="supplement"] .text-\[15px\] { font-size: 16.5px !important; }
[data-ebl-page="supplement"] .tracking-widest { letter-spacing: .12em; }
[data-ebl-page="supplement"] .rounded-xl { border-radius: 16px; }
[data-ebl-page="supplement"] .mb-6 { margin-bottom: 2rem; }
[data-ebl-page="supplement"] .mt-6 { margin-top: 2rem; }
[data-ebl-page="supplement"] .p-4 { padding: 1.25rem; }
[data-ebl-page="supplement"] .p-5 { padding: 1.5rem; }
[data-ebl-page="supplement"] .ebl-sp-anchor { display: block; position: relative; top: -84px; visibility: hidden; }
[data-ebl-page="supplement"] .ebl-sp-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 .4rem; }
[data-ebl-page="supplement"] .ebl-sp-jump-a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14.5px; color: var(--ink-1); transition: border-color .2s ease, color .2s ease; }
[data-ebl-page="supplement"] .ebl-sp-jump-a:hover { border-color: rgba(198,255,58,.5); color: var(--lime); }
[data-ebl-page="supplement"] .ebl-sp-fold { margin: 2rem 0; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.015); }
[data-ebl-page="supplement"] .ebl-sp-fold > div { margin: 0 !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 0 16px 16px !important; }
[data-ebl-page="supplement"] .ebl-sp-sum { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: .9rem 1.25rem; cursor: pointer; list-style: none; font-size: 15.5px; color: var(--ink-0); }
[data-ebl-page="supplement"] .ebl-sp-sum::-webkit-details-marker { display: none; }
[data-ebl-page="supplement"] .ebl-sp-sum::after { content: "+"; flex: none; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 18px; color: var(--lime); }
[data-ebl-page="supplement"] .ebl-sp-fold[open] > .ebl-sp-sum::after { content: "\2212"; }
[data-ebl-page="supplement"] .ebl-sp-sum:hover { color: var(--lime); }
@media (max-width: 640px) {
  [data-ebl-page="supplement"] { padding-left: 1.15rem !important; padding-right: 1.15rem !important; }
  [data-ebl-page="supplement"] h1 { font-size: 32px !important; line-height: 1.12; margin-top: .7rem; }
  /* Name, letter and jump row first; the structure drawing after them. */
  [data-ebl-page="supplement"] > .grid:first-of-type > .md\:col-span-5 { order: 2; }
  [data-ebl-page="supplement"] > .grid:first-of-type figure .h-56 { height: 8.5rem; }
}

/* ==========================================================================
   LAPTOP AND DESKTOP LABEL FLOOR, added October 2026 (Arnold: "make it 11 point").
   Above 1024px the phone and tablet floors stop, and the small mono labels
   (eyebrows, chips, PMID tags, footnote rows) rendered at 8 to 10.5px. They
   now clear 11px. 11px and 11.5px are left alone, so the type hierarchy holds.
   ========================================================================== */
@media (min-width: 1025px) {
  .text-\[8px\], .text-\[9px\], .text-\[9\.5px\], .text-\[10px\], .text-\[10\.5px\] { font-size: 11px; }
  [style*="font-size:8px"], [style*="font-size: 8px"], [style*="font-size:9px"], [style*="font-size: 9px"],
  [style*="font-size:9.5px"], [style*="font-size:10px"], [style*="font-size: 10px"],
  [style*="font-size:10.5px"] { font-size: 11px !important; }
}