/* ------------------------------------------------------------------ *
 * 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}

/* ------------------------------------------------------- "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:var(--r);
  padding:26px 28px 24px; box-shadow:var(--shadow); max-width:900px; margin:32px auto 0;
}
.saver-card .sv-head{
  display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start;
  justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--line);
}
.saver-card .sv-head h3{ font-size:26px; margin:0; }
.saver-card .sv-blurb{ color:var(--muted); margin:5px 0 0; max-width:42ch; font-size:15px; }

/* term switch — weekly and monthly are both reachable from inside the card */
.saver-card .sv-terms{ display:flex; gap:6px; background:var(--cream-2); padding:4px; border-radius:999px; }
.saver-card .sv-term{
  border:0; background:transparent; cursor:pointer; border-radius:999px;
  padding:7px 16px; font:inherit; font-size:13.5px; font-weight:700; color:var(--muted); line-height:1.15;
}
.saver-card .sv-term span{ display:block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; opacity:.75; }
.saver-card .sv-term.on{ background:var(--char); color:#fff; }

/* the two required steps */
.saver-card .sv-step{ padding:20px 0 6px; border-bottom:1px solid var(--line); }
.saver-card .sv-step-h{
  display:flex; align-items:center; gap:9px; margin:0; font-size:17px; font-weight:700;
}
.saver-card .sv-step-h em{
  margin-left:auto; font-style:normal; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--chili);
}
.saver-card .sv-step.is-done .sv-step-h em{ color:var(--muted); opacity:.5; }
.saver-card .sv-n{
  display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:var(--char); color:#fff; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px; font-weight:700; flex:none;
}
.saver-card .sv-step.is-done .sv-n{ background:#2f7d32; }
.saver-card .sv-step-hint{ margin:4px 0 12px 31px; color:var(--muted); font-size:13.5px; }

.saver-card .sv-row{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:7px 0 7px 31px;
}
.saver-card .sv-dish{ min-width:4.5rem; font-weight:700; }
.saver-card .sv-sizes{ display:flex; flex-wrap:wrap; gap:7px; }
.saver-card .sv-size{
  cursor:pointer; border:1px solid var(--line); background:var(--cream-2); border-radius:999px;
  padding:8px 14px; font:inherit; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px; color:var(--muted); white-space:nowrap; transition:.14s;
}
.saver-card .sv-size:hover{ border-color:var(--saffron); background:#fff; }
.saver-card .sv-size b{ color:var(--ink); }
.saver-card .sv-size.on{ background:var(--saffron); border-color:var(--saffron); color:#fff; }
.saver-card .sv-size.on b{ color:#fff; }

.saver-card .sv-x2{ display:flex; gap:5px; margin-left:auto; }
.saver-card .sv-cnt{
  cursor:pointer; border:1px solid var(--line); background:var(--cream-2); border-radius:9px;
  width:38px; height:30px; font:inherit; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px; color:var(--muted); transition:.14s;
}
.saver-card .sv-cnt.on{ background:#2f7d32; border-color:#2f7d32; color:#fff; }

/* the running total */
.saver-card .sv-total{
  margin-top:20px; padding:16px 18px; border-radius:14px;
  background:rgba(233,162,58,.09); border:1px solid rgba(233,162,58,.35);
}
.saver-card .sv-total.is-empty{ background:var(--cream-2); border-color:var(--line); }
.saver-card .sv-need{ margin:0; color:var(--muted); font-size:15px; }
.saver-card .sv-total-top{ display:flex; flex-wrap:wrap; gap:12px; align-items:baseline; justify-content:space-between; }
.saver-card .sv-total-k{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.saver-card .sv-box{ margin:3px 0 0; font-size:17px; font-weight:700; }
.saver-card .sv-total-v{ display:flex; align-items:baseline; gap:9px; }
.saver-card .sv-total-v s{ color:var(--muted); font-size:17px; }
.saver-card .sv-total-v b{ font-size:34px; color:var(--saffron-deep); line-height:1; }
.saver-card .sv-permeal{
  margin:6px 0 0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.saver-card .sv-promo{ margin:8px 0 0; font-weight:700; color:#2f7d32; font-size:14.5px; }

.saver-card .sv-go{ margin-top:18px; }
.saver-card .sv-go.is-off{ opacity:.45; pointer-events:none; }
.saver-card .sv-note{ margin:12px 0 0; color:var(--muted); font-size:13px; }

@media(max-width:560px){
  .saver-card{ padding:20px 18px; }
  .saver-card .sv-row{ padding-left:0; }
  .saver-card .sv-step-hint{ margin-left:0; }
  .saver-card .sv-x2{ margin-left:0; }
}