/* ============================================================
   00a. Self-hosted @font-face declarations
   font-display: swap — shows fallback text immediately,
   swaps to DM Sans/Serif once loaded (eliminates CLS vs block)
   ============================================================ */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-sans-400.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: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-sans-400i.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: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dm-sans-500.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: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/dm-sans-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: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-serif-display-400.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: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-serif-display-400i.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;
}


/* ============================================================
   00. Dark Mode (prefers-color-scheme)
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#1A1714;
    --surface:#242017;
    --ink:#F0EDE8;
    --ink2:#A8A29C;
    --ink3:#918B85;
    --accent:#5DB88A;
    --accent-rgb:93,184,138;
    --accent-light:#1A3329;
    --warn:#E09A50;
    --warn-light:#2C1E0A;
    --danger:#E06060;
    --danger-light:#2C1010;
    --underweight:#6BA3D9;
    --underweight-light:#0E1E35;
    /* Fixed (non-adaptive) colors for white-text badges — the mode-
       adaptive --accent/--warn/--danger/--underweight above are tuned
       light/vivid for dot & line visibility on a dark page background,
       which fails WCAG contrast when used as a solid badge fill behind
       white text. These stay the same in both modes and are verified
       to hold ≥4.5:1 with white text. */
    --badge-underweight:#2563A8;
    --badge-normal:#2D6A4F;
    --badge-overweight:#9A5E1C;
    --badge-obese:#B83232;
    --border:#2E2A26;
    --shadow:0 2px 16px rgba(0,0,0,0.35);
  }

  header {
    background:#111009;
    border-bottom-color:#5DB88A;
  }

  footer {
    background:#111009;
    border-top-color:#5DB88A;
  }

  .cta-inner,
  .summary-card,
  .tdee-box,
  .featured-card,
  .box-green {
    background:#111009;
  }

  select,
  .input-wrap input {
    background:var(--bg);
    color:var(--ink);
    border-color:var(--border);
  }

  .bmi-table th,
  th {
    background:#1A3329;
    color:var(--ink);
  }

  .card,
  .result-box,
  .result-card,
  .answer-box,
  .verdict-box,
  .measure-card,
  .form-card,
  .country-selector-wrap {
    background:var(--surface);
    box-shadow:0 2px 16px rgba(0,0,0,0.3);
  }

  .toc,
  .timeline,
  .info-box,
  .formula-box,
  .workout-plan,
  .goal-mini-box,
  .sources {
    background:#242017;
  }

  .notice-banner {
    background:#1A3329;
    border-color:#2D6A4F;
  }

  .notice-inner {
    color:var(--ink);
  }

  nav a {
    color:rgba(255,255,255,0.5);
  }

  nav a:hover {
    color:#fff;
    background:rgba(255,255,255,0.06);
  }
}
/*
 * style.css — healthybmicheck.com
 *
 * Table of Contents
 * ──────────────────────────────────────────
 *   01. Reset & CSS Variables (4 rules)
 *   02. Header & Navigation (12 rules)
 *   03. Footer (3 rules)
 *   04. Hero Section (4 rules)
 *   05. Layout & Containers (11 rules)
 *   06. Cards (16 rules)
 *   07. Buttons & CTAs (31 rules)
 *   08. Forms & Inputs (74 rules)
 *   09. Results Display (26 rules)
 *   10. Charts, Bars & Macros (49 rules)
 *   11. Calculator UI Components (49 rules)
 *   12. Tables (4 rules)
 *   13. Articles, Guides & FAQ (52 rules)
 *   14. Animations & Keyframes (1 rules)
 *   15. Responsive / Media Queries (20 rules)
 *   16. Miscellaneous (80 rules)
 */

/* ============================================================
   01. Reset & CSS Variables
   ============================================================ */

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

:root {
  --bg:#F7F4EF;
  --surface:#FFFFFF;
  --ink:#1A1714;
  --ink2:#6B6560;
  --ink3:#736D67;
  --accent:#2D6A4F;
  --accent-rgb:45,106,79;
  --accent-light:#D8EFE4;
  --warn:#9A5E1C;
  --warn-light:#FBF0DC;
  --danger:#B83232;
  --danger-light:#FADFDF;
  --underweight:#2563A8;
  --underweight-light:#DCE9F8;
  --badge-underweight:#2563A8;
  --badge-normal:#2D6A4F;
  --badge-overweight:#9A5E1C;
  --badge-obese:#B83232;
  --border:#E5E0D8;
  --radius:16px;
  --shadow:0 2px 16px rgba(26,23,20,0.07);
}

body {
  font-family:'DM Sans',sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
}
a {
  color: inherit;
  text-decoration: none;
}

:root {
  --protein:#3A7BBF;
  --carbs:#C17B2A;
  --fat:#7C4DFF;
}

/* ============================================================
   02. Header & Navigation
   ============================================================ */

header {
  background:var(--ink);
  color:#fff;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:2.5px solid #2D6A4F;
  position:relative;
}

.logo {
  font-family:'DM Serif Display',serif;
  font-size:1.25rem;
}

.logo span {
  color:#7EC8A4;
}

header a {
  text-decoration:none;
  color:inherit;
}

nav {
  display:flex;
  align-items:center;
  gap:4px;
}

nav a {
  color:rgba(255,255,255,0.6);
  text-decoration:none;
  font-size:.85rem;
  padding:6px 12px;
  border-radius:8px;
  transition:color .2s,background .2s;
}

nav a:hover {
  color:#fff;
  background:rgba(255,255,255,0.08);
}

.nav-toggle {
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}

.nav-toggle span {
  display:block;
  width:20px;
  height:2px;
  background:#fff;
  margin:4px 0;
  border-radius:2px;
  transition:all .25s;
}

.results-header {
  margin-bottom:20px;
}

.results-header h2 {
  font-family:'DM Serif Display',serif;
  font-size:1.5rem;
  margin-bottom:4px;
}

.results-header p {
  color:var(--ink3);
  font-size:.85rem;
}

/* ============================================================
   03. Footer
   ============================================================ */

footer {
  background:var(--ink);
  color:rgba(255,255,255,0.6);
  text-align:center;
  padding:28px 24px;
  font-size:.8rem;
  line-height:1.9;
  border-top:2.5px solid #2D6A4F;
}

footer a {
  color:rgba(255,255,255,0.55);
  text-decoration:none;
  margin:0 8px;
}

footer a:hover {
  color:#7EC8A4;
}

/* ============================================================
   04. Hero Section
   ============================================================ */

.hero {
  text-align:center;
  padding:40px 24px 28px;
  max-width:720px;
  margin:0 auto;
}

.hero h1 {
  font-family:'DM Serif Display',serif;
  font-size:clamp(2rem,5vw,3rem);
  line-height:1.1;
  letter-spacing:-0.03em;
  margin-bottom:12px;
}

.hero h1 em {
  font-style:italic;
  color:var(--accent);
}

.hero p {
  color:var(--ink2);
  font-size:1rem;
  line-height:1.6;
  max-width:480px;
  margin:0 auto;
}

/* ============================================================
   05. Layout & Containers
   ============================================================ */

.section {
  max-width:1080px;
  margin:0 auto;
  padding:0 24px 64px;
}

.section-label {
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:8px;
  text-align:center;
}

.section-title {
  font-family:'DM Serif Display',serif;
  font-size:1.75rem;
  color:var(--ink);
  text-align:center;
  margin-bottom:28px;
}

.container {
  max-width:720px;
  margin:0 auto;
  padding:0 20px 64px;
}

.article-wrap {
  max-width:720px;
  margin:0 auto;
  padding:40px 24px 32px;
}

.article-wrap h1 {
  font-family:'DM Serif Display',serif;
  font-size:clamp(1.9rem,4vw,2.6rem);
  line-height:1.15;
  letter-spacing:-.02em;
  margin-bottom:16px;
}

.article-wrap h1 em {
  font-style:italic;
  color:var(--accent);
}

.meta {
  color:var(--ink3);
  font-size:.85rem;
  margin:6px 0 20px;
}

.section-sub {
  color:var(--ink2);
  font-size:.9rem;
  margin-bottom:16px;
  line-height:1.6;
}

.page-wrap {
  max-width:820px;
  margin:0 auto;
  padding:0 20px 40px;
}

.featured-section {
  max-width:720px;
  margin:0 auto;
  padding:0 20px 20px;
}

.cta-block {
  max-width:720px;
  margin:32px auto 0;
  padding:0 0 48px;
}

/* ============================================================
   06. Cards
   ============================================================ */

.card {
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
}

.tool-card {
  display:flex;
  flex-direction:column;
  gap:4px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  text-decoration:none;
  transition:border-color .2s,box-shadow .2s;
}

.tool-card:hover {
  border-color:var(--accent);
  box-shadow:var(--shadow);
}

.tool-card h2 {
  font-size:.95rem;
  font-weight:600;
  color:var(--ink);
  margin-bottom:2px;
}

.tool-card p {
  font-size:.8rem;
  color:var(--ink3);
  line-height:1.5;
  flex:1;
}

.article-card {
  display:flex;
  flex-direction:column;
  gap:6px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  text-decoration:none;
  transition:border-color .2s;
}

.article-card:hover {
  border-color:var(--accent);
}

.article-card h3 {
  font-size:.9rem;
  font-weight:600;
  color:var(--ink);
  line-height:1.3;
}

.article-card p {
  font-size:.78rem;
  color:var(--ink3);
  line-height:1.5;
  flex:1;
}

.exercise-box {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
}

.principle-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
}

.contact-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px;
}

.card-top {
  padding:16px 16px 0;
}

.card-icon {
  font-size:1.4rem;
  margin-bottom:8px;
}

.card-tag {
  display:inline-block;
  background:var(--accent-light);
  color:var(--accent);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:3px 10px;
  border-radius:100px;
  margin-bottom:8px;
}

.card-arrow {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:8px 16px 14px;
  font-size:.8rem;
  font-weight:600;
  color:var(--accent);
}

/* ============================================================
   07. Buttons & CTAs
   ============================================================ */

.unit-toggle button {
  flex:1;
  border:none;
  background:transparent;
  padding:8px;
  border-radius:7px;
  font-family:'DM Sans',sans-serif;
  font-size:0.875rem;
  font-weight:500;
  color:var(--ink2);
  cursor:pointer;
  transition:all .2s;
}

.unit-toggle button.active {
  background:var(--surface);
  color:var(--ink);
  box-shadow:0 1px 4px rgba(0,0,0,0.1);
}

.sex-toggle button {
  flex:1;
  border:1.5px solid var(--border);
  background:var(--bg);
  border-radius:10px;
  padding:10px;
  font-family:'DM Sans',sans-serif;
  font-size:.9rem;
  font-weight:500;
  color:var(--ink2);
  cursor:pointer;
  transition:all .2s;
}

.sex-toggle button.active {
  border-color:var(--accent);
  background:var(--accent-light);
  color:var(--accent);
  font-weight:600;
}

.recalc-btn {
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:10px;
  padding:10px 18px;
  font-family:'DM Sans',sans-serif;
  font-size:.875rem;
  cursor:pointer;
  color:var(--ink2);
  transition:border-color .2s;
}

.recalc-btn:hover {
  border-color:var(--accent);
  color:var(--accent);
}

.quiz-result-tool {
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  text-decoration:none;
  transition:border-color .2s;
  margin-bottom:8px;
}

.quiz-result-tool:hover {
  border-color:var(--accent);
}

.quiz-result-tool-icon {
  font-size:1.4rem;
  flex-shrink:0;
}

.quiz-result-tool-text {
  flex:1;
}

.quiz-result-tool-name {
  display:block;
  font-weight:600;
  color:var(--ink);
  font-size:.9rem;
}

.quiz-result-tool-arrow {
  color:var(--accent);
  font-weight:600;
  font-size:1.1rem;
}

.cta-inner {
  background:var(--ink);
  border-radius:20px;
  padding:32px 28px;
  text-align:center;
}

.cta-label {
  font-size:.78rem;
  font-weight:600;
  color:#7EC8A4;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:10px;
}

.cta-inner h2 {
  font-family:'DM Serif Display',serif;
  font-size:1.5rem;
  color:#fff;
  margin-bottom:8px;
  line-height:1.2;
}

.cta-inner p {
  font-size:.875rem;
  color:rgba(255,255,255,.6);
  margin-bottom:20px;
}

.cta-btns {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}

.cta-buttons {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}

.cta-btn-p,.cta-btn-primary {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  border-radius:100px;
  padding:11px 20px;
  font-size:.875rem;
  font-weight:500;
  font-family:'DM Sans',sans-serif;
}

.cta-btn-s,.cta-btn-secondary {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.12);
  color:#fff;
  text-decoration:none;
  border-radius:100px;
  padding:10px 20px;
  font-size:.875rem;
  font-weight:500;
  border:1.5px solid rgba(255,255,255,.4);
  font-family:'DM Sans',sans-serif;
}

.cta-btn,.cta-btn-ghost {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.3);
  text-decoration:none;
  border-radius:100px;
  padding:11px 20px;
  font-size:.875rem;
  font-weight:500;
  font-family:'DM Sans',sans-serif;
}

.submit-btn {
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:12px 24px;
  font-family:'DM Sans',sans-serif;
  font-size:.95rem;
  font-weight:600;
  cursor:pointer;
  transition:opacity .2s;
}

.submit-btn:hover {
  opacity:.88;
}

.btn-group {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.btn-primary {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  border-radius:100px;
  padding:10px 18px;
  font-size:.875rem;
  font-weight:500;
  font-family:'DM Sans',sans-serif;
}

.btn-secondary {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--surface);
  color:var(--ink);
  border:1.5px solid var(--border);
  text-decoration:none;
  border-radius:100px;
  padding:10px 18px;
  font-size:.875rem;
  font-weight:500;
  font-family:'DM Sans',sans-serif;
}

.filter-btn {
  border:1.5px solid var(--border);
  background:var(--surface);
  border-radius:100px;
  padding:6px 14px;
  font-family:'DM Sans',sans-serif;
  font-size:.85rem;
  font-weight:500;
  color:var(--ink2);
  cursor:pointer;
  transition:all .2s;
}

.filter-btn:hover,.filter-btn.active {
  border-color:var(--accent);
  background:var(--accent-light);
  color:var(--accent);
  font-weight:600;
}

.cta-strip {
  background:var(--ink);
  border-radius:16px;
  padding:24px 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:32px;
}

.cta-strip h3 {
  font-family:'DM Serif Display',serif;
  font-size:1.2rem;
  color:#fff;
  margin-bottom:4px;
}

.cta-strip p {
  font-size:.85rem;
  color:rgba(255,255,255,.6);
}

/* ============================================================
   08. Forms & Inputs
   ============================================================ */

.unit-toggle {
  display:flex;
  background:var(--bg);
  border-radius:10px;
  padding:4px;
  margin-bottom:24px;
  gap:4px;
}

label {
  display:block;
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink2);
  margin-bottom:6px;
}

.input-group {
  margin-bottom:16px;
}

.input-row {
  display:flex;
  gap:8px;
}

.input-wrap {
  position:relative;
  flex:1;
}

.input-wrap input {
  width:100%;
  border:1.5px solid var(--border);
  border-radius:10px;
  padding:12px 44px 12px 14px;
  font-family:'DM Sans',sans-serif;
  font-size:1.1rem;
  font-weight:500;
  color:var(--ink);
  background:var(--bg);
  outline:none;
  transition:border-color .2s;
}

.input-wrap input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25);
}

.unit-badge {
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:0.75rem;
  font-weight:600;
  color:var(--ink3);
  pointer-events:none;
}

.result-label {
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.gender-toggle {
  display:flex;
  gap:8px;
}

.gender-btn {
  flex:1;
  border:1.5px solid var(--border);
  background:var(--bg);
  border-radius:10px;
  padding:10px;
  font-family:'DM Sans',sans-serif;
  font-size:.9rem;
  font-weight:500;
  color:var(--ink2);
  cursor:pointer;
  transition:all .2s;
}

.gender-btn.active {
  border-color:var(--accent);
  background:var(--accent-light);
  color:var(--accent);
  font-weight:600;
}

.label-hint {
  font-size:.75rem;
  font-weight:400;
  color:var(--ink3);
  text-transform:none;
  letter-spacing:0;
  margin-left:4px;
}

.ilabel {
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink3);
  margin-bottom:4px;
}

.scale-labels {
  display:flex;
  justify-content:space-between;
  font-size:.7rem;
  color:var(--ink3);
  font-weight:500;
}

.r-label {
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:rgba(255,255,255,.85);
  margin-bottom:4px;
}

.box-warn .r-label {
  color:var(--warn);
}

.t-label {
  font-size:.85rem;
  color:var(--ink2);
  flex:1;
}

.speed-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
}

.speed-btn {
  border:1.5px solid var(--border);
  background:var(--bg);
  border-radius:12px;
  padding:12px 10px;
  text-align:center;
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:all .2s;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.speed-btn.active {
  border-color:var(--accent);
  background:var(--accent-light);
}

.s-label {
  font-size:.75rem;
  font-weight:600;
  color:var(--ink2);
}

.speed-btn.active .s-rate {
  color:var(--accent);
}

.speed-btn.active .s-label {
  color:var(--accent);
}

select {
  width:100%;
  border:1.5px solid var(--border);
  border-radius:10px;
  padding:12px 36px 12px 14px;
  font-family:'DM Sans',sans-serif;
  font-size:.95rem;
  color:var(--ink);
  background:var(--bg);
  outline:none;
  appearance:none;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6560' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}

select:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25);
}

.ideal-label {
  font-size:.8rem;
  color:var(--ink3);
  margin-bottom:20px;
}

.info-box .label {
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink3);
  margin-bottom:4px;
}

.water-label {
  font-size:.8rem;
  color:var(--ink3);
  margin-bottom:16px;
}

.gauge-labels {
  display:flex;
  justify-content:space-between;
  font-size:.7rem;
  color:var(--ink3);
  font-weight:500;
}

.input-hint {
  font-size:.78rem;
  color:var(--ink3);
  margin-top:6px;
  line-height:1.5;
}

.input-hint a {
  color:var(--accent);
}

.sex-toggle {
  display:flex;
  gap:8px;
}

.pct-bar-labels {
  display:flex;
  justify-content:space-between;
  font-size:.7rem;
  color:var(--ink3);
  font-weight:500;
}

.goal-grid {
  display:flex;
  gap:8px;
  margin-bottom:0;
}

.goal-btn {
  flex:1;
  border:1.5px solid var(--border);
  background:var(--bg);
  border-radius:12px;
  padding:12px 8px;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;
  transition:all .2s;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.goal-btn.active {
  border-color:var(--accent);
  background:var(--accent-light);
}

.goal-label {
  font-size:.8rem;
  font-weight:600;
  color:var(--ink2);
}

.goal-btn.active .goal-label {
  color:var(--accent);
}

.result-calories-label {
  font-size:.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink3);
  margin-top:4px;
}

.m-label {
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink3);
  margin-bottom:4px;
}

.box-protein .m-label {
  color:var(--protein);
}

.box-carbs .m-label {
  color:var(--carbs);
}

.box-fat .m-label {
  color:var(--fat);
}

.gender-row {
  display:flex;
  gap:8px;
  margin-bottom:20px;
}

.gender-btn {
  flex:1;
  border:1.5px solid var(--border);
  background:var(--bg);
  border-radius:10px;
  padding:10px;
  font-family:'DM Sans',sans-serif;
  font-size:.9rem;
  font-weight:500;
  color:var(--ink2);
  cursor:pointer;
  transition:all .2s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.gender-btn.active {
  border-color:var(--accent);
  background:var(--accent-light);
  color:var(--accent);
  font-weight:600;
}

.field label {
  display:block;
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink2);
  margin-bottom:5px;
}

.optional-tag {
  font-size:.65rem;
  font-weight:400;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:4px;
  padding:1px 5px;
  color:var(--ink3);
  text-transform:none;
  letter-spacing:0;
  vertical-align:middle;
  margin-left:3px;
}

.height-row {
  display:flex;
  gap:8px;
}

.sum-label {
  display:block;
  font-size:.65rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:rgba(255,255,255,.85);
  margin-top:4px;
}

.rc-label {
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink3);
  margin-bottom:4px;
}

.quiz-opt {
  border:1.5px solid var(--border);
  background:var(--surface);
  border-radius:10px;
  padding:10px 16px;
  font-family:'DM Sans',sans-serif;
  font-size:.9rem;
  font-weight:500;
  color:var(--ink);
  cursor:pointer;
  transition:all .2s;
}

.quiz-opt:hover {
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-light);
}

.quiz-opt.active {
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-light);
  font-weight:600;
}

.quiz-opt-wide {
  width:100%;
  text-align:left;
  display:block;
  margin-bottom:6px;
}

.calc-tabs {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  margin-bottom:16px;
}

.calc-tab {
  border:1.5px solid var(--border);
  background:var(--surface);
  border-radius:100px;
  padding:6px 14px;
  font-family:'DM Sans',sans-serif;
  font-size:.85rem;
  font-weight:500;
  color:var(--ink2);
  cursor:pointer;
  transition:all .2s;
}

.calc-tab:hover {
  border-color:var(--accent);
  color:var(--accent);
}

.calc-tab.active {
  border-color:var(--accent);
  background:var(--accent-light);
  color:var(--accent);
  font-weight:600;
}

.chip-label {
  font-size:.8rem;
  color:var(--ink2);
}

.answer-label {
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink3);
  margin-bottom:6px;
}

.verdict-label {
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink3);
  margin-bottom:8px;
}

.breakdown-labels {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:.8rem;
  color:var(--ink2);
}

.macro-labels {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font-size:.82rem;
  color:var(--ink2);
}

.glabel {
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink3);
  margin-bottom:4px;
}

.goal-box.loss .glabel {
  color:#2D6A4F;
}

.goal-box.gain .glabel {
  color:#C17B2A;
}

.country-selector-wrap {
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px 24px;
  margin-bottom:16px;
}

.country-selector-label {
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink2);
  margin-bottom:10px;
  display:block;
}

.country-grid {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.country-btn {
  border:1.5px solid var(--border);
  background:var(--bg);
  border-radius:10px;
  padding:8px 14px;
  font-family:'DM Sans',sans-serif;
  font-size:.85rem;
  font-weight:500;
  color:var(--ink2);
  cursor:pointer;
  transition:all .2s;
  display:flex;
  align-items:center;
  gap:6px;
}

.country-btn:hover,.country-btn.active {
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-light);
  font-weight:600;
}

.day-label {
  font-size:.8rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--accent);
  min-width:60px;
  padding-top:2px;
}

/* ============================================================
   09. Results Display
   ============================================================ */

.result-box {
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  margin-top:20px;
}

.result-number {
  font-family:'DM Serif Display',serif;
  font-size:clamp(2.5rem,8vw,4rem);
  font-weight:400;
  line-height:1;
}

.result-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:100px;
  font-size:0.8rem;
  font-weight:600;
}

.result-card {
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  margin-top:16px;
  display:none;
}

.result-card.visible {
  display:block;
}

.result-hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:16px;
}

.result-box {
  border-radius:14px;
  padding:18px;
  text-align:center;
}

.result-summary {
  text-align:center;
  margin-bottom:20px;
}

.result-calories {
  font-family:'DM Serif Display',serif;
  font-size:clamp(2.5rem,8vw,3.5rem);
  color:var(--ink);
  line-height:1;
}

.results-section {
  display:none;
}

.results-section.visible {
  display:block;
}

.sum-item {
  flex:1;
  min-width:80px;
  text-align:center;
  padding:8px;
}

.sum-val {
  display:block;
  font-family:'DM Serif Display',serif;
  font-size:1.3rem;
  color:#fff;
  line-height:1;
}

.results-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:20px;
}

.result-card {
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
  border-top:3px solid var(--card-color,var(--accent));
}

.rc-icon {
  font-size:1.3rem;
  display:block;
  margin-bottom:8px;
}

.rc-value {
  font-family:'DM Serif Display',serif;
  font-size:1.6rem;
  color:var(--ink);
  line-height:1.1;
  margin-bottom:2px;
}

.rc-unit {
  font-size:.72rem;
  color:var(--ink3);
  margin-bottom:10px;
}

.rc-badge {
  display:inline-block;
  background:var(--card-bg,var(--accent-light));
  color:var(--card-color,var(--accent));
  font-size:.72rem;
  font-weight:600;
  padding:3px 10px;
  border-radius:100px;
  margin-bottom:10px;
}

.rc-bar {
  height:6px;
  background:var(--border);
  border-radius:100px;
  overflow:hidden;
  margin-bottom:8px;
}

.rc-bar-fill {
  height:100%;
  background:var(--card-color,var(--accent));
  border-radius:100px;
  width:0;
  transition:width .6s ease;
}

.rc-tip {
  font-size:.78rem;
  color:var(--ink3);
  line-height:1.6;
}

.answer-box {
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  margin-bottom:16px;
}

.answer-value {
  font-family:'DM Serif Display',serif;
  font-size:clamp(2rem,6vw,3rem);
  color:var(--ink);
  line-height:1;
  margin-bottom:4px;
}

.answer-sub {
  font-size:.85rem;
  color:var(--ink3);
}

.verdict-box {
  background:var(--surface);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:20px;
  margin:16px 0;
}

/* ============================================================
   10. Charts, Bars & Macros
   ============================================================ */

.bmi-bar-wrap {
  margin:20px 0 8px;
}

.bmi-bar-track {
  height:10px;
  border-radius:100px;
  background:linear-gradient(to right,#3A7BBF 0%,#3A7BBF 18.5%,#2D6A4F 18.5%,#2D6A4F 25%,#C17B2A 25%,#C17B2A 30%,#B83232 30%);
  position:relative;
}

.bmi-bar-needle {
  position:absolute;
  top:-5px;
  width:4px;
  height:20px;
  background:var(--ink);
  border-radius:2px;
  transform:translateX(-50%);
  transition:left .6s cubic-bezier(.4,0,.2,1);
}

.scale-wrap {
  margin:4px 0 20px;
}

.scale-bar {
  height:12px;
  border-radius:100px;
  background:linear-gradient(to right,#3A7BBF 0%,#3A7BBF 12%,#2D6A4F 12%,#2D6A4F 40%,#C17B2A 40%,#C17B2A 68%,#B83232 68% );
  position:relative;
  margin-bottom:6px;
}

.scale-pointer {
  position:absolute;
  top:-5px;
  width:4px;
  height:22px;
  background:var(--ink);
  border-radius:2px;
  transform:translateX(-50%);
  transition:left .6s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}

.gauge-wrap {
  margin:4px 0 20px;
}

.gauge-bar {
  height:12px;
  border-radius:100px;
  background:linear-gradient(to right,#3A7BBF 0%,#3A7BBF 22%,#2D6A4F 22%,#2D6A4F 67%,#C17B2A 67%,#C17B2A 87%,#B83232 87%);
  position:relative;
  margin-bottom:6px;
}

.gauge-pointer {
  position:absolute;
  top:-5px;
  width:4px;
  height:22px;
  background:var(--ink);
  border-radius:2px;
  transform:translateX(-50%);
  transition:left .6s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}

.pct-bar-wrap {
  margin:12px 0 20px;
}

.pct-bar-track {
  height:12px;
  border-radius:100px;
  background:linear-gradient(to right,#3A7BBF 0%,#3A7BBF 5%,#2D6A4F 5%,#2D6A4F 85%,#C17B2A 85%,#C17B2A 95%,#B83232 95%);
  position:relative;
  margin-bottom:6px;
}

.pct-bar-pointer {
  position:absolute;
  top:-5px;
  width:4px;
  height:22px;
  background:var(--ink);
  border-radius:2px;
  transform:translateX(-50%);
  transition:left .6s cubic-bezier(.4,0,.2,1);
}

.macro-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  margin-bottom:20px;
}

.macro-box {
  border-radius:12px;
  padding:14px;
  text-align:center;
  border:1.5px solid var(--border);
  background:var(--bg);
}

.box-protein {
  border-color:#C7DCEE;
  background:#EBF3FA;
}

.box-carbs {
  border-color:#F5D9A8;
  background:#FDF3E4;
}

.box-fat {
  border-color:#D9D0F7;
  background:#F3F0FD;
}

.m-grams {
  font-family:'DM Serif Display',serif;
  font-size:1.8rem;
  color:var(--ink);
  line-height:1;
}

.m-unit {
  font-size:.72rem;
  color:var(--ink3);
  margin-top:2px;
}

.m-pct {
  font-size:.75rem;
  color:var(--ink3);
  margin-top:4px;
}

.macro-bars {
  margin-bottom:20px;
}

.macro-bar-item {
  margin-bottom:12px;
}

.macro-bar-head {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:4px;
  font-size:.85rem;
}

.macro-name {
  font-weight:600;
}

.macro-grams {
  font-weight:600;
  color:var(--ink);
}

.macro-kcal {
  font-size:.75rem;
  color:var(--ink3);
}

.macro-track {
  height:10px;
  border-radius:100px;
  background:var(--border);
  overflow:hidden;
}

.macro-fill {
  height:100%;
  border-radius:100px;
  transition:width .5s ease;
}

.pie-wrap {
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.pie-legend {
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:.85rem;
}

.preset-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:20px;
}

.preset-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
}

.preset-name {
  font-size:.85rem;
  font-weight:600;
  color:var(--ink);
  margin-bottom:4px;
}

.preset-ratios {
  font-size:.75rem;
  color:var(--ink3);
  margin-bottom:8px;
}

.preset-bar {
  display:flex;
  height:8px;
  border-radius:100px;
  overflow:hidden;
  gap:1px;
}

.preset-bar div {
  height:100%;
  border-radius:0;
}

.tdee-bmr-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:20px;
}

.tdee-box {
  background:var(--ink);
  border-radius:14px;
  padding:20px;
  text-align:center;
}

.tdee-box .num {
  font-family:'DM Serif Display',serif;
  font-size:clamp(2.2rem,7vw,3rem);
  color:#fff;
  line-height:1;
}

.tdee-box .lbl {
  font-size:.75rem;
  font-weight:600;
  color:rgba(255,255,255,.85);
  text-transform:uppercase;
  letter-spacing:.07em;
  margin-top:6px;
}

.bmr-box {
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:14px;
  padding:20px;
  text-align:center;
}

.bmr-box .num {
  font-family:'DM Serif Display',serif;
  font-size:clamp(2.2rem,7vw,3rem);
  color:var(--ink);
  line-height:1;
}

.bmr-box .lbl {
  font-size:.75rem;
  font-weight:600;
  color:var(--ink3);
  text-transform:uppercase;
  letter-spacing:.07em;
  margin-top:6px;
}

.breakdown-section {
  margin-bottom:20px;
}

.breakdown-title {
  font-size:.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink3);
  margin-bottom:10px;
}

.breakdown-bar {
  display:flex;
  height:20px;
  border-radius:100px;
  overflow:hidden;
  margin-bottom:8px;
}

.macro-section {
  margin-bottom:16px;
}

.macro-title {
  font-size:.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink3);
  margin-bottom:10px;
}

.macro-dot {
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  margin-right:4px;
  vertical-align:middle;
}

.macro-bar {
  display:flex;
  height:20px;
  border-radius:100px;
  overflow:hidden;
  margin-bottom:8px;
}

/* ============================================================
   11. Calculator UI Components
   ============================================================ */

.bf-number {
  font-family:'DM Serif Display',serif;
  font-size:clamp(3rem,10vw,4.5rem);
  line-height:1;
  color:var(--ink);
  margin-bottom:4px;
}

.bf-category {
  display:inline-block;
  padding:5px 14px;
  border-radius:100px;
  font-size:.8rem;
  font-weight:600;
  margin-bottom:20px;
}

.cat-low {
  background:#DCE9F8;
  color:#3A7BBF;
}

.cat-normal {
  background:var(--accent-light);
  color:var(--accent);
}

.cat-high {
  background:var(--warn-light);
  color:var(--warn);
}

.cat-veryhigh {
  background:var(--danger-light,#FADFDF);
  color:var(--danger,#B83232);
}

.info-box {
  background:var(--bg);
  border-radius:10px;
  padding:12px 14px;
}

.tip-box {
  background:var(--accent-light);
  border-left:4px solid var(--accent);
  border-radius:0 10px 10px 0;
  padding:12px 16px;
  font-size:.875rem;
  color:var(--ink);
  line-height:1.7;
  margin-top:4px;
}

.info-box {
  background:var(--bg);
  border-radius:10px;
  padding:12px 14px;
}

.timeline {
  background:var(--bg);
  border-radius:12px;
  padding:16px;
  margin-bottom:16px;
}

.timeline-title {
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink3);
  margin-bottom:12px;
}

.timeline-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
  border-bottom:1px solid var(--border);
}

.timeline-row:last-child {
  border-bottom:none;
}

.t-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  flex-shrink:0;
}

.t-dot-green {
  background:var(--accent);
}

.t-dot-warn {
  background:var(--warn);
}

.t-value {
  font-size:.85rem;
  font-weight:600;
  color:var(--ink);
}

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

.health-tip {
  background:var(--accent-light);
  border-left:4px solid var(--accent);
  border-radius:0 10px 10px 0;
  padding:12px 16px;
  font-size:.875rem;
  color:var(--ink);
  line-height:1.7;
}

.save-track-panel {
  margin-top:16px;
  border-top:1px solid var(--border);
  padding-top:16px;
}

.save-track-toggle {
  width:100%;
  background:var(--accent-light);
  color:var(--accent);
  border:1px dashed var(--accent);
  border-radius:12px;
  padding:12px;
  font-family:inherit;
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  transition:opacity .2s;
}

.save-track-toggle:hover {
  opacity:.85;
}

.save-track-label {
  font-size:.85rem;
  color:var(--ink);
  margin-bottom:10px;
}

.save-track-input {
  width:100%;
  padding:11px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  font-size:.9rem;
  font-family:inherit;
  margin-bottom:12px;
  box-sizing:border-box;
}

.save-track-checkbox {
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:.8rem;
  color:var(--ink);
  margin-bottom:10px;
  line-height:1.4;
  cursor:pointer;
}

.save-track-checkbox input {
  margin-top:3px;
  flex-shrink:0;
}

.save-track-status {
  margin-top:10px;
  font-size:.82rem;
  text-align:center;
  min-height:1.2em;
}

.save-track-status.success {
  color:#2e7d32;
}

.save-track-status.error {
  color:#c62828;
}

.s-rate {
  font-size:.9rem;
  font-weight:700;
  color:var(--ink);
}

.s-deficit {
  font-size:.7rem;
  color:var(--ink3);
}

.ideal-range {
  font-family:'DM Serif Display',serif;
  font-size:clamp(2rem,8vw,3.2rem);
  color:var(--ink);
  line-height:1;
  margin-bottom:4px;
}

.formula-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:16px;
}

.formula-box {
  background:var(--bg);
  border-radius:10px;
  padding:12px 14px;
}

.bmi-link-box {
  background:var(--accent-light);
  border-left:4px solid var(--accent);
  border-radius:0 10px 10px 0;
  padding:12px 16px;
  font-size:.875rem;
  color:var(--ink);
  line-height:1.7;
}

.bmi-link-box a {
  color:var(--accent);
}

.info-box .value {
  font-size:1rem;
  font-weight:600;
  color:var(--ink);
}

.water-main {
  font-family:'DM Serif Display',serif;
  font-size:clamp(3rem,10vw,4.5rem);
  line-height:1;
  color:var(--ink);
  margin-bottom:4px;
}

.cups-row {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-bottom:16px;
  font-size:1.2rem;
}

.whtr-number {
  font-family:'DM Serif Display',serif;
  font-size:clamp(3rem,10vw,4.5rem);
  line-height:1;
  color:var(--ink);
  margin-bottom:4px;
}

.measure-card {
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  margin-top:20px;
}

.measure-steps {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:16px;
}

.measure-step {
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.notice-banner {
  background:#EAF4EE;
  border-bottom:1px solid #C8E6D4;
  padding:12px 24px;
}

.notice-inner {
  max-width:720px;
  margin:0 auto;
  font-size:.875rem;
  color:var(--ink);
  line-height:1.6;
}

.pct-number {
  font-family:'DM Serif Display',serif;
  font-size:clamp(3rem,10vw,4rem);
  line-height:1;
  color:var(--ink);
}

.pct-sup {
  font-size:1.5rem;
  vertical-align:super;
}

.bmi-raw {
  font-size:.9rem;
  color:var(--ink3);
  margin-bottom:4px;
}

.goal-mini {
  display:flex;
  gap:8px;
  margin-bottom:10px;
}

.goal-mini-box {
  flex:1;
  background:var(--bg);
  border-radius:8px;
  padding:8px;
  text-align:center;
}

.cups-mini {
  font-size:.9rem;
  letter-spacing:2px;
  margin:6px 0;
}

.bmi-table {
  width:100%;
  border-collapse:collapse;
  margin:16px 0;
  font-size:.875rem;
}

.bmi-table th {
  background:var(--accent);
  color:#fff;
  padding:10px 14px;
  text-align:left;
  font-weight:600;
}

.bmi-table td {
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  color:var(--ink2);
}

.bmi-table tr:nth-child(even) td {
  background:var(--bg);
}

.formula-table {
  width:100%;
  border-collapse:collapse;
  font-size:.875rem;
  margin:12px 0;
}

.formula-table th {
  background:var(--bg);
  padding:8px 12px;
  font-weight:600;
  color:var(--ink);
  text-align:left;
  border-bottom:2px solid var(--border);
}

.formula-table td {
  padding:8px 12px;
  border-bottom:1px solid var(--border);
  color:var(--ink2);
}

.urine-chart {
  display:flex;
  gap:6px;
  margin:12px 0;
  flex-wrap:wrap;
}

.urine-box {
  border-radius:8px;
  padding:8px 12px;
  font-size:.8rem;
  font-weight:600;
  text-align:center;
  flex:1;
  min-width:60px;
}

/* ============================================================
   12. Tables
   ============================================================ */

table {
  width:100%;
  border-collapse:collapse;
  margin:16px 0;
  font-size:.875rem;
}

tr:nth-child(even) td {
  background:var(--bg);
}

.table-section {
  margin-top:28px;
}

.highlight-row td {
  background:var(--accent-light) !important;
  font-weight:600;
}

/* ============================================================
   13. Articles, Guides & FAQ
   ============================================================ */

.breadcrumb {
  font-size:.8rem;
  color:var(--ink3);
  margin-bottom:28px;
}

.breadcrumb a {
  color:var(--ink3);
  text-decoration:none;
}

.breadcrumb a:hover {
  color:var(--accent);
}

.article-tag {
  display:inline-block;
  background:#2D6A4F;
  color:#ffffff;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:4px 12px;
  border-radius:100px;
  margin-bottom:16px;
}

.article-meta {
  font-size:.82rem;
  color:var(--ink3);
  margin-bottom:32px;
  padding-bottom:24px;
  border-bottom:1px solid var(--border);
}

.article-section {
  margin-bottom:32px;
}

.article-section h2 {
  font-family:'DM Serif Display',serif;
  font-size:1.4rem;
  margin-bottom:12px;
}

.article-section h3 {
  font-size:1rem;
  font-weight:600;
  margin:20px 0 8px;
}

.article-section p {
  color:var(--ink2);
  line-height:1.8;
  font-size:.95rem;
  margin-bottom:14px;
}

.article-section ul,.article-section ol {
  color:var(--ink2);
  font-size:.95rem;
  line-height:1.8;
  margin:8px 0 14px 20px;
}

.article-section li {
  margin-bottom:6px;
}

.highlight-box {
  background:var(--accent-light);
  border-left:4px solid var(--accent);
  border-radius:0 12px 12px 0;
  padding:16px 20px;
  margin:20px 0;
  font-size:.9rem;
  color:var(--ink);
  line-height:1.7;
}

.warn-callout {
  background:var(--warn-light);
  border-radius:10px;
  padding:14px 16px;
  margin:16px 0;
  font-size:.9rem;
  color:var(--ink);
}

.related {
  margin-top:40px;
  padding-top:28px;
  border-top:1px solid var(--border);
}

.related h3 {
  font-family:'DM Serif Display',serif;
  font-size:1.1rem;
  margin-bottom:14px;
}

.related-links {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.related-links a {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 16px;
  text-decoration:none;
  color:var(--ink);
  font-size:.875rem;
}

.related-links a:hover {
  border-color:var(--accent);
  color:var(--accent);
}

.faq-section {
  margin-top:28px;
}

.article-section {
  margin-top:28px;
}

.article-section h2 {
  font-family:'DM Serif Display',serif;
  font-size:1.4rem;
  margin:24px 0 10px;
  color:var(--ink);
}

.article-section p {
  color:var(--ink2);
  font-size:.93rem;
  line-height:1.8;
  margin-bottom:12px;
}

.article-section ul {
  color:var(--ink2);
  font-size:.93rem;
  line-height:1.8;
  margin:8px 0 14px 20px;
}

.article-section li {
  margin-bottom:6px;
}

.callout {
  background:var(--accent-light);
  border-left:4px solid var(--accent);
  border-radius:0 10px 10px 0;
  padding:14px 18px;
  margin:16px 0;
  font-size:.9rem;
  color:var(--ink);
  line-height:1.7;
}

.sources {
  background:var(--bg);
  border-radius:10px;
  padding:16px 20px;
  font-size:.8rem;
  color:var(--ink3);
  line-height:1.9;
  margin-top:24px;
}

.sources a {
  color:var(--accent);
}

.faq-item {
  border-bottom:1px solid var(--border);
}

.faq-q {
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:16px 0;
  font-family:'DM Sans',sans-serif;
  font-size:.95rem;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.faq-q::after {
  content:'+';
  font-size:1.2rem;
  color:var(--ink3);
  flex-shrink:0;
}

.faq-q.open::after {
  content:'−';
}

.faq-a {
  display:none;
  padding:0 0 16px;
  font-size:.9rem;
  color:var(--ink2);
  line-height:1.8;
}

.faq-a.open {
  display:block;
}

.faq-a a {
  color:var(--accent);
}

.article-icon {
  font-size:1.3rem;
}

.toc {
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px 20px;
  margin:16px 0;
}

.toc-title {
  font-size:.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink3);
  margin-bottom:10px;
}

.toc a {
  display:block;
  color:var(--accent);
  text-decoration:none;
  font-size:.875rem;
  padding:3px 0;
}

.toc a:hover {
  text-decoration:underline;
}

.about-hero {
  text-align:center;
  padding:40px 24px 28px;
  max-width:640px;
  margin:0 auto;
}

.principle-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:16px 0;
}

.stats-row {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:16px 0;
}

.tools-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:16px 0;
}

.tool-item {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 16px;
  text-decoration:none;
  color:var(--ink);
  font-size:.875rem;
  transition:border-color .2s;
}

.tool-item:hover {
  border-color:var(--accent);
}

.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:16px 0;
}

.faq-block {
  margin-top:16px;
}

.guides-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  margin-bottom:32px;
}

.guide-card {
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  text-decoration:none;
  transition:border-color .2s,box-shadow .2s;
  overflow:hidden;
}

.guide-card:hover {
  border-color:var(--accent);
  box-shadow:var(--shadow);
}

.guide-card h2 {
  font-size:.9rem;
  font-weight:600;
  color:var(--ink);
  line-height:1.3;
  margin:0 0 6px;
  padding:0 16px;
}

.guide-card p {
  font-size:.78rem;
  color:var(--ink3);
  line-height:1.5;
  flex:1;
  margin:0;
  padding:0 16px 12px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ============================================================
   14. Animations & Keyframes
   ============================================================ */

@keyframes fadeUp {
  from {
    opacity:0;
    transform:translateY(12px);
  }

  to {
    opacity:1;
    transform:translateY(0);
  }
}

/* ============================================================
   15. Responsive / Media Queries
   ============================================================ */

@media (max-width:640px) {
  .nav-toggle {
    display:block;
  }

  nav {
    position:absolute;
    top:56px;
    right:0;
    left:0;
    background:var(--ink);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:8px 16px 16px;
    display:none;
    border-bottom:2px solid #2D6A4F;
    z-index:100;
  }

  nav.open {
    display:flex;
  }

  nav a {
    width:100%;
    padding:10px 8px;
    font-size:.9rem;
    border-radius:8px;
  }
}

@media (max-width:480px) {
  .info-grid {
    grid-template-columns:1fr;
  }
}

@media (max-width:480px) {
  .result-hero {
    grid-template-columns:1fr;
  }
}

@media (max-width:480px) {
  .info-grid {
    grid-template-columns:1fr;
  }
}

@media (max-width:480px) {
  .speed-grid {
    grid-template-columns:1fr;
  }
}

@media (max-width:480px) {
  .formula-grid {
    grid-template-columns:1fr;
  }
}

@media(max-width:480px) {
  .macro-grid {
    grid-template-columns:1fr;
  }
}

@media(max-width:480px) {
  .preset-grid {
    grid-template-columns:1fr;
  }
}

@media(max-width:540px) {
  .fields-grid {
    grid-template-columns:1fr;
  }
}

@media(max-width:540px) {
  .results-grid {
    grid-template-columns:1fr;
  }
}

@media (max-width:540px) {
  .calc-panel.active {
    grid-template-columns:1fr;
  }
}

@media (max-width:700px) {
  .articles-grid {
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:480px) {
  .articles-grid {
    grid-template-columns:1fr;
  }
}

@media(max-width:480px) {
  .tdee-bmr-row {
    grid-template-columns:1fr;
  }
}

@media(max-width:540px) {
  .exercise-grid {
    grid-template-columns:1fr;
  }
}

@media(max-width:480px) {
  .tip-grid {
    grid-template-columns:1fr;
  }
}

@media(max-width:480px) {
  .principle-grid {
    grid-template-columns:1fr;
  }
}

@media(max-width:480px) {
  .contact-grid {
    grid-template-columns:1fr;
  }
}

@media(max-width:700px) {
  .guides-grid {
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:480px) {
  .guides-grid {
    grid-template-columns:1fr;
  }
}

/* ============================================================
   16. Miscellaneous
   ============================================================ */

.calc-btn {
  width:100%;
  background:var(--ink);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:15px;
  font-family:'DM Serif Display',serif;
  font-size:1.1rem;
  cursor:pointer;
  transition:opacity .2s;
  margin-top:8px;
}

.calc-btn:hover {
  opacity:0.88;
}

th {
  background:var(--accent);
  color:#fff;
  padding:10px 14px;
  text-align:left;
  font-weight:600;
}

td {
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  color:var(--ink2);
}

.fade-up {
  animation:fadeUp 0.4s ease both;
}

.info-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:16px 0;
}

.ivalue {
  font-size:1rem;
  font-weight:600;
  color:var(--ink);
}

.box-green {
  background:var(--ink);
}

.box-warn {
  background:var(--warn-light);
  border:1.5px solid #F5D9A8;
}

.r-value {
  font-family:'DM Serif Display',serif;
  font-size:clamp(2rem,7vw,2.8rem);
  color:#fff;
  line-height:1;
}

.box-warn .r-value {
  color:var(--warn);
}

.r-unit {
  font-size:.75rem;
  color:rgba(255,255,255,.85);
  margin-top:4px;
}

.box-warn .r-unit {
  color:var(--ink3);
}

.info-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:16px;
}

.lbl {
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink3);
  margin-bottom:4px;
}

.val {
  font-size:1rem;
  font-weight:600;
  color:var(--ink);
}

.dot {
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  margin-right:6px;
  vertical-align:middle;
}

.fname {
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink3);
  margin-bottom:4px;
}

.fvalue {
  font-size:1.1rem;
  font-weight:600;
  color:var(--ink);
}

.step-num {
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:.85rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:1px;
}

.step-text {
  font-size:.9rem;
  color:var(--ink2);
  line-height:1.6;
}

.goal-icon {
  font-size:1.4rem;
}

.legend-item {
  display:flex;
  align-items:center;
  gap:8px;
}

.legend-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  flex-shrink:0;
}

.form-card {
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
}

.form-card h2 {
  font-family:'DM Serif Display',serif;
  font-size:1.4rem;
  margin-bottom:6px;
}

.subtitle {
  color:var(--ink3);
  font-size:.85rem;
  margin-bottom:20px;
}

.g-icon {
  font-size:1rem;
}

.fields-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:20px;
}

.calculate-btn {
  width:100%;
  background:var(--ink);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:15px;
  font-family:'DM Serif Display',serif;
  font-size:1.1rem;
  cursor:pointer;
  transition:opacity .2s;
}

.calculate-btn:hover {
  opacity:.88;
}

.summary-card {
  background:var(--ink);
  border-radius:14px;
  padding:16px 20px;
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin-bottom:20px;
}

.gml {
  font-size:.65rem;
  color:var(--ink3);
  margin-bottom:2px;
}

.gmv {
  font-size:.9rem;
  font-weight:600;
  color:var(--ink);
}

.featured-card {
  display:flex;
  align-items:flex-start;
  gap:20px;
  background:var(--ink);
  border-radius:20px;
  padding:24px 28px;
  text-decoration:none;
  transition:opacity .2s;
}

.featured-card:hover {
  opacity:.92;
}

.featured-left {
  flex:1;
}

.featured-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,.1);
  color:#7EC8A4;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:4px 12px;
  border-radius:100px;
  margin-bottom:10px;
}

.featured-card h2 {
  font-family:'DM Serif Display',serif;
  font-size:1.4rem;
  color:#fff;
  margin-bottom:6px;
  line-height:1.2;
}

.featured-card p {
  font-size:.875rem;
  color:rgba(255,255,255,.6);
  margin-bottom:14px;
  line-height:1.6;
}

.featured-pills {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:16px;
}

.pill {
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.8);
  font-size:.75rem;
  font-weight:500;
  padding:4px 10px;
  border-radius:100px;
}

.featured-cta {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--accent);
  color:#fff;
  font-size:.875rem;
  font-weight:600;
  padding:10px 18px;
  border-radius:100px;
}

.calc-panel {
  display:none;
}

.calc-panel.active {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.tool-icon {
  font-size:1.5rem;
  margin-bottom:4px;
}

.tool-link {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.8rem;
  font-weight:600;
  color:var(--accent);
  margin-top:6px;
}

.articles-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}

.returning-chip {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:100px;
  padding:8px 14px;
  text-decoration:none;
  transition:border-color .2s;
}

.returning-chip:hover {
  border-color:var(--accent);
}

.chip-value {
  font-size:.8rem;
  font-weight:600;
  color:var(--accent);
}

.divider {
  border:none;
  border-top:1px solid var(--border);
  margin:8px 0;
}

.warning-callout {
  background:var(--warn-light);
  border-left:4px solid var(--warn);
  border-radius:0 10px 10px 0;
  padding:14px 18px;
  margin:16px 0;
  font-size:.9rem;
  color:var(--ink);
  line-height:1.7;
}

.good {
  color:var(--accent);
  font-weight:600;
}

.goal-box {
  border-radius:12px;
  padding:14px;
  border:1.5px solid var(--border);
  background:var(--bg);
}

.goal-box.loss {
  border-color:#C8E6D4;
  background:#EAF4EE;
}

.goal-box.gain {
  border-color:#FBDCB0;
  background:#FDF3E4;
}

.gvalue {
  font-family:'DM Serif Display',serif;
  font-size:1.4rem;
  color:var(--ink);
  line-height:1.1;
}

.gsub {
  font-size:.75rem;
  color:var(--ink3);
  margin-top:2px;
}

.compare-section {
  margin-top:32px;
}

.exercise-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:16px 0;
}

.ex-icon {
  font-size:1.5rem;
  margin-bottom:8px;
}

.day-row {
  display:flex;
  gap:12px;
  margin-bottom:10px;
  align-items:flex-start;
}

.day-content {
  flex:1;
  font-size:.9rem;
  color:var(--ink2);
  line-height:1.6;
}

.workout-plan {
  background:var(--bg);
  border-radius:12px;
  padding:16px;
  margin:16px 0;
}

.tip-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:16px 0;
}

.tip-icon {
  font-size:1.3rem;
  margin-bottom:6px;
}

.step-box {
  background:var(--surface);
  border-left:4px solid var(--accent);
  border-radius:0 12px 12px 0;
  padding:16px 20px;
  margin:12px 0;
}

.mission-block {
  background:var(--accent-light);
  border-radius:var(--radius);
  padding:24px;
  margin:16px 0;
}

.picon {
  font-size:1.5rem;
  margin-bottom:8px;
}

.stat-box {
  flex:1;
  min-width:100px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  text-align:center;
}

.desc {
  font-size:.875rem;
  color:var(--ink2);
  line-height:1.7;
}

.t-icon {
  font-size:1.4rem;
  margin-bottom:6px;
}

.t-desc {
  font-size:.82rem;
  color:var(--ink3);
  line-height:1.5;
  margin-top:4px;
}

.success-msg {
  background:var(--accent-light);
  border-radius:10px;
  padding:14px 16px;
  color:var(--accent);
  font-size:.9rem;
  margin-top:12px;
  display:none;
}

.trust-chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0;
}

.trust-chip {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:100px;
  padding:5px 12px;
  font-size:.8rem;
  color:var(--ink2);
}

.date {
  font-size:.8rem;
  color:var(--ink3);
}

.error-code {
  font-family:'DM Serif Display',serif;
  font-size:6rem;
  color:var(--accent);
  line-height:1;
}

.filters {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-bottom:20px;
}

/* ============================================================
   16b. Link accessibility — underline for inline content links
   Fixes: "Links rely on color to be distinguishable" (WCAG 1.4.1)
   ============================================================ */

/* Article body links — add underline so they're distinguishable without color */
.article-body a,
.guide-content a,
p > a,
li > a {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 2px;
}

p > a:hover,
li > a:hover {
  text-decoration-color: currentColor;
}

/* Nav, footer, card links — keep no underline (these are clearly interactive by context) */
nav a,
footer a,
.card a,
.article-row,
.nf-tool,
.related-link,
.cta-btn-p,
.cta-btn-s {
  text-decoration: none;
}

/* ============================================================
   17. Utility Classes (generated from inline style cleanup)
   ============================================================ */

.calc-byline {
  font-size:.8rem;color:var(--ink3);
  margin:0 auto 24px;max-width:720px;
  padding:0 20px 16px;
  border-bottom:1px solid var(--border);
}

.breadcrumb-link {
  color:var(--ink3);
  text-decoration:none;
}
.breadcrumb-link:hover { color:var(--accent); }

.full-input {
  width:100%;max-width:620px;
  display:block;
  font-family:'DM Sans',sans-serif;
}

.table-scroll {
  padding:20px;
  margin:20px 0;
  overflow-x:auto;
}

.cta-h2 {
  font-family:'DM Serif Display',serif;
  font-size:1.5rem;
  color:#fff;
  margin-bottom:8px;
  line-height:1.2;
}

.cta-sub {
  font-size:.875rem;
  color:rgba(255,255,255,.6);
  margin-bottom:20px;
  max-width:400px;
  margin-left:auto;
  margin-right:auto;
}

.related-link {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 16px;
  text-decoration:none;
  color:var(--ink);
  font-size:.875rem;
  font-family:'DM Sans',sans-serif;
  transition:border-color .2s;
}
.related-link:hover { border-color:var(--accent); color:var(--accent); }

.overflow-clip {
  padding:0;
  overflow:hidden;
}

.cta-btn-lg {
  padding:12px 22px;
  font-size:.9rem;
}

.text-accent { color:var(--accent); }
.text-accent-bold { color:var(--accent); font-weight:500; }
.text-muted { color:var(--ink2); }

.field-sub {
  font-size:.75rem;
  color:var(--ink3);
  margin-top:2px;
}

.field-label {
  display:block;
  font-size:.875rem;
  font-weight:500;
  margin-bottom:8px;
  color:var(--ink2);
}

.flex-col-sm {
  display:flex;
  flex-direction:column;
  gap:6px;
}

.highlight-green {
  background:#EAF4EE;
  border:1px solid #B7DDD0;
  border-radius:12px;
  padding:20px 24px;
  font-size:.82rem;
  color:#2D4A3E;
  line-height:1.8;
}

.text-protein { color:var(--protein); }
.text-fat     { color:var(--fat); }
.text-carbs   { color:var(--carbs); }