*{ box-sizing:border-box; }
  /* iOS Safari colours the status-bar safe area from the ROOT element's background
     (not #top or a fixed layer) — so the page background must live here for that
     strip to be cream instead of white. margin:0 kills the default body frame. */
  html, body{ margin:0; background:var(--bg); }
  [data-t-root]{
    --bg:#F6EFE6; --raised:#FFFBF3; --raised-2:#FBF5EA;
    --ink:#2A2520; --muted:#6F665A; --faint:#9A9183;
    --line:rgba(42,37,32,0.10); --line-strong:rgba(42,37,32,0.16);
    --sage:#7A8B6F; --sage-soft:rgba(122,139,111,0.14);
    --coral:#C97B5A; --coral-soft:rgba(201,123,90,0.13); --on-coral:#FFF6EF;
    --shadow:0 1px 2px rgba(42,37,32,.05), 0 14px 34px rgba(42,37,32,.07);
    --serif:'Newsreader',Georgia,'Times New Roman',serif;
    --sans:'Inter',system-ui,-apple-system,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,monospace;
  }
  [data-t-root][data-theme="dark"]{
    --bg:#1A1814; --raised:#26221C; --raised-2:#211D18;
    --ink:#F1E8DA; --muted:rgba(241,232,218,0.62); --faint:rgba(241,232,218,0.42);
    --line:rgba(246,239,230,0.10); --line-strong:rgba(246,239,230,0.18);
    --sage:#A6B49B; --sage-soft:rgba(166,180,155,0.16);
    --coral:#D98A66; --coral-soft:rgba(217,138,102,0.18); --on-coral:#211C16;
    --shadow:0 1px 2px rgba(0,0,0,.24), 0 18px 44px rgba(0,0,0,.34);
  }
  [data-desktop]{ display:none; }
  @keyframes fadeUp{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;} }
  @keyframes heroRow{ 0%,7%{opacity:0; transform:translateY(9px);} 15%,62%{opacity:1; transform:none;} 72%,100%{opacity:0; transform:translateY(9px);} }
  @keyframes heroTap{ 0%,3%{transform:scale(1);} 7%{transform:scale(.965);} 12%{transform:scale(1);} 100%{transform:scale(1);} }
  @keyframes heroReady{ 0%,28%{opacity:0;} 40%,88%{opacity:1;} 96%,100%{opacity:0;} }
  @keyframes sway{ 0%,100%{transform:rotate(-2.5deg);} 50%{transform:rotate(2.5deg);} }
  /* How-it-works step 3: empty "Your dinners" -> tap "Build my week" -> the meals
     fade in (staggered, like the hero) -> cross-fade into the shopping list, looping.
     Layers carry base opacity (plan 0 / list 1) so reduced-motion and no-animation
     fallbacks rest on the finished list instead of overlapping both. */
  @keyframes s3plan{ 0%{opacity:0;} 8%{opacity:0;} 14%{opacity:1;} 56%{opacity:1;} 64%{opacity:0;} 100%{opacity:0;} }
  @keyframes s3list{ 0%{opacity:1;} 8%{opacity:1;} 14%{opacity:0;} 56%{opacity:0;} 64%{opacity:1;} 92%{opacity:1;} 100%{opacity:1;} }
  @keyframes s3empty{ 0%{opacity:0;} 14%{opacity:1;} 28%{opacity:1;} 36%{opacity:0;} 100%{opacity:0;} }
  @keyframes s3meal{ 0%{opacity:0; transform:translateY(9px);} 30%{opacity:0; transform:translateY(9px);} 42%{opacity:1; transform:none;} 80%{opacity:1; transform:none;} 88%{opacity:0; transform:translateY(9px);} 100%{opacity:0; transform:translateY(9px);} }
  @keyframes s3tap{ 0%,24%{transform:scale(1);} 29%{transform:scale(.95);} 34%{transform:scale(1.03);} 40%,100%{transform:scale(1);} }
  [data-page]{ animation:none; }
  @media (min-width:860px){
    [data-desktop]{ display:flex; }
    [data-mobile]{ display:none; }
    [data-sticky]{ display:none !important; }
    [data-hero]{ grid-template-columns:1.04fr .96fr !important; gap:54px !important; align-items:center; }
    [data-hero-text]{ text-align:left; }
    [data-steps]{ grid-template-columns:repeat(3,1fr) !important; gap:30px !important; }
    [data-pillar]{ grid-template-columns:1fr 1fr !important; gap:54px !important; align-items:center; }
    [data-pillar][data-flip] [data-pmedia]{ order:-1; }
    [data-compare]{ grid-template-columns:1.05fr .95fr !important; gap:34px !important; align-items:center; }
    [data-proof-screens]{ grid-template-columns:repeat(3,1fr) !important; }
    [data-beats]{ grid-template-columns:repeat(3,1fr) !important; }
    [data-foot]{ grid-template-columns:1.6fr 1fr 1fr !important; }
    [data-teaser]{ grid-template-columns:286px 1fr !important; gap:36px !important; padding:30px 36px !important; }
    [data-quotes]{ grid-template-columns:1fr 1fr !important; }
    [data-facts]{ grid-template-columns:repeat(4,1fr) !important; }
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  }
  [data-animate="off"] *{ animation:none !important; }

/* desktop-only header items: the comp sets display:inline-flex inline, which beats
   the base [data-desktop]{display:none} rule; force them hidden on mobile. */
@media (max-width:859px){ [data-desktop]{ display:none !important; } }

/* ---- shared theme-icon visibility ---- */
.t-icon{ display:inline-flex; align-items:center; justify-content:center; }
[data-t-root][data-theme="light"] .t-dark{ display:none; }
[data-t-root][data-theme="dark"]  .t-light{ display:none; }

/* ---- legal / support document pages ---- */
.doc{ max-width:720px; margin:0 auto; padding:clamp(26px,6vw,52px) 22px clamp(56px,9vw,92px); }
.doc .back{ display:inline-flex; align-items:center; gap:7px; font:500 13px/1 var(--sans); color:var(--muted); text-decoration:none; margin-bottom:clamp(22px,5vw,38px); }
.doc .back:hover{ color:var(--ink); }
.doc .eyebrow{ font:500 12px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--sage); }
.doc h1{ margin:14px 0 0; font:500 clamp(36px,7vw,56px)/1.04 var(--serif); letter-spacing:-.02em; color:var(--ink); }
.doc .meta{ margin-top:14px; font:400 13px/1.5 var(--mono); color:var(--faint); }
.doc h2{ margin:clamp(38px,6vw,54px) 0 0; font:500 clamp(22px,3.6vw,28px)/1.18 var(--serif); letter-spacing:-.01em; color:var(--ink); }
.doc p{ margin:14px 0 0; font:400 clamp(16px,2.4vw,17.5px)/1.7 var(--sans); color:var(--ink); text-wrap:pretty; }
.doc a.inline{ color:var(--coral); text-decoration:underline; text-underline-offset:2px; }
.doc a.inline:hover{ color:var(--ink); }
.doc ul{ margin:18px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:15px; }
.doc li{ display:flex; gap:14px; align-items:flex-start; }
.doc li .dot{ width:7px; height:7px; border-radius:50%; background:var(--sage); flex:none; margin-top:10px; }
.doc li .txt{ font:400 clamp(16px,2.4vw,17.5px)/1.7 var(--sans); color:var(--ink); text-wrap:pretty; }
.doc .callout{ margin-top:clamp(28px,5vw,40px); padding:clamp(22px,4vw,30px); border-radius:20px; background:var(--sage-soft); border:1px solid var(--line); }
.doc .callout p{ margin-top:15px; font:400 clamp(16px,2.5vw,18px)/1.62 var(--sans); }
.doc .lead{ font:500 clamp(17px,2.6vw,19px)/1.45 var(--serif); color:var(--ink); }

/* ---- waitlist form (lives in the pricing card) ---- */
[hidden]{ display:none !important; }
.wl-form{ margin-top:20px; scroll-margin-top:90px; }
.wl-row{ display:flex; flex-direction:column; gap:10px; }
.wl-input{ width:100%; min-height:52px; padding:0 16px; border:1px solid var(--line-strong); border-radius:14px; background:var(--bg); color:var(--ink); font:400 16px/1.2 var(--sans); -webkit-appearance:none; appearance:none; }
.wl-input::placeholder{ color:var(--faint); }
.wl-input:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px var(--coral-soft); }
.wl-btn{ margin-top:12px; width:100%; min-height:54px; border:0; cursor:pointer; border-radius:999px; background:var(--coral); color:var(--on-coral); font:600 16px/1 var(--sans); letter-spacing:.01em; box-shadow:0 12px 26px var(--coral-soft); transition:filter .15s ease, transform .15s ease; }
.wl-btn:hover{ filter:brightness(1.04); transform:translateY(-1px); }
.wl-btn:active{ transform:translateY(0); }
.wl-note{ margin:12px 0 0; text-align:center; font:400 11.5px/1.5 var(--mono); color:var(--faint); }
.wl-ok{ margin:0; display:flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:14px 16px; border-radius:16px; background:var(--sage-soft); color:var(--ink); font:500 15px/1.4 var(--sans); text-wrap:pretty; }
.wl-check{ width:22px; height:22px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--sage); color:#F4EFE4; font:600 12px/1 var(--sans); }
@media (min-width:520px){ .wl-row{ flex-direction:row; } .wl-input{ flex:1; min-width:0; } }
