/* =====================================================================
   WiseDine — marketing site styles
   ---------------------------------------------------------------------
   Organization:
     1. Design tokens (:root)        — single source of truth for theme
     2. Reset & base
     3. Utilities (container, icon mask, visually-hidden, reveal)
     4. Buttons
     5. Header / nav + mobile drawer
     6. Hero
     7. Footer
     8. Reduced-motion overrides
   THEMING: every color, font, radius, shadow and motion value is a token
   in :root. To re-theme, edit the tokens — never hard-code values below.
   ===================================================================== */

/* ============================ 1. TOKENS ============================ */
:root{
  /* ----- Brand colors (edit here to re-theme) ----- */
  --brand-green:        #009068;  /* sampled from the real logo */
  --brand-green-dark:   #00674A;  /* hover / pressed */
  --brand-green-bright: #12B488;  /* vivid highlight / gradient end */
  --mint-50:            #EAF6F1;  /* soft surface / pill bg */
  --mint-100:           #D7EDE5;
  --color-bg:           #FFFFFF;
  --color-on-brand:     #FFFFFF;  /* text/icons on a green fill */
  --color-ink:          #0A0A0A;  /* main text = black */
  --color-ink-soft:     #44524B;  /* secondary copy */
  --color-line:         #E6EDE9;  /* hairlines, use sparingly */

  /* ----- Alert accent (allergen "avoid" flagging ONLY) -----
     A deep amber used sparingly to mark safety-critical allergens so they read
     as DISTINCT from brand-green "safe/preference" tags. Contrast is carried by
     dark amber text/stroke on white or on the soft amber tint (NOT white-on-
     amber): #B45309 ≈ 5.9:1 on white and ≈ 5.3:1 on --alert-amber-surface, both
     clearing WCAG AA for normal text. Reserved for the allergy flag — not a
     general decorative color. */
  --alert-amber:         #B45309;
  --alert-amber-surface: #FDF1E3;
  --alert-amber-line:    #F4D9BC;

  /* ----- Hero (deep forest-green brand moment) -----
     A darker, desaturated tonal SIBLING of --brand-green (#009068): same green
     family, dialed toward pine so the bold hero reads as related to the brand
     while the rest of the page stays white. The hero bg is a subtle diagonal
     gradient (lighter/tealer top-left → darker bottom-right); --hero-bg is the
     canonical flat fallback. To re-tint the whole hero, edit --hero-bg and the
     two gradient stops here — nothing downstream hard-codes these. */
  --hero-bg:        #23503E;                 /* deep forest green — canonical hero bg (pixel-matched to reference) */
  --hero-bg-from:   #25543F;                 /* gradient lighter end (top-right ~#245240 in ref) */
  --hero-bg-to:     #1F4A37;                 /* gradient darker end (bottom-left ~#214D3C in ref) */
  --hero-ink:       #FFFFFF;                 /* headings on the green */
  --hero-ink-soft:  rgba(255,255,255,.82);   /* lead / body on the green */
  --hero-accent:    #8FE6C4;                 /* bright mint accent word — pops on the green, clears AA */
  --hero-surface:   rgba(255,255,255,.12);   /* translucent light pill bg (trust pills) */
  --hero-surface-line: rgba(255,255,255,.22);/* hairline on translucent pills */
  /* eyebrow recolor for the dark band: light label + solid bright-mint bar
     (the gradient's contrast would dip on the dark fill, so use the flat
     --hero-accent which is tuned to pop on the forest green) */
  --eyebrow-fg-hero:  var(--hero-ink);
  --eyebrow-bar-hero: var(--hero-accent);

  /* ----- Font families (change these to re-theme type) ----- */
  --ff-display: "Poppins", system-ui, sans-serif;
  --ff-body:    "Inter", system-ui, sans-serif;
  --ff-quote:   "Spectral", Georgia, "Times New Roman", serif;  /* elegant italic for testimonials */
  /* role aliases — reference these, never the families directly */
  --font-tagline: var(--ff-display);
  --font-heading: var(--ff-display);
  --font-body:    var(--ff-body);
  --font-ui:      var(--ff-body);
  --font-eyebrow: var(--ff-body);
  --font-quote:   var(--ff-quote);

  /* ----- Type scale (fluid) ----- */
  --fs-h1:      clamp(2.25rem, 1.35rem + 4.0vw, 3.85rem);
  /* shared SECTION-heading scale — every section <h2> references this single
     token so the whole page keeps one consistent fluid heading rhythm. (It was
     previously re-declared per section as an identical clamp; unified here so a
     future change stays in lockstep across all sections.) */
  --fs-h2:      clamp(1.9rem, 1.2rem + 3vw, 2.9rem);
  --fs-lead:    clamp(1.05rem, 0.92rem + 0.55vw, 1.3rem);
  --fs-body:    1rem;
  --fs-eyebrow: 0.78rem;   /* small by design — presence comes from weight + tracking, not size */
  --fs-ui:      0.95rem;
  --lh-tight:   1.08;
  --lh-body:    1.6;

  /* ----- Section kicker / eyebrow -----
     The label above each section heading. NOT a pill — an uppercase, tightly
     tracked DISPLAY-font (Poppins) micro-heading led by a short brand accent
     bar. Theme all eyebrows from these four tokens.
       --eyebrow-fg   = label text color (AA on white via --brand-green-dark)
       --eyebrow-bar  = the leading accent bar (brand→mint gradient = the brand's
                        signature green→mint language; reads as a graphic so the
                        contrast floor is 3:1, which it clears)
       --eyebrow-track= letter-spacing; --eyebrow-bar-w = bar length */
  --eyebrow-fg:    var(--brand-green-dark);
  --eyebrow-bar:   linear-gradient(90deg, var(--brand-green), var(--brand-green-bright));
  --eyebrow-track: .16em;
  --eyebrow-bar-w: 1.85rem;

  /* ----- Shape (curvy) ----- */
  --radius-pill: 999px;
  --radius-lg:   28px;
  --radius-md:   18px;
  --radius-sm:   12px;
  --shadow-soft: 0 22px 50px -24px rgba(0,144,104,.30);
  --shadow-card: 0 10px 30px -16px rgba(10,10,10,.18);
  --shadow-header: 0 10px 30px -18px rgba(10,10,10,.22);

  /* ----- Decorative section glow -----
     Each content section carries one faint brand glow in a different position
     (so the page has a continuous brand atmosphere without repeating). They all
     reference this single intensity token so NO section's glow reads louder or
     fainter than the others — one consistent, subtle ambience top to bottom. */
  --glow-opacity: .09;

  /* ----- Motion ----- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .32s;

  /* ----- Spacing (4px rhythm) ----- */
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: clamp(3rem, 1.6rem + 6vw, 6rem);

  /* ----- Layout ----- */
  --maxw: 1180px;
  --gutter: clamp(1.1rem, 0.6rem + 2vw, 2rem);
  --header-h: 88px;   /* sized so the 50px logo keeps ~19px breathing room top/bottom */
}

/* ============================ 2. RESET ============================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* keep in-page anchors clear of the fixed header */
:target{ scroll-margin-top: calc(var(--header-h) + 1rem); }

body{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* guard against any decorative overflow */
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
ul{ list-style:none; }

h1,h2,h3{ font-family: var(--font-heading); line-height: var(--lh-tight); }

/* Visible, on-brand focus ring for keyboard users everywhere */
:focus-visible{
  outline: 3px solid var(--brand-green);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* =========================== 3. UTILITIES ========================== */
.container{
  width:100%;
  max-width: var(--maxw);
  margin-inline:auto;
  padding-inline: var(--gutter);
}

/* Screen-reader-only (kept for the skip link when not focused) */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* Skip-to-content link — appears on focus */
.skip-link{
  position:absolute;
  left:1rem; top:-100%;
  z-index:1000;
  background: var(--brand-green);
  color: var(--color-on-brand);
  padding:.7rem 1.1rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-weight:600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus{ top:1rem; }

/* Monochrome icon via CSS mask — inherits `color`, so tint with color.
   NOTE: url() inside a custom property resolves relative to the stylesheet
   that *substitutes* it (this file, /css/), NOT the HTML document. So every
   icon path here is written relative to /css/ as ../assets/icons/…  and we
   define one modifier class per icon (rather than inline --i in the HTML)
   so resolution is consistent everywhere the mask is applied. */
.icon{
  display:inline-block;
  width:1.25em; height:1.25em;
  flex:0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
}
/* icon registry — change a path here to swap an icon globally */
.icon--arrow-right { --i: url("../assets/icons/arrow-right.svg"); }
.icon--play        { --i: url("../assets/icons/play.svg"); }
.icon--menu        { --i: url("../assets/icons/menu.svg"); }
.icon--close       { --i: url("../assets/icons/close.svg"); }
.icon--ferpa       { --i: url("../assets/icons/ferpa.svg"); }
.icon--wearables   { --i: url("../assets/icons/wearables.svg"); }
.icon--dining-teams{ --i: url("../assets/icons/dining-teams.svg"); }
.icon--check       { --i: url("../assets/icons/check.svg"); }
.icon--user        { --i: url("../assets/icons/user.svg"); }
.icon--grad-cap    { --i: url("../assets/icons/grad-cap.svg"); }
.icon--parents     { --i: url("../assets/icons/parents.svg"); }
.icon--wellness    { --i: url("../assets/icons/wellness.svg"); }
.icon--athlete     { --i: url("../assets/icons/athlete.svg"); }
.icon--institution { --i: url("../assets/icons/institution.svg"); }
.icon--sync        { --i: url("../assets/icons/sync.svg"); }
.icon--spark       { --i: url("../assets/icons/spark.svg"); }
.icon--trend       { --i: url("../assets/icons/trend.svg"); }
.icon--toggle      { --i: url("../assets/icons/toggle.svg"); }
.icon--meal        { --i: url("../assets/icons/meal.svg"); }
.icon--leaf        { --i: url("../assets/icons/leaf.svg"); }
.icon--target      { --i: url("../assets/icons/target.svg"); }
.icon--pin         { --i: url("../assets/icons/pin.svg"); }
.icon--book        { --i: url("../assets/icons/book.svg"); }
.icon--bars        { --i: url("../assets/icons/bars.svg"); }
.icon--search      { --i: url("../assets/icons/search.svg"); }
.icon--chevron-down{ --i: url("../assets/icons/chevron-down.svg"); }
.icon--users       { --i: url("../assets/icons/users.svg"); }
.icon--alert       { --i: url("../assets/icons/alert.svg"); }
.icon--camera      { --i: url("../assets/icons/camera.svg"); }

/* Scroll-reveal: initial hidden state; JS adds .is-visible to play it */
.reveal{
  opacity:0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible{ opacity:1; transform:none; }

/* ============================ 4. BUTTONS =========================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight:600;
  line-height:1;
  padding:.95em 1.6em;
  border:2px solid transparent;
  border-radius: var(--radius-pill);
  white-space:nowrap;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn .icon{ width:1.15em; height:1.15em; }

/* Primary — solid green, white text */
.btn-primary{
  background: var(--brand-green);
  color: var(--color-on-brand);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover{
  background: var(--brand-green-dark);
  transform: translateY(-2px);
}
.btn-primary:active{ transform: translateY(0); }
/* nudge the arrow on hover for a touch of life */
.btn-primary:hover .icon-arrow{ transform: translateX(3px); }
.icon-arrow{ transition: transform var(--dur) var(--ease); }

/* Ghost — green outline, fills softly on hover */
.btn-ghost{
  background: transparent;
  color: var(--brand-green-dark);
  border-color: var(--mint-100);
}
.btn-ghost:hover{
  background: var(--mint-50);
  border-color: var(--brand-green);
  transform: translateY(-2px);
}
.btn-ghost:active{ transform: translateY(0); }

/* ========================= 5. HEADER / NAV =========================
   The fixed header lives in TWO states:
     • DEFAULT (top of page, sitting over the deep-green hero): a clean,
       transparent bar — no white plate, WHITE logo + WHITE nav links + white
       hamburger so it reads on the forest green.
     • .is-scrolled (JS adds it once scrolled past the hero, over the white
       body): the original frosted-white bar — green logo, dark links, soft
       shadow.
   Everything that differs between the two transitions on --dur so the swap is
   smooth as you scroll off the hero. */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;            /* top:0; left:0; right:0 */
  z-index: 100;
  /* over-hero: no plate — let the green show through */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease);
}
/* JS toggles this once the page is scrolled — frosted white bar + elevation */
.site-header.is-scrolled{
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--color-line);
  box-shadow: var(--shadow-header);
}
/* While the mobile drawer is open we are visually "in" the white drawer even at
   the top of the page, so borrow the scrolled bar's frosted plate behind it —
   keeps the bar legible against the white panel rather than floating on green.
   (The drawer itself is white; this just backs the header strip above it.) */
body.nav-open .site-header:not(.is-scrolled){
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-5);
  height: var(--header-h);
}

/* --- Brand / logo --- */
.brand{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  /* logo PNG has built-in whitespace; pull left slightly to optically align */
  margin-left:-2px;
}
.brand-logo{
  height:50px;            /* wide ~2.45:1 wordmark → ~123px wide */
  width:auto;
  transform-origin: left center; /* grow rightward so the left edge stays put */
  /* Over the hero the green PNG is knocked out to solid white; on scroll it
     reverts to its real green. Transition the filter so the recolor eases with
     the bar. (brightness(0) → all black, invert(1) → all white.) */
  filter: brightness(0) invert(1);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
/* scrolled (over white): show the real green logo */
.site-header.is-scrolled .brand-logo,
/* drawer open at the top: the bar is white now, so use the green logo too */
body.nav-open .brand-logo{ filter: none; }
/* Laptop / desktop only (hover-capable + fine pointer): gently magnify the
   logo on cursor hover. Scoped out of touch devices so it can't stick on tap. */
@media (hover: hover) and (pointer: fine){
  .brand:hover .brand-logo{ transform: scale(1.06); }
}

/* --- Desktop nav list --- */
.nav-list{
  display:flex;
  align-items:center;
  gap: clamp(.4rem, .2rem + 1vw, 1.4rem);
  margin-inline:auto;       /* center the links between logo and CTA */
}
.nav-link{
  position:relative;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight:500;
  color: var(--color-ink);
  padding:.5rem .25rem;
  transition: color var(--dur) var(--ease);
}
/* animated underline — grows from center on hover & keyboard focus */
.nav-link::after{
  content:"";
  position:absolute;
  left:50%; bottom:.15rem;
  width:0; height:2px;
  transform: translateX(-50%);
  background: var(--brand-green);
  border-radius: var(--radius-pill);
  transition: width var(--dur) var(--ease);
}
.nav-link:hover,
.nav-link:focus-visible{ color: var(--brand-green-dark); }
.nav-link:hover::after,
.nav-link:focus-visible::after{ width:100%; }

/* OVER THE HERO (default, not scrolled): white links with a white underline.
   Scoped to the desktop bar — inside the mobile drawer the links live on a
   white panel, so the drawer media query below keeps them dark regardless. */
.site-header:not(.is-scrolled) .nav-link{ color: var(--hero-ink); }
.site-header:not(.is-scrolled) .nav-link::after{ background: var(--hero-ink); }
.site-header:not(.is-scrolled) .nav-link:hover,
.site-header:not(.is-scrolled) .nav-link:focus-visible{ color: var(--hero-ink); }

.nav-cta{ flex:0 0 auto; }       /* desktop CTA in the header bar */

/* --- Hamburger (mobile only) --- */
.nav-toggle{
  display:none;                  /* shown < 860px via media query */
  align-items:center;
  justify-content:center;
  width:46px; height:46px;
  background: var(--mint-50);
  border:1px solid var(--color-line);
  border-radius: var(--radius-pill);
  color: var(--brand-green-dark);
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.nav-toggle:hover{ background: var(--mint-100); }
.nav-toggle:active{ transform: scale(.94); }
.nav-toggle .icon{ width:22px; height:22px; }

/* OVER THE HERO (default, not scrolled): translucent-light button + white icon
   so the hamburger reads cleanly on the green. While the drawer is OPEN the bar
   turns white (body.nav-open), so revert to the mint button + dark icon there
   even though the page may not be scrolled — the close icon then sits on white.*/
.site-header:not(.is-scrolled) .nav-toggle{
  background: var(--hero-surface);
  border-color: var(--hero-surface-line);
  color: var(--hero-ink);
}
.site-header:not(.is-scrolled) .nav-toggle:hover{ background: rgba(255,255,255,.2); }
body.nav-open .site-header:not(.is-scrolled) .nav-toggle{
  background: var(--mint-50);
  border-color: var(--color-line);
  color: var(--brand-green-dark);
}
body.nav-open .site-header:not(.is-scrolled) .nav-toggle:hover{ background: var(--mint-100); }

/* Backdrop behind the open drawer */
.nav-backdrop{
  position:fixed;
  inset:0;
  z-index:90;
  background: rgba(10,10,10,.38);
  opacity:0;
  visibility:hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.nav-backdrop.is-open{ opacity:1; visibility:visible; }

/* ============================== 6. HERO ============================ */
/* The bold brand moment: a DEEP FOREST-GREEN panel (subtle diagonal gradient +
   faint grid/grain texture) carrying white copy, a mint accent word, and the
   light phone UI + white float-cards popping off the dark ground. All theming
   flows from the --hero-* tokens. Layering inside the hero's own stacking
   context (isolation:isolate): gradient (the .hero bg) → texture (::before,
   z-index:-2) → mint blobs (z-index:-1) → content. */
.hero{
  position:relative;
  isolation:isolate;            /* keep blobs + texture behind, layered locally */
  padding-top: calc(var(--header-h) + clamp(2rem, 1rem + 6vw, 5rem));
  padding-bottom: var(--space-10);
  overflow:hidden;              /* clip blobs + texture to the section */
  color: var(--hero-ink);       /* default ink on the green is white */
  background-color: var(--hero-bg);  /* flat fallback (canonical token) */
  background-image: linear-gradient(155deg, var(--hero-bg-from), var(--hero-bg-to));
}

/* Texture overlay (matches the reference image): a subtle GRID (::before) and a
   faint GRAIN (::after), kept as two layers so each gets its own opacity — the
   grid wants ~0.6, the grain only ~0.06, so one shared layer couldn't do both.
   Both sit behind the blobs + content (z-index:-2) and are non-interactive.
   The SVGs are produced by a parallel step; if either is missing its layer just
   doesn't paint and the gradient still carries the look — graceful degrade.
   NOTE external background SVGs only fetch over http(s), not file:// — verify
   over a local server. Each tile is drawn at its NATIVE size so the grid's
   crisp 1px lines and the grain's stitched noise stay sharp/seamless. */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background: url("../assets/hero/grid.svg") top left / 48px 48px repeat;
  opacity:.7;   /* grid lines already ship at stroke-opacity .08 → reads faint */
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background: url("../assets/hero/grain.svg") center / 160px 160px repeat;
  opacity:.06;  /* film grain: intentionally near-invisible, just breaks the flat fill */
}

/* --- Organic blobs — lighter-green / mint tints that read on the dark green
   (the old bright-green blobs vanished against the forest bg). --- */
.hero__blob{
  position:absolute;
  z-index:-1;
  border-radius: 42% 58% 63% 37% / 47% 42% 58% 53%;
  filter: blur(8px);
  pointer-events:none;
}
.hero__blob--1{
  width: clamp(320px, 42vw, 620px);
  aspect-ratio:1;
  top:-14%; right:-10%;
  /* soft mint glow, top-right — lifts the corner without washing the green */
  background: radial-gradient(circle at 30% 30%,
              var(--hero-accent), transparent 68%);
  opacity:.22;
}
.hero__blob--2{
  width: clamp(220px, 26vw, 380px);
  aspect-ratio:1;
  bottom:-12%; left:-8%;
  /* cooler teal-mint, bottom-left, fainter — quiet depth in the far corner */
  background: radial-gradient(circle at 60% 40%,
              rgba(143,230,196,.9), transparent 72%);
  opacity:.16;
  border-radius: 58% 42% 38% 62% / 55% 53% 47% 45%;
}

.hero__inner{
  display:grid;
  grid-template-columns: minmax(0, 1fr);  /* mobile: single col; minmax(0) lets it shrink */
  gap: clamp(2.5rem, 1.5rem + 5vw, 4rem);
  align-items:center;
}
/* grid items default to min-width:auto and won't shrink below their content;
   reset so wide content (nowrap buttons, the device) can't force overflow */
.hero__copy,
.hero__visual{ min-width:0; }

/* --- Hero copy --- */
.hero__copy{ text-align:center; }   /* centered on mobile */

/* SECTION KICKER / EYEBROW
   Not a pill — an uppercase, tightly tracked Poppins micro-heading led by a
   short brand-gradient accent bar. The weight + tracking + display face give
   it presence; the gradient bar makes it pop and ties it to the brand's
   green→mint language. No container, so it reads as a deliberate label rather
   than a tag. Works identically centered (hero mobile / serve / how / loop —
   the [bar + LABEL] group centers as a unit) and left-aligned (platform /
   story / faq / connect — the bar anchors the text-start edge). Theme via the
   --eyebrow-* tokens in :root. */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  font-family: var(--font-heading);          /* Poppins (display) — helps it pop */
  font-size: var(--fs-eyebrow);
  font-weight:600;
  line-height:1;                              /* tight so the bar centers on the caps */
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--eyebrow-fg);
}
/* the leading accent bar (the old decorative dot, restyled — still aria-hidden) */
.eyebrow__dot{
  /* Leading accent bar removed (2026-06-08, per request) — section headers now
     show the uppercase tracked label alone. Markup kept; the bar is just hidden. */
  display: none;
}

/* HERO eyebrow — recolored for the dark forest-green band: light label + solid
   bright-mint bar. (Scoped to .hero; every other eyebrow sits on white and
   keeps the green-on-white treatment above.) */
.hero .eyebrow{ color: var(--eyebrow-fg-hero); }
.hero .eyebrow__dot{ background: var(--eyebrow-bar-hero); }

.hero__title{
  font-size: var(--fs-h1);
  font-weight:700;
  letter-spacing:-0.02em;
  margin-top: var(--space-5);
  text-wrap: balance;            /* tidy line breaks on supporting browsers */
  color: var(--hero-ink);        /* white headline on the green */
}
/* accent word ("around you.") in bright mint so it pops off the white headline */
.hero__title .accent{ color: var(--hero-accent); }

.hero__lead{
  font-size: var(--fs-lead);
  color: var(--hero-ink-soft);   /* softened white body on the green */
  max-width: 46ch;
  margin: var(--space-4) auto 0;  /* auto-centers on mobile */
}

/* --- CTA row --- */
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* HERO buttons — reworked for the dark-green ground (scoped to .hero so the
   white sections keep the green-fill / green-outline buttons unchanged).
   Primary = a high-contrast WHITE pill with dark-green text → reads premium and
   pops hardest on the forest green (white on --brand-green-dark ≈ 6.5:1, AA).
   Secondary = white outline + white text + light icon. Both stay curvy. */
.hero .btn-primary{
  background: var(--hero-ink);            /* the hero palette's light surface (white) */
  color: var(--brand-green-dark);         /* dark-green label → ~6.9:1 on white, AA */
  box-shadow: 0 20px 45px -22px rgba(0,0,0,.55);  /* lift reads on the dark bg */
}
.hero .btn-primary:hover{
  background: var(--mint-50);     /* faint mint warm-up, still ~AA vs dark-green text */
  color: var(--brand-green-dark);
}
.hero .btn-ghost{
  background: transparent;
  color: var(--hero-ink);
  border-color: var(--hero-surface-line);
}
.hero .btn-ghost:hover{
  background: var(--hero-surface);
  border-color: rgba(255,255,255,.55);
  color: var(--hero-ink);
}

/* --- Trust row (icon + label pills) --- */
.hero__trust{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.trust-item{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  max-width:100%;                /* never exceed its container */
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight:500;
  /* on the dark green: translucent-light pill + light text. FULL white (not
     ink-soft) because this is SMALL text on a faint translucent pill — at .82
     it lands ~4.05:1 in the lightest spot (under the 4.5:1 AA bar); full white
     on the pill is ~5.1:1, clearing AA. */
  color: var(--hero-ink);
  background: var(--hero-surface);
  border:1px solid var(--hero-surface-line);
  padding:.5em .9em;
  border-radius: var(--radius-pill);
  text-align:left;
}
.trust-item .icon{
  color: var(--hero-accent);     /* light mint masked icon, pops on the pill */
  width:1.15em; height:1.15em;
}

/* --- Hero visual: phone in a curvy device frame --- */
.hero__visual{
  display:flex;
  justify-content:center;
  position:relative;
}
.device{
  position:relative;
  width: clamp(232px, 64vw, 300px);  /* portrait 0.46:1 → ~648px tall max */
  padding: 13px;                  /* device bezel width */
  /* A realistic DARK phone frame (faint green tint to stay on-theme). A light
     bezel blended into the white screenshot on the green hero, so there was no
     visible "box". A dark bezel frames the white screen with high contrast and
     reads as an actual device — a clear box on the green. */
  background: linear-gradient(155deg, #26402F, #0E1611);
  border-radius: 46px;
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.18),   /* top metal-edge highlight */
    inset 0 0 0 1px rgba(255,255,255,.06),      /* faint inner rim */
    0 34px 74px -24px rgba(0,0,0,.62),          /* depth — lifts the device off the green */
    0 0 0 1px rgba(0,0,0,.30);                  /* crisp outer edge */
  animation: float 6s ease-in-out infinite;
}
/* soft halo card sitting just behind the device. On the deep green a flat pale
   slab would read as a hard rectangle, so use a translucent mint glow that
   feathers into the bg — the white phone still pops, the halo just adds lift. */
.device::before{
  content:"";
  position:absolute;
  inset:-10%;               /* slightly larger, brighter halo → wrapper more visible */
  z-index:-1;
  background: radial-gradient(60% 60% at 50% 40%,
              rgba(255,255,255,.26), rgba(143,230,196,.15) 60%, transparent 78%);
  border-radius: var(--radius-lg);
  transform: rotate(-4deg);
}
.device__screen{
  position:relative;
  z-index:2;                /* the app screenshot sits above the sheen overlay */
  width:100%;
  height:auto;
  border-radius: 32px;
  display:block;
  /* Ring + soft inset frame the white screen against the smoked-glass bezel so
     the screen edge stays crisp even where the app content is white (the bottom
     tab bar), and the bezel reads as a uniform width all the way around. */
  box-shadow:
    0 0 0 1px rgba(10,10,10,.12),
    0 2px 10px -4px rgba(0,0,0,.35);
}

@keyframes float{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-12px); }
}

/* --- Floating feature-callout cards (additive, illustrative) ---
   Anchored to .hero__visual and overlapped on the phone's edges so they read
   as popping ABOVE the screen (lifted with --shadow-card). They reuse the
   existing design tokens only — no new colors or fonts.

   MOTION layering, to avoid clobbering the scroll-reveal:
     • .reveal owns `transform` (translateY → none on entrance).
     • the gentle float runs on the standalone `translate` property instead,
       so the two compose cleanly and the drift can differ per card.
   Each card gets its own duration/delay/offset so they drift independently
   from the phone and from each other (lively, not synced). All of this is
   switched off in the reduced-motion block at the foot of this file.

   RESPONSIVENESS: mobile-first these sit tucked at/inside the phone edges so
   they can never push past the viewport; only at ≥768px (two-column hero,
   phone on the right) do they extend outward toward the copy side. */
.float-card{
  position:absolute;
  z-index:2;                      /* above the device + its halo */
  display:flex;
  align-items:center;
  gap:.6rem;
  max-width: calc(100% - 12px);   /* never wider than the visual column */
  padding:.7rem .85rem;
  background: var(--color-bg);
  border:1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  /* gentle, slow drift — distance/easing shared; timing varies per card */
  animation: float-card-drift var(--fc-dur, 7s) var(--ease) var(--fc-delay, 0s) infinite;
}
/* the float runs on `translate` so it never fights .reveal's transform */
@keyframes float-card-drift{
  0%,100%{ translate: 0 0; }
  50%    { translate: var(--fc-x, 0) var(--fc-y, -8px); }
}

.float-card__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  position:relative;
  width:34px; height:34px;
  border-radius: var(--radius-pill);
  background: var(--mint-50);
  color: var(--brand-green);      /* tints the masked icon green */
}
.float-card__icon .icon{ width:18px; height:18px; }
.float-card__icon--check{
  background: var(--brand-green);
  color: var(--color-on-brand);   /* white check on solid green */
}

/* tiny brand-green "live" pulse on the wearable card */
.float-card__pulse{
  position:absolute;
  top:-1px; right:-1px;
  width:9px; height:9px;
  border-radius:50%;
  background: var(--brand-green-bright);
  box-shadow: 0 0 0 2px var(--color-bg);  /* knockout ring against the icon */
  animation: fc-pulse 2.4s var(--ease) infinite;
}
@keyframes fc-pulse{
  0%,100%{ transform: scale(1);   opacity:1;   }
  50%    { transform: scale(1.35); opacity:.55; }
}

.float-card__text{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.float-card__eyebrow{
  font-family: var(--font-eyebrow);
  font-size: .625rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  /* darker green so this small eyebrow text clears WCAG AA (6.9:1 on white) */
  color: var(--brand-green-dark);
}
.float-card__line{
  font-family: var(--font-ui);
  font-size: .8rem;
  font-weight:600;
  line-height:1.25;
  color: var(--color-ink);
  white-space:nowrap;
}

/* --- Card 1: wearable strain reading --------------------------------------
   The prominent line pairs an emphasized strain figure (10.1) with the word
   "strain detected", and a softer action line beneath it. The action line is
   allowed to wrap (it's a sentence) but the card stays width-clamped by its
   placement rules, so wrapping just grows it DOWNWARD, never sideways. */
.float-card__line--metric{
  display:flex;
  align-items:baseline;
  gap:.3em;
  white-space:nowrap;          /* the short "10.1 strain detected" never wraps */
}
.float-card__metric{
  font-family: var(--font-heading);
  font-size: 1rem;                  /* modest emphasis — green + Poppins differentiate it without heavy bold */
  font-weight:600;
  line-height:1;
  letter-spacing:-.01em;
  color: var(--brand-green-dark);   /* strain figure pops in brand green, AA on white */
}
.float-card__sub{
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight:500;
  line-height:1.3;
  color: var(--color-ink-soft);     /* secondary action copy (#44524B ≈ 8.9:1 on white) */
}

/* --- Card 2: dietary profile (head row + chip row) --- */
.float-card--profile{ flex-direction:column; align-items:stretch; gap:.6rem; }
.float-card__head{ display:flex; align-items:center; gap:.6rem; min-width:0; }
.float-card__icon--plain{ background: var(--mint-50); }
.float-card__chips{ display:flex; flex-wrap:wrap; gap:.35rem; }
.chip{
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight:600;
  line-height:1;
  padding:.4em .7em;
  border-radius: var(--radius-pill);
  /* echoes the app's soft-mint dietary tags: mint pill, green text */
  background: var(--mint-50);
  color: var(--brand-green-dark);
  border:1px solid var(--mint-100);
  white-space:nowrap;
}
.chip--accent{
  /* darker green keeps the small white chip label above AA (6.9:1) */
  background: var(--brand-green-dark);
  color: var(--color-on-brand);
  border-color: var(--brand-green-dark);
}

/* --- Card 2: FLAGGED allergen row (the safety-critical element) -----------
   A full-width tile that reads as a distinct, elevated "avoid" flag — set
   apart from the soft-mint preference chips by an amber alert treatment. The
   amber is reserved strictly for allergen flagging (see --alert-amber tokens);
   contrast is carried by dark amber on a soft amber tint, all clearing AA. */
.profile-flag{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.4rem .5rem;
  border-radius: var(--radius-sm);
  background: var(--alert-amber-surface);
  border:1px solid var(--alert-amber-line);
}
.profile-flag__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:26px; height:26px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);          /* white disc lifts the amber glyph */
  color: var(--alert-amber);            /* tints the masked alert icon amber */
}
.profile-flag__icon .icon{ width:15px; height:15px; }
.profile-flag__text{
  display:flex;
  flex-direction:column;
  gap:.05rem;
  min-width:0;
  margin-right:auto;                    /* pushes the "Avoid" pill to the edge */
}
.profile-flag__label{
  font-family: var(--font-eyebrow);
  font-size:.56rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--alert-amber);            /* ≈ 5.3:1 on the amber tint, AA */
}
.profile-flag__value{
  font-family: var(--font-ui);
  font-size:.82rem;
  font-weight:700;
  line-height:1.1;
  color: var(--color-ink);
  white-space:nowrap;
}
.profile-flag__pill{
  flex:0 0 auto;
  font-family: var(--font-ui);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1;
  padding:.34em .6em;
  border-radius: var(--radius-pill);
  color: var(--alert-amber);            /* dark amber on white pill ≈ 5.9:1, AA */
  background: var(--color-bg);
  border:1px solid var(--alert-amber-line);
}

/* --- Card 2: "safe match" reassurance row --- */
.profile-safe{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-family: var(--font-ui);
  font-size:.72rem;
  font-weight:600;
  line-height:1.1;
  color: var(--brand-green-dark);       /* ≈ 6.9:1 on white, AA */
}
.profile-safe__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:18px; height:18px;
  border-radius: var(--radius-pill);
  background: var(--brand-green);       /* small white check on solid green */
  color: var(--color-on-brand);
}
.profile-safe__icon .icon{ width:11px; height:11px; }

/* --- Card 3: confirmation toast (compact pill) --- */
.float-card--toast{
  border-radius: var(--radius-pill);
  padding:.5rem .9rem .5rem .55rem;
  gap:.5rem;
}
.float-card--toast .float-card__icon{ width:26px; height:26px; }
.float-card--toast .float-card__icon .icon{ width:15px; height:15px; }
.float-card__toast-text{
  font-family: var(--font-ui);
  font-size: .8rem;
  font-weight:600;
  color: var(--color-ink);
  white-space:nowrap;
}

/* --- Placement & per-card drift timing --- */
/* MOBILE (single-column, phone centered): keep cards hugging the phone edges
   so absolutely-positioned content can never spill past the narrow viewport.
   The visual column is centered and the device is clamped to <=300px, so even
   the widest card (max-width: 100% of the column) stays on-screen. */
.float-card--wearable{
  top: 6%;
  left: 0;
  --fc-dur: 6.5s; --fc-delay: .2s; --fc-x: 0px; --fc-y: -9px;
}
.float-card--profile{
  top: 33%;
  right: 0;
  width: min(15rem, 78%);
  --fc-dur: 8s; --fc-delay: .5s; --fc-x: -4px; --fc-y: 8px;
}
.float-card--toast{
  bottom: 7%;
  left: 6%;
  --fc-dur: 5.6s; --fc-delay: 0s; --fc-x: 0px; --fc-y: -7px;
}

/* ========================= 6b. WHO WE SERVE ======================= */
/* First content section after the hero. Reuses the hero's eyebrow →
   heading → lead rhythm, then a horizontally-scrolling carousel of six
   EQUAL-WEIGHT audience cards.

   OVERFLOW CONTRACT (the #1 priority): only .carousel__track scrolls in the
   x-axis (overflow-x:auto). Everything else stays within the centered
   .container, so the carousel can never widen the document. The slides use
   flex-basis tied to the track's OWN width (via a --peek/--per recipe), not
   the viewport, so they shrink with their column and never push the page. */
.serve{
  position:relative;
  isolation:isolate;            /* keep the bg blobs layered behind, locally */
  overflow:hidden;              /* clip the blobs to this section (like the hero) */
  padding-block: var(--space-10);
}
/* Soft green background wash — echoes the hero's blobs so this section shares
   the same brand atmosphere instead of sitting on flat white. Decorative only. */
.serve::before,
.serve::after{
  content:"";
  position:absolute;
  z-index:-1;
  filter: blur(10px);
  pointer-events:none;
  border-radius: 42% 58% 63% 37% / 47% 42% 58% 53%;
}
/* Centered composition (deliberately different from the hero's corner blobs):
   a large soft glow in the middle + a smaller mint accent just above center. */
.serve::before{
  width: clamp(360px, 52vw, 720px);
  aspect-ratio:1;
  top:50%; left:50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%,
              var(--brand-green-bright), var(--brand-green) 70%);
  /* normalized to the shared section-glow intensity (was .10) so this centered
     glow no longer reads louder than the other sections' corner glows */
  opacity: var(--glow-opacity);
}
.serve::after{
  width: clamp(240px, 34vw, 480px);
  aspect-ratio:1;
  top:50%; left:50%;
  transform: translate(-50%, -58%) rotate(-6deg);
  background: radial-gradient(circle at 50% 45%,
              var(--mint-100), var(--brand-green-bright) 85%);
  /* a touch under the base layer (was .16) so the two centered layers COMBINE to
     roughly the single-glow family intensity rather than exceeding it */
  opacity: calc(var(--glow-opacity) - .02);
  border-radius: 58% 42% 38% 62% / 55% 53% 47% 45%;
}

/* --- Intro / tagline block (centered like the hero copy) --- */
.serve__intro{
  text-align:center;
  max-width: 56ch;
  margin-inline:auto;
}
.serve__title{
  font-size: var(--fs-h2);
  font-weight:700;
  letter-spacing:-0.02em;
  margin-top: var(--space-5);
  text-wrap: balance;
}
.serve__title .accent{ color: var(--brand-green); }
.serve__lead{
  font-size: var(--fs-lead);
  color: var(--color-ink-soft);
  margin: var(--space-4) auto 0;
}

/* --- Carousel shell --- */
.carousel{
  margin-top: var(--space-8);
  /* The track sits to the page edges visually via negative gutter so a peeking
     card can bleed toward the viewport edge; padding restores the alignment so
     the first card lines up with the heading above. Both sides symmetric, so
     no net width is added (the inner padding offsets the negative margin). */
  --rail: var(--gutter);
  margin-inline: calc(var(--rail) * -1);
}

/* Scroll-snap track: the ONLY horizontally-scrollable element here. */
.carousel__track{
  /* per-view recipe: how many whole cards show + how much of the next peeks.
     --gap is the inter-card gap; --per the visible count; --peek the fraction
     of one extra card shown to hint "there's more". Card basis is derived from
     the track's content width so it tracks the column, never the viewport. */
  --gap: var(--space-5);
  --per: 1;
  --peek: 0.16;

  display:flex;
  gap: var(--gap);
  margin:0;
  padding: 0.5rem var(--rail) var(--space-2);  /* .5rem top so card lift isn't clipped */

  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;

  /* hide the scrollbar (controls + dots convey position) but keep it scrollable */
  scrollbar-width:none;          /* Firefox */
  -ms-overflow-style:none;       /* old Edge */
}
.carousel__track::-webkit-scrollbar{ display:none; }  /* WebKit */
/* focus ring on the focusable track sits inside, never widening the page */
.carousel__track:focus-visible{ outline-offset:-3px; }

/* --- Audience card (all six identical: equal visual weight) --- */
.serve-card{
  /* derive each card's width from the track: subtract the gaps between the
     visible cards + the peeking sliver, divide by the visible count. Uses 100%
     of the TRACK (content box), so cards never reference the viewport. */
  flex:0 0 calc(
    (100% - (var(--per) + var(--peek)) * var(--gap)) / (var(--per) + var(--peek))
  );
  scroll-snap-align:start;
  scroll-margin-left: var(--rail);

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-bg);
  border:1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* hover/focus lift — subtle, smooth via the shared token */
@media (hover: hover) and (pointer: fine){
  .serve-card:hover{
    transform: translateY(-6px);
    box-shadow: var(--shadow-soft);
    border-color: var(--mint-100);
  }
}
.serve-card:focus-within{
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: var(--mint-100);
}

/* icon medallion — same mint circle as the hero float-cards for family */
.serve-card__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:46px; height:46px;
  border-radius: var(--radius-pill);
  background: var(--mint-50);
  border:1px solid var(--mint-100);
  color: var(--brand-green);      /* tints the masked icon green */
}
.serve-card__icon .icon{ width:24px; height:24px; }

.serve-card__title{
  font-size: 1.2rem;
  font-weight:600;
  color: var(--color-ink);
}
.serve-card__text{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-ink-soft);
}
/* tag badge reuses the mint .chip; mt:auto pins it to the card bottom so
   tags align across cards regardless of description length (equal weight) */
.serve-card__tag{
  margin-top:auto;
  font-size:.75rem;
  padding:.5em .85em;
}

/* --- Controls row: prev / dots / next --- */
.carousel__controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-inline: var(--rail);
}
.carousel__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:48px; height:48px;
  background: var(--color-bg);
  border:2px solid var(--mint-100);
  border-radius: var(--radius-pill);
  color: var(--brand-green-dark);
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}
.carousel__btn .icon{ width:22px; height:22px; }
.carousel__btn:hover{
  background: var(--mint-50);
  border-color: var(--brand-green);
  transform: translateY(-2px);
}
.carousel__btn:active{ transform: translateY(0); }
/* prev mirrors the shared right-arrow glyph */
.carousel__btn--prev .icon{ transform: scaleX(-1); }
/* disabled at a track end — dimmed and inert (JS sets [disabled]) */
.carousel__btn[disabled]{
  opacity:.4;
  cursor:not-allowed;
  transform:none;
  background: var(--color-bg);
  border-color: var(--color-line);
}

/* dot indicator — one dot per card; active dot widens into a brand pill */
.carousel__dots{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.carousel__dot{
  width:9px; height:9px;
  padding:0;
  border:0;
  border-radius: var(--radius-pill);
  background: var(--mint-100);
  transition: width var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.carousel__dot:hover{ background: var(--brand-green-bright); }
.carousel__dot[aria-selected="true"]{
  width:24px;
  background: var(--brand-green);
}

/* ========================= 6c. HOW IT WORKS ======================= */
/* Sequential journey "from profile to plate", built as a vertical stepper.
   A green spine runs down the LEFT of the list (a pseudo-element), with the
   01–05 number nodes sitting on it; each step pairs its copy with an elevated
   app-preview card. The preview cards are the STAR here — lifted strongly with
   --shadow-soft + a faint green halo so they pop more than the flat serve
   cards and read as glimpses of the real app.

   LAYOUT: mobile-first single column [node | (body + card stacked)]. From
   768px each <li> becomes a 3-track grid [node | body | card] so text and the
   preview sit side by side. The spine is positioned within the centered
   .container, so nothing here can widen the page (overflow contract). */
.how{
  position:relative;
  isolation:isolate;            /* keep the glow layered behind, locally */
  overflow:hidden;              /* clip the decorative glow to this section */
  padding-block: var(--space-10);
}
/* Decorative brand glow — anchored to the BOTTOM-RIGHT, deliberately different
   from the hero (corners) and the serve section (center). Faint and behind
   content, so it never reduces text contrast. */
.how__glow{
  position:absolute;
  z-index:-1;
  right:-12%;
  bottom:-16%;
  width: clamp(300px, 44vw, 640px);
  aspect-ratio:1;
  background: radial-gradient(circle at 60% 60%,
              var(--brand-green-bright), var(--brand-green) 72%);
  opacity: var(--glow-opacity);   /* normalized to the shared intensity (was .10) */
  filter: blur(10px);
  border-radius: 58% 42% 38% 62% / 55% 53% 47% 45%;
  pointer-events:none;
}

/* --- Intro (centered, mirrors hero/serve) --- */
.how__intro{
  text-align:center;
  max-width: 56ch;
  margin-inline:auto;
}
.how__title{
  font-size: var(--fs-h2);
  font-weight:700;
  letter-spacing:-0.02em;
  margin-top: var(--space-5);
  text-wrap: balance;
}
.how__title .accent{ color: var(--brand-green); }
.how__lead{
  font-size: var(--fs-lead);
  color: var(--color-ink-soft);
  margin: var(--space-4) auto 0;
}

/* --- Road wrapper: positioning context for the connector + the stops --- */
.how__road{
  /* medallion diameter — declared on the wrapper so BOTH the connector (to size
     its band height) and each .step (to size the medallion) inherit one value. */
  --node: 56px;

  position:relative;
  margin: var(--space-10) auto 0;
  /* cap the reading width so the row doesn't sprawl on very wide screens; stays
     within .container, so it never affects page width */
  max-width: 940px;
}

/* The horizontal road connector (DESKTOP/TABLET). Absolutely positioned across
   the medallion row, BEHIND the stops. Hidden on mobile, where a vertical green
   spine takes over instead. Its three layered spans (bed / dashed lane /
   arrowhead) are styled with the .how__road-* rules further below. */
.how__connector{ display:none; }

/* --- The three stops --- */
.how__steps{
  position:relative;
  padding:0;
  margin:0;
  list-style:none;       /* step badges convey order visually; <ol> keeps it for AT */
  /* MOBILE-FIRST: a single centered column. */
  display:flex;
  flex-direction:column;
  gap: var(--space-8);
}

/* MOBILE green spine: a thin vertical line behind the number nodes, drawn with a
   gradient so it FADES in/out at the top and bottom rather than ending abruptly.
   Centered on the medallion (--node/2). Switched OFF at >=768px where the
   horizontal road connector takes over. */
.how__steps::before{
  content:"";
  position:absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--node) / 2);
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent 0,
    var(--mint-100) 4%,
    var(--brand-green-bright) 50%,
    var(--mint-100) 96%,
    transparent 100%
  );
  border-radius: var(--radius-pill);
  z-index:0;
}

/* --- One stop --- */
.step{
  /* --node (medallion diameter) is inherited from .how__road */
  position:relative;
  display:grid;
  /* MOBILE: [node] [body], body to the right of the medallion. */
  grid-template-columns: var(--node) minmax(0, 1fr);
  grid-template-areas: "node body";
  column-gap: var(--space-5);
  align-items:start;
}

/* number node — a mint icon medallion with a small green step badge. Sits ON the
   spine (mobile) / on the road (desktop). The medallion uses the same mint-circle
   family as the serve cards / loop nodes for a consistent visual language. */
.step__node{
  grid-area: node;
  position:relative;
  z-index:1;                    /* above the spine / road */
  width: var(--node);
  height: var(--node);
}
.step__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  border-radius: var(--radius-pill);
  background: var(--mint-50);
  border:1px solid var(--mint-100);
  color: var(--brand-green);    /* tints the masked icon green */
  box-shadow: var(--shadow-card);
  /* knockout ring so the spine/road never shows through the medallion */
  outline: 4px solid var(--color-bg);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.step__icon .icon{ width:26px; height:26px; }
/* small green step-number badge tucked on the medallion's top-right */
.step__num{
  position:absolute;
  top:-6px;
  right:-6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  border-radius: var(--radius-pill);
  background: var(--brand-green);
  color: var(--color-on-brand);
  font-family: var(--font-heading);
  font-size:.72rem;
  font-weight:700;
  line-height:1;
  box-shadow: 0 0 0 2px var(--color-bg);   /* knockout ring against the medallion */
}

/* --- Step copy --- */
.step__body{ grid-area: body; min-width:0; }
.step__kicker{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  font-family: var(--font-eyebrow);
  font-size: var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  /* dark green for AA on white at this small size */
  color: var(--brand-green-dark);
}
.step__title{
  font-size: 1.3rem;
  font-weight:600;
  letter-spacing:-0.01em;
  color: var(--color-ink);
  margin-top: var(--space-2);
  text-wrap: balance;
}
.step__text{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-ink-soft);
  margin-top: var(--space-3);
  max-width: 46ch;
}

/* --- Hover / focus lift on the medallion (the lively bit). The step has no tab
   stops of its own, but :focus-within keeps keyboard parity if links land here
   later; the medallion lifts + greens on hover. --- */
@media (hover: hover) and (pointer: fine){
  .step:hover .step__icon{
    transform: translateY(-4px);
    border-color: var(--brand-green);
    box-shadow: var(--shadow-soft);
  }
}
.step:focus-within .step__icon{
  transform: translateY(-4px);
  border-color: var(--brand-green);
  box-shadow: var(--shadow-soft);
}

/* ----------------------------------------------------------------
   The horizontal road connector (visual; desktop/tablet only — the
   .how__connector base rule keeps it display:none until >=768px).
   Three stacked, full-width layers inside the positioned band:
     • .how__road-bed  — a soft mint lane (the "road")
     • .how__road-lane — green dashed lane markings, marching L → R
     • .how__road-arrow — an arrowhead at the right end (the 1→2→3 cue)
   All px-based, so the dashes stay crisp + evenly sized at any width.
   Reduced-motion settles the lane to a still, solid stripe.
   ---------------------------------------------------------------- */
/* shared: each layer spans the band and is vertically centered */
.how__road-bed,
.how__road-lane{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform: translateY(-50%);
}
/* the road BED — a soft, rounded mint lane; this is what sells the "road" */
.how__road-bed{
  height:8px;
  border-radius: var(--radius-pill);
  background: var(--mint-100);
}
/* the LANE markings — a repeating green→bright-green dashed stripe. The dashes
   are painted with a repeating-linear-gradient (always px-exact) and MARCH to
   the right via background-position (see @keyframes how-road-flow). A right-edge
   mask fades the stripe out just before the arrowhead so they meet cleanly. */
.how__road-lane{
  height:3px;
  /* 13px green mark + 11px transparent gap = 24px period */
  background-image: repeating-linear-gradient(
    to right,
    var(--brand-green) 0, var(--brand-green) 13px,
    transparent 13px, transparent 24px);
  background-size: 24px 100%;
  background-repeat: repeat-x;
  /* begin the dashes in the open gap AFTER the first medallion (inset by its
     radius) so they don't sit under it */
  margin-left: calc(var(--node) / 2 + 6px);
  /* stop the dashes just before the arrowhead (which sits at --node/2 + 6px from
     the right), with a short fade so the markings flow INTO the arrow cleanly */
  margin-right: calc(var(--node) / 2 + 12px);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 12px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 12px), transparent 100%);
  animation: how-road-flow 1.1s linear infinite;
}
/* the ARROWHEAD — a small chevron pointing INTO stop 3. Sits in the open gap
   just LEFT of the last medallion (pulled in by the medallion radius + a little
   air) rather than at the band edge, where the medallion would cover it. Built
   from two rotated bars (::before/::after) so it reads as a clean > head in the
   brand green, sized in px (crisp at any width). */
.how__road-arrow{
  position:absolute;
  right: calc(var(--node) / 2 + 6px);
  top:50%;
  width:11px;
  height:11px;
  transform: translateY(-50%);
}
.how__road-arrow::before,
.how__road-arrow::after{
  content:"";
  position:absolute;
  left:0;
  width:11px;
  height:3px;
  border-radius: var(--radius-pill);
  background: var(--brand-green);
}
.how__road-arrow::before{ top:50%; transform: translateY(-50%) rotate(45deg);  transform-origin:right center; }
.how__road-arrow::after{  top:50%; transform: translateY(-50%) rotate(-45deg); transform-origin:right center; }

/* ========================== 6d. 360° LOOP ======================== */
/* How WiseDine + a student's wearable form ONE continuous cycle. Reuses the
   hero/serve/how rhythm (eyebrow → h2 → lead), then a circular loop diagram,
   then the two arcs as side-by-side cards, then a quiet disclaimer.

   THE DIAGRAM is built MOBILE-FIRST as a vertical stepper: the .loopwheel is
   a flex column, each .loopnode a full-width row with an icon medallion, a
   step number, and its copy, connected by a spine (a pseudo-element behind the
   medallions, same idea as the how-it-works spine) and capped by a "loops
   back" note. The decorative ring SVG + central hub are display:none here and
   only switched on at >=768px, where the SAME <ol> is re-laid-out around a
   FIXED-SIZE, centered, capped-width circular stage — so it can never widen
   the page (the overflow contract). */
.loop{
  position:relative;
  isolation:isolate;            /* keep the glow layered behind, locally */
  overflow:hidden;              /* clip the decorative glow to this section */
  padding-block: var(--space-10);
}
/* Decorative brand glow — anchored UPPER-LEFT (distinct from hero corners,
   serve center, how bottom-right). Faint and behind content; never over text. */
.loop__glow{
  position:absolute;
  z-index:-1;
  top:-14%;
  left:-12%;
  width: clamp(300px, 42vw, 600px);
  aspect-ratio:1;
  background: radial-gradient(circle at 40% 40%,
              var(--brand-green-bright), var(--brand-green) 72%);
  opacity: var(--glow-opacity);
  filter: blur(10px);
  border-radius: 42% 58% 63% 37% / 47% 42% 58% 53%;
  pointer-events:none;
}

/* --- Intro (centered, mirrors hero/serve/how) --- */
.loop__intro{
  text-align:center;
  max-width: 60ch;
  margin-inline:auto;
}
.loop__title{
  font-size: var(--fs-h2);
  font-weight:700;
  letter-spacing:-0.02em;
  margin-top: var(--space-5);
  text-wrap: balance;
}
.loop__title .accent{ color: var(--brand-green); }
.loop__lead{
  font-size: var(--fs-lead);
  color: var(--color-ink-soft);
  margin: var(--space-4) auto 0;
}

/* ====================================================================
   PART 2 — the loop diagram
   ==================================================================== */
.loop__diagram{
  margin: var(--space-10) auto 0;
  /* MOBILE: a comfortable reading column for the vertical stepper. Capped and
     centered, so it never approaches the viewport edge. */
  max-width: 30rem;
}

/* MOBILE-FIRST: vertical stepper. The wheel is a column; the ring + hub are
   hidden until the desktop breakpoint switches the circular layout on. */
.loopwheel{
  position:relative;
  display:flex;
  flex-direction:column;
  gap: var(--space-5);
}
.loopwheel__ring,
.loopwheel__hub{ display:none; }   /* circular-only; off on mobile */

/* connector spine behind the medallions (echoes the how-it-works spine).
   Sits at the medallion's horizontal center (--pin/2) and fades at both ends. */
.loopwheel{ --pin: 48px; }
.loopwheel__stages{
  position:relative;
  display:flex;
  flex-direction:column;
  gap: var(--space-5);
  padding:0;
  margin:0;
  list-style:none;     /* step badges convey order visually; <ol> keeps it for AT */
}
.loopwheel__stages::before{
  content:"";
  position:absolute;
  top: 6%;
  bottom: 6%;
  left: calc(var(--pin) / 2);
  width:2px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent 0,
    var(--mint-100) 6%,
    var(--brand-green-bright) 50%,
    var(--mint-100) 94%,
    transparent 100%
  );
  border-radius: var(--radius-pill);
  z-index:0;
}

/* one stage row — MOBILE: the CARD SURFACE lives on the .loopnode so the title
   row (.loopnode__pin) AND the inline blurb both sit inside one card. (On
   desktop the surface moves onto .loopnode__pin, which becomes the pill.) */
.loopnode{
  position:relative;
  z-index:1;                     /* above the spine */
  background: var(--color-bg);
  border:1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
}
.loopnode__pin{
  display:grid;
  grid-template-columns: var(--pin) minmax(0,1fr);
  align-items:center;
  column-gap: var(--space-4);
}
/* icon medallion — same mint circle family as serve cards / float-cards.
   position:relative so the step badge anchors to it identically in BOTH the
   mobile (horizontal) and desktop (vertical) pill layouts. */
.loopnode__icon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width: var(--pin);
  height: var(--pin);
  border-radius: var(--radius-pill);
  background: var(--mint-50);
  border:1px solid var(--mint-100);
  color: var(--brand-green);     /* tints the masked icon green */
}
.loopnode__icon .icon{ width:24px; height:24px; }
/* small step number badge tucked on the medallion's top-right */
.loopnode__step{
  position:absolute;
  top:-5px;
  right:-5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px; height:20px;
  border-radius: var(--radius-pill);
  background: var(--brand-green);
  color: var(--color-on-brand);
  font-family: var(--font-heading);
  font-size:.7rem;
  font-weight:700;
  line-height:1;
  box-shadow: 0 0 0 2px var(--color-bg);  /* knockout ring against medallion */
}
.loopnode__copy{ min-width:0; }
.loopnode__label{
  display:block;
  font-family: var(--font-heading);
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:-0.01em;
  color: var(--color-ink);
}
/* MOBILE: the blurb renders inline under each title — the bottom-slot reveal is
   a desktop-only affordance, so on touch/no-hover devices students still read
   every step's copy. It spans the full row (under the medallion + title). On
   desktop (>=768px) this same element is docked into the shared bottom slot. */
.loopnode__blurb{
  display:block;
  /* align under the TITLE (past the medallion + its column gap) inside the card */
  margin-top: var(--space-2);
  padding-left: calc(var(--pin) + var(--space-4));
  font-family: var(--font-ui);
  font-size:.85rem;
  line-height:1.45;
  color: var(--color-ink-soft);
}
/* the shared bottom slot is a desktop affordance — off on the mobile stepper */
.loop__blurb-slot{ display:none; }

/* mobile "loops back" cap under the stepper */
.loopwheel__return{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  align-self:center;
  text-align:center;
  font-family: var(--font-eyebrow);
  font-size: var(--fs-eyebrow);
  font-weight:600;
  letter-spacing:.04em;
  color: var(--brand-green-dark);   /* dark green → AA on white at small size */
  background: var(--mint-50);
  border:1px solid var(--mint-100);
  padding:.5em 1em;
  border-radius: var(--radius-pill);
}
.loopwheel__return .icon{ width:1.05em; height:1.05em; }

/* ====================================================================
   PART 3 — the two arcs (cards)
   ==================================================================== */
.loop__arcs{
  margin-top: var(--space-10);
  display:grid;
  grid-template-columns: minmax(0,1fr);   /* stacked on mobile */
  gap: var(--space-5);
}
.arc{
  position:relative;
  display:flex;
  flex-direction:column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-bg);
  border:1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);    /* substantial, elevated like the previews */
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* faint green halo so the cards read as floating (mirrors .preview::before) */
.arc::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  border-radius: inherit;
  background: radial-gradient(120% 120% at 0% 0%,
              rgba(18,180,136,.16), transparent 60%);
  pointer-events:none;
}
/* the RETURN card mirrors the halo to the opposite corner — a subtle visual
   echo of the loop's bidirectional flow (INSIGHTS→MEALS vs MEALS→INSIGHTS) */
.arc--return::before{
  background: radial-gradient(120% 120% at 100% 0%,
              rgba(18,180,136,.16), transparent 60%);
}

/* hover/focus lift — same language as the serve + preview cards */
@media (hover: hover) and (pointer: fine){
  .arc:hover{
    transform: translateY(-6px);
    border-color: var(--mint-100);
  }
}
.arc:focus-within{
  transform: translateY(-6px);
  border-color: var(--mint-100);
}

/* direction label: arrow glyph + "Insights → Meals" eyebrow */
.arc__dir{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  align-self:flex-start;
  font-family: var(--font-eyebrow);
  font-size: var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--brand-green-dark);    /* AA on white at this small size */
  background: var(--mint-50);
  border:1px solid var(--mint-100);
  padding:.45em .9em;
  border-radius: var(--radius-pill);
}

.arc__title{
  font-size: 1.3rem;
  font-weight:600;
  letter-spacing:-0.01em;
  color: var(--color-ink);
  text-wrap: balance;
}
.arc__text{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-ink-soft);
}

/* paired items: term (ink) → explanation (ink-soft), with a small green
   connector tick so each pair reads as "this maps to that". <dl>/<dt>/<dd>
   for correct term→description semantics. */
.arc__pairs{
  margin-top: var(--space-2);
  display:flex;
  flex-direction:column;
  gap: var(--space-3);
}
.arc__pair{
  display:grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items:start;
  column-gap:.7rem;
  padding-top: var(--space-3);
  border-top:1px solid var(--color-line);   /* hairline divider between pairs */
}
.arc__pair:first-child{ border-top:0; padding-top:0; }
.arc__term{
  grid-column:1 / -1;
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family: var(--font-ui);
  font-size:.95rem;
  font-weight:600;
  color: var(--color-ink);
}
/* small green dot marking the term */
.arc__term::before{
  content:"";
  flex:0 0 auto;
  width:7px; height:7px;
  border-radius:50%;
  background: var(--brand-green-bright);
}
.arc__desc{
  grid-column:1 / -1;
  margin-top:.2rem;
  padding-left: calc(7px + .5em);   /* align under the term text, past the dot */
  font-family: var(--font-body);
  font-size:.9rem;
  line-height:1.45;
  color: var(--color-ink-soft);
}

/* ====================================================================
   PART 4 — quiet disclaimer
   ==================================================================== */
.loop__note{
  display:flex;
  align-items:flex-start;
  gap:.6em;
  max-width: 64ch;
  margin: var(--space-8) auto 0;
  text-align:left;
  font-family: var(--font-ui);
  font-size:.875rem;
  line-height:1.55;
  color: var(--color-ink-soft);      /* secondary, ~7:1 on white (AA) */
}
.loop__note .icon{
  flex:0 0 auto;
  width:1.1em; height:1.1em;
  margin-top:.18em;
  color: var(--brand-green-dark);    /* gentle green accent, AA */
}

/* ========================== 6e. PLATFORM ========================= */
/* Six capabilities as a BENTO grid. Reuses the hero/serve/how/loop rhythm
   (eyebrow → h2 → lead) plus a "Talk to team" CTA, then a 4-column grid with
   two wide cards on the diagonal (Card 1 spans cols 1–2; the FEATURED green
   Card 6 spans cols 3–4 of row 2).

   BUILT MOBILE-FIRST: the bento is a single column of full-width cards here;
   the 2-col (tablet) and 4-col diagonal (desktop) layouts are switched on at
   the breakpoints below. Every track is minmax(0,1fr) and the grid lives in
   the centered .container, so the page never widens (the overflow contract). */
.platform{
  position:relative;
  isolation:isolate;            /* keep the glow layered behind, locally */
  overflow:hidden;              /* clip the decorative glow to this section */
  padding-block: var(--space-10);
}
/* Decorative brand glow — anchored TOP-RIGHT (distinct from hero corners,
   serve center, how bottom-right, loop top-left). Faint; never over text. */
.platform__glow{
  position:absolute;
  z-index:-1;
  top:-14%;
  right:-12%;
  width: clamp(300px, 44vw, 640px);
  aspect-ratio:1;
  background: radial-gradient(circle at 60% 40%,
              var(--brand-green-bright), var(--brand-green) 72%);
  opacity: var(--glow-opacity);
  filter: blur(10px);
  border-radius: 58% 42% 38% 62% / 55% 53% 47% 45%;
  pointer-events:none;
}

/* --- Intro: copy + CTA. Mobile-first single column (CTA below the copy);
       becomes copy-left / CTA-right at the desktop breakpoint. --- */
.platform__intro{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: var(--space-5);
}
.platform__intro-copy{ max-width: 56ch; }
.platform__title{
  font-size: var(--fs-h2);
  font-weight:700;
  letter-spacing:-0.02em;
  margin-top: var(--space-5);
  text-wrap: balance;
}
.platform__title .accent{ color: var(--brand-green); }
.platform__lead{
  font-size: var(--fs-lead);
  color: var(--color-ink-soft);
  margin-top: var(--space-4);
}
.platform__intro-cta{ flex:0 0 auto; }

/* --- Bento grid shell --- */
.bento{
  margin-top: var(--space-8);
  display:grid;
  grid-template-columns: minmax(0, 1fr);   /* mobile: single column */
  gap: var(--space-5);
}

/* --- One capability card --- */
/* Elevated white card with the shared hover-lift language. Flex column so the
   chip list pins to the bottom (margin-top:auto) and tag rows align across
   cards regardless of description length. */
.bento-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-bg);
  border:1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);          /* at rest */
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* faint green halo behind the card — mirrors .preview/.arc so the cards read
   as floating. Sits just under the card; decorative only. */
.bento-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  border-radius: inherit;
  background: radial-gradient(120% 120% at 100% 0%,
              rgba(18,180,136,.16), transparent 60%);
  opacity:0;                               /* revealed on hover/focus for "pop" */
  transition: opacity var(--dur) var(--ease);
  pointer-events:none;
}

/* hover/focus lift — clear translateY, deeper shadow, green edge (the "pop") */
@media (hover: hover) and (pointer: fine){
  .bento-card:hover{
    transform: translateY(-8px);
    box-shadow: var(--shadow-soft);
    border-color: var(--mint-100);
  }
  .bento-card:hover::before{ opacity:1; }
}
/* keyboard parity: any focus inside a card lifts it identically */
.bento-card:focus-within{
  transform: translateY(-8px);
  box-shadow: var(--shadow-soft);
  border-color: var(--mint-100);
}
.bento-card:focus-within::before{ opacity:1; }

/* icon tile — mint rounded SQUARE (distinct from the round serve/loop
   medallions, matching the bento "tile" feel), green glyph. */
.bento-card__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:52px; height:52px;
  border-radius: var(--radius-md);
  background: var(--mint-50);
  border:1px solid var(--mint-100);
  color: var(--brand-green);               /* tints the masked icon green */
  /* the micro-interaction: tile fills green + glyph flips white on hover */
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.bento-card__icon .icon{ width:26px; height:26px; }

/* MICRO-INTERACTION: on card hover/focus the mint tile fills with brand green
   and its glyph turns white, with a tiny scale pop. Keyboard parity via
   :focus-within. Settled flat in the reduced-motion block. */
@media (hover: hover) and (pointer: fine){
  .bento-card:hover .bento-card__icon{
    background: var(--brand-green);
    border-color: var(--brand-green);
    color: var(--color-on-brand);
    transform: scale(1.06) rotate(-3deg);
  }
}
.bento-card:focus-within .bento-card__icon{
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: var(--color-on-brand);
  transform: scale(1.06) rotate(-3deg);
}

.bento-card__title{
  font-size: 1.25rem;
  font-weight:600;
  letter-spacing:-0.01em;
  color: var(--color-ink);
  text-wrap: balance;
}
.bento-card__text{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-ink-soft);
  max-width: 48ch;
}

/* chip row — reuses the shared mint .chip. mt:auto pins it to the card bottom
   so tag rows align across cards. List markers removed; chips are inline. */
.bento-card__chips{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin:0;
  margin-top:auto;
  padding-top: var(--space-2);
  list-style:none;
}
.bento-card__chips li{ display:inline-flex; }

/* ============================================================
   FEATURED card (Card 6) — solid brand green, white text.
   The icon tile + chips invert for contrast on the green fill,
   and the card gets its own hover treatment (deepen + sheen).
   ============================================================ */
.bento-card--feature{
  /* AA-driven fill: anchored on --brand-green-dark (#00674A) so white text and
     light chips clear WCAG AA everywhere on the card; a --brand-green accent in
     the top-right corner keeps it vivid without lightening the text region.
     (White on #009068 is only ~4.05:1 — too light for body copy — so the
     dominant color must be the darker green; verified by pixel sampling.) */
  background: radial-gradient(135% 135% at 85% 0%,
              var(--brand-green) 0%,
              var(--brand-green-dark) 58%);
  border-color: var(--brand-green-dark);
  color: var(--color-on-brand);            /* white body text on green */
  box-shadow: var(--shadow-soft);          /* already lifted, it's the hero card */
  overflow:hidden;                         /* clip the hover sheen sweep */
}
/* the green card's own halo is unnecessary (it IS the accent) → drop it and
   instead use ::before as a soft diagonal SHEEN that sweeps on hover. */
.bento-card--feature::before{
  inset:0;
  border-radius: inherit;
  background: linear-gradient(120deg,
              transparent 30%,
              rgba(255,255,255,.16) 50%,
              transparent 70%);
  background-size: 220% 100%;
  background-position: 140% 0;             /* parked off to the right at rest */
  opacity:1;                               /* (the sheen is the motion, not a fade) */
  transition: background-position .6s var(--ease);
}
.bento-card--feature .bento-card__title{ color: var(--color-on-brand); }
.bento-card--feature .bento-card__text{
  /* PURE white (not translucent): on the --brand-green-dark-anchored fill this
     is ~6.5:1 at the text region — comfortably AA for body copy. */
  color: var(--color-on-brand);
}
/* icon tile on green: translucent-white tile + WHITE glyph (AA on the fill) */
.bento-card--feature .bento-card__icon{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.4);
  color: var(--color-on-brand);
}
/* chips on the green card: inverted "light pill + dark-green text" — mirrors the
   white-card chips (mint pill, green text) flipped onto the green surface. A
   near-solid white tile with --brand-green-dark text is ~6.9:1 (clear AA) and
   reads far crisper than small white-on-translucent text would. */
.bento-card--feature .chip{
  background: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.92);
  color: var(--brand-green-dark);
}

/* featured hover: deepen the green + sweep the sheen across. The lift itself
   is inherited from .bento-card; we override the shadow/border only. */
@media (hover: hover) and (pointer: fine){
  .bento-card--feature:hover{
    background: radial-gradient(130% 130% at 80% 0%,
                var(--brand-green), var(--brand-green-dark) 65%);
    border-color: var(--brand-green-dark);
    box-shadow: var(--shadow-soft);
  }
  .bento-card--feature:hover::before{
    opacity:1;
    background-position: -40% 0;           /* sweep the sheen left-to-right */
  }
  /* the green card's icon tile brightens (rather than greens) on hover */
  .bento-card--feature:hover .bento-card__icon{
    background: rgba(255,255,255,.26);
    border-color: rgba(255,255,255,.5);
    color: var(--color-on-brand);
    transform: scale(1.06) rotate(-3deg);
  }
}
.bento-card--feature:focus-within{
  background: radial-gradient(130% 130% at 80% 0%,
              var(--brand-green), var(--brand-green-dark) 65%);
  border-color: var(--brand-green-dark);
}
.bento-card--feature:focus-within .bento-card__icon{
  background: rgba(255,255,255,.26);
  border-color: rgba(255,255,255,.5);
  color: var(--color-on-brand);
}

/* ========================== 6f. OUR STORY ======================== */
/* The founder story as a two-column editorial block: a tall green "founder
   media card" (the visual anchor — a swap-ready photo placeholder) with a
   white quote card overlapping its lower edge, paired with the story copy
   (eyebrow → h2 → two paragraphs → divider → three highlights as a <dl>).

   This section leans WARM + COMFY: generous whitespace, a ~62ch reading
   measure with a relaxed line-height, soft rounding + shadows, understated
   motion (reuse .reveal + a gentle hover on the media/quote card only).

   BUILT MOBILE-FIRST: a single flex column. Reading order is set explicitly
   with `order` so it reads eyebrow+heading → media card → body+highlights on
   mobile, then flips to media-left / copy-right at the desktop breakpoint.
   The overlapping quote card is INSET within the media column (never wider
   than it; offset only down + inward), so it can never widen the page. */
.story{
  position:relative;
  isolation:isolate;            /* keep the glow layered behind, locally */
  overflow:hidden;              /* clip the decorative glow to this section */
  padding-block: var(--space-10);
}
/* Decorative brand glow — anchored MID-LEFT (distinct from hero corners,
   serve center, how bottom-right, loop top-left, platform top-right). Faint
   and behind content; never over text. */
.story__glow{
  position:absolute;
  z-index:-1;
  top:50%;
  left:-16%;
  transform: translateY(-50%);
  width: clamp(300px, 42vw, 600px);
  aspect-ratio:1;
  background: radial-gradient(circle at 45% 50%,
              var(--brand-green-bright), var(--brand-green) 72%);
  opacity: var(--glow-opacity);   /* normalized up to the shared intensity (was .08) */
  filter: blur(10px);
  border-radius: 42% 58% 63% 37% / 47% 42% 58% 53%;
  pointer-events:none;
}

/* --- Layout shell: single column on mobile (media above copy) --- */
.story__inner{
  display:flex;
  flex-direction:column;
  gap: var(--space-8);
}
/* mobile reading order: heading first, then the media card, then the body.
   The copy block holds the eyebrow+heading AND the body/highlights, so on
   mobile we visually lift the media card to sit between them by ordering the
   two columns and letting the heading stay at the top of the copy column.
   (At the desktop breakpoint these orders are reset to media-left/copy-right.)
   Here the media simply sits above the full copy column — a clean, legible
   stack that keeps the heading → portrait → story flow. */
.story__media,
.story__copy{ min-width:0; }

/* ====================================================================
   LEFT — founder media card
   ==================================================================== */
.story__media{
  position:relative;
  /* room at the bottom for the overlapping quote card to hang past the photo
     without being clipped or colliding with the next row's content */
  padding-bottom: clamp(3.5rem, 2rem + 6vw, 5.5rem);
}

/* The green photo card — the swap-ready placeholder.
   AA: the gradient is anchored on --brand-green-dark (#00674A) so the badge
   and any future caption text clear WCAG AA on the fill (white ≈ 6.5:1),
   matching the featured bento card's approach. */
.story__photo{
  position:relative;
  aspect-ratio: 4 / 5;            /* portrait-ish; a dropped-in img fills it */
  /* cap the card width so the column stays comfortable on wide desktops and
     the portrait never sprawls; centered within its column */
  width:100%;
  max-width: 30rem;
  margin-inline:auto;
  border-radius: var(--radius-lg);
  overflow:hidden;                /* clips the future <img> + the placeholder */
  /* richer multi-stop diagonal so the green has real depth (light shoulder
     top-right → deep green bottom-left), anchored on --brand-green-dark so
     any text on the fill clears WCAG AA. A dropped-in <img> still sits on top
     of this and covers it edge-to-edge. */
  background:
    radial-gradient(135% 120% at 82% 4%,
      var(--brand-green-bright) 0%,
      var(--brand-green) 34%,
      var(--brand-green-dark) 78%);
  box-shadow: var(--shadow-soft); /* the green-tinted lift */
  /* hairline rim so the card edge reads crisp against the page */
  outline:1px solid rgba(255,255,255,.10);
  outline-offset:-1px;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* ---- The COMPOSED placeholder fill (decor only) -------------------------
   Layered so the empty card looks intentional + premium, balanced across all
   four quadrants instead of a lone silhouette in a void:
     • base: a soft brand mesh (two offset radial washes) + a top sheen
     • ::before : concentric rings radiating from behind the medallion
     • ::after  : a large, low-opacity WiseDine leaf monogram in the lower-
                  right, filling what used to be a dead corner
   ALL of this is inside .story__photo-ph, so a real <img> drops on top and
   covers it (object-fit:cover) with zero other changes. */
.story__photo-ph{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: var(--space-4);
  overflow:hidden;                /* keep rings + monogram inside the frame */
  /* mesh: a cool highlight upper-right + a soft glow behind the medallion,
     over a faint top-to-bottom sheen — gives the flat green dimension */
  background:
    radial-gradient(70% 55% at 50% 40%, rgba(255,255,255,.16), transparent 62%),
    radial-gradient(60% 50% at 88% 6%,  rgba(255,255,255,.18), transparent 60%),
    radial-gradient(75% 60% at 8% 100%, rgba(0,60,42,.32),     transparent 60%);
}
/* concentric rings behind the medallion (a calm, branded focal halo) */
.story__photo-ph::before{
  content:"";
  position:absolute;
  /* sits over the medallion's center (which is above vertical middle) */
  top:40%;
  left:50%;
  width: min(132%, 30rem);
  aspect-ratio:1;
  transform: translate(-50%, -50%);
  border-radius:50%;
  background:
    radial-gradient(closest-side, transparent 0 38%,
      rgba(255,255,255,.14) 38% 39%, transparent 39% 53%,
      rgba(255,255,255,.10) 53% 54%, transparent 54% 70%,
      rgba(255,255,255,.07) 70% 71%, transparent 71%);
  pointer-events:none;
}
/* big leaf monogram watermark, lower-right — kills the dead corner. Uses the
   shared icon mask so it inherits the green-on-white token system; rendered in
   translucent white so it reads as an embossed brand mark, not a logo. */
.story__photo-ph::after{
  content:"";
  position:absolute;
  right:-8%;
  bottom:-9%;
  width:62%;
  aspect-ratio:1;
  background: rgba(255,255,255,.10);
  -webkit-mask: url("../assets/icons/leaf.svg") right bottom / contain no-repeat;
          mask: url("../assets/icons/leaf.svg") right bottom / contain no-repeat;
  transform: rotate(-8deg);
  pointer-events:none;
}
/* centered silhouette medallion — larger + a soft inner glow + outer ring so
   it reads as a deliberate "portrait coming soon" focal point */
.story__photo-icon{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: clamp(116px, 34%, 168px);
  aspect-ratio:1;
  border-radius: var(--radius-pill);
  /* frosted medallion: soft white core fading out, a clear rim + a faint glow */
  background:
    radial-gradient(closest-side, rgba(255,255,255,.22), rgba(255,255,255,.08) 78%);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:
    inset 0 1px 10px rgba(255,255,255,.22),
    0 12px 30px -14px rgba(0,40,28,.55);
  color: rgba(255,255,255,.92);
}
.story__photo-icon .icon{ width:48%; height:48%; }
/* quiet caption under the medallion — names what the frame is, so the empty
   state reads as intentional. Decorative (hidden from AT). */
.story__photo-tag{
  position:relative;
  z-index:1;
  font-family: var(--font-ui);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  /* decorative caption (aria-hidden; the real accessible name is on
     .story__photo-ph). Near-solid white reads crisply on the green fill and
     vanishes the moment a real <img> replaces the placeholder. */
  color: rgba(255,255,255,.9);
}

/* When the real photo is dropped in, it fills the card edge-to-edge and sits
   ABOVE the decorative placeholder layers. */
.story__photo-img{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:cover;
  /* Source is a tall portrait with black letterbox bars top/bottom; the default
     centered cover clipped the top of his head. Bias the crop window upward so
     the full head shows while staying clear of the top black bar. */
  object-position: 50% 40%;
}

/* Badge — TOP-left of the green card. (Top, not bottom, so it never collides
   with the quote card that overlaps the card's LOWER edge — keeping both
   elements fully visible and uncramped at every width.) Inverted light pill +
   dark-green text (mirrors the green-card chips elsewhere) → clears AA on the
   fill. */
.story__badge{
  position:absolute;
  left: var(--space-4);
  top: var(--space-4);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  max-width: calc(100% - var(--space-4) * 2);
  font-family: var(--font-ui);
  font-size:.8125rem;
  font-weight:600;
  line-height:1.2;
  color: var(--brand-green-dark);            /* ~6.2:1 on the white pill */
  background: rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.92);
  padding:.5em .9em;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
}
.story__badge .icon{ width:1.05em; height:1.05em; flex:0 0 auto; }

/* White quote card overlapping the green card's lower edge. INSET within the
   media column — capped width, centered, pulled UP over the photo via a
   negative margin — so it overlaps visually without ever exceeding the
   column width (no horizontal page overflow). */
.story__quote{
  position:relative;
  z-index:3;                                 /* above the photo + any future img */
  overflow:hidden;                           /* clip the top brand-accent bar */
  width: min(23.5rem, 90%);
  margin-inline:auto;
  /* pull up over the green card's lower edge; the media's padding-bottom
     reserves the room so nothing is clipped */
  margin-top: clamp(-3.25rem, -1.75rem - 3vw, -2.25rem);
  display:flex;
  flex-direction:column;
  gap:.55rem;
  padding: var(--space-5) var(--space-5) var(--space-5);
  background: var(--color-bg);
  border:1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* a slim brand-green accent bar across the top edge ties the card to the
   green portrait it overlaps (one composed unit, not a stray chip) */
.story__quote::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background: linear-gradient(90deg,
              var(--brand-green-bright), var(--brand-green));
}
/* big decorative quote mark, brand green, sitting above the text */
.story__quote-mark{
  font-family: var(--font-quote);
  font-size: 3.4rem;
  line-height:.6;
  font-style:italic;
  font-weight:400;
  color: var(--brand-green);
  /* nudge so the glyph's left bearing aligns to the text edge */
  margin: .25rem 0 -.6rem -.06em;
}
.story__quote-text{
  font-family: var(--font-quote);
  font-size: 1.3rem;
  font-weight:300;
  font-style:italic;
  line-height:1.5;
  letter-spacing:0;
  color: var(--color-ink);
}
.story__quote-by{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-top:.35rem;
  padding-top:.75rem;
  border-top:1px solid var(--color-line);    /* quiet rule under the testimonial */
}
/* small brand monogram standing in for an avatar — mint tile + green leaf,
   mirrors the white-card icon medallions used across the site */
.story__quote-avatar{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  border-radius: var(--radius-pill);
  background: var(--mint-50);
  border:1px solid var(--mint-100);
  color: var(--brand-green-dark);
}
.story__quote-avatar .icon{ width:1.05rem; height:1.05rem; }
.story__quote-meta{
  display:flex;
  flex-direction:column;
  gap:.1rem;
  min-width:0;
}
.story__quote-name{
  font-family: var(--font-ui);
  font-size:.92rem;
  font-weight:600;
  line-height:1.2;
  color: var(--color-ink);
}
.story__quote-role{
  font-family: var(--font-ui);
  font-size:.8rem;
  line-height:1.2;
  color: var(--color-ink-soft);
}

/* Gentle hover on the media + quote card (understated — comfy, not flashy).
   Hovering anywhere in the media column lifts the photo a touch and the quote
   card a little more, so they read as one connected, inviting unit. */
@media (hover: hover) and (pointer: fine){
  .story__media:hover .story__photo{ transform: translateY(-4px); }
  .story__media:hover .story__quote{
    transform: translateY(-6px);
    border-color: var(--mint-100);
  }
}
/* keyboard parity (no focusable children today, but future-proof + consistent) */
.story__media:focus-within .story__photo{ transform: translateY(-4px); }
.story__media:focus-within .story__quote{
  transform: translateY(-6px);
  border-color: var(--mint-100);
}

/* ====================================================================
   RIGHT — the story copy
   ==================================================================== */
.story__title{
  font-size: var(--fs-h2);
  font-weight:700;
  letter-spacing:-0.02em;
  margin-top: var(--space-5);
  text-wrap: balance;
}
.story__title .accent{ color: var(--brand-green); }

.story__text{
  font-size: var(--fs-lead);
  /* comfortable reading measure + relaxed leading for the warm, calm feel */
  max-width: 62ch;
  line-height:1.7;
  color: var(--color-ink-soft);
  margin-top: var(--space-5);
}
.story__text strong{
  font-weight:600;
  color: var(--color-ink);        /* lift the founder name out of the body */
}

/* subtle hairline divider before the highlights */
.story__divider{
  height:1px;
  border:0;
  background: var(--color-line);
  margin: var(--space-6) 0 0;
  max-width: 62ch;
}

/* three highlight items — a real <dl>. 1-col on mobile → 3-across on desktop.
   Each is now a small card: an icon medallion, a bold term, and a description.
   The card treatment + consistent rhythm makes them read as a deliberate trio,
   not a hairline-tick afterthought. */
.story__highlights{
  margin-top: var(--space-6);
  display:grid;
  grid-template-columns: minmax(0,1fr);      /* stacked on mobile */
  gap: var(--space-4);
}
.story__highlight{
  display:grid;
  /* icon column + text column; term and desc stack in the second column */
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon term"
    "icon desc";
  align-items:start;
  column-gap: var(--space-4);
  row-gap:.25rem;
  padding: var(--space-4);
  background: var(--mint-50);
  border:1px solid var(--mint-100);
  border-radius: var(--radius-md);
}
/* mint medallion holding the highlight icon (matches the white-card icon tiles
   used across serve/how/platform) */
.story__h-icon{
  grid-area:icon;
  align-self:center;                         /* center the medallion against the text block */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  border:1px solid var(--mint-100);
  color: var(--brand-green-dark);            /* AA: dark green glyph on white */
  box-shadow: var(--shadow-card);
}
.story__h-icon .icon{ width:1.2rem; height:1.2rem; }
.story__h-term{
  grid-area:term;
  align-self:end;
  font-family: var(--font-ui);
  font-size:1rem;
  font-weight:700;
  letter-spacing:-0.01em;
  color: var(--brand-green-dark);            /* AA on the mint tile */
}
.story__h-desc{
  grid-area:desc;
  font-family: var(--font-body);
  font-size:.9rem;
  line-height:1.5;
  color: var(--color-ink-soft);
}

/* ============================ 6g. FAQ ============================= */
/* Frequently-asked questions: an accessible disclosure accordion with a
   WORKING live search filter. Reuses the established rhythm (eyebrow → h2 →
   lead) + a "Still have questions?" CTA on the right (mirroring the platform
   intro), then a labelled search field, then the accordion.

   CLARITY-FIRST LAYOUT: one centered, capped reading column (search + list
   both sit in --faq-col). Built MOBILE-FIRST; the only responsive change is
   the intro going copy-left / CTA-right at >=768px (see that breakpoint).

   OVERFLOW CONTRACT (the #1 priority): nothing here is sized or positioned
   against the viewport — the column is a centered max-width inside the
   .container, the panels animate only their max-height/opacity (no width), and
   long words wrap (overflow-wrap). So the page can never widen at any width. */
.faq{
  position:relative;
  isolation:isolate;            /* keep the glow layered behind, locally */
  overflow:hidden;              /* clip the decorative glow to this section */
  padding-block: var(--space-10);
  /* the shared comfortable reading column for the search + accordion */
  --faq-col: 760px;
}
/* Decorative brand glow — anchored TOP-CENTER (distinct from hero corners,
   serve center, how bottom-right, loop top-left, platform top-right, story
   mid-left). Faint and behind content, so it never reduces text contrast. */
.faq__glow{
  position:absolute;
  z-index:-1;
  top:-16%;
  left:50%;
  transform: translateX(-50%);
  /* capped to the same max as the other section glows (was 700px) so this
     top-center glow doesn't read larger/louder than the rest of the page */
  width: clamp(300px, 44vw, 640px);
  aspect-ratio:1;
  background: radial-gradient(circle at 50% 35%,
              var(--brand-green-bright), var(--brand-green) 72%);
  opacity: var(--glow-opacity);   /* normalized up to the shared intensity (was .08) */
  filter: blur(10px);
  border-radius: 58% 42% 45% 55% / 50% 48% 52% 50%;
  pointer-events:none;
}

/* --- Intro: copy + CTA. Mobile-first single column (CTA below the copy);
       becomes copy-left / CTA-right at the >=768px breakpoint (same as the
       platform section). Centered to the reading column. --- */
.faq__intro{
  max-width: var(--faq-col);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: var(--space-5);
}
.faq__intro-copy{ min-width:0; }
.faq__title{
  font-size: var(--fs-h2);
  font-weight:700;
  letter-spacing:-0.02em;
  margin-top: var(--space-5);
  text-wrap: balance;
}
.faq__title .accent{ color: var(--brand-green); }
.faq__lead{
  font-size: var(--fs-lead);
  color: var(--color-ink-soft);
  margin-top: var(--space-4);
}
.faq__intro-cta{ flex:0 0 auto; }

/* ====================================================================
   PART 4 — the search field
   ==================================================================== */
.faq__search{
  max-width: var(--faq-col);
  margin: var(--space-8) auto 0;
}
/* the field shell: a rounded, mint-tinted search box matching the chips/eyebrow
   family. A leading search icon + a trailing clear button flank the input. */
.faq-search{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem .65rem .5rem .9rem;
  background: var(--color-bg);
  border:1px solid var(--color-line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
/* lift the box border to brand green when the input inside is focused (the
   input's own focus ring is suppressed in favour of this on-field treatment) */
.faq-search:focus-within{
  border-color: var(--brand-green);
  box-shadow: var(--shadow-soft);
}
.faq-search__icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--brand-green-dark);   /* AA-safe green on white */
}
.faq-search__icon .icon{ width:20px; height:20px; }
.faq-search__input{
  flex:1 1 auto;
  min-width:0;                      /* lets the field shrink, never overflow */
  border:0;
  background:transparent;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight:500;
  color: var(--color-ink);
  padding:.45rem 0;
  line-height:1.3;
}
.faq-search__input::placeholder{ color: var(--color-ink-soft); opacity:.85; }
/* the field shell carries the focus treatment, so suppress the input's own ring
   (the shell's :focus-within border + shadow is the visible focus indicator) */
.faq-search__input:focus{ outline:none; }
.faq-search__input:focus-visible{ outline:none; }
/* hide the native search clear (we provide our own consistent × button) */
.faq-search__input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }

/* our custom clear button — a small mint pill matching the carousel buttons */
.faq-search__clear{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px; height:34px;
  background: var(--mint-50);
  border:1px solid var(--mint-100);
  border-radius: var(--radius-pill);
  color: var(--brand-green-dark);
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.faq-search__clear .icon{ width:16px; height:16px; }
.faq-search__clear:hover{ background: var(--mint-100); border-color: var(--brand-green); }
.faq-search__clear:active{ transform: scale(.92); }
/* author display above would defeat the [hidden] attribute → restore it so the
   clear button only appears once there is a query (JS toggles .hidden) */
.faq-search__clear[hidden]{ display:none; }

/* polite live region announcing the result count (e.g. "3 results"). Quiet,
   secondary; reserves a line so the list doesn't jump when text appears. */
.faq-search__status{
  min-height:1.25rem;
  margin-top: var(--space-3);
  padding-inline:.25rem;
  font-family: var(--font-ui);
  font-size:.85rem;
  font-weight:500;
  color: var(--color-ink-soft);     /* ~7:1 on white (AA) */
}

/* ====================================================================
   PART 3 — the accordion
   ==================================================================== */
.faq__list{
  max-width: var(--faq-col);
  margin: var(--space-6) auto 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap: var(--space-4);
}

/* one Q&A item — a curvy white card matching the serve/bento card family */
.faq-item{
  position:relative;
  background: var(--color-bg);
  border:1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  /* open/close animates max-height (set inline by JS) + a clip so the panel
     reveals smoothly; overflow hidden keeps the rounded corners crisp */
  overflow:hidden;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
/* the open item gets a green edge + lift so the active question stands out */
.faq-item.is-open{
  border-color: var(--mint-100);
  box-shadow: var(--shadow-soft);
}
/* the <h3> wrapper carries no visual weight — it exists purely so AT users can
   navigate questions by heading. Reset its inherited heading sizing. */
.faq-item__h{
  margin:0;
  font:inherit;
  line-height:inherit;
}

/* the disclosure trigger — a full-width button: [num] [question] [chevron] */
.faq-item__trigger{
  display:grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items:center;
  gap: var(--space-4);
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);   /* match the card so the focus ring is tidy */
  transition: background var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine){
  .faq-item__trigger:hover{ background: var(--mint-50); }
}
/* keyboard focus ring sits inside the rounded card edge */
.faq-item__trigger:focus-visible{ outline-offset:-3px; }

/* decorative 01–08 number accent (aria-hidden) */
.faq-item__num{
  font-family: var(--font-heading);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:0;
  line-height:1;
  color: var(--brand-green-dark);    /* small bold green → AA on white */
  font-variant-numeric: tabular-nums;
}
.faq-item__q{
  min-width:0;
  font-family: var(--font-heading);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem);
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.35;
  color: var(--color-ink);
  text-wrap: balance;
  overflow-wrap:anywhere;            /* long tokens wrap → never widen the page */
}
/* matched-substring highlight (<mark>): mint pill, dark-green text.
   --brand-green-dark on --mint-50 is ~6.0:1 → clears WCAG AA. */
.faq-item__q mark{
  background: var(--mint-100);
  color: var(--brand-green-dark);
  border-radius: 4px;
  padding: 0 .12em;
}

/* chevron medallion — rotates 180° when the item opens */
.faq-item__chevron{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px; height:34px;
  border-radius: var(--radius-pill);
  background: var(--mint-50);
  border:1px solid var(--mint-100);
  color: var(--brand-green-dark);
  transition: transform var(--dur) var(--ease),
              background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.faq-item__chevron .icon{ width:18px; height:18px; }
.faq-item.is-open .faq-item__chevron{
  transform: rotate(180deg);
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: var(--color-on-brand);      /* white chevron on green when open */
}

/* answer panel — collapsed by default (max-height:0). JS animates max-height to
   the measured content height on open, then clears it so reflow stays correct.
   Opacity + a slight translate add polish; both settle instantly under
   reduced-motion (see that block). */
.faq-item__panel{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition: max-height var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}
.faq-item.is-open .faq-item__panel{ opacity:1; }
/* inner wrapper holds the real padding so the collapsing max-height animation
   doesn't fight vertical padding (which would jump at 0 height) */
.faq-item__answer{
  padding: 0 var(--space-5) var(--space-5);
  /* indent the answer to line up under the question text (past the number),
     using the trigger's number column + gap; falls back gracefully if unset */
  padding-left: calc(var(--space-5) + 1.6rem + var(--space-4));
}
.faq-item__answer p{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink-soft);
  max-width: 60ch;
  overflow-wrap:anywhere;
}

/* ====================================================================
   "No results" empty state
   ==================================================================== */
.faq__empty{
  max-width: var(--faq-col);
  margin: var(--space-6) auto 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  background: var(--color-bg);
  border:1px dashed var(--mint-100);   /* dashed → reads as a transient state */
  border-radius: var(--radius-lg);
}
/* the author display:flex above would otherwise defeat the [hidden] attribute,
   so the empty state would always show — restore [hidden] = not rendered. JS
   reveals it only when a query matches nothing. */
.faq__empty[hidden]{ display:none; }
.faq__empty-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px; height:52px;
  border-radius: var(--radius-pill);
  background: var(--mint-50);
  border:1px solid var(--mint-100);
  color: var(--brand-green-dark);
}
.faq__empty-icon .icon{ width:26px; height:26px; }
.faq__empty-text{
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  color: var(--color-ink-soft);
  max-width: 46ch;
  overflow-wrap:anywhere;            /* the echoed query can be arbitrary */
}

/* ========================== 6h. CONNECT ========================== */
/* The final content section: an info column (left) + a contact form card
   (right). The form card is the focal interactive element — clean, friendly,
   white, soft-shadowed, curvy. Reuses the established rhythm (eyebrow → h2 →
   lead) + the shared .btn / .chip / .icon system.

   BUILT MOBILE-FIRST: a single column, info first then the form card. From
   900px it becomes a two-column grid [info | form]. Both tracks are
   minmax(0,1fr)-style inside the centered .container, and every input is
   width:100% + box-sizing:border-box (inherited from the global reset), so the
   page never widens and no field can spill (the overflow contract). */
.connect{
  position:relative;
  isolation:isolate;            /* keep the glow layered behind, locally */
  overflow:hidden;              /* clip the decorative glow to this section */
  padding-block: var(--space-10);
}
/* Decorative brand glow — anchored BOTTOM-LEFT (distinct from hero corners,
   serve center, how bottom-right, loop top-left, platform top-right, story
   mid-left, faq top-center). Faint and behind content; never over text. */
.connect__glow{
  position:absolute;
  z-index:-1;
  left:-12%;
  /* bleed off the LEFT edge, mid-section — NOT off the bottom. The bottom abuts
     the footer, and overflow:hidden would clip the glow into a hard line right
     at that seam. Keeping it well above the bottom keeps the transition smooth;
     a transparent outer stop also softens the blob so it never reads as an edge. */
  top:26%;
  width: clamp(300px, 44vw, 640px);
  aspect-ratio:1;
  background: radial-gradient(circle at 40% 55%,
              var(--brand-green-bright), var(--brand-green) 52%, transparent 80%);
  opacity: var(--glow-opacity);
  filter: blur(10px);
  border-radius: 42% 58% 63% 37% / 47% 42% 58% 53%;
  pointer-events:none;
}

/* --- Layout shell: single column on mobile (info above the form) --- */
.connect__inner{
  display:flex;
  flex-direction:column;
  gap: var(--space-8);
}
.connect__info,
.connect__card{ min-width:0; }

/* ====================================================================
   LEFT — info column
   ==================================================================== */
.connect__title{
  font-size: var(--fs-h2);
  font-weight:700;
  letter-spacing:-0.02em;
  margin-top: var(--space-5);
  text-wrap: balance;
}
.connect__title .accent{ color: var(--brand-green); }
.connect__lead{
  font-size: var(--fs-lead);
  color: var(--color-ink-soft);
  max-width: 52ch;
  margin-top: var(--space-4);
}

/* CTA row — wraps on narrow widths; both pills can go full-width on the
   tightest phones (see the small-phone breakpoint). */
.connect__actions{
  display:flex;
  flex-wrap:wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* trust line — a stacked list of icon + label rows */
.connect__trust{
  display:flex;
  flex-direction:column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.connect-trust__item{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight:500;
  color: var(--color-ink);
}
/* mint medallion holding the trust icon — same family as the serve/loop tiles.
   dark-green glyph keeps the small accent AA-safe on the light tile. */
.connect-trust__icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  border-radius: var(--radius-pill);
  background: var(--mint-50);
  border:1px solid var(--mint-100);
  color: var(--brand-green-dark);
}
.connect-trust__icon .icon{ width:1.15rem; height:1.15rem; }

/* ====================================================================
   RIGHT — the contact form card (the focal element)
   ==================================================================== */
.connect__card{
  position:relative;
  overflow:hidden;                   /* clip the top brand-accent bar */
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  background: var(--color-bg);
  border:1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);    /* the green-tinted lift — it's the focal card */
}
/* slim brand-green accent bar across the top edge (echoes the story quote card)
   so the form reads as a deliberate, branded surface */
.connect__card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background: linear-gradient(90deg,
              var(--brand-green-bright), var(--brand-green));
}

/* --- Form head --- */
.connect-form__head{ margin-bottom: var(--space-5); }
.connect-form__title{
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
  font-weight:700;
  letter-spacing:-0.01em;
  color: var(--color-ink);
}
.connect-form__sub{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-ink-soft);
  margin-top: var(--space-2);
}

/* --- A single field (label above input) --- */
.field{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  margin-bottom: var(--space-4);
  border:0;                          /* reset for the <fieldset> variant */
  padding:0;
  min-width:0;
}
.field__label{
  font-family: var(--font-ui);
  font-size:.9rem;
  font-weight:600;
  letter-spacing:-0.005em;
  color: var(--color-ink);
}
.field__opt{
  font-weight:500;
  color: var(--color-ink-soft);      /* "(optional)" reads as a quiet aside */
}

/* the input / textarea — curvy, comfortable, full-width. width:100% +
   box-sizing:border-box (global reset) means it fills the column and can never
   overflow regardless of padding. */
.field__input{
  width:100%;
  min-width:0;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight:500;
  color: var(--color-ink);
  background: var(--color-bg);
  border:1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding:.8rem 1rem;
  line-height:1.4;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.field__input::placeholder{ color: var(--color-ink-soft); opacity:.85; }
.field__textarea{
  resize:vertical;
  min-height:6.5rem;
}
/* on-field focus treatment: a green ring + soft mint glow (complements the
   global :focus-visible). Applied to mouse + keyboard so the field always
   reads as active when focused. */
.field__input:focus{
  outline:none;
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px var(--mint-100);
}
/* keyboard users still get the global high-contrast ring on top */
.field__input:focus-visible{
  outline: 3px solid var(--brand-green);
  outline-offset: 2px;
}
/* invalid state (JS sets aria-invalid="true"): red-free, on-brand error styling
   using the existing ink/line system is too quiet for an error, so we tint the
   border with the brand-dark green and rely on the explicit message + icon to
   convey "needs attention". (No new color tokens — see design constraints.) */
.field__input[aria-invalid="true"]{
  border-color: var(--brand-green-dark);
  box-shadow: 0 0 0 3px var(--mint-50);
}

/* inline error message — tied to the field via aria-describedby. dark-green
   glyph + ink-soft text (AA on white). [hidden] guard required because the
   base rule sets display:flex (would otherwise defeat the hidden attribute). */
.field__error{
  display:flex;
  align-items:flex-start;
  gap:.4em;
  font-family: var(--font-ui);
  font-size:.82rem;
  font-weight:500;
  line-height:1.4;
  color: var(--color-ink-soft);
}
.field__error[hidden]{ display:none; }
.field__error .icon{
  flex:0 0 auto;
  width:1.05em; height:1.05em;
  margin-top:.1em;
  color: var(--brand-green-dark);
}

/* --- "I am a" radiogroup as mint chip pills --- */
.chips-field{ margin-bottom: var(--space-5); }
.chips-field__legend{
  /* a <legend> doesn't inherit .field__label's block flow inside the flex
     fieldset cleanly, so give it its own bottom gap */
  margin-bottom:.55rem;
  padding:0;
}
.chips-field__options{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:.6rem;
}
/* Each option is an ICON CARD: the visible card is the <label>; the radio is
   visually hidden but focusable, so arrow-key selection + the focus ring both
   work. Selected/focus styling is driven from the (hidden) input via :checked
   sibling combinators and :has() on the card. */
.persona-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.8rem .9rem;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border:1.5px solid var(--color-line);
  cursor:pointer;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.persona-card__input{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
/* icon medallion — mint disc + green glyph at rest (family w/ serve-cards) */
.persona-card__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:38px; height:38px;
  border-radius: var(--radius-pill);
  background: var(--mint-50);
  border:1px solid var(--mint-100);
  color: var(--brand-green);
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.persona-card__icon .icon{ width:20px; height:20px; }
.persona-card__label{
  font-family: var(--font-ui);
  font-size:.88rem;
  font-weight:600;
  line-height:1.15;
  color: var(--color-ink);
}
/* check badge — hidden at rest, springs in when the card is selected */
.persona-card__check{
  position:absolute;
  top:.5rem; right:.5rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px; height:18px;
  border-radius:50%;
  background: var(--brand-green);
  color: var(--color-on-brand);
  opacity:0; transform: scale(.6);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.persona-card__check .icon{ width:11px; height:11px; }
@media (hover: hover) and (pointer: fine){
  .persona-card:hover{
    border-color: var(--mint-100);
    background: var(--mint-50);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
  }
}
.persona-card:active{ transform: translateY(0); }
/* SELECTED card → green ring + mint fill + soft lift */
.persona-card:has(.persona-card__input:checked){
  border-color: var(--brand-green);
  background: var(--mint-50);
  box-shadow: var(--shadow-soft);
}
/* selected medallion fills with the brand gradient, glyph flips white */
.persona-card__input:checked ~ .persona-card__icon{
  background: linear-gradient(135deg, var(--brand-green), var(--brand-green-bright));
  border-color: transparent;
  color: var(--color-on-brand);
}
.persona-card__input:checked ~ .persona-card__label{ color: var(--brand-green-dark); }
.persona-card__input:checked ~ .persona-card__check{ opacity:1; transform: scale(1); }
/* keyboard focus ring on the card when its (visually-hidden) radio is focused */
.persona-card:has(.persona-card__input:focus-visible){
  outline: 3px solid var(--brand-green);
  outline-offset: 2px;
}

/* --- Submit + response-time note --- */
.connect-form__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.connect-form__submit{ flex:0 0 auto; }
.connect-form__note{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family: var(--font-ui);
  font-size:.85rem;
  font-weight:500;
  color: var(--color-ink-soft);      /* ~7:1 on white (AA) */
}
.connect-form__note .icon{
  flex:0 0 auto;
  width:1.05em; height:1.05em;
  color: var(--brand-green-dark);    /* gentle green accent, AA */
}

/* ====================================================================
   Friendly inline success state (replaces the form on a valid submit)
   ==================================================================== */
.connect-success{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: var(--space-4);
  /* match the form's vertical footprint loosely so the card doesn't collapse */
  padding-block: var(--space-4);
}
/* author display:flex above defeats the [hidden] attribute, so the success
   state would always show — restore [hidden] = not rendered. JS reveals it
   only after a valid submit. (See the standing [hidden]-guard rule.) */
.connect-success[hidden]{ display:none; }
/* round green check medallion — solid brand-dark green, white glyph (AA) */
.connect-success__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px; height:56px;
  border-radius: var(--radius-pill);
  background: var(--brand-green-dark);
  color: var(--color-on-brand);
  box-shadow: var(--shadow-soft);
}
.connect-success__icon .icon{ width:28px; height:28px; }
.connect-success__title{
  font-size: clamp(1.3rem, 1.15rem + .8vw, 1.6rem);
  font-weight:700;
  letter-spacing:-0.01em;
  color: var(--color-ink);
  text-wrap: balance;
}
/* We move focus to this heading on submit so SR + keyboard users land on the
   confirmation — but it's a non-interactive heading focused programmatically,
   so suppress the global :focus-visible ring that would otherwise box the text. */
.connect-success__title:focus,
.connect-success__title:focus-visible{ outline:none; }
.connect-success__text{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink-soft);
  max-width: 48ch;
}
.connect-success__back{ margin-top: var(--space-2); }

/* ============================= 7. FOOTER ========================== */
/* A designed close to the page (not a bare copyright line): a brand block + a
   compact sitemap that reuses the section anchors, over a faint mint wash so
   the footer reads as part of the same designed surface as the sections above.
   BUILT MOBILE-FIRST: the top area is a single column that becomes a
   [brand | links | links] row at >=720px; the bottom bar stacks then splits
   left/right at >=560px. Everything sits in the centered .container with
   min-width:0 + wrapping, so the footer can never widen the page. Tokens only —
   no new colors or fonts. */
.site-footer{
  position:relative;
  isolation:isolate;            /* keep the glow layered behind, locally */
  overflow:hidden;              /* clip the decorative glow to the footer */
  /* sit FLUSH under the Connect section (no margin gap) so the footer reads as
     the page's natural close rather than a detached block. SEAMLESS TRANSITION:
     the footer's BASE is the page white (--color-bg) — identical to the Connect
     section above — so the footer's TOP EDGE is white everywhere and the seam is
     white-on-white (truly no horizontal line). The mint character is brought in
     as two side-anchored elliptical washes ("D"s facing the side walls): each is
     densest at its viewport edge and fades to transparent toward the centre, so
     the tint reads as a soft vertical curve from the sides — NOT a full-width
     horizontal band that would re-draw a "mint begins here" seam.
       Both Ds are centred LOW (at y 64%, sized ~78% tall) so they never reach the
     footer's top edge — the top stays uniformly white and the seam stays seamless.
     These are background gradients painted on the element box itself, so they're
     clipped by the footer (overflow:hidden) and can never widen the page.
     No hairline divider and no top/bottom full-width gradient (both drew a line). */
  background:
    /* LEFT "D" — an upright ellipse whose flat side sits on the LEFT wall and whose
       curve bulges inward: mint densest at the wall, fading to transparent toward
       the centre. Deliberately NARROW (30% of the width) so it can never reach the
       centre (no centre tint, no full-width band), and anchored LOW (centre at y82%)
       so its top falls well below the footer's top edge — the top stays pure white
       and the Connect→footer seam is white-on-white (seamless). */
    radial-gradient(30% 75% at 0% 82%,
      var(--mint-100)  0%,
      var(--mint-50)   40%,
      transparent      74%),
    /* RIGHT "D" — mirror of the above against the right wall, for a balanced frame */
    radial-gradient(30% 75% at 100% 82%,
      var(--mint-100)  0%,
      var(--mint-50)   40%,
      transparent      74%),
    /* base surface = page white, so the footer's top edge matches the Connect
       section above and the seam carries no colour edge */
    var(--color-bg);
  padding-block: var(--space-8) var(--space-6);
}
/* faint brand glow — bottom-center, same family + shared intensity as the
   section glows so the footer shares the page's ambience. Decorative.
   Kept as a WIDE, SHORT ellipse anchored low (not the old 1:1 circle, whose
   height reached the footer top and bled a faint tint up the centre to the
   Connect→footer seam). Its halo now stays in the footer's lower band, so the
   footer top remains uniformly white and the seam stays seamless. */
.site-footer__glow{
  position:absolute;
  z-index:-1;
  left:50%;
  bottom:-30%;
  transform: translateX(-50%);
  width: clamp(320px, 60vw, 760px);
  height: clamp(150px, 22vw, 300px);   /* flat ellipse — was aspect-ratio:1 (too tall) */
  background: radial-gradient(ellipse at 50% 65%,
              var(--brand-green-bright), var(--brand-green) 72%, transparent 88%);
  opacity: var(--glow-opacity);
  filter: blur(10px);
  border-radius: 58% 42% 45% 55% / 50% 48% 52% 50%;
  pointer-events:none;
}

/* --- Top area: brand + the two link columns --- */
.site-footer__top{
  display:grid;
  grid-template-columns: minmax(0,1fr);   /* mobile: single column */
  gap: var(--space-8);
  padding-bottom: var(--space-8);
}

/* brand block */
.site-footer__brand{ min-width:0; max-width: 38ch; }
.site-footer__logo-link{
  display:inline-flex;
  align-items:center;
  border-radius: var(--radius-sm);   /* tidy focus ring */
}
.site-footer__logo{
  height:42px;
  width:auto;
  transform-origin:left center;
  transition: transform var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine){
  .site-footer__logo-link:hover .site-footer__logo{ transform: scale(1.05); }
}
.site-footer__tagline{
  font-family: var(--font-body);
  font-size:.95rem;
  line-height:1.6;
  color: var(--color-ink-soft);
  margin-top: var(--space-4);
}
/* small trust badges — the same mint-pill family as the hero trust row */
.site-footer__badges{
  display:flex;
  flex-wrap:wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.site-footer__badge{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family: var(--font-ui);
  font-size:.8125rem;
  font-weight:500;
  color: var(--color-ink-soft);
  background: var(--color-bg);
  border:1px solid var(--color-line);
  padding:.45em .85em;
  border-radius: var(--radius-pill);
}
.site-footer__badge .icon{
  color: var(--brand-green);     /* tint the masked glyph green */
  width:1.1em; height:1.1em;
  flex:0 0 auto;
}

/* link columns */
.site-footer__nav{ min-width:0; }
.site-footer__nav-title{
  font-family: var(--font-eyebrow);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--brand-green-dark);   /* small green label → AA on the light wash */
}
.site-footer__links{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  margin-top: var(--space-4);
}
/* link styling mirrors the header nav links: ink → dark-green on hover/focus,
   with a center-growing underline so the interaction language is consistent */
.site-footer__link{
  position:relative;
  display:inline-flex;
  align-self:flex-start;       /* shrink the hit/underline to the text width */
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  font-weight:500;
  color: var(--color-ink);
  padding:.15rem 0;
  transition: color var(--dur) var(--ease);
}
.site-footer__link::after{
  content:"";
  position:absolute;
  left:0; bottom:-.05rem;
  width:0; height:2px;
  background: var(--brand-green);
  border-radius: var(--radius-pill);
  transition: width var(--dur) var(--ease);
}
.site-footer__link:hover,
.site-footer__link:focus-visible{ color: var(--brand-green-dark); }
.site-footer__link:hover::after,
.site-footer__link:focus-visible::after{ width:100%; }

/* --- Bottom bar: copyright + a small "made for…" line --- */
.site-footer__bar{
  display:flex;
  flex-direction:column;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top:1px solid var(--color-line);
}
.site-footer__copy{
  font-family: var(--font-ui);
  font-size:.85rem;
  color: var(--color-ink-soft);
}
.site-footer__made{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family: var(--font-ui);
  font-size:.85rem;
  color: var(--color-ink-soft);
}
.site-footer__made .icon{
  color: var(--brand-green-dark);   /* gentle green accent, AA */
  width:1.05em; height:1.05em;
  flex:0 0 auto;
}

/* tablet/desktop: brand gets the lead column, the two link groups sit to its
   right; the bottom bar splits left/right */
@media (min-width: 720px){
  .site-footer__top{
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items:start;
  }
}
@media (min-width: 560px){
  .site-footer__bar{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap: var(--space-4);
  }
}

/* ========================= RESPONSIVE: DESKTOP ===================== */
/* Two-column hero from the medium breakpoint up */
@media (min-width: 768px){
  .hero__inner{
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  }
  .hero__copy{ text-align:left; }
  .hero__lead{ margin-inline:0; }
  .hero__actions,
  .hero__trust{ justify-content:flex-start; }

  /* Two-column hero: the phone sits in the right column, so the floating
     cards now have room to extend LEFT past the phone toward the copy — that
     is the SAFE direction (empty grid gap + copy column, never the viewport
     edge). The wearable and toast push left to "pop" off the phone.
     The profile sits over the phone's RIGHT edge but stays anchored INSIDE
     the visual column (right:0) here: between 768–1180px the container spans
     nearly the full viewport, so pushing it further right would clip. It gets
     its outward nudge only at very wide viewports below, where the centered
     1180px container guarantees a page margin to occupy. */
  .float-card--wearable{ top: 7%;  left: -14%; }
  .float-card--profile{  top: 32%; right: 0; width: 15.5rem; }
  .float-card--toast{    bottom: 9%; left: -8%; }
}

/* Wide viewports: the .hero__inner container is capped at --maxw (1180px) and
   centered. Just above 1180 the side margin is only a few px — not enough to
   absorb an outward push — so we wait until >=1280px (>=50px margin each side)
   before letting the profile card peek past the phone's right edge. The ~7%
   nudge (~17px) then clears comfortably, so it adds "pop" with zero overflow. */
@media (min-width: 1280px){
  .float-card--profile{ right: -7%; }
}

@media (min-width: 1024px){
  :root{ --header-h: 92px; }   /* matches base: 50px logo keeps ~21px breathing room */
  .device{ width: clamp(280px, 28vw, 320px); }
}

/* ====================== RESPONSIVE: MOBILE NAV ===================== */
/* Below 860px: links + CTA collapse into a curvy slide-in drawer */
@media (max-width: 860px){
  .nav-toggle{ display:inline-flex; }

  .nav-menu{
    position:fixed;
    top:0; right:0;
    /* The header sets backdrop-filter, which makes it the containing block
       for fixed descendants — so `bottom:0` would resolve against the header,
       not the viewport (collapsing the drawer). Use viewport-relative height
       instead so the panel always spans the full screen height. */
    height:100vh;
    height:100dvh;            /* dynamic viewport unit where supported */
    z-index:95;
    width: min(86vw, 360px);
    background: var(--color-bg);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    box-shadow: -24px 0 60px -30px rgba(10,10,10,.4);
    padding: calc(var(--header-h) + var(--space-4)) var(--space-6) var(--space-6);
    display:flex;
    flex-direction:column;
    gap: var(--space-2);
    /* off-canvas until opened */
    transform: translateX(105%);
    visibility:hidden;
    transition: transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav-menu.is-open{
    transform: translateX(0);
    visibility:visible;
  }

  /* stacked links: full-width tappable rows */
  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
  }
  .nav-link{
    display:block;                 /* fill the row so the divider spans the full width */
    padding:.9rem 0;
    border-bottom:1px solid var(--color-line);
    font-size:1.05rem;
  }
  /* The drawer is a WHITE panel, so its links must be dark INK even when the
     header isn't scrolled (over the hero). This overrides the over-hero
     white-link rule, which is scoped to the desktop bar but matches here too
     because the drawer keeps .nav-link inside the non-scrolled header. */
  .nav-link,
  .site-header:not(.is-scrolled) .nav-link{ color: var(--color-ink); }
  .nav-link:hover,
  .nav-link:focus-visible,
  .site-header:not(.is-scrolled) .nav-link:hover,
  .site-header:not(.is-scrolled) .nav-link:focus-visible{ color: var(--brand-green-dark); }
  /* separators sit BETWEEN rows only — no dangling line after the last link */
  .nav-list li:last-child .nav-link{ border-bottom:0; }
  /* underline animation off in the drawer; use a clean color shift instead */
  .nav-link::after{ display:none; }

  /* CTA becomes a full-width pill at the bottom of the drawer */
  .nav-cta{
    margin-top: var(--space-5);
    display:block;
  }
  .nav-cta .btn{
    width:100%;
    justify-content:center;
  }

  /* lock background scroll while the drawer is open (class set by JS on <body>) */
  body.nav-open{ overflow:hidden; }
}

/* keep the hamburger hidden on wide screens even if JS is slow to init */
@media (min-width: 861px){
  .nav-toggle,
  .nav-backdrop{ display:none; }
}

/* ============== RESPONSIVE: FLOATING CARDS ON STACKED HERO ========= */
/* Below 768px the hero is single-column and the phone is centered + small,
   so three full-size cards would crowd it. Scale them down a touch and trim
   the profile's width/reach so they read as light glanceable accents over a
   small phone rather than panels that bury the menu. (Placement stays the
   mobile-first one defined on .float-card--* above.) */
@media (max-width: 767px){
  .float-card{ padding:.55rem .65rem; gap:.5rem; border-radius: var(--radius-sm); }
  .float-card__icon{ width:28px; height:28px; }
  .float-card__icon .icon{ width:15px; height:15px; }
  .float-card__line{ font-size:.72rem; }
  .float-card__eyebrow{ font-size:.58rem; }
  /* wearable: trim the strain figure + action line so the card stays compact */
  .float-card__metric{ font-size:.9rem; }
  .float-card__sub{ font-size:.66rem; }
  .float-card--profile{ width: min(13.5rem, 72%); gap:.45rem; }
  .float-card--profile .chip{ font-size:.64rem; padding:.34em .6em; }
  /* profile flag + safe row: ease padding/type to match the tighter card */
  .profile-flag{ padding:.35rem .45rem; gap:.4rem; }
  .profile-flag__icon{ width:23px; height:23px; }
  .profile-flag__value{ font-size:.74rem; }
  .profile-flag__pill{ font-size:.55rem; padding:.32em .5em; }
  .profile-safe{ font-size:.66rem; }
}

/* ===================== RESPONSIVE: SMALL PHONES =================== */
/* On the narrowest screens, stack the two CTAs full-width so neither
   nowrap pill can overflow, and ease type/padding a touch. */
@media (max-width: 460px){
  .hero__actions{
    flex-direction:column;
    align-items:stretch;
  }
  .hero__actions .btn{
    width:100%;
    justify-content:center;
  }

  /* Connect CTAs: the primary pill ("Bring WiseDine to my campus") is a long
     nowrap label, so stack both buttons full-width here to guarantee neither
     can overflow the narrow viewport. */
  .connect__actions{
    flex-direction:column;
    align-items:stretch;
  }
  .connect__actions .btn{
    width:100%;
    justify-content:center;
  }

  /* Tight phones get just two cards: the toast (a simple confirmation, the
     least information-dense of the three) is hidden so the wearable + profile
     callouts stay uncluttered and don't pile over the small phone. It returns
     at >=461px. The profile also shifts up slightly to clear the menu list. */
  .float-card--toast{ display:none; }
  .float-card--profile{ top: 30%; }
}

/* ================= RESPONSIVE: WHO-WE-SERVE CAROUSEL =============== */
/* Cards-per-view scales with the breakpoints the hero already uses, so the
   layout feels of-a-piece: ~1 (mobile) → ~2 (tablet) → ~3 (desktop), each
   with a sliver of the next card peeking to signal the track scrolls.
   Only --per/--peek change; the card-basis recipe handles the math, and
   because it is relative to the track width the page never widens. */
@media (min-width: 768px){
  .carousel__track{ --per: 2; --peek: 0.18; }
}
@media (min-width: 1024px){
  .carousel__track{ --per: 3; --peek: 0.2; }
}
/* Above the capped container there is no more width to gain from peeking, so
   ease the peek down for a tidier 3-up grid on very wide screens. */
@media (min-width: 1280px){
  .carousel__track{ --peek: 0.12; }
}

/* ===================== RESPONSIVE: HOW-IT-WORKS =================== */
/* From the medium breakpoint up, the three stops lay out LEFT → RIGHT as a
   3-track grid threaded by the HORIZONTAL road connector. The mobile vertical
   spine is switched off and the road is switched on, running through the
   medallions' vertical center. Tracks are minmax(0,1fr) so they shrink cleanly
   and the row can never widen the page. */
@media (min-width: 768px){
  /* swap the spine for the road */
  .how__steps::before{ display:none; }
  .how__connector{
    display:block;
    position:absolute;
    /* span the medallion ROW only: from the top of the grid down by one
       medallion height, so the band's vertical CENTER (where the bed + lane +
       arrowhead sit) lands on the medallion centers. Inset horizontally to the
       column centers (half a track on each side) so the road starts/ends UNDER
       the first/last medallion, not at the page edge. */
    top:0;
    height: var(--node);
    left: calc(100% / 6);
    right: calc(100% / 6);
    z-index:0;
    pointer-events:none;
  }

  .how__steps{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items:start;
    gap: var(--space-6);
  }

  /* each stop becomes a centered column: medallion on top, copy beneath */
  .step{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "node"
      "body";
    row-gap: var(--space-5);
    justify-items:center;
    text-align:center;
  }
  /* medallion centered in its column and sitting on the road */
  .step__node{ justify-self:center; }
  .step__body{ display:flex; flex-direction:column; align-items:center; }
  .step__text{ margin-inline:auto; }
}

/* Wider desktop: a touch more air between the stops + a slightly larger
   medallion so the road row reads with more presence. (--node on .how__road so
   both the connector band and the medallions scale together.) */
@media (min-width: 1024px){
  .how__steps{ gap: var(--space-8); }
  .how__road{ --node: 60px; }
}

/* ======================= RESPONSIVE: 360° LOOP =================== */
/* From the medium breakpoint up, the vertical stepper transforms into the
   CIRCULAR loop: a fixed-size, centered, capped-width square stage carrying a
   decorative ring SVG (clockwise flow arrows) + a central WiseDine hub, with
   the five <li> stages positioned AROUND the ring.

   OVERFLOW SAFETY: the stage is clamp(320px, 60vw, 540px) — capped at 540px
   and centered with margin-inline:auto — so it sits comfortably inside the
   centered .container at every width >=768px and can never widen the page.
   Each node is pushed out along its --angle by --ring-r, which is exactly
   0.40 × the stage size (so node centers land on the r=40 SVG ring). The two
   arc cards also go side-by-side here. */
@media (min-width: 768px){
  .loop__diagram{
    max-width: none;             /* the stepper cap no longer applies */
    margin-top: var(--space-10);
  }

  /* SHARED BOTTOM SLOT (desktop affordance). Sits centered below the wheel; its
     text is mirrored from the hovered/focused node by JS (the node's blurb lives
     in its own <li> for AT). A fixed min-height reserves room so swapping copy
     never reflows the page, and the wrapper caps the measure + centers it. The
     slot is the FULL .loop__inner width but its text is capped, so it can never
     widen the page. */
  .loop__blurb-slot{
    display:block;
    max-width: 52ch;
    min-height: 3.25rem;          /* room for ~3 lines at this size; no reflow on swap */
    margin: var(--space-6) auto 0;
    text-align:center;
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height:1.55;
    color: var(--color-ink-soft);
    /* gentle fade as JS swaps the text on hover/focus */
    transition: opacity var(--dur) var(--ease);
  }
  /* the soft default prompt reads slightly quieter than a real step blurb */
  .loop__blurb-slot.is-hint{ color: var(--color-ink-soft); opacity:.85; }
  /* brief fade-out used by JS between text swaps */
  .loop__blurb-slot.is-swapping{ opacity:0; }

  /* fixed square stage — the heart of the overflow guarantee */
  .loopwheel{
    --stage: clamp(360px, 66vw, 620px);
    --ring-r: clamp(144px, 26.4vw, 248px);  /* == 0.40 × --stage (kept in sync so nodes stay on the arcs) */
    width: var(--stage);
    height: var(--stage);
    margin-inline:auto;
    display:block;               /* drop the mobile flex column */
  }

  /* ring SVG fills the stage, behind nodes + hub */
  .loopwheel__ring{
    display:block;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    overflow:visible;
  }
  .loopwheel__guide{
    fill:none;
    stroke: var(--mint-100);
    stroke-width:1.4;
  }
  /* gradient stops + arrowhead colored here (reliable token resolution) */
  .loopwheel__stop--a{ stop-color: var(--brand-green-bright); }
  .loopwheel__stop--b{ stop-color: var(--brand-green); }
  .loopwheel__arrowhead{ stroke: var(--brand-green); }
  .loopwheel__flow path{
    fill:none;
    stroke: url(#loopGrad);
    stroke-width:2;
    stroke-linecap:round;
    /* draw each arc as a long dash and march the gap slowly along it → a gentle
       "current flowing clockwise" shimmer that keeps every arrow ANCHORED
       between its two nodes (no rotation drift). Disabled in reduced-motion. */
    stroke-dasharray: 9 5;
    animation: loop-flow 1.4s linear infinite;
  }

  /* central WiseDine hub */
  .loopwheel__hub{
    display:flex;
    position:absolute;
    top:50%; left:50%;
    transform: translate(-50%,-50%);
    z-index:1;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    width: clamp(116px, 26%, 150px);
    aspect-ratio:1;
    border-radius: var(--radius-pill);
    background:
      radial-gradient(120% 120% at 30% 25%,
        var(--brand-green-bright), var(--brand-green) 72%);
    color: var(--color-on-brand);
    box-shadow: var(--shadow-soft);
  }
  /* soft live "ping" ring around the hub */
  .loopwheel__hub-ping{
    position:absolute;
    inset:0;
    border-radius:inherit;
    border:2px solid var(--brand-green-bright);
    opacity:.55;
    animation: loop-ping 3.2s var(--ease) infinite;
    pointer-events:none;
  }
  /* company logo mark, recolored white to read on the green hub
     (replaces the white "WiseDine / continuous loop" wordmark) */
  .loopwheel__hub-logo{
    width:58%;
    height:auto;
    filter: brightness(0) invert(1);
  }

  /* stages become absolutely-positioned around the ring; spine off */
  .loopwheel__stages{
    position:absolute;
    inset:0;
    display:block;
  }
  .loopwheel__stages::before{ display:none; }   /* mobile spine off */

  .loopnode{
    position:absolute;
    top:50%; left:50%;
    width: clamp(8.5rem, 8rem + 4vw, 11rem);
    /* the card surface moves back onto .loopnode__pin (the pill) here — reset
       the mobile-only surface that .loopnode carries on the stepper */
    background:none;
    border:0;
    box-shadow:none;
    padding:0;
    /* place the node center on the ring: rotate to --angle, push out by the
       ring radius, then counter-rotate the content so the pill stays upright */
    transform:
      translate(-50%,-50%)
      rotate(var(--angle))
      translateX(var(--ring-r))
      rotate(calc(-1 * var(--angle)));
  }

  /* node pill: vertical (icon over copy), centered text + the card surface */
  .loopnode__pin{
    grid-template-columns: 1fr;
    justify-items:center;
    text-align:center;
    row-gap:.5rem;
    column-gap:0;
    background: var(--color-bg);
    border:1px solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-4) var(--space-3);
    cursor: default;               /* signals these tiles are interactive targets */
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
  }
  /* hover/focus lift, consistent with the other cards */
  .loopnode__pin:hover,
  .loopnode:focus-within .loopnode__pin{
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
    border-color: var(--mint-100);
  }

  /* CIRCULAR layout shows the TITLE ONLY — the blurb is mirrored into the shared
     bottom slot (.loop__blurb-slot) on hover/focus. Keep the per-node blurb in
     the DOM for assistive tech (aria-describedby), but visually remove it so it
     can't add height to the pill or scatter around the ring. */
  .loopnode__blurb{
    position:absolute;
    width:1px; height:1px;
    margin:0; padding:0;
    overflow:hidden;
    clip-path: inset(50%);
    white-space:nowrap;
  }

  .loopwheel__return{ display:none; }   /* circular view states the loop itself */

  /* two arcs side-by-side from here up */
  .loop__arcs{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--space-6);
  }

  /* ---- PLATFORM: intro becomes copy-left / CTA-right ---- */
  .platform__intro{
    flex-direction:row;
    align-items:flex-end;          /* baseline-align the CTA to the lead */
    justify-content:space-between;
    gap: var(--space-6);
  }
  .platform__intro-cta{ padding-bottom:.2rem; }   /* nudge onto the lead's line */

  /* ---- FAQ: intro becomes copy-left / CTA-right (mirrors the platform
     intro). The CTA aligns to the lead's baseline; the copy keeps a sensible
     measure so the heading + button share the row without crowding. ---- */
  .faq__intro{
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
    gap: var(--space-6);
  }
  .faq__intro-cta{ padding-bottom:.2rem; }

  /* ---- PLATFORM bento: 2-column tablet grid. Both WIDE cards (Card 1 and the
     featured Card 6) span the full two columns; the four standard cards take
     one column each. Auto rows + stretch keep paired rows equal-height. ---- */
  .bento{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: var(--space-5);
  }
  .bento-card--wide{ grid-column: 1 / -1; }

  /* ---- STORY: the three highlights go 3-across once there's room. They stay
     3-across through the two-column desktop layout below (the copy column is
     wide enough at >=960px to carry three short items). At 3-across each card
     is narrower, so we flip the inner layout to VERTICAL (icon stacked over the
     term + desc) — cleaner than a cramped icon-beside-text row. ---- */
  .story__highlights{
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: var(--space-4);
  }
  .story__highlight{
    grid-template-columns: 1fr;              /* single column */
    grid-template-areas:
      "icon"
      "term"
      "desc";
    row-gap:.5rem;
    padding: var(--space-5);
    align-content:start;                     /* pack icon/title/desc at the top so
                                                they line up across the equal-height
                                                cards; spare space falls to the
                                                bottom rather than between rows */
  }
  .story__h-icon{ align-self:start; }
  .story__h-term{ align-self:start; }
}

/* ========================= RESPONSIVE: STORY ===================== */
/* From 960px the story becomes a true two-column block: the founder media
   card on the LEFT, the copy on the RIGHT. Below this it stays the clean
   mobile stack (heading → media → body). 960 (not 768) is chosen so the
   portrait card + the ~62ch copy each get a comfortable width and neither
   feels cramped — the "comfy" brief. The grid uses minmax(0,…) tracks inside
   the centered .container, so it can never widen the page. */
@media (min-width: 960px){
  .story__inner{
    display:grid;
    /* media noticeably narrower than the copy so the portrait reads smaller and
       the text gets more room to breathe (aesthetic balance) */
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(2.5rem, 1rem + 5vw, 5rem);
    align-items:center;          /* vertically center the copy against the card */
  }
  /* media on the left, copy on the right (reset any mobile ordering) */
  .story__media{ grid-column:1; }
  .story__copy{ grid-column:2; }

  /* the portrait can fill its column now (the column itself is capped) */
  .story__photo{ max-width:none; }

  .story__title{ margin-top: var(--space-2); }   /* eyebrow sits right above */
}

/* ======================= RESPONSIVE: CONNECT ===================== */
/* From 900px the connect section becomes a two-column block: the info column
   on the LEFT, the form card on the RIGHT. Below this it stays the clean
   mobile stack (info → form). The info column is slightly narrower so the form
   card — the focal interactive element — gets clear presence. Tracks are
   minmax(0,…) inside the centered .container, so it can never widen the page.
   align-items:start so the (often taller) form card doesn't stretch the info
   column's content vertically. */
@media (min-width: 900px){
  .connect__inner{
    display:grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
    align-items:start;
  }
  .connect__info{ grid-column:1; }
  .connect__card{ grid-column:2; }
  /* a touch more inner padding on the card now that it has room */
  .connect__card{ padding: clamp(2rem, 1.4rem + 1.4vw, 2.5rem); }
}

/* keyframes for the loop diagram (only run >=768px; reduced-motion disables) */
/* march the dash gap forward along each arc (dasharray total = 9+5 = 14) so the
   flow reads as moving clockwise toward the arrowheads, arrows stay put */
@keyframes loop-flow{
  to{ stroke-dashoffset: -14; }
}
/* how-it-works road: march the dashed lane markings toward the right-hand
   arrowhead by sliding the repeating-gradient one full period (24px) to the
   right. A whole-period shift keeps the march seamless. Only runs >=768px (the
   connector is display:none below that); reduced-motion disables it. */
@keyframes how-road-flow{
  from{ background-position-x: 0; }
  to{   background-position-x: 24px; }
}
@keyframes loop-ping{
  0%   { transform: scale(1);    opacity:.55; }
  70%  { transform: scale(1.12); opacity:0;   }
  100% { transform: scale(1.12); opacity:0;   }
}

/* Wide desktop: a touch more presence for the stage + arc gutter. */
@media (min-width: 1024px){
  .loop__arcs{ gap: var(--space-8); }

  /* ---- PLATFORM bento: the 4-column DIAGONAL layout (matches the brief).
     Named areas make the two wide cards on the diagonal explicit and robust:
       Row 1:  c1 c1 | c2 | c3        (Card 1 spans cols 1–2)
       Row 2:  c4 | c5 | c6 c6        (Card 6 spans cols 3–4, featured/green)
     Tracks are minmax(0,1fr) so they shrink cleanly; auto rows + the grid's
     default `stretch` keep both rows' cards equal-height. ---- */
  .bento{
    grid-template-columns: repeat(4, minmax(0,1fr));
    grid-template-areas:
      "c1 c1 c2 c3"
      "c4 c5 c6 c6";
    gap: var(--space-6);
  }
  /* assign each card to its area (source order = c1…c6) */
  .bento-card:nth-child(1){ grid-area: c1; }
  .bento-card:nth-child(2){ grid-area: c2; }
  .bento-card:nth-child(3){ grid-area: c3; }
  .bento-card:nth-child(4){ grid-area: c4; }
  .bento-card:nth-child(5){ grid-area: c5; }
  .bento-card:nth-child(6){ grid-area: c6; }
  /* the area assignments above place the wide cards; clear the tablet span so
     it doesn't fight the named grid */
  .bento-card--wide{ grid-column: auto; }

  /* the two wide cards lay their content out as two columns (icon+title left,
     text+chips can breathe) — but keep it simple: a roomier inner max-width so
     the wide cards don't have a lonely short text line. */
  .bento-card--wide .bento-card__text{ max-width: 60ch; }
}

/* ====================== 8. REDUCED MOTION ========================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .device{ animation:none; }
  .reveal{ opacity:1; transform:none; }
  /* floating callout cards: no drift, no pulse, settled at rest */
  .float-card{ animation:none; translate:0 0; }
  .float-card__pulse{ animation:none; }
  /* carousel: no card lift, and jump instantly instead of smooth-scrolling */
  .serve-card{ transform:none !important; }
  .carousel__track{ scroll-behavior:auto; }
  /* how-it-works: medallions rest flat (no hover/focus lift) and the road's
     dashed lane markings settle to a still stripe (no march) */
  .step__icon{ transform:none !important; }
  .how__road-lane{ animation:none; }
  /* 360° loop: ring flow shimmer + hub ping settle at rest, arrows shown as
     solid arcs. NOTE we deliberately do NOT reset .loopnode transform — on
     desktop that transform is the node's circular POSITIONING, not motion;
     only .loopnode__pin carries the hover lift, so it is the one reset here. */
  .loopwheel__flow path{ animation:none; stroke-dasharray:none; }
  .loopwheel__hub-ping{ animation:none; opacity:.45; }
  .loopnode__pin{ transform:none !important; }
  /* loop blurb slot: no fade tween, and never park at opacity:0 (JS also sets
     the text directly under reduced motion, but this guards the resting state) */
  .loop__blurb-slot{ transition:none; }
  .loop__blurb-slot.is-swapping{ opacity:1; }
  /* platform bento: cards + icon tiles rest flat (no lift/scale/rotate); the
     featured sheen parks off-screen and never sweeps. Color/contrast states
     are untouched, so everything stays fully legible at rest. */
  .bento-card,
  .bento-card__icon{ transform:none !important; }
  /* story: founder photo + overlapping quote card rest flat (no hover lift) */
  .story__photo,
  .story__quote{ transform:none !important; }
  /* FAQ: the chevron snaps (no rotate tween) and the answer panel opens/closes
     instantly. The global transition-duration:.001ms above already collapses
     the panel's max-height/opacity tween; this is an explicit guard so the open
     state is fully visible with no residual animation. */
  .faq-item__chevron{ transition:none; }
  .faq-item__panel{ transition:none; }
  /* connect: chip pills + submit rest flat (no press-scale); the form-card
     hover/focus treatments are color-only, so they stay fully legible. */
  .persona-card{ transform:none !important; }
}