/* ==========================================================================
   Disha — disha.health
   Single stylesheet. Tokens read off the Figma file:
   figma.com/design/AxeS7rkgYRCjDqmfujKMV5/Website
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  --green: #10893e;
  --green-700: #0c6b30;
  --green-900: #094f24;
  --mint-50: #ecfdf5;
  --mint-100: #f0fdf6;
  --mint-200: #d1fae5;
  --mint-300: #a7f3cc;
  --teal: #14b8a6;
  --forest: #07210f;
  --forest-2: #0d3319;

  --ink: #191c1b;
  --muted: #4b5563;
  --muted-2: #9ca3af;
  --line: #e8efe9;

  --amber: #fbbf24;
  --paper: #ffffff;
  --paper-2: #f7faf8;

  --r-btn: 14px;
  --r-card: 16px;
  --r-lg: 22px;
  --r-pill: 100px;

  --shell: 1200px;
  --gut: 24px;

  --shadow-sm: 0 2px 6px rgb(0 0 0 / 0.06);
  --shadow-md: 0 8px 14px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 24px 48px rgb(0 0 0 / 0.10);
  --shadow-phone: 0 40px 60px rgb(0 0 0 / 0.18);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --nav-h: 68px;
}

/* --- Reset -------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-700); }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r-btn);
  font-weight: 700;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 16px; color: #fff; }

/* --- Typography --------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--ink);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 1.9rem + 3vw, 4.25rem); }
h2 { font-size: clamp(1.9rem, 1.5rem + 2vw, 3rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.5rem); letter-spacing: -0.03em; }
h4 { font-size: 1rem; letter-spacing: -0.02em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1rem, .95rem + .3vw, 1.185rem);
  line-height: 1.65;
  color: var(--muted);
  max-width: 62ch;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.muted { color: var(--muted); }
.small { font-size: .875rem; }
.tiny { font-size: .78rem; }

/* --- Layout ------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.stack { display: flex; flex-direction: column; gap: 16px; }

.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  --btn-bg: var(--green);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .2s;
}
.btn:hover {
  color: var(--btn-fg);
  background: var(--green-700);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgb(20 33 27 / .18);
}
.btn:active { transform: translateY(0); }

/* Sheen sweep */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 25%, rgb(255 255 255 / .28) 48%, transparent 70%);
  transform: translateX(-120%);
}
.btn:hover::after { animation: sheen .8s var(--ease-out); }
@keyframes sheen { to { transform: translateX(120%); } }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: 1.5px solid var(--line);
}
.btn--ghost:hover {
  --btn-fg: var(--green);
  background: var(--mint-50);
  border-color: var(--mint-300);
  box-shadow: var(--shadow-md);
}

.btn--lg { padding: 17px 34px; font-size: 1rem; }
.btn--block { width: 100%; }

/* Text link with a nudging arrow */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--green);
}
.arrow-link .arw { transition: transform .25s var(--ease-out); }
.arrow-link:hover .arw { transform: translateX(5px); }
.arrow-link--teal { color: var(--teal); }
.arrow-link--teal:hover { color: #0e9184; }

/* --- Store badges ------------------------------------------------------- */

.store-row { display: flex; gap: 12px; flex-wrap: wrap; }

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: var(--r-btn);
  background: #000;
  color: #fff;
  min-width: 156px;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.store-badge:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgb(0 0 0 / .22);
}
.store-badge svg { flex: none; }
.store-badge__txt { display: flex; flex-direction: column; line-height: 1.15; }
.store-badge__top { font-size: .6875rem; letter-spacing: .02em; opacity: .85; }
.store-badge__btm { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; }

/* --- Cards -------------------------------------------------------------- */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 22px;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s;
}
a.card:hover {
  transform: translateY(-4px);
  border-color: var(--mint-300);
  box-shadow: var(--shadow-lg);
}

/* Condition card */
.cond-card { display: block; color: inherit; }
.cond-card:hover { color: inherit; }

.cond-card h3 { font-size: 1.0625rem; margin-bottom: .3em; }
.cond-card p { color: var(--muted); font-size: .875rem; line-height: 1.55; margin: 0; }

/* Holds the exact final aspect ratio so nothing shifts when art lands. */

/* --- Real images -------------------------------------------------------- */

.media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.avatars img {
  width: 36px;
  height: 36px;
  object-fit: cover;
}

.post__img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.app-shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--mint-50);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.ba-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.ba {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.ba__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ba__shot { position: relative; }
.ba__shot img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
}
.ba__label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgb(7 33 15 / .72);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ba__cap {
  margin: 0;
  padding: 14px 16px 16px;
  font-size: .875rem;
  color: var(--muted);
}

/* --- Navigation --------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(255 255 255 / .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.nav.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px rgb(0 0 0 / .05);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--nav-h);
}

.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); flex-shrink: 0; }
.logo:hover { color: var(--ink); }
.logo__mark {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
  transition: transform .4s var(--ease-spring);
}
.logo__mark img {
  width: 36px;
  height: 36px;
  object-fit: cover;
}
.logo:hover .logo__mark { transform: scale(1.06); }
.logo__name { font-weight: 800; font-size: 1.1875rem; letter-spacing: -0.04em; white-space: nowrap; }
.logo__tag {
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--mint-50);
  color: var(--green);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav__links { display: flex; align-items: center; gap: 4px; margin-left: 12px; }

.nav__link {
  position: relative;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color .2s, background .2s;
}
.nav__link:hover { color: var(--green); background: var(--mint-50); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.nav__link[aria-current="page"] { color: var(--green); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__spacer { margin-left: auto; }

.nav__lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
  font-size: .75rem;
  font-weight: 700;
}
.nav__lang a { padding: 6px 12px; color: var(--muted); transition: background .2s, color .2s; }
.nav__lang a:hover { background: var(--mint-50); color: var(--green); }
.nav__lang a.is-on { background: var(--green); color: #fff; }

/* Mega panel — "Know Your Condition" */
.has-mega { position: relative; }
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;
  width: min(680px, calc(100vw - 48px));
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s;
}
.has-mega:hover .mega,
.has-mega:focus-within .mega,
.mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.mega__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 11px;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 600;
  transition: background .18s, transform .18s;
}
.mega__item:hover { background: var(--mint-50); color: var(--green); transform: translateX(3px); }
.mega__all {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* Hamburger */
.hamburger {
  display: none;
  width: 42px; height: 42px;
  border-radius: 11px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--line);
}
.hamburger span {
  display: block;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease-out), opacity .2s;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 90;
  background: var(--paper);
  padding: 24px var(--gut) 48px;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .38s var(--ease-out), visibility .38s;
}
.drawer.is-open { transform: translateX(0); visibility: visible; }
.drawer a { display: block; color: var(--ink); }
.drawer__group { padding-block: 14px; border-bottom: 1px solid var(--line); }
.drawer__group > h4 {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.drawer__link {
  padding: 10px 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* Visible as soon as the drawer is open. The stagger is an overlay;
   if it never runs (reduced motion, or duration forced to 0), the
   links must not stay at opacity 0. */
.drawer.is-open .drawer__link {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  .drawer.is-open .drawer__link {
    animation: drawer-in .45s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 45ms + 80ms);
  }
}
@keyframes drawer-in {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}
.drawer__sub { font-size: .95rem; font-weight: 600; color: var(--muted); padding: 8px 0; }

/* Collapsed group row, built by disha.js from the group's own heading. It
   carries .drawer__link's type so the menu still reads as one list. */
.drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: left;
}
.drawer__toggle svg {
  flex-shrink: 0;
  color: var(--muted-2);
  transition: transform .25s var(--ease-out);
}
.drawer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer__panel { padding-bottom: 4px; }
.drawer__panel[hidden] { display: none; }

/* Scroll progress */
.progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 150;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--green), var(--teal));
}

/* --- Hero --------------------------------------------------------------- */

.avatars { display: flex; }
.avatars > * {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  background: var(--mint-100);
}
.avatars > * + * { margin-left: -10px; }

/* --- Marquee (investor bar) --------------------------------------------- */

.backer {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.backer img {
  display: block;
  height: 28px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* --- Social / Instagram ------------------------------------------------- */

.post {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  transform-style: preserve-3d;
}
.post:hover { box-shadow: var(--shadow-lg); }
.post__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
.post__av {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
}
.post__head b { display: block; font-size: .8125rem; font-weight: 700; }
.post__head span { font-size: .6875rem; color: var(--muted-2); }
.post__head .ig { margin-left: auto; color: var(--muted-2); }
.post__body { padding: 12px 14px 16px; }

.post__cap { font-size: .8125rem; line-height: 1.6; color: var(--muted); margin: 0 0 8px; }
.post__tag { font-size: .8125rem; font-weight: 700; color: var(--green); }

/* --- Dark stats band ---------------------------------------------------- */

.stat { text-align: center; padding: 22px 12px; }
.stat i {
  display: block;
  font-size: 1.5rem;
  font-style: normal;
  line-height: 1;
  margin-bottom: 12px;
}
.stat__num {
  display: block;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-top: 6px;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Outcome stat card (Results page) */

/* --- Steps -------------------------------------------------------------- */

.steps { display: grid; gap: 28px 24px; }

/* Detailed step row (How it works page) */

/* Connector line behind the steps */

/* --- Testimonials ------------------------------------------------------- */

.testi {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 24px;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.testi:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.testi__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.testi__av {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  flex: none;
}
.testi__head b { display: block; font-size: .9375rem; font-weight: 700; letter-spacing: -0.02em; }
.testi__head span { font-size: .8125rem; color: var(--muted-2); }
.testi__quote { margin: 0; font-size: .9375rem; line-height: 1.7; color: var(--muted); }
.testi__src { margin-top: 12px; font-size: .6875rem; color: var(--muted-2); }

.stars { margin-left: auto; display: inline-flex; gap: 1px; color: var(--amber); flex: none; }
.stars svg { width: 15px; height: 15px; }

/* --- Breadcrumb --------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .8125rem;
  color: var(--muted-2);
  padding-top: 24px;
}
.crumbs a { color: var(--muted); font-weight: 500; }
.crumbs a:hover { color: var(--green); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* --- Prose (article + legal bodies) ------------------------------------- */

.prose { max-width: 68ch; font-size: 1.0625rem; }
.prose > h2 {
  margin-top: 1.8em;
  font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.prose > h3 { margin-top: 1.5em; font-size: 1.1875rem; }
.prose p, .prose li { color: #2c322f; line-height: 1.78; }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--green); }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose strong { font-weight: 700; color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .9375rem; }
.prose th, .prose td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { font-weight: 700; background: var(--paper-2); }
.prose blockquote {
  margin: 1.4em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--mint-300);
  color: var(--muted);
  font-style: italic;
}

/* Direct answer — the paragraph answer engines lift */
.direct-answer {
  padding: 24px 26px;
  border-radius: var(--r-lg);
  background: var(--mint-50);
  border: 1px solid var(--mint-200);
  margin-bottom: 28px;
}
.direct-answer p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 500;
  color: var(--ink);
}
.direct-answer h2 {
  margin: 0 0 .5em;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--green);
  font-weight: 800;
}

/* Article layout with a sticky rail */

.toc { font-size: .875rem; }
.toc h4 {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.toc a {
  display: block;
  padding: 6px 0 6px 14px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-weight: 500;
  transition: color .2s, border-color .2s;
}
.toc a:hover { color: var(--green); }
.toc a.is-active { color: var(--green); border-left-color: var(--green); font-weight: 700; }

.byline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-block: 1px solid var(--line);
  margin-bottom: 28px;
  font-size: .875rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.byline b { color: var(--ink); font-weight: 700; }

.sources { font-size: .9375rem; }
.sources li { margin-bottom: .8em; color: var(--muted); }
.sources a { font-weight: 600; }

/* Disclaimer / warning block */
.warn {
  padding: 20px 24px;
  border-radius: var(--r-card);
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: #7c2d12;
  font-size: .9375rem;
  line-height: 1.65;
}
.warn strong { color: #7c2d12; }
.warn a { color: #9a3412; text-decoration: underline; }

/* Article card */

/* Numbered guidance list */
.numbered { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.numbered li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  font-size: .9375rem;
  transition: border-color .25s, transform .25s var(--ease-out);
}
.numbered li:hover { border-color: var(--mint-300); transform: translateX(4px); }
.numbered li::before {
  counter-increment: n;
  content: counter(n);
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--mint-50);
  color: var(--green);
  font-size: .8125rem;
  font-weight: 800;
}
.numbered { counter-reset: n; }

/* --- Feature card (Science page) ---------------------------------------- */

.feature { padding: 26px 24px; }
.feature i { font-size: 1.75rem; font-style: normal; display: block; margin-bottom: 14px; }
.feature h3 { font-size: 1.0625rem; margin-bottom: .4em; }
.feature p { font-size: .9375rem; color: var(--muted); line-height: 1.65; margin: 0; }

/* --- Footer ------------------------------------------------------------- */

.footer {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 72px) 32px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px 24px;
}
.footer h4 {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted-2);
  margin-bottom: 16px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.footer a { color: var(--muted); font-size: .9375rem; font-weight: 500; }
.footer a:hover { color: var(--green); }
.footer .logo, .footer .logo:hover { color: var(--ink); }
.footer__blurb { font-size: .9375rem; color: var(--muted); max-width: 34ch; margin: 16px 0; }
.footer__backed { font-size: .8125rem; color: var(--muted-2); }

.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  transition: transform .25s var(--ease-out), color .25s, border-color .25s;
}
.socials a:hover { color: var(--green); border-color: var(--mint-300); transform: translateY(-3px); }

.footer__legal {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  color: var(--muted-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --- Back to top -------------------------------------------------------- */

.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 80;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  box-shadow: 0 10px 24px rgb(20 33 27 / .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .3s, transform .3s var(--ease-out), visibility .3s, background .2s;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--green-700); }

/* --- Tools -------------------------------------------------------------- */

.tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}
.tool__panel {
  padding: 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  margin-bottom: 7px;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.field .hint { font-size: .75rem; color: var(--muted-2); font-weight: 500; }
.input, select.input {
  width: 100%;
  padding: 12px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--paper);
  font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgb(16 137 62 / .12);
}
.seg { display: flex; gap: 8px; }
.seg button {
  flex: 1;
  padding: 11px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-btn);
  font-size: .875rem;
  font-weight: 700;
  color: var(--muted);
  transition: all .2s;
}
.seg button[aria-pressed="true"] {
  border-color: var(--green);
  background: var(--mint-50);
  color: var(--green);
}

.result {
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--mint-50);
  border: 1px solid var(--mint-200);
  text-align: center;
}
.result__num {
  font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--green);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.result__tag {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: var(--green);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
}
.result__note { margin-top: 14px; font-size: .875rem; color: var(--muted); }

.scale { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 18px 0 8px; }
.scale span { flex: 1; }
.scale__marks { display: flex; font-size: .625rem; color: var(--muted-2); font-weight: 600; }
.scale__marks span { flex: 1; text-align: center; }

.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); }
table.data { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.data th, table.data td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
table.data th {
  background: var(--paper-2);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  position: sticky;
  top: 0;
}
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--mint-50); }
.pill-gi {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: .75rem;
  font-weight: 800;
}
.gi-low { background: #dcfce7; color: #15803d; }
.gi-med { background: #fef3c7; color: #a16207; }
.gi-high { background: #fee2e2; color: #b91c1c; }

/* --- Scroll reveal -------------------------------------------------------
   Sections fade up once as they come into view. The starting state below is
   inert until the script adds .reveal, and it only ever does that for sections
   sitting below the fold — so nothing in the first screen is hidden and the
   LCP element is never delayed. CSS alone hides nothing: with the script
   blocked, failed or absent, every section renders as the static HTML does.
   Only opacity and transform move, so the reveal costs no layout and no CLS. */

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  
  
  
  .tool { grid-template-columns: minmax(0, 1fr); }
}

.nav__links, .nav__lang, .nav__inner > .btn { flex-shrink: 0; }

/* The tagline gives way first so the six links and the language switch keep their size. */
@media (max-width: 1240px) {
  .logo__tag { display: none; }
}

/* Six top-level links need about 1030px; below that the header uses the drawer. */
@media (max-width: 1080px) {
  .nav__links, .nav__lang { display: none; }
  .hamburger { display: flex; }
  .nav__inner > .btn { display: none; }
}

@media (max-width: 900px) {
  :root { --gut: 20px; }
  
  
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
}

@media (max-width: 620px) {
  .logo__tag { display: none; }
  .grid-2,
.grid-3,
.ba-grid { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  
  .store-badge { flex: 1 1 100%; }
  
}

/* --- Motion preferences ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal,
  .js .reveal.is-in { opacity: 1; transform: none; }
}

@media print {
  .nav,
.footer,
.to-top,
.progress,
.drawer { display: none !important; }

  .js .reveal,
  .js .reveal.is-in { opacity: 1; transform: none; }
}

/* ==========================================================================
   Publisher system
   The design system for disha.health, documented in DESIGN.md. Scoped to
   <body class="pub">, which every page carries. The rules above it are the
   shared primitives it builds on: tokens, reset, layout, navigation chrome,
   footer and the tool widgets.
   ========================================================================== */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched stand-ins, measured against the real faces, so the swap does
   not move the layout where Georgia and Arial exist (desktop, iOS). */
@font-face {
  font-family: "Source Serif Fallback";
  src: local("Georgia Bold"), local("Georgia-Bold");
  size-adjust: 93.3%;
  ascent-override: 111.5%;
  descent-override: 36.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 106.3%;
  ascent-override: 91.3%;
  descent-override: 22.6%;
  line-gap-override: 0%;
}

.pub {
  --p-ink: #14211b;
  --p-ink-2: #3b4842;
  --p-ink-3: #5b6761;
  --p-line: #dde5e0;
  --p-line-soft: #ebf0ed;
  --p-wash: #f3f6f4;
  --p-brand: #0a6b3d;
  --p-brand-2: #07532f;
  --p-mint: #e7f3ec;
  --p-forest: #0b2a1d;
  --p-forest-2: #123a29;
  --p-on-forest: rgb(255 255 255 / .78);
  --p-marigold: #f0a830;
  --p-warn-bg: #fdf6e7;
  --p-warn-line: #ecd6a2;
  --p-warn-ink: #5e410c;

  --p-serif: "Source Serif 4", "Source Serif Fallback", Georgia, "Times New Roman", serif;
  --p-sans: Inter, "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --p-r: 12px;
  --p-r-sm: 8px;
  --nav-h: 64px;
  --shell: 1180px;

  background: #fff;
  color: var(--p-ink);
  font-family: var(--p-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: normal;
  accent-color: var(--p-brand);
}

.pub ::selection { background: #cfe8d9; color: var(--p-ink); }
.pub :focus-visible { outline: 2px solid var(--p-brand); outline-offset: 3px; border-radius: 4px; }
.pub a { color: var(--p-brand); }
.pub a:hover { color: var(--p-brand-2); }
/* .pub a's higher specificity otherwise beats .skip-link's own color, turning
   its white text green on its still-dark background -- 2.6:1, and 1.9:1 on
   hover/focus, both well under the 4.5:1 floor. */
.pub .skip-link,
.pub .skip-link:hover,
.pub .skip-link:focus { color: #fff; }

.pub h1, .pub h2 {
  font-family: var(--p-serif);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.15;
  color: var(--p-ink);
}
.pub h1 { font-size: clamp(2.05rem, 1.55rem + 2.1vw, 3.2rem); margin-bottom: .45em; max-width: 22ch; }
.pub h2 { font-size: clamp(1.5rem, 1.32rem + .85vw, 2rem); margin-bottom: .45em; }
.pub h3, .pub h4 {
  font-family: var(--p-sans);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--p-ink);
}
.pub h3 { font-size: 1.125rem; }

.pub .lede {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.65;
  color: var(--p-ink-2);
  max-width: 64ch;
  letter-spacing: 0;
}

/* --- Buttons ------------------------------------------------------------ */

.pub .btn {
  --btn-bg: var(--p-brand);
  --btn-fg: #fff;
  border-radius: var(--p-r-sm);
  padding: 12px 20px;
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: 0;
  box-shadow: none;
  color: var(--btn-fg);
  transition: background .18s, box-shadow .18s, color .18s;
}
.pub .btn::after { display: none; }
.pub .btn:hover { color: var(--btn-fg); background: var(--p-brand-2); transform: none; box-shadow: 0 2px 8px rgb(7 83 47 / .22); }
.pub .btn:active { background: #05401f; box-shadow: none; }
.pub .btn--lg { padding: 15px 26px; font-size: 1rem; }
.pub .btn--light { --btn-bg: #fff; --btn-fg: var(--p-forest); }
.pub .btn--light:hover { background: var(--p-mint); color: var(--p-forest); box-shadow: 0 2px 10px rgb(0 0 0 / .25); }
.pub .btn--ghost { --btn-bg: transparent; --btn-fg: var(--p-ink); border: 1px solid var(--p-line); }
.pub .btn--ghost:hover { background: var(--p-wash); border-color: var(--p-ink-3); color: var(--p-ink); box-shadow: none; }

.pub .arrow-link { font-weight: 600; font-size: .9375rem; color: var(--p-brand); }

/* --- Chrome: header ----------------------------------------------------- */

.pub .progress { height: 2px; background: var(--p-brand); }

.pub .nav {
  background: rgb(255 255 255 / .96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--p-line);
}
.pub .nav.is-stuck { box-shadow: 0 1px 12px rgb(20 33 27 / .06); }
.pub .nav__inner { gap: 16px; }
/* The header action is secondary, so the page's own button stays the one filled primary. */
.pub .nav__inner > .btn { --btn-bg: #fff; --btn-fg: var(--p-brand); border: 1px solid var(--p-brand); padding: 9px 16px; }
.pub .nav__inner > .btn:hover { background: var(--p-mint); color: var(--p-brand-2); box-shadow: none; }

.pub .logo { gap: 10px; }
.pub .logo__mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--p-line);
  padding: 0;
}
.pub .logo__mark img { width: 22px; height: 22px; object-fit: contain; }
.pub .logo:hover .logo__mark { transform: none; }
.pub .logo__name { font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.03em; }
.pub .logo__tag {
  padding: 0 0 0 2px;
  border-radius: 0;
  border-left: 0;
  background: none;
  color: var(--p-ink-3);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: 0;
}

.pub .nav__links { gap: 2px; margin-left: 8px; }
.pub .nav__link {
  padding: 8px 11px;
  border-radius: 6px;
  color: var(--p-ink-2);
  font-weight: 500;
  font-size: .9375rem;
  letter-spacing: 0;
}
.pub .nav__link:hover { color: var(--p-ink); background: var(--p-wash); }
.pub .nav__link::after { left: 11px; right: 11px; bottom: 0; height: 2px; background: var(--p-brand); }
.pub .nav__link[aria-current="page"] { color: var(--p-ink); }

.pub .nav__lang { border-color: var(--p-line); border-radius: 6px; font-size: .75rem; font-weight: 600; }
.pub .nav__lang a { padding: 6px 10px; color: var(--p-ink-3); }
.pub .nav__lang a:hover { background: var(--p-wash); color: var(--p-ink); }
.pub .nav__lang a.is-on { background: var(--p-forest); color: #fff; }

.pub .mega {
  border-color: var(--p-line);
  border-radius: var(--p-r);
  box-shadow: 0 12px 32px rgb(20 33 27 / .12);
  padding: 10px;
  width: min(520px, calc(100vw - 48px));
}
.pub .mega__item { border-radius: 6px; font-weight: 500; color: var(--p-ink); padding: 9px 12px; }
.pub .mega__item:hover { background: var(--p-wash); color: var(--p-brand); transform: none; }
.pub .mega__all { border-top-color: var(--p-line); }

.pub .hamburger { border-color: var(--p-line); border-radius: 8px; }
.pub .hamburger span { background: var(--p-ink); }
.pub .drawer__group { border-bottom-color: var(--p-line); }
.pub .drawer__group > h4 { color: var(--p-ink-3); letter-spacing: .04em; }
.pub .drawer__link { font-weight: 600; letter-spacing: -0.01em; }
.pub .drawer__toggle { color: var(--p-ink); font-weight: 600; letter-spacing: -0.01em; }
.pub .drawer__toggle svg { color: var(--p-ink-3); }
.pub .drawer__sub { color: var(--p-ink-2); font-weight: 500; }

/* --- Page header -------------------------------------------------------- */

.pub .crumbs { padding-top: 20px; gap: 6px; font-size: .8125rem; color: var(--p-ink-3); }
.pub .crumbs a { color: var(--p-ink-2); font-weight: 500; text-decoration: underline; text-decoration-color: var(--p-line); text-underline-offset: 3px; }
.pub .crumbs a:hover { color: var(--p-brand); text-decoration-color: currentColor; }
.pub .crumbs [aria-current] { color: var(--p-ink-3); font-weight: 500; }

.phead { padding-bottom: clamp(32px, 5vw, 56px); border-bottom: 1px solid var(--p-line); }
.phead__back { margin: 10px 0 0; font-size: .875rem; }
.phead__back .arrow-link { font-size: .875rem; }
.phead__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  margin-top: clamp(20px, 3vw, 36px);
}
.phead__act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 28px; }
.phead__note { margin: 0; font-size: .875rem; color: var(--p-ink-3); }
.phead__media { margin: 0; }
.phead__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--p-r);
  background: var(--p-wash);
}

.phead--article { border-bottom: 0; padding-bottom: 0; }
.phead__col { max-width: 46rem; margin-top: clamp(20px, 3vw, 36px); }
.phead--article h1 { max-width: 26ch; }

/* Trust line */
.pub .byline {
  gap: 8px 20px;
  padding: 14px 0;
  margin: 18px 0 28px;
  border-block: 1px solid var(--p-line);
  font-size: .875rem;
  color: var(--p-ink-2);
}
.pub .byline > span[aria-hidden] { display: none; }
.pub .byline > span { display: inline-flex; align-items: center; gap: 7px; }
.pub .byline b { color: var(--p-ink); font-weight: 600; }
.pub .byline--hub { margin: 4px 0 22px; max-width: 40rem; }
.pub .byline svg { flex: none; color: var(--p-brand); }
.pub .byline__topic b {
  padding: 2px 9px;
  border-radius: 4px;
  background: var(--p-mint);
  color: var(--p-brand-2);
  font-size: .8125rem;
}

/* The passage answer engines lift, in a mint panel. */
.pub .direct-answer {
  position: relative;
  padding: 22px 24px;
  margin: 0;
  border-radius: var(--p-r);
  background: var(--p-mint);
  border: 1px solid #cfe5d8;
}
.pub .direct-answer h2 {
  margin: 0 0 .4em;
  font-family: var(--p-sans);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--p-brand-2);
}
.pub .direct-answer p { font-size: 1.0625rem; line-height: 1.7; font-weight: 450; color: var(--p-ink); }

/* --- Document layout: body column + rail -------------------------------- */

.doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  grid-template-rows: auto 1fr;
  column-gap: clamp(40px, 6vw, 88px);
  padding-block: clamp(36px, 5vw, 64px) clamp(56px, 7vw, 96px);
}
.doc__body { grid-column: 1; grid-row: 1 / span 2; min-width: 0; max-width: 46rem; }
.doc > .toc { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(var(--nav-h) + 28px); }
.doc--article > .toc { grid-row: 2; margin-top: 28px; }
.doc__aside { grid-column: 2; grid-row: 1; align-self: start; }

.pub .toc { font-size: .875rem; }
.pub .toc h4 {
  margin: 0 0 10px;
  font-size: .8125rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--p-ink-3);
}
.pub .toc a {
  padding: 7px 0 7px 14px;
  border-left: 2px solid var(--p-line);
  color: var(--p-ink-2);
  font-weight: 450;
  line-height: 1.4;
}
.pub .toc a:hover { color: var(--p-ink); border-left-color: var(--p-ink-3); }
.pub .toc a.is-active { color: var(--p-brand-2); border-left-color: var(--p-brand); font-weight: 600; }

.dsec { padding-top: clamp(40px, 5vw, 60px); scroll-margin-top: calc(var(--nav-h) + 16px); }
.dsec:first-child { padding-top: 0; }
.dsec + .dsec, .coach-cta + .dsec { border-top: 1px solid var(--p-line-soft); margin-top: clamp(40px, 5vw, 60px); }
.dsec > .lede { margin-bottom: 24px; }
.dsec__more { margin: 20px 0 0; }

/* Symptoms: a ruled list, two columns when there is room */
.signs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
}
.signs li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid var(--p-line-soft);
  font-weight: 500;
  color: var(--p-ink);
  line-height: 1.45;
}
.signs li::before {
  content: "";
  position: absolute;
  left: 2px; top: 16px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--p-mint) no-repeat center / 10px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3 4.8 8.8 9.8 3.4' fill='none' stroke='%2307532f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Diet guidance: numbered, ruled, no boxes */
.guide { list-style: none; margin: 0; padding: 0; counter-reset: g; }
.guide li {
  counter-increment: g;
  position: relative;
  padding: 18px 0 18px 2.75rem;
  border-top: 1px solid var(--p-line-soft);
  color: var(--p-ink-2);
}
.guide li:first-child { border-top: 0; padding-top: 4px; }
.guide li:first-child::before { top: 2px; }
.guide li::before {
  content: counter(g);
  position: absolute;
  left: 0; top: 17px;
  font-family: var(--p-sans);
  font-weight: 650;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--p-brand);
  font-variant-numeric: lining-nums tabular-nums;
}
.guide strong { color: var(--p-ink); font-weight: 650; }

/* Disclaimer */
.pub .warn {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  margin-top: 28px;
  padding: 16px 18px;
  border-radius: var(--p-r-sm);
  border: 1px solid var(--p-warn-line);
  background: var(--p-warn-bg);
  color: var(--p-warn-ink);
  font-size: .9375rem;
  line-height: 1.6;
}
.pub .warn::before {
  content: "";
  width: 20px; height: 20px;
  margin-top: 1px;
  background: no-repeat center / 20px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.2' fill='none' stroke='%239a6a12' stroke-width='1.6'/%3E%3Cpath d='M10 9v5' stroke='%239a6a12' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='6.2' r='1.1' fill='%239a6a12'/%3E%3C/svg%3E");
}
.pub .warn > * { grid-column: 2; }
.pub .warn strong { color: var(--p-warn-ink); }
.pub .warn__body { grid-column: 2; }

/* Disha, the next step. A dark panel so it reads as an offer, not as content. */
.coach-cta {
  margin-top: clamp(40px, 5vw, 60px);
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--p-r);
  background: var(--p-forest);
  color: #fff;
}
.coach-cta h2 { color: #fff; margin-bottom: .35em; }
.coach-cta p { color: var(--p-on-forest); max-width: 52ch; }
.coach-cta .btn { margin-top: 20px; }

.coach-who { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.coach-who img {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--p-marigold);
}
.coach-who p { margin: 0; display: flex; flex-direction: column; line-height: 1.25; }
.coach-who b { font-weight: 650; font-size: 1rem; }
.coach-who span { font-size: .8125rem; }
.coach-cta .coach-who b { color: #fff; }
.coach-cta .coach-who span { color: var(--p-marigold); }

/* Questions and answers, all open */
.qa-list { border-top: 1px solid var(--p-line); }
.qa { padding: 20px 0; border-bottom: 1px solid var(--p-line); }
.pub .qa__q { margin: 0 0 .45em; font-size: 1.0625rem; line-height: 1.4; }
.qa__a { color: var(--p-ink-2); }
.qa__a p { margin: 0 0 .7em; }
.qa__a p:last-child { margin: 0; }
.prose .qa-list { margin-bottom: 1.4em; }
.prose .qa__a p { color: var(--p-ink-2); }

/* Further reading */
.read-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 16px;
  margin-left: -16px;
  margin-right: -16px;
  border-radius: var(--p-r);
  color: inherit;
  transition: background .18s;
}
.read-row:hover { background: var(--p-wash); color: inherit; }
.read-row img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--p-r-sm); }
.pub .read-row h3 { font-family: var(--p-serif); font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 .3em; }
.read-row:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.read-row p { margin: 0 0 8px; font-size: .9375rem; color: var(--p-ink-2); }
.read-row__meta { font-size: .875rem; font-weight: 600; color: var(--p-brand); }

/* Related conditions */
.rel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  border-top: 1px solid var(--p-line);
}
.rel-list li { border-bottom: 1px solid var(--p-line); }
.rel-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  gap: 2px 12px;
  align-items: center;
  padding: 16px 0;
  color: inherit;
}
.rel-list a::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 16px; height: 16px;
  background: no-repeat center / 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='%230a6b3d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform .18s;
}
.rel-list a:hover::after { transform: translateX(3px); }
.pub .rel-list h3 { grid-column: 1; margin: 0; font-size: 1rem; }
.rel-list a:hover h3 { color: var(--p-brand); }
.rel-list p { grid-column: 1; margin: 0; font-size: .875rem; color: var(--p-ink-3); line-height: 1.45; }

/* --- Article body ------------------------------------------------------- */

.doc__figure { margin: 0 0 32px; }
.doc__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--p-r);
  background: var(--p-wash);
}

.pub .prose { max-width: none; font-size: 1.0625rem; }
.pub .prose p, .pub .prose li { color: #26322c; line-height: 1.75; }
.pub .prose > h2 {
  margin-top: 1.9em;
  padding-top: .2em;
  font-size: clamp(1.45rem, 1.3rem + .7vw, 1.875rem);
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.pub .prose li::marker { color: var(--p-brand); }
.pub .prose strong { font-weight: 650; color: var(--p-ink); }
.pub .prose a { color: var(--p-brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pub .prose a:hover { color: var(--p-brand-2); text-decoration-thickness: 2px; }

.table-scroll {
  margin: 8px 0 1.6em;
  overflow-x: auto;
  border: 1px solid var(--p-line);
  border-radius: var(--p-r-sm);
  -webkit-overflow-scrolling: touch;
}
.pub .prose .table-scroll table {
  width: 100%;
  min-width: 34rem;
  margin: 0;
  border-collapse: collapse;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
}
.pub .prose th, .pub .prose td { padding: 12px 14px; border-bottom: 1px solid var(--p-line-soft); vertical-align: top; line-height: 1.5; }
.pub .prose th { background: var(--p-wash); color: var(--p-ink); font-weight: 650; font-size: .875rem; }
.pub .prose tbody tr:last-child td { border-bottom: 0; }
.pub .prose td { color: var(--p-ink-2); }
.pub .prose td:first-child { color: var(--p-ink); font-weight: 550; }

.pub .sources { counter-reset: src; list-style: none; padding-left: 0; font-size: .9375rem; }
.pub .sources li {
  counter-increment: src;
  position: relative;
  padding: 12px 0 12px 2.25rem;
  margin: 0;
  border-top: 1px solid var(--p-line-soft);
  color: var(--p-ink-3);
  line-height: 1.6;
}
.pub .sources li::before {
  content: counter(src);
  position: absolute;
  left: 0; top: 13px;
  width: 1.5rem; height: 1.5rem;
  border-radius: 4px;
  background: var(--p-wash);
  color: var(--p-ink-2);
  font-size: .75rem;
  font-weight: 650;
  line-height: 1.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pub .sources a { font-weight: 550; }

.aside-card {
  padding: 20px 0;
  border-block: 1px solid var(--p-line);
}
.pub .aside-card h4 { margin: 0 0 .35em; font-size: 1rem; }
.aside-card p { font-size: .875rem; color: var(--p-ink-2); line-height: 1.55; margin: 0 0 16px; }
.aside-card .coach-who { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--p-line-soft); }
.aside-card .coach-who img { width: 40px; height: 40px; }
.aside-card .coach-who span { color: var(--p-ink-3); }

/* --- Conversion band ---------------------------------------------------- */

.band { background: var(--p-forest); color: #fff; }
.band__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 88px);
}
.band h2 { color: #fff; font-size: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem); }
.band .lede { color: var(--p-on-forest); }
.band .store-row, .band .band__act { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.band .btn--ghost { --btn-fg: #fff; border-color: rgb(255 255 255 / .35); }
.band .btn--ghost:hover { background: rgb(255 255 255 / .08); border-color: #fff; color: #fff; }
.band .btn:not(.btn--ghost) { --btn-bg: #fff; --btn-fg: var(--p-forest); }
.band .btn:not(.btn--ghost):hover { background: var(--p-mint); color: var(--p-forest); }

.pub .store-badge {
  color: #fff;
  min-width: 164px;
  padding: 9px 18px;
  border-radius: var(--p-r-sm);
  background: #000;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .22);
  transition: box-shadow .18s, background .18s;
}
.pub .store-badge:hover { color: #fff; transform: none; background: #111; box-shadow: 0 0 0 1px rgb(255 255 255 / .6); }

.band__media { position: relative; margin: 0; }
.band__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 523;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: var(--p-r);
  background: var(--p-forest-2);
}
.band__media figcaption {
  position: absolute;
  left: 14px; bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgb(11 42 29 / .88);
  color: #fff;
  font-size: .8125rem;
}
.band__media figcaption b { font-weight: 650; }
.band__media figcaption span { color: var(--p-marigold); }

/* --- Plain page header, tools and FAQ ---------------------------------- */

.phead--page { padding-bottom: clamp(28px, 4vw, 44px); }
.phead--page .phead__col { max-width: 48rem; }
.phead--page h1 { max-width: 24ch; }
.phead--page .lede { margin: 0; }

.doc--single { display: block; }
.doc--single .doc__body { margin: 0; }

/* Tools index: each tool is a ruled row, not a card */
.tools-sec { padding-block: clamp(32px, 4vw, 48px) clamp(48px, 6vw, 72px); }
.tool-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 64px);
  border-top: 1px solid var(--p-line);
}
.tool-list li { border-bottom: 1px solid var(--p-line); }
.tool-list a { display: block; padding: 24px 0 26px; color: inherit; }
.pub .tool-list h2 { font-size: clamp(1.375rem, 1.25rem + .5vw, 1.625rem); margin: 0 0 .3em; }
.tool-list a:hover h2 { color: var(--p-brand); }
.tool-list p { margin: 0 0 12px; color: var(--p-ink-2); max-width: 40ch; }
.tool-list .arrow-link .arw { transition: transform .18s; }
.tool-list a:hover .arrow-link .arw { transform: translateX(4px); }

.kit-sec { padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--p-line); background: var(--p-wash); }
.kit-sec .lede { margin-bottom: 28px; }
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 48px);
}
.feature-list li { padding-top: 18px; border-top: 2px solid var(--p-brand); }
.pub .feature-list h3 { margin: 0 0 .35em; }
.feature-list p { margin: 0; color: var(--p-ink-2); font-size: .9375rem; line-height: 1.6; }
.kit-sec__act { margin: 32px 0 0; }

/* Tool pages: inputs on the left, the reading on the right */
.tool-sec { padding-block: clamp(32px, 4vw, 48px) clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--p-line); }
.pub .tool { gap: clamp(24px, 4vw, 48px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pub .tool__panel { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.pub .tool__panel + .tool__panel, .pub .tool > div > .tool__panel { padding-top: 24px; border-top: 1px solid var(--p-line); }
.pub .tool__panel h2 { font-family: var(--p-sans); font-size: 1.0625rem !important; font-weight: 650; }
.pub .field { margin-bottom: 20px; }
.pub .field label { font-weight: 600; font-size: .875rem; letter-spacing: 0; color: var(--p-ink); margin-bottom: 6px; }
.pub .field .hint, .pub .hint { font-size: .8125rem; color: var(--p-ink-3); font-weight: 450; }
.pub .input, .pub select.input {
  padding: 12px 14px;
  border: 1px solid #c9d4cd;
  border-radius: var(--p-r-sm);
  background: #fff;
  color: var(--p-ink);
  font-size: 1rem;
}
.pub .input::placeholder { color: var(--p-ink-3); }
.pub .input:hover { border-color: var(--p-ink-3); }
.pub .input:focus { outline: none; border-color: var(--p-brand); box-shadow: 0 0 0 3px rgb(10 107 61 / .18); }
.pub .seg { gap: 0; border: 1px solid #c9d4cd; border-radius: var(--p-r-sm); overflow: hidden; }
.pub .seg button {
  border: 0;
  border-radius: 0;
  border-left: 1px solid #c9d4cd;
  padding: 11px 10px;
  font-weight: 550;
  color: var(--p-ink-2);
  background: #fff;
  transition: background .15s, color .15s;
}
.pub .seg button:first-child { border-left: 0; }
.pub .seg button:hover { background: var(--p-wash); color: var(--p-ink); }
.pub .seg button[aria-pressed="true"] { background: var(--p-forest); color: #fff; }
.pub #w-glasses { border: 0; gap: 8px; overflow: visible; }
.pub #w-glasses button { flex: 0 0 auto; min-width: 44px; border: 1px solid #c9d4cd; border-radius: var(--p-r-sm); }
.pub #w-glasses button[aria-pressed="true"] { border-color: var(--p-forest); }

.pub .result {
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--p-r);
  background: var(--p-mint);
  border: 1px solid #cfe5d8;
  text-align: left;
}
.pub .result > .small { color: var(--p-ink-2); font-weight: 550; }
.pub .result__num {
  font-family: var(--p-serif);
  font-weight: 600;
  font-size: clamp(2.75rem, 2.2rem + 2.4vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--p-forest);
  font-variant-numeric: lining-nums tabular-nums;
}
.pub .result__tag {
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--p-forest);
  font-size: .8125rem;
  font-weight: 600;
}
.pub .result__note { margin-top: 14px; font-size: .875rem; color: var(--p-ink-2); line-height: 1.55; }
.pub .scale { height: 6px; border-radius: 3px; margin: 22px 0 8px; gap: 2px; background: none; }
.pub .scale span { border-radius: 2px; }
.pub .scale__marks { font-size: .75rem; color: var(--p-ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }

.pub .tbl-wrap { border-color: var(--p-line); border-radius: var(--p-r-sm); }
.pub table.data { font-size: .9375rem; font-variant-numeric: tabular-nums; }
.pub table.data th, .pub table.data td { padding: 11px 14px; border-bottom-color: var(--p-line-soft); }
.pub table.data th {
  background: var(--p-wash);
  font-size: .8125rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 650;
  color: var(--p-ink);
}
.pub table.data th button { font-weight: 650; color: var(--p-ink); }
.pub table.data th button:hover { color: var(--p-brand); }
.pub table.data th[aria-sort="ascending"] button::after { content: " ↑"; color: var(--p-brand); }
.pub table.data th[aria-sort="descending"] button::after { content: " ↓"; color: var(--p-brand); }
.pub table.data tbody tr:hover { background: var(--p-wash); }
.pub table.data b { font-weight: 600; color: var(--p-ink); }
.pub .pill-gi { border-radius: 4px; font-weight: 650; font-size: .75rem; padding: 2px 8px; }
.pub .gi-low { background: #dcefe3; color: #0b5a33; }
.pub .gi-med { background: #fbeccb; color: #6e4c06; }
.pub .gi-high { background: #f8dcd8; color: #8f2217; }

/* --- Index pages: conditions and articles ------------------------------ */

.index-sec { padding-block: clamp(32px, 4vw, 48px) clamp(56px, 7vw, 88px); }
.index-sec__more { margin: 32px 0 0; font-size: .9375rem; }
.entry-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(28px, 3.5vw, 44px) clamp(20px, 2.5vw, 32px);
}
.entry-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.entry-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.entry-grid a { display: block; color: inherit; }
.entry-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--p-r-sm);
  background: var(--p-wash);
  margin-bottom: 14px;
  transition: opacity .18s;
}
.entry-grid--3 img { aspect-ratio: 16 / 9; }
.entry-grid a:hover img { opacity: .92; }
.pub .entry-grid h2 { font-size: clamp(1.25rem, 1.15rem + .4vw, 1.4375rem); margin: 0 0 .3em; }
.entry-grid a:hover h2 { color: var(--p-brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.entry-grid p { margin: 0; font-size: .9375rem; color: var(--p-ink-2); line-height: 1.55; }
.entry-grid .entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 10px; font-size: .8125rem; color: var(--p-ink-3); }
.entry-meta span { display: inline-flex; align-items: center; gap: 6px; }
.entry-meta span:first-child { font-weight: 600; color: var(--p-brand-2); }
.entry-meta svg { color: var(--p-ink-3); }
.kit-sec .warn { margin-top: 36px; max-width: 48rem; }

/* --- How it works, Results, Download ------------------------------------ */

.index-sec--alt { background: var(--p-wash); border-block: 1px solid var(--p-line); }
.index-sec > .shell > h2 { margin-bottom: .35em; }
.index-sec > .shell > .lede { margin-bottom: clamp(28px, 3vw, 40px); }
.index-sec .phead__act { margin: 0 0 clamp(32px, 4vw, 48px); }

/* Five steps, numbered and ruled */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.steps li {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 8px clamp(24px, 4vw, 56px);
  padding: clamp(24px, 3vw, 34px) 0;
  border-top: 1px solid var(--p-line);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.steps li:last-child { border-bottom: 1px solid var(--p-line); }
.steps__n {
  grid-row: 1 / span 3;
  font-family: var(--p-serif);
  font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem);
  color: var(--p-brand);
  font-variant-numeric: lining-nums tabular-nums;
}
.pub .steps h2 { font-size: clamp(1.25rem, 1.15rem + .45vw, 1.5rem); margin: 0 0 .35em; }
.steps p { margin: 0; color: var(--p-ink-2); max-width: 60ch; }
.steps__note { margin-top: 10px !important; font-size: .875rem; color: var(--p-ink-3); }

/* Outcome figures */
.stat-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 56px);
}
.stat-grid li { padding: 22px 0 24px; border-top: 1px solid var(--p-line); }
.stat-grid b {
  display: block;
  font-family: var(--p-serif);
  font-weight: 600;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.875rem);
  line-height: 1.05;
  color: var(--p-forest);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat-grid p { margin: 8px 0 0; font-size: .9375rem; color: var(--p-ink-2); line-height: 1.5; max-width: 34ch; }

/* Before and after */
.pub .ba-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
/* overflow: visible overrides the legacy .ba rule above (line ~326), whose
   overflow: hidden was never reset under .pub. Left in place, it becomes the
   nearest ancestor scroll container for the before/after photos' unnamed
   animation-timeline: view() -- exactly the bug already fixed once on
   .ba__shot itself, just one level further up the tree. A .ba wraps a single
   static card with no scroll room of its own, so referencing it produces a
   fixed, non-scroll-tracking progress: every pair's wipe froze at the same
   ~12%/~42% clip regardless of scroll position, on every page and every
   width. Each photo already rounds its own corners (.pub .ba__shot img,
   border-radius: var(--p-r-sm)), so the card's own overflow: hidden was only
   ever clipping to its larger 16px radius as a legacy belt-and-braces --
   visible instead leaves a few px of the photo's smaller-radius corner
   showing at the card's very outer edge, a minor trade for the animation
   actually working. */
.pub .ba { margin: 0; overflow: visible; }
.pub .ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pub .ba__shot img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--p-r-sm); background: var(--p-wash); }
.pub .ba__label {
  position: absolute;
  left: 8px; bottom: 8px;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgb(11 42 29 / .86);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.pub .ba__cap { margin-top: 12px; font-size: .875rem; color: var(--p-ink-3); }

/* Reviews */
.testi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.pub .testi {
  padding: 0;
  border: 0;
  border-top: 1px solid var(--p-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding-top: 20px;
}
.pub .testi:hover { transform: none; box-shadow: none; }
.pub .testi__av {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--p-mint);
  color: var(--p-brand-2);
  font-weight: 650;
  display: grid;
  place-items: center;
  flex: none;
}
.pub .testi__head b { font-weight: 650; letter-spacing: 0; color: var(--p-ink); }
.pub .testi__head span { color: var(--p-ink-3); }
.pub .stars { color: var(--p-marigold); }
.pub .testi__quote { color: var(--p-ink-2); font-size: .9375rem; line-height: 1.7; }
.pub .testi__src { margin-top: 12px; font-size: .75rem; color: var(--p-ink-3); }

/* App screenshots */
.app-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.pub .app-shot { width: 100%; height: auto; border-radius: var(--p-r); border: 1px solid var(--p-line); background: #fff; }
.feature-list--wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }

/* --- Home --------------------------------------------------------------- */

.home-hero { padding-block: clamp(36px, 5vw, 72px) clamp(40px, 5vw, 72px); }
.home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.home-hero__flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 18px;
  font-size: .875rem;
  font-weight: 550;
  color: var(--p-brand-2);
}
.home-hero__flag svg { color: var(--p-brand); }
.pub .home-hero h1 { font-size: clamp(2.35rem, 1.7rem + 2.8vw, 3.9rem); max-width: 16ch; margin-bottom: .3em; }
.home-hero h1 .line { display: block; }
/* The claim line carries the brand colour; the product name stays in ink. */
.pub .home-hero h1 .line:first-child { color: var(--p-brand); }
.home-hero__claim {
  margin: 0 0 .6em;
  font-family: var(--p-serif);
  font-size: clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
  color: var(--p-ink);
}
.home-hero__proof { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.home-hero__proof p { margin: 0; font-size: .9375rem; color: var(--p-ink-2); }
.pub .avatars { display: flex; }
.pub .avatars img {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  margin-left: -10px;
}
.pub .avatars img:first-child { margin-left: 0; }
.home-hero .store-row { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.home-hero__alt { margin: 18px 0 0; }
.home-hero__shot { position: relative; margin: 0; }
.home-hero__shot img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: var(--p-r);
  background: #fff;
}
/* The artwork fills its frame, so the ratings read underneath it. */
.home-hero__shot figcaption {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
  font-size: .875rem;
  color: var(--p-ink-2);
}
.home-hero__shot figcaption b { font-weight: 650; color: var(--p-ink); }
.home-hero__shot figcaption span { color: var(--p-ink-2); }

/* Trust strip: static, no marquee */
.trustbar { border-block: 1px solid var(--p-line); background: var(--p-wash); }
.trustbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  padding-block: 16px;
  font-size: .875rem;
  color: var(--p-ink-2);
}
.trustbar__label { font-weight: 600; color: var(--p-ink-3); }
.trustbar__backer { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--p-ink); }
.trustbar__backer img {
  display: block;
  height: 26px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.trustbar__fact { color: var(--p-ink-2); }

/* Headline numbers on forest */
.statband { background: var(--p-forest); color: #fff; }
.statband__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-block: clamp(36px, 4vw, 56px);
}
.statband__num {
  display: block;
  font-family: var(--p-serif);
  font-weight: 600;
  font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  line-height: 1.05;
  font-variant-numeric: lining-nums tabular-nums;
}
.statband__label { display: block; margin-top: 8px; font-size: .875rem; color: var(--p-on-forest); }

/* Five steps in a row */
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.flow li { padding-top: 16px; border-top: 2px solid var(--p-brand); }
.flow__n {
  display: block;
  font-family: var(--p-serif);
  font-size: 1.125rem;
  color: var(--p-brand);
  font-variant-numeric: lining-nums tabular-nums;
}
.pub .flow h3 { margin: 6px 0 0; font-size: 1rem; }
.index-sec__link { margin: -.2em 0 clamp(28px, 3vw, 40px); }
.index-sec__act { margin: clamp(28px, 3vw, 40px) 0 0; }

.review-shot { margin: 0; }
.review-shot img {
  display: block;
  width: 100%;
  max-width: 860px;
  height: auto;
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: var(--p-r);
}

/* Instagram posts */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.pub .post { border: 1px solid var(--p-line); border-radius: var(--p-r); overflow: hidden; background: #fff; }
.pub .post__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.pub .post__av {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--p-mint);
  color: var(--p-brand-2);
  font-weight: 650;
  font-size: .875rem;
}
.pub .post__head b { display: block; font-size: .875rem; font-weight: 650; color: var(--p-ink); }
.pub .post__head span span, .pub .post__head > span > span { font-size: .75rem; color: var(--p-ink-3); }
.pub .post__img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.pub .post__body { padding: 14px 16px 16px; }
.pub .post__cap { margin: 0; font-size: .875rem; color: var(--p-ink-2); line-height: 1.55; }
.pub .post__tag { display: inline-block; margin-top: 10px; font-size: .8125rem; font-weight: 600; color: var(--p-brand); }
.pub .ig { margin-left: auto; color: var(--p-ink-3); }

/* --- About, Science, Contact, legal, 404 -------------------------------- */

/* Cards become ruled blocks; the system has no boxes. */
.pub .card {
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--p-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.pub .card:hover { transform: none; box-shadow: none; border-color: var(--p-line); }
.pub .card > h2, .pub .card > h3 { margin-top: 0; }
.pub .index-sec .grid { gap: clamp(24px, 3vw, 40px); }
.pub .index-sec .prose { max-width: 46rem; }
.pub .index-sec > .shell > .lede { margin-bottom: clamp(24px, 3vw, 36px); }
.pub .index-sec h2 + .lede { margin-top: -.2em; }
.pub .feature { padding: 20px 0 0; }
.pub .feature i { display: none; }
.pub .cond-card { padding: 18px 0 0; }
.pub .cond-card h3 { margin-bottom: .3em; }
.pub .cond-card p { font-size: .9375rem; color: var(--p-ink-2); margin: 0; }
.pub .backer { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--p-ink); }
.pub .backer img {
  display: block;
  height: 28px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.pub .stat { text-align: left; }
.pub .stat i { display: none; }
.pub .stat__num {
  display: block;
  font-family: var(--p-serif);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  line-height: 1.05;
  color: var(--p-forest);
  font-variant-numeric: lining-nums tabular-nums;
}
.pub .stat__label { display: block; margin-top: 6px; font-size: .875rem; color: var(--p-ink-2); }
.pub .index-sec .media { border-radius: var(--p-r); box-shadow: none; }
.pub .center { text-align: left; }
.pub .index-sec .center .lede { margin-inline: 0; }

/* --- Chrome: footer ----------------------------------------------------- */

.pub .footer { background: var(--p-wash); border-top: 1px solid var(--p-line); }
.pub .footer h4 { font-size: .8125rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--p-ink); }
.pub .footer a { color: var(--p-ink-2); font-weight: 450; }
.pub .footer a:hover { color: var(--p-brand); }
.pub .footer .logo { color: var(--p-ink); }
.pub .footer__blurb { color: var(--p-ink-2); }
.pub .footer__backed, .pub .footer__legal { color: var(--p-ink-3); }
.pub .footer__legal { border-top-color: var(--p-line); }
.pub .socials a { border-radius: 8px; border-color: var(--p-line); color: var(--p-ink-2); }
.pub .socials a:hover { transform: none; color: var(--p-brand); border-color: var(--p-ink-3); }

.pub .to-top { background: var(--p-forest); box-shadow: 0 6px 16px rgb(11 42 29 / .28); width: 42px; height: 42px; }
.pub .to-top:hover { background: var(--p-forest-2); }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1024px) {
  .doc { display: flex; flex-direction: column; }
  .entry-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .doc__body { max-width: none; }
  .doc > .toc, .doc--article > .toc {
    position: static;
    order: -1;
    margin: 0 0 28px;
    padding: 14px 0;
    border-block: 1px solid var(--p-line);
  }
  .pub .toc h4 { margin-bottom: 8px; }
  .pub .toc a { display: inline-block; padding: 4px 0; margin-right: 16px; border-left: 0; font-weight: 500; }
  .pub .toc a.is-active { border: 0; }
  .doc__aside { margin-top: 40px; }
}

@media (max-width: 760px) {
  .phead__grid, .band__grid { grid-template-columns: minmax(0, 1fr); }
  .home-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .statband__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub .tool, .tool-list, .feature-list { grid-template-columns: minmax(0, 1fr); }
  .entry-grid--4, .entry-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid, .testi-grid, .feature-list--wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .flow li {
    display: grid;
    grid-template-columns: 2.125rem minmax(0, 1fr);
    column-gap: 10px;
    align-items: baseline;
    padding: 18px 0;
  }
  .pub .flow h3 { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
  .steps li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .steps__n { grid-row: auto; }
  .feature-list { row-gap: 24px; }
  .signs, .rel-list { grid-template-columns: minmax(0, 1fr); }
  .read-row { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; }
  .pub .read-row h3 { font-size: 1.125rem; }
  .read-row p { display: none; }
  .phead__act .btn { width: 100%; }
  .band .store-badge { flex: 1 1 100%; }
}

@media (max-width: 620px) {
  .pub { font-size: 1rem; }
  .entry-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .stat-grid, .testi-grid, .feature-list--wrap, .pub .ba-grid, .app-shots { grid-template-columns: minmax(0, 1fr); }
  .pub .prose { font-size: 1rem; }
  .pub .logo__tag { display: none; }
  .pub .byline { gap: 6px 16px; }
}

/* Phone: three stories sit in a row and travel left as the page scrolls,
   so this section stays one-card tall instead of stacking all three. */
@media (max-width: 760px) {
  .post-scroller {
    --post-gap: 14px;
    --post-peek: 36px;
    --post-w: calc(100vw - (var(--gut) * 2) - var(--post-peek));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .post-scroller::-webkit-scrollbar { display: none; }
  .post-scroller.is-driven {
    overflow: hidden;
    scroll-snap-type: none;
    touch-action: pan-y;
  }
  .post-scroller .post-grid {
    display: flex;
    grid-template-columns: none;
    gap: var(--post-gap);
    width: max-content;
    padding-right: var(--post-peek);
  }
  .post-scroller .post {
    flex: 0 0 var(--post-w);
    width: var(--post-w);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .post-scroller.is-driven .post-grid { will-change: transform; }
}

/* =============================================================================
   Motion — scroll-driven scenes.

   Everything below sits inside one gate:

     @media (prefers-reduced-motion: no-preference) {
       @supports (animation-timeline: view()) { ... }
     }

   A reader who asked for less motion, and a browser without scroll-driven
   animation, get none of it: same layout, same page height, same scroll
   distance as the static page. initReveal/initProgress in disha.js skip
   themselves under this same condition, so the two systems never fight over
   the same elements -- see the comments there.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* 01 — Hero scroll-out ---------------------------------------------------
       Both layers sit at their identity value at scroll 0, so first paint is
       untouched: the LCP image is never faded, clipped or delayed, and the
       transform rides the <figure>, never the <img>. */

    .home-hero__text {
      animation: ml-drift-up linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    .home-hero__shot {
      animation: ml-drift-lag linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    @keyframes ml-drift-up  { to { transform: translateY(-46px); } }
    @keyframes ml-drift-lag { to { transform: translateY(-14px) scale(1.04); } }

    /* 02 — Progress rail, off the main thread --------------------------------
       Replaces the scroll listener and rAF write in disha.js initProgress. */

    .progress {
      transform-origin: left;
      animation: ml-progress linear both;
      animation-timeline: scroll(root);
    }
    @keyframes ml-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* 03 — Proof band ---------------------------------------------------------
       Desktop pins the band and sequences the four figures against that pin's
       own scroll length via a named timeline: "contain" ranges only resolve
       sensibly because the wrapper's extra height gives the timeline room to
       move while the band holds still. Below 900px there is no pin -- a phone
       screen is rarely taller than the band, so pinning it risks trapping the
       reader -- and "contain" on an unpinned, unstretched element is
       degenerate (the element may never be fully "contained" at all), which
       would leave these figures frozen rather than revealing them. Mobile
       instead runs each figure off its OWN entry into the viewport: no shared
       timeline, no pin, and since the grid stacks to one column there, each
       figure crosses the viewport at its own moment anyway, so the sequence
       still reads in order. */

    @media (min-width: 900px) {
      .scene--stats { view-timeline-name: --stats; }
      /* Shorter than a naive 220vh, and held near the middle of the screen: a
         250px band pinned at the top leaves most of the viewport empty while
         the reader waits for it. */
      .scene--stats { height: 170vh; }
      .scene--stats .statband { position: sticky; top: calc(50vh - 130px); }

      .scene--stats .statband__grid li {
        animation: ml-rise linear both;
        animation-timeline: --stats;
      }
      .scene--stats .statband__grid li:nth-child(1) { animation-range: contain 4% contain 22%; }
      .scene--stats .statband__grid li:nth-child(2) { animation-range: contain 16% contain 34%; }
      .scene--stats .statband__grid li:nth-child(3) { animation-range: contain 28% contain 46%; }
      .scene--stats .statband__grid li:nth-child(4) { animation-range: contain 40% contain 58%; }

      .scene--stats .statband__grid li::after {
        animation: ml-draw linear both;
        animation-timeline: --stats;
      }
      .scene--stats .statband__grid li:nth-child(1)::after { animation-range: contain 10% contain 30%; }
      .scene--stats .statband__grid li:nth-child(2)::after { animation-range: contain 22% contain 42%; }
      .scene--stats .statband__grid li:nth-child(3)::after { animation-range: contain 34% contain 54%; }
      .scene--stats .statband__grid li:nth-child(4)::after { animation-range: contain 46% contain 66%; }
    }

    @media (max-width: 899.98px) {
      .scene--stats .statband__grid li {
        animation: ml-rise linear both;
        animation-timeline: view();
        animation-range: entry 5% entry 55%;
      }
      .scene--stats .statband__grid li::after {
        animation: ml-draw linear both;
        animation-timeline: view();
        animation-range: entry 20% entry 70%;
      }
    }

    @keyframes ml-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
    .scene--stats .statband__grid li::after {
      content: "";
      display: block;
      height: 2px;
      margin-top: 14px;
      background: var(--p-marigold);
      transform: scaleX(0);
      transform-origin: left;
    }
    @keyframes ml-draw { to { transform: scaleX(1); } }

    /* Digits change under the scrub, so reserve the width: they cannot reflow. */
    .scene--stats .statband__num { display: inline-block; min-width: 4.5ch; }

    /* 04 — Step flow -----------------------------------------------------------
       Desktop pins the section and draws the dotted rail across it via a cover
       panel sliding off a shared timeline -- the same "needs the pin's extra
       scroll length" dependency as the proof band above, and the same reason
       it's desktop-only. Below 900px there is no pin and no shared timeline:
       the rail stays put (statically dotted, not drawn) and each step's node
       and heading instead animate off their OWN entry into the viewport, so
       the steps still light up one at a time as you reach them, just without
       the pin. */

    @media (min-width: 900px) {
      .scene--flow { view-timeline-name: --flow; }
      .scene--flow { height: 320vh; }
      .scene--flow .index-sec { position: sticky; top: calc(var(--nav-h) + 4vh); }

      .scene--flow .flow::after {
        animation: ml-uncover linear both;
        animation-timeline: --flow;
        animation-range: contain 2% contain 72%;
      }

      .scene--flow .flow li::before {
        animation: ml-pop var(--ease-spring) both;
        animation-timeline: --flow;
      }
      .scene--flow .flow li:nth-child(1)::before { animation-range: contain 6% contain 16%; }
      .scene--flow .flow li:nth-child(2)::before { animation-range: contain 20% contain 30%; }
      .scene--flow .flow li:nth-child(3)::before { animation-range: contain 34% contain 44%; }
      .scene--flow .flow li:nth-child(4)::before { animation-range: contain 48% contain 58%; }
      .scene--flow .flow li:nth-child(5)::before { animation-range: contain 62% contain 72%; }

      .scene--flow .flow li h3,
      .scene--flow .flow li .flow__n {
        animation: ml-step-in linear both;
        animation-timeline: --flow;
      }
      .scene--flow .flow li:nth-child(1) :is(h3, .flow__n) { animation-range: contain 6% contain 18%; }
      .scene--flow .flow li:nth-child(2) :is(h3, .flow__n) { animation-range: contain 20% contain 32%; }
      .scene--flow .flow li:nth-child(3) :is(h3, .flow__n) { animation-range: contain 34% contain 46%; }
      .scene--flow .flow li:nth-child(4) :is(h3, .flow__n) { animation-range: contain 48% contain 60%; }
      .scene--flow .flow li:nth-child(5) :is(h3, .flow__n) { animation-range: contain 62% contain 74%; }
    }

    @media (max-width: 899.98px) {
      /* No pin means no scroll length to slide this cover panel across, so it
         would otherwise sit frozen at its "fully covering" start state --
         a stray solid bar over the dotted rail. The dots alone (::before)
         stay visible and static instead. */
      .scene--flow .flow::after { display: none; }

      .scene--flow .flow li::before {
        animation: ml-pop var(--ease-spring) both;
        animation-timeline: view();
        animation-range: entry 20% entry 60%;
      }
      .scene--flow .flow li h3,
      .scene--flow .flow li .flow__n {
        animation: ml-step-in linear both;
        animation-timeline: view();
        animation-range: entry 15% entry 65%;
      }
    }

    .scene--flow .flow { position: relative; }
    .scene--flow .flow::before,
    .scene--flow .flow::after {
      content: "";
      position: absolute;
      top: -1px;
      left: 0; right: 0;
      height: 2px;
    }
    .scene--flow .flow::before {
      background: repeating-linear-gradient(90deg, var(--p-brand) 0 4px, transparent 4px 10px);
      opacity: .55;
    }
    .scene--flow .flow::after {
      background: var(--p-wash);
      transform-origin: right;
    }
    @keyframes ml-uncover { from { transform: translateX(0); } to { transform: translateX(101%); } }

    .scene--flow .flow li { position: relative; border-top-color: transparent; }
    .scene--flow .flow li::before {
      content: "";
      position: absolute;
      top: -5px; left: 0;
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--p-brand);
      transform: scale(0);
    }
    @keyframes ml-pop { to { transform: scale(1); } }
    @keyframes ml-step-in { from { opacity: .25; transform: translateY(10px); } to { opacity: 1; transform: none; } }

    /* Phone stacks the five steps, so the desktop's horizontal rail would
       only paint across row one. Drop it and stitch the nodes with a
       vertical segment on each step instead. */
    @media (max-width: 760px) {
      .scene--flow .flow::before { display: none; }
      .scene--flow .flow li { padding-left: 26px; }
      .scene--flow .flow li::before {
        top: 21px;
        left: 0;
      }
      .scene--flow .flow li::after {
        content: "";
        position: absolute;
        left: 4px;
        top: 32px;
        bottom: -22px;
        width: 2px;
        background: repeating-linear-gradient(180deg, var(--p-brand) 0 4px, transparent 4px 10px);
        opacity: .55;
      }
      .scene--flow .flow li:last-child::after { display: none; }
    }

    /* 04b — the vertical variant, for How it works ----------------------------
       Same split as the horizontal flow above: pinned and sequenced against a
       shared timeline on desktop, each step animating off its own entry below
       900px. */

    @media (min-width: 900px) {
      .scene--steps { view-timeline-name: --steps; }
      .scene--steps { height: 300vh; }
      .scene--steps .index-sec { position: sticky; top: calc(var(--nav-h) + 3vh); }

      .scene--steps .steps li {
        animation: ml-step-focus linear both;
        animation-timeline: --steps;
      }
      .scene--steps .steps li:nth-child(1) { animation-range: contain 2% contain 16%; }
      .scene--steps .steps li:nth-child(2) { animation-range: contain 16% contain 30%; }
      .scene--steps .steps li:nth-child(3) { animation-range: contain 30% contain 44%; }
      .scene--steps .steps li:nth-child(4) { animation-range: contain 44% contain 58%; }
      .scene--steps .steps li:nth-child(5) { animation-range: contain 58% contain 72%; }
    }

    @media (max-width: 899.98px) {
      .scene--steps .steps li {
        animation: ml-step-focus linear both;
        animation-timeline: view();
        animation-range: entry 10% entry 60%;
      }
    }

    @keyframes ml-step-focus { from { opacity: .4; transform: translateY(14px); } to { opacity: 1; transform: none; } }

    /* 05 — Before / after reveal -----------------------------------------------
       Before and After stay in their own boxes, side by side, exactly as they
       already lay out -- nothing merges the two photos into one frame. Each
       photo uncovers itself left-to-right as it scrolls into view, After
       trailing Before slightly so the eye reads them in order. No
       overflow:hidden anywhere here: clip-path already self-clips both the
       photo and the divider below, and an overflow:hidden ancestor would
       itself count as a scroll container -- exactly what an unnamed view()
       timeline searches for as its reference scroller, hijacking it from the
       real page and freezing the animation at whatever degenerate progress
       that produces. */

    .pub .ba__shot { position: relative; }
    .pub .ba__shot img {
      animation: ml-uncover-photo linear both;
      animation-timeline: view();
    }
    .pub .ba__shot:first-child img { animation-range: 10% 60%; }
    .pub .ba__shot:last-child img { animation-range: 25% 75%; }
    @keyframes ml-uncover-photo {
      from { clip-path: inset(0 100% 0 0); }
      to   { clip-path: inset(0 0 0 0); }
    }
    .pub .ba__shot::after {
      content: "";
      position: absolute;
      inset: 0;
      border-right: 2px solid var(--p-marigold);
      animation: ml-uncover-line linear both;
      animation-timeline: view();
    }
    .pub .ba__shot:first-child::after { animation-range: 10% 60%; }
    .pub .ba__shot:last-child::after { animation-range: 25% 75%; }
    @keyframes ml-uncover-line {
      from { clip-path: inset(0 100% 0 0); }
      to   { clip-path: inset(0 0 0 0); opacity: 0; }
    }

    /* 06 — Review deck ---------------------------------------------------------
       Desktop: sticky hides nothing, every quote stays reachable, it just
       arrives in sequence, each card pressing back as the next overtakes it.
       Below 900px, cards keep their normal (non-sticky) stacked layout and
       instead each rises and fades in on its own entry -- pressing/stacking
       needs the sticky offsets above, which only make sense once cards are
       laid out one atop another in that single desktop column. */

    @media (min-width: 900px) {
      .pub .testi-grid { display: block; max-width: 44rem; margin-inline: auto; }
      .pub .testi-grid .testi {
        position: sticky;
        background: #fff;
        border: 1px solid var(--p-line);
        border-radius: var(--p-r);
        padding: 24px;
        margin-bottom: 18px;
        animation: ml-press linear both;
        animation-timeline: view();
        animation-range: exit 0% exit 100%;
      }
      .pub .testi-grid .testi:nth-child(1) { top: calc(var(--nav-h) + 24px); }
      .pub .testi-grid .testi:nth-child(2) { top: calc(var(--nav-h) + 38px); }
      .pub .testi-grid .testi:nth-child(3) { top: calc(var(--nav-h) + 52px); }
      .pub .testi-grid .testi:nth-child(4) { top: calc(var(--nav-h) + 66px); }
      .pub .testi-grid .testi:nth-child(5) { top: calc(var(--nav-h) + 80px); }
      .pub .testi-grid .testi:nth-child(6) { top: calc(var(--nav-h) + 94px); }
      .pub .testi-grid .testi:nth-child(7) { top: calc(var(--nav-h) + 108px); }
    }
    @keyframes ml-press {
      from { transform: scale(1); }
      to   { transform: scale(.94); }
    }

    @media (max-width: 899.98px) {
      .pub .testi-grid .testi {
        animation: ml-testi-in linear both;
        animation-timeline: view();
        animation-range: entry 10% entry 55%;
      }
      @keyframes ml-testi-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
    }

    /* 07 — Scrubbed heading reveal ---------------------------------------------
       Tracks the scroll and reverses on the way back, which is the difference
       between this and the plain fade it replaces. Whole heading, never per
       word: splitting breaks text-wrap: balance and makes screen readers
       announce fragments. */

    .pub .index-sec > .shell > h2,
    .pub .dsec > h2 {
      animation: ml-head linear both;
      animation-timeline: view();
      animation-range: 15% 85%;
    }
    @keyframes ml-head { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

    .pub .index-sec > .shell > h2::after {
      content: "";
      display: block;
      width: 68px;
      height: 2px;
      margin-top: 14px;
      background: var(--p-brand);
      transform: scaleX(0);
      transform-origin: left;
      animation: ml-draw linear both;
      animation-timeline: view();
      animation-range: entry 30% entry 95%;
    }

    /* 08 — Closing band expand, then the footer columns -------------------------
       The image parallax has no text near its edges, so it runs at every
       width. The panel's own inset-to-full-bleed expand does too, but its
       inset amount is capped smaller below 900px: at narrow widths the shell's
       own gutter shrinks to 20px, and the desktop inset (up to 32px) would
       start past that gutter, crowding the heading right at the moment it's
       most compressed. 8px stays comfortably inside even the narrowest
       gutter. */

    .band__media img {
      animation: ml-band-media linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 60%;
    }
    @keyframes ml-band-media { from { transform: translateY(22px); } to { transform: translateY(-14px); } }

    .band {
      animation: ml-band linear both;
      animation-timeline: view();
      animation-range: entry 20% contain 30%;
    }
    @keyframes ml-band {
      from { clip-path: inset(0 min(4vw, 32px) round 22px); }
      to   { clip-path: inset(0 round 0); }
    }
    @media (max-width: 899.98px) {
      @keyframes ml-band {
        from { clip-path: inset(0 8px round 14px); }
        to   { clip-path: inset(0 round 0); }
      }
    }

    .footer__grid > div {
      animation: ml-foot linear both;
      animation-timeline: view();
    }
    .footer__grid > div:nth-child(1) { animation-range: entry 0% entry 55%; }
    .footer__grid > div:nth-child(2) { animation-range: entry 8% entry 63%; }
    .footer__grid > div:nth-child(3) { animation-range: entry 16% entry 71%; }
    .footer__grid > div:nth-child(4) { animation-range: entry 24% entry 79%; }
    @keyframes ml-foot { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  }
}