/* =============================================================================
   Stack-kit — brand foundation (tokens · animated mark · components)
   Grounds the live Brand V2 system (tokens.json + brand-v2.css). Cream-editorial.
   ============================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
  /* Surface — warm cream, never pure white as page bg */
  --bg:#fafaf9; --bg-elev:#ffffff; --bg-soft:#f4f4f2; --bg-dark:#191c19;
  /* Ink hierarchy — never pure black */
  --ink:#18181a; --ink-2:#4a4a4d; --ink-3:#5f5f58;
  /* Accent — teal = system trust */
  --accent:#1e6b6e; --accent-soft:#2d8585; --accent-ink:#0d3a3c; --accent-tint:#e8f0f0;
  /* Semantic — sparingly */
  --success:#15803d; --warning:#d97706; --warning-ink:#9a5b00; --danger:#b91c1c;
  /* Hairlines */
  --hairline:#e7e6e1; --hairline-strong:#dad9d2;
  /* Type roles — three voices, no fourth */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ink-mark:var(--ink);
  /* 12 domain pairs (a→b) */
  --d-athletic-a:#c76634; --d-athletic-b:#e1854e;
  --d-sleep-a:#3d2d8a;    --d-sleep-b:#2f226c;
  --d-cognitive-a:#2b6fd4;--d-cognitive-b:#2056a9;
  --d-cardio-a:#a63d49;   --d-cardio-b:#c95764;
  --d-cleanse-a:#497a45;  --d-cleanse-b:#79ab66;
  --d-recovery-a:#bf4f7e; --d-recovery-b:#d96f9c;
  --d-immune-a:#3d8a7a;   --d-immune-b:#5cb098;
  --d-metabolic-a:#e85e1a;--d-metabolic-b:#b94712;
  --d-hormonal-a:#8a3d6b; --d-hormonal-b:#b85a90;
  --d-energy-a:#c99522;   --d-energy-b:#e3b94a;
  --d-mood-a:#6655cf;     --d-mood-b:#8f84e8;
  --d-skin-a:#c66a6f;     --d-skin-b:#ecb0a6;
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent-tint); }

/* ---- Type primitives ---- */
.serif{ font-family:var(--serif); }
.mono{ font-family:var(--mono); }
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.eyebrow.teal{ color:var(--accent); }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.005em;
  padding:12px 20px; border-radius:6px; border:1px solid transparent;
  transition:transform .25s cubic-bezier(.22,1,.36,1), background .2s, border-color .2s, color .2s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--accent); color:#fafaf9; }
.btn-primary:hover{ background:var(--accent-soft); }
.btn-secondary{ background:var(--bg-soft); color:var(--ink); border-color:var(--hairline-strong); }
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent); }
.btn-ghost{ background:transparent; color:var(--ink-2); }
.btn-ghost:hover{ color:var(--accent); }

/* ---- Citation chip (study N + effect size) ---- */
.cite-chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--ink-2);
  background:var(--bg-soft); border:1px solid var(--hairline); border-radius:3px;
  padding:3px 8px; white-space:nowrap;
  transition:border-color .15s, color .15s, background .15s;
}
.cite-chip:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-tint); }
.cite-chip .es-bar{ display:inline-flex; align-items:center; gap:2px; }
.cite-chip .es-bar i{ width:3px; height:9px; background:var(--hairline-strong); display:block; }
.cite-chip .es-bar i.on{ background:var(--accent); }

/* ---- Domain gradient chip (wayfinding; hard-cornered like the mark) ---- */
.d-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:3px; flex:0 0 auto;
  position:relative; isolation:isolate; overflow:hidden;
}
.d-chip::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2' fill='%23000' opacity='0.12'/><rect x='4' y='4' width='2' height='2' fill='%23000' opacity='0.12'/><rect x='2' y='6' width='2' height='2' fill='%23000' opacity='0.09'/><rect x='6' y='2' width='2' height='2' fill='%23000' opacity='0.09'/></svg>");
  background-size:8px 8px; mix-blend-mode:multiply;
}
.d-athletic{ background:linear-gradient(135deg,var(--d-athletic-a),var(--d-athletic-b)); }
.d-cardio{ background:linear-gradient(135deg,var(--d-cardio-a),var(--d-cardio-b)); }
.d-cognitive{ background:linear-gradient(135deg,var(--d-cognitive-a),var(--d-cognitive-b)); }
.d-cleanse{ background:linear-gradient(135deg,var(--d-cleanse-a),var(--d-cleanse-b)); }
.d-energy{ background:linear-gradient(135deg,var(--d-energy-a),var(--d-energy-b)); }
.d-hormonal{ background:linear-gradient(135deg,var(--d-hormonal-a),var(--d-hormonal-b)); }
.d-immune{ background:linear-gradient(135deg,var(--d-immune-a),var(--d-immune-b)); }
.d-metabolic{ background:linear-gradient(135deg,var(--d-metabolic-a),var(--d-metabolic-b)); }
.d-mood{ background:linear-gradient(135deg,var(--d-mood-a),var(--d-mood-b)); }
.d-recovery{ background:linear-gradient(135deg,var(--d-recovery-a),var(--d-recovery-b)); }
.d-skin{ background:linear-gradient(135deg,var(--d-skin-a),var(--d-skin-b)); }
.d-sleep{ background:linear-gradient(135deg,var(--d-sleep-a),var(--d-sleep-b)); }

/* ====== VERDICT SYSTEM — MONOCHROME (ink + the single teal) ================
   Color is reserved for DOMAINS. Substantiation + role never use a hue scale.
   Meaning is carried by a teal/ink confidence meter, a glyph, weight & label.
   This system lives mainly in the Check tool — at a real decision moment. */

/* confidence meter — substantiation strength, teal-fills-on-ink, 0–3 */
.confidence{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono);
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); }
.confidence .cm{ display:inline-flex; gap:3px; }
.confidence .cm i{ width:9px; height:9px; display:block; box-shadow:inset 0 0 0 1.5px var(--hairline-strong); }
.confidence[data-level="3"] .cm i{ background:var(--accent); box-shadow:none; }
.confidence[data-level="2"] .cm i:nth-child(-n+2){ background:var(--accent); box-shadow:none; }
.confidence[data-level="1"] .cm i:nth-child(-n+1){ background:var(--ink-2); box-shadow:none; }

/* role tag — monochrome; glyph + label carry it. Only "keep" earns teal. */
.role-tag{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--hairline-strong); border-radius:0;
  padding:5px 10px; background:var(--bg-elev); white-space:nowrap; }
.role-tag .g{ font-family:var(--mono); font-weight:700; line-height:1; }
.role-tag.keep{ color:var(--accent); border-color:rgba(30,107,110,.45); background:var(--accent-tint); }
.role-tag.dupe{ color:var(--ink); }
.role-tag.skip{ color:var(--ink-3); border-style:dashed; }
.role-tag.none{ color:var(--ink-3); }

/* slim inline verdict — substantiation word + meter, monochrome */
.verdict-line{ display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; }
.verdict-line .vw{ text-transform:uppercase; font-weight:600; letter-spacing:.09em; color:var(--ink); }
.verdict-line.strong .vw{ color:var(--accent); }
.verdict-line.weak .vw{ color:var(--ink-3); }

/* ====== NEW PRIMITIVE: methodology surface ================================= */
.tier-ind{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono);
  font-size:11px; letter-spacing:.04em; color:var(--ink-2); }
.tier-ind .tsq{ display:inline-flex; gap:3px; }
.tier-ind .tsq i{ width:8px; height:8px; background:var(--hairline-strong); display:block; }
.tier-ind[data-tier="1"] .tsq i:nth-child(-n+1),
.tier-ind[data-tier="2"] .tsq i:nth-child(-n+2),
.tier-ind[data-tier="3"] .tsq i:nth-child(-n+3){ background:var(--accent); }
.tested-stamp{ font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); }
.tested-stamp time{ color:var(--ink-2); font-weight:600; }

/* ---- Dither utility ---- */
.with-dither{ position:relative; isolation:isolate; }
.with-dither::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2' fill='%23000' opacity='0.10'/><rect x='4' y='4' width='2' height='2' fill='%23000' opacity='0.10'/><rect x='2' y='6' width='2' height='2' fill='%23000' opacity='0.08'/><rect x='6' y='2' width='2' height='2' fill='%23000' opacity='0.08'/></svg>");
  background-size:8px 8px; mix-blend-mode:multiply; opacity:.7;
}
.with-dither>*{ position:relative; z-index:2; }

/* =============================================================================
   THE MARK — six-square ascending grid, "color as reveal, ink at rest"
   Verbatim behavior from the live brand-v2.css logo system.
   ============================================================================= */
.monogram-img{ display:block; }
.monogram-img rect{ fill:var(--ink-mark); }
.monogram-img.sk-mark-polychrome rect.sk-r1{ --sk-c:#ef4444; }
.monogram-img.sk-mark-polychrome rect.sk-r2{ --sk-c:#f59e0b; }
.monogram-img.sk-mark-polychrome rect.sk-r3{ --sk-c:#10b981; }
.monogram-img.sk-mark-polychrome rect.sk-r4{ --sk-c:#3b82f6; }
.monogram-img.sk-mark-polychrome rect.sk-r5{ --sk-c:#d946ef; }
.monogram-img.sk-mark-polychrome rect.sk-cherry{ --sk-c:#14b8a6; }

@keyframes sk-stack-thunk{
  0%{ fill:var(--sk-c,var(--ink-mark)); transform:translateY(-110px) scaleY(1.15) scaleX(.92); opacity:0; }
  25%{ fill:var(--sk-c,var(--ink-mark)); opacity:1; }
  55%{ fill:var(--sk-c,var(--ink-mark)); transform:translateY(0) scaleY(.72) scaleX(1.20); opacity:1; }
  72%{ fill:var(--sk-c,var(--ink-mark)); transform:translateY(-4px) scaleY(1.06) scaleX(.97); opacity:1; }
  88%{ fill:var(--sk-c,var(--ink-mark)); transform:translateY(-1px) scaleY(1.02) scaleX(.99); opacity:1; }
  100%{ fill:var(--sk-c,var(--ink-mark)); transform:translateY(0) scaleY(1) scaleX(1); opacity:1; }
}
@keyframes sk-stack-cherry{
  0%{ fill:var(--sk-c,var(--ink-mark)); transform:translateY(-150px) scaleY(1.18) scaleX(.9); opacity:0; }
  16%{ fill:var(--sk-c,var(--ink-mark)); transform:translateY(-138px) scale(1); opacity:1; }
  26%{ fill:var(--sk-c,var(--ink-mark)); transform:translateY(-132px) scale(1); opacity:1; }
  58%{ fill:var(--sk-c,var(--ink-mark)); transform:translateY(0) scaleY(.66) scaleX(1.26); opacity:1; }
  74%{ fill:var(--sk-c,var(--ink-mark)); transform:translateY(-5px) scaleY(1.08) scaleX(.95); opacity:1; }
  87%{ fill:var(--sk-c,var(--ink-mark)); transform:translateY(-1px) scaleY(1.02) scaleX(.99); opacity:1; }
  100%{ fill:var(--sk-c,var(--ink-mark)); transform:translateY(0) scaleY(1) scaleX(1); opacity:1; }
}
@keyframes sk-fade-to-ink{ from{ fill:var(--sk-c,var(--ink-mark)); } to{ fill:var(--ink-mark); } }
@keyframes sk-sweep-flash{
  0%{ fill:var(--ink-mark); } 20%{ fill:var(--sk-c,var(--ink-mark)); }
  68%{ fill:var(--sk-c,var(--ink-mark)); } 100%{ fill:var(--ink-mark); }
}
@keyframes sk-twinkle-flash{
  0%{ fill:var(--ink-mark); transform:scale(1); }
  22%{ fill:var(--sk-c,var(--ink-mark)); transform:scale(1.16); }
  42%{ fill:var(--sk-c,var(--ink-mark)); transform:scale(.96); }
  60%{ fill:var(--sk-c,var(--ink-mark)); transform:scale(1.08); }
  78%{ fill:var(--sk-c,var(--ink-mark)); transform:scale(1.0); }
  100%{ fill:var(--ink-mark); transform:scale(1); }
}
html.sk-anim-sweep .monogram-img.sk-stack rect{ animation:none; opacity:1; transform:none; fill:var(--ink-mark); }
html.sk-anim-sweep .monogram-img.sk-stack rect.sk-r1{ animation:sk-sweep-flash 1.15s ease-in-out 0s forwards; }
html.sk-anim-sweep .monogram-img.sk-stack rect.sk-r2{ animation:sk-sweep-flash 1.15s ease-in-out .13s forwards; }
html.sk-anim-sweep .monogram-img.sk-stack rect.sk-r4{ animation:sk-sweep-flash 1.15s ease-in-out .21s forwards; }
html.sk-anim-sweep .monogram-img.sk-stack rect.sk-r3{ animation:sk-sweep-flash 1.15s ease-in-out .26s forwards; }
html.sk-anim-sweep .monogram-img.sk-stack rect.sk-r5{ animation:sk-sweep-flash 1.15s ease-in-out .34s forwards; }
html.sk-anim-sweep .monogram-img.sk-stack rect.sk-cherry{ animation:sk-sweep-flash 1.15s ease-in-out .47s forwards; }
html.sk-anim-twinkle .monogram-img.sk-stack rect{ animation:none; opacity:1; transform:none; transform-origin:50% 50%; fill:var(--ink-mark); }
html.sk-anim-twinkle .monogram-img.sk-stack rect.sk-r1{ animation:sk-twinkle-flash 1.30s ease-out 0s forwards; }
html.sk-anim-twinkle .monogram-img.sk-stack rect.sk-r3{ animation:sk-twinkle-flash 1.30s ease-out .14s forwards; }
html.sk-anim-twinkle .monogram-img.sk-stack rect.sk-r2{ animation:sk-twinkle-flash 1.30s ease-out .26s forwards; }
html.sk-anim-twinkle .monogram-img.sk-stack rect.sk-r5{ animation:sk-twinkle-flash 1.30s ease-out .38s forwards; }
html.sk-anim-twinkle .monogram-img.sk-stack rect.sk-r4{ animation:sk-twinkle-flash 1.30s ease-out .50s forwards; }
html.sk-anim-twinkle .monogram-img.sk-stack rect.sk-cherry{ animation:sk-twinkle-flash 1.30s ease-out .64s forwards; }

.monogram-img.sk-stack rect{ opacity:1; transform-box:fill-box; transform-origin:50% 100%; animation-fill-mode:both; }
.monogram-img.sk-stack{
  --sk-thunk-dur:.72s; --sk-stagger:.19s; --sk-cherry-dur:1.0s;
  --sk-cherry-delay:1.40s; --sk-fade-pause:1.40s; --sk-fade-dur:.70s;
}
html.sk-anim-stack:not(.sk-anim-settled) .monogram-img.sk-stack rect{ opacity:0; }
html.sk-anim-stack:not(.sk-anim-settled) .monogram-img.sk-stack rect.sk-r1{ animation:
  sk-stack-thunk var(--sk-thunk-dur) cubic-bezier(.32,1.75,.48,1) calc(.10s + var(--sk-stagger)*0) both,
  sk-fade-to-ink var(--sk-fade-dur) ease-out calc(.10s + var(--sk-cherry-delay) + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-stack:not(.sk-anim-settled) .monogram-img.sk-stack rect.sk-r2{ animation:
  sk-stack-thunk var(--sk-thunk-dur) cubic-bezier(.32,1.75,.48,1) calc(.10s + var(--sk-stagger)*1) both,
  sk-fade-to-ink var(--sk-fade-dur) ease-out calc(.10s + var(--sk-cherry-delay) + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-stack:not(.sk-anim-settled) .monogram-img.sk-stack rect.sk-r3{ animation:
  sk-stack-thunk var(--sk-thunk-dur) cubic-bezier(.32,1.75,.48,1) calc(.10s + var(--sk-stagger)*2) both,
  sk-fade-to-ink var(--sk-fade-dur) ease-out calc(.10s + var(--sk-cherry-delay) + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-stack:not(.sk-anim-settled) .monogram-img.sk-stack rect.sk-r4{ animation:
  sk-stack-thunk var(--sk-thunk-dur) cubic-bezier(.32,1.75,.48,1) calc(.10s + var(--sk-stagger)*3) both,
  sk-fade-to-ink var(--sk-fade-dur) ease-out calc(.10s + var(--sk-cherry-delay) + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-stack:not(.sk-anim-settled) .monogram-img.sk-stack rect.sk-r5{ animation:
  sk-stack-thunk var(--sk-thunk-dur) cubic-bezier(.32,1.75,.48,1) calc(.10s + var(--sk-stagger)*4) both,
  sk-fade-to-ink var(--sk-fade-dur) ease-out calc(.10s + var(--sk-cherry-delay) + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-stack:not(.sk-anim-settled) .monogram-img.sk-stack rect.sk-cherry{ animation:
  sk-stack-cherry var(--sk-cherry-dur) cubic-bezier(.4,1.85,.5,1) var(--sk-cherry-delay) both,
  sk-fade-to-ink var(--sk-fade-dur) ease-out calc(.10s + var(--sk-cherry-delay) + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-settled .monogram-img.sk-stack rect{ opacity:1; animation:none; transform:none; fill:var(--ink-mark); }

html.sk-anim-replay .brand .monogram-img.sk-stack rect{ opacity:0; animation:none; }
html.sk-anim-replay .brand .monogram-img.sk-stack rect.sk-r1{ animation:
  sk-stack-thunk var(--sk-thunk-dur) cubic-bezier(.32,1.75,.48,1) calc(var(--sk-stagger)*0) both,
  sk-fade-to-ink var(--sk-fade-dur) ease-out calc(var(--sk-cherry-delay) - .10s + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-replay .brand .monogram-img.sk-stack rect.sk-r2{ animation:
  sk-stack-thunk var(--sk-thunk-dur) cubic-bezier(.32,1.75,.48,1) calc(var(--sk-stagger)*1) both,
  sk-fade-to-ink var(--sk-fade-dur) ease-out calc(var(--sk-cherry-delay) - .10s + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-replay .brand .monogram-img.sk-stack rect.sk-r3{ animation:
  sk-stack-thunk var(--sk-thunk-dur) cubic-bezier(.32,1.75,.48,1) calc(var(--sk-stagger)*2) both,
  sk-fade-to-ink var(--sk-fade-dur) ease-out calc(var(--sk-cherry-delay) - .10s + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-replay .brand .monogram-img.sk-stack rect.sk-r4{ animation:
  sk-stack-thunk var(--sk-thunk-dur) cubic-bezier(.32,1.75,.48,1) calc(var(--sk-stagger)*3) both,
  sk-fade-to-ink var(--sk-fade-dur) ease-out calc(var(--sk-cherry-delay) - .10s + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-replay .brand .monogram-img.sk-stack rect.sk-r5{ animation:
  sk-stack-thunk var(--sk-thunk-dur) cubic-bezier(.32,1.75,.48,1) calc(var(--sk-stagger)*4) both,
  sk-fade-to-ink var(--sk-fade-dur) ease-out calc(var(--sk-cherry-delay) - .10s + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }
html.sk-anim-replay .brand .monogram-img.sk-stack rect.sk-cherry{ animation:
  sk-stack-cherry var(--sk-cherry-dur) cubic-bezier(.4,1.85,.5,1) calc(var(--sk-cherry-delay) - .10s) both,
  sk-fade-to-ink var(--sk-fade-dur) ease-out calc(var(--sk-cherry-delay) - .10s + var(--sk-cherry-dur) + var(--sk-fade-pause)) both; }

html.sk-logo-seen .monogram-img.sk-stack rect{ opacity:1; animation:none; transform:none; fill:var(--ink-mark); }
@media (prefers-reduced-motion: reduce){
  .monogram-img.sk-stack rect{ animation:none !important; opacity:1 !important; transform:none !important; fill:var(--ink-mark) !important; }
}

/* reveal-on-scroll — visible by default; animates in when .in is added.
   Content is NEVER trapped invisible if JS/observer hiccups. */
.reveal.in{ animation:reveal-rise .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes reveal-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .reveal.in{ animation:none; } }

/* =============================================================================
   COLLECTIBLE DOMAIN MARKS — the play + wayfinding signal. The six-square mark
   recolored to each domain's hue (color = domain, the one place color means).
   Hover = a quick twinkle reward.
   ============================================================================= */
.domain-mark{ display:block; color:var(--ink-mark); }
.domain-mark rect{ fill:currentColor; transform-box:fill-box; transform-origin:50% 50%; }
.dm-athletic{ color:var(--d-athletic-a); } .dm-cardio{ color:var(--d-cardio-a); }
.dm-cognitive{ color:var(--d-cognitive-a); } .dm-cleanse{ color:var(--d-cleanse-a); }
.dm-energy{ color:#b8851d; } .dm-hormonal{ color:var(--d-hormonal-a); }
.dm-immune{ color:var(--d-immune-a); } .dm-metabolic{ color:var(--d-metabolic-a); }
.dm-mood{ color:var(--d-mood-a); } .dm-recovery{ color:var(--d-recovery-a); }
.dm-skin{ color:#b85b61; } .dm-sleep{ color:var(--d-sleep-a); }
@keyframes mark-twinkle{ 0%{transform:scale(1)} 28%{transform:scale(1.2)} 52%{transform:scale(.92)} 74%{transform:scale(1.07)} 100%{transform:scale(1)} }
.tw-host:hover .domain-mark rect, .domain-mark.play rect{ animation:mark-twinkle .7s ease-out both; }
.tw-host:hover .domain-mark rect.sk-r2,.domain-mark.play rect.sk-r2{ animation-delay:.05s; }
.tw-host:hover .domain-mark rect.sk-r3,.domain-mark.play rect.sk-r3{ animation-delay:.10s; }
.tw-host:hover .domain-mark rect.sk-r4,.domain-mark.play rect.sk-r4{ animation-delay:.14s; }
.tw-host:hover .domain-mark rect.sk-r5,.domain-mark.play rect.sk-r5{ animation-delay:.19s; }
.tw-host:hover .domain-mark rect.sk-cherry,.domain-mark.play rect.sk-cherry{ animation-delay:.25s; }
@media (prefers-reduced-motion: reduce){ .domain-mark rect{ animation:none !important; } }

/* domain wall — the collectible grid */
.dwall{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:34px; }
.dtile{ display:flex; flex-direction:column; gap:0; background:var(--bg-elev);
  border:1px solid var(--hairline); border-radius:10px; padding:20px 20px 18px;
  transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .25s; position:relative; }
.dtile:hover{ transform:translateY(-3px); border-color:var(--hairline-strong); box-shadow:0 14px 30px -22px rgba(24,24,26,.4); }
.dtile .dt-top{ display:flex; align-items:center; justify-content:space-between; }
.dtile .domain-mark{ width:30px; height:30px; }
.dtile .dt-count{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.dtile .dt-name{ font-family:var(--serif); font-size:21px; font-weight:600; letter-spacing:-.01em; margin:16px 0 4px; }
.dtile .dt-sub{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); line-height:1.5; }
.dtile.explored::after{ content:"✦ explored"; position:absolute; top:14px; right:46px; font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); opacity:.0; transition:opacity .2s; }
.dtile.explored::after{ opacity:.7; }
@media (max-width:920px){ .dwall{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px){ .dwall{ grid-template-columns:repeat(2,1fr); } }

/* =============================================================================
   PROTOCOL CARDS — the browse/recommendation unit (no verdict crammed in)
   ============================================================================= */
.proto-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:30px; }
@media (max-width:740px){ .proto-grid{ grid-template-columns:1fr; } }
.proto-card{ display:block; background:var(--bg-elev); border:1px solid var(--hairline); border-radius:12px;
  padding:24px; transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .25s, box-shadow .25s; position:relative; }
.proto-card:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:0 16px 34px -24px rgba(30,107,110,.4); }
.proto-card .pc-eyebrow{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.proto-card .pc-eyebrow .domain-mark{ width:16px; height:16px; }
.proto-card h3{ font-family:var(--serif); font-size:23px; font-weight:600; letter-spacing:-.012em; margin:14px 0 8px; line-height:1.12; }
.proto-card .pc-desc{ font-size:14.5px; line-height:1.55; color:var(--ink-2); margin:0; }
.proto-card .pc-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid var(--hairline); }
.proto-card .pc-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-3); }
.proto-card .pc-arrow{ color:var(--ink-3); transition:transform .2s, color .2s; }
.proto-card:hover .pc-arrow{ color:var(--accent); transform:translateX(3px); }

/* stack line — a curated recommendation row (NO verdict stamp; it's already chosen) */
.stk{ border:1px solid var(--hairline-strong); border-radius:12px; overflow:hidden; background:var(--bg-elev); }
.stk-item{ border-bottom:1px solid var(--hairline); }
.stk-item:last-child{ border-bottom:none; }
.stk-head{ display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; padding:20px 24px; }
.stk-name{ font-family:var(--serif); font-size:20px; font-weight:600; letter-spacing:-.01em; margin:0; }
.stk-one{ font-size:14px; line-height:1.5; color:var(--ink-2); margin:6px 0 0; max-width:46em; }
.stk-dose{ text-align:right; }
.stk-dose .dval{ font-family:var(--mono); font-size:15px; font-weight:500; color:var(--ink); white-space:nowrap; }
.stk-dose .dtime{ font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.04em; margin-top:4px; white-space:nowrap; }

/* progressive disclosure — "peel back the label" */
details.peel{ border-top:1px solid var(--hairline); background:var(--bg-soft); }
details.peel > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:11px;
  padding:12px 24px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; user-select:none; transition:color .15s; }
details.peel > summary::-webkit-details-marker{ display:none; }
details.peel > summary:hover{ color:var(--accent); }
details.peel > summary .pk{ display:inline-grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  width:14px; height:14px; gap:1.5px; transition:transform .28s ease; }
details.peel > summary .pk i{ background:var(--ink-3); transition:background .18s; }
details.peel > summary .pk i.e{ background:transparent; }
details.peel[open] > summary{ color:var(--accent); }
details.peel[open] > summary .pk{ transform:rotate(90deg); }
details.peel[open] > summary .pk i{ background:var(--accent); }
details.peel .peel-body{ padding:4px 24px 22px; animation:drawer-fade .35s ease-out; }
@keyframes drawer-fade{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.peel-grid{ display:grid; grid-template-columns:120px 1fr; gap:12px 18px; }
.peel-grid dt{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding-top:2px; }
.peel-grid dd{ margin:0; font-size:14.5px; line-height:1.58; color:var(--ink-2); }
@media (max-width:600px){ .peel-grid{ grid-template-columns:1fr; gap:4px 0; } .peel-grid dd{ margin-bottom:10px; } }

/* =============================================================================
   COLLECTION — "my stack" (tickles the collecting instinct; persists)
   ============================================================================= */
.add-stack{ display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-tint); border:1px solid rgba(30,107,110,.3); border-radius:6px;
  padding:8px 13px; transition:transform .2s, background .2s, color .2s, border-color .2s; }
.add-stack:hover{ transform:translateY(-1px); background:#dcebeb; }
.add-stack .plus{ font-size:14px; line-height:1; }
.add-stack.added{ color:#fafaf9; background:var(--accent); border-color:var(--accent); }
.add-stack.added .plus{ content:"✓"; }

.mystack-btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; background:none; border:none;
  font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--ink-2); padding:6px 0; transition:color .15s; }
.mystack-btn:hover{ color:var(--accent); }
.mystack-btn .ms-count{ display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px;
  padding:0 5px; font-family:var(--mono); font-size:11px; font-weight:600; color:#fafaf9; background:var(--accent); border-radius:9999px; }
.mystack-btn .domain-mark{ width:17px; height:17px; }

/* slide-in panel */
.stack-panel{ position:fixed; top:0; right:0; height:100%; width:380px; max-width:90vw; z-index:120;
  background:var(--bg-elev); border-left:1px solid var(--hairline-strong); box-shadow:-24px 0 60px -30px rgba(24,24,26,.5);
  transform:translateX(100%); transition:transform .34s cubic-bezier(.22,1,.36,1); display:flex; flex-direction:column; }
.stack-panel.open{ transform:none; }
.stack-panel .sp-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--hairline); }
.stack-panel .sp-title{ font-family:var(--serif); font-size:21px; font-weight:600; }
.stack-panel .sp-close{ cursor:pointer; background:none; border:none; color:var(--ink-3); font-size:22px; line-height:1; padding:0; }
.stack-panel .sp-close:hover{ color:var(--ink); }
.stack-panel .sp-body{ overflow-y:auto; flex:1; padding:8px 0; }
.stack-panel .sp-empty{ padding:40px 24px; color:var(--ink-3); font-size:14px; line-height:1.6; text-align:center; }
.sp-item{ display:flex; align-items:flex-start; gap:12px; padding:15px 24px; border-bottom:1px solid var(--hairline); }
.sp-item .domain-mark{ width:18px; height:18px; flex:0 0 auto; margin-top:2px; }
.sp-item .spi-name{ font-family:var(--serif); font-size:16px; font-weight:600; }
.sp-item .spi-meta{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:3px; }
.sp-item .spi-rm{ margin-left:auto; cursor:pointer; background:none; border:none; color:var(--ink-3); font-size:15px; }
.sp-item .spi-rm:hover{ color:var(--danger); }
.stack-panel .sp-foot{ padding:18px 24px; border-top:1px solid var(--hairline); }
.scrim{ position:fixed; inset:0; background:rgba(24,24,26,.32); z-index:110; opacity:0; pointer-events:none; transition:opacity .3s; }
.scrim.open{ opacity:1; pointer-events:auto; }

/* toast */
.toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); z-index:130;
  background:var(--ink); color:#fafaf9; font-family:var(--sans); font-size:13.5px; font-weight:500;
  padding:12px 18px; border-radius:8px; box-shadow:0 18px 40px -18px rgba(0,0,0,.5);
  display:flex; align-items:center; gap:10px; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .domain-mark{ width:15px; height:15px; }

/* =============================================================================
   DOMAIN HERO BAND — large gradient + dither header for a domain page
   ============================================================================= */
.dhero{ color:#fff; padding:62px 0 54px; position:relative; isolation:isolate; overflow:hidden; }
.dhero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.85;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2' fill='%23000' opacity='0.10'/><rect x='4' y='4' width='2' height='2' fill='%23000' opacity='0.10'/><rect x='2' y='6' width='2' height='2' fill='%23000' opacity='0.08'/><rect x='6' y='2' width='2' height='2' fill='%23000' opacity='0.08'/></svg>");
  background-size:8px 8px; mix-blend-mode:multiply; }
.dhero > *{ position:relative; z-index:2; }
.dhero.h-sleep{ background:linear-gradient(135deg,var(--d-sleep-a),var(--d-sleep-b)); }
.dhero .dh-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.dhero h1{ font-family:var(--serif); font-weight:700; font-size:clamp(34px,4.6vw,52px); letter-spacing:-.022em; line-height:1.04; margin:14px 0 0; color:#fff; max-width:18ch; }
.dhero .dh-lede{ font-size:16.5px; line-height:1.6; color:rgba(255,255,255,.92); max-width:42ch; margin:18px 0 0; }
.dhero .dh-meta{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:rgba(255,255,255,.82); margin-top:22px; }
.dhero .domain-mark{ color:#fff; }

/* =============================================================================
   TOOL — "check any supplement" decision surface
   ============================================================================= */
.tool-wrap{ background:var(--bg-elev); border:1px solid var(--hairline-strong); border-radius:14px; overflow:hidden; }
.tool-search{ display:flex; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--hairline); background:var(--bg-soft); }
.tool-search input{ flex:1; font-family:var(--sans); font-size:16px; border:none; background:none; color:var(--ink); padding:6px 0; }
.tool-search input:focus{ outline:none; }
.tool-search .ts-ico{ color:var(--ink-3); font-size:17px; }
.tool-sugg{ display:flex; flex-wrap:wrap; gap:8px; padding:16px 22px; border-bottom:1px solid var(--hairline); }
.sugg-chip{ cursor:pointer; font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; color:var(--ink-2);
  background:var(--bg); border:1px solid var(--hairline-strong); border-radius:9999px; padding:7px 13px; transition:all .15s; }
.sugg-chip:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-tint); }
.tool-result{ padding:30px 26px; }
.tool-empty{ padding:46px 26px; text-align:center; color:var(--ink-3); font-size:15px; line-height:1.6; }

.verdict-hero{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:start; padding-bottom:22px; border-bottom:1px solid var(--hairline); }
.verdict-hero h2{ font-family:var(--serif); font-size:30px; font-weight:600; letter-spacing:-.015em; margin:6px 0 0; }
.verdict-hero .vh-tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.verdict-callout{ font-size:17px; line-height:1.55; color:var(--ink); margin:22px 0 0; max-width:54ch; }
.verdict-callout b{ color:var(--accent); }
.buy-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.evi-row{ display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:22px; padding-top:20px; border-top:1px solid var(--hairline); }

/* =============================================================================
   PAGE CHROME — shared nav, layout, sections, footer across all pages
   ============================================================================= */
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }
.wrap-narrow{ max-width:900px; margin:0 auto; padding:0 32px; }

nav.site{ position:sticky; top:0; z-index:60; background:rgba(250,250,249,.86);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--hairline); }
nav.site .nav-in{ display:flex; align-items:center; gap:22px; height:62px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand .monogram-img,.brand .domain-mark{ width:28px; height:28px; }
.brand span{ font-family:var(--sans); font-weight:700; font-size:17px; letter-spacing:-.018em; }
nav.site .nav-links{ display:flex; align-items:center; gap:22px; margin-left:auto; }
nav.site .nav-links > a{ font-size:13.5px; color:var(--ink-2); font-weight:500; transition:color .15s; }
nav.site .nav-links > a:hover{ color:var(--accent); }
nav.site .nav-links a.active{ color:var(--ink); }
@media (max-width:860px){ nav.site .nav-links .hide-sm{ display:none; } }

section{ padding:70px 0; }
.sec-head{ display:flex; align-items:baseline; gap:16px; }
.sec-num{ font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:.05em; }
.sec-rule{ height:1px; flex:1; background:var(--hairline); }
.sec-title{ font-family:var(--serif); font-size:clamp(28px,3.4vw,38px); font-weight:700; letter-spacing:-.02em; margin:14px 0 0; line-height:1.05; text-wrap:balance; }
.sec-lede{ font-size:16.5px; line-height:1.6; color:var(--ink-2); max-width:50ch; margin:16px 0 0; }

.steps{ margin-top:28px; border-top:1px solid var(--hairline); }
.step{ display:grid; grid-template-columns:54px 1fr auto; gap:24px; padding:24px 0; border-bottom:1px solid var(--hairline); align-items:baseline; }
.step .sn{ font-family:var(--mono); font-size:13px; color:var(--accent); font-weight:600; }
.step h4{ font-family:var(--sans); font-size:18px; font-weight:600; margin:0 0 7px; letter-spacing:-.01em; }
.step p{ margin:0; font-size:15px; line-height:1.58; color:var(--ink-2); max-width:52ch; }
.step .st-meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
@media (max-width:680px){ .step{ grid-template-columns:40px 1fr; } .step .st-meta{ display:none; } }

.floor{ background:var(--bg-dark); color:#e9e9e4; padding:78px 0; }
.floor .eyebrow{ color:#7fb3ac; } .floor .sec-title{ color:#f3f3ef; }
.floor .sec-lede{ color:#a7aaa2; } .floor .sec-rule{ background:rgba(255,255,255,.12); } .floor .sec-num{ color:#7a7d76; }
.refusals{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:34px; }
.refusal{ background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.09); border-radius:9px; padding:22px; }
.refusal .x{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border:1px solid rgba(220,120,110,.5); color:#e08b80; border-radius:4px; font-size:13px; }
.refusal h4{ font-family:var(--sans); font-size:15.5px; font-weight:600; margin:14px 0 8px; color:#f1f1ec; }
.refusal p{ margin:0; font-size:13.5px; line-height:1.56; color:#9b9e96; }
@media (max-width:820px){ .refusals{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .refusals{ grid-template-columns:1fr; } }

.convert{ background:var(--accent-tint); border:1px solid #cfe1e1; border-radius:14px; padding:40px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center; }
.convert h3{ font-family:var(--serif); font-size:28px; font-weight:700; letter-spacing:-.02em; margin:12px 0 10px; color:var(--accent-ink); }
.convert p{ margin:0; font-size:15px; line-height:1.58; color:#235456; }
.sub-form{ display:flex; gap:8px; } 
.sub-form input{ flex:1; font-family:var(--sans); font-size:14px; padding:12px 14px; border:1px solid #bcd4d4; border-radius:7px; background:#fff; color:var(--ink); }
.sub-form input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(30,107,110,.14); }
.sub-meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#4a7173; margin-top:12px; }
@media (max-width:720px){ .convert{ grid-template-columns:1fr; gap:22px; padding:30px 24px; } }

footer.site{ border-top:1px solid var(--hairline); padding:54px 0 40px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; }
.foot-brand p{ font-size:13.5px; line-height:1.55; color:var(--ink-2); margin:14px 0 0; max-width:24em; }
.foot-col h6{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:6px 0 14px; font-weight:600; }
.foot-col a{ display:block; font-size:13.5px; color:var(--ink-2); margin-bottom:10px; transition:color .15s; }
.foot-col a:hover{ color:var(--accent); }
.foot-bottom{ margin-top:44px; padding-top:22px; border-top:1px solid var(--hairline); }
.foot-bottom .fb-meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-3); display:flex; flex-wrap:wrap; gap:8px 18px; text-transform:uppercase; }
.foot-bottom .disclaimer{ font-size:12px; line-height:1.6; color:var(--ink-3); margin-top:18px; max-width:84ch; }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:30px; } }

/* =============================================================================
   LIVING GLYPHS — the real two-tone domain icons (brain / flame / moon / …).
   Flat at rest; a short cuphead-style performance on hover/click. Color lives
   here (domain identity) — never on the verdict system.
   ============================================================================= */
.glyph-host{ display:inline-grid; place-items:center; line-height:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.glyph-svg{ width:100%; height:100%; display:block; overflow:visible; transform-origin:50% 50%; }
.glyph-svg *{ transform-box:fill-box; transform-origin:50% 50%; }
.glyph-svg .gw{ transform-origin:50% 55%; }
@media (prefers-reduced-motion: no-preference){
  .glyph-host:hover .glyph-svg .gw{ animation:gIdle 2.4s ease-in-out infinite; }
  .glyph-svg.playing .gw{ animation:none; }
}
@keyframes gIdle{ 0%,100%{ transform:translateY(0) scale(1);} 50%{ transform:translateY(-2.5%) scale(1.025);} }

.glyph-svg[data-g=athletic] .gw{ transform-origin:50% 100%; }
.glyph-svg[data-g=athletic].playing .gw{ animation:gJump 1s cubic-bezier(.34,1.42,.55,1); }
@keyframes gJump{ 0%{transform:translateY(0) scaleY(1) scaleX(1);} 16%{transform:scaleY(.85) scaleX(1.1);} 38%{transform:translateY(-13%) scaleY(1.08) scaleX(.93);} 60%{transform:translateY(0) scaleY(.93) scaleX(1.06);} 78%{transform:scaleY(1.02) scaleX(.99);} 100%{transform:none;} }
.glyph-svg[data-g=cardio] .ecg{ stroke-dasharray:86; }
.glyph-svg[data-g=cardio].playing .ecg{ animation:gDraw 1.05s ease-in-out; }
@keyframes gDraw{ 0%{stroke-dashoffset:86;} 55%{stroke-dashoffset:0;} 100%{stroke-dashoffset:0;} }
.glyph-svg[data-g=cardio].playing .gw{ animation:gBeat 1.05s ease; }
@keyframes gBeat{ 0%,42%{transform:scale(1);} 54%{transform:scale(1.1);} 66%{transform:scale(.97);} 100%{transform:scale(1);} }
.glyph-svg[data-g=cognitive].playing .lobe.l{ animation:gThinkL 1.25s ease; }
.glyph-svg[data-g=cognitive].playing .lobe.r{ animation:gThinkR 1.25s ease; }
.glyph-svg[data-g=cognitive] .idea{ opacity:.5; }
.glyph-svg[data-g=cognitive].playing .idea{ animation:gSpark 1.25s ease; }
@keyframes gThinkL{ 0%,100%{transform:scale(1) translateX(0);} 34%{transform:scale(1.08) translateX(-4%);} }
@keyframes gThinkR{ 0%,100%{transform:scale(1) translateX(0);} 50%{transform:scale(1.08) translateX(4%);} }
@keyframes gSpark{ 0%,20%{opacity:.25;} 40%{opacity:1;} 60%{opacity:.4;} 80%{opacity:1;} 100%{opacity:.5;} }
.glyph-svg[data-g=cleanse].playing .bub{ animation:gBubble 1.05s cubic-bezier(.34,1.42,.55,1) backwards; }
.glyph-svg[data-g=cleanse].playing .b1{ animation-delay:0s; }
.glyph-svg[data-g=cleanse].playing .b2{ animation-delay:.12s; }
.glyph-svg[data-g=cleanse].playing .b3{ animation-delay:.24s; }
@keyframes gBubble{ 0%{transform:translateY(24%) scale(0);} 55%{transform:translateY(-6%) scale(1.1);} 100%{transform:translateY(0) scale(1);} }
.glyph-svg[data-g=energy].playing .gw{ animation:gZap .85s cubic-bezier(.5,1.4,.5,1); }
.glyph-svg[data-g=energy].playing .p2{ animation:gFlick .85s steps(2,end); }
@keyframes gZap{ 0%{transform:scale(1) rotate(0);} 12%{transform:scale(1.14) rotate(-4deg);} 24%{transform:scale(.95) rotate(3deg);} 40%{transform:scale(1.07) rotate(-2deg);} 58%{transform:scale(.99) rotate(1deg);} 100%{transform:none;} }
@keyframes gFlick{ 0%{opacity:1;} 25%{opacity:.35;} 50%{opacity:1;} 75%{opacity:.45;} 100%{opacity:1;} }
.glyph-svg[data-g=hormonal]{ perspective:300px; }
.glyph-svg[data-g=hormonal] .gw{ transform-style:preserve-3d; }
.glyph-svg[data-g=hormonal].playing .gw{ animation:gPhase 1.5s cubic-bezier(.5,0,.3,1); }
@keyframes gPhase{ 0%{transform:rotateY(0);} 40%{transform:rotateY(-36deg);} 70%{transform:rotateY(20deg);} 100%{transform:rotateY(0);} }
.glyph-svg[data-g=immune].playing .gw{ animation:gBlock 1s cubic-bezier(.34,1.45,.5,1); }
.glyph-svg[data-g=immune].playing{ animation:gFlash 1s ease; }
@keyframes gBlock{ 0%{transform:scale(1);} 14%{transform:scale(.88);} 40%{transform:scale(1.09);} 60%{transform:scale(.98);} 100%{transform:scale(1);} }
@keyframes gFlash{ 0%,30%{filter:none;} 44%{filter:brightness(1.45);} 100%{filter:none;} }
.glyph-svg[data-g=metabolic] .flame{ transform-origin:50% 100%; }
.glyph-svg[data-g=metabolic].playing .flame{ animation:gFlame 1.25s ease-in-out; }
.glyph-svg[data-g=metabolic].playing .inner{ animation:gFlameIn 1.25s ease-in-out .08s; }
@keyframes gFlame{ 0%{transform:scaleY(1) scaleX(1) skewX(0);} 15%{transform:scaleY(1.08) scaleX(.96) skewX(-3deg);} 30%{transform:scaleY(.97) scaleX(1.03) skewX(2deg);} 46%{transform:scaleY(1.06) skewX(-2deg);} 62%{transform:scaleY(.99) skewX(1deg);} 80%{transform:scaleY(1.02) skewX(-1deg);} 100%{transform:none;} }
@keyframes gFlameIn{ 0%,100%{transform:scaleY(1);} 40%{transform:scaleY(.93) translateY(3%);} 70%{transform:scaleY(1.05);} }
.glyph-svg[data-g=mood] .pet{ transform-origin:50% 100%; }
.glyph-svg[data-g=mood].playing .pet{ animation:gBloom 1s cubic-bezier(.34,1.42,.55,1) backwards; }
.glyph-svg[data-g=mood].playing .pc, .glyph-svg[data-g=mood].playing .pc2{ animation-delay:.02s; }
.glyph-svg[data-g=mood].playing .pl, .glyph-svg[data-g=mood].playing .pl2,
.glyph-svg[data-g=mood].playing .pr, .glyph-svg[data-g=mood].playing .pr2{ animation-delay:.16s; }
@keyframes gBloom{ 0%{transform:scale(.18) rotate(0);} 60%{transform:scale(1.05);} 100%{transform:scale(1);} }
.glyph-svg[data-g=recovery].playing .gw{ animation:gHealth 1.1s ease; }
.glyph-svg[data-g=recovery].playing{ animation:gFlash 1.1s ease; }
@keyframes gHealth{ 0%{transform:scale(1);} 16%{transform:scale(1.08);} 30%{transform:scale(1);} 46%{transform:scale(1.13);} 62%{transform:scale(.99);} 100%{transform:scale(1);} }
.glyph-svg[data-g=skin] .drop{ transform-origin:50% 100%; }
.glyph-svg[data-g=skin].playing .drop{ animation:gDrop 1.1s cubic-bezier(.34,1.42,.55,1); }
.glyph-svg[data-g=skin].playing .twinkle{ animation:gTwinkle 1.1s ease .22s; }
@keyframes gDrop{ 0%{transform:translateY(-12%) scaleY(1.1) scaleX(.93);} 32%{transform:translateY(0) scaleY(.86) scaleX(1.1);} 54%{transform:scaleY(1.04) scaleX(.98);} 76%{transform:scaleY(.99);} 100%{transform:none;} }
@keyframes gTwinkle{ 0%,40%{opacity:1; transform:scale(1);} 55%{opacity:.25; transform:scale(.3);} 70%{opacity:1; transform:scale(1.4);} 100%{opacity:1; transform:scale(1);} }
.glyph-svg[data-g=sleep] .gleam{ opacity:.65; }
.glyph-svg[data-g=sleep].playing .moon{ animation:gMoon 1.5s ease-in-out; }
.glyph-svg[data-g=sleep].playing .gleam{ animation:gShimmer 1.5s ease-in-out; }
@keyframes gMoon{ 0%{transform:rotate(0) scale(1);} 26%{transform:rotate(-9deg) scale(1.03);} 56%{transform:rotate(7deg) scale(.99);} 82%{transform:rotate(-3deg);} 100%{transform:none;} }
@keyframes gShimmer{ 0%{transform:translateX(0) skewX(-14deg);} 100%{transform:translateX(36px) skewX(-14deg);} }
@media (prefers-reduced-motion: reduce){
  .glyph-svg.playing *, .glyph-svg.playing{ animation:none !important; }
  .glyph-svg .ecg{ stroke-dasharray:none; }
}

/* glyph host sizes per context */
.dtile .glyph-host{ width:34px; height:34px; }
.feat-top .glyph-host{ width:32px; height:32px; }
.pc-eyebrow .glyph-host{ width:19px; height:19px; }
.sp-item .glyph-host{ width:22px; height:22px; flex:0 0 auto; margin-top:1px; }
.toast .glyph-host{ width:16px; height:16px; }
.vh-tag-host{ width:30px; height:30px; }

/* =============================================================================
   MY STACKS — panel switcher, stack carts, Amazon cart, subscribe & save
   ============================================================================= */
/* panel: tabs + cost + amazon */
.stack-panel .sp-tabs{ display:flex; flex-wrap:wrap; gap:7px; padding:14px 20px; border-bottom:1px solid var(--hairline); }
.sp-tab{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--ink-2); background:var(--bg-soft); border:1px solid var(--hairline); border-radius:9999px; padding:6px 12px; transition:all .15s; }
.sp-tab:hover{ border-color:var(--hairline-strong); color:var(--ink); }
.sp-tab.on{ background:var(--accent); color:#fafaf9; border-color:var(--accent); }
.sp-tab .sp-tab-n{ font-family:var(--mono); font-size:10px; opacity:.85; }
.sp-tab.new{ color:var(--accent); background:transparent; border-style:dashed; }
.stack-panel .sp-foot{ display:flex; flex-direction:column; gap:13px; }
.sp-cost{ display:flex; align-items:baseline; justify-content:space-between; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase; }
.sp-cost b{ font-family:var(--serif); font-size:22px; color:var(--ink); letter-spacing:-.01em; }
.amazon-btn{ display:flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  font-family:var(--sans); font-size:14px; font-weight:700; letter-spacing:.005em; color:#1c1305;
  background:linear-gradient(180deg,#febd69,#ff9900);
  border:1px solid #e08a00; border-radius:9px; padding:13px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .2s cubic-bezier(.22,1,.36,1), filter .2s, box-shadow .2s; }
.amazon-btn:hover{ transform:translateY(-2px); filter:saturate(1.05);
  background:linear-gradient(180deg,#ffcd84,#fb8e00);
  box-shadow:0 14px 30px -16px rgba(255,140,0,.7), inset 0 1px 0 rgba(255,255,255,.55); }
.amazon-btn:active{ transform:translateY(0); }
.amazon-btn .az-cart{ font-family:var(--mono); font-size:15px; }
.sp-manage{ text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--accent); }
.sp-manage:hover{ text-decoration:underline; }

/* regimen manager (stacks.html) */
.stacks-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:32px; }
@media (max-width:780px){ .stacks-grid{ grid-template-columns:1fr; } }
.stack-cart{ background:var(--bg-elev); border:1px solid var(--hairline-strong); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(24,24,26,.04), 0 26px 56px -40px rgba(24,24,26,.34); }
.sc-head{ display:flex; align-items:center; gap:13px; padding:24px 26px 18px; }
.sc-head .glyph-host{ width:26px; height:26px; }
.sc-name{ font-family:var(--serif); font-size:23px; font-weight:600; letter-spacing:-.012em; background:none; border:none; color:var(--ink); padding:0; width:100%; }
.sc-name:focus{ outline:none; border-bottom:1px solid var(--accent); }
.sc-head .sc-del{ margin-left:auto; cursor:pointer; background:none; border:none; color:var(--ink-3); font-size:15px; opacity:.6; transition:opacity .15s,color .15s; }
.sc-head .sc-del:hover{ opacity:1; color:var(--danger); }
.sc-items{ border-top:1px solid var(--hairline); }
.sc-item{ display:flex; align-items:center; gap:13px; padding:14px 26px; border-bottom:1px solid var(--hairline); }
.sc-item:last-child{ border-bottom:none; }
.sc-item .glyph-host{ width:22px; height:22px; flex:0 0 auto; }
.sc-item .sci-name{ font-family:var(--serif); font-size:16.5px; font-weight:600; }
.sc-item .sci-dose{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:2px; }
.sc-item .sci-price{ margin-left:auto; font-family:var(--mono); font-size:13px; color:var(--ink-2); white-space:nowrap; }
.sc-item .sci-rm{ cursor:pointer; background:none; border:none; color:var(--ink-3); font-size:15px; }
.sc-item .sci-rm:hover{ color:var(--danger); }
.sc-empty{ padding:30px 26px; color:var(--ink-3); font-size:14px; line-height:1.6; }
.sc-foot{ margin-top:auto; padding:20px 26px 24px; border-top:1px solid var(--hairline); background:var(--bg-soft); display:flex; flex-direction:column; gap:14px; }
.sc-totes{ display:flex; align-items:baseline; justify-content:space-between; }
.sc-totes .lab{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.sc-totes .amt{ font-family:var(--serif); font-size:26px; font-weight:600; letter-spacing:-.01em; }
.sc-totes .amt small{ font-family:var(--mono); font-size:12px; color:var(--ink-3); font-weight:400; }
.sub-toggle{ display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--accent-tint); border:1px solid #cfe1e1; border-radius:11px; }
.sub-toggle .st-copy{ font-size:13px; line-height:1.45; color:#235456; }
.sub-toggle .st-copy b{ color:var(--accent-ink); }
.switch{ margin-left:auto; flex:0 0 auto; width:44px; height:26px; border-radius:9999px; background:var(--hairline-strong); position:relative; cursor:pointer; transition:background .2s; border:none; }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
.switch.on{ background:var(--accent); }
.switch.on::after{ transform:translateX(18px); }
.new-stack{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:200px;
  border:1.5px dashed var(--hairline-strong); border-radius:18px; background:transparent; cursor:pointer; color:var(--ink-3);
  transition:border-color .2s, color .2s, background .2s; }
.new-stack:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-tint); }
.new-stack .ns-plus{ font-size:26px; }
.new-stack .ns-label{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }

/* =============================================================================
   CLASS & COMFORT — warmer shadows, softer corners, calmer rhythm
   ============================================================================= */
.verdict-card{ border-radius:14px; box-shadow:0 1px 2px rgba(24,24,26,.03), 0 30px 60px -40px rgba(24,24,26,.32); }
.proto-card, .feat{ border-radius:16px; }
.proto-card:hover{ box-shadow:0 22px 44px -28px rgba(30,107,110,.34); }
.dtile{ border-radius:14px; }
.dtile:hover{ box-shadow:0 20px 38px -26px rgba(24,24,26,.34); }
.tool-wrap, .stack-card{ border-radius:16px; }
.btn{ letter-spacing:.004em; }

/* =============================================================================
   GOAL STACKS — the domain gradient returns as a quiet accent, and each stack
   gets a living "coach" read tuned to its goal. Color = domain, as always.
   ============================================================================= */
.stack-cart{ --da:var(--accent); --db:var(--accent-soft); position:relative; }
.stack-cart::before{ content:""; display:block; height:5px; background:linear-gradient(90deg,var(--da),var(--db)); }
.sc-head{ align-items:flex-start; }
.sc-head .sc-glyph{ width:30px; height:30px; flex:0 0 auto; margin-top:2px; }
.sc-id{ display:flex; flex-direction:column; gap:5px; min-width:0; flex:1; }
.sc-goal{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.sc-goal::before{ content:""; width:8px; height:8px; border-radius:2px; background:linear-gradient(135deg,var(--da),var(--db)); }

/* the coach surface — softly washed in the goal's color */
.sc-coach{ padding:18px 26px 20px; border-top:1px solid var(--hairline);
  background:linear-gradient(180deg, color-mix(in srgb, var(--da) 9%, var(--bg-soft)), var(--bg-soft)); }
.scc-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.scc-eyebrow .scc-dot{ width:13px; height:13px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg,var(--da),var(--db)); box-shadow:0 0 0 3px color-mix(in srgb,var(--da) 16%, transparent); }
.scc-read{ font-family:var(--serif); font-size:16px; line-height:1.42; color:var(--ink); margin:12px 0 0; font-style:italic; text-wrap:pretty; }
.scc-tips{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.scc-tips li{ display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start; font-size:13px; line-height:1.5; color:var(--ink-2); }
.scc-tips .tk{ font-family:var(--mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent);
  background:var(--bg-elev); border:1px solid var(--hairline-strong); border-radius:9999px; padding:3px 9px; white-space:nowrap; margin-top:1px; }

/* domain page hero — show the LIVING glyph in a cream chip (the mark already
   sits in the nav above), so the page reads as its goal, not the wordmark */
.dhero .dh-glyph{ width:60px; height:60px; border-radius:15px; background:#fafaf9; display:inline-grid; place-items:center;
  box-shadow:0 14px 34px -16px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.45); }
.dhero .dh-glyph .glyph-svg{ width:34px; height:34px; }

/* =============================================================================
   DOMAIN GRADIENTS — one var map, inherited by any [data-domain] element.
   Define the pair once here; components paint with var(--da)/var(--db).
   This is the single source CC reuses for tiles, hero bands, chips, the cart.
   ============================================================================= */
[data-domain="sleep"]    { --da:var(--d-sleep-a);     --db:var(--d-sleep-b); }
[data-domain="cognitive"]{ --da:var(--d-cognitive-a); --db:var(--d-cognitive-b); }
[data-domain="athletic"] { --da:var(--d-athletic-a);  --db:var(--d-athletic-b); }
[data-domain="hormonal"] { --da:var(--d-hormonal-a);  --db:var(--d-hormonal-b); }
[data-domain="skin"]     { --da:var(--d-skin-a);      --db:var(--d-skin-b); }
[data-domain="digestive"]{ --da:var(--d-cleanse-a);   --db:var(--d-cleanse-b); }
[data-domain="cardio"]   { --da:var(--d-cardio-a);    --db:var(--d-cardio-b); }
[data-domain="metabolic"]{ --da:var(--d-metabolic-a); --db:var(--d-metabolic-b); }
[data-domain="energy"]   { --da:var(--d-energy-a);    --db:var(--d-energy-b); }
[data-domain="immune"]   { --da:var(--d-immune-a);    --db:var(--d-immune-b); }
[data-domain="mood"]     { --da:var(--d-mood-a);      --db:var(--d-mood-b); }
[data-domain="recovery"] { --da:var(--d-recovery-a);  --db:var(--d-recovery-b); }

/* goal wall: a dithered domain-gradient header bleeds to each tile's edge,
   glyph on a cream chip so it stays legible. Body stays cream + ink. */
.dtile{ overflow:hidden; }
.dtile .dt-top{ margin:-20px -20px 0; padding:15px 18px; align-items:flex-start;
  background:linear-gradient(135deg, var(--da,var(--accent)), var(--db,var(--accent-soft)));
  position:relative; isolation:isolate; }
.dtile .dt-top::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; mix-blend-mode:multiply; opacity:.7;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><rect x='0' y='0' width='2' height='2' fill='%23000' opacity='0.12'/><rect x='4' y='4' width='2' height='2' fill='%23000' opacity='0.12'/><rect x='2' y='6' width='2' height='2' fill='%23000' opacity='0.09'/><rect x='6' y='2' width='2' height='2' fill='%23000' opacity='0.09'/></svg>");
  background-size:8px 8px; }
.dtile .dt-top > *{ position:relative; z-index:1; }
.dtile .dt-top .glyph-host{ width:44px; height:44px; background:var(--bg); border-radius:11px; padding:8px;
  box-shadow:0 6px 16px -6px rgba(24,24,26,.5); }
.dtile .dt-count{ color:rgba(255,255,255,.95); }
.dtile .dt-name{ margin-top:16px; }

/* refined: goal tiles read as colored 2D blocks you stack — the color is the
   block's base-edge + drop-shadow, not a slab. Each lifts off the pile on hover. */
.dtile{ overflow:visible; background:var(--bg-elev);
  box-shadow:0 3px 0 color-mix(in srgb, var(--da,var(--accent)) 32%, var(--hairline)),
             0 13px 22px -16px color-mix(in srgb, var(--da,var(--accent)) 60%, transparent);
  transition:transform .22s cubic-bezier(.32,1.6,.5,1), box-shadow .22s, border-color .2s; }
.dtile:hover{ transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--da,var(--accent)) 35%, var(--hairline-strong));
  box-shadow:0 7px 0 color-mix(in srgb, var(--da,var(--accent)) 46%, var(--hairline)),
             0 26px 34px -18px color-mix(in srgb, var(--da,var(--accent)) 66%, transparent); }
.dtile .dt-top{ margin:0; padding:0; background:none; align-items:flex-start; }
.dtile .dt-top::after{ display:none; }
.dtile .dt-top .glyph-host{ width:36px; height:36px; background:none; border-radius:0; padding:0; box-shadow:none; }
.dtile .dt-count{ color:var(--ink-3); }

/* show the goals alphabetically */
.dwall .dtile[data-domain="athletic"] { order:1; }
.dwall .dtile[data-domain="cardio"]    { order:2; }
.dwall .dtile[data-domain="cognitive"] { order:3; }
.dwall .dtile[data-domain="digestive"] { order:4; }
.dwall .dtile[data-domain="energy"]    { order:5; }
.dwall .dtile[data-domain="hormonal"]  { order:6; }
.dwall .dtile[data-domain="immune"]    { order:7; }
.dwall .dtile[data-domain="metabolic"] { order:8; }
.dwall .dtile[data-domain="mood"]      { order:9; }
.dwall .dtile[data-domain="recovery"]  { order:10; }
.dwall .dtile[data-domain="skin"]      { order:11; }
.dwall .dtile[data-domain="sleep"]     { order:12; }

/* ── card craft, site-wide: cream cards that lift; domain cards cast a colored shadow ── */
.proto-card, .tier-card, .money-card, .feat, .stack-cart{ transition:transform .22s cubic-bezier(.32,1.6,.5,1), box-shadow .22s, border-color .2s; }
.tier-card:hover, .money-card:hover, .feat:hover{ transform:translateY(-4px); border-color:var(--hairline-strong); box-shadow:0 18px 32px -24px rgba(24,24,26,.42); }
[data-domain] .proto-card{ box-shadow:0 2px 0 color-mix(in srgb, var(--da,var(--accent)) 26%, var(--hairline)), 0 12px 22px -18px color-mix(in srgb, var(--da,var(--accent)) 55%, transparent); }
[data-domain] .proto-card:hover{ transform:translateY(-4px); box-shadow:0 5px 0 color-mix(in srgb, var(--da,var(--accent)) 42%, var(--hairline)), 0 24px 32px -18px color-mix(in srgb, var(--da,var(--accent)) 62%, transparent); }
.stack-cart:hover{ transform:translateY(-3px); box-shadow:0 1px 2px rgba(24,24,26,.04), 0 30px 52px -34px color-mix(in srgb, var(--da,var(--accent)) 55%, rgba(24,24,26,.5)); }

/* feel the domain inside a domain page: protocol cards carry the gradient */
[data-domain] .proto-card{ position:relative; overflow:hidden; }
[data-domain] .proto-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--da,var(--accent)), var(--db,var(--accent-soft))); }
[data-domain] .proto-card:hover{ border-color:color-mix(in srgb, var(--da) 45%, var(--hairline-strong)); }
[data-domain] .pc-arrow{ color:var(--da,var(--accent)); }

/* My-stacks panel: one collapsible section per domain, each with its gradient spine */
.sp-tabs:empty{ display:none; }
.ms-section{ border-bottom:1px solid var(--hairline); }
.ms-section > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:11px;
  padding:14px 24px 14px 22px; user-select:none; position:relative; }
.ms-section > summary::-webkit-details-marker{ display:none; }
.ms-section > summary::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--da,var(--accent)), var(--db,var(--accent-soft))); }
.ms-section .mss-glyph{ width:22px; height:22px; flex:0 0 auto; }
.ms-section .mss-name{ font-family:var(--serif); font-size:17px; font-weight:600; letter-spacing:-.01em; }
.ms-section .mss-n{ font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.ms-section .mss-chev{ margin-left:auto; color:var(--ink-3); font-size:13px; transition:transform .25s cubic-bezier(.22,1,.36,1); }
.ms-section[open] > summary .mss-chev{ transform:rotate(180deg); color:var(--accent); }
.ms-section .mss-body{ padding-bottom:8px; }