/* ------------------------------------------------------------------ *
 * Meal-plan chooser (v2) — layered on top of site.css.                *
 * Uses only site.css tokens so the brand stays one system.            *
 * Type is deliberately larger than the old cards: this is the page    *
 * where money is decided, so nothing here should need squinting at.   *
 * ------------------------------------------------------------------ */

/* The plans grid gets more room than the default 1220px measure —
   four cards at a readable type size do not fit in the body width. */
.wrap-wide{width:min(1480px,94vw);margin-inline:auto}

/* ---------------------------------------------------- term / mode controls */
.plan-controls{display:flex;flex-wrap:wrap;gap:16px 22px;justify-content:center;align-items:center;margin-top:30px}
.ctrl{display:flex;align-items:center;gap:12px}
.ctrl-lab{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

.seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:100px;padding:6px;gap:5px;
     box-shadow:0 12px 28px -20px rgba(23,19,12,.55)}
.seg button{appearance:none;border:0;background:transparent;cursor:pointer;color:var(--muted);
            font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.07em;text-transform:uppercase;
            padding:12px 20px;border-radius:100px;display:inline-flex;align-items:center;gap:9px;transition:.25s}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--char);color:var(--cream)}
.seg .save{background:var(--saffron);color:#2a1e0a;font-size:11px;font-weight:600;padding:3px 9px;border-radius:100px;letter-spacing:.04em}

/* ------------------------------------------------------------- plan cards */
.plans-grid-v2{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:26px;align-items:stretch}

.pcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:22px;
       padding:36px 26px 30px;display:flex;flex-direction:column;
       box-shadow:0 20px 44px -30px rgba(23,19,12,.5);transition:transform .35s,box-shadow .35s,border-color .35s}
.pcard:hover{transform:translateY(-6px);border-color:rgba(233,162,58,.55);box-shadow:0 34px 62px -30px rgba(23,19,12,.55)}
/* gradient as a background layer, not ::before — a positioned pseudo would
   paint over the card's own text */
.pcard.pop{border-color:var(--saffron);box-shadow:0 30px 60px -28px rgba(233,162,58,.5);
           background:linear-gradient(180deg,rgba(233,162,58,.1),transparent 46%),var(--card)}

.ptag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--saffron);color:#231a0c;
      font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
      padding:7px 16px;border-radius:100px;white-space:nowrap;box-shadow:var(--shadow)}

.pname{font-size:32px;line-height:1.12;color:var(--char);margin:0}
/* reserved height keeps every card's portion table on the same baseline */
.ptag-for{font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:10px;min-height:44px}

/* ------------------------------------------------- what's in the box rows */
.pspec{list-style:none;margin:22px 0 0;padding:22px 0 0;border-top:1px solid var(--line);display:grid;gap:15px}
.pspec li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.pspec .k{font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pspec .v{font-size:18px;font-weight:600;color:var(--ink);white-space:nowrap}
.pspec .bar{height:7px;border-radius:100px;background:rgba(23,19,12,.09);overflow:hidden;min-width:26px}
.pspec .bar i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--saffron),var(--saffron-deep));
              transform-origin:left;animation:barIn .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pspec li.none .v{color:var(--muted);font-weight:400}
.pspec li.none .bar{opacity:.4}

/* ------------------------------------------------------------ price block */
.pprice{margin-top:auto;padding-top:26px}
.pprice-top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pamt{font-family:'Rozha One',serif;font-size:54px;line-height:1;color:var(--char)}
.pper{font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* #8a560c not --saffron-deep: at these sizes the brand amber lands at ~3.3:1
   on cream, under the 4.5:1 WCAG AA floor for small text. */
.pmeal{font-size:15px;font-weight:500;color:#8a560c;margin-top:11px}
.psave{display:inline-flex;align-items:center;gap:8px;margin-top:12px;background:rgba(233,162,58,.2);
       color:#8a560c;font-size:13.5px;font-weight:500;padding:7px 13px;border-radius:100px}
.pwas{text-decoration:line-through;opacity:.7}
/* min-height equalises the primary and outline buttons — without it the
   featured card's taller button lifts its whole price row out of line */
.pcard .btn{margin-top:22px;width:100%;justify-content:center;font-size:13px;min-height:50px;align-items:center}

/* keyboard users need to see where they are */
.seg button:focus-visible,.pcard .btn:focus-visible,.faq summary:focus-visible{
  outline:3px solid #8a560c;outline-offset:3px;border-radius:100px}
.pfine{font-size:12.5px;color:var(--muted);text-align:center;margin-top:13px;line-height:1.5}
.pfine a,.plans-note a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------- "not sure?" help */
.plan-help{margin-top:24px;display:flex;flex-wrap:wrap;gap:13px;justify-content:center}
.ph-chip{display:inline-flex;align-items:center;gap:10px;background:rgba(23,19,12,.045);border:1px solid var(--line);
         border-radius:100px;padding:13px 20px;font-size:15px;color:var(--ink)}
.ph-chip b{font-weight:600}
.ph-chip .dotm{width:8px;height:8px;border-radius:50%;background:var(--saffron);flex:none}

/* ------------------------------------------------------------- responsive */
/* phone-only elements — see the ≤760px block */
.pspec-inline{display:none}
.wc-day-inline{display:none}
.plans-note{display:none;text-align:center;font-size:12.5px;color:var(--muted);margin-top:16px;line-height:1.5}
/* The monthly area offer. Reads as good news, not as a warning — leaf green on
   a tinted card, sitting between the weekly/monthly toggle that triggers it and
   the prices it changes. Shown on every width: this is the one line a Surrey
   customer must not scroll past. */
.plans-promo{max-width:560px;margin:18px auto 0;text-align:center;font-size:17px;line-height:1.5;
  color:#14502a;background:rgba(14,122,58,.10);border:1.5px solid rgba(14,122,58,.30);
  border-radius:999px;padding:10px 20px;display:flex;align-items:center;justify-content:center;
  gap:10px;flex-wrap:wrap}
.plans-promo[hidden]{display:none}
.plans-promo b{color:#0e7a3a}
.plans-promo .ppill{background:#0e7a3a;color:#fff;border-radius:999px;padding:3px 11px;
  font-family:var(--font-mono,monospace);font-size:13px;font-weight:800;letter-spacing:.06em;white-space:nowrap}
/* On the card itself, where the plan is actually chosen. */
.pcard-promo{margin-top:6px;display:inline-block;background:rgba(14,122,58,.12);color:#0e7a3a;
  border-radius:999px;padding:3px 10px;font-family:var(--font-mono,monospace);font-size:11.5px;
  font-weight:800;letter-spacing:.04em;text-transform:uppercase}

@media(max-width:1240px){
  .plans-grid-v2{grid-template-columns:repeat(2,1fr);gap:20px;max-width:820px;margin-inline:auto}
}

/* ---------------------------------------------------------------- phones *
 * A full-height card per plan meant ~2,200px of scrolling to see four —
 * you could not compare two plans without forgetting the first. Here the
 * portion table collapses to one line and the price shares a row with the
 * button, which cuts each card from ~560px to ~200px. Nothing is hidden
 * behind a tap: same numbers, denser arrangement.
 * ------------------------------------------------------------------------ */
@media(max-width:760px){
  .plans-grid-v2{grid-template-columns:1fr;max-width:540px;gap:14px;margin-top:20px}

  /* The card becomes a 2-column grid: name + price share the top line,
     portions run full width beneath, per-meal + CTA close it out.
     `display:contents` lets .pprice's children join this grid directly
     instead of forming a third stacked block. ~145px instead of 560px. */
  .pcard{display:grid;grid-template-columns:1fr auto;align-items:center;
         column-gap:12px;row-gap:0;padding:16px 18px 17px;border-radius:18px}
  .pcard:hover{transform:none}
  .ptag{font-size:10px;padding:4px 11px;top:-10px}

  .pname{grid-column:1;grid-row:1;font-size:21px;line-height:1.15;align-self:center}
  .ptag-for{display:none}          /* the portions line says it better */
  .pspec{display:none}
  .pspec-inline{display:block;grid-column:1/-1;grid-row:2;margin:8px 0 0;padding:0;border:0;
                font-size:13.5px;line-height:1.5;color:var(--ink)}

  .pprice,.pprice-left{display:contents}
  .pprice-top{grid-column:2;grid-row:1;flex-direction:column;align-items:flex-end;gap:1px;text-align:right}
  .pamt{font-size:29px}
  .pper{font-size:11px;letter-spacing:.04em}
  .pmeal{grid-column:1;grid-row:3;font-size:13px;margin-top:11px;align-self:center}
  .psave{grid-column:1/-1;grid-row:4;margin-top:9px;font-size:12.5px;padding:5px 11px;justify-self:start}
  .pcard .btn{grid-column:2;grid-row:3;width:auto;margin-top:11px;padding:12px 18px;font-size:11.5px;min-height:44px}
  .btn-plan{display:none}          /* "Choose →" — the card already names the plan */
  .pfine{display:none}             /* said once under the grid instead */
  .plans-note{display:block}

  /* The whole card is the tap target. A thumb aims at the card, not at a
     100px-wide button — and the button stays as the visible affordance. */
  .pcard .btn::after{content:"";position:absolute;inset:0;border-radius:18px}
}

@media(max-width:560px){
  /* labels dropped: "Weekly | Monthly" and "Pickup | Delivery" are already
     self-evident, and the two label rows cost ~50px of a small screen */
  .plan-controls{flex-direction:column;align-items:stretch;gap:10px;margin-top:22px}
  .ctrl{flex-direction:column;align-items:stretch;gap:9px}
  .ctrl-lab{display:none}
  .seg{width:100%}
  .seg button{flex:1;justify-content:center;padding:12px 8px;font-size:12px;gap:6px;
              white-space:nowrap;min-height:44px}   /* 44px = minimum touch target */
  .seg-sub{display:none}   /* meal count still shows on every card */
  .ph-chip{font-size:14px;padding:12px 16px}
}
@media(prefers-reduced-motion:reduce){
  .pcard,.pcard:hover{transition:none;transform:none}
  .pspec .bar i{animation:none}
}

/* ==================================================================== *
 * REST OF PAGE — brought up to the same standard as the plan cards.    *
 * Same moves throughout: larger body copy, more air, softer surfaces,  *
 * fewer hard borders. Scoped to this stylesheet, so the homepage that  *
 * shares site.css is untouched.                                        *
 * ==================================================================== */

/* ---- section headers ---- */
.eyebrow{letter-spacing:.22em;font-size:12.5px}
.sec-head.center p.lead{font-size:18px;line-height:1.65;color:var(--muted)}

/* Vertical rhythm. Two stacked .pad sections put their padding back to back,
   so this number is HALF the gap a reader actually sees — 58px here reads as
   ~116px between sections. Keep it modest. */
.pad{padding-block:clamp(38px,4vw,58px)}
.counterband .wrap{padding-block:clamp(30px,3.4vw,46px)}
.counter-head{margin-bottom:clamp(24px,2.6vw,34px)}
.week-note{margin-top:26px}

/* ---- how it works ---- */
.steps{gap:26px;margin-top:36px}
.step{border-radius:24px;border-color:rgba(23,19,12,.09);box-shadow:0 22px 50px -34px rgba(23,19,12,.55)}
.step-img{height:206px}
.step-img .n{width:46px;height:46px;font-size:19px;display:grid;place-items:center;border-radius:50%;
             background:var(--saffron);color:#231a0c;font-family:'JetBrains Mono',monospace;font-weight:600;
             box-shadow:0 10px 22px -10px rgba(23,19,12,.6)}
.step-body{padding:26px 24px 28px}
.step-body h3{font-size:23px;line-height:1.2}
.step-body p{font-size:15.5px;line-height:1.62;color:var(--muted);margin-top:9px}

/* ---- meals-delivered band + highlights ---- */
.counter-label{font-size:15px;letter-spacing:.16em}
/* MUST stay scoped to .hl-grid — site.css also uses a bare .hl for the
   highlighted words in the hero <h1>, which these rules would box in. */
.hl-grid{gap:22px;margin-top:36px}
.hl-grid .hl{text-align:left;background:rgba(255,255,255,.46);border:1px solid rgba(35,26,12,.1);border-radius:22px;
    padding:32px 30px;backdrop-filter:blur(2px)}
.hl-grid .hl .ic{margin:0 0 18px;width:58px;height:58px;background:rgba(255,255,255,.72);border-color:rgba(35,26,12,.16)}
.hl-grid .hl .ic svg{width:27px;height:27px}
.hl-grid .hl h3{font-size:25px}
.hl-grid .hl p{font-size:15.5px;line-height:1.62;margin-top:9px;max-width:none;margin-inline:0}

/* ---- weekly menu ---- */
.week-grid{gap:20px;margin-top:34px}
.week-card{border-radius:22px}
.wc-img{height:172px}
.wc-day{font-size:12px;padding:7px 14px}
.wc-body{padding:18px 18px 20px}
.wc-dishes{font-size:15px;line-height:1.58}
.wc-price{font-size:25px}
.wc-tag{font-size:10.5px}
.week-range{font-size:13px}

/* ---- faq ---- */
.faq{max-width:880px;margin-top:34px;gap:14px}
.faq details{border-radius:20px;border-color:rgba(23,19,12,.1)}
.faq summary{padding:24px 28px;font-size:24px}
.faq summary::after{font-size:34px}
.faq .fa{padding:0 28px 26px;font-size:16px;line-height:1.7;max-width:720px}

/* ---- closing CTA ---- */
.cta h2{font-size:clamp(40px,5.4vw,68px)}
.cta p{font-size:18px;line-height:1.65;margin-top:16px}
.cta .ph{font-size:15px;margin-top:22px}

@media(max-width:900px){
  .hl-grid .hl{padding:26px 24px}
  .step-img{height:184px}
}

/* ---------------------------------------------------------------- phones *
 * The type scale above is a DESKTOP scale. Left unqualified it turns each
 * FAQ heading into two lines and each highlight into a ~250px block, so a
 * phone user scrolls a full screen per item. Everything below is the same
 * hierarchy at phone proportions.
 * ------------------------------------------------------------------------ */
@media(max-width:760px){
  .pad{padding-block:clamp(28px,5vw,38px)}
  .counterband .wrap{padding-block:26px}
  .counter-head{margin-bottom:20px}
  .week-note{margin-top:18px}
  .sec-head h2{font-size:clamp(30px,7.6vw,40px)}
  .sec-head.center p.lead{font-size:15.5px;line-height:1.6;margin-top:12px}
  .eyebrow{font-size:11px;letter-spacing:.18em}

  /* how it works */
  .steps{gap:12px;margin-top:22px}
  .step-img{height:152px}
  .step-img .n{width:40px;height:40px;font-size:17px}
  .step-body{padding:18px 18px 20px}
  .step-body h3{font-size:20px}
  .step-body p{font-size:14.5px;margin-top:7px}

  /* meals-delivered + highlights — icon beside the text, not stacked above */
  .counter-label{font-size:12px;letter-spacing:.1em}
  .hl-grid{gap:10px;margin-top:22px}
  .hl-grid .hl{display:grid;grid-template-columns:auto 1fr;column-gap:14px;
               align-items:start;padding:18px}
  .hl-grid .hl .ic{grid-row:1/span 2;width:44px;height:44px;margin:0}
  .hl-grid .hl .ic svg{width:21px;height:21px}
  .hl-grid .hl h3{font-size:19px;line-height:1.2;align-self:center}
  .hl-grid .hl p{font-size:14px;line-height:1.55;margin-top:5px}

  /* Weekly menu — the pinned-polaroid board is a desktop conceit. On a phone
     site.css turns it into a 43%-wide carousel showing two days at a time,
     so reading the week costs four swipes. One compact row per day puts the
     whole week on screen at once. #weekly needed for specificity. */
  #weekly .week-grid{display:grid;grid-template-columns:1fr;gap:9px;margin-top:20px;
                     overflow:visible;padding-bottom:0}
  #weekly .week-grid::after{content:none}
  /* three columns: thumb | day + dishes | price. `display:contents` on
     .wc-body lifts its children into this grid so the price sits beside the
     dishes instead of on its own line — ~90px a day instead of 114px. */
  #weekly .week-card{flex:none;transform:none;margin-top:0;padding:9px 11px;border-radius:14px;
                     display:grid;grid-template-columns:60px 1fr auto;align-items:center;column-gap:11px;
                     box-shadow:3px 4px 0 rgba(0,0,0,.3)}
  #weekly .wc-img{grid-column:1;grid-row:1/span 2}
  .wc-body{display:contents}
  .wc-day-inline{grid-column:2;grid-row:1;align-self:end}
  #weekly .wc-dishes{grid-column:2;grid-row:2;align-self:start}
  #weekly .wc-foot{grid-column:3;grid-row:1/span 2;flex-direction:column;align-items:flex-end;
                   gap:3px;margin:0;padding:0;border-top:0}
  #weekly .week-card::before{content:none}          /* the pin */
  #weekly .week-card:hover{transform:none}
  #weekly .week-card.is-today{box-shadow:0 0 0 2px var(--saffron),3px 4px 0 rgba(0,0,0,.3)}
  #weekly .wc-img{height:60px;border-radius:9px}
  .wc-day{display:none}                             /* overlay chip won't fit 60px */
  .wc-day-inline{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;
                 font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--saffron-deep)}
  #weekly .wc-dishes{font-size:13px;line-height:1.42;margin-top:2px}
  #weekly .wc-foot{margin-top:6px;padding-top:0;border-top:0;justify-content:flex-start;gap:12px}
  #weekly .wc-price{font-size:17px}
  #weekly .wc-tag{font-size:9.5px}
  #weekly .week-note::before{content:none}           /* no longer a swipe carousel */
  .week-range{font-size:12px}

  /* faq — one line per question instead of two */
  .faq{margin-top:22px;gap:9px}
  .faq details{border-radius:16px}
  .faq summary{padding:15px 18px;font-size:17px;line-height:1.25}
  .faq summary::after{font-size:26px}
  .faq .fa{padding:0 18px 18px;font-size:14.5px;line-height:1.6}

  /* closing cta */
  .cta h2{font-size:clamp(30px,7.6vw,42px)}
  .cta p{font-size:15.5px;margin-top:12px}
  .cta .ph{font-size:13.5px;margin-top:18px}
}

/* ------------------------------------------------------------------ *
 * Saver Plan — the build-your-own box.                                *
 *                                                                     *
 * A FORM, not a price list. The first version showed the sheet and a  *
 * "Build your box →" button that went somewhere else to do the        *
 * building; nobody could tell they were allowed to choose, and the    *
 * box then got built twice. Now the choosing happens here and the     *
 * onboarding is handed the finished box.                              *
 *                                                                     *
 * The two required halves of a tiffin are numbered STEPS rather than  *
 * a sentence, because the rule (a starch AND a curry) has to be the   *
 * shape of the form — prose above a sheet gets skipped.               *
 * ------------------------------------------------------------------ */
.saver-card{
  background:var(--card); border:1px solid var(--line); border-radius:24px;
  padding:30px 32px 32px; box-shadow:var(--shadow); max-width:1120px; margin:36px auto 0;
}
.saver-card .sv-head{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center;
  justify-content:space-between; padding-bottom:22px; border-bottom:1px solid var(--line);
}
.saver-card .sv-head h3{ font-size:30px; margin:0; color:var(--char); }
.saver-card .sv-blurb{ color:var(--muted); margin:6px 0 0; max-width:48ch; font-size:15.5px; line-height:1.5; }

/* term switch — weekly and monthly are both reachable from inside the card */
.saver-card .sv-terms{ display:flex; gap:5px; background:var(--cream-2); border:1px solid var(--line); padding:5px; border-radius:999px; }
.saver-card .sv-term{
  border:0; background:transparent; cursor:pointer; border-radius:999px; min-width:104px;
  padding:9px 18px; font:inherit; font-size:15px; font-weight:700; color:var(--muted); line-height:1.15; transition:.2s;
}
.saver-card .sv-term span{ display:block; font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; opacity:.8; margin-top:2px; }
.saver-card .sv-term.on{ background:var(--char); color:var(--cream); }

/* builder | summary. The summary is sticky on wide screens so the total is
   always beside the thing changing it. */
.saver-card .sv-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:34px; align-items:start; margin-top:24px; }

.saver-card .sv-presets{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.saver-card .sv-presets-k{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.saver-card .sv-presets-row{ display:flex; flex-wrap:wrap; gap:8px; }
.saver-card .sv-preset{
  cursor:pointer; font:inherit; font-size:14.5px; font-weight:600; color:var(--ink);
  background:#fff; border:1.5px dashed rgba(200,128,26,.55); border-radius:999px; padding:8px 15px; transition:.18s;
}
.saver-card .sv-preset b{ color:var(--saffron-deep); margin-left:4px; }
.saver-card .sv-preset:hover{ border-style:solid; border-color:var(--saffron); background:rgba(233,162,58,.08); }
.saver-card .sv-pricing{ margin:14px 0 0; font-size:14px; color:var(--muted); }

/* the two required steps */
.saver-card .sv-step{ margin-top:22px; }
.saver-card .sv-step-h{ display:flex; align-items:flex-start; gap:12px; }
.saver-card .sv-step-t{ margin:0; font-size:19px; font-weight:700; color:var(--char); line-height:1.25; }
.saver-card .sv-step-hint{ margin:2px 0 0; color:var(--muted); font-size:14px; }
.saver-card .sv-step-h em{
  margin-left:auto; font-style:normal; font-family:'JetBrains Mono',monospace; white-space:nowrap;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--chili); padding-top:5px;
}
.saver-card .sv-step.is-done .sv-step-h em{ color:#2f7d32; }
.saver-card .sv-n{
  display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:var(--char); color:#fff; font-family:'JetBrains Mono',monospace;
  font-size:13px; font-weight:700; flex:none;
}
.saver-card .sv-step.is-done .sv-n{ background:#2f7d32; }

.saver-card .sv-tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.saver-card .sv-tile{
  border:1.5px solid var(--line); background:var(--cream-2); border-radius:18px; padding:14px 14px 14px;
  cursor:pointer; transition:border-color .18s, box-shadow .18s, background .18s;
}
.saver-card .sv-tile:hover{ border-color:rgba(233,162,58,.7); background:#fff; }
.saver-card .sv-tile.on{ cursor:default; border-color:var(--saffron); background:#fff;
  box-shadow:0 14px 30px -20px rgba(200,128,26,.7); }
.saver-card .sv-tile-top{ display:flex; align-items:center; gap:10px; }
.saver-card .sv-ico{ display:grid; place-items:center; width:40px; height:40px; border-radius:12px; flex:none;
  background:rgba(233,162,58,.16); color:var(--saffron-deep); }
.saver-card .sv-ico svg{ width:24px; height:24px; }
.saver-card .sv-tile.on .sv-ico{ background:var(--saffron); color:#fff; }
.saver-card .sv-dish{ font-size:18px; font-weight:700; color:var(--char); }
.saver-card .sv-from{ margin-left:auto; font-size:13px; color:var(--muted); white-space:nowrap; }
.saver-card .sv-rm{ margin-left:auto; border:0; background:none; cursor:pointer; font:inherit; font-size:13px;
  color:var(--chili); text-decoration:underline; text-underline-offset:3px; padding:6px 2px; }

.saver-card .sv-opts{ display:flex; gap:6px; margin-top:12px; }
.saver-card .sv-size{
  flex:1 1 0; min-width:0; cursor:pointer; border:1.5px solid var(--line); background:#fff; border-radius:12px;
  padding:8px 6px; font:inherit; color:var(--ink); line-height:1.2; transition:.15s; text-align:center;
}
.saver-card .sv-size span{ display:block; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--muted); letter-spacing:.03em; }
.saver-card .sv-size b{ display:block; font-size:17px; margin-top:2px; }
.saver-card .sv-size small{ font-size:11px; font-weight:500; color:var(--muted); margin-left:1px; }
.saver-card .sv-size:hover{ border-color:var(--saffron); }
.saver-card .sv-size.on{ background:var(--saffron); border-color:var(--saffron); }
.saver-card .sv-size.on span, .saver-card .sv-size.on small{ color:#3a2a0d; }

.saver-card .sv-qty{ display:flex; align-items:center; gap:6px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
.saver-card .sv-qty > span{ font-size:13px; color:var(--muted); margin-right:auto; }
.saver-card .sv-cnt{
  cursor:pointer; border:1.5px solid var(--line); background:#fff; border-radius:10px;
  min-width:46px; height:36px; font:inherit; font-weight:700; font-size:14px; color:var(--muted); transition:.15s;
}
.saver-card .sv-cnt.on{ background:var(--char); border-color:var(--char); color:var(--cream); }

.saver-card .sv-swap{
  display:block; width:100%; margin-top:10px; text-align:left; cursor:pointer; font:inherit; font-size:13.5px; font-weight:600;
  color:#1f6b24; background:rgba(47,125,50,.09); border:1px solid rgba(47,125,50,.3); border-radius:10px; padding:8px 11px;
}
.saver-card .sv-swap:hover{ background:rgba(47,125,50,.15); }

/* the summary */
.saver-card .sv-sum{
  position:sticky; top:96px; background:var(--char); color:var(--cream); border-radius:20px; padding:22px 22px 20px;
  box-shadow:0 28px 60px -30px rgba(23,19,12,.8);
}
.saver-card .sv-sum-k{ margin:0; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--saffron-2); }
.saver-card .sv-tins{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:6px; }
.saver-card .sv-tin{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:12px;
  background:linear-gradient(180deg,#5a5040,#3a3226); border:1px solid rgba(255,255,255,.12);
}
.saver-card .sv-tin-ico{ display:grid; place-items:center; color:var(--saffron-2); }
.saver-card .sv-tin-ico svg{ width:20px; height:20px; }
.saver-card .sv-tin-n{ font-weight:700; }
.saver-card .sv-tin-q{ margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:12px; color:rgba(247,240,222,.75); }
.saver-card .sv-tin.empty{ background:none; border:1.5px dashed rgba(247,240,222,.28); padding:0; }
.saver-card .sv-tin.empty a{ display:block; width:100%; padding:9px 12px; color:rgba(247,240,222,.7); font-size:14.5px; }
.saver-card .sv-tin.empty a:hover{ color:var(--saffron-2); }
.saver-card .sv-need{ margin:14px 0 0; color:rgba(247,240,222,.8); font-size:14.5px; line-height:1.5; }
.saver-card .sv-lines{ list-style:none; margin:14px 0 0; padding:12px 0 0; border-top:1px solid rgba(247,240,222,.14); display:grid; gap:4px; }
.saver-card .sv-lines li{ display:flex; justify-content:space-between; gap:12px; font-size:14.5px; color:rgba(247,240,222,.85); }
.saver-card .sv-lines b{ font-weight:600; }
.saver-card .sv-sum-total{ display:flex; align-items:baseline; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid rgba(247,240,222,.14); }
.saver-card .sv-sum-total span{ font-size:15px; margin-right:auto; }
.saver-card .sv-sum-total b{ font-family:'Rozha One',Georgia,serif; font-weight:400; font-size:40px; line-height:1; color:var(--saffron-2); }
.saver-card .sv-sum-total small{ font-size:13px; color:rgba(247,240,222,.7); }
.saver-card .sv-permeal{ margin:4px 0 0; text-align:right; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(247,240,222,.7); }
.saver-card .sv-compare{ margin:12px 0 0; padding:9px 12px; border-radius:10px; background:rgba(62,207,198,.12); color:#9be8e2; font-size:14px; font-weight:600; }
.saver-card .sv-promo{ margin:10px 0 0; font-weight:700; color:#8fd694; font-size:14px; line-height:1.45; }
.saver-card .sv-go{ display:flex; width:100%; margin-top:16px; }
.saver-card .sv-go.is-off{ opacity:.4; pointer-events:none; box-shadow:none; }
.saver-card .sv-assure{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:5px; }
.saver-card .sv-assure li{ font-size:13px; color:rgba(247,240,222,.72); padding-left:20px; position:relative; }
.saver-card .sv-assure li::before{ content:"✓"; position:absolute; left:0; color:#8fd694; font-weight:700; }
.saver-card .sv-assure a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }

/* the teaser under the four packs */
.saver-teaser{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:22px;
  max-width:1120px; margin:30px auto 0; padding:20px 24px; border-radius:22px; cursor:pointer;
  background:var(--card); border:1.5px dashed rgba(200,128,26,.6);
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.saver-teaser[hidden]{ display:none; }
.saver-teaser:hover{ border-style:solid; border-color:var(--saffron); transform:translateY(-3px); box-shadow:0 22px 44px -28px rgba(23,19,12,.55); }
.saver-teaser .st-icons{ display:grid; grid-template-columns:repeat(2,34px); gap:6px; }
.saver-teaser .st-ico{ display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:rgba(233,162,58,.16); color:var(--saffron-deep); }
.saver-teaser .st-ico svg{ width:20px; height:20px; }
.saver-teaser .st-copy{ display:grid; gap:2px; min-width:0; }
.saver-teaser .st-kick{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--saffron-deep); }
.saver-teaser .st-copy b{ font-family:'Rozha One',Georgia,serif; font-weight:400; font-size:clamp(20px,2vw,25px); line-height:1.15; color:var(--char); }
.saver-teaser .st-sub{ font-size:14.5px; color:var(--muted); }
.saver-teaser .st-price{ text-align:right; white-space:nowrap; }
.saver-teaser .st-from, .saver-teaser .st-per{ display:block; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.saver-teaser .st-price b{ display:block; font-family:'Rozha One',Georgia,serif; font-weight:400; font-size:34px; line-height:1.05; color:var(--saffron-deep); }
.saver-teaser .st-go{ font-family:'JetBrains Mono',monospace; font-weight:600; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--char); color:var(--cream); border-radius:999px; padding:13px 20px; white-space:nowrap; }

/* jump targets clear the sticky site header */
#saverBody, .saver-card .sv-step, #svSummary{ scroll-margin-top:96px; }

/* phone dock — only below the two-column breakpoint */
.sv-dock{ display:none; }

@media(max-width:960px){
  .saver-card .sv-layout{ grid-template-columns:1fr; gap:26px; }
  .saver-card .sv-sum{ position:static; }
  .sv-dock{
    display:flex; align-items:center; gap:12px; position:fixed; left:12px; right:12px;
    bottom:calc(12px + env(safe-area-inset-bottom)); z-index:60;
    background:var(--char); color:var(--cream); border-radius:18px; padding:10px 10px 10px 18px;
    box-shadow:0 20px 40px -12px rgba(23,19,12,.6);
    transform:translateY(140%); opacity:0; pointer-events:none; transition:transform .3s cubic-bezier(.2,.8,.3,1), opacity .3s;
  }
  .sv-dock.on{ transform:none; opacity:1; pointer-events:auto; }
  .sv-dock-l{ display:grid; min-width:0; margin-right:auto; }
  .sv-dock-k{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--saffron-2); }
  .sv-dock-l b{ font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sv-dock-l small{ font-size:12px; font-weight:400; opacity:.7; }
  .sv-dock-go{ flex:none; font-family:'JetBrains Mono',monospace; font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
    padding:12px 16px; border-radius:12px; border:1px solid rgba(247,240,222,.25); color:var(--cream); }
  .sv-dock-go.is-go{ background:var(--saffron); border-color:var(--saffron); color:#231a0c; }
  .saver-teaser{ grid-template-columns:auto minmax(0,1fr) auto; }
  .saver-teaser .st-go{ grid-column:1 / -1; text-align:center; }
}

@media(max-width:560px){
  .saver-card{ padding:20px 16px 18px; border-radius:20px; margin-top:26px; }
  .saver-card .sv-head h3{ font-size:25px; }
  .saver-card .sv-terms{ width:100%; }
  .saver-card .sv-term{ flex:1; }
  .saver-card .sv-tiles{ grid-template-columns:1fr; }
  .saver-card .sv-step-t{ font-size:17.5px; }
  .saver-card .sv-sum{ padding:20px 18px 18px; }
  .saver-teaser{ grid-template-columns:minmax(0,1fr) auto; gap:14px 16px; padding:18px; }
  .saver-teaser .st-icons{ display:none; }
  .saver-teaser .st-sub{ display:none; }
  .saver-teaser .st-price b{ font-size:28px; }
}

/* ==================================================================== *
 * WHAT PEOPLE SAY                                                      *
 *                                                                      *
 * These are real WhatsApp messages, so they are shown as the thread    *
 * they arrived in — customer bubble, our reply, the time it was sent.  *
 * A generic five-star widget would have been easier and would have     *
 * been a small lie: nobody gave a rating, they sent a message. The     *
 * bubble is the honest form, and it happens to be the more persuasive  *
 * one — you can tell it was typed by a person.                         *
 *                                                                      *
 * Ground is --char-2 rather than the .dark --char that #weekly uses,   *
 * lit by two soft washes instead of the terra texture, so the page's   *
 * two dark bands do not read as the same band twice.                   *
 * ==================================================================== */
#reviews{position:relative;background:var(--char-2);overflow:hidden}
#reviews::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(820px 420px at 12% -10%,rgba(233,162,58,.17),transparent 62%),
             radial-gradient(720px 440px at 90% 110%,rgba(168,53,39,.26),transparent 62%)}
#reviews>*{position:relative;z-index:1}

/* stretch, not start: two threads of different lengths sitting at different
   heights read as a broken grid rather than as two messages. The attribution
   row is pushed to the bottom of whichever card is shorter. */
.rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
         margin-top:clamp(28px,3.6vw,44px);align-items:stretch}

.rv-thread{background:rgba(247,240,222,.04);border:1px solid rgba(247,240,222,.13);
           border-radius:22px;padding:clamp(18px,2.2vw,26px);
           display:flex;flex-direction:column;align-items:flex-start;
           box-shadow:0 34px 64px -40px rgba(0,0,0,.95)}

/* the bubbles. The 6px corner is the tail — a real pointer triangle at this
   size reads as a rendering artefact on a card that is itself rounded. */
.rv-msg{max-width:94%;border-radius:17px;padding:15px 17px 9px;font-size:16.5px;line-height:1.62}
.rv-msg+.rv-msg{margin-top:11px}
.rv-msg:last-of-type{margin-bottom:16px}
.rv-msg p+p{margin-top:9px}
.rv-msg.them{background:var(--char-3);border:1px solid rgba(247,240,222,.10);
             color:#f6ecd9;border-top-left-radius:6px;align-self:flex-start}
.rv-msg.us{background:linear-gradient(180deg,rgba(233,162,58,.30),rgba(233,162,58,.17));
           border:1px solid rgba(233,162,58,.42);color:#fbeacd;font-size:15.5px;
           border-top-right-radius:6px;align-self:flex-end}

.rv-time{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:7px;
         font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.07em;
/* .5 cream over --char-3 measures 4.49:1 — a hair under the 4.5 AA floor for
   text this small. .58 clears it. The us-bubble's warmer ground needs its own
   value: the same grey on amber measures 3.95:1. */
         color:rgba(247,240,222,.58)}
.rv-msg.us .rv-time{color:rgba(251,234,205,.72)}
/* read receipt — only ever on our own replies, same as the phone */
.rv-time .tick{width:16px;height:16px;color:#6fc9f5;flex:none}

.rv-who{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
        margin-top:auto;padding-top:14px;border-top:1px solid rgba(247,240,222,.11);
        font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.13em;
        text-transform:uppercase;color:#e2caa2}
.rv-wa{display:inline-flex;align-items:center;gap:7px;margin-left:auto;color:#5fe08f;white-space:nowrap}
.rv-wa svg{width:14px;height:14px;fill:currentColor;flex:none}

.rv-foot{margin-top:clamp(26px,3.4vw,38px);display:flex;flex-direction:column;
         align-items:center;gap:18px;text-align:center}
.rv-note{font-size:14.5px;line-height:1.6;color:#d6c3a6;max-width:560px}

/* the pull-through under the plan cards */
.plans-proof{margin-top:22px;text-align:center;font-size:16px;line-height:1.55;color:var(--muted)}
.plans-proof a{display:inline-flex;flex-wrap:wrap;gap:4px 10px;justify-content:center;
               align-items:baseline;border-bottom:1px solid transparent;transition:.25s}
.plans-proof a:hover{color:var(--ink)}
.plans-proof b{color:#8a560c;font-weight:600;white-space:nowrap}

@media(max-width:900px){
  .rv-grid{grid-template-columns:1fr;gap:16px;max-width:600px;margin-inline:auto}
  .rv-msg{max-width:100%}
}
@media(max-width:760px){
  .rv-msg{font-size:15.5px;padding:13px 15px 8px}
  .rv-msg.us{font-size:14.5px}
  .rv-who{font-size:10px;letter-spacing:.1em;gap:8px}
  .plans-proof{font-size:14.5px}
}

/* ---------------------------------------------------------- hero stat row *
 * Four tiles in a 560px hero column wrapped 3 + 1 at every laptop width,
 * leaving "Pause / Anytime" orphaned on a line of its own under the first
 * tile. An explicit four-up grid holds the row together; the tiles keep
 * their own widths (auto) so the labels are not stretched to match the
 * longest one. Below 761px site.css already lays them out 2 x 2, which is
 * the right answer on a phone, so this starts above it.
 * -------------------------------------------------------------------------- */
@media(min-width:761px){
  .hero-stats.four{display:grid;grid-template-columns:repeat(4,auto);
                   gap:20px;justify-content:start;align-items:end}
  .hero-stats.four .s b{font-size:31px}
  .hero-stats.four .s span{font-size:9.5px;letter-spacing:.11em}
}