/* =========================================================================
   redesign-base.css — SHARED chrome for every redesign page.
   Single source of truth for design tokens, reset/typography, buttons, the
   utility bar + main nav, the hero band, the footer, and the toast. Loaded
   BEFORE each page's own stylesheet (see redesign.tpl), so per-page files
   should contain ONLY page-specific rules and must NOT redefine any selector
   below — that is what caused the nav-height / container-width drift.
   Canonical: --maxw 1240px, nav vertical padding 16px, hero band = shared
   background with page-driven height.
   ========================================================================= */

:root{
  --ink:#1d2a30;          /* dark slate */
  --ink-soft:#2b3a42;
  --paper:#f5f2ec;        /* warm off-white */
  --card:#ffffff;
  --line:#e3ddd2;
  --muted:#5c6670;
  --muted-2:#8a9099;
  --coral:#e0603f;        /* à la carte / shop lane */
  --coral-ink:#9a3a22;
  --coral-tint:#fbeae3;
  --teal:#137a63;         /* blueprint lane */
  --teal-ink:#0a4d3e;
  --teal-tint:#e2f0eb;
  --radius:14px;
  --radius-lg:20px;
  --maxw:1240px;
  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;line-height:1.55;font-size:16px;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.08;margin:0;letter-spacing:-0.01em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:15px;
     padding:13px 22px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease,opacity .15s ease;background:none}
.btn:active{transform:scale(.98)}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-coral{background:var(--coral);color:#fff}
.btn-coral:hover{background:#cf512f}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:#0f6a55}
.btn-ghost{border-color:rgba(29,42,48,.25);color:var(--ink)}
.btn-ghost:hover{background:rgba(29,42,48,.05)}
.btn-ghost-light{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost-light:hover{background:rgba(255,255,255,.1)}
/* Dual-tone focus ring. The teal alone is 4.71:1 on the paper background but only
   2.80:1 on the ink sections (hero, newsletter, footer, final CTA), failing WCAG
   1.4.11's 3:1. Pairing it with a white outer ring means one of the two always
   contrasts with whatever sits behind: teal on light, white on dark (14.73:1). */
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px;
  box-shadow:0 0 0 5px rgba(255,255,255,.92)}
section{position:relative}

/* ---------- top bar + main nav (canonical height: 16px vertical padding) ---------- */
.utility{background:var(--ink);color:#d7dde0;font-size:12.5px;font-family:var(--mono);letter-spacing:.05em}
.utility .wrap{display:flex;justify-content:flex-end;align-items:center;gap:22px;padding-top:6px;padding-bottom:6px}
.utility a{display:inline-flex;align-items:center;min-height:24px}
.utility a:hover{color:#fff}
nav.main{background:var(--ink);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
nav.main .wrap{display:flex;align-items:center;gap:28px;padding-top:16px;padding-bottom:16px}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em}
.logo .mark{width:32px;height:32px;border-radius:9px;background:var(--coral);display:grid;place-items:center;font-size:15px;color:#fff}
.logo small{display:block;font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.16em;color:var(--muted-2);text-transform:uppercase;margin-top:1px}
.nav-links{display:flex;gap:24px;margin-left:8px;font-size:15px;font-weight:500}
.nav-links a{color:#cdd4d8;display:inline-flex;align-items:center;min-height:24px}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:#fff}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:#fff;background:none;cursor:pointer}
.icon-btn:hover{background:rgba(255,255,255,.1)}
.cart-dot{position:relative}
.cart-dot b{position:absolute;top:-4px;right:-4px;background:var(--coral);color:#fff;font-size:10px;font-family:var(--mono);min-width:16px;height:16px;border-radius:9px;display:grid;place-items:center;padding:0 3px}

/* ---------- hero band (shared background; height is page-driven) ---------- */
.hero{background:var(--ink);color:#fff;overflow:hidden}

/* ---------- footer (shared) ---------- */
footer{background:#16222a;color:#9aa4ab;font-size:14px}
footer .wrap{padding:56px 24px 30px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
footer .fh{color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;font-weight:500}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
footer .fgrid ul{gap:2px}
footer .fgrid ul a{display:inline-block;padding:4px 0}
footer .fbottom .fmeta a{display:inline-block;padding:3px 0}
footer a:hover{color:#fff}
/* Footer tagline. Scoped: the Health Hub feature card also uses .ftag for its
   read-time chip, and this rule was inflating and displacing it. */
footer .ftag{margin-top:16px;max-width:32ch;line-height:1.6}
.fsocials{margin-top:22px}
.fsoc-lbl{font-family:var(--display);font-weight:600;color:#fff;font-size:14px}
.fsoc-line{font-size:12.5px;color:#7f8a91;margin:3px 0 12px}
.fsoc-row{display:flex;gap:10px}
.fsoc{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:#cdd4d8;transition:transform .18s,background .18s,border-color .18s,color .18s}
.fsoc:hover{transform:translateY(-3px);color:#fff}
.fsoc.coral:hover{background:var(--coral);border-color:var(--coral)}
.fsoc.teal:hover{background:var(--teal);border-color:var(--teal)}
.fdisc{font-size:12.5px;color:#7a858c;line-height:1.6;max-width:80ch}
.fbottom{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:22px;font-size:12.5px;color:#7a858c;line-height:1.6}
.fmeta{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin-top:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:#8a949b}
.fmeta a:hover{color:#fff}
.fmeta .copy{margin-left:auto}

/* ---------- toast (shared; base state also inlined in the template) ---------- */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(140%);background:var(--ink);color:#fff;
       padding:14px 22px;border-radius:999px;font-weight:600;font-size:14px;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:50;display:flex;gap:9px;align-items:center}
#toast.show{transform:translateX(-50%) translateY(0)}

/* ---------- shared chrome responsive ---------- */
@media(max-width:780px){.fmeta .copy{margin-left:0}}
@media(max-width:560px){.utility{display:none}}

.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}