/*
 * MindSnap — Design System
 * Single source of truth for all design tokens, base styles, and utility classes.
 * Change here → changes everywhere.
 */

/* ── Design Tokens (CSS Custom Properties) ───────────────────────────────────── */
:root {
  --primary-dark: #1a1a2e;
  --primary-mid:  #0f3460;
  --primary-cta:  #e94560;   /* decorative only — borders, icon accents, hero bg */
  --cta-text:     #c23152;   /* accessible CTA for text/buttons on light bg — 5.1:1 */
  --teal-text:    #0b7285;   /* accessible teal for text on white — 4.6:1 */
  --green-text:   #1a7a32;   /* accessible green for text on white — 4.6:1 */
  --purple-text:  #5048d6;   /* accessible purple for text on white — 5.5:1 */
  --bg:           #f8f9fa;
  --card:         #ffffff;
  --text:         #555555;
  --text-muted:   #666666;
  --border:       #e0e0e0;
  --sleep:          #6c63ff;
  --fitness:        #28a745;
  --nutrition:      #fd7e14;
  --quiz:           #e94560;
  --kids:           #17a2b8;
  --life:           #6f42c1;
  --games:          #ffc107;
  --mental-health:  #e94560;
  --productivity:   #0b7285;
  --study:          #0277bd;
  --pets:           #5a9e4f;
}

/* ── Base Reset & Typography ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 700; color: var(--primary-dark); line-height: 1.3; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem);   font-weight: 700; color: var(--primary-mid);  line-height: 1.3; }
h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 600; color: #16213e; }
a  { color: var(--cta-text); text-decoration: none; }
a:hover { text-decoration: underline; }
p a, li a, .accordion-body a { text-decoration: underline; }

/* ── Buttons ──────────────────────────────────────────────────────────────────── */
.btn-cta {
  background: var(--cta-text);
  color: #fff;
  border-radius: 8px;
  padding: 12px 28px;
  font-weight: 600;
  min-height: 48px;
  border: none;
  transition: background .2s, transform .1s;
}
.btn-cta:hover  { background: #c73652; color: #fff; transform: translateY(-1px); }
.btn-cta:active { transform: translateY(0); }

/* ── Cards ────────────────────────────────────────────────────────────────────── */
.tool-card {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  transition: transform .2s, box-shadow .2s;
  background: var(--card);
}
.tool-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,.12); }

/* ── Result box ───────────────────────────────────────────────────────────────── */
.result-box {
  background: #f0f2f5;
  border-radius: 8px;
  padding: 20px 24px;
  animation: fadeIn .3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Badges ───────────────────────────────────────────────────────────────────── */
.badge-searches {
  background: rgba(233,69,96,.1);
  color: var(--primary-cta);
  border-radius: 50px;
  padding: 3px 10px;
  font-size: .75rem;
  font-weight: 600;
}

/* ── Form controls ────────────────────────────────────────────────────────────── */
.form-control, .form-select {
  min-height: 48px;
  border-radius: 8px;
  border-color: var(--border);
  font-size: 16px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary-cta);
  box-shadow: 0 0 0 3px rgba(233,69,96,.15);
}

/* ── Base section padding ─────────────────────────────────────────────────────── */
section { padding: 80px 0; }
@media (max-width: 768px) {
  section  { padding: 40px 0; }
  .card    { padding: 16px; }
  .btn-cta { width: 100%; min-height: 52px; }
}

/* ── Border utilities ─────────────────────────────────────────────────────────── */
.border-sleep     { border-color: var(--sleep)     !important; }
.border-fitness   { border-color: var(--fitness)   !important; }
.border-nutrition { border-color: var(--nutrition) !important; }
.border-quiz      { border-color: var(--quiz)      !important; }
.border-kids      { border-color: var(--kids)      !important; }
.border-life      { border-color: var(--life)      !important; }
.border-games     { border-color: var(--games)     !important; }
.bg-dark-brand    { background: var(--primary-dark); }
.bg-mid-brand     { background: var(--primary-mid); }

/* ── Sections ────────────────────────────────────────────────────────────────── */
.ms-hero {
  background: linear-gradient(135deg, var(--primary-dark) 0%, #16213e 100%);
  padding: 60px 0 0;
}
.ms-section-white {
  background: #fff;
  padding: 72px 0;
}
.ms-section-muted {
  background: var(--bg);
  padding: 72px 0;
}
.ms-section-accent {
  background: #f8f9ff;
  padding: 60px 0;
}
.ms-section-seo {
  background: #fff;
  padding: 72px 0;
  border-top: 1px solid #f0f0f0;
}
@media (max-width: 768px) {
  .ms-hero { padding: 40px 0 0; }
  .ms-section-white,
  .ms-section-muted,
  .ms-section-accent,
  .ms-section-seo { padding: 40px 0; }
}

/* ── Hero typography ─────────────────────────────────────────────────────────── */
.ms-hero-title {
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
}
.ms-hero-desc {
  color: rgba(255, 255, 255, .7);
  font-size: 1.05rem;
  max-width: 520px;
  margin-bottom: 28px;
}

/* ── Breadcrumb (hero dark background) ──────────────────────────────────────── */
.ms-breadcrumb {
  font-size: .82rem;
  margin: 0;
  padding: 0;
  background: none;
}
.ms-breadcrumb .breadcrumb-item a {
  color: rgba(255, 255, 255, .5);
  text-decoration: none;
}
.ms-breadcrumb .breadcrumb-item a:hover {
  color: rgba(255, 255, 255, .8);
}
.ms-breadcrumb .breadcrumb-item.active {
  color: rgba(255, 255, 255, .8);
}
.ms-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, .3);
}

/* ── Tool card (hero card that overlaps next section) ───────────────────────── */
.ms-tool-card {
  border-radius: 18px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25) !important;
  position: relative;
  z-index: 2;
}

/* ── Quick facts column (hero right side) ───────────────────────────────────── */
.ms-facts-wrap {
  color: rgba(255, 255, 255, .85);
}
.ms-facts-title {
  color: #fff;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
  margin-bottom: 16px;
}
.ms-fact-pill {
  border-radius: 8px;
  padding: 6px 10px;
  font-weight: 700;
  font-size: .82rem;
  min-width: 70px;
  text-align: center;
  flex-shrink: 0;
  color: #fff;
}
.ms-fact-pill-sleep     { background: var(--sleep); }
.ms-fact-pill-fitness   { background: var(--fitness); }
.ms-fact-pill-nutrition { background: var(--nutrition); }
.ms-fact-pill-life      { background: var(--life); }
.ms-fact-pill-quiz      { background: var(--quiz); }
.ms-fact-pill-kids      { background: var(--kids); }
.ms-fact-pill-dark      { background: var(--primary-mid); }
.ms-fact-label {
  font-size: .86rem;
  line-height: 1.5;
  padding-top: 4px;
}
.ms-fact-source {
  font-size: .75rem;
  color: rgba(255, 255, 255, .35);
  margin-top: 20px;
}

/* ── Section badge ("How It Works", "Science", etc.) ────────────────────────── */
.ms-badge {
  display: inline-block;
  font-size: .8rem;
  padding: 6px 14px;
  border-radius: 50px;
  font-weight: 600;
}
.ms-badge-sleep          { background: rgba(108,99,255,.1);  color: var(--sleep); }
.ms-badge-fitness        { background: rgba(40,167,69,.1);   color: var(--fitness); }
.ms-badge-nutrition      { background: rgba(253,126,20,.1);  color: var(--nutrition); }
.ms-badge-life           { background: rgba(111,66,193,.1);  color: var(--life); }
.ms-badge-quiz           { background: rgba(233,69,96,.1);   color: var(--cta-text); }
.ms-badge-kids           { background: rgba(23,162,184,.1);  color: var(--teal-text); }
.ms-badge-games          { background: rgba(255,193,7,.15);  color: #856404; }
.ms-badge-mental-health  { background: rgba(233,69,96,.1);   color: var(--cta-text); }
.ms-badge-productivity   { background: rgba(11,114,133,.1);  color: var(--productivity); }
.ms-badge-study          { background: rgba(2,119,189,.1);   color: var(--study); }
.ms-badge-pets           { background: rgba(90,158,79,.1);   color: var(--pets); }

/* ── Data / reference box ───────────────────────────────────────────────────── */
.ms-data-box {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
}
.ms-data-label {
  font-size: .88rem;
  color: var(--primary-dark);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── Reusable info boxes (green / yellow) ───────────────────────────────────── */
.ms-box-green       { background:#f0fff4; border:1px solid #b3f0c8; }
.ms-box-green-title { font-size:.8rem; font-weight:600; color:#1a6e3a; margin-bottom:8px; }
.ms-box-yellow      { background:#fff8e1; border:1px solid #ffe082; }
.ms-box-yellow-title { font-size:.8rem; font-weight:600; color:#e65100; margin-bottom:6px; }
.ms-box-tips-txt    { font-size:.78rem; color:#555; line-height:1.8; }

/* ── Horizontal divider ─────────────────────────────────────────────────────── */
.ms-divider {
  height: 1px;
  background: #f0f0f0;
  margin-bottom: 16px;
}

/* ── Result stat boxes ───────────────────────────────────────────────────────── */
.ms-stat {
  border-radius: 10px;
  padding: 14px 8px;
  text-align: center;
}
.ms-stat-green  { background: #edfff3; }
.ms-stat-blue   { background: #e8f4ff; }
.ms-stat-orange { background: #fff8ec; }
.ms-stat-pink   { background: #fff0f3; }
.ms-stat-purple { background: #f0f4ff; }
.ms-stat-grey   { background: #eef3ff; }

.ms-stat-val    { font-size: 1.4rem; font-weight: 700; }
.ms-stat-val-lg { font-size: 1.6rem; font-weight: 700; }
.ms-stat-val-sm { font-size: 1.1rem; font-weight: 700; }
.ms-stat-label  { font-size: .72rem; color: #888; }

/* ── FAQ accordion ───────────────────────────────────────────────────────────── */
.ms-faq-item {
  border: none !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}
.ms-faq-btn {
  font-size: .9rem !important;
  font-weight: 600 !important;
  background: #fff !important;
  color: var(--primary-dark) !important;
}
.ms-faq-btn:not(.collapsed) {
  background: #fff !important;
  color: var(--primary-dark) !important;
  box-shadow: none !important;
}
.ms-faq-body {
  color: #555;
  font-size: .88rem;
  line-height: 1.75;
}

/* ── Related tool link cards ─────────────────────────────────────────────────── */
.ms-tool-link {
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  transition: transform .15s, box-shadow .15s;
  text-decoration: none !important;
}
.ms-tool-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .1) !important;
}
.ms-tool-link-icon { font-size: 1.6rem; flex-shrink: 0; }
.ms-tool-link-name { font-size: .88rem; font-weight: 600; color: var(--primary-dark); }
.ms-tool-link-desc { font-size: .78rem; color: #888; margin-top: 2px; }

/* ── Data grid cards (age groups, BMI table, etc.) ───────────────────────────── */
.ms-card-data {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

/* ── Note / disclaimer boxes ─────────────────────────────────────────────────── */
.ms-note {
  border-radius: 8px;
  border-left: 4px solid;
  padding: 16px 20px;
  font-size: .85rem;
}
.ms-note-blue  { background: #f0f7ff; border-color: var(--sleep);   color: #1a4a7a; }
.ms-note-green { background: #f0fff4; border-color: var(--fitness); color: #155724; }
.ms-note-orange { background: #fff8ec; border-color: var(--nutrition); color: #6c3a00; }
.ms-note-purple { background: #f3f0ff; border-color: var(--life);   color: #3d2b8e; }

/* ── Long-tail content container ─────────────────────────────────────────────── */
.ms-longtail {
  max-width: 860px;
}

/* ── SEO text block ──────────────────────────────────────────────────────────── */
.ms-seo-body { color: #555; font-size: .92rem; line-height: 1.8; }
.ms-seo-h2   { font-size: 1.35rem; }
.ms-seo-h3   { font-size: 1.05rem; margin-top: 24px; margin-bottom: 10px; }

/* ── Table header ────────────────────────────────────────────────────────────── */
.ms-table-head { background: var(--primary-dark); color: #fff; }

/* ── Progress bar (life-percentage) ─────────────────────────────────────────── */
.ms-progress-track {
  background: #f0f0f0;
  border-radius: 50px;
  height: 24px;
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .06);
}
.ms-progress-bar {
  height: 100%;
  border-radius: 50px;
  transition: width 1s ease;
  background: linear-gradient(90deg, #28a745 0%, #fd7e14 60%, #e94560 100%);
}

/* ── Mode / unit toggle buttons ──────────────────────────────────────────────── */
.ms-toggle-btn {
  border-radius: 8px;
  font-weight: 600;
  font-size: .88rem;
  background: #f8f9fa;
  color: #555;
  border: 1px solid #e0e0e0;
}
.ms-toggle-btn.active-sleep     { background: var(--sleep);     color: #fff; border-color: var(--sleep); }
.ms-toggle-btn.active-fitness   { background: var(--fitness);   color: #fff; border-color: var(--fitness); }
.ms-toggle-btn.active-nutrition { background: var(--nutrition); color: #fff; border-color: var(--nutrition); }
.ms-toggle-btn.active-life      { background: var(--life);      color: #fff; border-color: var(--life); }
.ms-toggle-btn.active-cta       { background: var(--cta-text);  color: #fff; border-color: var(--cta-text); }

/* ── Stage/step pills (sleep cycle stages, etc.) ─────────────────────────────── */
.ms-stage-pill {
  border-radius: 6px;
  padding: 4px 8px;
  font-size: .75rem;
  font-weight: 700;
  min-width: 50px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 2px;
  color: #fff;
}

/* ── Inline colour utilities (text) ─────────────────────────────────────────── */
.text-sleep     { color: var(--sleep); }
.text-fitness   { color: var(--fitness); }
.text-nutrition { color: var(--nutrition); }
.text-life      { color: var(--life); }
.text-quiz      { color: var(--quiz); }
.text-kids      { color: var(--kids); }
.text-brand     { color: var(--primary-dark); }
.text-mid       { color: var(--primary-mid); }
.text-cta       { color: var(--cta-text); }
.text-teal      { color: var(--teal-text); }
.text-green     { color: var(--green-text); }
.text-purple    { color: var(--purple-text); }
.text-muted-sm  { font-size: .82rem; color: var(--text-muted); }
.text-xs        { font-size: .75rem; }
.text-sm        { font-size: .88rem; }
.text-md        { font-size: .92rem; }

/* ── Background utilities ────────────────────────────────────────────────────── */
.bg-sleep     { background: var(--sleep); }
.bg-fitness   { background: var(--fitness); }
.bg-nutrition { background: var(--nutrition); }
.bg-life      { background: var(--life); }
.bg-quiz      { background: var(--quiz); }
.bg-kids      { background: var(--kids); }

/* ── Icon emoji containers ───────────────────────────────────────────────────── */
.ms-icon-lg  { font-size: 2rem;   margin-bottom: 8px; }
.ms-icon-xl  { font-size: 2.5rem; margin-bottom: 10px; }

/* ── Divider lines ───────────────────────────────────────────────────────────── */
.ms-hr { border: none; border-top: 1px solid #f0f0f0; margin: 0; }

/* ── fw helpers (Bootstrap only has fw-bold, not fw-600 etc.) ─────────────────── */
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }

/* ── Category page — top breadcrumb (light background) ──────────────────────── */
.ms-cat-nav {
  background: #f0f2f5;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.ms-cat-nav .breadcrumb {
  font-size: .84rem;
  margin: 0;
}
.ms-cat-nav .breadcrumb-item a {
  color: var(--primary-cta);
  text-decoration: none;
}
.ms-cat-nav .breadcrumb-item.active {
  color: var(--text-muted);
}

/* ── Hero icon (large emoji in hero) ────────────────────────────────────────── */
.ms-hero-icon { font-size: 2.8rem; line-height: 1; }

/* ── Hero desc wide (category hero allows wider paragraph) ──────────────────── */
.ms-hero-desc-wide {
  color: rgba(255, 255, 255, .7);
  font-size: 1.05rem;
  max-width: 620px;
  margin-bottom: 28px;
}

/* ── Hero checklist items ────────────────────────────────────────────────────── */
.ms-hero-feature { color: rgba(255, 255, 255, .65); font-size: .88rem; }

/* ── Hero stat widget (translucent box, right column) ────────────────────────── */
.ms-hero-stat-box {
  border-radius: 16px;
  padding: 28px 32px;
  text-align: center;
}
.ms-hero-stat-box-fitness       { background: rgba(40,167,69,.12);  border: 1px solid rgba(40,167,69,.25); }
.ms-hero-stat-box-sleep         { background: rgba(108,99,255,.12); border: 1px solid rgba(108,99,255,.25); }
.ms-hero-stat-box-nutrition     { background: rgba(253,126,20,.12); border: 1px solid rgba(253,126,20,.25); }
.ms-hero-stat-box-life          { background: rgba(111,66,193,.12); border: 1px solid rgba(111,66,193,.25); }
.ms-hero-stat-box-quiz          { background: rgba(233,69,96,.12);  border: 1px solid rgba(233,69,96,.25); }
.ms-hero-stat-box-kids          { background: rgba(23,162,184,.12); border: 1px solid rgba(23,162,184,.25); }
.ms-hero-stat-box-games         { background: rgba(255,193,7,.12);  border: 1px solid rgba(255,193,7,.25); }
.ms-hero-stat-box-mental-health { background: rgba(233,69,96,.12);  border: 1px solid rgba(233,69,96,.25); }
.ms-hero-stat-box-productivity  { background: rgba(11,114,133,.12); border: 1px solid rgba(11,114,133,.25); }
.ms-hero-stat-box-study         { background: rgba(2,119,189,.12);  border: 1px solid rgba(2,119,189,.25); }
.ms-hero-stat-box-pets          { background: rgba(90,158,79,.12);  border: 1px solid rgba(90,158,79,.25); }
.ms-hero-stat-num  { font-size: 3rem; margin-bottom: 8px; color: #fff; }
.ms-hero-stat-sub  { color: rgba(255,255,255,.7); font-size: .9rem; }
.ms-hero-stat-div  { height: 1px; background: rgba(255,255,255,.1); margin: 14px 0; }
.ms-hero-stat-val  { font-size: 1.6rem; margin-bottom: 4px; color: #fff; }

/* ── Category tools grid section ────────────────────────────────────────────── */
.ms-section-tools { padding: 56px 0; }
.ms-section-h2    { font-size: 1.5rem; margin: 0; }

/* ── Category tool card border accents ──────────────────────────────────────── */
.ms-tool-card-fitness       { border-left: 4px solid var(--fitness) !important; }
.ms-tool-card-sleep         { border-left: 4px solid var(--sleep) !important; }
.ms-tool-card-nutrition     { border-left: 4px solid var(--nutrition) !important; }
.ms-tool-card-life          { border-left: 4px solid var(--life) !important; }
.ms-tool-card-quiz          { border-left: 4px solid var(--cta-text) !important; }
.ms-tool-card-kids          { border-left: 4px solid var(--teal-text) !important; }
.ms-tool-card-games         { border-left: 4px solid #856404 !important; }
.ms-tool-card-mental-health { border-left: 4px solid var(--mental-health) !important; }
.ms-tool-card-productivity  { border-left: 4px solid var(--productivity) !important; }
.ms-tool-card-study         { border-left: 4px solid var(--study) !important; }
.ms-tool-card-pets          { border-left: 4px solid var(--pets) !important; }

/* ── Tool card internals ─────────────────────────────────────────────────────── */
.ms-tool-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.ms-tool-name { font-weight: 700; color: var(--primary-dark); font-size: .95rem; margin-bottom: 4px; }
.ms-tool-desc { font-size: .83rem; color: var(--text-muted); line-height: 1.5; }

/* ── Mini stat cards (quick reference grid in section-white) ─────────────────── */
.ms-mini-icon  { font-size: 1.5rem; margin-bottom: 6px; }
.ms-mini-val   { font-weight: 800; font-size: 1rem; color: var(--primary-dark); }
.ms-mini-label { font-size: .75rem; color: var(--text-muted); margin-top: 3px; }

/* ── Cycle stat cards (sleep why-cycles section) ─────────────────────────────── */
.ms-cycle-icon  { font-size: 1.8rem; margin-bottom: 8px; }
.ms-cycle-val   { font-weight: 800; font-size: 1.3rem; color: var(--primary-dark); }
.ms-cycle-label { font-size: .8rem; color: var(--text-muted); margin-top: 4px; }

/* ── Section body text ───────────────────────────────────────────────────────── */
.ms-body-text { color: var(--text); line-height: 1.8; margin-bottom: 16px; }

/* ── Related tools section ───────────────────────────────────────────────────── */
.ms-section-related { padding: 40px 0 64px; background: #f8f9fa; }
.ms-related-h2      { font-size: 1.3rem; }
.ms-related-icon    { font-size: 1.8rem; line-height: 1; flex-shrink: 0; }
.ms-related-label   { font-weight: 700; color: var(--primary-dark); font-size: .9rem; }
.ms-related-desc    { font-size: .78rem; color: var(--text-muted); }

/* ── Alternate category hero (life/nutrition/quizzes/games) ─────────────────── */
.ms-cat-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  padding: 64px 0 48px;
}
.ms-cat-hero-kids {
  background: linear-gradient(135deg, #0f4c75 0%, #1b6ca8 50%, #17a2b8 100%);
  padding: 64px 0 48px;
}
.ms-cat-hero-h1 { color: #fff; margin-bottom: 16px; }
.ms-cat-hero-p  { color: rgba(255,255,255,.75); font-size: 1.1rem; line-height: 1.7; max-width: 620px; margin-bottom: 24px; }
.ms-cat-hero-p-bright { color: rgba(255,255,255,.85); font-size: 1.1rem; line-height: 1.7; max-width: 620px; margin-bottom: 24px; }

/* ── Category hero badge variants ───────────────────────────────────────────── */
.ms-cat-badge-life     { background:rgba(111,66,193,.2); color:#c9a8f5; border:1px solid rgba(111,66,193,.4); border-radius:50px; font-size:.8rem; padding:5px 14px; }
.ms-cat-badge-nutrition{ background:rgba(253,126,20,.2); color:#ffb066; border:1px solid rgba(253,126,20,.4); border-radius:50px; font-size:.8rem; padding:5px 14px; }
.ms-cat-badge-quiz     { background:rgba(233,69,96,.2);  color:#ff8fa3; border:1px solid rgba(233,69,96,.4);  border-radius:50px; font-size:.8rem; padding:5px 14px; }
.ms-cat-badge-games    { background:rgba(255,193,7,.2);  color:#ffd84d; border:1px solid rgba(255,193,7,.4);  border-radius:50px; font-size:.8rem; padding:5px 14px; }

/* ── Alternate FAQ accordion (border variant) ────────────────────────────────── */
.ms-faq-item-border {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  margin-bottom: 10px;
  overflow: hidden;
}
.ms-faq-btn-alt {
  font-weight: 600;
  font-size: .95rem;
  background: transparent;
  color: var(--primary-dark);
}
.ms-faq-body-alt {
  font-size: .92rem;
  line-height: 1.8;
  color: var(--text);
}

/* ── SEO section (py-5 + accent background + longtail container) ─────────────── */
.ms-section-seo-alt {
  background: #f8f9ff;
  padding: 48px 0;
}

/* ── Stats section ───────────────────────────────────────────────────────────── */
.ms-section-stats { padding: 48px 0; background: #fff; }
.ms-stat-val-md { font-weight: 800; font-size: 1.1rem; color: var(--primary-dark); }
.ms-stat-val-quiz { font-weight: 800; font-size: 1.2rem; color: var(--primary-dark); }

/* ── Nutrition tool card (larger icon variant) ───────────────────────────────── */
.ms-tool-icon-lg { font-size: 2.5rem; line-height: 1; flex-shrink: 0; }
.ms-tool-name-lg { font-weight: 700; color: var(--primary-dark); font-size: 1.05rem; margin-bottom: 6px; }
.ms-tool-desc-lg { font-size: .88rem; color: var(--text-muted); line-height: 1.6; }

/* ── Navbar dropdown ─────────────────────────────────────────────────────────── */
.ms-nav-item { position: relative; }

.ms-nav-item > .ms-nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  color: rgba(255,255,255,.82);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  transition: color .15s, background .15s;
  cursor: pointer;
}
.ms-nav-item > .ms-nav-link:hover,
.ms-nav-item:hover > .ms-nav-link {
  color: #fff;
  background: rgba(255,255,255,.08);
}

/* Chevron */
.ms-nav-link .chevron {
  width: 12px; height: 12px;
  stroke: currentColor; stroke-width: 2.5;
  fill: none; flex-shrink: 0;
  transition: transform .2s;
}
.ms-nav-item:hover .chevron { transform: rotate(180deg); }

/* Dropdown panel */
.ms-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 360px;
  max-width: 420px;
  width: max-content;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.13);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  transform: translateX(-50%) translateY(6px);
  z-index: 1050;
}
.ms-nav-item:hover .ms-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Keep open when mouse moves into the panel */
.ms-dropdown::before {
  content: '';
  position: absolute;
  top: -10px; left: 0; right: 0;
  height: 10px;
}

/* Tool link inside dropdown */
.ms-tool-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 6px;
  text-decoration: none;
  transition: background .12s;
}
.ms-tool-link:hover { background: #f5f6f8; }
.ms-tool-link .t-icon { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.ms-tool-link .t-name { font-size: .8rem; font-weight: 600; color: #1a1a2e; line-height: 1.2; }
.ms-tool-link .t-desc { font-size: .7rem; color: #999; margin-top: 1px; }

/* Category footer link */
.ms-see-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--primary-cta);
  text-decoration: none;
  margin-top: 4px;
}
.ms-see-all:hover { text-decoration: underline; }

/* ── Text utilities (additions) ──────────────────────────────────────────────── */
.text-games { color: var(--games); }

/* ── Ghost button (white border, dark hero backgrounds) ──────────────────────── */
.btn-ghost-white {
  background: transparent;
  border: 2px solid rgba(255,255,255,.4);
  color: #fff;
  border-radius: 8px;
  padding: 12px 28px;
  font-weight: 600;
  min-height: 48px;
  transition: border-color .2s, background .2s;
  display: inline-flex;
  align-items: center;
}
.btn-ghost-white:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

/* ── Outline CTA button ──────────────────────────────────────────────────────── */
.btn-outline-cta {
  background: transparent;
  border: 2px solid var(--primary-cta);
  color: var(--primary-cta);
  border-radius: 8px;
  padding: 12px 28px;
  font-weight: 600;
  min-height: 48px;
  transition: background .2s, color .2s;
  display: inline-flex;
  align-items: center;
}
.btn-outline-cta:hover { background: var(--primary-cta); color: #fff; }

/* ── Home page — Hero ────────────────────────────────────────────────────────── */
.home-hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 60%, #16213e 100%);
  min-height: 85vh;
  display: flex;
  align-items: center;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) { .home-hero { padding: 60px 0; min-height: auto; } }
.home-hero-deco { position: absolute; inset: 0; pointer-events: none; }
.home-hero-blob-1 {
  position: absolute; top: -80px; right: -80px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(233,69,96,.12) 0%, transparent 70%);
}
.home-hero-blob-2 {
  position: absolute; bottom: -60px; left: -60px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(108,99,255,.1) 0%, transparent 70%);
}
.home-hero-badge {
  background: rgba(233,69,96,.2);
  color: #c23152;
  border: 1px solid rgba(233,69,96,.3);
  border-radius: 50px;
  padding: 6px 14px;
  font-size: .8rem;
  font-weight: 600;
}
.home-hero-h1 {
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.25rem;
}
.home-hero-accent { color: #e94560; }
.home-hero-sub {
  color: rgba(255,255,255,.75);
  font-size: 1.15rem;
  max-width: 520px;
  line-height: 1.75;
  margin-bottom: 2rem;
}
.home-stat-card {
  padding: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  text-align: center;
}
.home-stat-num   { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.home-stat-label { color: rgba(255,255,255,.55); font-size: .78rem; margin-top: 4px; }

/* Floating deco cards (desktop hero) */
.home-deco-wrap { position: relative; width: 340px; height: 340px; }
.home-deco-card {
  position: absolute;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 16px 20px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  width: 200px;
}
.home-deco-card-1 { top: 0; left: 20px; }
.home-deco-card-2 { top: 90px; right: 0; }
.home-deco-card-3 { bottom: 40px; left: 10px; }
.home-deco-icon  { font-size: 1.5rem; }
.home-deco-title { color: #fff; font-weight: 600; font-size: .9rem; margin-top: 6px; }
.home-deco-sub   { font-size: .78rem; margin-top: 2px; }
.home-deco-sub-sleep   { color: var(--sleep); }
.home-deco-sub-fitness { color: var(--fitness); }
.home-deco-sub-games   { color: var(--games); }

/* ── Home page — Category grid ───────────────────────────────────────────────── */
.home-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  border-radius: .75rem;
  text-decoration: none;
  height: 100%;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.home-cat-card:hover { transform: translateY(-5px); text-decoration: none; }
.home-cat-card-sleep     { background: linear-gradient(145deg, rgba(108,99,255,.09) 0%, rgba(108,99,255,.03) 100%); border: 1.5px solid rgba(108,99,255,.19); }
.home-cat-card-fitness   { background: linear-gradient(145deg, rgba(40,167,69,.09) 0%, rgba(40,167,69,.03) 100%);   border: 1.5px solid rgba(40,167,69,.19); }
.home-cat-card-nutrition { background: linear-gradient(145deg, rgba(253,126,20,.09) 0%, rgba(253,126,20,.03) 100%); border: 1.5px solid rgba(253,126,20,.19); }
.home-cat-card-kids      { background: linear-gradient(145deg, rgba(23,162,184,.09) 0%, rgba(23,162,184,.03) 100%); border: 1.5px solid rgba(23,162,184,.19); }
.home-cat-card-life      { background: linear-gradient(145deg, rgba(111,66,193,.09) 0%, rgba(111,66,193,.03) 100%); border: 1.5px solid rgba(111,66,193,.19); }
.home-cat-card-games     { background: linear-gradient(145deg, rgba(230,172,0,.09) 0%, rgba(230,172,0,.03) 100%);   border: 1.5px solid rgba(230,172,0,.19); }
.home-cat-card-sleep:hover     { box-shadow: 0 12px 35px rgba(108,99,255,.15); border-color: rgba(108,99,255,.4); }
.home-cat-card-fitness:hover   { box-shadow: 0 12px 35px rgba(40,167,69,.15);  border-color: rgba(40,167,69,.4); }
.home-cat-card-nutrition:hover { box-shadow: 0 12px 35px rgba(253,126,20,.15); border-color: rgba(253,126,20,.4); }
.home-cat-card-kids:hover      { box-shadow: 0 12px 35px rgba(23,162,184,.15); border-color: rgba(23,162,184,.4); }
.home-cat-card-life:hover      { box-shadow: 0 12px 35px rgba(111,66,193,.15); border-color: rgba(111,66,193,.4); }
.home-cat-card-games:hover     { box-shadow: 0 12px 35px rgba(230,172,0,.15);  border-color: rgba(230,172,0,.4); }

.home-cat-icon {
  width: 64px; height: 64px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; margin-bottom: 12px;
}
.home-cat-icon-sleep     { background: rgba(108,99,255,.13); border: 1px solid rgba(108,99,255,.19); }
.home-cat-icon-fitness   { background: rgba(40,167,69,.13);  border: 1px solid rgba(40,167,69,.19); }
.home-cat-icon-nutrition { background: rgba(253,126,20,.13); border: 1px solid rgba(253,126,20,.19); }
.home-cat-icon-kids      { background: rgba(23,162,184,.13); border: 1px solid rgba(23,162,184,.19); }
.home-cat-icon-life      { background: rgba(111,66,193,.13); border: 1px solid rgba(111,66,193,.19); }
.home-cat-icon-games     { background: rgba(230,172,0,.13);  border: 1px solid rgba(230,172,0,.19); }

.home-cat-name  { font-size: 1rem; font-weight: 700; color: var(--primary-dark); margin: 0 0 4px; }
.home-cat-desc  { font-size: .8rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
.home-cat-arrow { margin-top: 12px; font-size: .82rem; font-weight: 600; }
.home-cat-badge { font-size: .75rem; font-weight: 600; border-radius: 50px; padding: 2px 10px; margin-bottom: 8px; }
.home-cat-badge-sleep     { color: var(--sleep);     background: rgba(108,99,255,.09); }
.home-cat-badge-fitness   { color: var(--fitness);   background: rgba(40,167,69,.09); }
.home-cat-badge-nutrition { color: var(--nutrition); background: rgba(253,126,20,.09); }
.home-cat-badge-kids      { color: var(--kids);      background: rgba(23,162,184,.09); }
.home-cat-badge-life      { color: var(--life);      background: rgba(111,66,193,.09); }
.home-cat-badge-games     { color: #856404;           background: rgba(230,172,0,.09); }
.home-cat-arrow-sleep     { color: var(--sleep); }
.home-cat-arrow-fitness   { color: var(--fitness); }
.home-cat-arrow-nutrition { color: var(--nutrition); }
.home-cat-arrow-kids      { color: var(--kids); }
.home-cat-arrow-life      { color: var(--life); }
.home-cat-arrow-games     { color: #856404; }

/* ── Home page — Popular tools ───────────────────────────────────────────────── */
.home-view-all       { color: var(--primary-cta); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.home-view-all:hover { color: var(--cta-text); text-decoration: none; }
.home-tool-name       { color: var(--primary-dark); text-decoration: none; }
.home-tool-name:hover { color: var(--primary-cta); text-decoration: none; }
.home-tool-desc  { font-size: .875rem; color: var(--text-muted); flex-grow: 1; margin-bottom: 1rem; }
.home-top-border-sleep     { border: 1px solid var(--border); border-top: 4px solid var(--sleep) !important; }
.home-top-border-fitness   { border: 1px solid var(--border); border-top: 4px solid var(--fitness) !important; }
.home-top-border-nutrition { border: 1px solid var(--border); border-top: 4px solid var(--nutrition) !important; }
.home-top-border-life      { border: 1px solid var(--border); border-top: 4px solid var(--life) !important; }
.home-top-border-games     { border: 1px solid var(--border); border-top: 4px solid var(--games) !important; }
.home-top-border-quiz      { border: 1px solid var(--border); border-top: 4px solid var(--quiz) !important; }
.home-top-border-kids      { border: 1px solid var(--border); border-top: 4px solid var(--kids) !important; }

/* ── Home page — Kids section ────────────────────────────────────────────────── */
.home-kids-section { padding: 80px 0; background: #e8f7f7; }
@media (max-width: 768px) { .home-kids-section { padding: 40px 0; } }
.home-kids-badge { background: rgba(23,162,184,.08); color: #0b7285; border-radius: 50px; padding: 5px 14px; font-size: .8rem; font-weight: 700; }
.home-kids-pill  { background: #fff; border: 1px solid rgba(23,162,184,.19); color: #0b7285; border-radius: 50px; padding: 5px 12px; font-size: .8rem; font-weight: 600; }
.home-kids-btn   { background: var(--kids) !important; min-width: 180px; }
.home-kids-btn:hover { background: #138a9a !important; color: #fff; }
.home-kids-card  { display: block; padding: .75rem; border-radius: .75rem; text-decoration: none; height: 100%; background: #fff; border: 1.5px solid rgba(23,162,184,.15); transition: transform .2s, box-shadow .2s; }
.home-kids-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(23,162,184,.15); text-decoration: none; }
.home-kids-card-icon { font-size: 2rem; margin-bottom: 8px; }
.home-kids-card-name { font-weight: 700; color: var(--primary-dark); font-size: .95rem; margin-bottom: 4px; }
.home-kids-card-desc { font-size: .8rem; color: var(--text-muted); }

/* ── Home page — How it works ────────────────────────────────────────────────── */
.home-step-icon   { width: 72px; height: 72px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0 auto 16px; }
.home-step-icon-1 { background: rgba(80,72,214,.08);  border: 2px solid rgba(80,72,214,.15); }
.home-step-icon-2 { background: rgba(194,49,82,.08);  border: 2px solid rgba(194,49,82,.15); }
.home-step-icon-3 { background: rgba(26,122,50,.08);  border: 2px solid rgba(26,122,50,.15); }
.home-step-num    { font-weight: 800; font-size: .75rem; letter-spacing: 1.5px; margin-bottom: 8px; }
.home-step-num-1  { color: #5048d6; }
.home-step-num-2  { color: #c23152; }
.home-step-num-3  { color: #1a7a32; }
.home-step-title  { font-size: 1.15rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 10px; }
.home-step-desc   { color: var(--text-muted); font-size: .9rem; line-height: 1.7; max-width: 260px; margin: 0 auto; }
.home-trust-bar    { border-top: 1px solid var(--border); }
.home-trust-green  { color: #1a7a32; font-size: .875rem; font-weight: 600; }
.home-trust-teal   { color: #0b7285; font-size: .875rem; font-weight: 600; }
.home-trust-purple { color: #5048d6; font-size: .875rem; font-weight: 600; }
.home-trust-red    { color: #c23152; font-size: .875rem; font-weight: 600; }

/* ── Home page — SEO section ─────────────────────────────────────────────────── */
.home-seo-body { font-size: 1rem; line-height: 1.85; color: var(--text); margin-bottom: 1.25rem; }
.home-seo-h3   { font-size: 1.1rem; font-weight: 700; color: var(--primary-dark); margin: 1.75rem 0 .75rem; }

/* ── Navbar additions ────────────────────────────────────────────────────────── */
.ms-navbar             { background: var(--primary-dark); z-index: 1040; }
.ms-navbar-inner       { height: 60px; }
.ms-navbar-logo        { color: #fff; font-weight: 700; font-size: 1.1rem; }
.ms-navbar-logo:hover  { color: rgba(255,255,255,.85); text-decoration: none; }
.ms-nav-ul             { list-style: none; gap: 2px; }
.ms-nav-icon-btn       { color: rgba(255,255,255,.8); }
.ms-nav-icon-btn:hover { color: #fff; }
.ms-dropdown-header       { border-bottom: 1px solid #f0f0f0; }
.ms-dropdown-header-icon  { font-size: 1.1rem; }
.ms-dropdown-header-label { font-weight: 700; font-size: .85rem; color: #1a1a2e; }
.ms-dropdown-tools-grid   { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.ms-dropdown-empty        { color: #888; font-size: .85rem; margin: 0; }
.ms-offcanvas             { background: var(--primary-dark); max-width: 300px; border-right: 1px solid rgba(255,255,255,.08); }
.ms-offcanvas-header      { border-bottom: 1px solid rgba(255,255,255,.1); padding: 16px 20px; }
.ms-offcanvas-logo        { color: #fff; font-weight: 700; font-size: 1rem; }
.ms-mobile-nav-item       { background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.07); }
.ms-mobile-nav-btn        { background: transparent !important; color: rgba(255,255,255,.85) !important; font-weight: 600; font-size: .88rem; box-shadow: none !important; padding: 13px 20px; gap: 8px; }
.ms-mobile-see-all        { color: rgba(255,255,255,.4); font-size: .7rem; white-space: nowrap; }
.ms-mobile-see-all:hover  { color: rgba(255,255,255,.7); text-decoration: none; }
.ms-mobile-tool-link      { color: rgba(255,255,255,.7); font-size: .84rem; border-bottom: 1px solid rgba(255,255,255,.04); }
.ms-mobile-tool-link:hover { color: #fff; text-decoration: none; }
.ms-mobile-tool-icon      { font-size: 1rem; }
.ms-search-modal          { border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.18); }
.ms-search-input          { font-size: 1.05rem; padding: 0; }
.ms-search-results        { max-height: 380px; overflow-y: auto; }
.ms-search-result         { display: flex; align-items: center; gap: .75rem; padding: .75rem; border-radius: 8px; color: var(--text); background: #f8f9fa; margin-bottom: .25rem; text-decoration: none; }
.ms-search-result:hover   { background: #f0f1f3; color: var(--text); text-decoration: none; }
.ms-search-result-icon    { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.ms-search-result-info    { min-width: 0; flex: 1; }
.ms-search-result-name    { font-weight: 600; color: #1a1a2e; font-size: .9rem; }
.ms-search-result-desc    { font-size: .78rem; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-search-result-cat     { margin-left: auto; font-size: .72rem; color: var(--primary-cta); text-transform: capitalize; flex-shrink: 0; }

/* ── Contextual category navbar ──────────────────────────────────────────────── */
.ms-ctx-sep            { width: 1px; height: 22px; background: rgba(255,255,255,.15); flex-shrink: 0; }
.ms-ctx-cat-label      { display: flex; align-items: center; gap: 6px; color: #fff; font-size: .88rem; font-weight: 700; text-decoration: none; white-space: nowrap; padding: 5px 10px; border-radius: 6px; transition: background .15s; flex-shrink: 0; }
.ms-ctx-cat-label:hover { background: rgba(255,255,255,.08); }
.ms-ctx-tools-scroll   { flex: 1; overflow: hidden; min-width: 0; }
.ms-ctx-tools-inner    { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 4px 0; -webkit-overflow-scrolling: touch; }
.ms-ctx-tools-inner::-webkit-scrollbar { display: none; }
.ms-ctx-tool-link      { color: rgba(255,255,255,.72); font-size: .8rem; font-weight: 500; text-decoration: none; white-space: nowrap; padding: 5px 10px; border-radius: 6px; transition: color .15s, background .15s; }
.ms-ctx-tool-link:hover { color: #fff; background: rgba(255,255,255,.09); }
.ms-ctx-tool-link.ms-ctx-active { color: #fff; background: rgba(255,255,255,.16); font-weight: 600; }
.ms-offcanvas-cat-hdr  { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: rgba(255,255,255,.45); padding: 14px 20px 6px; }
.ms-mobile-back-link   { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.7); font-size: .88rem; font-weight: 600; text-decoration: none; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ms-mobile-back-link:hover { color: #fff; text-decoration: none; }
.ms-mobile-tool-active { background: rgba(255,255,255,.07); color: #fff !important; }
.ms-cats-btn           { display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,.75); font-size: .78rem; font-weight: 600; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 7px; padding: 5px 10px; white-space: nowrap; transition: all .15s; cursor: pointer; }
.ms-cats-btn:hover, .ms-cats-btn.show { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2); }
.ms-cats-dropdown      { min-width: 200px; background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.16); border: none; padding: 8px; margin-top: 6px !important; }
.ms-cats-dropdown-hdr  { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #aaa; padding: 4px 10px 8px; }
.ms-cats-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--primary-dark); font-size: .85rem; font-weight: 500; text-decoration: none; transition: background .12s; }
.ms-cats-dropdown-item:hover { background: #f4f4f6; color: var(--primary-dark); text-decoration: none; }
.ms-cats-dropdown-item.ms-cats-current { background: #f0f0ff; font-weight: 700; }
.ms-cats-item-icon     { font-size: 1.1rem; width: 24px; text-align: center; flex-shrink: 0; }

/* ── Footer additions ────────────────────────────────────────────────────────── */
.ms-footer              { background: var(--primary-dark); color: rgba(255,255,255,.8); padding: 60px 0 0; border-top: 3px solid var(--primary-cta); }
.ms-footer-brand        { color: #fff; }
.ms-footer-brand:hover  { color: rgba(255,255,255,.85); text-decoration: none; }
.ms-footer-desc         { font-size: .88rem; color: rgba(255,255,255,.6); line-height: 1.7; }
.ms-footer-badge        { background: rgba(255,255,255,.1) !important; color: rgba(255,255,255,.8) !important; border-radius: 50px; font-size: .75rem; }
.ms-footer-col-heading  { font-size: .9rem; letter-spacing: .5px; text-transform: uppercase; }
.ms-footer-list         { font-size: .875rem; }
.ms-footer-link         { color: rgba(255,255,255,.7); transition: color .15s; }
.ms-footer-link:hover   { color: #e94560 !important; text-decoration: none; }
.ms-footer-kids-box     { background: rgba(23,162,184,.15); border: 1px solid rgba(23,162,184,.3); }
.ms-footer-kids-label   { font-size: .82rem; color: #17a2b8; font-weight: 600; }
.ms-footer-kids-text    { font-size: .78rem; color: rgba(255,255,255,.6); margin: 4px 0 0; }
.ms-footer-bottom       { border-top: 1px solid rgba(255,255,255,.1); gap: 12px; }
.ms-footer-copy         { font-size: .82rem; color: rgba(255,255,255,.7); margin: 0; }
.ms-footer-cat-badge    { background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.6) !important; border-radius: 50px; font-size: .72rem; padding: 4px 10px; }
.ms-footer-cat-badge:hover { background: rgba(233,69,96,.2) !important; color: #e94560 !important; text-decoration: none; }

/* ── Section spacing & background utilities ──────────────────────────────────── */
.section-lg { padding: 80px 0; }
@media (max-width: 768px) { .section-lg { padding: 48px 0; } }
.bg-site { background: var(--bg); }

/* ── Category text colour utilities ─────────────────────────────────────────── */
.text-sleep     { color: var(--sleep); }
.text-fitness   { color: var(--fitness); }
.text-nutrition { color: var(--nutrition); }
.text-kids      { color: var(--kids); }
.text-life      { color: var(--life); }

/* ── Brand colour text ───────────────────────────────────────────────────────── */
.text-brand        { color: var(--primary-dark) !important; }
.text-green-brand  { color: var(--green-text); }
.text-teal-brand   { color: var(--teal-text); }
.text-purple-brand { color: var(--purple-text); }
.text-orange-brand { color: #e65100; }

/* ── Mode toggle buttons (used across all calculators) ───────────────────────── */
.mode-btn {
  border-radius: 8px;
  font-weight: 600;
  font-size: .88rem;
  background: #f8f9fa;
  color: #555;
  border: 1px solid #e0e0e0;
  transition: background .15s, color .15s, border-color .15s;
}
.mode-btn-sleep.active     { background: var(--sleep);     color: #fff !important; border-color: transparent; }
.mode-btn-fitness.active   { background: var(--fitness);   color: #fff !important; border-color: transparent; }
.mode-btn-nutrition.active { background: var(--nutrition); color: #fff !important; border-color: transparent; }
.mode-btn-kids.active      { background: var(--kids);      color: #fff !important; border-color: transparent; }
.mode-btn-life.active      { background: var(--life);      color: #fff !important; border-color: transparent; }
.mode-btn-games.active     { background: var(--games);     color: var(--primary-dark) !important; border-color: transparent; }

/* ── Intro paragraph (centered, capped width) ────────────────────────────────── */
.ms-intro-text { max-width: 520px; margin-left: auto; margin-right: auto; }

/* ── Side panel sub-heading (uppercase label above info lists) ───────────────── */
.ms-panel-head { font-size: .88rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--primary-dark); }

/* ── Source / attribution line under tables ──────────────────────────────────── */
.ms-source { font-size: .8rem; color: #888; margin-top: 12px; }

/* ── Disclaimer / note box (green-tinted, used in calculator footers) ────────── */
.ms-disclaimer { font-size: .85rem; color: #155724; }

/* ── Trust badge (green outlined — trust-badges component) ──────────────────── */
.ms-trust-badge {
  background: rgba(40,167,69,.08) !important;
  color: #28a745 !important;
  border-color: #28a745 !important;
  border-radius: 50px;
  padding: 5px 12px;
}

/* ── Bordered table (rounded corners) ───────────────────────────────────────── */
.ms-table-rounded { border-radius: 12px; overflow: hidden; }

/* ── Side reference card row: coloured tag + text ────────────────────────────── */
.ms-ref-tag {
  color: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: .82rem;
  font-weight: 700;
  min-width: 50px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.ms-ref-title { font-size: .87rem; color: #1a1a2e; }
.ms-ref-desc  { font-size: .8rem;  color: #666; line-height: 1.5; }

/* ── Inline colour dot (legend / BMI gauge / charts) ────────────────────────── */
.ms-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ms-swatch {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
}

/* ── Result stat box — large padding variant (16px 10px) ────────────────────── */
.ms-stat-lg { border-radius: 12px; padding: 16px 10px; text-align: center; }

/* ── Extra-large stat value (TDEE / BMR displays) ────────────────────────────── */
.ms-stat-val-xl { font-size: 1.7rem; font-weight: 700; }

/* ── Stat sub-label ──────────────────────────────────────────────────────────── */
.ms-stat-sub { font-size: .75rem; color: #555; margin-top: 4px; }

/* ── Dark target box (calorie/goal target) ──────────────────────────────────── */
.ms-target-box { background: var(--primary-dark); color: #fff; }
.ms-target-lbl { font-size: .8rem; opacity: .7; }
.ms-target-val { font-size: 2.4rem; font-weight: 700; }