/* Minthe — Calm Teal & Sand.
   No framework, no CDN, no build step.

   SINGLE THEME, DELIBERATELY. This page is light in every context, including
   for visitors whose OS is set to dark. A dark ground read as heavy and clinical
   for a gut-health product, and the warm sand palette IS the brand, so it should
   not be something only half the audience ever sees. The app keeps its own dark
   mode; the marketing site does not mirror it.

   Consequence to be aware of: there is no dark option here for visitors who
   prefer one. Every colour below is therefore held to WCAG AA on the sand
   ground, so the light theme is comfortable rather than merely bright. */

/* ---------- tokens ---------- */
:root {
  /* #167F7C not the app's #178582: at #178582 both link text (4.27:1) and
     white-on-button (4.46:1) sit just under WCAG AA. This is a ~1% luminance
     shift, visually identical, and clears 4.6:1 on both. */
  --mi-primary:      #167F7C;
  --mi-primary-press:#0F6360;
  --mi-on-primary:   #FFFFFF;
  --mi-tint:         #E6F4F3;
  --mi-accent:       #E8A24A;

  --mi-bg:           #FBFAF8;
  --mi-bg-2:         #F4F1EB;
  --mi-surface:      #FFFFFF;
  --mi-border:       #E5E2DC;
  --mi-border-strong:#D3CFC6;

  --mi-text:         #1C2B2A;
  --mi-muted:        #5A6A68;
  --mi-faint:        #687472;   /* was #8A9694: only 2.93:1 on the sand ground */

  --mi-safe:         #5BA776;
  --mi-alarm:        #C0492F;   /* red-flag medical triage ONLY */

  /* severity ramp 0-10, cool to warm, ending muted clay not fire-engine red */
  --mi-sev-0: #BFD9D4;
  --mi-sev-1: #8FC7BD;
  --mi-sev-2: #E9C46A;
  --mi-sev-3: #E0996A;
  --mi-sev-4: #C77B62;

  --mi-radius-card: 16px;
  --mi-radius-chip: 12px;
  --mi-radius-pill: 999px;

  --mi-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  --mi-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --mi-ease: cubic-bezier(.2,.7,.2,1);
  --mi-maxw: 68rem;
  --mi-prose: 42rem;

  color-scheme: light only;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--mi-bg);
  color: var(--mi-text);
  font-family: var(--mi-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--mi-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--mi-primary-press); }

h1, h2, h3, h4 {
  font-family: var(--mi-sans);
  line-height: 1.15;
  letter-spacing: -0.021em;
  text-wrap: balance;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 650; margin-top: 2.4em; }
h3 { font-size: clamp(1.12rem, 2vw, 1.3rem); font-weight: 650; margin-top: 1.8em; }
p  { text-wrap: pretty; margin: 0 0 1.1em; }

:focus-visible { outline: 2px solid var(--mi-primary); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--mi-tint); color: var(--mi-text); }

/* ---------- layout ---------- */
.mi-wrap  { width: 100%; max-width: var(--mi-maxw); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.mi-prose { max-width: var(--mi-prose); }
main { display: block; padding-bottom: 4rem; }

.mi-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--mi-surface); color: var(--mi-text);
  padding: .7rem 1.1rem; border-radius: var(--mi-radius-chip); border: 1px solid var(--mi-border);
}
.mi-skip:focus { left: 1rem; top: 1rem; }

/* ---------- header ---------- */
.mi-topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, 4vw, 2rem);
  padding-top: max(.7rem, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--mi-bg) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--mi-border);
}
.mi-brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: 1.075rem; letter-spacing: -.02em;
  color: var(--mi-text); text-decoration: none; margin-right: auto;
}
.mi-brand .leaf { width: 1.4rem; height: 1.4rem; flex: none; color: var(--mi-primary); }
.mi-nav { display: flex; gap: .3rem; }
.mi-nav a {
  color: var(--mi-muted); text-decoration: none; font-size: .95rem; font-weight: 500;
  padding: .45rem .7rem; border-radius: var(--mi-radius-chip);
  transition: background .18s var(--mi-ease), color .18s var(--mi-ease);
}
.mi-nav a:hover { color: var(--mi-text); background: var(--mi-bg-2); }
.mi-nav a[aria-current="page"] { color: var(--mi-primary); background: var(--mi-tint); }
@media (max-width: 860px) { .mi-nav { display: none; } }

.mi-menu-btn {
  display: none; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; padding: 0;
  background: var(--mi-surface); color: var(--mi-text);
  border: 1px solid var(--mi-border); border-radius: var(--mi-radius-chip); cursor: pointer;
}
.mi-menu-btn svg { width: 1.15rem; height: 1.15rem; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
@media (max-width: 860px) { .mi-menu-btn { display: inline-flex; } }

/* mobile drawer */
.mi-overlay {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: color-mix(in srgb, var(--mi-text) 34%, transparent);
  backdrop-filter: blur(3px);
}
.mi-overlay.open { display: block; }
.mi-overlay .panel {
  position: absolute; inset-inline: 0; top: 0;
  background: var(--mi-surface); border-bottom: 1px solid var(--mi-border);
  padding: 1rem clamp(1rem, 4vw, 2rem) 1.4rem;
  padding-top: max(1rem, env(safe-area-inset-top));
  border-radius: 0 0 var(--mi-radius-card) var(--mi-radius-card);
}
.mi-overlay .panel a {
  display: block; padding: .8rem .2rem; color: var(--mi-text);
  text-decoration: none; font-weight: 550; border-bottom: 1px solid var(--mi-border);
}
.mi-overlay .panel a:last-of-type { border-bottom: 0; }
.mi-overlay .close {
  display: block; margin-left: auto; margin-bottom: .4rem;
  background: none; border: 0; color: var(--mi-muted);
  font: inherit; font-size: .9rem; cursor: pointer; padding: .4rem;
}

/* ---------- buttons ---------- */
.mi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.25rem; border-radius: var(--mi-radius-pill);
  background: var(--mi-primary); color: var(--mi-on-primary); font-weight: 600; font-size: .97rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background .18s var(--mi-ease), transform .18s var(--mi-ease);
}
.mi-btn:hover { background: var(--mi-primary-press); color: var(--mi-on-primary); transform: translateY(-1px); }
.mi-btn:active { transform: none; }
.mi-btn svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.mi-btn.ghost {
  background: transparent; color: var(--mi-text); border-color: var(--mi-border-strong);
}
.mi-btn.ghost:hover { background: var(--mi-bg-2); color: var(--mi-text); }
.mi-btn.sm { padding: .5rem .95rem; font-size: .9rem; }

/* ---------- hero ---------- */
.mi-hero {
  background:
    radial-gradient(60rem 30rem at 12% -12%, color-mix(in srgb, var(--mi-primary) 12%, transparent), transparent 62%),
    radial-gradient(46rem 26rem at 92% 4%, color-mix(in srgb, var(--mi-accent) 11%, transparent), transparent 60%),
    var(--mi-bg);
  border-bottom: 1px solid var(--mi-border);
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem);
}
.mi-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  color: var(--mi-primary); background: var(--mi-tint);
  padding: .34rem .8rem; border-radius: var(--mi-radius-pill); margin-bottom: 1.1rem;
}
.mi-lede { font-size: clamp(1.06rem, 2.1vw, 1.22rem); color: var(--mi-muted); max-width: 38rem; }
.mi-cta-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; align-items: center; }
.mi-cta-note { font-size: .87rem; color: var(--mi-faint); margin: .9rem 0 0; }

/* ---------- cards ---------- */
.mi-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); }
.mi-card {
  background: var(--mi-surface); border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius-card); padding: 1.35rem;
}
.mi-card h3 { margin: 0 0 .45rem; font-size: 1.05rem; }
.mi-card p  { margin: 0; color: var(--mi-muted); font-size: .95rem; }
.mi-card .ico {
  width: 2.2rem; height: 2.2rem; margin-bottom: .85rem;
  display: grid; place-items: center; border-radius: var(--mi-radius-chip);
  background: var(--mi-tint); color: var(--mi-primary);
}
.mi-card .ico svg { width: 1.2rem; height: 1.2rem; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* numbered steps */
.mi-steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 1rem; }
.mi-steps li {
  counter-increment: s; position: relative; padding-left: 3rem;
}
.mi-steps li::before {
  content: counter(s); position: absolute; left: 0; top: .05rem;
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  background: var(--mi-tint); color: var(--mi-primary);
  border-radius: var(--mi-radius-pill); font-family: var(--mi-round); font-weight: 700; font-size: .95rem;
}
.mi-steps h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.mi-steps p  { margin: 0; color: var(--mi-muted); font-size: .95rem; }

/* ---------- section band ---------- */
.mi-band { padding: clamp(3rem, 7vw, 5rem) 0; }
.mi-band.alt { background: var(--mi-bg-2); border-block: 1px solid var(--mi-border); }
.mi-band > .mi-wrap > h2:first-child { margin-top: 0; }
.mi-sec-lede { color: var(--mi-muted); max-width: 40rem; margin-bottom: 2rem; }

/* ---------- callouts ---------- */
.mi-note {
  border: 1px solid var(--mi-border); border-left: 3px solid var(--mi-primary);
  background: var(--mi-surface); border-radius: var(--mi-radius-chip);
  padding: 1rem 1.15rem; margin: 1.6rem 0; font-size: .95rem; color: var(--mi-muted);
}
.mi-note strong { color: var(--mi-text); }
.mi-note.accent { border-left-color: var(--mi-accent); }
.mi-note.alarm  { border-left-color: var(--mi-alarm); }
.mi-note.alarm strong { color: var(--mi-alarm); }

.mi-disclaimer {
  font-size: .88rem; color: var(--mi-faint);
  border-top: 1px solid var(--mi-border); padding-top: 1.1rem; margin-top: 2.5rem;
}

/* ---------- FAQ ---------- */
.mi-faq details {
  border: 1px solid var(--mi-border); background: var(--mi-surface);
  border-radius: var(--mi-radius-chip); padding: .9rem 1.1rem; margin-bottom: .6rem;
}
.mi-faq summary {
  cursor: pointer; font-weight: 600; list-style: none; display: flex;
  align-items: center; justify-content: space-between; gap: 1rem;
}
.mi-faq summary::-webkit-details-marker { display: none; }
.mi-faq summary::after {
  content: "+"; color: var(--mi-primary); font-size: 1.3rem; font-weight: 400; line-height: 1; flex: none;
}
.mi-faq details[open] summary::after { content: "\2013"; }
.mi-faq details p { margin: .7rem 0 0; color: var(--mi-muted); font-size: .95rem; }

/* ---------- severity ramp demo ---------- */
.mi-ramp { display: flex; gap: 3px; margin: 1rem 0; }
.mi-ramp span { flex: 1; height: .5rem; border-radius: 2px; }

/* ---------- tables ---------- */
.mi-tbl-scroll { overflow-x: auto; margin: 1.4rem 0; -webkit-overflow-scrolling: touch; }
table.mi-tbl { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 30rem; }
table.mi-tbl th, table.mi-tbl td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--mi-border); }
table.mi-tbl th { font-weight: 650; color: var(--mi-text); background: var(--mi-bg-2); }
table.mi-tbl td { color: var(--mi-muted); }

/* ---------- pricing ---------- */
.mi-tiers { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-items: start; }
.mi-tier { background: var(--mi-surface); border: 1px solid var(--mi-border); border-radius: var(--mi-radius-card); padding: 1.5rem; }
.mi-tier.featured { border-color: var(--mi-primary); box-shadow: 0 0 0 1px var(--mi-primary); }
.mi-tier .price { font-family: var(--mi-round); font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; margin: .3rem 0 .1rem; }
.mi-tier .per { color: var(--mi-faint); font-size: .88rem; }
.mi-tier ul { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .5rem; font-size: .94rem; color: var(--mi-muted); }
.mi-tier li { display: flex; gap: .55rem; align-items: flex-start; }
.mi-tier li::before { content: "✓"; color: var(--mi-safe); font-weight: 700; flex: none; }
.mi-tier li.no::before { content: "·"; color: var(--mi-faint); }

/* ---------- byline ---------- */
.mi-byline { font-size: .86rem; color: var(--mi-faint); margin: -.2rem 0 1.6rem; }
.mi-crumb { font-size: .86rem; color: var(--mi-faint); margin-bottom: 1.2rem; }
.mi-crumb a { color: var(--mi-muted); text-decoration: none; }
.mi-crumb a:hover { color: var(--mi-primary); text-decoration: underline; }

/* ---------- footer ---------- */
.mi-footer {
  border-top: 1px solid var(--mi-border); background: var(--mi-bg-2);
  padding: 2.8rem 0 2rem; margin-top: 3rem; font-size: .93rem;
}
.mi-footcols { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.mi-footcol h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mi-faint); margin: 0 0 .7rem; font-weight: 650; }
.mi-footcol a { display: block; color: var(--mi-muted); text-decoration: none; padding: .22rem 0; }
.mi-footcol a:hover { color: var(--mi-primary); }
.mi-copy { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--mi-border); color: var(--mi-faint); font-size: .87rem; }

/* ---------- motion ---------- */
.mi-reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--mi-ease), transform .5s var(--mi-ease); }
.mi-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mi-reveal { opacity: 1; transform: none; transition: none; }
  .mi-btn:hover { transform: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- FODMAP lookup (/fodmap-food-list) ---------- */
.mi-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.fd-tool { margin: 2.5rem 0 3rem; }

.fd-controls {
  position: sticky; top: 4.1rem; z-index: 20;
  background: color-mix(in srgb, var(--mi-bg) 94%, transparent);
  backdrop-filter: saturate(1.5) blur(10px);
  -webkit-backdrop-filter: saturate(1.5) blur(10px);
  padding: .9rem 0 .7rem;
  border-bottom: 1px solid var(--mi-border);
  margin-bottom: 1.6rem;
}

.fd-search-wrap { position: relative; display: block; margin-bottom: .7rem; }
.fd-search-ico {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  width: 1.05rem; height: 1.05rem; pointer-events: none;
  stroke: var(--mi-faint); fill: none; stroke-width: 1.9; stroke-linecap: round;
}
.fd-search-wrap input {
  width: 100%; font: inherit; font-size: 16px;   /* 16px stops iOS zoom on focus */
  padding: .72rem .9rem .72rem 2.5rem;
  background: var(--mi-surface); color: var(--mi-text);
  border: 1px solid var(--mi-border-strong); border-radius: var(--mi-radius-pill);
  -webkit-appearance: none; appearance: none;
}
.fd-search-wrap input::placeholder { color: var(--mi-faint); }
.fd-search-wrap input:focus-visible { outline: 2px solid var(--mi-primary); outline-offset: 1px; }

.fd-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.fd-f {
  font: inherit; font-size: .86rem; font-weight: 550; cursor: pointer;
  padding: .34rem .78rem; border-radius: var(--mi-radius-pill);
  background: var(--mi-surface); color: var(--mi-muted);
  border: 1px solid var(--mi-border-strong);
  transition: background .15s var(--mi-ease), color .15s var(--mi-ease), border-color .15s var(--mi-ease);
}
.fd-f:hover { color: var(--mi-text); border-color: var(--mi-faint); }
.fd-f.on {
  background: var(--mi-primary); color: var(--mi-on-primary); border-color: var(--mi-primary);
}
.fd-status { margin: .35rem 0 0; font-size: .85rem; color: var(--mi-faint); }
.fd-empty {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
  padding: 1.1rem 1.2rem; margin: 0 0 1.5rem;
  background: var(--mi-surface); border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius-card); color: var(--mi-muted); font-size: .95rem;
}

.fd-cat { margin-bottom: 2.4rem; }
.fd-cat h2 { margin: 0 0 .9rem; font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.fd-count {
  font-size: .78rem; font-weight: 600; color: var(--mi-faint);
  background: var(--mi-bg-2); border: 1px solid var(--mi-border);
  padding: .1rem .5rem; border-radius: var(--mi-radius-pill); vertical-align: middle;
  margin-left: .35rem;
}

.fd-list { display: grid; gap: .6rem; }
.fd-row {
  background: var(--mi-surface); border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius-chip); padding: .9rem 1.05rem;
}
.fd-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.fd-name { margin: 0; font-size: 1rem; font-weight: 650; }
.fd-alias { margin: .2rem 0 0; font-size: .82rem; color: var(--mi-faint); }
.fd-note { margin: .45rem 0 0; font-size: .93rem; color: var(--mi-muted); }

.fd-badge {
  font-size: .74rem; font-weight: 700; letter-spacing: .01em;
  padding: .16rem .55rem; border-radius: var(--mi-radius-pill); white-space: nowrap;
}
.fd-low        { background: #E4F2F0; color: #0F6360; }
.fd-moderate   { background: #FAEFD8; color: #7A5410; }
.fd-high       { background: #F7E7E1; color: #8F4A33; }
.fd-supportive { background: #E6F2EA; color: #2F6B48; }

.fd-tags { display: flex; flex-wrap: wrap; gap: .32rem; align-items: center; margin: .6rem 0 0; }
.fd-chip {
  font-size: .76rem; color: var(--mi-muted);
  background: var(--mi-bg-2); border: 1px solid var(--mi-border);
  padding: .12rem .5rem; border-radius: var(--mi-radius-pill);
}
.fd-chip-group { color: var(--mi-primary); background: var(--mi-tint); border-color: transparent; font-weight: 600; }
.fd-onset { font-size: .76rem; color: var(--mi-faint); margin-left: auto; white-space: nowrap; }

@media (max-width: 560px) {
  .fd-controls { top: 3.9rem; }
  .fd-onset { margin-left: 0; }
}

/* ---------------------------------------------------------------------
   Bristol stool chart (/bristol-stool-chart) and stool colour key
   (/stool-colour-chart). Row accents reuse the shared severity ramp so
   the two ends of the scale read as "away from normal" in both
   directions, with types 3 and 4 as the calm middle.
   --------------------------------------------------------------------- */
.bs-list { display: grid; gap: .7rem; margin: 1.4rem 0 1.8rem; }
.bs-row {
  display: grid; grid-template-columns: 3.1rem 1fr; gap: .95rem;
  background: var(--mi-surface); border: 1px solid var(--mi-border);
  border-left: 4px solid var(--bs-accent, var(--mi-border-strong));
  border-radius: var(--mi-radius-chip); padding: .95rem 1.1rem;
}
.bs-num {
  font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--mi-text);
  text-align: center; padding-top: .1rem;
}
.bs-num small { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mi-faint); margin-top: .3rem; }
.bs-body h3 { margin: 0 0 .3rem; font-size: 1.02rem; font-weight: 650; }
.bs-body p { margin: .3rem 0 0; font-size: .94rem; color: var(--mi-muted); }
.bs-body p.bs-means { color: var(--mi-text); }
.bs-tag {
  display: inline-block; font-size: .74rem; font-weight: 700;
  padding: .16rem .55rem; border-radius: var(--mi-radius-pill);
  background: var(--bs-tint, var(--mi-bg-2)); color: var(--bs-ink, var(--mi-muted));
  margin-left: .45rem; vertical-align: 2px; white-space: nowrap;
}
.bs-1 { --bs-accent: #C77B62; --bs-tint: #F7E7E1; --bs-ink: #8F4A33; }
.bs-2 { --bs-accent: #E0996A; --bs-tint: #FAEFD8; --bs-ink: #7A5410; }
.bs-3 { --bs-accent: #5BA776; --bs-tint: #E6F2EA; --bs-ink: #2F6B48; }
.bs-4 { --bs-accent: #5BA776; --bs-tint: #E6F2EA; --bs-ink: #2F6B48; }
.bs-5 { --bs-accent: #E9C46A; --bs-tint: #FAEFD8; --bs-ink: #7A5410; }
.bs-6 { --bs-accent: #E0996A; --bs-tint: #FAEFD8; --bs-ink: #7A5410; }
.bs-7 { --bs-accent: #C77B62; --bs-tint: #F7E7E1; --bs-ink: #8F4A33; }

/* Stool colour key. The swatch is decorative; every row states its meaning
   in text, so nothing depends on colour perception. */
.sc-row { display: grid; grid-template-columns: 2.2rem 1fr; gap: .95rem; align-items: start; }
.sc-swatch {
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.16); background: var(--sc, #7A5230);
}
@media (max-width: 560px) {
  .bs-row { grid-template-columns: 2.4rem 1fr; gap: .7rem; padding: .85rem .9rem; }
  .bs-num { font-size: 1.25rem; }
}

/* Explicit source lists on evidence-heavy pages. Inline citation in prose is
   the house style, but naming the papers in a block makes the claims checkable
   and gives answer engines something concrete to attribute. */
.mi-sources { list-style: none; padding: 0; margin: .8rem 0 0; }
.mi-sources li {
  font-size: .88rem; color: var(--mi-muted); line-height: 1.55;
  padding: .55rem 0 .55rem .95rem; border-left: 2px solid var(--mi-border);
  margin: 0 0 .3rem;
}
.mi-sources li em { color: var(--mi-text); }

/* Author box. Closes the E-E-A-T loop: visible byline -> named Person in the
   Article schema -> a real bio page at /story. All three must agree. */
.mi-author {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start;
  margin: 2.4rem 0 0; padding: 1.2rem 1.3rem;
  background: var(--mi-bg-2); border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius-card);
}
.mi-author-mark {
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--mi-primary); color: var(--mi-on-primary);
  display: grid; place-items: center;
  font-size: 1.35rem; font-weight: 700; line-height: 1;
}
.mi-author-name { margin: .15rem 0 .3rem; font-weight: 650; font-size: .98rem; }
.mi-author-bio { margin: 0; font-size: .92rem; color: var(--mi-muted); line-height: 1.6; }
@media (max-width: 560px) {
  .mi-author { grid-template-columns: 2.4rem 1fr; gap: .8rem; padding: 1rem; }
  .mi-author-mark { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }
}

/* Comparison pages (/vs-*, /best-bloating-tracker-app).
   The two-card decision block is the part that makes these citable: it answers
   "which should I pick" above the fold instead of burying it under a matrix. */
.mi-choose { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin: 1.5rem 0 1.8rem; }
.mi-choose > div {
  background: var(--mi-surface); border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius-card); padding: 1.1rem 1.2rem;
}
.mi-choose > div.is-ours { border-color: var(--mi-primary); background: var(--mi-tint); }
.mi-choose h3 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; }
.mi-choose ul { margin: 0; padding-left: 1.1rem; }
.mi-choose li { font-size: .92rem; color: var(--mi-muted); margin: 0 0 .35rem; line-height: 1.55; }
.mi-choose > div.is-ours li { color: var(--mi-text); }

/* "Not verified" is deliberately distinct from "no". Claiming a competitor
   lacks a feature we simply could not confirm is how comparison pages become
   untrustworthy, and it is the single most common failure in this genre. */
.mi-unk { color: var(--mi-faint); font-style: italic; }
.mi-disclose {
  margin: 2rem 0 0; padding: 1rem 1.15rem;
  background: var(--mi-bg-2); border: 1px dashed var(--mi-border-strong);
  border-radius: var(--mi-radius-chip); font-size: .9rem; color: var(--mi-muted);
}
@media (max-width: 640px) { .mi-choose { grid-template-columns: 1fr; } }

/* Figures. The Bristol chart is an original asset we want linked to, so it gets
   a real caption rather than being dropped in as decoration. */
.mi-figure { margin: 1.6rem 0 2rem; }
.mi-figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--mi-border); border-radius: var(--mi-radius-card);
  background: var(--mi-surface);
}
.mi-figure figcaption {
  margin: .6rem 0 0; font-size: .86rem; color: var(--mi-faint); line-height: 1.55;
}

/* ---------------------------------------------------------------------
   Symptom self-check (/bloating-symptom-check)
   Steps 2 and 3 are visible in the HTML and hidden by JS on load, not the
   other way round. Without JS the whole form still renders and reads as a
   printable questionnaire, and crawlers see every question.
   --------------------------------------------------------------------- */
.ck-tool { margin: 1.6rem 0 2rem; }
.ck-step {
  background: var(--mi-surface); border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius-card); padding: 1.3rem 1.4rem; margin: 0 0 1rem;
}
.ck-step > h3 { margin: 0 0 .3rem; font-size: 1.08rem; }
.ck-step > p.ck-hint { margin: 0 0 1rem; font-size: .9rem; color: var(--mi-muted); }
.ck-step fieldset { border: 0; padding: 0; margin: 0; }
.ck-step legend { padding: 0; font-weight: 650; font-size: .98rem; }

.ck-flags { display: grid; gap: .5rem; margin: .9rem 0 0; }
.ck-flag {
  display: grid; grid-template-columns: 1.15rem 1fr; gap: .7rem; align-items: start;
  padding: .65rem .8rem; border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius-chip); cursor: pointer; font-size: .93rem; line-height: 1.5;
}
.ck-flag:hover { border-color: var(--mi-border-strong); background: var(--mi-bg-2); }
.ck-flag input { margin: .22rem 0 0; accent-color: var(--mi-alarm); width: 1.15rem; height: 1.15rem; }
.ck-flag:has(input:checked) { border-color: var(--mi-alarm); background: #FDF3F0; }
.ck-flag small { display: block; color: var(--mi-faint); font-size: .82rem; margin-top: .1rem; }

.ck-q { padding: 1rem 0; border-top: 1px solid var(--mi-border); }
.ck-q:first-of-type { border-top: 0; padding-top: .4rem; }
.ck-q label { display: block; font-weight: 600; font-size: .97rem; margin: 0 0 .2rem; }
.ck-q .ck-ends { display: flex; justify-content: space-between; font-size: .78rem; color: var(--mi-faint); margin-top: .3rem; }
.ck-q input[type=range] { width: 100%; accent-color: var(--mi-primary); height: 1.6rem; }
.ck-val {
  float: right; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--mi-primary); background: var(--mi-tint);
  padding: .05rem .5rem; border-radius: var(--mi-radius-pill); font-size: .88rem;
}

.ck-stop { border: 2px solid var(--mi-alarm); background: #FDF3F0; }
.ck-stop h3 { color: var(--mi-alarm); }
.ck-stop ul { margin: .6rem 0 0; padding-left: 1.15rem; }
.ck-stop li { margin: 0 0 .3rem; font-size: .94rem; }

.ck-score { font-size: 2.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ck-score span { font-size: 1rem; font-weight: 600; color: var(--mi-faint); }
.ck-band { font-size: 1.05rem; font-weight: 700; margin: .4rem 0 0; }

.ck-meter { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin: 1rem 0 .3rem; }
.ck-meter i { display: block; }
.ck-meter i:nth-child(1) { flex: 75;  background: #BFD9D4; }
.ck-meter i:nth-child(2) { flex: 100; background: #8FC7BD; }
.ck-meter i:nth-child(3) { flex: 125; background: #E9C46A; }
.ck-meter i:nth-child(4) { flex: 200; background: #C77B62; }
.ck-scale { display: flex; justify-content: space-between; font-size: .74rem; color: var(--mi-faint); }

.ck-summary {
  width: 100%; min-height: 15rem; margin: .8rem 0 0; padding: .9rem 1rem;
  font: 400 .88rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--mi-text); background: var(--mi-bg-2);
  border: 1px solid var(--mi-border); border-radius: var(--mi-radius-chip); resize: vertical;
}
.ck-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0 0; }
.ck-note { font-size: .84rem; color: var(--mi-faint); margin: .8rem 0 0; }
@media print { .ck-actions, .mi-topbar, .mi-footer, .mi-cta-row { display: none; } }