/* ============================================================
   HealthTools — Design System
   Editorial, border-driven, medical-grade utility platform.
   Hand-rolled. No frameworks.
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Color */
  --paper: #f7f6f1;          /* page base — warm neutral, not cream */
  --surface: #ffffff;        /* cards, panels */
  --surface-2: #f0efe8;      /* inset wells, code, subtle fills */
  --ink: #17211c;            /* primary text — green-black */
  --ink-soft: #3f4a44;       /* secondary text */
  --ink-faint: #6b756f;      /* tertiary / meta text */
  --line: #dfddd2;           /* 1.5px borders */
  --line-strong: #c9c6b8;

  --jade: #0f7a5a;           /* brand primary */
  --jade-deep: #0a5c44;
  --jade-soft: #e3f0ea;
  --coral: #e2694a;          /* accent — energy */
  --coral-deep: #c24f31;
  --coral-soft: #fbeae3;
  --amber: #d9972d;
  --amber-soft: #f8efdc;
  --plum: #7c4a6d;
  --plum-soft: #f2e7ee;
  --ocean: #2c6e8f;
  --ocean-soft: #e4eef3;

  --ok: #1e8e5a;
  --warn: #c98a1d;
  --bad: #c44c3a;

  /* Type */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Inter", "system-ui", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(23, 33, 28, 0.05);
  --shadow-md: 0 6px 24px rgba(23, 33, 28, 0.07);
  --shadow-lg: 0 18px 50px rgba(23, 33, 28, 0.1);

  --maxw: 1180px;
  --maxw-narrow: 760px;

  --nav-h: 68px;

  /* Aliases used by page-specific stylesheets */
  --bg: var(--paper);
  --header-h: var(--nav-h);
  --radius-xs: 4px;
  --shadow-lift: var(--shadow-lg);
  --jade-wash: var(--jade-soft);
  --jade-line: rgba(15, 122, 90, 0.28);

  /* Every inner-page hero shares this wash. A flat white band made the tool,
     category and guides pages read as a different site to the homepage, which
     is the one place a visitor arriving from search forms their first opinion.
     The tint is strongest at the top and reaches zero at the bottom edge, so
     the band dissolves into the page rather than sitting on it as a coloured
     box with a second hard edge above the border. The last layer is --paper
     rather than --surface for that reason: at 0% opacity the gradient has to
     land on exactly the body background. Literal rgba here, not color-mix,
     matching --jade-line above. */
  --hero-wash:
    radial-gradient(1100px 340px at 82% -45%, rgba(15, 122, 90, 0.06), transparent 70%),
    linear-gradient(180deg,
      rgba(15, 122, 90, 0.08) 0%,
      rgba(15, 122, 90, 0.025) 60%,
      rgba(15, 122, 90, 0) 100%),
    var(--paper);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--jade-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--jade); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 var(--space-4);
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.08rem; }

p { margin: 0 0 var(--space-4); }

code, kbd {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.08em 0.4em;
}

hr {
  border: 0;
  border-top: 1.5px solid var(--line);
  margin: var(--space-7) 0;
}

/* Selection has to be obvious on paper, white cards and the dark bands alike.
   ::selection and ::-moz-selection must stay in separate rules — grouping them
   makes browsers that know only one drop the whole declaration. */
::selection { background: var(--jade); color: #fff; text-shadow: none; }
::-moz-selection { background: var(--jade); color: #fff; text-shadow: none; }

/* On ink backgrounds a jade block disappears, so invert the pair */
.trust-band ::selection,
.cta-band ::selection,
.site-footer ::selection,
.cookie-banner ::selection { background: var(--jade-soft); color: var(--ink); }
.trust-band ::-moz-selection,
.cta-band ::-moz-selection,
.site-footer ::-moz-selection,
.cookie-banner ::-moz-selection { background: var(--jade-soft); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--jade);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link — visible only once focused by keyboard */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--jade);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 10px 0;
  font-weight: 620;
  font-size: 0.92rem;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* ---------- 3. Layout ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-5); }
.container-narrow { max-width: var(--maxw-narrow); margin: 0 auto; padding: 0 var(--space-5); }

.section { padding: var(--space-8) 0; }
.section--tight { padding: var(--space-6) 0; }

/* Section headers.
   There is no .eyebrow any more. Every section used to open with a small
   uppercase label and a 28px jade dash sitting above its heading — "Run the
   numbers", "Keep reading", "The toolkit", and the same "Site information"
   above the policy list on seven different pages. PC had them stripped from
   the whole site on 2026-10-01: the dash over a heading reads as filler, and
   on most of those sections the heading already said the same thing. Do not
   reintroduce the class or the ::before dash. If a section needs a label, the
   label is the heading. */
.section-head { max-width: 640px; margin-bottom: var(--space-7); }
.section-head p { color: var(--ink-soft); font-size: 1.06rem; }

/* ---------- 4. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 246, 241, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--line);
}
.site-header__inner {
  max-width: var(--maxw); margin: 0 auto;
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--space-5);
  padding: 0 var(--space-5);
}

.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--jade);
  display: grid; place-items: center;
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.25);
}
.brand__name { font-family: var(--font-display); font-size: 1.28rem; font-weight: 620; letter-spacing: -0.01em; }
.brand__name span { color: var(--jade); }

.nav { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
/* The nav holds one .btn as well as plain links, and a bare `.nav a` outranks
   `.btn--primary` on specificity, so it would repaint the button's white text
   in --ink-soft and its background in --surface-2 on hover. The :not(.btn)
   keeps these rules on text links and leaves the button to the button styles. */
.nav a:not(.btn) {
  text-decoration: none; color: var(--ink-soft);
  font-size: 0.92rem; font-weight: 550;
  padding: var(--space-2) var(--space-3);
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.nav a:not(.btn):hover { color: var(--ink); background: var(--surface-2); }
.nav a:not(.btn).is-active { color: var(--jade-deep); background: var(--jade-soft); }

.nav-toggle {
  display: none; background: none; border: 1.5px solid var(--line-strong);
  border-radius: 8px; width: 40px; height: 40px; cursor: pointer;
  margin-left: auto; align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); margin: 2.5px 0; border-radius: 2px; }

@media (max-width: 860px) {
  .nav-toggle { display: flex; flex-direction: column; }
  .nav {
    display: none;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1.5px solid var(--line);
    flex-direction: column; align-items: stretch;
    padding: var(--space-4) var(--space-5) var(--space-5);
    gap: var(--space-1);
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: var(--space-3); font-size: 1rem; }
  .site-header__inner { flex-wrap: wrap; }
}

/* ---------- 5. Hero ---------- */
.hero {
  position: relative;
  padding: var(--space-9) 0 var(--space-8);
  border-bottom: 1.5px solid var(--line);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(700px 300px at 85% -10%, rgba(15,122,90,0.08), transparent 70%),
    radial-gradient(600px 280px at -10% 20%, rgba(226,105,74,0.06), transparent 70%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-8);
  align-items: center;
}
.hero__kicker {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: 0.8rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--jade-deep); background: var(--jade-soft);
  border: 1px solid rgba(15,122,90,0.25);
  padding: var(--space-2) var(--space-3); border-radius: 100px;
  margin-bottom: var(--space-5);
}
.hero h1 { font-size: clamp(2.4rem, 5vw, 3.7rem); font-weight: 580; letter-spacing: -0.02em; }
.hero h1 em { font-style: italic; color: var(--jade); }
.hero__lead { font-size: 1.14rem; color: var(--ink-soft); max-width: 34em; }

.hero__ctas { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.hero__proof { display: flex; gap: var(--space-6); margin-top: var(--space-7); flex-wrap: wrap; }
.hero__proof-item { display: flex; flex-direction: column; gap: 2px; }
.hero__proof-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 620; color: var(--ink); }
.hero__proof-label { font-size: 0.82rem; color: var(--ink-faint); }

/* Quick-calc card in hero */
.quick-calc {
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
}
.quick-calc__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-5); }
.quick-calc__head h2 { margin: 0; font-size: 1.35rem; }
.quick-calc__head a { font-size: 0.85rem; font-weight: 600; }
.quick-calc .field + .field { margin-top: var(--space-4); }
.quick-calc__result {
  margin-top: var(--space-5); padding-top: var(--space-5);
  border-top: 1.5px dashed var(--line-strong);
}
.quick-calc__num { font-family: var(--font-display); font-size: 2.6rem; font-weight: 640; line-height: 1; }
.quick-calc__num small { font-size: 1.1rem; color: var(--ink-faint); font-weight: 500; }
.quick-calc__desc { color: var(--ink-soft); font-size: 0.94rem; margin-top: var(--space-2); }

/* ---------- 6. Buttons & forms ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 620;
  padding: 0.72rem 1.4rem;
  border-radius: 10px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
  line-height: 1.2;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--jade); color: #fff; box-shadow: 0 2px 0 var(--jade-deep), var(--shadow-sm); }
.btn--primary:hover { background: var(--jade-deep); color: #fff; }

.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--ink-soft); background: var(--surface-2); color: var(--ink); }

.btn--accent { background: var(--coral); color: #fff; box-shadow: 0 2px 0 var(--coral-deep), var(--shadow-sm); }
.btn--accent:hover { background: var(--coral-deep); color: #fff; }

.btn--ghost { background: transparent; color: var(--jade-deep); border-color: var(--jade); }
.btn--ghost:hover { background: var(--jade-soft); }

.btn--lg { padding: 0.95rem 1.9rem; font-size: 1.04rem; }
.btn--sm { padding: 0.45rem 0.95rem; font-size: 0.85rem; border-radius: 8px; }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field > label { font-size: 0.86rem; font-weight: 620; color: var(--ink-soft); }

.input, .select, textarea.input {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus, .select:focus, textarea.input:focus {
  outline: none;
  border-color: var(--jade);
  box-shadow: 0 0 0 3px rgba(15,122,90,0.14);
}
.input::placeholder { color: var(--ink-faint); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* Unit segmented control */
.seg {
  display: inline-flex; background: var(--surface-2);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 3px; gap: 3px;
}
.seg button {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 620; color: var(--ink-soft);
  padding: 0.35rem 0.9rem; border-radius: 7px; transition: all 0.15s;
}
.seg button.is-active { background: var(--surface); color: var(--jade-deep); box-shadow: var(--shadow-sm); }

/* ---------- 7. Cards ---------- */
.card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5);
  transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
}
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }

.tool-card { display: flex; flex-direction: column; gap: var(--space-4); }
.tool-card__icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.35rem;
}
.tool-card__icon--jade { background: var(--jade-soft); }
.tool-card__icon--amber { background: var(--amber-soft); }
.tool-card__icon--coral { background: var(--coral-soft); }
.tool-card__icon--plum { background: var(--plum-soft); }
.tool-card__icon--ocean { background: var(--ocean-soft); }

.tool-card h3 { font-size: 1.12rem; margin-bottom: var(--space-2); }
.tool-card p { color: var(--ink-soft); font-size: 0.93rem; margin: 0; flex-grow: 1; }
.tool-card__link { font-size: 0.88rem; font-weight: 650; color: var(--jade-deep); }
a.tool-card:hover .tool-card__link { text-decoration: underline; }

/* Category band with accent border */
.cat-band { border-top: 3px solid var(--cat-accent, var(--jade)); }

/* ---------- 8. Tool page shell ---------- */
.tool-hero { border-bottom: 1.5px solid var(--line); background: var(--hero-wash); }
.tool-hero__inner { padding: var(--space-7) 0; }
.breadcrumbs { font-size: 0.83rem; margin-bottom: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Breadcrumb text sits in the strongest part of the hero wash, and --ink-faint
   was only ever contrast-safe against plain white. --ink-soft holds a ratio
   near 7:1 on the tint while still reading as meta text at this size. The
   separators stay faint because they carry no meaning on their own. */
.breadcrumbs, .breadcrumbs a { color: var(--ink-soft); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--jade-deep); }
.breadcrumbs .sep { color: var(--line-strong); }

.tool-hero h1 { margin-bottom: var(--space-3); }
.tool-hero__lede { max-width: 46em; color: var(--ink-soft); font-size: 1.05rem; }

.tool-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-7); align-items: start; padding: var(--space-7) 0 var(--space-9); }
@media (max-width: 980px) { .tool-body { grid-template-columns: 1fr; } }

.calc-shell { position: sticky; top: calc(var(--nav-h) + var(--space-5)); }
.calc-card { background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.calc-card__body { padding: var(--space-6); }
.result-panel { margin-top: var(--space-5); border-top: 1.5px dashed var(--line-strong); padding-top: var(--space-5); display: none; }
.result-panel.is-visible { display: block; animation: rise 0.3s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Gauges */
.gauge { position: relative; width: 170px; height: 170px; margin: 0 auto var(--space-4); }
.gauge svg { transform: rotate(-90deg); }
.gauge__track { fill: none; stroke: var(--surface-2); stroke-width: 12; }
.gauge__value {
  fill: none; stroke: var(--jade); stroke-width: 12; stroke-linecap: round;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.gauge__center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.gauge__num { font-family: var(--font-display); font-size: 2.3rem; font-weight: 640; line-height: 1; }
.gauge__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-top: 3px; }

/* Bars for category results */
.meter { display: grid; grid-template-columns: 92px 1fr 42px; gap: var(--space-3); align-items: center; }
.meter__bar { height: 10px; background: var(--surface-2); border-radius: 100px; overflow: hidden; border: 1px solid var(--line); }
.meter__fill { height: 100%; border-radius: 100px; transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); }

/* Zone strip (heart rate) */
.zones { display: grid; gap: var(--space-2); }
.zone { display: grid; grid-template-columns: 130px 1fr 150px; gap: var(--space-4); align-items: center; font-size: 0.92rem; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); }
.zone__bar { height: 12px; border-radius: 100px; background: var(--surface-2); overflow: hidden; }
.zone__fill { height: 100%; border-radius: 100px; }
.zone strong { font-size: 0.95rem; }
@media (max-width: 560px) { .zone { grid-template-columns: 1fr; gap: var(--space-2); } }

/* Result number row */
.big-num { font-family: var(--font-display); font-size: 3rem; font-weight: 640; line-height: 1; color: var(--ink); }
.big-num small { font-size: 1.15rem; color: var(--ink-faint); font-weight: 500; }

/* ---------- Tables ------------------------------------------
   One treatment for every table on the site: the 14 written by hand on the
   calculator pages and the 32 that marked generates inside the guides.

   They used to be styled in two places and looked like two different
   components. The calculators got .data-table — small-caps grey headings, no
   frame, and a table that ran the full width of the grid column. The guides got
   .prose table — a tinted heading and, because .article-body .prose sets the
   display serif, cells set in Fraunces. PC pointed at the body-fat table on
   2026-10-01 and had them made proper. Unified here.

   Every table now sits inside .table-wrap, which carries the frame and the
   horizontal scroll. Five columns of nowrap labels cannot shrink below their
   content on a phone, and without a wrapper a wide table pushes the whole page
   wider than the viewport. lib/articles.js wraps marked's output; the
   hand-written tables carry the wrapper in the template.
   ------------------------------------------------------------ */

.table-wrap {
  margin: var(--space-5) 0;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  overflow-x: auto;
}

/* A table shares the measure of the prose it sits among. On the calculator
   pages .tool-section p stops at 68ch while the table ran the full width of the
   grid column — roughly 170px wider — so a framed table would have hung out
   past every paragraph above and below it. In the guides the prose is already
   full width, so only the calculator sections need the cap. */
.tool-section .table-wrap { max-width: 68ch; }

.data-table,
.prose table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  /* Tables are data, not reading copy. Without this the guide tables inherit
     Fraunces at 1.1rem and read as a paragraph that happens to be in a grid. */
  font-family: var(--font-body);
  font-size: 0.92rem;
  margin: 0;
}

.data-table th,
.data-table td,
.prose table th,
.prose table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1.5px solid var(--line);
  line-height: 1.55;
}

/* The heading is a band rather than another row: tinted, small, letter-spaced,
   and closed by the heaviest rule in the table. */
.data-table thead th,
.prose table thead th {
  background: var(--surface-2);
  border-bottom: 1.5px solid var(--line-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* Every column except the last is a label or a figure, and those must not wrap.
   "Above average" breaking over two lines, then "25% and above" and "32% and
   above" breaking over two more, is what made the body-fat table read as
   broken. The last column is the one carrying a sentence, so it is the one
   allowed to wrap and to take whatever width is left. */
.data-table th:not(:last-child),
.data-table td:not(:last-child),
.prose table th:not(:last-child),
.prose table td:not(:last-child) { white-space: nowrap; }

.data-table tbody tr:last-child td,
.prose table tbody tr:last-child td { border-bottom: 0; }

/* Figures stack down a column only if every digit is the same width. */
.data-table td,
.prose table td { font-variant-numeric: tabular-nums; }

/* Formula + source boxes */
.formula-box { background: var(--surface-2); border: 1.5px solid var(--line); border-left: 3px solid var(--jade); border-radius: 8px; padding: var(--space-4) var(--space-5); font-family: var(--font-mono); font-size: 0.92rem; margin: var(--space-4) 0; overflow-x: auto; }
.source-note { font-size: 0.82rem; color: var(--ink-faint); border-top: 1px dashed var(--line-strong); padding-top: var(--space-3); margin-top: var(--space-4); }
.source-note a { color: var(--ink-faint); }

/* Disclaimer.
   The box that used to sit under every article and every calculator, with the
   same "this is an estimate, not a diagnosis" wording, is gone — see the note in
   views/guides/article.ejs. Three contextual boxes still use this class because
   each one fires only where it is actually true, and none of them is a standing
   notice: the emergency notice on /medical-disclaimer, the "not for medical
   emergencies" line on /contact, and the dynamic warning on the macro calculator
   that only appears when a submitted target is low enough to warrant it.
   Do not put a standing callout back under an article or a calculator. */
.disclaimer { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--amber-soft); border: 1.5px solid rgba(217,151,45,0.4); border-radius: 10px; padding: var(--space-4) var(--space-5); font-size: 0.88rem; color: #5c4a1d; margin-top: var(--space-5); }
.disclaimer strong { display: block; margin-bottom: 2px; }

/* FAQ */
.faq-item { border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: var(--space-3); overflow: hidden; }
.faq-item details > summary { cursor: pointer; padding: var(--space-4) var(--space-5); font-weight: 620; font-size: 0.99rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.faq-item details > summary::-webkit-details-marker { display: none; }
.faq-item details > summary::after { content: "+"; font-family: var(--font-display); font-size: 1.4rem; color: var(--jade); line-height: 1; }
.faq-item details[open] > summary::after { content: "–"; }
.faq-item details > div { padding: 0 var(--space-5) var(--space-4); color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- 9. Guides / articles ---------- */
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 980px) { .guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .guide-grid { grid-template-columns: 1fr; } }

.guide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* There is no cover image anywhere on this site. The card is a box, and the
   3px rule across its top edge is the one piece of colour that separates a card
   from the page — the same job the old generated SVG was doing, at no weight. */
.guide-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--jade);
}

.guide-card__body { display: flex; flex-direction: column; gap: var(--space-3); flex-grow: 1; padding: var(--space-6) var(--space-5) var(--space-5); }

.guide-card__meta { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-size: 0.73rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.guide-card__cat { color: var(--jade-deep); }
.guide-card__meta time { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.03em; }
.guide-card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; }

.guide-card h3 { font-size: 1.18rem; margin: 0; line-height: 1.28; letter-spacing: -0.012em; transition: color 0.2s ease; }
.guide-card:hover h3 { color: var(--jade-deep); }

.guide-card__excerpt { font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); margin: 0; flex-grow: 1; }

.guide-card__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1.5px solid var(--line); font-size: 0.82rem; color: var(--ink-faint); }
.guide-card__by { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--ink-soft); }
.guide-card__mono { width: 22px; height: 22px; border-radius: 50%; background: var(--jade-soft); color: var(--jade-deep); display: grid; place-items: center; font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; flex-shrink: 0; }
.guide-card__go { font-weight: 650; color: var(--jade); white-space: nowrap; }
.guide-card:hover .guide-card__go { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .guide-card h3 { transition: none; }
}

/* Article prose */
.prose { font-size: 1.03rem; line-height: 1.75; color: var(--ink); }
.prose h2 { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1.5px solid var(--line); }
.prose h3 { margin-top: var(--space-6); }
.prose ul, .prose ol { padding-left: 1.4em; margin-bottom: var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.prose blockquote { margin: var(--space-5) 0; padding: var(--space-4) var(--space-5); border-left: 3px solid var(--jade); background: var(--surface); border-radius: 0 10px 10px 0; color: var(--ink-soft); font-style: italic; }
/* .prose table is styled with .data-table in the Tables section above, so the
   guides and the calculators cannot drift apart. Do not restyle it here. */

.article-toc { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); padding: var(--space-5); margin: var(--space-6) 0; font-size: 0.92rem; }
.article-toc strong { display: block; margin-bottom: var(--space-3); font-family: var(--font-display); font-size: 1rem; }
.article-toc ol { margin: 0; padding-left: 1.3em; display: grid; gap: var(--space-2); }
.article-toc a { color: var(--ink-soft); text-decoration: none; }
.article-toc a:hover { color: var(--jade-deep); text-decoration: underline; }

.author-box { display: flex; gap: var(--space-4); align-items: flex-start; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); padding: var(--space-5); margin-top: var(--space-6); }
.author-box__avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--jade-soft); color: var(--jade-deep); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; flex-shrink: 0; }
.author-box__name { font-weight: 680; }
.author-box p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
/* Two classes so this outranks the generic `.author-box p` above without an
   !important — the role line sits directly under the name and has to read as a
   label, not as the first sentence of the biography. */
.author-box .author-box__role { margin-top: 2px; font-size: 0.78rem; font-weight: 620; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.author-box p + p { margin-top: var(--space-2); }

/* ---------- 10. Homepage bands ---------- */
.trust-band { border-block: 1.5px solid var(--line); background: var(--surface); }
.trust-band__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); padding: var(--space-7) 0; }
@media (max-width: 760px) { .trust-band__grid { grid-template-columns: 1fr; } }
.trust-item { display: flex; gap: var(--space-4); }
.trust-item__ic { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0; }
.trust-item h3 { font-size: 1.02rem; margin-bottom: var(--space-1); }
.trust-item p { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }

/* Category explorer */
.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
@media (max-width: 980px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .cat-grid { grid-template-columns: 1fr; } }
.cat-card { text-align: left; text-decoration: none; color: inherit; padding: var(--space-5); border-radius: var(--radius); background: var(--surface); border: 1.5px solid var(--line); display: flex; flex-direction: column; gap: var(--space-3); }
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.cat-card__name { font-family: var(--font-display); font-weight: 620; font-size: 1.06rem; }
.cat-card__count { font-size: 0.8rem; color: var(--ink-faint); }

/* CTA band */
.cta-band { background: var(--ink); color: #f4f2ea; border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 200px at 50% 0%, rgba(15,122,90,0.35), transparent 70%); }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(244,242,234,0.75); max-width: 36em; margin: 0 auto var(--space-5); }

/* ---------- 11. Footer ---------- */
/* Dark green footer, matching the trust band on the homepage. Everything
   inside has to flip to light ink, so the overrides below are not optional. */
.site-footer { border-top: 1.5px solid var(--line); background: var(--ink); color: rgba(255,255,255,0.68); margin-top: var(--space-9); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-7); padding: var(--space-8) 0; }
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h4 { font-family: var(--font-body); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); margin-bottom: var(--space-4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.site-footer a { color: rgba(255,255,255,0.78); text-decoration: none; font-size: 0.93rem; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .brand, .site-footer .brand:hover { color: #fff; }
.site-footer .brand__name span { color: #6fcfa8; }
.site-footer .muted { color: rgba(255,255,255,0.5); }
.site-footer__about p { font-size: 0.92rem; color: rgba(255,255,255,0.68); }
.site-footer__bottom { border-top: 1.5px solid rgba(255,255,255,0.14); padding: var(--space-5) 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; font-size: 0.84rem; color: rgba(255,255,255,0.5); }
.site-footer__bottom a { font-size: inherit; }

/* ---------- 12. Static pages ---------- */
/* Shares the hero wash with the tool and guides pages. The category pages use
   this same band with .cat-band on top, so the accent border sits above a
   tinted hero rather than a white one and the two no longer fight. */
.page-hero { border-bottom: 1.5px solid var(--line); background: var(--hero-wash); padding: var(--space-7) 0; }
.prose-page { max-width: 720px; }
.prose-page h2 { margin-top: var(--space-7); }
.prose-page li { margin-bottom: var(--space-2); }

/* Contact form */
.form-card { background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-lg); padding: var(--space-6); max-width: 560px; box-shadow: var(--shadow-md); }
.form-card .field { margin-bottom: var(--space-4); }
.form-success { background: var(--jade-soft); border: 1.5px solid rgba(15,122,90,0.3); color: var(--jade-deep); border-radius: 10px; padding: var(--space-4) var(--space-5); font-weight: 600; }

/* ---------- 13. Cookie banner ---------- */
.cookie-banner { position: fixed; bottom: var(--space-5); left: var(--space-5); right: var(--space-5); max-width: 480px; margin: 0 auto; background: var(--ink); color: #f4f2ea; border-radius: var(--radius); padding: var(--space-5); z-index: 100; box-shadow: var(--shadow-lg); display: none; }
.cookie-banner.is-visible { display: block; animation: rise 0.3s ease; }
.cookie-banner p { font-size: 0.9rem; margin-bottom: var(--space-4); color: rgba(244,242,234,0.85); }
.cookie-banner__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---------- 14. Utility ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.center { text-align: center; }
.mt-1 { margin-top: var(--space-4); }
.mt-2 { margin-top: var(--space-6); }
.mt-3 { margin-top: var(--space-8); }
.small { font-size: 0.88rem; }
.muted { color: var(--ink-faint); }

.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.76rem; font-weight: 680; letter-spacing: 0.03em; padding: 3px 10px; border-radius: 100px; border: 1.5px solid; }
.badge--ok { color: var(--ok); background: #e9f5ee; border-color: rgba(30,142,90,0.35); }
.badge--warn { color: #8a5f0e; background: var(--amber-soft); border-color: rgba(201,138,29,0.4); }
.badge--info { color: var(--ocean); background: var(--ocean-soft); border-color: rgba(44,110,143,0.35); }
/* VMUI.setBadge emits this for any engine result with tone 'bad' — the obesity
   and underweight BMI bands, above-average body fat, high waist ratios. */
.badge--bad { color: #a33a29; background: var(--coral-soft); border-color: rgba(196,76,58,0.4); }

/* Reveal on scroll (progressive enhancement) */
.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Print — make reports clean */
@media print {
  .site-header, .site-footer, .cookie-banner, .btn, .tool-hero { display: none !important; }
  body { background: #fff; }
  .tool-body { display: block; }
  .calc-shell { position: static; }
  .section { padding: var(--space-4) 0; }
}