:root{
  --ink:#0f150f;--muted:#5d6a5c;--bg:#f6f8f3;--card:#ffffff;--soft:#eef3ea;
  --green:#159a44;--green-dk:#0d7233;--green-deep:#08361a;--lime:#8fd35a;--orange:#f6941d;
  --mint:#dcf2e2;
  --line:rgba(15,40,20,.09);--grad:linear-gradient(115deg,#28b657,#0d7233);--grad-warm:linear-gradient(115deg,#ffb43d,#f6941d);
  --shadow:0 50px 100px -50px rgba(10,40,20,.5);--shadow-md:0 30px 60px -32px rgba(10,40,20,.4);--shadow-sm:0 14px 34px -18px rgba(10,40,20,.3);
  --disp:'Bricolage Grotesque',system-ui,sans-serif;--sans:'Plus Jakarta Sans',system-ui,sans-serif;--maxw:1240px;
  /* One curve for interface motion, one for reveals — reused everywhere. */
  --ease:cubic-bezier(.2,.8,.2,1);--ease-soft:cubic-bezier(.2,.7,.2,1);
  --hdr-h:96px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Anchor targets must clear the fixed header instead of hiding under it. */
[id]{scroll-margin-top:calc(var(--hdr-h) + 18px)}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ---------- Accessibility foundations ---------- */
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}
.btn:focus-visible,.hs-arrow:focus-visible,.hs-dot:focus-visible{outline:3px solid var(--green-dk);outline-offset:4px}
/* On the dark panels a green ring disappears. */
.app :focus-visible,.cta-box :focus-visible,footer :focus-visible,.faq-side .card :focus-visible{outline-color:#fff}
.sr-only{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{position:fixed;left:12px;top:-100px;z-index:10000;background:#fff;color:var(--ink);padding:12px 20px;border-radius:10px;font-weight:700;box-shadow:var(--shadow-sm);transition:top .25s var(--ease)}
.skip:focus{top:12px}

/* ---------- Reduced motion ----------
   Honour the OS setting: kill decorative loops, keep state changes instant.
   JS reads the same query and skips parallax, tilt and count-ups. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important;filter:none!important}
  .aurora span,.marq-track,.scrollcue span::after,.dev-float{animation:none!important}
  .hero-prog{display:none}
}
/* fine grain texture */
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
::selection{background:#bfe8cb;color:var(--green-deep)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.02;letter-spacing:-.03em}
/* A wider gradient that drifts slowly, so highlighted words shimmer rather
   than sit flat. Forced-colors mode drops the clip so the text stays legible. */
.grad-text{background:linear-gradient(115deg,#28b657,#0d7233,#28b657);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:shimmer 9s ease-in-out infinite}
.warm-text{background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.grad-text{animation:none}}
@media(forced-colors:active){
  .grad-text,.warm-text,.stat b,.price{-webkit-text-fill-color:currentColor;background:none;color:CanvasText}
}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green-dk)}
/* The dash grows in as the heading block reveals. */
.eyebrow::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease) .2s}
[data-reveal].in .eyebrow::before,.intro .eyebrow::before,.in.eyebrow::before{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.eyebrow::before{transform:scaleX(1)}}
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15.5px;padding:16px 30px;border-radius:100px;border:1px solid transparent;cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;overflow:hidden}
.btn.sm{padding:12px 22px;font-size:14px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 18px 34px -14px rgba(13,114,51,.7)}
.btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);transition:left .7s}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 26px 46px -14px rgba(13,114,51,.75)}
.btn-primary:hover::after{left:130%}
.btn-ghost{background:rgba(255,255,255,.7);border-color:var(--line);color:var(--ink);backdrop-filter:blur(10px)}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:var(--shadow-sm)}
/* Magnetic buttons lean toward the cursor. JS writes --tx/--ty; the lift on
   hover is folded into the same transform so the two don't fight. */
.magnetic{transform:translate(var(--tx,0),var(--ty,0));transition:transform .35s var(--ease),box-shadow .3s}
.magnetic:hover{transform:translate(var(--tx,0),calc(var(--ty,0) - 3px))}
.magnetic.snap{transition:transform .1s linear,box-shadow .3s}

[data-reveal]{opacity:0;transform:translateY(34px);filter:blur(8px);transition:opacity .9s var(--ease-soft),transform .9s var(--ease-soft),filter .9s}
[data-reveal].in{opacity:1;transform:none;filter:none}

/* The float keyframes the device badge always referenced but never had. */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- Page load choreography ----------
   The hero is above the fold, so it can't wait for a scroll observer.
   Each element declares its own step and rides one shared curve. */
@keyframes riseIn{from{opacity:0;transform:translateY(28px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.intro>*{opacity:0;animation:riseIn .95s var(--ease-soft) forwards;animation-delay:calc(var(--step,0) * 110ms + 120ms)}

/* Headline reveal: each line sits in an overflow-hidden mask and slides up
   from below it, so the type appears to rise out of the page. */
.reveal-line{display:block;overflow:hidden}
.reveal-line>span{display:block;transform:translateY(105%);animation:lineUp 1.05s var(--ease) forwards;animation-delay:calc(var(--step,0) * 110ms + 240ms)}
@keyframes lineUp{to{transform:none}}
@media(prefers-reduced-motion:reduce){
  .intro>*,.reveal-line>span{opacity:1;transform:none;filter:none;animation:none}
}

/* ---------- Scroll progress ---------- */
.scrollprog{position:fixed;left:0;right:0;top:0;height:3px;z-index:200;background:rgba(15,40,20,.07);pointer-events:none}
.scrollprog i{display:block;height:100%;background:var(--grad);transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* ---------- Word-by-word heading reveal ----------
   JS wraps each word in .w > i. The mask is the .w; the i slides up inside
   it. Padding/negative-margin keeps descenders (y, g, p) from being clipped
   by the mask. */
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.split .w>i{display:inline-block;font-style:normal;transform:translateY(108%);transition:transform .85s var(--ease);transition-delay:calc(var(--wi,0) * 42ms)}
.split.in .w>i{transform:none}
/* A block that owns a split heading fades only — letting it also slide would
   stack two motions on the same type and read as busy. */
[data-reveal].no-shift{transform:none!important;filter:none!important}
@media(prefers-reduced-motion:reduce){.split .w>i{transform:none!important}}

/* ---------- Scroll-driven image parallax ----------
   Native scroll timelines where supported; everything else simply gets a
   static image, which is a perfectly good outcome. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes imgDrift{from{transform:scale(1.12) translateY(-2.2%)}to{transform:scale(1.12) translateY(2.2%)}}
    .appt .ph img,.course .ph img,.recipe .ph img,.res-thumb img{
      animation:imgDrift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    /* Hover zoom must win over the drift, so re-declare it here. */
    .appt:hover .ph img,.course:hover .ph img,.recipe:hover .ph img{animation:none;transform:scale(1.07)}
  }
}

/* ---------- NAV ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;transition:.4s}
.hdr .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(246,248,243,.6);border:1px solid var(--line);border-radius:100px;padding:10px 12px 10px 22px;backdrop-filter:blur(16px) saturate(1.3);transition:.4s}
.hdr.scrolled{padding:10px 0}
.hdr.scrolled .bar{background:rgba(255,255,255,.85);box-shadow:var(--shadow-sm)}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-.02em}
.logo .mark{width:38px;height:38px;border-radius:12px;background:var(--grad);display:grid;place-items:center;font-size:19px;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease)}
.logo:hover .mark{transform:rotate(-10deg) scale(1.06)}
.menu{display:flex;gap:30px;font-weight:600;font-size:15px}
.menu a{color:var(--muted);position:relative;transition:.2s}
.menu a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;border-radius:2px;background:var(--grad);transition:.3s}
.menu a:hover{color:var(--ink)}.menu a:hover::after{width:100%}
/* Scroll-spy: the section you're reading keeps its underline lit. */
.menu a.on{color:var(--ink)}.menu a.on::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:10px}
.burger{display:none;font-size:22px;background:none;border:0;cursor:pointer}

/* ---------- HERO ---------- */
.hero{position:relative;padding:170px 0 90px;overflow:hidden}
.aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aurora span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;mix-blend-mode:multiply}
.aurora .a1{width:640px;height:640px;background:radial-gradient(circle,#7be39a,transparent 62%);top:-180px;right:-120px;animation:drift1 18s ease-in-out infinite}
.aurora .a2{width:560px;height:560px;background:radial-gradient(circle,#ffd58a,transparent 62%);top:120px;left:-160px;animation:drift2 22s ease-in-out infinite}
.aurora .a3{width:480px;height:480px;background:radial-gradient(circle,#a7ecff,transparent 62%);bottom:-200px;left:40%;animation:drift1 26s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,50px) scale(1.1)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,-40px) scale(1.08)}}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;gap:60px;align-items:center}
/* Slides 2 and 3 use h2 for heading semantics but share the display scale. */
.hero h1,.hero .ht h2{font-family:var(--disp);font-size:clamp(50px,7.6vw,96px);font-weight:800;letter-spacing:-.045em;line-height:1.02;margin:24px 0 24px}
.hero .lead{font-size:21px;color:var(--muted);max-width:490px;margin-bottom:36px;line-height:1.55}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.trust{display:flex;align-items:center;gap:16px;margin-top:40px}
/* The stack fans out on hover — a tiny "these are real people" moment. */
.avatars{display:flex}.avatars img{width:46px;height:46px;border-radius:50%;border:3px solid var(--bg);object-fit:cover;margin-left:-14px;box-shadow:var(--shadow-sm);transition:margin .35s var(--ease),transform .35s var(--ease)}.avatars img:first-child{margin-left:0}
.avatars:hover img{margin-left:-5px}
.avatars img:hover{transform:translateY(-4px) scale(1.08);z-index:2;position:relative}
/* Darker amber than the brand orange: this is 13px body text, and #f6941d
   on the page background is ~2.6:1 — an AA failure. #a8650b clears 4.5:1. */
.trust b{display:block;font-size:15px}.trust .stars{color:#a8650b;font-size:13px;letter-spacing:1px}
/* hero slider */
.hero-textslider{display:grid}
.ht{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.ht.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.hero-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:38px}
.hero-foot .trust{margin-top:0}
.hslider-ctrl{display:flex;align-items:center;gap:14px}
.hs-arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.7);backdrop-filter:blur(8px);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.25s}
.hs-arrow:hover{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-2px);box-shadow:0 12px 22px -10px rgba(13,114,51,.6)}
.hs-dots{display:flex;gap:8px;align-items:center}
.hs-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(15,40,20,.22);cursor:pointer;transition:.35s cubic-bezier(.2,.8,.2,1)}
.hs-dot.is-active{width:30px;border-radius:6px;background:var(--grad)}

.hero-visual{position:relative}
.hero-photo{position:relative;height:610px;border-radius:38px;overflow:hidden;box-shadow:var(--shadow);will-change:transform}
.hi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.hi.is-active{opacity:1;animation:kb 8s ease-out both}
@keyframes kb{from{transform:scale(1.09)}to{transform:scale(1)}}
.hero-photo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 55%,rgba(8,40,20,.18))}
.float{position:absolute;z-index:3;background:rgba(255,255,255,.72);backdrop-filter:blur(22px) saturate(1.5);border:1px solid rgba(255,255,255,.85);border-radius:22px;box-shadow:var(--shadow-md);will-change:transform}
/* 240px, not 200px: at the narrower width "Great Progress" wrapped to two
   lines and knocked the card out of alignment with the ring. */
.f-score{top:40px;left:-34px;width:240px;padding:20px}
.f-score .ring-wrap{display:flex;align-items:center;gap:14px}
.ring{position:relative;width:64px;height:64px}
.ring svg{transform:rotate(-90deg)}
.ring .val{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:19px}
.f-score .lbl{font-size:12px;color:var(--muted)}.f-score .lbl b{display:block;font-size:15px;color:var(--ink);font-family:var(--disp);white-space:nowrap}
.f-meal{bottom:38px;right:-30px;width:216px;padding:18px}
.f-meal .top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.f-meal .ic{width:38px;height:38px;border-radius:11px;background:#fde7d6;display:grid;place-items:center;font-size:17px}
.f-meal small{display:block;color:var(--muted);font-size:12px;margin-bottom:2px}.f-meal b{font-family:var(--disp);font-size:15px}
.pbar{height:8px;border-radius:8px;background:var(--soft);overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:var(--grad);border-radius:8px;transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.pbar.go i{width:64%}

/* Fades out once you've taken its advice. */
.scrollcue{display:flex;justify-content:center;margin-top:70px;position:relative;z-index:2;transition:opacity .5s ease,transform .5s ease}
.scrollcue.gone{opacity:0;transform:translateY(10px);pointer-events:none}
.scrollcue span{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:10px}
.scrollcue span::after{content:"";width:1px;height:44px;background:linear-gradient(var(--green),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}
.hero-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(15,40,20,.06);z-index:4;overflow:hidden}
.hero-prog i{display:block;height:100%;width:0;background:var(--grad);border-radius:0 3px 3px 0}
@keyframes heroProg{from{width:0}to{width:100%}}
.hero:hover .hero-prog i,.hero.paused .hero-prog i{animation-play-state:paused}

/* ---------- MARQUEE ---------- */
/* Edges fade into the page instead of clipping mid-word. */
.marq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;overflow:hidden;background:rgba(255,255,255,.4);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq-track{display:flex;gap:64px;white-space:nowrap;width:max-content;animation:scroll 28s linear infinite;font-family:var(--disp);font-size:24px;font-weight:600;color:var(--muted);opacity:.75}
.marq:hover .marq-track{animation-play-state:paused}
.marq-track b{color:var(--green)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- SECTIONS ---------- */
section{padding:120px 0}
.sec-head{max-width:680px;margin:0 auto 60px;text-align:center}
.sec-head h2{font-size:clamp(36px,5vw,62px);font-weight:700;letter-spacing:-.04em;margin:18px 0 14px}
.sec-head p{color:var(--muted);font-size:19px}
.sec-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:52px;flex-wrap:wrap}
.sec-bar h2{font-size:clamp(32px,4.4vw,52px);margin-top:12px;letter-spacing:-.035em}
.viewall{font-weight:700;color:var(--green-dk);font-size:15px;display:inline-flex;align-items:center;gap:7px;transition:.25s}.viewall:hover{gap:12px;color:var(--orange)}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.stat{padding:30px 16px;position:relative}
.stat:not(:last-child)::after{content:"";position:absolute;right:0;top:22%;height:56%;width:1px;background:var(--line)}
/* tabular-nums: every digit the same width, so the count-up ticks in place
   instead of making the whole row shiver. */
.stat b{display:block;font-family:var(--disp);font-size:clamp(38px,4.6vw,60px);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat span{color:var(--muted);font-size:15px;font-weight:500}

/* ECOSYSTEM BENTO
   4 columns, not 6: with one 2×2 feature tile and four 1×1 tiles the rows
   fill exactly (2+1+1 twice). The 6-column version left a dead column beside
   the feature tile and a two-column hole on the last row. */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:18px}
.tile{position:relative;border-radius:28px;overflow:hidden;border:1px solid var(--line);background:var(--card);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.tile:hover img{transform:scale(1.07)}
.tile .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,40,20,.05) 30%,rgba(8,40,20,.82))}
.tile .txt{position:absolute;inset:auto 0 0 0;padding:26px;color:#fff;z-index:2}
.tile .txt h3{font-size:23px;margin-bottom:5px;color:#fff}
.tile .txt p{font-size:14px;opacity:.9}
.tile .chip{position:absolute;top:22px;left:22px;z-index:2;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.85);display:grid;place-items:center;font-size:23px;backdrop-filter:blur(6px);transition:transform .45s var(--ease)}
.tile:hover .chip{transform:scale(1.08) rotate(-4deg)}
.t-wide{grid-column:span 2;grid-row:span 2}
.t-sm{grid-column:span 1}
.t-wide .txt h3{font-size:30px}
/* Small tiles hold their description off-stage and slide it in on hover, so
   the grid stays calm at rest but still rewards exploration. */
.t-sm .txt p{max-height:0;opacity:0;transform:translateY(8px);overflow:hidden;transition:max-height .5s var(--ease),opacity .4s ease,transform .5s var(--ease)}
.tile:hover .txt p,.tile:focus-visible .txt p{max-height:80px;opacity:.9;transform:none}
@media(hover:none){.t-sm .txt p{max-height:80px;opacity:.9;transform:none}}

/* APP */
.app{background:var(--green-deep);color:#fff;border-radius:48px;margin:0 32px;padding:96px 0;position:relative;overflow:hidden}
.app::before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(40,182,87,.4),transparent 62%);top:-220px;right:-140px;filter:blur(30px)}
.app .wrap{position:relative;z-index:2;max-width:1140px}
.app-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center}
/* Perspective lives on the parent so the device can tilt in 3D toward the
   cursor; JS writes --rx/--ry and clears them on leave. */
.app-visual-in{display:flex;justify-content:center;perspective:1200px}
.device{position:relative;width:302px;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease)}
.device.tilting{transition:transform .12s linear}
.dev-frame{position:relative;background:linear-gradient(155deg,#20232a,#04050a);border-radius:48px;padding:13px;box-shadow:0 60px 100px -40px rgba(0,0,0,.75),inset 0 0 0 2px rgba(255,255,255,.07),inset 0 2px 10px rgba(255,255,255,.12)}
/* Diagonal glass glare across the screen — reads as reflective glass and
   moves naturally when the device tilts toward the cursor. */
.dev-frame::after{content:"";position:absolute;inset:13px;border-radius:37px;z-index:6;pointer-events:none;
  background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.12) 47%,rgba(255,255,255,.05) 52%,transparent 57%)}
.dev-island{position:absolute;top:24px;left:50%;transform:translateX(-50%);width:98px;height:27px;background:#000;border-radius:20px;z-index:6}
.dev-screen{position:relative;background:linear-gradient(180deg,#eef4ec,#e4efe4);border-radius:37px;overflow:hidden;padding:46px 15px 15px;color:var(--ink)}
.scr-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;color:#0f150f;padding:0 8px 12px}
.scr-ic{letter-spacing:2px;font-size:10px}
.scr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding:0 4px}
.scr-hi{font-size:12px;color:var(--muted)}.scr-head b{font-family:var(--disp);font-size:18px;display:block;letter-spacing:-.02em}
.scr-av{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 6px 14px -6px rgba(10,40,20,.5)}
.scr-score{display:flex;align-items:center;gap:15px;background:linear-gradient(135deg,#1aa54a,#0c6e30);color:#fff;border-radius:22px;padding:16px;margin-bottom:12px;box-shadow:0 16px 30px -16px rgba(13,114,51,.6)}
.scr-ring{position:relative;width:74px;height:74px;flex-shrink:0}
.scr-ring .rv{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:23px}
.scr-scoretxt span{font-size:12px;opacity:.85}.scr-scoretxt b{font-family:var(--disp);font-size:17px;display:block;letter-spacing:-.02em;white-space:nowrap}
.scr-scoretxt em{font-style:normal;font-size:10.5px;font-weight:700;background:rgba(255,255,255,.22);padding:3px 9px;border-radius:20px;display:inline-block;margin-top:5px}
.scr-pills{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-bottom:12px}
.scr-pill{background:#fff;border-radius:17px;padding:11px 4px;text-align:center;box-shadow:0 12px 24px -18px rgba(10,40,20,.4)}
.scr-pill span{font-size:16px}.scr-pill b{display:block;font-family:var(--disp);font-size:16px;margin-top:3px;letter-spacing:-.02em}.scr-pill small{font-size:10px;color:var(--muted)}
.scr-card{background:#fff;border-radius:20px;padding:15px;box-shadow:0 12px 26px -18px rgba(10,40,20,.4);margin-bottom:12px}
.scr-chart-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.scr-chart-hd b{font-family:var(--disp);font-size:14px}.scr-chart-hd span{font-size:10.5px;color:var(--muted);background:var(--soft);padding:3px 9px;border-radius:20px}
.scr-bars{display:flex;align-items:flex-end;justify-content:space-between;height:66px;gap:7px}
/* Bars grow from the baseline when the section scrolls in. The final height
   lives in --h so the markup stays declarative. */
.scr-bars i{flex:1;background:linear-gradient(180deg,#31c164,#0d7233);border-radius:6px;min-height:8px;height:0;
  transition:height .9s var(--ease-soft);transition-delay:calc(var(--i,0) * 70ms)}
.scr-bars.go i{height:var(--h)}
.scr-bars i.hi{background:linear-gradient(180deg,#ffbe4d,#f6941d)}
@media(prefers-reduced-motion:reduce){.scr-bars i{height:var(--h)}}
.scr-days{display:flex;justify-content:space-between;gap:7px;margin-top:7px}.scr-days span{flex:1;text-align:center;font-size:10px;color:var(--muted);font-weight:600}
.scr-tabs{display:flex;justify-content:space-around;align-items:center;background:#fff;border-radius:20px;padding:11px 10px;box-shadow:0 12px 26px -18px rgba(10,40,20,.4);font-size:19px}
.scr-tabs span{opacity:.35;line-height:1}.scr-tabs .on{opacity:1}
.scr-tabs .plus{width:42px;height:42px;border-radius:14px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:24px;opacity:1;box-shadow:0 10px 20px -8px rgba(13,114,51,.7);margin-top:-24px}
/* Hangs off the bottom corner. At bottom:120px it sat squarely on top of the
   weekly-activity chart and hid the data it was meant to complement. */
.dev-float{position:absolute;top:auto;bottom:-46px;right:-38px;background:#fff;color:var(--ink);border-radius:16px;padding:11px 14px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-md);animation:float 6s ease-in-out infinite;z-index:7;white-space:nowrap}
.dev-float b{font-family:var(--disp);font-size:13px;display:block}.dev-float small{font-size:11px;color:var(--muted)}
.dev-float .fic{width:36px;height:36px;border-radius:12px;background:#dcefff;display:grid;place-items:center;font-size:17px}
.app .eyebrow{color:#a7ecc0}.app .eyebrow::before{background:linear-gradient(115deg,#8fe0a6,#28b657)}
.app h2{font-size:clamp(34px,4.4vw,56px);margin:16px 0 14px;color:#fff;letter-spacing:-.04em}
.app-text>p{color:rgba(255,255,255,.75);font-size:18px;margin-bottom:30px;max-width:440px}
.feats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin-bottom:34px}
.feats li{display:flex;align-items:center;gap:11px;font-weight:500;font-size:15.5px}
.feats i{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;color:#7fe08e;font-style:normal;font-size:13px}
.stores{display:flex;gap:14px;flex-wrap:wrap}
.store{display:flex;align-items:center;gap:11px;background:#fff;color:var(--ink);padding:12px 22px;border-radius:15px;font-weight:700;font-size:15px;transition:.25s}.store:hover{transform:translateY(-3px)}
.store b{font-size:19px}.store span{display:flex;flex-direction:column;line-height:1.15}.store small{font-size:10px;color:var(--muted);font-weight:600}

/* ---------- Cursor spotlight ----------
   --mx/--my are written by JS on mousemove; the 50% fallback keeps the glow
   centred and harmless before the first move or with JS off. */
.spot{position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(21,154,68,.13),transparent 70%)}
.spot:hover::before{opacity:1}

/* APPOINTMENT */
.appt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.appt{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:28px;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.appt:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.appt .ph{height:220px;overflow:hidden;background:var(--soft)}.appt .ph img{width:100%;height:100%;object-fit:cover;transition:.7s}.appt:hover .ph img{transform:scale(1.06)}
/* Column flex so every Book Now pins to the card's bottom edge regardless
   of how many lines the description wraps to. */
.appt .b{padding:26px;display:flex;flex-direction:column;align-items:flex-start;flex:1}
.appt .b .btn{margin-top:auto}
.appt .tag{font-size:12px;font-weight:700;color:var(--green-dk);background:var(--soft);padding:5px 12px;border-radius:20px}
/* Each specialty gets its own tag colour — the same trio used by the free
   tools icons, so the coding stays consistent across sections. */
.appt:nth-child(2) .tag{color:#2b5f9e;background:#e3f0ff}
.appt:nth-child(3) .tag{color:#a8650b;background:#fde7d6}
.appt h3{font-family:var(--disp);font-size:22px;margin:14px 0 6px}.appt p{color:var(--muted);font-size:14.5px;margin-bottom:18px}

/* PROGRAMS */
.prog-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.prog{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:34px 22px;text-align:center;transition:transform .4s,box-shadow .4s}
.prog:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.prog .ic{width:64px;height:64px;border-radius:19px;background:var(--soft);display:grid;place-items:center;font-size:29px;margin:0 auto 18px;transition:.4s}
.prog:hover .ic{background:var(--mint);transform:scale(1.06) rotate(-3deg)}
.prog h3{font-family:var(--disp);font-size:16.5px;font-weight:600}
.prog p{color:var(--muted);font-size:13px;margin-top:7px;line-height:1.4}

/* VOICE */
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* Middle card drops slightly — margin, not transform, so it doesn't fight
   the hover lift. Breaks the flat row into an editorial rhythm. */
@media(min-width:881px){.voice:nth-child(2){margin-top:26px}}
.voice{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:32px;transition:transform .4s,box-shadow .4s}
.voice:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.voice .stars{color:var(--orange);letter-spacing:2px;margin-bottom:16px}
.voice .q{font-family:var(--disp);font-size:18px;font-weight:500;line-height:1.45;margin-bottom:24px;letter-spacing:-.01em}
.who{display:flex;align-items:center;gap:13px}.who img{width:52px;height:52px;border-radius:50%;object-fit:cover}.who b{display:block;font-family:var(--disp)}.who span{font-size:13px;color:var(--muted)}

/* COURSES */
.course-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.course{background:var(--card);border:1px solid var(--line);border-radius:26px;overflow:hidden;transition:transform .4s,box-shadow .4s}
.course:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.course .ph{height:158px;position:relative;overflow:hidden;background:var(--soft)}.course .ph img{width:100%;height:100%;object-fit:cover;transition:.7s}.course:hover .ph img{transform:scale(1.07)}
.course .badge{position:absolute;top:14px;left:14px;background:var(--grad-warm);color:#fff;font-size:11px;font-weight:700;padding:5px 12px;border-radius:20px}
.course .crate{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);color:var(--ink);font-size:12px;font-weight:700;padding:5px 10px;border-radius:20px;display:flex;align-items:center;gap:4px}
.course .crate b{color:var(--orange)}
.course .b{padding:22px}.course h3{font-family:var(--disp);font-size:18px;margin-bottom:16px;min-height:46px}
.course .meta{display:flex;align-items:center;justify-content:space-between}.course .meta span{font-size:13px;color:var(--muted)}.price{font-family:var(--disp);font-size:19px;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* TOOLS */
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tool{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:34px;position:relative;display:block;transition:transform .4s,box-shadow .4s}
.tool:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.tool .ic{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;font-size:27px;margin-bottom:18px;transition:transform .4s var(--ease)}
.tool:hover .ic{transform:scale(1.06) rotate(-3deg)}
.tool h3{font-family:var(--disp);font-size:20px;margin-bottom:6px}.tool p{color:var(--muted);font-size:14.5px}
.tool .arw{position:absolute;top:34px;right:34px;font-size:20px;color:var(--green-dk);font-weight:700;transition:.3s}.tool:hover .arw{transform:translateX(6px)}

/* RESOURCES + RECIPES */
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.res-item{display:flex;gap:18px;align-items:center;padding:16px;border-radius:20px;transition:.3s;border:1px solid transparent}
.res-item:hover{background:var(--card);box-shadow:var(--shadow-sm);border-color:var(--line)}
.res-thumb{width:100px;height:76px;border-radius:15px;overflow:hidden;flex-shrink:0;background:var(--soft)}.res-thumb img{width:100%;height:100%;object-fit:cover}
.res-item b{display:block;font-family:var(--disp);font-size:16.5px;margin-bottom:5px}.res-item span{font-size:13px;color:var(--muted)}
.recipe{display:block;background:var(--card);border:1px solid var(--line);border-radius:28px;overflow:hidden;transition:transform .4s,box-shadow .4s}.recipe:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.recipe .ph{height:248px;overflow:hidden;background:var(--soft)}.recipe .ph img{width:100%;height:100%;object-fit:cover;transition:.7s}.recipe:hover .ph img{transform:scale(1.05)}
.recipe .b{padding:24px}.recipe h3{font-family:var(--disp);font-size:22px;margin-bottom:12px}.recipe .meta{display:flex;gap:20px;color:var(--muted);font-size:14px;flex-wrap:wrap}

/* MEMORIES */
.mem-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:158px;gap:16px}
.mem{position:relative;border-radius:20px;overflow:hidden;background:var(--soft)}
.mem img{width:100%;height:100%;object-fit:cover;transition:.7s}.mem:hover img{transform:scale(1.09)}
.mem::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(8,40,20,.5));opacity:0;transition:.45s}
.mem:hover::after{opacity:1}
.mem:nth-child(1){grid-column:span 2;grid-row:span 2}
.mem:nth-child(2),.mem:nth-child(3),.mem:nth-child(4){grid-column:span 2}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:52px;align-items:start}
.faq-main h2{font-size:clamp(32px,4.4vw,50px);margin:16px 0 10px;letter-spacing:-.035em}
.faq-intro{color:var(--muted);margin-bottom:30px;font-size:17px}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:18px;margin-bottom:13px;overflow:hidden;transition:.3s}
.faq-item[open]{box-shadow:var(--shadow-sm)}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 24px;font-family:var(--disp);font-weight:600;font-size:16.5px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
/* One glyph, rotated: + turns into × as the panel opens, and the icon
   animates with the height instead of content-swapping instantly. */
.faq-item summary::after{content:"+";font-size:24px;color:var(--green);font-weight:400;transition:transform .38s var(--ease);flex-shrink:0}
.faq-item[open] summary::after{transform:rotate(45deg)}
/* The answer wrapper carries no padding of its own — the inner <p> does —
   so its animated height maps 1:1 onto scrollHeight with nothing left over
   when it hits zero. */
.faq-item>div{overflow:hidden;transition:height .38s var(--ease-soft)}
.faq-item>div p{padding:0 24px 22px;margin:0;color:var(--muted);font-size:15px;line-height:1.65}
.faq-side{position:sticky;top:110px}
.faq-side .ph{border-radius:28px 28px 0 0;overflow:hidden;height:280px;background:var(--soft)}.faq-side .ph img{width:100%;height:100%;object-fit:cover}
.faq-side .card{background:var(--green-deep);color:#fff;border-radius:0 0 28px 28px;padding:30px;text-align:center}
.faq-side .card b{display:block;font-family:var(--disp);font-size:21px;margin-bottom:6px}.faq-side .card span{display:block;color:rgba(255,255,255,.7);font-size:14px;margin-bottom:18px}

/* CTA */
.cta{padding:60px 0 120px}
.cta-box{position:relative;border-radius:48px;overflow:hidden;background:var(--grad);padding:88px 40px;text-align:center;color:#fff;box-shadow:var(--shadow)}
/* The orbs drift on the same two curves as the hero aurora, so the page opens
   and closes on the same visual idea. */
.cta-box::before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;background:rgba(255,255,255,.14);top:-200px;left:-100px;filter:blur(24px);animation:drift1 24s ease-in-out infinite}
.cta-box::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(255,180,60,.25);bottom:-200px;right:-80px;filter:blur(20px);animation:drift2 20s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.cta-box::before,.cta-box::after{animation:none}}
.cta-box .in{position:relative;z-index:2;max-width:680px;margin:0 auto}
.cta-box h2{font-size:clamp(34px,5vw,60px);margin-bottom:14px;color:#fff;letter-spacing:-.04em}
.cta-box p{font-size:19px;color:rgba(255,255,255,.9);margin-bottom:32px}
.cta-form{display:flex;gap:12px;max-width:480px;margin:0 auto;flex-wrap:wrap}
.cta-form input{flex:1;min-width:220px;padding:17px 24px;border-radius:100px;border:2px solid transparent;font-size:15px;font-family:inherit;transition:border-color .25s ease}
.cta-form input.err{border-color:#ffb3a0}
.cta-form .btn{background:var(--ink);color:#fff}
.cta-form .btn:hover{transform:translateY(-3px);box-shadow:0 16px 30px -12px rgba(0,0,0,.5)}
.cta-note{min-height:24px;margin-top:14px;font-size:14.5px;color:rgba(255,255,255,.92);font-weight:600;opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.cta-note.show{opacity:1;transform:none}

/* ---------- Back to top ---------- */
.totop{position:fixed;right:26px;bottom:26px;z-index:150;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);color:var(--green-dk);font-size:22px;line-height:1;cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--shadow-md);
  opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease),background .25s,color .25s}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--grad);color:#fff;border-color:transparent}
@media(max-width:520px){.totop{right:16px;bottom:16px;width:46px;height:46px}}

/* FOOTER */
footer{background:#0a130c;color:rgba(255,255,255,.68);padding:80px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.9fr 1fr 1fr 1fr 1fr;gap:36px;margin-bottom:50px}
footer .logo{color:#fff;margin-bottom:16px}.foot-brand p{font-size:14px;max-width:270px;margin-bottom:20px}
footer h4{color:#fff;font-family:var(--disp);font-size:15px;margin-bottom:18px}
footer ul{list-style:none;display:grid;gap:11px}footer a{font-size:14px;color:rgba(255,255,255,.68);transition:.2s}footer a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px}
.foot-bottom a{color:#7fe08e;font-weight:700;position:relative}
.foot-bottom a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;border-radius:2px;background:#7fe08e;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.foot-bottom a:hover::after{transform:scaleX(1)}
/* Double-thump heartbeat — the classic lub-dub, not a metronome pulse. */
.hrt{color:#ff5d73;display:inline-block}
@media(prefers-reduced-motion:no-preference){.hrt{animation:beat 1.8s ease-in-out infinite}}
@keyframes beat{0%,40%,80%,100%{transform:scale(1)}10%{transform:scale(1.28)}20%{transform:scale(1)}30%{transform:scale(1.18)}}
/* Oversized brand lockup, cropped by the footer's bottom edge — the sign-off
   that makes the page feel authored rather than assembled. */
.foot-mark{margin-top:46px;margin-bottom:-.28em;text-align:center;line-height:.8;overflow:hidden;user-select:none}
.foot-mark span{display:block;font-family:var(--disp);font-weight:800;letter-spacing:-.05em;
  font-size:clamp(64px,17vw,260px);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.015));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media(forced-colors:active){.foot-mark{display:none}}

@media(max-width:1040px){.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px}.t-wide,.t-sm{grid-column:span 1;grid-row:span 1}.t-wide{grid-column:span 2}.prog-grid{grid-template-columns:repeat(3,1fr)}.course-grid{grid-template-columns:1fr 1fr}.foot-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:880px){
  .menu,.nav-cta .btn{display:none}.burger{display:block}
  .menu.open{display:flex;position:absolute;top:78px;left:16px;right:16px;flex-direction:column;background:#fff;padding:20px 26px;gap:16px;border-radius:24px;box-shadow:var(--shadow-md)}
  .hero{padding:116px 0 70px}
  .hero-grid,.app-grid,.res-grid,.faq-grid,.appt-grid,.voice-grid,.tools-grid{grid-template-columns:1fr}
  .hero-visual{order:-1}.hero-photo{height:420px}
  /* Over a busy photo at phone width the glass goes muddy, so the floating
     cards trade some transparency for legible text. */
  .float{background:rgba(255,255,255,.93);backdrop-filter:blur(10px)}
  .f-score{left:12px;top:16px;width:222px;padding:16px}
  .f-meal{right:12px;bottom:16px;width:200px}
  .bento{grid-auto-rows:200px}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:22px}
  .stats{grid-template-columns:1fr 1fr;gap:20px}.stat:nth-child(2)::after{display:none}
  .prog-grid{grid-template-columns:1fr 1fr}.course-grid{grid-template-columns:1fr 1fr}
  .app{margin:0 16px;padding:64px 0}.feats{grid-template-columns:1fr}.dev-float{display:none}
  .mem-grid{grid-template-columns:repeat(3,1fr)}.mem-grid .mem{grid-column:auto;grid-row:auto}.mem-grid .mem:nth-child(1){grid-column:span 2}.faq-side{position:static}.foot-grid{grid-template-columns:1fr 1fr}
  section{padding:84px 0}
}
@media(max-width:520px){
  .bento,.prog-grid,.course-grid,.mem-grid{grid-template-columns:1fr 1fr}
  .t-wide{grid-column:span 2}.mem:nth-child(1){grid-column:span 2}.appt-grid{grid-template-columns:1fr}
  .hero-photo{height:360px}
  .f-score{width:206px;padding:14px}.f-score .ring-wrap{gap:10px}
  .f-meal{width:180px;padding:14px}
  .cta-box{padding:60px 24px}
}
/* ---------- Icon system ----------
   Inline stroke SVGs (24 viewBox, 1.8 stroke, currentColor) replace the old
   emoji: identical rendering on every platform, dead-centre alignment. */
.chip svg{width:24px;height:24px;color:var(--green-dk)}
.prog .ic svg{width:30px;height:30px;color:var(--green-dk)}
.tool .ic svg{width:27px;height:27px}
.store svg{width:20px;height:20px;flex-shrink:0}
.f-meal .ic svg{width:19px;height:19px;color:#d96708}
.dev-float .fic svg{width:18px;height:18px;color:#2b7bd6}
.logo .mark svg{width:20px;height:20px;color:#fff}

/* ============================================================
   WordPress integration (appended by build-theme.py)
   ============================================================ */
/* Menu items arrive wrapped in <li> when a menu is assigned. */
.menu ul{list-style:none;display:contents;margin:0;padding:0}
.menu li{display:contents}
/* Push the fixed chrome below the logged-in admin bar. */
.admin-bar .hdr{top:32px}
.admin-bar .scrollprog{top:32px}
@media(max-width:782px){.admin-bar .hdr{top:46px}.admin-bar .scrollprog{top:46px}}
/* WP core a11y class matches our sr-only. */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}