/*
 * 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:#A09A94;
  --accent:#2D6A4F;
  --accent-light:#D8EFE4;
  --warn:#C17B2A;
  --warn-light:#FBF0DC;
  --danger:#B83232;
  --danger-light:#FADFDF;
  --underweight:#3A7BBF;
  --underweight-light:#DCE9F8;
  --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;
}

: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.4);
  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:640px;
  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;
}

.section-title {
  font-family:'DM Serif Display',serif;
  font-size:1.75rem;
  color:var(--ink);
  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);
}

.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 h3 {
  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,.1);
  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,.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:space-between;
  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);
}

.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,.55);
  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);
}

.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,.45);
  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;
  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,.55);
  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;
}

/* ============================================================
   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);
}

.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;
}

.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:var(--accent-light);
  color:var(--accent);
  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 h3 {
  font-size:.9rem;
  font-weight:600;
  color:var(--ink);
  line-height:1.3;
  margin-bottom:6px;
}

.guide-card p {
  font-size:.78rem;
  color:var(--ink3);
  line-height:1.5;
  flex:1;
  padding:0 16px 12px;
}

/* ============================================================
   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,.5);
  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;
  gap:8px;
  margin-bottom:20px;
}