/* ═══════════════════════════════════════════════════════════════════════
   GOURMET VENDING — placement landing page
   Design system derived from the machines themselves: the cabinet panel,
   the lit glass shelf, and the blue COLD strip with its white price tags.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Archivo Narrow';
  src:url('fonts/ArchivoNarrow-var.woff2') format('woff2');
  font-weight:600 700; font-style:normal; font-display:swap;
}

:root{
  /* ── Colour: five values, all taken off a real GV machine ── */
  --cabinet:#eef1ee;      /* machine body panel — page ground        */
  --glass:#ffffff;        /* lit shelf interior — card surfaces      */
  --forest:#1c6042;       /* GV green, from the logo                 */
  --forest-d:#12432e;
  --forest-l:#2a7d57;
  --forest-soft:#e6efe9;
  --forest-tint:#f3f8f5;
  --signal:#e15e29;       /* GV orange — large fills + decoration    */
  --signal-ink:#c44a19;   /* AA-safe orange — text + controls        */
  --signal-ink-d:#a8461e;
  --signal-soft:#fdf0e9;
  --cold-d:#0d4a90;

  /* ── Ink ── */
  --ink:#14201b; --ink-2:#3f524a; --ink-3:#5f6e67;
  --line:#dde5e0; --line-2:#c6d1cb;

  /* ── Drink-category accents (dots decorative; text shades pass AA) ── */
  --c-water:#2b8ccc;  --c-water-t:#216d9f;  --c-water-bg:#e1eff8;
  --c-iso:#17a2a2;    --c-iso-t:#107474;    --c-iso-bg:#dff2f2;
  --c-juice:#f08c1e;  --c-juice-t:#9a5a13;  --c-juice-bg:#fdefdf;
  --c-tea:#4a9c3f;    --c-tea-t:#397831;    --c-tea-bg:#e6f1e4;
  --c-coffee:#8a5a34; --c-coffee-t:#8a5a34; --c-coffee-bg:#efe8e3;
  --c-soft:#d43f3f;   --c-soft-t:#c42c2c;   --c-soft-bg:#f9e4e4;
  --c-energy:#e0a915; --c-energy-t:#88660c; --c-energy-bg:#fbf3de;
  --c-asian:#c25b9c;  --c-asian-t:#a04b81;  --c-asian-bg:#f6e8f1;

  /* ── Type: one scale, four weights ── */
  --display:'Archivo Narrow',"Arial Narrow",Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --t-2xs:12.5px; --t-xs:13px; --t-sm:14.5px; --t-base:16.5px; --t-md:18.5px; --t-lg:22px;
  --t-xl:28px; --t-2xl:clamp(26px,3.4vw,38px); --t-3xl:clamp(32px,4.6vw,54px);
  --t-huge:clamp(64px,9vw,116px);

  /* ── Space: 4px base ── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --r:14px; --r-s:10px; --r-pill:999px;
  --shadow:0 1px 2px rgba(20,32,27,.06),0 6px 16px rgba(20,32,27,.06);
  --shadow-l:0 3px 8px rgba(20,32,27,.08),0 16px 34px rgba(20,32,27,.10);
  --maxw:1140px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--line-2) transparent}
body{margin:0;background:var(--cabinet);color:var(--ink);
  font:400 var(--t-base)/1.62 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block;height:auto}
a{color:var(--forest);text-underline-offset:.18em;text-decoration-thickness:.08em}
::selection{background:var(--forest);color:#fff}
input,textarea{caret-color:var(--forest)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:2.5px solid var(--forest-l);outline-offset:2px;border-radius:5px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s5)}
@media(max-width:560px){.wrap{padding:0 var(--s4)}}
.narrow{max-width:900px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The skip link is the first thing a keyboard user reaches. Clipped to 1x1 it
   stayed invisible and unusable even when focused, so reveal it on focus. */
.sr:focus,.sr:focus-visible{position:fixed;top:10px;left:10px;z-index:100;
  width:auto;height:auto;min-height:44px;overflow:visible;clip:auto;
  display:inline-flex;align-items:center;padding:10px 18px;border-radius:var(--r-s);
  background:var(--forest);color:#fff;font-family:var(--display);font-weight:700;
  font-size:var(--t-sm);text-decoration:none;box-shadow:var(--shadow-l);
  outline:3px solid var(--signal-ink);outline-offset:2px}

h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.012em;line-height:1.08;margin:0}
h1{font-size:var(--t-3xl)}
.sec-h{font-size:var(--t-2xl);margin:0 0 var(--s4)}
/* Vending Mart uses its section head as the page h1; keep the h2 sizing. */
h1.sec-h{font-size:var(--t-2xl)}
.sec-head{max-width:64ch;margin-bottom:var(--s6)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-s{color:var(--ink-2);margin:0;font-size:var(--t-md);line-height:1.55}
.num{font-family:var(--display);font-variant-numeric:tabular-nums;font-weight:700}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:14px 26px;border-radius:var(--r-pill);font-weight:700;font-size:var(--t-base);
  font-family:var(--body);text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  min-height:50px;line-height:1.2;
  transition:background .16s,border-color .16s,transform .12s cubic-bezier(.2,.8,.3,1),box-shadow .16s}
.btn:active{transform:translateY(1px) scale(.995)}
.btn-primary{background:var(--signal-ink);color:#fff;box-shadow:0 1px 2px rgba(20,32,27,.10)}
.btn-primary:hover{background:var(--signal-ink-d);transform:translateY(-1px);box-shadow:0 4px 12px rgba(20,32,27,.16)}
.btn-ghost{background:var(--glass);color:var(--forest);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--forest);background:var(--forest-tint)}
.btn-ghost-l{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost-l:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-lg{padding:17px 32px;font-size:17px;min-height:56px}
.btn svg{width:19px;height:19px;flex:none}


/* ── Header ── */
header{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;
  background:rgba(238,241,238,.94);backdrop-filter:saturate(180%) blur(10px)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);height:74px}
.hd nav{display:flex;gap:var(--s6);margin-left:auto;margin-right:var(--s2)}
.hd nav a{color:var(--ink-2);text-decoration:none;font-size:var(--t-sm);font-weight:600;
  display:inline-flex;align-items:center;min-height:24px;position:relative}
.hd nav a:hover{color:var(--forest)}
/* The nav is identical on every page, so the current one needs marking or the
   reader loses their place. aria-current carries it for assistive tech too. */
.hd nav a[aria-current="page"]{color:var(--forest);font-weight:700}
.hd nav a[aria-current="page"]::after{content:"";display:block;position:absolute;
  left:0;right:0;bottom:-3px;height:2px;background:var(--forest);border-radius:2px}
.hd .hdcta{display:flex;align-items:center;gap:var(--s4)}
.hd .tel{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-sm);color:var(--ink-2);
  text-decoration:none;font-weight:700;white-space:nowrap;font-family:var(--display);
  font-variant-numeric:tabular-nums}
.hd .tel:hover{color:var(--forest)}
.hd .btn{padding:11px 20px;min-height:44px;font-size:15px}
@media(max-width:1200px){.hd nav{display:none}}
@media(max-width:720px){.hd{height:64px}.hd .tel{display:none}}

/* ══ MOBILE MENU ═══════════════════════════════════════════════════════════
   The desktop nav is hidden from 1200px down, which left the other pages
   unreachable on a phone. The burger takes over at exactly that point. */
.burger{display:none;width:44px;height:44px;flex:none;padding:0;cursor:pointer;
  border:1.5px solid var(--line-2);border-radius:10px;background:var(--glass);
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
/* Two real glyphs swapped by display, not three bars rotated into an X.
   Touch users have no Escape key, so the close control has to be unmistakable
   and must not depend on a transform rendering correctly. */
.burger .bars{display:flex;flex-direction:column;gap:5px}
.burger .bars i{display:block;width:19px;height:2px;border-radius:2px;background:var(--ink)}
.burger .ex{display:none;width:21px;height:21px;fill:none;stroke:var(--ink);
  stroke-width:2.2;stroke-linecap:round}
.burger[aria-expanded="true"] .bars{display:none}
.burger[aria-expanded="true"] .ex{display:block}
.burger[aria-expanded="true"]{border-color:var(--forest)}
.burger:hover{border-color:var(--forest)}
.burger:focus-visible{outline:2.5px solid var(--forest-l);outline-offset:2px}
/* ══ BRAND LOCKUP ══════════════════════════════════════════════════════════
   The official CVM mark, used whole. It carries its own frame and endorsement
   line, so the header just sizes it; the footer sits it on a white plate
   because the artwork has a white ground and the footer is dark green. */
.hd .brandlink{display:flex;align-items:center;text-decoration:none}
.hd .brandlink img{height:52px;width:auto;display:block}
@media(max-width:720px){.hd .brandlink img{height:42px}}
.flogo{height:64px;width:auto;background:#fff;border-radius:10px;padding:8px 12px;
  margin-bottom:var(--s4)}

@media(max-width:1200px){.burger{display:flex}}
@media(max-width:560px){.hd .hdcta{display:none}}

.mnav{position:fixed;top:74px;left:0;right:0;bottom:0;z-index:59;overflow-y:auto;
  background:var(--cabinet);padding:var(--s5) 0 var(--s7)}
.mnav[hidden]{display:none}
.mnav-h{font-family:var(--display);font-size:var(--t-2xs);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s3)}
.mnav-links{display:flex;flex-direction:column;margin:0 0 var(--s6)}
.mnav-links a{display:flex;align-items:center;min-height:52px;text-decoration:none;
  font-family:var(--display);font-size:var(--t-md);font-weight:700;color:var(--ink);
  border-bottom:1px solid var(--line)}
.mnav-links a:hover,.mnav-links a:focus-visible{color:var(--forest)}
.mnav-foot{display:flex;flex-direction:column;align-items:stretch;gap:var(--s4)}
.mnav-foot .btn{width:100%;justify-content:center;min-height:52px}
.mnav-foot .tel{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;font-family:var(--display);font-weight:700;font-size:var(--t-base);
  color:var(--ink-2);text-decoration:none;font-variant-numeric:tabular-nums}
@media(max-width:720px){.mnav{top:64px}}

/* ── Hero ── */
.hero{background:var(--glass);padding:var(--s5) 0}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:var(--s7);align-items:center}
h1 em{font-style:normal;color:var(--forest);white-space:nowrap;
  background:linear-gradient(180deg,transparent 63%,rgba(225,94,41,.28) 63%,rgba(225,94,41,.28) 92%,transparent 92%)}
.lede{font-size:var(--t-md);color:var(--ink-2);margin:var(--s5) 0 var(--s6);max-width:46ch}
/* The hero column spaces itself with one gap rather than each block carrying a
   margin. Blocks come and go here (the lede and the moat have both been pulled),
   and margin-based spacing collapsed to nothing the moment one was removed. */
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5)}
.hero-copy > *{margin-top:0;margin-bottom:0}
.hero-cta{display:flex;gap:var(--s3);flex-wrap:wrap}
.microtrust{display:flex;gap:var(--s3) var(--s5);flex-wrap:wrap;font-size:var(--t-sm);color:var(--ink-2)}
.microtrust span{display:flex;align-items:center;gap:7px;font-weight:600}
.microtrust svg{width:17px;height:17px;stroke:var(--forest);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.hero-shot{position:relative}
.hero-shot img{border-radius:var(--r);box-shadow:var(--shadow-l);width:100%;object-fit:cover;aspect-ratio:3/4}
@media(max-width:900px){
  .hero{padding:var(--s6) 0}
  .hero-grid{grid-template-columns:1fr;gap:var(--s5)}
  .hero-shot{max-width:400px;margin:0 auto;width:100%;order:-1}
  .lede{margin:var(--s4) 0 var(--s5)}
}

/* ── Brand shelf ── */
.brandstrip{background:var(--glass);padding:var(--s5) 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.brandstrip .cap{margin:0 0 var(--s4);text-align:center;font-size:var(--t-sm);color:var(--ink-2);font-weight:600}
.brandstrip .cap b{color:var(--forest);font-weight:700}
.mq{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  scroll-behavior:smooth;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-track{display:flex;align-items:center;gap:54px;width:max-content;
  animation:mqroll 42s linear infinite;will-change:transform}
.mq::-webkit-scrollbar{display:none}
.mq:focus-visible{outline:2.5px solid var(--forest-l);outline-offset:2px}
.mq[data-paused="true"] .mq-track{animation-play-state:paused}
/* Stop the ribbon whenever someone is trying to read it. */
.mq:hover .mq-track{animation-play-state:paused}
.brandstrip:focus-within .mq-track{animation-play-state:paused}
.mq-step{display:inline-flex;align-items:center;justify-content:center;
  width:32px;min-height:32px;border:1.5px solid var(--line-2);background:var(--glass);
  border-radius:var(--r-pill);color:var(--ink-2);cursor:pointer;padding:0}
.mq-step:hover{border-color:var(--forest);color:var(--forest)}
.mq-step svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
@keyframes mqroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.mq-track img{height:32px;width:auto;flex:none;display:block}
.mq-track img.sq{height:44px}
.mq-foot{display:flex;align-items:center;justify-content:center;gap:var(--s3);margin-top:var(--s4)}
.mq-foot .note{font-size:var(--t-xs);color:var(--ink-3)}
.mq-pause{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line-2);
  background:var(--glass);border-radius:var(--r-pill);padding:6px 14px;font:inherit;
  font-size:var(--t-xs);font-weight:600;color:var(--ink-2);cursor:pointer;min-height:32px}
.mq-pause:hover{border-color:var(--forest);color:var(--forest)}
.mq-pause svg{width:11px;height:11px;fill:currentColor}
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:32px}
  .mq{-webkit-mask-image:none;mask-image:none}
  .mq-track img[data-dup]{display:none}
  .mq-step{display:none}
}

/* ── Sections ── */
/* ══ VERTICAL RHYTHM ═══════════════════════════════════════════════════════
   One number governs the gap between every top-level block. Sections carry no
   margins, so the gap a reader sees is padding-bottom + padding-top: at --s5
   that is a uniform 48px, matching the step used inside sections. Change it
   here and the whole page re-spaces; do not add margins to sections.

   The same discipline applies one level down: the gap under a section head is
   --s6 and nothing else. A first block carrying its own top margin stacks on
   top of that -- which is how #earnings drifted to 128px -- so it is zeroed
   here -- see SPACING NORMALISATION at the foot of this file, which has to sit
   last so it beats every component's own margin. Space a block from its
   heading by changing .sec-head, never by adding a margin to the block. */
section{padding:var(--s5) 0}
.alt{background:var(--glass)}
.dark{background:var(--forest-d);color:#fff}

/* ── Problem ── */
.prob{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.prob-card{border-top:2px solid var(--forest);padding:var(--s5) 2px 0}
.prob-card b{display:block;font-family:var(--display);font-size:var(--t-lg);font-weight:700;
  margin-bottom:var(--s2);line-height:1.16}
.prob-card p{margin:0;font-size:var(--t-sm);color:var(--ink-2);line-height:1.6}
.prob-sum{margin-top:var(--s7);background:var(--forest);color:#fff;border-radius:var(--r);
  padding:var(--s6);display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap}
.prob-sum p{margin:0;font-size:var(--t-md);font-weight:600;flex:1;min-width:280px;line-height:1.5}
@media(max-width:860px){.prob{grid-template-columns:1fr;gap:var(--s6)}}

/* ── Machine cards ── */
.machines{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.mcard{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.mcard .ph{background:var(--cabinet);border-bottom:1px solid var(--line);position:relative}
.mcard .ph img{width:100%;aspect-ratio:4/5;object-fit:cover}
.mcard .lbl{position:absolute;top:var(--s3);left:var(--s3);background:var(--forest);color:#fff;
  border-radius:var(--r-pill);padding:5px 13px;font-family:var(--display);font-size:var(--t-2xs);
  font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.mcard .bd{padding:var(--s5);display:flex;flex-direction:column;flex:1}
.mcard h3{font-size:var(--t-lg);margin-bottom:var(--s2)}
.mcard p{margin:0 0 var(--s4);font-size:var(--t-sm);color:var(--ink-2);flex:1;line-height:1.6}
.mspec{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);font-size:var(--t-sm)}
.mspec li{display:flex;justify-content:space-between;gap:var(--s3);padding:9px 0;border-bottom:1px solid var(--line)}
.mspec li:last-child{border-bottom:none}
.mspec .k{color:var(--ink-3)}
.mspec .v{font-family:var(--display);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
/* Inline links in a spec row inherit the row's 17px line box, under the 24px
   WCAG 2.2 target minimum, so give them their own padded hit area. */
.mspec .v a{display:inline-flex;align-items:center;min-height:24px;padding:3px 2px}
@media(max-width:920px){.machines{grid-template-columns:1fr}
  .mcard{flex-direction:row}
  .mcard .ph{width:38%;flex:none;border-bottom:none;border-right:1px solid var(--line)}
  .mcard .ph img{height:100%;aspect-ratio:auto;min-height:100%}}
@media(max-width:640px){.mcard{flex-direction:column}
  .mcard .ph{width:100%;border-right:none;border-bottom:1px solid var(--line)}
  .mcard .ph img{aspect-ratio:4/3}}

/* ── Earnings ── */
.earn{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s7);align-items:start}
.earn-lead .fig{font-family:var(--display);font-weight:700;font-size:clamp(50px,6.6vw,82px);
  line-height:1.04;letter-spacing:-.005em;color:var(--forest);
  font-variant-numeric:tabular-nums lining;margin:0;display:block}
.earn-lead .fig .cur{font-size:clamp(22px,2.9vw,36px);font-weight:700;color:var(--forest-l);
  vertical-align:.42em;margin-right:.08em;letter-spacing:0}
.earn-lead .fig .to{font-weight:600;color:var(--forest-l);margin:0 .07em;letter-spacing:0}
.earn-lead .fig small{font-family:var(--body);font-size:var(--t-md);font-weight:600;letter-spacing:0;
  color:var(--ink-2);display:block;margin-top:var(--s4);line-height:1.45;max-width:30ch;text-wrap:balance}
.earn-note{font-size:var(--t-sm);color:var(--ink-2);margin:var(--s4) 0 0;line-height:1.62}
.earn-note b{color:var(--ink)}
.earn-lead .earn-note{font-size:var(--t-base);border-top:2px solid var(--forest);padding-top:var(--s4)}
.earn-caveat+.earn-note{margin-top:var(--s3)}
.earn-rows{display:grid;gap:var(--s2)}
.erow{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-s);padding:14px 16px;
  display:grid;grid-template-columns:1fr auto;gap:4px var(--s4);align-items:baseline}
.erow .name{font-family:var(--display);font-weight:700;font-size:var(--t-base)}
.erow .amt{font-family:var(--display);font-weight:700;font-size:var(--t-lg);color:var(--forest);
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.erow .meta{font-size:var(--t-xs);color:var(--ink-3)}
.erow .bar{grid-column:1/-1;height:7px;border-radius:99px;background:var(--forest-soft);
  margin-top:7px;position:relative;overflow:hidden}
.erow .bar i{position:absolute;top:0;bottom:0;border-radius:99px;background:var(--forest);opacity:.85}
.earn-caveat{margin:var(--s4) 0 0;padding:14px 16px;border-radius:var(--r-s);
  background:var(--signal-soft);border:1px solid #edc9b5;font-size:var(--t-sm);
  color:var(--ink-2);line-height:1.6}
.earn-caveat b{color:var(--ink)}
@media(max-width:900px){.earn{grid-template-columns:1fr;gap:var(--s5)}}

/* -- Who does what: same card chrome as every other card on the page -- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s6);align-items:stretch}
.split-col{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:var(--s6);display:flex;flex-direction:column}
.split-head{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s5);
  padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.split-col h3{font-family:var(--display);font-size:var(--t-sm);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;margin:0;color:var(--ink-3)}
.split-count{font-family:var(--display);font-size:30px;font-weight:700;line-height:1;margin:0 0 0 auto;
  font-variant-numeric:tabular-nums}
.split-col.us .split-count{color:var(--forest)}
.split-col.you .split-count{color:var(--signal-ink)}

.split-col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);flex:1}
.split-col.you ul{align-content:center;gap:var(--s4)}
.split-col li{display:flex;gap:var(--s3);align-items:flex-start;color:var(--ink-2);
  font-size:var(--t-sm);line-height:1.5}
.split-col li .ic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center}
.split-col.us li .ic{background:var(--forest-soft)}
.split-col.you li .ic{width:44px;height:44px;border-radius:12px;background:var(--signal-soft)}
.split-col li .ic svg{width:16px;height:16px;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.split-col.us li .ic svg{stroke:var(--forest)}
.split-col.you li .ic svg{width:22px;height:22px;stroke:var(--signal-ink);stroke-width:1.9}
.split-col li .tx{padding-top:5px}
.split-col.you li .tx{padding-top:0}
.split-col.you li b{display:block;font-family:var(--display);font-size:var(--t-md);font-weight:700;
  line-height:1.2;color:var(--ink)}
.split-col.you li em{display:block;font-style:normal;font-size:var(--t-xs);color:var(--ink-2);margin-top:2px}
.you-foot{margin:var(--s5) 0 0;padding-top:var(--s4);border-top:1px solid var(--line);
  font-size:var(--t-sm);color:var(--ink-2);line-height:1.55}
.you-foot b{color:var(--signal-ink)}
.split-note{grid-column:1/-1;font-size:var(--t-sm);color:var(--ink-2);line-height:1.6;
  margin:var(--s2) 0 0;padding-top:var(--s4);border-top:1px solid var(--line)}
.split-note b{color:var(--ink)}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* -- The one authored moment: a sale, drawn -- */
.sale{background:var(--glass);border:1.5px solid var(--line);border-radius:var(--r);
  padding:var(--s6);box-shadow:var(--shadow);margin:0 0 var(--s6)}
.sale-head{margin-bottom:var(--s4)}
.sale h3{font-size:var(--t-lg);margin:0 0 4px}
.sale .sh-sub{margin:0;font-size:var(--t-sm);color:var(--ink-2);max-width:56ch;line-height:1.55}
/* Controls sit beside the stage, not above it: the animation is wide and short,
   which leaves dead space on the right, and the running total belongs next to
   the thing it is counting. The panel is the one loud surface in the section. */
.sale-split{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--s5);align-items:center}
.sale-stage{width:100%;height:auto;display:block;min-width:0}
.sale-panel{background:linear-gradient(150deg,var(--forest-d),var(--forest));color:#fff;
  border-radius:var(--r);padding:var(--s6) var(--s5);text-align:center;box-shadow:var(--shadow-l)}
.sale-panel .lab{display:block;font-family:var(--display);font-size:var(--t-2xs);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.sale-panel .amt{display:block;font-family:var(--display);font-weight:700;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;font-size:clamp(38px,4.4vw,52px);margin:8px 0 var(--s5)}
.sale-go{width:100%;justify-content:center;gap:9px;min-height:52px;font-size:16px;
  /* --signal is too light for 16px white text (3.6:1); --signal-ink is the
     shade every other primary button already uses and clears 4.5:1. */
  background:var(--signal-ink);color:#fff;border:none}
.sale-go:hover{background:var(--signal-ink-d)}
.sale-go svg{width:15px;height:15px;flex:none}
.sale-panel .sale-msg{color:rgba(255,255,255,.84);font-size:var(--t-xs);line-height:1.55;
  margin:var(--s4) 0 0;min-height:40px}
.sale-panel .sale-msg b{color:#fff}
@media(max-width:860px){.sale-split{grid-template-columns:1fr;gap:var(--s4)}}

/* ══ DUTIES: one card per point, no surrounding frame ═══════════════════ */
.duties{margin-top:var(--s6)}
.dutyhead{display:flex;align-items:baseline;gap:var(--s3);margin:0 0 var(--s3)}
.dutyhead h3{font-family:var(--display);font-size:var(--t-sm);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin:0}
.dutycount{font-family:var(--display);font-size:26px;font-weight:700;line-height:1;
  margin:0 0 0 auto;font-variant-numeric:tabular-nums}
.dutyhead.us .dutycount{color:var(--forest)}
.dutyhead.you .dutycount{color:var(--signal-ink)}
.dutygrid{display:grid;gap:var(--s3);margin:0 0 var(--s6)}
.dutygrid.us{grid-template-columns:repeat(4,1fr)}
.dutygrid.you{grid-template-columns:repeat(2,1fr)}
.duty{display:flex;gap:var(--s3);align-items:flex-start;background:var(--glass);
  border:1px solid var(--line);border-radius:var(--r-s);padding:14px}
.duty .ic{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--forest-soft)}
.duty .ic svg{width:15px;height:15px;fill:none;stroke:var(--forest);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.duty .tx{font-size:var(--t-sm);color:var(--ink-2);line-height:1.4}
.dutygrid.you .duty{border-color:#edc9b5;background:var(--signal-soft)}
.dutygrid.you .duty .ic{background:#fff;width:34px;height:34px;border-radius:10px}
.dutygrid.you .duty .ic svg{width:19px;height:19px;stroke:var(--signal-ink);stroke-width:1.9}
.dutygrid.you .tx b{display:block;font-family:var(--display);font-size:var(--t-base);
  font-weight:700;color:var(--ink)}
.dutygrid.you .tx em{display:block;font-style:normal;font-size:var(--t-xs);color:var(--ink-2);
  margin-top:2px}
@media(max-width:900px){.dutygrid.us{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.dutygrid.us,.dutygrid.you{grid-template-columns:1fr}}
/* A three-up variant for longer checklists. Declared after .dutygrid.us so it
   wins on equal specificity, and given its own breakpoints -- an inline style
   here would silently outrank every media query below. */
/* The eight jobs, grouped by the part of the operation they belong to. Each
   group carries its own accent from the drink palette, so the block has colour
   and iconography without collapsing back into eight identical tiles. */
.ops{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5) var(--s6);margin-bottom:var(--s6)}
.op{border-top:3px solid var(--opc);padding-top:var(--s4)}
.op-h{display:flex;align-items:center;gap:10px;margin-bottom:var(--s4)}
.op-i{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--opbg)}
.op-i svg{width:16px;height:16px;stroke:var(--opc);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.op-k{font-family:var(--display);font-size:var(--t-2xs);font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--opc)}
.op ul{list-style:none;margin:0;padding:0}
.op li{position:relative;padding-left:22px;font-size:var(--t-sm);color:var(--ink-2);
  line-height:1.45;margin-bottom:11px}
.op li:last-child{margin-bottom:0}
/* A drawn tick in the group's own colour rather than an icon per row. */
.op li::before{content:"";position:absolute;left:3px;top:4px;width:5px;height:9px;
  border:solid var(--opc);border-width:0 2px 2px 0;transform:rotate(43deg)}
@media(max-width:900px){.ops{grid-template-columns:repeat(2,1fr);gap:var(--s5)}}
@media(max-width:480px){.ops{grid-template-columns:1fr}}
/* "You do" uses the same ruled-column format as "We do" so the two read as one
   comparison, but keeps the signal accent so the short side stays the contrast. */
.ops.you{grid-template-columns:repeat(2,1fr);margin-bottom:var(--s5)}
.ops.you .op{--opc:var(--signal-ink);--opbg:var(--signal-soft)}
/* The rule and icon are graphics and clear 3:1 on --signal-ink, but the label
   is 12.5px text and needs 4.5:1, which that shade misses at 4.25. */
.ops.you .op-k{color:#b64517}
@media(max-width:640px){.ops.you{grid-template-columns:1fr}}

.dutygrid.three{grid-template-columns:repeat(3,1fr)}
/* Richer variant: a headline you can scan plus the detail underneath, for
   places where a bare checklist reads as a spec sheet rather than a pitch. */
.dutygrid.rich{grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.dutygrid.rich .duty{flex-direction:column;gap:var(--s3);padding:var(--s5);
  background:var(--glass);border-color:var(--line-2)}
.dutygrid.rich .duty .ic{width:40px;height:40px;border-radius:11px}
.dutygrid.rich .duty .ic svg{width:21px;height:21px;stroke-width:1.9;fill:none}
.dutygrid.rich .tx b{display:block;font-family:var(--display);font-size:var(--t-md);
  font-weight:700;color:var(--ink);line-height:1.25;margin-bottom:5px}
@media(max-width:900px){.dutygrid.rich{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.dutygrid.rich{grid-template-columns:1fr}}
@media(max-width:900px){.dutygrid.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.dutygrid.three{grid-template-columns:1fr}}
.sale-msg b{color:var(--ink)}

#saleSvg .tapring,#saleSvg .coin,#saleSvg .note-new,#saleSvg .arm,#saleSvg .piggy,
#saleSvg .can-drop{transform-box:fill-box}
#saleSvg .tapring{opacity:0;transform-origin:center}
#saleSvg .coin{opacity:0;transform-origin:center}
#saleSvg .tray-can{opacity:0}
#saleSvg .note-new{opacity:0;transform-origin:center}
#saleSvg .arm{transform-origin:left center}
#saleSvg .piggy{transform-origin:center}

#saleSvg.play .arm{animation:armTap .55s ease-in-out .1s 1}
#saleSvg.play .tapring{animation:tapRing .75s ease-out .38s 1}
#saleSvg.play .can-drop{animation:canDrop 1s cubic-bezier(.5,0,.75,1) .85s 1 forwards}
#saleSvg.play .tray-can{animation:trayShow .01s linear 1.8s 1 forwards}
#saleSvg.play .coin{animation:coinFly 2.4s cubic-bezier(.4,0,.45,1) 2.05s 1 forwards}
#saleSvg.play .note-new{animation:notePop .6s cubic-bezier(.25,1.5,.5,1) 4.35s 1 forwards}
#saleSvg.play .piggy{animation:piggyPop .5s cubic-bezier(.3,1.6,.5,1) 4.42s 1}

@keyframes armTap{0%,100%{transform:rotate(0deg)}45%{transform:rotate(-14deg)}}
@keyframes tapRing{0%{opacity:.9;transform:scale(.45)}100%{opacity:0;transform:scale(2.2)}}
@keyframes canDrop{0%{transform:translateY(0);opacity:1}
  78%{transform:translateY(104px);opacity:1}100%{transform:translateY(112px);opacity:0}}
@keyframes trayShow{to{opacity:1}}
@keyframes coinFly{
  0%{opacity:0;transform:translate(0,0) scale(.6) rotate(-4deg)}
  8%{opacity:1;transform:translate(17px,-4px) scale(1) rotate(-3deg)}
  45%{transform:translate(95px,-20px) scale(1.03) rotate(-2deg)}
  80%{transform:translate(168px,-35px) scale(1) rotate(-1deg)}
  94%{opacity:1;transform:translate(200px,-42px) scale(.95) rotate(0deg)}
  100%{opacity:0;transform:translate(210px,-45px) scale(.85) rotate(0deg)}}
@keyframes notePop{
  0%{opacity:0;transform:translateY(18px) scale(.65) rotate(-9deg)}
  60%{opacity:1;transform:translateY(-3px) scale(1.06) rotate(2deg)}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}}
@keyframes piggyPop{0%,100%{transform:scale(1)}45%{transform:scale(1.05)}}

@media(max-width:640px){.sale{padding:var(--s5) var(--s4)}}
@media (prefers-reduced-motion:reduce){
  #saleSvg .tray-can{opacity:1}
  #saleSvg .note-new{opacity:1}
  #saleSvg.play *{animation:none !important}
}

/* ── Interactive estimator ── */
.est{background:var(--glass);border:1.5px solid var(--line);border-radius:var(--r);
  padding:var(--s6);box-shadow:var(--shadow);margin-top:var(--s6)}
.est h3{font-size:var(--t-lg);margin:0 0 var(--s2)}
.est .sub{margin:0 0 var(--s5);font-size:var(--t-sm);color:var(--ink-2);line-height:1.6}
.est-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) var(--s6);align-items:start}
.est-ctl label{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  font-family:var(--display);font-weight:700;font-size:var(--t-sm);margin-bottom:9px}
.est-ctl label .v{font-size:var(--t-md);color:var(--forest);font-variant-numeric:tabular-nums}
.est-ctl input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent;
  height:26px;margin:0;cursor:pointer;padding:0;border:none}
.est-ctl input[type=range]::-webkit-slider-runnable-track{height:7px;border-radius:99px;background:var(--forest-soft)}
.est-ctl input[type=range]::-moz-range-track{height:7px;border-radius:99px;background:var(--forest-soft)}
.est-ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;
  border-radius:50%;background:var(--forest);border:3px solid #fff;margin-top:-7.5px;
  box-shadow:0 1px 4px rgba(20,32,27,.35)}
.est-ctl input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--forest);border:3px solid #fff;box-shadow:0 1px 4px rgba(20,32,27,.35)}
.est-ctl input[type=range]:focus-visible{outline:2.5px solid var(--forest-l);outline-offset:3px;border-radius:99px}
.est-ctl .hintline{font-size:var(--t-xs);color:var(--ink-3);margin:5px 0 0;line-height:1.5}
/* Results lead the block: the payoff is what earns the interaction. */
.est-out{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);
  align-items:start;align-content:start;background:var(--forest-tint);
  border:1px solid var(--line);border-radius:var(--r-s);padding:var(--s5)}
.est-try{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:0;
  font-size:var(--t-sm);color:var(--ink-2);line-height:1.45}
.est-try svg{width:20px;height:20px;flex:none;color:var(--signal-ink)}
.est-try b{font-family:var(--display);color:var(--ink)}
.est-slide{display:flex;align-items:center;gap:var(--s3)}
.est-slide input[type=range]{flex:1;min-width:0}
.stepbtn{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line-2);
  background:var(--glass);color:var(--forest);font-family:var(--display);font-weight:700;
  font-size:19px;line-height:1;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center}
.stepbtn:hover{border-color:var(--forest);background:var(--forest-tint)}
.stepbtn:active{transform:scale(.94)}
.stepbtn:focus-visible{outline:2.5px solid var(--forest-l);outline-offset:2px}
.est-out div .k{font-size:var(--t-xs);color:var(--ink-3);display:block;margin-bottom:3px}
.est-out div .n{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.2vw,36px);color:var(--forest);
  font-variant-numeric:tabular-nums;line-height:1.05;display:block}
.est-out div.lead .n{color:var(--signal-ink)}
.est-band{grid-column:1/-1;font-size:var(--t-sm);color:var(--ink-2);line-height:1.6;
  padding:12px 15px;border-radius:var(--r-s);background:var(--forest-tint);border:1px solid var(--line)}
.est-band b{color:var(--ink)}
.est-band.warn{background:var(--signal-soft);border-color:#edc9b5}
.models{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s2)}
.model{border:1.5px solid var(--line);border-radius:var(--r-s);padding:14px 16px;background:var(--glass)}
.model.on{border-color:var(--forest);background:var(--forest-tint)}
.model b{font-family:var(--display);font-size:var(--t-sm);display:block;margin-bottom:4px}
.model p{margin:0;font-size:var(--t-xs);color:var(--ink-2);line-height:1.55}
@media(max-width:760px){.est-grid{grid-template-columns:1fr}.est-out{grid-template-columns:1fr;gap:var(--s3)}
  .models{grid-template-columns:1fr}.est{padding:var(--s5) var(--s4)}}

/* ── Range ── */
.rangebanner{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-l);margin:0 0 var(--s6)}
/* ── Drink categories: authored line icons, expandable ── */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-bottom:var(--s7)}
/* Each category already carries its own drink colour; using it as the card
   ground rather than leaving all eight white is what makes the row read as a
   shelf of different drinks instead of eight identical tiles. */
.cat{background:var(--cbg);border:1.5px solid transparent;border-radius:var(--r-s);
  padding:15px 16px;text-align:left;font:inherit;color:inherit;cursor:pointer;display:block;width:100%;
  transition:border-color .16s,transform .14s cubic-bezier(.2,.8,.3,1),box-shadow .16s}
.cat:hover{border-color:var(--ct);transform:translateY(-3px);box-shadow:var(--shadow-l)}
.cat[aria-expanded="true"]{border-color:var(--ct);box-shadow:var(--shadow)}
.cat .top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.cat .ico{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#fff;box-shadow:0 1px 3px rgba(20,32,27,.10);
  transition:transform .18s cubic-bezier(.2,.8,.3,1)}
.cat:hover .ico{transform:scale(1.08) rotate(-4deg)}
.cat .ico svg{width:21px;height:21px;stroke:var(--ct);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.cat b{font-family:var(--display);font-size:var(--t-base);font-weight:700;flex:1;color:var(--ct)}
.cat .chev{width:9px;height:9px;flex:none;border-right:2px solid var(--ct);
  border-bottom:2px solid var(--ct);opacity:.7;transform:rotate(45deg);margin-bottom:3px;transition:transform .2s}
.cat[aria-expanded="true"] .chev{transform:rotate(-135deg);margin-bottom:0}
.cat p{margin:0;font-size:var(--t-xs);color:var(--ink-2);line-height:1.5}
.cat .more{margin:9px 0 0;padding-top:9px;border-top:1px solid rgba(20,32,27,.12);
  font-size:var(--t-xs);color:var(--ink-2);line-height:1.55}
.cat .more[hidden]{display:none}
.cat .more b{font-family:var(--body);font-size:var(--t-xs);color:var(--ct);display:block;margin-bottom:2px}
@media(max-width:900px){.cats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cats{grid-template-columns:1fr}}

/* ── Nutri-Grade: droplet fill encodes sugar, click for the threshold ── */
.gradepanel{margin:var(--s3) 0 0;padding:13px 15px;border-radius:var(--r-s);
  background:var(--forest-tint);border:1px solid var(--line);font-size:var(--t-sm);
  color:var(--ink-2);line-height:1.55;min-height:44px}
.gradepanel b{color:var(--ink);font-family:var(--display)}
.hc{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s6);align-items:center;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:var(--s6);box-shadow:var(--shadow)}
.hc img{border-radius:var(--r-s);width:100%;max-height:340px;object-fit:cover}
.hc h3{margin:0 0 var(--s3);font-size:var(--t-lg)}
.hc p{margin:0 0 var(--s4);color:var(--ink-2);font-size:var(--t-sm);line-height:1.6}
.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin:var(--s3) 0 0}
.grade{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:2px solid;border-radius:var(--r-s);padding:11px 8px;background:var(--glass);
  font-family:var(--display);font-weight:700;cursor:pointer;color:inherit;
  transition:transform .14s cubic-bezier(.2,.8,.3,1),box-shadow .16s}
.grade:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.grade[aria-pressed="true"]{box-shadow:inset 0 0 0 2px currentColor}
.grade svg{width:17px;height:22px;flex:none;display:block}
.grade svg .drop{fill:none;stroke:currentColor;stroke-width:1.5}
.grade svg .fill{fill:currentColor;stroke:none}
.grade .ltr{font-size:19px;font-weight:700;line-height:1}
.grade.a{border-color:#1f7a4d;color:#1f7a4d}
.grade.b{border-color:#7cb342;color:#59802f}
.grade.c{border-color:#f0932b;color:#9c5f1b}
.grade.d{border-color:#d94a3d;color:#c34236}
/* The mark is a reference, not a hero image: show it at label size beside a
   one-line note rather than as a boxed centrepiece. */
.ngmark{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  margin:var(--s4) 0 var(--s5);padding:0;background:none;border:0}
.ngmark img{width:180px;max-width:100%;height:auto;margin:0;flex:none}
.ngmark figcaption{font-size:var(--t-xs);color:var(--ink-3);line-height:1.5;margin:0;
  text-align:left;max-width:24ch}
.gradescale{display:flex;justify-content:space-between;font-size:var(--t-xs);
  color:var(--ink-3);margin:6px 2px 0}
.gradenote{font-size:var(--t-sm);color:var(--ink-2);margin:var(--s4) 0 0;padding-top:var(--s4);
  border-top:1px solid var(--line);line-height:1.6}
.gradenote b{color:var(--ink)}
@media(max-width:900px){.hc{grid-template-columns:1fr;gap:var(--s5);padding:var(--s5)}}

/* ── Payments ── */
/* Ten methods as cards beside the photo. Static: a marquee here fought the
   photo for attention and needed a pause control to stay accessible. */
.pay-split{display:grid;grid-template-columns:.86fr 1.14fr;gap:var(--s6);align-items:center}
.paygrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.paycard{display:flex;align-items:center;gap:14px;background:var(--glass);
  border:1px solid var(--line);border-radius:12px;padding:13px 16px;
  box-shadow:0 1px 2px rgba(20,32,27,.05);
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .18s,border-color .16s,background .16s}
.paycard:hover{transform:translateY(-3px);border-color:var(--pc);background:var(--pbg);
  box-shadow:0 8px 22px rgba(20,32,27,.10)}
/* The card ground is already white, so a white plate behind an official mark was
   chrome for its own sake. The marks sit straight on the card and run larger;
   only the drawn icons keep a tinted plate, because they need the colour. */
.pc-art{width:54px;flex:none;display:grid;place-items:center}
.pc-art.icon{width:38px;height:38px;border-radius:11px;background:var(--pbg)}
.pc-art.icon svg{width:19px;height:19px;stroke:var(--pc);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.pc-art .pl{width:auto;display:block;height:19px}
.pc-art .pl[data-brand="nets"]{height:15px}
.pc-art .pl[data-brand="visa"]{height:16px}
.pc-art .pl[data-brand="paynow"]{height:21px}
.pc-art .pl[data-brand="mastercard"]{height:26px}
.pc-art .pl[data-brand="applepay"]{height:20px}
.pc-art .pl[data-brand="gpay"]{height:23px}
.pc-tx b{display:block;font-family:var(--display);font-size:var(--t-base);font-weight:700;
  color:var(--ink);line-height:1.2}
@media(max-width:900px){.pay-split{grid-template-columns:1fr;gap:var(--s5)}}
@media(max-width:520px){.paygrid{grid-template-columns:1fr}}
.pay-shot img{border-radius:var(--r);box-shadow:var(--shadow-l);width:100%}
.pay-shot figcaption{font-size:var(--t-xs);color:var(--ink-3);margin-top:var(--s3);text-align:center}
@media(max-width:900px){.pay-grid{grid-template-columns:1fr;gap:var(--s6)}}
@media(max-width:520px){.pay-list{grid-template-columns:1fr}}

/* The stock hero crops to 3/4, which would cut the top and bottom off a
   full-height cabinet. On the sales page the machine is the product, so it sits
   whole on a white panel instead. */
.hero-shot.product{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-l);
  display:grid;place-items:center;padding:var(--s6)}
.hero-shot.product img{width:auto;height:440px;max-width:100%;aspect-ratio:auto;
  object-fit:contain;border-radius:0;box-shadow:none}
@media(max-width:900px){.hero-shot.product img{height:360px}}

/* ── Hardware sales: product cards, not scene photography ────────────────── */
.hw{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5)}
/* Both machines are shot on white and must be seen whole, so the frame is
   padded and the image contained rather than cropped to a fixed ratio. Pinning
   the render height instead of the width lines the two cabinets up beside each
   other at a comparable scale. */
.hwcard .ph{background:#fff;display:grid;place-items:center;padding:var(--s5) var(--s4)}
.hwcard .ph img{width:auto;height:340px;max-width:100%;aspect-ratio:auto;object-fit:contain}
.hwcard .lbl{background:var(--ink);color:#fff}
@media(max-width:760px){.hw{grid-template-columns:1fr}.hwcard .ph img{height:290px}}

/* A single highlighted aside. Was .pay-note until the payments block lost its
   prose; kept generic so any section can use it. */
.callout{margin-top:var(--s5);background:var(--signal-soft);border:1px solid #edc9b5;
  border-radius:var(--r-s);padding:var(--s4) var(--s5);font-size:var(--t-sm);
  color:var(--ink-2);line-height:1.6}
.callout b{color:var(--ink)}

/* ── Why us ── */
.vp{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s4)}
.vp-card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:var(--s6);
  box-shadow:var(--shadow);display:flex;gap:var(--s4);align-items:flex-start}
.vp-card .ic{width:46px;height:46px;border-radius:12px;background:var(--forest-soft);display:grid;place-items:center;flex:none}
.vp-card .ic svg{width:23px;height:23px;stroke:var(--forest);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vp-card h3{font-size:var(--t-md);margin-bottom:var(--s1)}
.vp-card p{margin:0;font-size:var(--t-sm);color:var(--ink-2);line-height:1.6}
.vp-hero{grid-column:1/-1;background:linear-gradient(135deg,var(--forest-d),var(--forest));
  color:#fff;border:none;padding:var(--s7);display:block}
.vp-hero .tag{display:inline-block;background:rgba(255,255,255,.16);border-radius:var(--r-pill);
  padding:6px 14px;font-family:var(--display);font-size:var(--t-2xs);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:var(--s4)}
.vp-hero h3{font-size:var(--t-xl);margin-bottom:var(--s3);color:#fff;line-height:1.18}
.vp-hero p{color:rgba(255,255,255,.94);font-size:var(--t-base);max-width:74ch;line-height:1.6}
/* Header-only cards: icon stacks over the title so five sit in one even row. */
.vp-mini{flex-direction:column;gap:var(--s3);padding:var(--s5)}
.vp-mini h3{margin:0;font-size:var(--t-base);line-height:1.3}
@media(max-width:1100px){.vp{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.vp{grid-template-columns:repeat(2,1fr)}.vp-hero{padding:var(--s5)}}
@media(max-width:520px){.vp{grid-template-columns:1fr}}

/* ── Comparison table ── */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--glass);
  box-shadow:var(--shadow);position:relative;scrollbar-width:thin}
table.check{border-collapse:collapse;width:100%;min-width:620px;font-size:var(--t-sm)}
table.check th,table.check td{text-align:left;padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);vertical-align:top}
table.check thead th{background:var(--forest);color:#fff;font-family:var(--display);font-size:var(--t-2xs);
  letter-spacing:.05em;text-transform:uppercase;font-weight:700;border-bottom:none}
table.check tbody tr:last-child td{border-bottom:none}
table.check tbody tr:nth-child(even){background:var(--forest-tint)}
table.check td:first-child{font-weight:600;width:38%;color:var(--ink)}
table.check td:last-child{color:var(--ink-2);line-height:1.6}
table.check td:last-child .yes+*{display:inline}
table.check td .yes{display:flex;align-items:center;gap:7px;font-weight:700;color:var(--forest);
  font-family:var(--display);margin-bottom:5px}
table.check td .yes svg{width:16px;height:16px;stroke:var(--forest);fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.swipehint{display:none;font-size:var(--t-xs);color:var(--ink-3);margin:var(--s2) 0 0;text-align:right}
@media(max-width:760px){.swipehint{display:block}}

/* -- Vending Mart -- */
.vm-hero{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-l);margin:0 0 var(--s6)}
/* The poster leads the page, so it has to be takeable in at a glance: capped
   to the viewport less the header and caption rather than running past the fold. */
.vm-hero img{width:100%;display:block;max-height:calc(100vh - 210px);max-height:calc(100dvh - 210px);object-fit:cover;object-position:center}
.vm-hero figcaption{font-size:var(--t-xs);color:var(--ink-3);padding:var(--s3) var(--s4);
  background:var(--glass);border-top:1px solid var(--line)}
.vm-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-bottom:var(--s6)}
.vm-cat{background:var(--glass);border:1px solid var(--line);border-radius:var(--r-s);padding:var(--s4) var(--s5)}
.vm-cat b{display:block;font-family:var(--display);font-size:var(--t-md);margin-bottom:3px}
.vm-cat span{font-size:var(--t-xs);color:var(--ink-2);line-height:1.45}
@media(max-width:860px){.vm-cats{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.vm-cats{grid-template-columns:1fr}}
.vm-sites{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-bottom:var(--s7)}
.vm-sites figure{margin:0}
.vm-sites img{width:100%;border-radius:var(--r-s);box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover}
.vm-sites figcaption{font-size:var(--t-xs);color:var(--ink-3);margin-top:8px}
@media(max-width:760px){.vm-sites{grid-template-columns:1fr}}

/* -- Mart corner opener -- */
.mart-open{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s7);align-items:start;
  margin-bottom:var(--s7);padding-bottom:var(--s6);border-bottom:1px solid var(--line)}
.mart-open .who{background:var(--forest-tint);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5)}
.mart-open .who h3{font-size:var(--t-md);margin:0 0 var(--s3)}
.mart-open .who dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px var(--s4);font-size:var(--t-sm)}
.mart-open .who dt{color:var(--ink-3)}
.mart-open .who dd{margin:0;font-family:var(--display);font-weight:700;text-align:right;
  font-variant-numeric:tabular-nums}
.mart-proof{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4)}
.mart-proof span{font-size:var(--t-xs);color:var(--ink-2);background:var(--glass);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 13px}
@media(max-width:900px){.mart-open{grid-template-columns:1fr;gap:var(--s5)}}

/* ── Mart corner ── */
.mart-lead{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s7);align-items:center;margin-bottom:var(--s7)}
.mart-lead .imgs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.mart-lead .imgs img{border-radius:var(--r);box-shadow:var(--shadow-l);width:100%;aspect-ratio:3/4;object-fit:cover}
.mart-lead h3{font-size:var(--t-lg);margin-bottom:var(--s3)}
.mart-lead ul{margin:var(--s5) 0 0;padding:0;list-style:none}
.mart-lead li{display:flex;gap:var(--s3);margin-bottom:var(--s3);font-size:var(--t-sm);color:var(--ink-2);line-height:1.6}
.mart-lead li svg{width:20px;height:20px;stroke:var(--signal-ink);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:2px}
.mart-lead li b{color:var(--ink)}
@media(max-width:900px){.mart-lead{grid-template-columns:1fr;gap:var(--s5)}}
.configs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-bottom:var(--s7)}
.cfg{background:var(--glass);border:1.5px solid var(--line);border-radius:var(--r);padding:var(--s5);
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.cfg.feat{border-width:2px;border-color:var(--signal-ink);box-shadow:0 2px 6px rgba(20,32,27,.12)}
.cfg .tier{font-family:var(--display);font-size:var(--t-2xs);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s1)}
.cfg.feat .tier{color:var(--signal-ink)}
.cfg .cnt{font-family:var(--display);font-size:38px;font-weight:700;color:var(--forest);line-height:1;
  letter-spacing:-.03em;margin-bottom:var(--s1);font-variant-numeric:tabular-nums}
.cfg .cnt span{font-size:var(--t-base);font-weight:600;color:var(--ink-2);letter-spacing:0}
.cfg .mix{font-size:var(--t-sm);color:var(--ink-2);margin:var(--s3) 0 var(--s4);flex:1;line-height:1.6}
/* Point form in the same card: takes the flex:1 role the prose block had, so
   the dl below still sits flush at the bottom of every tier. */
.cfg .mixlist{list-style:none;margin:var(--s3) 0 var(--s4);padding:0;flex:1;
  font-size:var(--t-sm);color:var(--ink-2);line-height:1.45}
.cfg .mixlist li{display:flex;gap:10px;padding:6px 0}
.cfg .mixlist li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--forest);margin-top:7px}
.cfg.feat .mixlist li::before{background:var(--signal-ink)}
.cfg dl{margin:0;padding-top:var(--s4);border-top:1px solid var(--line);font-size:var(--t-sm);
  display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s3)}
.cfg dt{color:var(--ink-3)}
.cfg dd{margin:0;font-family:var(--display);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:900px){.configs{grid-template-columns:1fr}}
.diagram{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s6) var(--s5);box-shadow:var(--shadow)}
.diagram h3{margin:0 0 var(--s1);font-size:var(--t-md)}
.diagram p.dsub{margin:0 0 var(--s5);font-size:var(--t-sm);color:var(--ink-2)}
.diagram .scroller{overflow-x:auto;scrollbar-width:thin}
.diagram svg{display:block;width:100%;height:auto}
@media(max-width:760px){.diagram .scroller{padding-bottom:var(--s2)}.diagram svg{width:760px;max-width:none}}
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s5);
  padding-top:var(--s5);border-top:1px solid var(--line)}
.dgrid div b{display:block;font-family:var(--display);font-size:var(--t-md);color:var(--forest);
  margin-bottom:2px;font-variant-numeric:tabular-nums}
.dgrid div span{font-size:var(--t-xs);color:var(--ink-2)}
@media(max-width:760px){.dgrid{grid-template-columns:1fr 1fr}}

/* ── Proof ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);margin-bottom:var(--s7)}
.stat{border-top:2px solid var(--forest);padding:var(--s4) 2px 0}
.stat b{display:block;font-family:var(--display);font-size:38px;letter-spacing:-.03em;color:var(--forest);
  line-height:1;font-weight:700;font-variant-numeric:tabular-nums}
.stat span{font-size:var(--t-sm);color:var(--ink-2);display:block;margin-top:var(--s1)}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-bottom:var(--s6)}
.gal figure{margin:0}
.gal img{border-radius:var(--r-s);box-shadow:var(--shadow);width:100%;aspect-ratio:3/4;object-fit:cover}
.gal figcaption{font-size:var(--t-xs);color:var(--ink-3);margin-top:9px}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}.gal{grid-template-columns:repeat(2,1fr)}}
.sites{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{background:var(--glass);border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:8px var(--s4);font-size:var(--t-sm);color:var(--ink-2);font-weight:600}
.chip.hot{border-color:var(--forest);background:var(--forest-soft);color:var(--forest);font-weight:700}

/* ── Steps ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);counter-reset:s}
.step{position:relative;padding-top:52px}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;
  width:40px;height:40px;border-radius:11px;background:var(--forest);color:#fff;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:18px}
.step::after{content:"";position:absolute;top:20px;left:52px;right:-12px;height:1.5px;background:var(--line-2)}
.step:last-child::after{display:none}
.step b{display:block;margin-bottom:var(--s1);font-family:var(--display);font-size:var(--t-md);font-weight:700}
.step p{margin:0;font-size:var(--t-sm);color:var(--ink-2);line-height:1.6}
@media(max-width:860px){.steps{grid-template-columns:1fr;gap:var(--s6)}.step::after{display:none}}

/* ── CTA band ── */
.ctaband{background:linear-gradient(135deg,var(--forest-d),var(--forest));color:#fff;
  padding:var(--s5) 0;text-align:center}
.ctaband h2{font-size:var(--t-2xl);margin:0 0 var(--s3);color:#fff;line-height:1.14}
.ctaband p{font-size:var(--t-md);color:rgba(255,255,255,.92);margin:0 auto var(--s6);max-width:58ch}
.ctaband .row{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap}
.ctaband .fine{margin-top:var(--s5);font-size:var(--t-sm);color:rgba(255,255,255,.78)}

/* ── Form ── */
.formsec{background:var(--cabinet)}
.formcard{background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:var(--s7);
  box-shadow:var(--shadow-l);max-width:820px;margin:0 auto}
@media(max-width:640px){.formcard{padding:var(--s5) var(--s4)}}
fieldset{border:none;margin:0 0 var(--s6);padding:0}
legend{font-family:var(--display);font-weight:700;font-size:var(--t-md);margin-bottom:var(--s2);padding:0;line-height:1.34}
.fg{margin-bottom:var(--s6)}
.fg > label{display:block;font-family:var(--display);font-weight:700;margin-bottom:var(--s2);font-size:var(--t-md)}
.hint{font-size:var(--t-sm);color:var(--ink-3);margin:0 0 var(--s3);line-height:1.5}
.opts{display:grid;gap:9px}
.opts.two{grid-template-columns:1fr 1fr}
@media(max-width:560px){.opts.two{grid-template-columns:1fr}}
.opt{display:flex;align-items:flex-start;gap:11px;border:1.5px solid var(--line);border-radius:var(--r-s);
  padding:13px var(--s4);cursor:pointer;font-size:var(--t-sm);transition:.13s;background:var(--glass)}
.opt:hover{border-color:var(--forest-l);background:var(--forest-tint)}
.opt input{margin:3px 0 0;accent-color:var(--forest);flex:none}
.opt.sel{border-color:var(--forest);background:var(--forest-soft);box-shadow:inset 0 0 0 1px var(--forest)}
/* 16px is the floor: iOS Safari auto-zooms any focused field below it,
   which throws the layout and shifts the sticky CTA bar mid-form. */
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;padding:12px var(--s4);border:1.5px solid var(--line);border-radius:var(--r-s);
  font:inherit;font-size:var(--t-base);background:var(--glass);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2.5px solid var(--forest-l);outline-offset:1px;border-color:transparent}
input[aria-invalid="true"]{border-color:#b3261e;background:#fef6f5}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.divider{height:1px;background:var(--line);margin:var(--s7) 0}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:var(--t-sm);color:var(--ink-2);margin-bottom:var(--s5)}
.consent input{margin-top:3px;accent-color:var(--forest);flex:none}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.err{color:#b3261e;font-size:var(--t-sm);margin-top:7px;display:none;font-weight:600}
.err.show{display:block}
.errsum{display:none;background:#fef6f5;border:1.5px solid #e5a9a3;border-radius:var(--r-s);
  padding:var(--s4) var(--s5);margin-bottom:var(--s5)}
.errsum.show{display:block}
.errsum b{display:block;font-family:var(--display);font-size:var(--t-md);color:#8c1d18;margin-bottom:var(--s2)}
.errsum ul{margin:0;padding-left:var(--s5);font-size:var(--t-sm)}
.errsum li{margin-bottom:4px}
.errsum a{color:#8c1d18}
.reassure{font-size:var(--t-sm);color:var(--ink-2);margin:var(--s5) 0 0;padding-top:var(--s5);
  border-top:1px solid var(--line);line-height:1.6}
.estimate{display:none;background:var(--forest-soft);border:1.5px solid var(--forest);border-radius:var(--r-s);
  padding:var(--s4) var(--s5);margin-bottom:var(--s5)}
.estimate.show{display:block}
.estimate .lab{font-family:var(--display);font-size:var(--t-2xs);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--forest);margin-bottom:var(--s1)}
.estimate .val{font-family:var(--display);font-size:var(--t-xl);font-weight:700;color:var(--forest);
  font-variant-numeric:tabular-nums;line-height:1.1}
.estimate p{margin:var(--s2) 0 0;font-size:var(--t-xs);color:var(--ink-2);line-height:1.55}
.thanks{display:none;text-align:center;padding:var(--s6) var(--s2)}
.thanks.show{display:block}
.thanks .tick{width:64px;height:64px;border-radius:50%;background:var(--forest-soft);display:grid;
  place-items:center;margin:0 auto var(--s4);color:var(--forest)}
.thanks.decline .tick{background:var(--signal-soft);color:var(--signal-ink)}
.thanks h3{font-size:var(--t-xl);margin:0 0 var(--s3)}
.thanks p{color:var(--ink-2);max-width:48ch;margin:0 auto var(--s3);line-height:1.6}

/* ── FAQ ── */
details{border-bottom:1px solid var(--line);padding:var(--s5) 0}
details summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:var(--t-md);
  list-style:none;display:flex;justify-content:space-between;gap:var(--s5);align-items:flex-start;
  min-height:44px;padding-top:var(--s1)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";width:9px;height:9px;flex:none;margin:7px 4px 0 0;
  border-right:2px solid var(--signal-ink);border-bottom:2px solid var(--signal-ink);
  transform:rotate(45deg);transition:transform .2s ease}
details[open] summary::after{transform:rotate(-135deg);margin-top:11px}
details p{margin:var(--s3) 0 0;color:var(--ink-2);font-size:var(--t-sm);max-width:72ch;line-height:1.65}
details p+p{margin-top:var(--s2)}

/* ── Footer ── */
footer{background:var(--forest-d);color:rgba(255,255,255,.76);padding:var(--s8) 0 var(--s5);font-size:var(--t-sm)}
footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s7);padding-bottom:var(--s6);
  border-bottom:1px solid rgba(255,255,255,.14)}
footer img.flogo{height:46px;width:auto;margin-bottom:var(--s4)}
footer h2.fh{color:#fff;font-size:var(--t-2xs);letter-spacing:.07em;text-transform:uppercase;
  margin:0 0 var(--s3);font-weight:700;font-family:var(--display)}
.pv-meta{font-size:var(--t-sm);color:var(--ink-2);padding:var(--s3) var(--s4);background:var(--forest-tint);
  border:1px solid var(--line);border-radius:var(--r-s);margin:0 0 var(--s6)}
.pv-meta b{color:var(--ink);font-family:var(--display)}
footer h3{color:#fff;font-size:var(--t-2xs);letter-spacing:.07em;text-transform:uppercase;margin:0 0 var(--s3);font-weight:700}
footer a{color:#fff;text-decoration:none;display:inline-block;padding:3px 0;min-height:18px}
footer a:hover{text-decoration:underline}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px;line-height:1.5}
footer .fbot{padding-top:var(--s5);display:flex;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;font-size:var(--t-xs)}
@media(max-width:820px){footer .fgrid{grid-template-columns:1fr;gap:var(--s5)}}

/* ── Floating WhatsApp ──────────────────────────────────────────────────────
   The fastest contact point, following the reader down the page. It stays out
   of the way until the hero is behind them, so the opening screen keeps its own
   call to action, and it clears the sticky bar on phones. */
.wafab{position:fixed;right:var(--s4);bottom:24px;z-index:65;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#25D366;color:#fff;text-decoration:none;
  box-shadow:0 6px 22px rgba(0,0,0,.24);
  transition:opacity .22s,transform .22s cubic-bezier(.2,.8,.3,1)}
/* Hiding is the opt-in state. A contact button that fails to appear costs a
   lead, so anything that goes wrong leaves it on screen rather than missing. */
.wafab.tucked{opacity:0;visibility:hidden;transform:translateY(12px) scale(.9)}
.wafab svg{width:30px;height:30px;display:block}
.wafab:hover{background:#1da851}
.wafab:focus-visible{outline:3px solid var(--forest-l);outline-offset:3px}
@media(max-width:760px){.wafab{bottom:92px;width:52px;height:52px}
  .wafab svg{width:27px;height:27px}}
/* An open menu owns the screen; a button floating over it reads as a bug. */
body.menu-open .wafab{display:none}

/* ── Sticky mobile bar ── */
.sticky{position:fixed;left:0;right:0;bottom:0;background:var(--glass);border-top:1px solid var(--line);
  padding:10px var(--s3);display:none;gap:var(--s2);z-index:70;box-shadow:0 -4px 20px rgba(0,0,0,.09)}
.sticky.hide{display:none!important}
.sticky .btn{flex:1;padding:13px var(--s2);font-size:15px;min-height:50px}
@media(max-width:760px){.sticky{display:flex}body{padding-bottom:76px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .shelfrow span:hover,.btn:active,.btn-primary:hover{transform:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* -- Privacy page: give a text-only document a type scale -- */
.pv details summary{font-size:var(--t-lg);letter-spacing:-.01em}
.pv details p{font-size:var(--t-base);max-width:68ch}
.pv details p b{font-family:var(--display)}
.pv details code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;background:var(--forest-tint);border:1px solid var(--line);
  border-radius:4px;padding:1px 5px}
.pv .sec-s{font-size:var(--t-lg);line-height:1.5;color:var(--ink-2);max-width:60ch}

/* ══ MEASURE ══════════════════════════════════════════════════════════════
   Running text past ~75 characters a line is measurably harder to scan; a
   few blocks here were reaching 140ch on a desktop viewport because their
   container is full-width. Caps only, so nothing reflows on mobile.      */
.split-note,.sub,.hint,.reassure{max-width:70ch}
.cap{max-width:74ch}
.wrap > .cap{margin-inline:auto}      /* this one is centred; keep it centred */
.sale-msg{max-width:68ch;margin-inline:auto}

/* ══ HERO SUPPORT ═══════════════════════════════════════════════════════ */
.hero-moat{font-size:var(--t-base);color:var(--ink-2);margin:0;line-height:1.45;
  padding-left:var(--s4);border-left:3px solid var(--signal);max-width:50ch}
/* Renamed from .bignum: that class already existed above and set --t-huge,
   which this element then inherited. Body face is set explicitly so the
   caption cannot pick up the condensed display face from a parent. */
.tripstat{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;
  margin:0 0 var(--s4);font-size:var(--t-base)}
.tripstat b{font-family:var(--display);font-weight:700;font-size:clamp(32px,3.6vw,44px);
  line-height:1;color:var(--signal-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.tripstat span{font-family:var(--body);font-weight:400;color:var(--ink-2);
  font-size:var(--t-base);line-height:1.45;max-width:40ch}

.est-fine{font-size:var(--t-xs);color:var(--ink-3);margin:var(--s3) 0 0;font-style:italic}

/* ══ SPACING NORMALISATION ═════════════════════════════════════════════════
   Last block in the file on purpose. The gap under a section head is --s6 and
   nothing else; a first block bringing its own top margin stacks on top of it.
   Components like .split and .sale legitimately carry a top margin elsewhere,
   so this cancels it only in the one position where the head already provides
   the space. Equal specificity means source order decides -- keep this last. */
.sec-head + *{margin-top:0}