/* ============================================================================
   Celio Health — Seed design system
   Apothecary greenhouse at dawn: warm parchment canvas, a single forest green
   carrying text/buttons/borders, lime-sprout reserved for badges + the
   announcement bar, flat & unshadowed with 1px hairlines, pills everywhere,
   whisper-light (300) editorial headlines. Class names unchanged from prior
   builds so every page/JS keeps working.
   Fonts: Inter (Seed Sans substitute), IBM Plex Mono (Seed Sans Mono substitute).
   ========================================================================== */

:root {
  /* Seed colors */
  --color-forest:#1c3a13; --color-lime:#d3fa99; --color-parchment:#fcfcf7;
  --color-stone:#eeeee9; --color-sage:#c4c7c4; --color-quiet:#b3b3b3; --color-black:#000;
  --color-forest-hover:#27501b;
  --color-muted:#5d6b56;                  /* muted green-gray for secondary copy */
  --color-hairline:rgba(28,58,19,0.16);   /* 1px forest hairline */
  --color-hairline-strong:rgba(28,58,19,0.32);

  /* Back-compat aliases (old token names → Seed equivalents) */
  --color-obsidian:#1c3a13; --color-ink:#1c3a13; --color-carbon:#1c3a13; --color-graphite:#1c3a13;
  --color-slate:#5d6b56; --color-steel:#5d6b56; --color-ash:#8a948660; --color-pebble:rgba(28,58,19,0.16);
  --color-fog:#eeeee9; --color-mist:#fcfcf7; --color-snow:#fcfcf7;
  --color-warm-cream:#eeeee9; --color-paper-white:#fcfcf7; --color-mist-gray:#eeeee9;
  --color-ember:#d3fa99; --color-orchid:#d3fa99; --color-pollen-yellow:#d3fa99;
  --color-sky-blue:#1c3a13; --color-pollen:#d3fa99;

  /* Fonts */
  --font-sans:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-switzer:var(--font-sans); --font-geist:var(--font-sans); --font-pt-mono:var(--font-mono);

  /* Type scale */
  --text-caption:10px; --text-body-sm:14px; --text-body:16px; --text-subheading:18px;
  --text-heading-sm:24px; --text-heading:32px; --text-heading-lg:40px; --text-display:48px;

  /* Spacing */
  --s4:4px; --s8:8px; --s10:8px; --s12:12px; --s16:16px; --s20:20px; --s24:24px;
  --s28:28px; --s32:32px; --s40:40px; --s48:48px; --s64:64px; --s80:80px; --s120:120px;

  /* Radius */
  --r-input:8px; --r-card:16px; --r-compact:16px; --r-large:32px; --r-hero:32px;
  --r-pill:9999px; --r-badge:9999px; --r-icon:9999px; --r-nav:9999px;

  --page-max:1200px;
}

/* ---- Reset ---- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; touch-action:manipulation; }
body {
  font-family:var(--font-sans);
  background:var(--color-parchment);
  color:var(--color-forest);
  font-size:var(--text-body);
  line-height:1.4;
  letter-spacing:-0.025em;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input,select,textarea { font-family:inherit; font-size:var(--text-body); }
ul { list-style:none; }

/* ---- Layout helpers ---- */
.wrap { max-width:var(--page-max); margin:0 auto; padding:0 var(--s48); }
@media (max-width:640px){ .wrap{ padding:0 var(--s24);} }
.section { padding:var(--s64) 0; }
.section--tight { padding:var(--s48) 0; }
.section--warm { background:var(--color-stone); }
.center { text-align:center; }
.muted { color:var(--color-muted); }
.stack > * + * { margin-top:var(--s16); }
.grid { display:grid; gap:var(--s24); }
.cols-2 { grid-template-columns:repeat(2,1fr); }
.cols-3 { grid-template-columns:repeat(3,1fr); }
.cols-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:960px){ .cols-3,.cols-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .cols-2,.cols-3,.cols-4{grid-template-columns:1fr;} }

/* ---- Typography ---- */
h1,h2,h3,h4 { font-family:var(--font-sans); color:var(--color-forest); font-weight:300; line-height:1.1; letter-spacing:-0.03em; }
.display { font-size:var(--text-display); line-height:1; font-weight:300; letter-spacing:-0.03em; color:var(--color-forest); }
.display-sm { font-size:var(--text-heading-lg); line-height:1.1; font-weight:300; letter-spacing:-0.03em; color:var(--color-forest); }
.h-lg { font-size:var(--text-heading-lg); line-height:1.1; font-weight:300; letter-spacing:-0.03em; }
.h { font-size:var(--text-heading); line-height:1.2; font-weight:300; letter-spacing:-0.025em; }
.h-sm { font-size:var(--text-heading-sm); line-height:1.17; font-weight:400; letter-spacing:-0.02em; }
.sub { font-family:var(--font-sans); font-size:var(--text-body-lg); line-height:1.4; font-weight:400; letter-spacing:-0.02em; color:var(--color-forest); }
.accent-word { color:inherit; }
/* eyebrow / caption / labels: mono clinical annotation */
.eyebrow { display:inline-block; font-family:var(--font-mono); font-size:12px; letter-spacing:0.015em;
  text-transform:uppercase; color:var(--color-forest); }
.caption { font-family:var(--font-mono); font-size:var(--text-caption); letter-spacing:0.015em; text-transform:uppercase; color:var(--color-muted); }
@media (max-width:760px){
  .display{font-size:36px;} .display-sm{font-size:30px;} .h-lg{font-size:30px;} .h{font-size:26px;}
}

/* ---- Buttons (pill 9999px) ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s8);
  font-family:var(--font-sans); font-size:var(--text-body-sm); font-weight:500; letter-spacing:-0.02em;
  border-radius:var(--r-pill); padding:10px 18px; transition:background .2s ease, border-color .2s ease; white-space:nowrap; }
.btn--primary { background:var(--color-forest); color:var(--color-parchment); }
.btn--primary:hover { background:var(--color-forest-hover); }
/* secondary / ghost: parchment surface, 1px forest border pill */
.btn--ghost { background:var(--color-parchment); color:var(--color-forest); border:1px solid var(--color-forest); }
.btn--ghost:hover { background:var(--color-stone); }
/* button embedded on a forest-reverse section: filled parchment pill */
.btn--dark-panel { background:var(--color-parchment); color:var(--color-forest); border-radius:var(--r-pill); padding:10px 18px; }
.btn--dark-panel:hover { background:var(--color-lime); }
.btn--sm { padding:8px 14px; font-size:var(--text-body-sm); }
.btn--block { display:flex; width:100%; }
.btn[disabled]{ background:var(--color-quiet); color:var(--color-parchment); border-color:transparent; cursor:not-allowed; }

/* ---- Badges / tags (pill) ---- */
.badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:12px;
  letter-spacing:0.01em; border-radius:var(--r-pill); padding:5px 11px; }
.badge--dark { background:var(--color-forest); color:var(--color-parchment); }
.badge--outline { background:transparent; color:var(--color-forest); border:1px solid var(--color-forest); }
.badge--ember { background:var(--color-lime); color:var(--color-forest); }   /* lime: badges only */

/* ---- Cards (flat, hairline borders, 16px) ---- */
.card { background:var(--color-parchment); border:1px solid var(--color-hairline); border-radius:var(--r-card); padding:var(--s24); }
.card--muted { background:var(--color-stone); border-radius:var(--r-card); padding:var(--s24); }
/* repurposed: forest-canopy REVERSE section (the system's dark feature surface) */
.card--dark { background:var(--color-forest); color:var(--color-parchment); border-radius:var(--r-large); padding:var(--s48); }
.card--dark h1,.card--dark h2,.card--dark h3 { color:var(--color-parchment); }
.card--dark .badge--outline { color:var(--color-parchment); border-color:rgba(252,252,247,0.5); }
.card--dark .muted { color:var(--color-sage); }

/* ============================================================================
   Announcement bar + Floating pill navigation
   ========================================================================== */
.announce { background:var(--color-lime); color:var(--color-forest); text-align:center;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.015em; padding:6px 16px; }
.nav { position:sticky; top:0; z-index:50; background:var(--color-parchment); padding:16px 0 8px; }
.nav__inner { max-width:var(--page-max); margin:0 auto; padding:8px 16px 8px 20px;
  display:flex; align-items:center; gap:var(--s24);
  border:1px solid var(--color-forest); border-radius:var(--r-pill); background:var(--color-parchment); }
@media (min-width:641px){ .nav__inner{ margin:0 auto; max-width:calc(var(--page-max) - 32px);} }
.brand { display:flex; align-items:center; gap:6px; font-family:var(--font-sans); font-weight:400;
  font-size:20px; letter-spacing:-0.03em; color:var(--color-forest); }
.brand__flower { width:9px; height:9px; border-radius:50%; background:var(--color-lime);
  border:1px solid var(--color-forest); font-size:0; display:inline-block; }
.brand__mark { display:none; }
.nav__links { display:flex; align-items:center; gap:var(--s12); margin-left:var(--s16); }
.nav__link { font-family:var(--font-sans); font-size:var(--text-body-sm); font-weight:400; letter-spacing:-0.02em;
  padding:7px 14px; border-radius:var(--r-pill); color:var(--color-forest); transition:background .2s ease; }
.nav__link:hover { background:var(--color-stone); }
.nav__spacer { flex:1; }
.nav__actions { display:flex; align-items:center; gap:var(--s10); }
.nav__cart { position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:var(--r-pill); border:1px solid var(--color-forest); background:var(--color-parchment);
  font-family:var(--font-sans); font-size:var(--text-body-sm); letter-spacing:-0.02em; color:var(--color-forest); }
.nav__cart:hover { background:var(--color-stone); }
.cart-count { background:var(--color-forest); color:var(--color-parchment); border-radius:var(--r-pill);
  min-width:18px; height:18px; padding:0 5px; font-family:var(--font-mono); font-size:10px; display:inline-grid; place-items:center; }
.cart-count[data-empty="1"] { display:none; }

/* Dropdown (flat, bordered) */
.has-dropdown { position:relative; }
.dropdown { position:absolute; top:calc(100% + 8px); left:0; min-width:230px; background:var(--color-parchment);
  border:1px solid var(--color-forest); border-radius:var(--r-card); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(4px); transition:all .18s ease; }
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown { opacity:1; visibility:visible; transform:none; }
.dropdown a { display:block; padding:9px 12px; border-radius:var(--r-pill); font-family:var(--font-sans); font-size:var(--text-body-sm); }
.dropdown a:hover { background:var(--color-stone); }

.nav__toggle { display:none; position:relative; font-size:24px; line-height:1; padding:4px 10px; border-radius:var(--r-pill); color:var(--color-forest); }
/* cart-count badge on the hamburger (only meaningful on mobile, where the toggle shows) */
.nav__toggle-badge { position:absolute; top:-3px; right:-3px; background:var(--color-forest); color:var(--color-parchment);
  border-radius:9999px; min-width:17px; height:17px; padding:0 4px; font-family:var(--font-mono); font-size:10px;
  display:inline-grid; place-items:center; line-height:1; }
.nav__toggle-badge[data-empty="1"] { display:none; }
@media (max-width:1040px){
  /* keep the floating pill off the screen edges */
  .nav { padding-left:16px; padding-right:16px; }
  .nav__inner { gap:var(--s12); padding-right:22px; }
  /* cart lives in the menu on mobile; the inline cart item only shows in the dropdown */
  .nav__menu-cart { order:99; }
  /* mobile dropdown menu — roomy, stacked */
  .nav__links { display:none; position:absolute; top:calc(100% + 8px); left:16px; right:16px; flex-direction:column;
    align-items:stretch; gap:6px; margin:0; background:var(--color-parchment); border:1px solid var(--color-forest);
    border-radius:var(--r-card); padding:14px; }
  .nav__links.open { display:flex; }
  .nav__links > li > .nav__link { display:block; padding:13px 14px; border-radius:var(--r-card); }
  .nav__links .has-dropdown .dropdown { position:static; opacity:1; visibility:visible; transform:none;
    border:none; padding:2px 0 6px 14px; min-width:auto; }
  .nav__links .dropdown a { padding:11px 14px; }
  .nav__menu-cart { border-top:1px solid var(--color-hairline); margin-top:6px; padding-top:8px; }
  .nav__menu-cart .cart-count { background:var(--color-forest); color:var(--color-parchment); }
  .nav__toggle { display:inline-block; }
}

/* ============================================================================
   Full-bleed background video hero (home page)
   Parchment text over a forest-canopy scrim; left-aligned per Seed.
   ========================================================================== */
.vhero { position:relative; display:flex; align-items:center; overflow:hidden;
  min-height:clamp(520px, 84vh, 820px); background:var(--color-forest); }
.vhero__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.vhero__scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(28,58,19,0.85) 0%, rgba(28,58,19,0.55) 44%, rgba(28,58,19,0.12) 100%),
    linear-gradient(0deg, rgba(28,58,19,0.55) 0%, rgba(28,58,19,0) 38%); }
.vhero__inner { position:relative; z-index:2; width:100%; padding-top:var(--s64); padding-bottom:var(--s64); }
.vhero__content { max-width:620px; }
.vhero__eyebrow { display:inline-block; font-family:var(--font-mono); font-size:12px; letter-spacing:0.015em;
  text-transform:uppercase; color:var(--color-parchment); border:1px solid rgba(252,252,247,0.5);
  border-radius:var(--r-pill); padding:5px 12px; }
.vhero__title { font-family:var(--font-sans); font-weight:300; font-size:var(--text-display); line-height:1;
  letter-spacing:-0.03em; color:var(--color-parchment); margin:var(--s20) 0 var(--s16); }
.vhero__sub { font-size:var(--text-body-lg); line-height:1.4; letter-spacing:-0.02em;
  color:rgba(252,252,247,0.92); max-width:520px; }
.vhero__cta { display:flex; align-items:center; gap:var(--s20); margin-top:var(--s28); flex-wrap:wrap; }
.vhero__ghost { font-family:var(--font-sans); font-weight:400; color:var(--color-parchment); text-decoration:underline; }
.vhero__ghost:hover { color:var(--color-lime); }
.vhero__stats { display:flex; gap:var(--s40); margin-top:var(--s40); flex-wrap:wrap; }
.vhero__num { font-family:var(--font-sans); font-weight:300; font-size:var(--text-heading); color:var(--color-parchment); letter-spacing:-0.03em; line-height:1; }
.vhero__label { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.015em; color:rgba(252,252,247,0.78); margin-top:6px; }
.vhero__sound { position:absolute; z-index:3; right:24px; bottom:24px; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.015em; color:var(--color-forest);
  background:var(--color-parchment); border-radius:var(--r-pill); padding:8px 14px; }
.vhero__sound:hover { background:var(--color-lime); }
@media (max-width:760px){
  .vhero { min-height:clamp(460px, 78vh, 680px); }
  .vhero__title { font-size:34px; }
  .vhero__scrim { background:linear-gradient(0deg, rgba(28,58,19,0.85) 0%, rgba(28,58,19,0.45) 60%, rgba(28,58,19,0.25) 100%); }
  .vhero__stats { gap:var(--s24); }
  .vhero__num { font-size:var(--text-heading-sm); }
}

/* ============================================================================
   Hero — editorial, left-aligned, parchment (legacy two-column; kept for reuse)
   ========================================================================== */
.hero { padding:var(--s64) 0; }
.hero__grid { display:grid; grid-template-columns:1.15fr 0.85fr; gap:var(--s48); align-items:center; }
@media (max-width:900px){ .hero__grid { grid-template-columns:1fr; gap:var(--s32); } }
.hero__panel { background:var(--color-stone); border-radius:var(--r-large); padding:var(--s32); }
.hero__cta-row { display:flex; gap:var(--s12); flex-wrap:wrap; margin-top:var(--s24); }
.hero__stats { display:flex; gap:var(--s48); margin-top:var(--s32); flex-wrap:wrap; }
.stat__num { font-family:var(--font-sans); font-size:var(--text-heading-lg); font-weight:300; color:var(--color-forest); line-height:1; letter-spacing:-0.03em; }
.stat__label { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.015em; color:var(--color-muted); margin-top:8px; }

/* Email capture row */
.capture { display:flex; gap:var(--s8); background:var(--color-parchment); border:1px solid var(--color-forest);
  border-radius:var(--r-pill); padding:6px; max-width:460px; }
.capture input { flex:1; border:none; background:transparent; border-radius:var(--r-pill);
  padding:10px 16px; color:var(--color-forest); outline:none; letter-spacing:-0.02em; }
.capture input::placeholder { color:var(--color-muted); }

/* ============================================================================
   Product cards / grid
   ========================================================================== */
.shop-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s16); margin-bottom:var(--s32); flex-wrap:wrap; }
.toolbar { display:flex; gap:var(--s8); flex-wrap:wrap; align-items:center; margin-bottom:var(--s24); }
.toolbar input,.toolbar select { border:1px solid var(--color-hairline-strong); background:var(--color-parchment);
  border-radius:var(--r-input); padding:11px 14px; color:var(--color-forest); outline:none; letter-spacing:-0.02em; }
.toolbar input:focus,.toolbar select:focus { border-color:var(--color-forest); }
.toolbar__search { flex:1; min-width:200px; }

.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s24); }
@media (max-width:960px){ .product-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .product-grid{grid-template-columns:1fr;} }

.pcard { background:var(--color-parchment); border:1px solid var(--color-hairline); border-radius:var(--r-card); padding:var(--s24);
  display:flex; flex-direction:column; gap:var(--s12); min-height:100%; transition:border-color .2s ease, background .2s ease; }
.pcard:hover { border-color:var(--color-forest); }
.pcard[data-href] { cursor:pointer; }
.pcard[data-href]:focus-visible { outline:2px solid var(--color-forest); outline-offset:2px; }
.pcard__top { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s8); }
.pcard__title { font-family:var(--font-sans); font-size:var(--text-heading-sm); font-weight:400; color:var(--color-forest); line-height:1.17; letter-spacing:-0.02em; }
.pcard__title a:hover { color:var(--color-forest-hover); }
.pcard__desc { font-size:var(--text-body-sm); color:var(--color-muted); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pcard__foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:var(--s12); padding-top:var(--s8); }
.price { font-family:var(--font-sans); font-size:var(--text-heading-sm); font-weight:400; color:var(--color-forest); letter-spacing:-0.02em; }
.price small { font-family:var(--font-mono); font-size:var(--text-body-sm); font-weight:400; color:var(--color-muted); }
.pcard__includes { font-family:var(--font-mono); font-size:11px; color:var(--color-muted); text-transform:uppercase; letter-spacing:0.015em; }

/* decorative tile uses the lime wash */
.pcard--orchid { background:var(--color-lime); border-color:var(--color-forest); }
.pcard--orchid .pcard__title,.pcard--orchid .pcard__desc,.pcard--orchid .price { color:var(--color-forest); }

/* ============================================================================
   Category sections
   ========================================================================== */
.catblock + .catblock { margin-top:var(--s48); }
.catblock__head { display:flex; align-items:center; gap:var(--s12); margin-bottom:var(--s20); }
.catblock__icon { width:44px; height:44px; border-radius:var(--r-pill);
  background:var(--color-stone); display:grid; place-items:center; font-size:20px; }

/* ---- Feature cards ---- */
.feature { background:var(--color-parchment); border:1px solid var(--color-hairline); border-radius:var(--r-card); padding:var(--s24); }
.feature__icon { width:44px; height:44px; border-radius:var(--r-pill);
  background:var(--color-forest); color:var(--color-parchment); display:grid; place-items:center;
  font-family:var(--font-sans); font-weight:300; font-size:18px; margin-bottom:var(--s16); }
.feature h3 { font-size:var(--text-heading-sm); margin-bottom:var(--s8); font-weight:400; }
.feature p { color:var(--color-muted); font-size:var(--text-body-sm); line-height:1.45; }

/* ---- Forest-reverse band rows (problem panel etc.) ---- */
.problem-row { display:flex; gap:var(--s12); align-items:flex-start; padding:var(--s12) 0; }
.problem-row__dot { width:12px; height:12px; border-radius:50%; background:var(--color-lime); flex:none; margin-top:7px; }
.problem-row p { font-size:var(--text-body-lg); line-height:1.35; color:var(--color-sage); letter-spacing:-0.02em; }
.problem-row p strong { color:var(--color-parchment); font-weight:500; }

/* ============================================================================
   Cart / Checkout / Account
   ========================================================================== */
.split { display:grid; grid-template-columns:1.6fr 1fr; gap:var(--s24); align-items:start; }
@media (max-width:860px){ .split { grid-template-columns:1fr; } }

.line { display:flex; gap:var(--s16); padding:var(--s16) 0; border-bottom:1px solid var(--color-hairline); align-items:center; }
.line:last-child { border-bottom:none; }
.line__main { flex:1; }
.line__title { font-family:var(--font-sans); font-weight:400; color:var(--color-forest); letter-spacing:-0.02em; }
.line__meta { font-size:var(--text-body-sm); color:var(--color-muted); }
.qty { display:inline-flex; align-items:center; border:1px solid var(--color-hairline-strong); border-radius:var(--r-pill); overflow:hidden; }
.qty button { padding:6px 12px; font-size:16px; color:var(--color-forest); }
.qty span { padding:0 10px; min-width:28px; text-align:center; font-weight:400; }
.link-remove { font-family:var(--font-mono); font-size:12px; color:var(--color-muted); text-decoration:underline; }
.link-remove:hover { color:var(--color-forest); }

.summary { background:var(--color-stone); border-radius:var(--r-card); padding:var(--s24); position:sticky; top:96px; }
.summary__row { display:flex; justify-content:space-between; padding:8px 0; font-size:var(--text-body); }
.summary__row--total { border-top:1px solid var(--color-hairline-strong); margin-top:var(--s8); padding-top:var(--s16);
  font-family:var(--font-sans); font-weight:400; font-size:var(--text-heading-sm); letter-spacing:-0.02em; }

/* Forms */
.field { display:block; margin-bottom:var(--s16); }
.field label,.field span { display:block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.015em; color:var(--color-forest); margin-bottom:6px; }
.field input,.field select { width:100%; border:1px solid var(--color-hairline-strong); background:var(--color-parchment);
  border-radius:var(--r-input); padding:12px 16px; color:var(--color-forest); outline:none; letter-spacing:-0.02em; }
.field input:focus,.field select:focus { border-color:var(--color-forest); }
.form-note { font-size:var(--text-body-sm); color:var(--color-muted); }
.tabs { display:inline-flex; border:1px solid var(--color-forest); border-radius:var(--r-pill); padding:4px; margin-bottom:var(--s24); }
.tabs button { padding:9px 22px; border-radius:var(--r-pill); font-family:var(--font-sans); font-size:var(--text-body-sm);
  font-weight:500; letter-spacing:-0.02em; color:var(--color-forest); }
.tabs button.active { background:var(--color-forest); color:var(--color-parchment); }

.alert { border-radius:var(--r-card); padding:12px 16px; font-size:var(--text-body-sm); margin-bottom:var(--s16); }
.alert--err { background:#f3ece4; color:#7a3b1c; border:1px solid #e2cdbb; }
.alert--ok { background:var(--color-lime); color:var(--color-forest); }
.alert--info { background:var(--color-stone); color:var(--color-forest); }

/* Empty state */
.empty { text-align:center; padding:var(--s64) var(--s24); }
.empty__icon { font-size:44px; margin-bottom:var(--s16); }

/* ============================================================================
   FAQ / accordion (flat, hairline)
   ========================================================================== */
.faq { background:var(--color-parchment); border:1px solid var(--color-hairline); border-radius:var(--r-card); overflow:hidden; }
.faq details { border-bottom:1px solid var(--color-hairline); }
.faq details:last-child { border-bottom:none; }
.faq summary { padding:var(--s20) var(--s24); font-family:var(--font-sans); font-weight:400; font-size:var(--text-body-lg);
  letter-spacing:-0.02em; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:var(--s16); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:22px; color:var(--color-muted); font-weight:300; }
.faq details[open] summary::after { content:"–"; }
.faq p { padding:0 var(--s24) var(--s24); color:var(--color-muted); line-height:1.45; }

/* ============================================================================
   Logo strip / marquee
   ========================================================================== */
.strip { overflow:hidden; padding:var(--s24) 0; background:var(--color-stone); }
.strip__track { display:flex; gap:var(--s48); align-items:center; width:max-content; animation:scrollx 36s linear infinite; }
.strip__item { font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.015em;
  color:var(--color-muted); white-space:nowrap; }
@keyframes scrollx { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ============================================================================
   Footer — pale stone band, forest text
   ========================================================================== */
.footer { background:var(--color-stone); color:var(--color-forest); margin-top:var(--s80); padding:var(--s64) 0 var(--s40); }
.footer a { color:var(--color-forest); }
.footer a:hover { color:var(--color-forest-hover); text-decoration:underline; }
.footer__grid { display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:var(--s32); }
@media (max-width:900px){ .footer__grid { grid-template-columns:1fr 1fr; } }
.footer h4 { font-family:var(--font-mono); color:var(--color-forest); font-size:11px; text-transform:uppercase;
  letter-spacing:0.015em; margin-bottom:var(--s16); font-weight:400; }
.footer li { margin-bottom:10px; font-size:var(--text-body-sm); }
.footer__brand .brand { color:var(--color-forest); margin-bottom:var(--s12); }
.footer__bottom { border-top:1px solid var(--color-hairline-strong); margin-top:var(--s40); padding-top:var(--s24);
  display:flex; justify-content:space-between; gap:var(--s16); flex-wrap:wrap; font-family:var(--font-mono); font-size:11px; color:var(--color-muted); }

/* ---- Toast ---- */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(120%);
  background:var(--color-forest); color:var(--color-parchment); padding:12px 22px; border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.015em; z-index:200; transition:transform .3s ease; }
.toast.show { transform:translateX(-50%) translateY(0); }

/* ---- Page header band ---- */
.pagehead { padding:var(--s64) 0 var(--s32); }
.pagehead .display-sm { margin-bottom:var(--s12); }
.breadcrumb { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.015em; color:var(--color-muted); margin-bottom:var(--s16); }
.breadcrumb a:hover { color:var(--color-forest); }

/* prose for legal pages */
.prose { background:var(--color-parchment); border:1px solid var(--color-hairline); border-radius:var(--r-card); padding:var(--s48); }
.prose h2 { font-size:var(--text-heading); margin:var(--s32) 0 var(--s12); font-weight:300; }
.prose h3 { font-size:var(--text-heading-sm); margin:var(--s24) 0 var(--s8); font-weight:400; }
.prose p,.prose li { color:var(--color-forest); line-height:1.55; margin-bottom:var(--s12); }
.prose ul { padding-left:var(--s24); list-style:disc; }
.prose a { color:var(--color-forest); text-decoration:underline; }
.prose > *:first-child { margin-top:0; }