/* ═══════════════════════════════════════════════════════════════════════════
   Matchi — the "film you scroll" fork.

   This page owns its code. It does not load styles.css, commerce.css,
   composition.css or sharp.css, and index.html is authored by hand, not
   rendered from brand.json. scrub.js is the shared engine, unchanged.

   Phone only. On anything wider the page stays a centred phone column.

   The structure, top to bottom:
     film      a full-screen scene whose stage pins while its clip plays
     sheet     the next block of copy, rising over the pinned film
   Three films, three sheets, then the range, the offer, the proof, the close.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Outfit and Poppins are served from here, not from Google Fonts: a second
   server to find and greet costs a round trip or two before any text can be
   set, and on a phone that is most of a second. Latin subsets, OFL. */
@font-face { font-family:Outfit; src:url("./media/fonts/Outfit-var.woff2") format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:Poppins; src:url("./media/fonts/Poppins-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:Poppins; src:url("./media/fonts/Poppins-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:Poppins; src:url("./media/fonts/Poppins-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* The brand's own heading face, the file drinkmatchi.com serves. It ships in one
   weight; the ranges stop the browser faking a bold or a width from it. */
@font-face {
  font-family:"Monument Extended"; src:url("./media/fonts/MonumentExtended-Regular.woff2") format("woff2");
  font-weight:100 900; font-stretch:50% 200%; font-style:normal; font-display:swap;
}

:root {
  --forest:#005632;
  --deep:#00401F;
  --night:#04231A;
  --cream:#F8F5ED;
  --paper:#FFFDF8;
  --pistachio:#A6CD80;
  --lime:#B5D77D;
  --gold:#FFCF54;
  --text:#2C3B32;            /* body on cream, tinted from the forest */
  --text-quiet:#556359;       /* secondary on cream and white, 5.9:1 */
  --text-on-dark:#DCE6D2;    /* body on forest, tinted from the pistachio */
  --rule:rgba(0,86,50,.18);

  --display:"Monument Extended", "Arial Black", sans-serif;
  --ui:Outfit, system-ui, sans-serif;
  --button:Poppins, Outfit, system-ui, sans-serif;

  --col:min(100vw, 480px);
  --u:calc(var(--col) / 100);              /* 1% of the phone column */
  --gutter:22px;
  --sheet-gutter:34px;                     /* text cards sit further in than the films */
  --tb:calc(100lvh - 100svh);              /* the browser toolbar's height */
  --bar-clear:104px;                       /* room the floating buy bar needs */
  --ease:cubic-bezier(.16, 1, .3, 1);
  --r-sheet:30px;
  --r-card:24px;
  --buybar-h:56px;                         /* republished by commerce.js */
  --flavor-field:#A6CD80;
  --flavor-deep:#005029;
}

*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { background:var(--night); -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
body {
  margin:0 auto; max-width:480px; overflow-x:clip;
  background:var(--cream); color:var(--text);
  font:300 17px/1.5 var(--ui);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
  caret-color:var(--forest); accent-color:var(--forest);
}
::selection { background:var(--lime); color:var(--deep); }
/* Gold alone is 1.3:1 on cream; the forest ring under it carries light surfaces. */
:focus-visible { outline:2.5px solid var(--gold); outline-offset:3px; box-shadow:0 0 0 6px var(--deep); border-radius:6px; }
h1, h2, h3, p, ul, figure, fieldset, blockquote { margin:0; padding:0; }
ul { list-style:none; }
fieldset { border:0; min-width:0; }
img, video { display:block; max-width:100%; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a { color:inherit; }

/* The display voice: Monument Extended, the brand's own heading face. */
.display, h1, h2, h3 {
  font-family:var(--display); font-stretch:125%; font-weight:800;
  letter-spacing:.004em; line-height:1.08; text-wrap:balance;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 26px; border-radius:999px;
  background:var(--forest); color:var(--cream);
  font:600 16px/1 var(--button); letter-spacing:.005em; text-decoration:none;
  transition:transform .35s var(--ease), background-color .2s;
}
.btn::after {
  content:""; width:18px; height:12px; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h15M11.5 1.5 16 6l-4.500 4.500'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h15M11.5 1.5 16 6l-4.500 4.500'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .35s var(--ease);
}
.btn:active { transform:scale(.97); }
.btn:active::after { transform:translateX(4px); }
.btn--light { background:var(--lime); color:var(--deep); }
.btn[disabled] { cursor:default; }

/* ── Film: a full-screen scene ──────────────────────────────────────────── */
.scene {
  position:relative; height:calc(100lvh + var(--travel));
  /* How far the page scrolls with the stage held before the next card has risen
     over it. Half a screen longer than it first was, so the scene's own copy is
     read before a card reaches it. */
  --travel:175lvh; --cover:0;
  background:var(--night);
}
.scene[data-hero] { --travel:150lvh; }
.stage {
  position:sticky; top:0; height:100lvh; overflow:hidden; isolation:isolate;
  background:var(--night);
}
.stage > .poster, .stage > video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(calc(1 + var(--cover) * .08)); transform-origin:50% 38%;
  will-change:transform;
}
/* A picture wider than the screen loses its sides; --frame-x says which side
   is kept (0 left, 100% right), so a can at the edge of the shot stays in it. */
.stage > .poster, .stage > video { object-position:var(--frame-x, 50%) 50%; }
/* A scene may also show more of its picture than filling a tall screen allows
   (data-frame): the picture is held to --frame-h of the stage, from the top,
   and its foot fades into the stage's own green. */
.scene[data-frame] .stage > .poster, .scene[data-frame] .stage > video {
  height:var(--frame-h);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 56px), transparent);
          mask-image:linear-gradient(#000 calc(100% - 56px), transparent);
}
.stage > video { opacity:0; transition:opacity .6s ease; }
.scene.is-ready .stage > video { opacity:1; }
/* The ground the copy stands on: the photograph's own shadow, deepened. */
.stage::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,
    rgba(3,28,19,.92) 0%, rgba(3,28,19,.80) 22%, rgba(3,28,19,.42) 42%, rgba(3,28,19,0) 62%);
}
/* The film dims as the next sheet covers it. */
.stage::after {
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:var(--night); opacity:calc(var(--cover) * .6);
}
.copy {
  position:absolute; z-index:2; left:var(--gutter); right:var(--gutter);
  bottom:calc(var(--tb) + var(--bar-clear));
  color:var(--cream);
}
.scene[data-hero] .copy { bottom:calc(var(--tb) + 44px + env(safe-area-inset-bottom)); }
.copy h1, .copy h2 {
  font-size:calc(var(--u) * 9.2);          /* motion.js fits this to the column */
  line-height:1; text-wrap:initial;
}
.ln { display:block; white-space:nowrap; overflow:clip; padding-top:.14em; margin-top:-.1em; padding-bottom:.06em; }
.ln > span { display:inline-block; }
.copy .beat + .beat { margin-top:18px; }
/* The reason behind the headline, centred under it between two gold rules. */
.copy p {
  display:flex; align-items:center; justify-content:center; gap:12px;
  font:600 calc(var(--u) * 5.6)/1.2 var(--ui); letter-spacing:.005em; white-space:nowrap; color:var(--cream);
}
.copy p::before, .copy p::after { content:""; flex:1 1 14px; min-width:14px; max-width:44px; height:3px; border-radius:2px; background:var(--gold); }
.anchor { margin-top:26px; }

/* The one authored entrance: the hero headline rises out of its own baseline. */
@keyframes rise { from { transform:translateY(112%); } to { transform:none; } }
@keyframes fade-up { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes settle { from { transform:scale(1.12); } to { transform:scale(1); } }
[data-hero] .ln > span { animation:rise 1.1s var(--ease) both; animation-delay:calc(var(--i) * 110ms + 200ms); }
[data-hero] .anchor { animation:fade-up .9s var(--ease) .62s both; }
[data-hero] .stage > .poster { animation:settle 1.8s var(--ease) both; }

/* ── Sheet: copy that rises over the pinned film ────────────────────────── */
.sheet {
  position:relative; z-index:2; margin-top:-100lvh;
  padding:0 var(--sheet-gutter) 44px;
  --crest:calc(var(--u) * 16.4);           /* how far the shoulder stands above the card */
  --sheet-bg:var(--cream); --crest-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64V0Q241.8 0 390 64Z' fill='%23F8F5ED'/%3E%3C/svg%3E");
}
/* The card's top edge is the shoulder of the green field on the can: tall on
   the left, falling away in a convex curve to the right. One painted shape, so
   the shadow follows the curve. */
.sheet::before {
  content:""; position:absolute; z-index:-1; inset:calc(var(--crest) * -1) 0 0;
  background:
    var(--crest-img) top / 100% var(--crest) no-repeat,
    linear-gradient(var(--sheet-bg), var(--sheet-bg)) 0 calc(var(--crest) - 1px) / 100% 100% no-repeat;
  filter:drop-shadow(0 -16px 26px rgba(2,22,14,.42));
}
/* A second, paler shoulder just behind the first: the can's two greens. */
.sheet::after {
  content:""; position:absolute; z-index:-2; left:0; right:0; top:calc(var(--crest) * -1 - 16px); height:calc(var(--crest) + 16px);
  /* Filled below the curve too, so the band runs out through the right edge. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64V0Q250 -4 390 58V64Z' fill='%23B5D77D'/%3E%3C/svg%3E") top / 100% var(--crest) no-repeat,
    linear-gradient(var(--lime), var(--lime)) 0 calc(var(--crest) - 1px) / 100% 100% no-repeat;
}
/* The first card waits wholly below the hero, both shoulders included. */
.scene[data-hero] + .sheet { margin-top:calc(-100lvh + var(--crest) + 16px); }
/* The copy tucks up under the tall side of the curve. */
.sheet > :first-child { margin-top:-10px; }
/* Left-aligned text, centred as a block: motion.js narrows this to its widest
   line so the gutter either side of the words is the same. */
.sheet__in { margin-inline:auto; }
.sheet h2 { font-size:calc(var(--u) * 6.6); color:var(--forest); }
.sheet .summary { margin-top:16px; font-size:18.5px; line-height:1.48; }
.sheet .summary b { font-weight:500; color:var(--forest); }
.sheet--forest { --sheet-bg:var(--forest); --crest-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64V0Q241.8 0 390 64Z' fill='%23005632'/%3E%3C/svg%3E"); color:var(--text-on-dark); }
.sheet--forest h2 { color:var(--cream); }
/* The phrase each heading turns on. Gold type on the dark cards; on cream, where
   gold type would vanish, the same gold sits behind the words instead. */
.sheet h2 .hl { color:var(--gold); }
.sheet:not(.sheet--forest):not(.facts) h2 .hl {
  color:var(--forest); background:var(--gold); border-radius:5px; padding:.02em .16em .06em; margin:0 -.16em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.sheet--forest .summary b { color:var(--lime); }
.sheet--forest .summary { font-size:20px; line-height:1.42; color:var(--text-on-dark); }

/* ── The good stuff ─────────────────────────────────────────────────────── */
.facts { --sheet-bg:var(--forest); --crest-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64V0Q241.8 0 390 64Z' fill='%23005632'/%3E%3C/svg%3E"); color:var(--text-on-dark); padding-bottom:48px; }
.facts::after { content:none; }
.facts h2 { font-size:calc(var(--u) * 6.8); color:var(--cream); white-space:nowrap; }
/* The can stands to the right of the facts, so the rows stop short of it. */
.facts ul { margin:26px calc(var(--u) * 28.7) 0 0; }
.facts li { position:relative; padding:17px 0 19px; }
.facts li::before {
  content:""; position:absolute; left:0; right:0; top:0; height:1.5px; background:rgba(181,215,125,.4);
  transform-origin:left; transition:transform 1s var(--ease); transition-delay:calc(var(--i) * 120ms);
}
.facts li:last-child { padding-bottom:0; }
/* What it is leads; the amount, in a gold pill, and where it comes from follow. */
.facts .what {
  font-family:var(--display); line-height:1; font-size:calc(var(--u) * 8.5); color:#fff;
  transition:transform 1s var(--ease), opacity .6s; transition-delay:calc(var(--i) * 120ms + 80ms);
}
.facts .src { margin-top:11px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font:300 18px/1 var(--ui); font-variant-numeric:lining-nums; }
.facts .src b { padding:6px 11px; border-radius:999px; background:var(--gold); color:var(--deep); font:700 16px/1 var(--ui); }
.facts__can {
  position:absolute; right:16px; top:calc(var(--u) * 25); width:calc(var(--u) * 27.2); height:auto;
  transform:rotate(7deg); filter:drop-shadow(-10px 18px 18px rgba(0,20,10,.45));
}
.facts.arm li::before { transform:scaleX(0); }
.facts.arm .what { transform:translateY(40%); opacity:0; }

/* ── The range: a deck of three ─────────────────────────────────────────── */
.flavors, .buy, .proof, .closing { position:relative; z-index:2; }
/* The last row's flavor menu drops past the panel's own edge. */
.buy { z-index:3; }
.flavors { background:var(--cream); padding:76px 12px 40px; }
.flavors > h2 { font-size:calc(var(--u) * 8.4); color:var(--forest); padding:0 10px; }
.flavors__list { margin-top:34px; }
.flavors__list li { position:sticky; top:calc(14px + var(--i) * 16px); margin-bottom:16px; }
.flavor {
  display:grid; grid-template-rows:minmax(0, 1fr) auto;
  height:min(560px, calc(100svh - 150px));
  border-radius:var(--r-card); overflow:hidden;
  background:var(--f); color:var(--d);
  transform-origin:50% 0; transform:scale(calc(1 - var(--under, 0) * .06));
  box-shadow:0 -10px 30px -18px rgba(2,22,14,.35);
}
.flavor img { width:100%; height:100%; object-fit:contain; min-height:0; }
.flavor__text { padding:0 22px 26px; }
.flavor h3 { font-size:calc(var(--u) * 7.6); }
.flavor p { margin-top:10px; font-size:17px; line-height:1.45; color:color-mix(in srgb, var(--d) 88%, transparent); }

/* ── The offer ──────────────────────────────────────────────────────────── */
.buy { background:var(--cream); padding:36px 16px 64px; scroll-margin-top:0; }
.buy__media > img {
  width:100%; aspect-ratio:1 / .92; object-fit:cover; border-radius:var(--r-card); background:#E7ECC8;
}
.buy__thumbs { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:8px; }
.buy__thumbs button { display:block; width:100%; border-radius:14px; overflow:hidden; position:relative; }
.buy__thumbs img { width:100%; aspect-ratio:1; object-fit:cover; }
.buy__thumbs button::after { content:""; position:absolute; inset:0; border-radius:inherit; border:2px solid transparent; transition:border-color .2s; }
.buy__thumbs button[aria-pressed="true"]::after { border-color:var(--forest); }
.buy__details { padding:26px 6px 0; }
.buy h2 { font-size:calc(var(--u) * 7.4); color:var(--forest); line-height:1.08; }
.rating { margin-top:12px; display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; }
.rating a { color:var(--forest); text-underline-offset:3px; text-decoration-thickness:1px; }
.stars {
  display:inline-block; width:86px; height:16px; font-size:0; flex:none; background:#E0A400;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.6 5.4 5.9.8-4.300 4.100 1.100 5.900L10 14.900l-5.300 2.900 1.100-5.900L1.500 7.800l5.900-.8z'/%3E%3C/svg%3E") left center/17.2px 16px repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.6 5.4 5.9.8-4.300 4.100 1.100 5.900L10 14.900l-5.300 2.900 1.100-5.900L1.500 7.800l5.900-.8z'/%3E%3C/svg%3E") left center/17.2px 16px repeat-x;
}
.lede { margin-top:16px; font:600 19px/1.35 var(--ui); color:var(--deep); }
.product-description { margin-top:8px; font-size:16px; line-height:1.5; }
.label, legend.label {
  font:600 12px/1 var(--ui); letter-spacing:.12em; text-transform:uppercase; color:var(--forest);
}
.choice--boxes { margin-top:28px; }
.qty-rows { margin-top:12px; display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; }
.qty-row {
  position:relative; border-radius:18px; background:var(--paper);
  box-shadow:inset 0 0 0 1.5px var(--rule);
  transition:box-shadow .25s, background-color .25s;
}
.qty-row:has(.qty-head[aria-pressed="true"]) { box-shadow:inset 0 0 0 2px var(--forest), 0 14px 30px -20px rgba(0,64,31,.55); background:#fff; }
.qty-flag {
  position:absolute; top:-9px; left:16px; z-index:1; padding:4px 10px; border-radius:999px;
  background:var(--gold); color:var(--deep); font:700 11px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase;
}
.qty-head { display:flex; align-items:center; gap:12px; width:100%; padding:18px 16px 16px; text-align:left; }
.qty-radio { width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgba(0,86,50,.45); flex:none; position:relative; transition:box-shadow .2s; }
.qty-radio::after { content:""; position:absolute; inset:6px; border-radius:50%; background:var(--forest); transform:scale(0); transition:transform .35s var(--ease); }
.qty-head[aria-pressed="true"] .qty-radio { box-shadow:inset 0 0 0 2px var(--forest); }
.qty-head[aria-pressed="true"] .qty-radio::after { transform:scale(1); }
.qty-main { display:grid; gap:4px; flex:1; min-width:0; }
.qty-label { font:700 18px/1 var(--ui); color:var(--deep); }
.qty-sub, .qty-each { font:500 13px/1 var(--ui); color:var(--text-quiet); }
.qty-price { display:grid; gap:5px; justify-items:end; font-variant-numeric:tabular-nums lining-nums; }
.qty-line { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:5px 7px; }
.qty-now { font:700 18px/1 var(--ui); color:var(--deep); }
.qty-was { font:500 13px/1 var(--ui); text-decoration:line-through; color:var(--text-quiet); }
.qty-save { padding:4px 7px; border-radius:999px; background:var(--forest); color:var(--cream); font:700 11px/1 var(--ui); letter-spacing:.02em; white-space:nowrap; }
.qty-boxes { padding:0 16px; }
.qty-boxes:has(> :not([hidden])) { padding-bottom:16px; }
.box-picks { position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:8px; padding-top:2px; }
.box-pick { display:grid; gap:7px; min-width:0; }
.box-pick__label { font:600 11px/1 var(--ui); letter-spacing:.12em; text-transform:uppercase; color:var(--forest); }
.box-pick__button {
  display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; min-height:46px;
  padding:0 12px 0 14px; border-radius:12px; text-align:left;
  font:600 14.5px/1.1 var(--ui); color:var(--deep);
  background:var(--cream); box-shadow:inset 0 0 0 1.5px var(--rule);
  transition:background-color .25s, box-shadow .25s;
}
.box-pick__button::after {
  content:""; width:10px; height:6px; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s var(--ease);
}
.box-pick__button[aria-expanded="true"]::after { transform:rotate(180deg); }
.box-pick.has-flavor .box-pick__button { background:color-mix(in srgb, var(--flavor-field) 34%, #fff); box-shadow:inset 0 0 0 1.5px var(--flavor-deep); }
.box-pick__menu {
  position:absolute; z-index:5; left:0; right:0; top:calc(100% + 6px);
  padding:6px; border-radius:16px; background:#fff;
  box-shadow:0 0 0 1px var(--rule), 0 24px 48px -16px rgba(0,40,20,.45);
  display:grid; gap:4px;
}
.box-pick__option { display:flex; align-items:center; gap:12px; width:100%; padding:8px 12px 8px 8px; border-radius:11px; text-align:left; background:color-mix(in srgb, var(--f) 30%, #fff); }
.box-pick__can { width:38px; height:50px; object-fit:contain; flex:none; }
.box-pick__text { display:grid; gap:3px; }
.box-pick__name { font:700 15px/1.1 var(--ui); color:var(--d); }
.box-pick__desc { font:400 13px/1.3 var(--ui); color:var(--text); }
.qty-cta { margin-top:12px; }
.qty-cta .btn { width:100%; background:var(--flavor-deep); transition:background-color .3s; }
.draft-note { margin-top:16px; font-size:13px; text-align:center; color:var(--text-quiet); }

/* ── Proof: a rail you pull sideways ────────────────────────────────────── */
.proof { background:var(--forest); color:var(--cream); padding:72px 0 76px; border-radius:var(--r-sheet) var(--r-sheet) 0 0; scroll-margin-top:0; }
.proof h3 { font-size:calc(var(--u) * 8.4); padding:0 var(--gutter); color:var(--cream); }
.reviews {
  margin-top:34px; display:flex; gap:12px; padding:4px var(--gutter) 8px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter);
  scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
}
.reviews::-webkit-scrollbar { display:none; }
.review {
  flex:none; width:calc(var(--col) * .8); scroll-snap-align:start;
  display:flex; flex-direction:column;
  padding:24px 22px 22px; border-radius:var(--r-card);
  background:var(--cream); color:var(--deep);
}
.review:first-child { background:var(--lime); }
.review .stars { background:var(--deep); }
.review__quote { margin:20px 0 28px; font:500 var(--q, 20px)/1.36 var(--ui); letter-spacing:-.008em; text-wrap:pretty; }
.review:nth-child(1) { --q:27px; }
.review:nth-child(2), .review:nth-child(3) { --q:24px; }
.review:nth-child(4) { --q:20px; }
.review:nth-child(5) { --q:18.5px; }
.review__by { margin-top:auto; font:700 16px/1 var(--ui); }
.review__role { margin-top:6px; font:400 13px/1 var(--ui); }
.rail-meter { margin:22px var(--gutter) 0; height:2px; border-radius:2px; background:rgba(248,245,237,.22); overflow:hidden; }
.rail-meter i { display:block; height:100%; width:20%; background:var(--lime); border-radius:2px; transform:translateX(calc(var(--rail, 0) * 400%)); }

/* ── The close ──────────────────────────────────────────────────────────── */
.closing {
  isolation:isolate; text-align:center; color:var(--cream);
  padding:56px var(--gutter) calc(var(--bar-clear) + 40px + env(safe-area-inset-bottom));
  background:var(--night);
}
.closing::before { content:""; position:absolute; inset:0; z-index:-2; background:var(--closing-bg) center 30%/cover no-repeat; }
.closing::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom, var(--forest) 0%, rgba(0,64,31,.86) 26%, rgba(3,28,19,.9) 100%); }
.closing h2 { font-size:calc(var(--u) * 13); line-height:.98; }
.closing__eyebrow { margin-top:16px; font:500 17px/1 var(--ui); letter-spacing:.01em; text-transform:none; color:var(--lime); }
.closing__body { margin:22px auto 0; max-width:27ch; font-size:18px; line-height:1.45; color:var(--text-on-dark); }
.closing__flavors { margin-top:34px; display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.closing__flavor {
  display:grid; justify-items:center; gap:8px; padding:16px 6px 14px; border-radius:18px;
  background:var(--f); color:var(--d); text-decoration:none; font:700 13px/1.1 var(--ui);
  transition:transform .35s var(--ease);
}
.closing__flavor:active { transform:scale(.96); }
.closing__flavor img { height:92px; width:auto; }
.closing .btn { margin-top:14px; width:100%; }

/* ── The floating buy bar ───────────────────────────────────────────────── */
.buybar {
  position:fixed; z-index:20; bottom:calc(12px + env(safe-area-inset-bottom));
  left:max(12px, calc(50vw - 228px)); right:max(12px, calc(50vw - 228px));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 8px 8px 20px; border-radius:999px;
  background:var(--night); color:var(--cream);
  box-shadow:0 0 0 1.5px var(--lime), 0 20px 44px -10px rgba(2,22,14,.8);
  transform:translateY(calc(100% + 32px)); opacity:0;
  transition:transform .6s var(--ease), opacity .3s;
}
.buybar.show { transform:none; opacity:1; }
.buybar .name { position:relative; padding-left:18px; min-width:0; font:600 15px/1.15 var(--ui); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.buybar .name::before { content:""; position:absolute; left:0; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:var(--flavor-field); transition:background-color .3s; }
.buybar small { display:block; margin-top:3px; font:500 12.5px/1 var(--ui); color:var(--text-on-dark); font-variant-numeric:tabular-nums; }
/* Gold is used nowhere else at this size, so the one way to buy is the loudest
   thing on screen wherever the bar sits: on film, on cream, on lime. */
.buybar .btn {
  position:relative; overflow:hidden; flex:none;
  min-height:50px; padding:0 22px; font-size:16px; font-weight:600;
  background:var(--gold); color:var(--deep);
}
.buybar .btn::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%);
  transform:translateX(-110%); animation:sheen 4.2s var(--ease) 1.2s infinite;
}
.buybar .btn::after { animation:nudge 4.2s var(--ease) 1.2s infinite; }
/* Display Zoom phones: keep the price readable beside the larger button. */
@media (max-width:359px) {
  .buybar { padding-left:14px; gap:8px; }
  .buybar .name { padding-left:15px; font-size:13px; }
  .buybar small { font-size:11.5px; }
  .buybar .btn { min-height:46px; padding:0 13px; font-size:14.5px; gap:7px; }
}
@keyframes sheen { 0% { transform:translateX(-110%); } 32%, 100% { transform:translateX(110%); } }
@keyframes nudge { 0%, 30%, 100% { transform:none; } 14% { transform:translateX(5px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .stage > .poster, .stage > video { transform:none; }
  .flavor { transform:none; }
}