/* Naked Compound — Soft Wellness
   ----------------------------------------------------------------
   Design system
   ---------------------------------------------------------------- */

:root {
  /* Palette — light (soft wellness) */
  --bg: #f7f3ec;
  --bg-elev: #fdfbf6;
  --surface: #ffffff;
  --ink: #1a1714;
  --ink-soft: #3e3933;
  --ink-muted: #655e55;
  --line: #ded3c2;          /* a touch firmer than before (#e6ddcf) for crisper card edges */
  --line-strong: #cbbfac;

  /* Terracotta. --accent is used for links, small text and button fills, so it is a shade deeper than the
     brand colour to pass WCAG AA (4.5:1 on the page, 5:1 under white text). --accent-brand is the original
     #c96442, for decoration with no text on it (dots, bars, stripes). */
  --accent: #ad5639;
  --accent-brand: #c96442;
  --accent-ink: #ffffff;
  --accent-soft: #f4e2d8;
  --accent-deep: #934229;

  --mint: #d8e6d5;
  --sky: #d7e3ec;
  --butter: #f4e5b8;
  --rose: #f0d4cb;

  /* Status pairs (background + text), AA in both themes: good, caution, bad, info */
  --ok-bg: #d8e6d5;   --ok-ink: #2a5638;
  --warn-bg: #f4e5b8; --warn-ink: #5f450c;
  --bad-bg: #f0d4cb;  --bad-ink: #862713;
  --info-bg: #d7e3ec; --info-ink: #24496a;

  /* Form-field borders: 3:1 against the page, as WCAG asks for control boundaries */
  --field-border: #8f8473;

  /* Custom Easing Curves (Emil Kowalski Design Skill) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Type */
  --font-sans: "Inter Tight", "Söhne", "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: "Inter Tight", "GT America", "Söhne", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(26, 23, 20, 0.04), 0 1px 1px rgba(26, 23, 20, 0.03);
  --shadow-md: 0 4px 16px rgba(26, 23, 20, 0.06), 0 2px 4px rgba(26, 23, 20, 0.04);
  --shadow-lg: 0 16px 48px rgba(26, 23, 20, 0.09), 0 4px 12px rgba(26, 23, 20, 0.05);

  /* Space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  --maxw: 1200px;
  --nav-h: 64px;

  /* Form fields, scrollbars and other browser-drawn parts follow the theme */
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14110e;
  --bg-elev: #1c1814;
  --surface: #221d18;
  --ink: #f7f1e6;
  --ink-soft: #e0d7c9;
  --ink-muted: #b4a998;
  --line: #372f27;
  --line-strong: #4a4034;

  --accent: #e98a6a;        /* passes 4.5:1 on every dark tint too (was #e27a58) */
  --accent-brand: #e27a58;
  --accent-ink: #14110e;
  --accent-soft: #3a2419;
  --accent-deep: #f29071;

  --mint: #2c3a2a;
  --sky: #273441;
  --butter: #3b3420;
  --rose: #3a2620;

  --ok-bg: #2c3a2a;   --ok-ink: #a7d2a9;
  --warn-bg: #3b3420; --warn-ink: #e0c377;
  --bad-bg: #3a2620;  --bad-ink: #f2b9a6;
  --info-bg: #273441; --info-ink: #a3c5e3;

  --field-border: #766a5a;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.5);
}

/* ---------------------------------------------------------------- */
/* Reset                                                             */
/* ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }

/* Dark theme refinements: thinner, crisper light-on-dark text on macOS, and photos and illustrations
   toned down slightly so they don't glare against the dark page. Screenshots and SVG icons are left
   alone; add class="no-dim" to keep any other image at full brightness. */
[data-theme="dark"] body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
[data-theme="dark"] main img:not([src$=".svg"]):not(.no-dim):not(.shot img):not(.tool-shot img) { filter: brightness(.9) contrast(1.04); }

@media screen {
  /* Charts and diagrams drawn inline with fixed SVG colours (fill/stroke attributes). CSS beats SVG
     presentation attributes, so in dark mode their dark inks turn light and their pale fills and grid
     lines turn dark. Mid-tone data colours (terracotta, greens, blues) read on both and are left alone. */
  [data-theme="dark"] main svg :is([fill="#4a453e" i], [fill="#3a2010" i], [fill="#1a1714" i], [fill="#3e3933" i]) { fill: var(--ink-soft); }
  [data-theme="dark"] main svg :is([fill="#7a736a" i], [fill="#a09890" i], [fill="#888" i], [fill="#888888" i], [fill="#655e55" i]) { fill: var(--ink-muted); }
  [data-theme="dark"] main svg :is([fill="#3a6040" i], [fill="#1a5030" i], [fill="#1a3a20" i], [fill="#3a6b4a" i], [fill="#2d4a30" i]) { fill: var(--ok-ink); }
  [data-theme="dark"] main svg :is([fill="#2e4a6b" i], [fill="#1a2e3a" i], [fill="#1a3a5a" i], [fill="#1e3a5a" i], [fill="#2e5080" i]) { fill: var(--info-ink); }
  [data-theme="dark"] main svg :is([fill="#a06820" i], [fill="#7a5c15" i], [fill="#8a5c10" i]) { fill: var(--warn-ink); }
  [data-theme="dark"] main svg :is([fill="#7a3a20" i], [fill="#7a3a1a" i], [fill="#a05030" i]) { fill: var(--accent-deep); }
  [data-theme="dark"] main svg :is([fill="#7a1a10" i]) { fill: var(--bad-ink); }
  [data-theme="dark"] main svg :is([fill="#4a2e6b" i]) { fill: #cdb8ea; }
  [data-theme="dark"] main svg :is([fill="#d8e6d5" i]) { fill: var(--mint); }
  [data-theme="dark"] main svg :is([fill="#f4e2d8" i]) { fill: var(--accent-soft); }
  [data-theme="dark"] main svg :is([fill="#d7e3ec" i]) { fill: var(--sky); }
  [data-theme="dark"] main svg :is([fill="#fde8e8" i]) { fill: var(--rose); }
  [data-theme="dark"] main svg :is([fill="#e8e0f0" i]) { fill: #2e2638; }
  [data-theme="dark"] main svg :is([fill="#fdfbf6" i], [fill="#fdf8ee" i]) { fill: var(--bg-elev); }
  [data-theme="dark"] main svg :is([fill="#f7f3ec" i]) { fill: var(--bg); }
  [data-theme="dark"] main svg :is([fill="#fff" i], [fill="#ffffff" i]) { fill: var(--surface); }
  [data-theme="dark"] main svg :is([fill="#e6ddcf" i]) { fill: var(--line); }
  [data-theme="dark"] main svg :is([stroke="#e6ddcf" i], [stroke="#e8e3db" i]) { stroke: var(--line-strong); }
  [data-theme="dark"] main svg :is([stroke="#b8d5b4" i]) { stroke: #3d5a3f; }
  [data-theme="dark"] main svg :is([stroke="#e6c8b8" i], [stroke="#e8c8b8" i]) { stroke: #5a3a2c; }
  [data-theme="dark"] main svg :is([stroke="#b4c9dc" i], [stroke="#b8cad8" i]) { stroke: #3a4e62; }
  [data-theme="dark"] main svg :is([stroke="#c4b4d4" i]) { stroke: #4a3d5c; }
  [data-theme="dark"] main svg :is([stroke="#e8c0c0" i]) { stroke: #5a3232; }
  [data-theme="dark"] main svg :is([stroke="#fff" i], [stroke="#ffffff" i]) { stroke: var(--bg-elev); }
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: transparent; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.05; font-weight: 500; }
p { margin: 0; }

/* Global focus-visible baseline */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- */
/* Layout primitives                                                 */
/* ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: var(--s-9) 0; }
/* `.section` would wipe `.container`'s side gutters on <section class="section container"> */
@media screen {
  .section.container { padding-left: 24px; padding-right: 24px; }
}
@media screen and (max-width: 720px) {
  .section.container { padding-left: 16px; padding-right: 16px; }
}
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
}
.section-head .eyebrow { color: var(--ink-muted); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--s-3); }
.section-head h2 {
  font-size: clamp(32px, 4.4vw, 52px);
  max-width: 22ch;
  letter-spacing: -0.025em;
}
.section-head .lede {
  color: var(--ink-soft);
  max-width: 42ch;
  font-size: 17px;
  line-height: 1.5;
}
.section-head .head-left { flex: 1 1 auto; min-width: 0; }
.section-head .head-right { flex: 0 0 auto; }

.ghost-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); font-weight: 500;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 4px;
  transition: transform 120ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ghost-link:hover { color: var(--accent); border-color: var(--accent); }
  .ghost-link:hover .arrow { transform: translateX(3px); }
}
.ghost-link:active { transform: scale(0.98); }
.ghost-link .arrow { transition: transform 160ms var(--ease-out); }

/* ================================================================ */
/* Header / Nav  — responsive across all devices                     */
/* ================================================================ */
:root { --nav-h: 64px; }
@media (max-width: 720px) { :root { --nav-h: 60px; } }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
  /* iOS safe area */
  padding-top: env(safe-area-inset-top, 0);
}
.site-header.scrolled {
  border-color: var(--line);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
}

.nav {
  display: flex;
  align-items: center;
  height: var(--nav-h);
  gap: var(--s-4);
  min-width: 0;
}
/* Takes the free space, so the links sit beside the logo and the actions sit on the right. */
.nav > nav { flex: 1 1 auto; min-width: 0; }

/* ── Brand ─────────────────────────────────────────────────────── */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--ink);
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}
.brand .mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: block;
  flex: 0 0 auto;
}
.brand-name { font-weight: 600; }
.brand-name em {
  font-style: normal;
  color: var(--accent);
  font-weight: 400;
  margin: 0 1px;
}

/* ── Primary nav links (desktop) ───────────────────────────────── */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
  justify-content: flex-start;
  min-width: 0;
}
.nav-links a {
  display: inline-flex; align-items: center;
  padding: 8px 13px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: transform 120ms var(--ease-out), color 160ms var(--ease-out), background 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover {
    color: var(--ink);
    background: color-mix(in oklab, var(--ink) 6%, transparent);
  }
}
.nav-links a:active {
  transform: scale(0.97);
}
.nav-links a:focus-visible,
.brand:focus-visible,
.nav-cta:focus-visible,
.mobile-nav a.mn-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-links a.current,
.nav-links a[aria-current="page"] {
  color: var(--ink);
  background: color-mix(in oklab, var(--ink) 7%, transparent);
}

/* ── Right-side actions ────────────────────────────────────────── */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* Theme toggle is small, but hide on narrow phones to save space */
.theme-toggle { flex: 0 0 auto; }

/* Brand Review Program: the header's one button. */
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px;
  padding: 0 14px 0 17px;
  flex: 0 0 auto;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-ink) 16%, transparent), 0 1px 2px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform 140ms var(--ease-out), background 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.nav-cta-short { display: none; }
.nav-cta-arrow { flex: none; transition: transform 180ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .nav-cta:hover {
    background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-ink);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-ink) 16%, transparent), 0 6px 16px color-mix(in srgb, var(--accent) 34%, transparent);
  }
  .nav-cta:hover .nav-cta-arrow { transform: translateX(3px); }
}
.nav-cta:active { transform: scale(0.97); box-shadow: none; }
.nav-cta[aria-current="page"],
.nav-cta[aria-current="page"]:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-deep); box-shadow: none; transform: none; padding: 0 17px; }
.nav-cta[aria-current="page"] .nav-cta-arrow { display: none; }
@media (prefers-reduced-motion: reduce) {
  .nav-cta:hover { transform: none; }
  .nav-cta:hover .nav-cta-arrow { transform: none; }
}

/* The compact primary CTA in the header */
.nav-actions .btn-primary {
  padding: 9px 16px;
  font-size: 13.5px;
  flex: 0 0 auto;
}

/* ── Hamburger / Menu toggle ───────────────────────────────────── */
.menu-toggle {
  display: none;                /* shown only at <=980px */
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink);
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: transform 120ms var(--ease-out), border-color 160ms var(--ease-out), background 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .menu-toggle:hover { border-color: var(--line-strong); }
}
.menu-toggle:active {
  transform: scale(0.95);
}
.menu-toggle svg { width: 18px; height: 18px; }
.menu-toggle .icon-x { display: none; }
.menu-toggle[aria-expanded="true"] .icon-burger { display: none; }
.menu-toggle[aria-expanded="true"] .icon-x { display: block; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  transition: transform 120ms var(--ease-out), background 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
}

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
@media (hover: hover) and (pointer: fine) {
  .btn-secondary:hover { border-color: var(--ink); }
}

.btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
}
@media (hover: hover) and (pointer: fine) {
  .btn-accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
}

.theme-toggle {
  width: 38px; height: 38px;
  border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  transition: transform 120ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out), background 160ms var(--ease-out);
  flex: 0 0 auto;
}
@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
}
.theme-toggle:active { transform: scale(0.95); }
.theme-toggle svg { width: 16px; height: 16px; display: none; }
/* The icon shows the current choice: sun = Light, moon = Dark, screen = System (follows the device) */
.theme-toggle[data-mode="light"] .sun,
.theme-toggle[data-mode="dark"] .moon,
.theme-toggle[data-mode="system"] .auto,
.theme-toggle:not([data-mode]) .moon { display: block; }

/* Theme switching (nc-site.js): no component fades on its own while colours change, and where the
   browser supports View Transitions the new theme spreads from the toggle in one smooth reveal. */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after { transition: none !important; }
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-reveal::view-transition-new(root) { animation: nc-theme-reveal 420ms var(--ease-out) both; }
@keyframes nc-theme-reveal {
  from { clip-path: circle(0 at var(--theme-x, 50%) var(--theme-y, 0)); }
  to { clip-path: circle(var(--theme-r, 150vmax) at var(--theme-x, 50%) var(--theme-y, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------------------------------------------------------------- */
/* Hero                                                              */
/* ---------------------------------------------------------------- */
.hero {
  padding: var(--s-9) 0 var(--s-8);
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--s-8);
  align-items: center;
}
.hero h1 {
  font-size: clamp(44px, 7vw, 88px);
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin-bottom: var(--s-5);
  font-weight: 500;
}
.hero h1 em {
  font-style: normal;
  font-family: "Instrument Serif", "Source Serif 4", Georgia, serif;
  color: var(--accent);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.hero .lede {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink-soft);
  max-width: 54ch;
  margin-bottom: var(--s-6);
  line-height: 1.5;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--s-6); }
.hero .btn { padding: 14px 24px; font-size: 15px; }

.trust-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 10px 8px 12px;
  margin-top: 10px;
  background: color-mix(in oklab, var(--bg-elev) 88%, var(--accent-soft));
  border: 1px solid color-mix(in oklab, var(--line) 72%, var(--accent));
  border-radius: var(--r-md);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.35;
}
.trust-note .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #5ba672;
  box-shadow: 0 0 0 3px color-mix(in oklab, #5ba672 22%, transparent);
  flex: 0 0 auto;
  display: inline-block;
}
.trust-note-copy { display: grid; gap: 1px; min-width: 0; }
.trust-note strong {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.trust-note-copy span { color: var(--ink-muted); }
.trust-note a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  color: var(--accent-deep);
  font-family: var(--font-mono);
  font-size: 10px;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 42%, transparent);
}
.trust-note a:hover { color: var(--accent); border-color: var(--accent); }
.trust-note a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 480px) {
  .trust-note { grid-template-columns: auto minmax(0, 1fr); width: 100%; }
  .trust-note a { grid-column: 2; justify-self: start; }
}

/* Persistent scroll helper — injected by nc-site.js on every site page. */
.back-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--accent) 56%, var(--ink));
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ink) 20%, transparent);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(.94);
  pointer-events: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.back-top.show { opacity: 1; transform: none; pointer-events: auto; }
.back-top .ring { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); transform: rotate(-90deg); }
.back-top .ring .rfg { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.back-top .arr { position: relative; z-index: 1; width: 18px; height: 18px; }
.back-top::after {
  content: 'Back to top';
  position: absolute;
  right: calc(100% + 10px);
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(4px);
  pointer-events: none;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .back-top:hover { transform: translateY(-2px); box-shadow: 0 14px 28px color-mix(in srgb, var(--ink) 28%, transparent); }
  .back-top:hover::after { opacity: 1; transform: none; }
}
.back-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.back-top:focus-visible::after { opacity: 1; transform: none; }
.back-top:active { transform: scale(.94); }
@media (max-width: 720px) {
  .back-top { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; }
}
@media print { .back-top { display: none !important; } }

/* ================================================================ */
/* Hero illustration                                                 */
/* ================================================================ */
.hero-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 520px;
  min-height: 380px;
  margin-left: auto;
  /* Allow capsules to peek outside the visual bounds */
  overflow: visible;
}
.hero-blob {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--accent-soft) 0%, var(--butter) 60%, var(--mint) 100%);
  border-radius: 48% 52% 62% 38% / 55% 44% 56% 45%;
  filter: blur(0.4px);
  animation: blob 22s ease-in-out infinite;
  will-change: transform, border-radius;
  transform: translate3d(0,0,0);
}
.hero-blob.blob-2 {
  inset: 10% 15% 20% 5%;
  background: linear-gradient(200deg, var(--rose), var(--sky));
  opacity: 0.55;
  mix-blend-mode: multiply;
  animation-duration: 28s;
  animation-direction: reverse;
}
@keyframes blob {
  0%, 100% { border-radius: 48% 52% 62% 38% / 55% 44% 56% 45%; transform: translate3d(0,0,0) rotate(0deg); }
  33% { border-radius: 62% 38% 42% 58% / 44% 56% 44% 56%; transform: translate3d(-4%, 2%, 0) rotate(8deg); }
  66% { border-radius: 40% 60% 58% 42% / 60% 40% 60% 40%; transform: translate3d(3%, -3%, 0) rotate(-6deg); }
}

.hero-capsule {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px;
  white-space: nowrap;
  will-change: transform;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  animation: capsuleIn .7s cubic-bezier(.2,.7,.3,1) forwards, float1 7s ease-in-out infinite;
}
.hero-capsule .cap-label { color: var(--ink-muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-capsule .cap-value { font-weight: 600; color: var(--ink); font-size: 15px; letter-spacing: -0.01em; }

.hero-capsule.c1 {
  top: 8%; left: -4%;
  animation-delay: .15s, .85s;
  animation-duration: .7s, 7s;
}
.hero-capsule.c2 {
  top: 42%; right: 2%;
  animation-delay: .30s, .80s;
  animation-duration: .7s, 8s;
  animation-direction: normal, reverse;
}
.hero-capsule.c3 {
  bottom: 6%; left: 12%;
  animation-delay: .45s, .55s;
  animation-duration: .7s, 9s;
}

@keyframes capsuleIn {
  0%   { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.96); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes float1 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero-blob, .hero-blob.blob-2 { animation: none; }
  .hero-capsule { animation: capsuleIn .4s ease-out forwards; }
}

/* ---------------------------------------------------------------- */
/* Stats                                                             */
/* ---------------------------------------------------------------- */
.stats {
  padding: var(--s-6) 0 var(--s-8);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat {
  background: var(--bg-elev);
  padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column; gap: 6px;
}
.stat .num {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.2vw, 56px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.stat .num .unit { font-size: 0.55em; color: var(--ink-muted); font-weight: 400; margin-left: 2px; }
.stat .label { font-size: 14px; color: var(--ink-soft); }

/* ---------------------------------------------------------------- */
/* Cards (guides, protocols, reviews, ingredients)                   */
/* ---------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card-grid.four { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex; flex-direction: column;
  gap: var(--s-3);
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
  position: relative;
  min-height: 100%;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}
.card:active { transform: scale(0.99); }
.card-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  width: fit-content;
}
.card-tag .swatch {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-brand);
}
.card h3 {
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-weight: 500;
}
.card p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
  flex-grow: 1;
}
.card-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-muted);
}
.card-meta .read-link {
  color: var(--ink);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 160ms var(--ease-out), gap 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .read-link { color: var(--accent); gap: 10px; }
}

/* Guide cards — compact covers and a consistent reading hierarchy */
.guide-card {
  min-height: 354px;
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.guide-card .visual {
  margin: 0;
  height: 112px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.guide-card .visual::before {
  content: 'GUIDE';
  position: absolute; top: 12px; left: 14px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; color: var(--ink-soft);
  opacity: .72;
}
.guide-card.g1 .visual { background: linear-gradient(135deg, var(--accent-soft), var(--butter)); }
.guide-card.g2 .visual { background: linear-gradient(135deg, var(--mint), var(--sky)); }
.guide-card.g3 .visual { background: linear-gradient(135deg, var(--sky), var(--rose)); }
.guide-card.g4 .visual { background: linear-gradient(135deg, var(--butter), var(--accent-soft)); }
.guide-card.g5 .visual { background: linear-gradient(135deg, var(--rose), var(--mint)); }
.guide-card.g6 .visual { background: linear-gradient(135deg, var(--mint), var(--butter)); }

.guide-card .visual .glyph {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 72px;
  color: var(--ink);
  opacity: 0.22;
  letter-spacing: -0.04em;
  font-style: italic;
  transition: transform 240ms var(--ease-out), opacity 240ms var(--ease-out);
}
.guide-card .card-tag {
  margin: 16px 18px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.guide-card h3 {
  margin: 10px 18px 0;
  min-height: 3.45em;
  font-size: 20px;
  line-height: 1.15;
}
.guide-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 10px 18px 0;
  font-size: 14px;
  line-height: 1.48;
}
.guide-card .card-meta {
  margin-top: auto;
  min-height: 52px;
  padding: 12px 18px 14px;
  font-size: 11px;
}
.guide-card .read-link {
  padding: 5px 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .035em;
}
@media (hover: hover) and (pointer: fine) {
  .guide-card:hover .visual .glyph { transform: scale(1.08) translateY(-2px); opacity: .3; }
  .guide-card:hover .read-link { gap: 11px; }
}
.guide-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- */
/* Protocol cards                                                    */
/* ---------------------------------------------------------------- */
.protocol-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.protocol {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex; flex-direction: column;
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
  position: relative;
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .protocol:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
}
.protocol:active { transform: scale(0.99); }
.protocol-tag {
  align-self: flex-start;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: var(--s-4);
}
[data-theme="dark"] .protocol-tag { background: var(--accent-soft); color: var(--accent); }
.protocol h3 {
  font-size: 20px;
  line-height: 1.2;
  margin-bottom: var(--s-3);
}
.protocol p {
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.5;
  margin-bottom: var(--s-5);
  flex-grow: 1;
}
.protocol-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.protocol .price {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.protocol .price span { color: var(--ink-muted); font-size: 13px; font-weight: 400; }
.protocol .btn { padding: 8px 14px; font-size: 13px; }

/* ---------------------------------------------------------------- */
/* Why / features                                                    */
/* ---------------------------------------------------------------- */
.why {
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
}
.feature .icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-5);
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.feature:nth-child(2) .icon { background: var(--ok-bg); color: var(--ok-ink); }
.feature:nth-child(3) .icon { background: var(--info-bg); color: var(--info-ink); }

.feature .icon svg { width: 24px; height: 24px; }
.feature h3 {
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
  font-weight: 500;
}
.feature p {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 36ch;
}

/* Methodology callout */
.methodology {
  margin-top: var(--s-8);
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--s-7);
  align-items: center;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .methodology {
  background: var(--accent-soft);
  color: var(--ink);
}
.methodology::before {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: var(--accent-brand);
  opacity: 0.25;
  filter: blur(40px);
}
.methodology .eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: var(--s-3);
}
.methodology h3 {
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: var(--s-4);
}
.methodology p { opacity: 0.75; font-size: 15px; line-height: 1.55; max-width: 44ch; }
.methodology-scores {
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
}
.score-row {
  display: grid;
  grid-template-columns: 120px 1fr 48px;
  gap: 16px;
  align-items: center;
  font-size: 14px;
}
.score-row .sr-label { opacity: 0.85; }
.score-row .sr-bar {
  height: 8px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}
[data-theme="dark"] .score-row .sr-bar { background: rgba(0,0,0,0.12); }
.score-row .sr-bar > span {
  display: block; height: 100%;
  background: var(--accent-brand);
  border-radius: inherit;
  width: 0;
  transition: width 1.2s cubic-bezier(.2,.7,.3,1);
}
.score-row .sr-val {
  font-family: var(--font-mono);
  text-align: right;
  opacity: 0.9;
}

/* ---------------------------------------------------------------- */
/* Categories                                                        */
/* ---------------------------------------------------------------- */
.category-cloud {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: transform 120ms var(--ease-out), border-color 160ms var(--ease-out), background 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover {
    border-color: var(--ink);
    background: var(--surface);
    transform: translateY(-1px);
  }
}
.chip:active { transform: scale(0.96); }
.chip .count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--bg);
  border: 1px solid var(--line);
}
.chip.wip { color: var(--ink-muted); }
.chip.wip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--butter); border: 1px solid var(--line-strong); }

/* ---------------------------------------------------------------- */
/* Reviews                                                           */
/* ---------------------------------------------------------------- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.review {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .review:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
}
.review:active { transform: scale(0.99); }
.review-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.review .brand-line {
  font-size: 12px; color: var(--ink-muted);
  letter-spacing: 0.04em; text-transform: uppercase;
  font-family: var(--font-mono);
}
.review h3 { font-size: 18px; line-height: 1.25; }
.review .score-badge {
  flex: 0 0 auto;
  width: 60px; height: 60px;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.review .score-badge .big { font-size: 22px; font-weight: 500; line-height: 1; }
.review .score-badge .sml { font-size: 10px; color: var(--ink-muted); margin-top: 2px; font-family: var(--font-mono); }
.review .score-badge.hi { background: color-mix(in oklab, #5ba672 16%, var(--bg-elev)); border-color: color-mix(in oklab, #5ba672 40%, var(--line)); }
.review .score-badge.md { background: color-mix(in oklab, var(--butter) 60%, var(--bg-elev)); }
.review .score-badge.lo { background: color-mix(in oklab, var(--accent) 12%, var(--bg-elev)); border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); }
.review .summary {
  color: var(--ink-soft); font-size: 14.5px; line-height: 1.5;
  flex-grow: 1;
}
.review-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.review-tags span {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  font-family: var(--font-mono);
}

/* ---------------------------------------------------------------- */
/* Ingredient library                                                */
/* ---------------------------------------------------------------- */
.ingredient-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.ingredient {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .ingredient:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
}
.ingredient:active { transform: scale(0.99); }
.ingredient .ing-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.ingredient h3 { font-size: 20px; letter-spacing: -0.02em; font-weight: 500; }
.ingredient .evidence {
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--line);
}
.evidence.e-strong { background: var(--ok-bg); color: var(--ok-ink); border-color: color-mix(in oklab, var(--ok-ink) 30%, var(--line)); }
.evidence.e-mod { background: var(--warn-bg); color: var(--warn-ink); }
.evidence.e-limited { background: var(--bg); color: var(--ink-muted); }

.ingredient .ing-tax {
  font-size: 12.5px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}
.ingredient p {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  flex-grow: 1;
}
.ingredient .ing-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}

/* ---------------------------------------------------------------- */
/* Press / trust strip                                               */
/* ---------------------------------------------------------------- */
.press {
  padding: var(--s-7) 0;
  border-top: 1px solid var(--line);
}
.press-label {
  text-align: center;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s-5);
}
.press-row {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 40px 56px;
  opacity: 0.7;
}
.press-row span {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.press-row span em { font-style: italic; font-family: "Instrument Serif", Georgia, serif; font-weight: 400; }

/* ---------------------------------------------------------------- */
/* Footer + newsletter                                               */
/* ---------------------------------------------------------------- */
.newsletter {
  padding: var(--s-8) 0;
  border-top: 1px solid var(--line);
}
.newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: center;
}
.newsletter h2 {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: var(--s-3);
}
.newsletter p { color: var(--ink-soft); font-size: 16px; max-width: 42ch; }
.newsletter-form {
  display: flex; gap: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--field-border);
  border-radius: var(--r-pill);
  padding: 6px 6px 6px 20px;
  transition: border-color .15s, box-shadow .15s;
}
.newsletter-form:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
}
.newsletter-form input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: inherit; color: var(--ink);
  font-size: 15px;
}
.newsletter-form input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.newsletter-form input::placeholder { color: var(--ink-muted); }
.newsletter-form .btn { padding: 10px 20px; }
.newsletter-meta { font-size: 12.5px; color: var(--ink-muted); margin-top: 10px; }


.site-footer {
  padding: var(--s-7) 0 var(--s-6);
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-7);
}
.footer-brand { display: flex; flex-direction: column; gap: 12px; max-width: 30ch; }
.footer-brand p { color: var(--ink-soft); font-size: 14.5px; }
/* Trustpilot footer button: native link (no iframe) so it follows the light/dark theme exactly. */
.footer-brand .nc-tp-btn {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-top: 6px;
  padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--ink); text-decoration: none;
  font-size: 14px; font-weight: 500; line-height: 1;
  transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.footer-brand .nc-tp-btn-word { font-weight: 700; letter-spacing: -.01em; }
.footer-brand .nc-tp-star { flex: none; }
.footer-brand .nc-tp-btn:hover { border-color: #00b67a; box-shadow: 0 0 0 3px color-mix(in srgb, #00b67a 22%, transparent); }
.footer-brand .nc-tp-btn:active { transform: scale(.97); }
.footer-brand .nc-tp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Dark theme: a green badge holds the star, the pill gets a faint green wash, hover fills solid green. */
[data-theme="dark"] .footer-brand .nc-tp-btn {
  padding: 6px 16px 6px 6px; gap: 10px;
  border-color: color-mix(in srgb, #00b67a 55%, var(--line-strong));
  background: linear-gradient(100deg, color-mix(in srgb, #00b67a 16%, var(--surface)), var(--surface) 72%);
}
[data-theme="dark"] .footer-brand .nc-tp-btn-lead { order: 2; margin-right: -3px; color: var(--ink-soft); }
[data-theme="dark"] .footer-brand .nc-tp-star {
  order: 1; box-sizing: content-box; width: 18px; height: 18px; padding: 6px;
  border-radius: 50%; background: #00b67a;
}
[data-theme="dark"] .footer-brand .nc-tp-star path { fill: #0b1f17; }
[data-theme="dark"] .footer-brand .nc-tp-btn-word { order: 3; color: var(--ink); }
[data-theme="dark"] .footer-brand .nc-tp-btn:hover {
  background: #00b67a; border-color: #00b67a; box-shadow: 0 0 0 3px color-mix(in srgb, #00b67a 28%, transparent);
}
[data-theme="dark"] .footer-brand .nc-tp-btn:hover .nc-tp-btn-lead,
[data-theme="dark"] .footer-brand .nc-tp-btn:hover .nc-tp-btn-word { color: #0b1f17; }
[data-theme="dark"] .footer-brand .nc-tp-btn:hover .nc-tp-star { background: #0b1f17; }
[data-theme="dark"] .footer-brand .nc-tp-btn:hover .nc-tp-star path { fill: #00b67a; }
.footer-col h4 {
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s-4);
  font-weight: 500;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--ink-soft); font-size: 14.5px; transition: transform 120ms var(--ease-out), color 160ms var(--ease-out); display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  .footer-col a:hover { color: var(--accent); }
}
.footer-col a:active { transform: scale(0.98); }

.footer-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.footer-socials {
  display: flex; justify-content: center; gap: 8px;
}
.footer-socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-muted);
  transition: transform 120ms var(--ease-out), color 160ms var(--ease-out), background 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .footer-socials a:hover {
    background: var(--accent);
    color: var(--bg);
    transform: translateY(-2px);
  }
}
.footer-socials a:active { transform: scale(0.94); }
.footer-socials svg { width: 22px; height: 22px; }

.footer-google-pref {
  display: flex; justify-content: center;
}


.footer-bottom {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px 32px;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-muted);
}
.footer-meta { display: flex; flex-direction: column; gap: 3px; }
.footer-udyam { font-size: 12.5px; }
.footer-udyam a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.footer-legal a, .footer-legal .nc-cookie-settings { color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.footer-legal a:focus-visible, .footer-udyam a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .footer-legal a:hover, .footer-legal .nc-cookie-settings:hover, .footer-udyam a:hover { color: var(--accent); }
}
.footer-bottom .nc-lang { justify-self: end; margin-right: 60px; } /* Clears the back-to-top button. */
.footer-disclaimer {
  padding: var(--s-4) var(--s-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: var(--s-5);
}
.footer-disclaimer p { margin: 0; }
.footer-disclaimer p + p { margin-top: 1.5em; }
@media (max-width: 900px) {
  .footer-bottom { grid-template-columns: 1fr; justify-items: start; }
  .footer-bottom .nc-lang { justify-self: start; margin-right: 0; }
  .footer-legal a, .footer-legal .nc-cookie-settings { padding: 6px 0; }
}

/* ---------------------------------------------------------------- */
/* Responsive                                                        */
/* ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid, .card-grid.four { grid-template-columns: repeat(2, 1fr); }
  .protocol-grid { grid-template-columns: repeat(2, 1fr); }
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .ingredient-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .methodology { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .newsletter-inner { grid-template-columns: 1fr; }
}

/* Hide CTA + theme toggle at very narrow widths so brand + actions never wrap */
@media (max-width: 540px) {
  .nav-actions .btn-primary { display: none; }
  /* Room for the short button; the theme toggle stays in the menu. */
  .nav-actions .theme-toggle { display: none; }
  .nav-cta-full { display: none; }
  .nav-cta-short { display: inline; }
  .nav-cta { padding: 0 14px; }
  .nav-cta-arrow { display: none; }
}
@media (max-width: 380px) {
  .nav-actions .theme-toggle { display: none; }
  .brand .brand-name { display: none; }
}

@media (max-width: 720px) {
  .section { padding: var(--s-8) 0; }
  .hero { padding: var(--s-7) 0 var(--s-7); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  /* Mobile: keep the capsules — they're the soul of the hero. Just resize. */
  .hero-visual {
    aspect-ratio: 1 / 1;
    width: min(100%, 360px);
    min-height: 0;
    margin: 0 auto;
    overflow: visible;
  }
  .hero-capsule {
    padding: 10px 13px;
    border-radius: var(--r-md);
    gap: 2px;
  }
  .hero-capsule .cap-label { font-size: 9.5px; letter-spacing: 0.1em; }
  .hero-capsule .cap-value { font-size: 13px; }
  .hero-capsule.c1 { top: -2%;  left: -6%;  }
  .hero-capsule.c2 { top: 42%;  right: -4%; }
  .hero-capsule.c3 { bottom: 0%; left: 6%;  }
  .hero .lede { max-width: 100%; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .card-grid, .card-grid.four { grid-template-columns: 1fr; }
  .protocol-grid { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .ingredient-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .footer-brand { grid-column: 1 / -1; }
  .newsletter-form { flex-direction: column; border-radius: var(--r-lg); padding: 12px; gap: 8px; }
  .newsletter-form input { padding: 10px 12px; }
  .newsletter-form .btn { justify-content: center; }
  .hero h1 { font-size: clamp(40px, 11vw, 64px); }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; max-width: 100%; }
  .stats-grid { grid-template-columns: 1fr; }
  .press-row { gap: 20px 28px; }
  .press-row span { font-size: 16px; }
  .hero h1 { font-size: clamp(36px, 12vw, 52px); }
  .section { padding: var(--s-7) 0; }
  .btn { padding: 9px 16px; font-size: 13.5px; }
  .score-row { grid-template-columns: 1fr 48px; }
  .score-row .sr-label { grid-column: 1 / -1; }
  .methodology { padding: var(--s-5); }
}

/* ================================================================ */
/* Mobile-nav drawer + backdrop                                      */
/* ================================================================ */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(26, 23, 20, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms var(--ease-out);
}
.mobile-nav-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  max-width: 100%;
  z-index: 61;
  background: var(--bg-elev);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 300ms var(--ease-drawer);
  pointer-events: none;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-nav.open {
  transform: translateX(0);
  pointer-events: auto;
}

.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--nav-h);
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.mobile-nav-head .brand { font-size: 16px; }
.mobile-nav-head .brand .mark { width: 26px; height: 26px; }
.mobile-nav-close {
  width: 38px; height: 38px;
  border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  transition: transform 120ms var(--ease-out), background 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .mobile-nav-close:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
}
.mobile-nav-close:active { transform: scale(0.95); }
.mobile-nav-close svg { width: 16px; height: 16px; }

.mobile-nav-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mobile-nav-section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 12px 6px 6px;
}
.mobile-nav a.mn-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  padding: 12px 8px;
  border-radius: var(--r-md);
  border-bottom: 0;
  transition: transform 120ms var(--ease-out), background 160ms var(--ease-out), color 160ms var(--ease-out), padding-left 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .mobile-nav a.mn-link:hover,
  .mobile-nav a.mn-link:focus-visible {
    background: color-mix(in oklab, var(--ink) 6%, transparent);
    padding-left: 14px;
  }
}
.mobile-nav a.mn-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.mobile-nav a.mn-link:active { transform: scale(0.98); }
.mobile-nav a.mn-link[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.mobile-nav a.mn-link .mn-arrow {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-muted);
  font-weight: 400;
  transition: color 160ms var(--ease-out), transform 180ms var(--ease-out);
}
.mobile-nav a.mn-link:hover .mn-arrow,
.mobile-nav a.mn-link[aria-current="page"] .mn-arrow {
  color: var(--accent);
  transform: translateX(3px);
}

.mobile-nav-foot {
  flex: 0 0 auto;
  padding: 16px 20px max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-elev);
}
.mobile-nav a.mn-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 14.5px;
  font-weight: 600;
}
.mobile-nav a.mn-cta[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-deep); }
.mobile-nav-foot .mobile-search-trigger {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 14.5px;
  color: var(--ink-muted);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.mobile-nav-foot .mobile-search-trigger:hover { border-color: var(--line-strong); }
.mobile-nav-foot .mobile-search-trigger svg {
  width: 16px; height: 16px;
  color: var(--ink-muted);
  flex: 0 0 auto;
}
.mobile-nav-foot .mn-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-nav-foot .mn-actions .btn-primary {
  flex: 1 1 auto;
  justify-content: center;
  padding: 12px 18px;
  font-size: 14px;
}
.mobile-nav-foot .mn-actions .theme-toggle {
  flex: 0 0 auto;
}

/* Lock body scroll when drawer open */
body.menu-open { overflow: hidden; touch-action: none; }

/* ================================================================ */
/* Nav breakpoints                                                   */
/* ================================================================ */
/* Compact desktops, tablets and smaller: use the drawer, which lists every
   section (the desktop header only shows the four primary links). */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .menu-toggle { display: inline-flex; }
  /* Keep the header search-trigger but icon-only */
  .nav-actions .search-trigger { display: none; }
  /* Matches the menu button beside it. */
  .nav-cta { min-height: 40px; }
}

/* Above 1100: keep mobile drawer DOM but visually hidden */
@media (min-width: 1101px) {
  .mobile-nav, .mobile-nav-backdrop { display: none !important; }
}

/* Desktop header: brand + four primary links + the search pill + theme toggle +
   the Brand Review Program button fit from 1101px up, with the pill's placeholder intact. */

/* Intersection-reveal helper (mild) */
/* Sections are visible by default. Never make core content depend on script-driven reveal effects. */
.reveal,
.reveal.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- */
/* Print stylesheet                                                  */
/* ---------------------------------------------------------------- */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.6;
    max-width: 100%;
  }

  .site-header,
  .site-footer,
  .mobile-nav,
  .mobile-nav-backdrop,
  .search-trigger,
  .theme-toggle,
  .menu-toggle,
  .btn-primary,
  .reading-progress,
  .share-bar,
  .sidebar-buy,
  .toc-card,
  #search-overlay,
  .nc-consent-banner,
  .skip-to-content,
  .nav-actions {
    display: none !important;
  }

  a {
    text-decoration: underline;
    color: #000 !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555 !important;
  }

  a[href^="#"]::after,
  a[href^="javascript"]::after,
  .crumbs a::after {
    content: "";
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  h1, h2, h3, h4 {
    page-break-after: avoid;
    color: #000 !important;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    border: 1px solid #ccc;
    padding: 6px 10px;
    text-align: left;
  }

  .container {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  .article-body,
  .prose {
    max-width: 100%;
  }

  blockquote {
    border-left: 3px solid #000;
    padding-left: 12px;
    margin-left: 0;
  }

  .callout,
  .callout-green,
  .callout-amber,
  .callout-red {
    border: 1px solid #ccc;
    padding: 12px;
  }

  @page {
    margin: 2cm;
  }
}

/* ----------------------------------------------------------------
   "Personally purchased & tested" badge
   Only for products we bought with our own money and used ourselves.
   Hands-on use, not a lab test; it never changes a score.
   Card (reviews, above the product box): <details class="pt-badge">…</details>
   Chip (product cards and lists):        <span class="pt-chip">…</span>
   ---------------------------------------------------------------- */
.pt-badge {
  --pt: var(--accent-deep);
  display: block;
  margin: 0 0 var(--s-5);
  border-radius: 18px;
  border: 1px solid color-mix(in oklab, var(--pt) 22%, var(--line));
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--accent-soft) 85%, transparent) 0%, transparent 55%),
    var(--bg-elev);
  box-shadow: 0 1px 2px rgba(26, 23, 20, .04), 0 8px 24px -12px color-mix(in oklab, var(--pt) 35%, transparent);
  overflow: hidden;
}
.pt-badge > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  -webkit-tap-highlight-color: transparent;
}
.pt-badge > summary::-webkit-details-marker { display: none; }
.pt-badge > summary:focus-visible { outline: 2px solid var(--pt); outline-offset: -2px; border-radius: 18px; }
.pt-icon {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--pt));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -6px color-mix(in oklab, var(--pt) 70%, transparent);
}
.pt-icon svg { width: 24px; height: 24px; }
.pt-text { display: grid; gap: 6px; min-width: 0; }
.pt-eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pt);
}
.pt-title { font-size: 17px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.pt-dates { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-dates > span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; color: var(--ink-soft);
  background: var(--bg); border: 1px solid var(--line);
}
.pt-dates > span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pt); opacity: .7; }
.pt-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--pt); white-space: nowrap;
}
.pt-more svg { width: 16px; height: 16px; transition: transform .25s var(--ease-out); }
.pt-badge[open] .pt-more svg { transform: rotate(180deg); }
.pt-badge > summary:hover .pt-more { text-decoration: underline; text-underline-offset: 3px; }
.pt-note {
  margin: 0; padding: 12px 16px 14px 76px;
  font-size: 14px; line-height: 1.6; color: var(--ink-soft);
  border-top: 1px dashed color-mix(in oklab, var(--pt) 25%, var(--line));
}
.pt-note strong { color: var(--ink); font-weight: 600; }
.pt-badge p.pt-note { font-size: 14.5px; line-height: 1.6; margin: 0; }
.pt-note a { color: var(--pt); }
@media (max-width: 560px) {
  .pt-badge > summary { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px 14px; }
  .pt-icon { width: 40px; height: 40px; border-radius: 12px; }
  .pt-icon svg { width: 21px; height: 21px; }
  .pt-title { font-size: 16px; }
  .pt-more { grid-column: 2; justify-self: start; font-size: 12.5px; }
  .pt-note { padding: 12px 14px 14px; }
}

/* Chip for product cards and list rows */
.pt-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 5px;
  font-size: 11.5px; line-height: 1.3; font-weight: 600; letter-spacing: .01em;
  color: var(--accent-deep);
  background: color-mix(in oklab, var(--bg-elev) 70%, var(--accent-soft));
  border: 1px solid color-mix(in oklab, var(--accent-deep) 22%, var(--line));
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
}
.pt-chip svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* ── Generated FAQ section (scripts/update-schema.js, between NC-FAQ markers) ── */
.nc-faq { margin: var(--s-7) 0 var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.nc-faq > h2 { margin: 0 0 var(--s-4); }
.nc-faq-item { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.nc-faq-item:last-child { border-bottom: none; }
.nc-faq-item h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.35; color: var(--ink); margin: 0 0 var(--s-2); }
.nc-faq-item p { color: var(--ink-soft); line-height: 1.65; margin: 0; }

/* ---------------------------------------------------------------- */
/* Accessibility modes                                               */
/* ---------------------------------------------------------------- */

/* "Increase contrast" (macOS, iOS, Windows): secondary text and lines move a step closer to the ink,
   links take the deeper terracotta. Light first, then dark (the :not() keeps the light block out of dark). */
@media (prefers-contrast: more) {
  :root:not([data-theme="dark"]) {
    --ink-soft: #2a2622;
    --ink-muted: #4a443d;
    --line: #a99d8a;
    --line-strong: #8f8473;
    --accent: #934229;
    --accent-deep: #7a3520;
    --field-border: #6b6152;
  }
  [data-theme="dark"] {
    --ink-soft: #f2ebdf;
    --ink-muted: #d6ccbc;
    --line: #5c5042;
    --line-strong: #7a6d5c;
    --accent: #f29b7e;
    --accent-deep: #f7ad94;
    --field-border: #9a8c79;
  }
  a:not([class]) { text-decoration-thickness: 2px; }
}

/* Windows high-contrast themes (forced colours): the system picks every colour, so shapes that are drawn
   only with a fill (buttons, chips, badges, the reading bar) get a real border, and focus uses Highlight. */
@media (forced-colors: active) {
  .btn, .btn-primary, .btn-accent, .btn-secondary,
  .chip, .meta-chip, .card-tag, .cl-tag, .protocol-tag, .select-pill,
  .score-badge, .pt-badge, .pt-chip, .theme-toggle, .menu-toggle {
    border: 1px solid CanvasText;
  }
  .btn-primary, .btn-accent { border-color: ButtonText; }
  :focus-visible { outline: 2px solid Highlight !important; outline-offset: 2px; }
  .reading-progress { forced-color-adjust: none; background: Highlight; }
  .theme-toggle svg, .search-trigger svg { forced-color-adjust: auto; color: ButtonText; }
  main img { filter: none !important; }
}

/* Printing from dark mode: paper is always light. Reset the theme to the light palette so borders, chips and
   form controls print as they do from light mode (the print rules above already force black text). */
@media print {
  [data-theme="dark"] {
    color-scheme: light;
    --bg: #f7f3ec; --bg-elev: #fdfbf6; --surface: #ffffff;
    --ink: #1a1714; --ink-soft: #3e3933; --ink-muted: #655e55;
    --line: #ded3c2; --line-strong: #cbbfac; --field-border: #8f8473;
    --accent: #ad5639; --accent-brand: #c96442; --accent-ink: #ffffff; --accent-soft: #f4e2d8; --accent-deep: #934229;
    --mint: #d8e6d5; --sky: #d7e3ec; --butter: #f4e5b8; --rose: #f0d4cb;
    --ok-bg: #d8e6d5; --ok-ink: #2a5638; --warn-bg: #f4e5b8; --warn-ink: #5f450c;
    --bad-bg: #f0d4cb; --bad-ink: #862713; --info-bg: #d7e3ec; --info-ink: #24496a;
  }
  [data-theme="dark"] img { filter: none !important; }
}