/* ==========================================================================
   MrPeelz — one stylesheet, token-driven.

   The brief was "childish in an adult way". The way that works is to keep the
   SHAPES playful and the TYPE and SPACING disciplined: fat rounded corners,
   cards that sit a half-degree off square, a wobble on hover — but a real
   type scale, real contrast, and banana yellow used as an accent rather than
   as wallpaper. Yellow is the loudest color on the wheel; a page painted in
   it reads as a warning label, not as pudding.

   The base is vanilla custard cream, the ink is cocoa brown rather than black,
   and #F7D046 shows up on maybe eight percent of any given screen.

   Nothing is set below 13px. Verified at 390px and 1440px.
   ========================================================================== */

:root {
  /* --- surface -------------------------------------------------------
     Richer than the first pass, which was a near-white with a hint of warm in
     it and read as gray next to the artwork. Ivory has actual body: it is the
     color of the custard, not the color of paper. */
  --ivory:      #F8F0DA;   /* page — warm ivory with a custard cast */
  --ivory-2:    #F2E7C7;   /* alternating bands */
  --ivory-3:    #EADCB2;   /* cards that need to sit up off the page */
  --wafer:      #EADCB2;
  --wafer-line: #D9C296;   /* hairlines on ivory */
  --white:      #FFFFFF;
  --cream:      var(--ivory);     /* older rules still name these */
  --cream-2:    var(--ivory-2);

  /* --- ink ------------------------------------------------------------
     A rich cocoa rather than the flat dark brown it was. Warm enough to sit
     with the yellow, dark enough to carry body text on ivory at 13px. */
  /* A chocolate with a red lift rather than the grey-olive it was. Put the two
     side by side against the yellow and the old one reads as dark grey; this
     one reads as an expensive box. */
  --brown:      #43271A;   /* the header, the footer, the dark bands */
  --brown-2:    #2E1A10;   /* pressed, and the deepest band */
  --ink:        #43271A;
  --ink-soft:   #6B4F3A;   /* 5.8:1 on ivory */
  --ink-faint:  #85684F;   /* 4.7:1 on ivory — the floor for body text */
  --cocoa:      #53341F;

  /* --- the banana -----------------------------------------------------
     RICHER AND MORE SATURATED. #F7D046 was a pastel next to the artwork's own
     yellow; this is the yellow the logo is actually drawn in.

     The rule that keeps it legible: yellow never carries small text on a light
     background. It is for large display type (outlined, like the logo), and
     for text on brown — where it has 9:1 and looks like a sign. Small print
     that used to be olive-brown is just brown now.

     --peel-ink is gone. It was #7A5D0B, an olive that existed only because
     yellow fails contrast as text on cream, and it is the muddy color the
     word "Pudding." was set in. */
  --peel:       #FFC72C;   /* rich banana — the accent */
  --peel-deep:  #E9A800;   /* pressed/active */
  --peel-soft:  #FDEFC2;   /* tint fills */
  --peel-ink:   var(--brown);   /* anything that still asks for it gets brown */
  --stem:       #4E7A3C;
  --berry:      #D4483F;
  --berry-soft: #FBE7E4;
  --good:       #37734A;
  --good-soft:  #E4F0E7;

  /* --- type ---------------------------------------------------------- */
  /* the emoji stack is named explicitly: this site uses emoji as product
     iconography, and a box glyph where a banana should be is the difference
     between charming and broken on a machine without a color emoji font */
  --emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif;
  --display: 'Fredoka', 'Baloo 2', ui-rounded, 'Segoe UI Rounded', system-ui, sans-serif, var(--emoji);
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif, var(--emoji);

  /* --- shape --------------------------------------------------------- */
  --r-sm: 10px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --shadow-1: 0 2px 0 var(--wafer-line);
  --shadow-2: 0 10px 26px -14px rgba(46, 33, 22, .38);
  --shadow-3: 0 22px 48px -20px rgba(46, 33, 22, .45);
  --ring: 0 0 0 4px rgba(247, 208, 70, .45);

  /* --- rhythm -------------------------------------------------------- */
  --page: 1200px;
  --gut: 24px;
}

/* ==========================================================================
   reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* THE GRAIN.
     A tiling PNG of very low-alpha speckle, drawn OVER the ivory — a
     background-image always sits above the background-colour, which is exactly
     what is wanted here. 12KB, 160px, and it tiles seamlessly because random
     noise has no structure to line up at the edges.

     The point is not to be seen. It is to stop a large flat fill reading as a
     screen: paper has tooth, and a page that has none looks like a template. */
  background: url('../assets/texture.png') repeat, var(--ivory);
  background-size: 160px 160px, auto;
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Any `display` declaration outranks the UA stylesheet's `[hidden]{display:none}`,
   so an element with a class that sets display ignores the hidden attribute
   entirely. That is why the "You already won" banner showed on a first visit
   with an empty prize in it. Global, because the next component to set display
   on a hideable element would hit exactly the same thing. */
[hidden] { display: none !important; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
/* ONE type scale. Before this, ten page bodies each set their own h1 clamp —
   six different ones — and fifteen distinct font sizes were typed by hand. The
   default is now the size the pages were reaching for, so the overrides could
   all be deleted rather than reconciled.

   .h-hero is the home page only: the one place a bigger headline earns its
   space. .h-sm is for a heading that titles a small panel. */
h1 { font-size: clamp(36px, 5.6vw, 60px); }
h2 { font-size: clamp(27px, 3.4vw, 38px); }
h3 { font-size: clamp(19px, 2vw, 23px); }
h4 { font-size: clamp(16px, 1.5vw, 18px); }

.h-hero { font-size: clamp(40px, 7vw, 74px); }
.h-sm   { font-size: clamp(19px, 1.9vw, 22px); }
.h-xs   { font-size: 17px; letter-spacing: -.005em; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--peel-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--cream);
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   layout
   ========================================================================== */
.wrap { width: min(100% - 40px, var(--page)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 40px, 820px); margin-inline: auto; }
section { padding: clamp(48px, 6.2vw, 84px) 0; }

/* THE FIRST SECTION ON A PAGE STARTS HIGHER.
   Every page opened with the full section rhythm under a sticky header, which
   on a laptop put the first words about a third of the way down the screen and
   pushed everything that matters below the fold. The rhythm BETWEEN sections
   is what makes the page readable; the gap above the first one was just air. */
main > section:first-child,
main > .sec-lead:first-child { padding-top: clamp(22px, 2.6vw, 38px); }
.band { background: url('../assets/texture.png') repeat, var(--ivory-2); background-size: 160px 160px, auto; }
.band-ink { background: var(--ink); color: var(--cream); }
.band-ink h1, .band-ink h2, .band-ink h3 { color: var(--white); }
.band-peel { background: url('../assets/texture.png') repeat, var(--peel-soft); background-size: 160px 160px, auto; }

.stack > * + * { margin-top: var(--gut); }
.lede { font-size: clamp(18px, 2vw, 21px); color: var(--ink-soft); max-width: 62ch; }

.grid { display: grid; gap: var(--gut); }
/* gN means N columns. It used to mean "auto-fit at some minimum", which on a
   1200px page gave .g2 four columns and .g3 four columns — so a six-item
   three-up grid rendered 4 + 2 with a ragged edge, and a two-item grid spread
   across four tracks. The class names were describing an intention the CSS did
   not implement.

   auto-fit is still doing the responsive work, but the maximum is now capped
   at N tracks so the count is honest at every width. */
.g2 { grid-template-columns: repeat(auto-fit, minmax(max(280px, (100% - var(--gut)) / 2), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(max(250px, (100% - var(--gut) * 2) / 3), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(max(210px, (100% - var(--gut) * 3) / 4), 1fr)); }

/* ==========================================================================
   the eyebrow — small caps label above a heading
   ========================================================================== */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--peel-ink);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--peel);
}
.band-ink .eyebrow { color: var(--peel); }

/* ==========================================================================
   buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px;
  font-family: var(--display); font-size: 17px; font-weight: 600;
  border: 2px solid var(--ink); border-radius: 999px;
  background: var(--peel); color: var(--ink);
  text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); background: #FFDA5E; }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.btn-ghost { background: var(--white); }
.btn-ghost:hover { background: var(--peel-soft); }
.btn-ink { background: var(--ink); color: var(--peel); border-color: var(--ink); box-shadow: 0 4px 0 var(--cocoa); }
.btn-ink:hover { background: #3C2C1D; }
.btn-sm { padding: 10px 18px; font-size: 15px; box-shadow: 0 3px 0 var(--ink); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* THE THREE HERO BUTTONS SIT ON ONE LINE.
   A pack, wholesale, and where to walk in — they are three ways to buy the
   same thing, and stacking one of them underneath reads as an afterthought.
   nowrap plus tighter padding keeps them together down to about 900px; below
   that they wrap, because three buttons across a phone is four words each. */
.hero .btn-row { flex-wrap: nowrap; gap: 10px; }
.hero .btn-row .btn { padding-inline: 17px; white-space: nowrap; font-size: 15.5px; }
.hero .btn-row .btn .ico { margin-right: 2px; }
@media (max-width: 900px) { .hero .btn-row { flex-wrap: wrap; } }

/* ==========================================================================
   header + nav
   ========================================================================== */
/* A BROWN BAR, and the yellow gets to be yellow.

   The header was translucent ivory with a 38px logo on a black tile and the
   word "Peelz" in an olive-brown, because a full-strength yellow cannot carry
   text on a light background. Putting the bar on rich brown solves the
   contrast problem rather than dodging it: #FFC72C on #3A2418 is about 9:1,
   so the name can be the yellow the logo is drawn in, at the size it deserves. */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: var(--brown);
  border-bottom: 3px solid var(--brown-2);
}
.hdr-in { display: flex; align-items: center; gap: 18px; min-height: 104px; }

.brand { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; text-decoration: none; margin-right: auto; }
/* logo-mark.png is the banana with NO tile behind it, so it sits on the brown
   rather than in a black square on the brown. */
/* The mark carries the brand on every page, and at 38px it was a favicon with
   a word next to it. This is the size it is actually recognisable at. */
.brand-mark {
  width: 76px; height: 76px; flex: none; display: block;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.35));
}
.brand-name {
  font-family: var(--display); font-weight: 600; font-size: 44px;
  letter-spacing: -.01em; color: var(--ivory); white-space: nowrap;
  line-height: 1;
}
/* "Mr" and "Peelz" are two words with air between them, not one run-on. */
.brand-name b { color: var(--peel); font-weight: 600; margin-left: .22em; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 10px 15px; border-radius: 999px; text-decoration: none;
  font-size: 15.5px; font-weight: 500; color: #E8D9C4; white-space: nowrap;
}
.nav a:hover { background: rgba(255,199,44,.16); color: var(--peel); }
.nav a[aria-current="page"] { background: var(--peel); color: var(--brown); font-weight: 700; }

.nav-tools { display: flex; align-items: center; gap: 10px; }

.burger {
  display: none; width: 46px; height: 42px; border: 2px solid var(--peel);
  border-radius: var(--r-sm); background: transparent; cursor: pointer;
  align-items: center; justify-content: center; flex: none;
}
.burger span { display: block; width: 20px; height: 2.5px; background: var(--peel); border-radius: 2px; position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2.5px;
  background: var(--peel); border-radius: 2px;
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }

@media (max-width: 940px) {
  .burger { display: inline-flex; }
  .nav {
    position: fixed; inset: 70px 0 auto; z-index: 59;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--cream); border-bottom: 2px solid var(--ink);
    padding: 14px 20px 22px; display: none;
    box-shadow: var(--shadow-2);
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 16px; font-size: 17px; }
}

/* ==========================================================================
   the splash — a banana that peels itself open
   ========================================================================== */
#splash {
  position: fixed; inset: 0; z-index: 999;
  background: var(--peel);
  display: grid; place-items: center;
  overflow: hidden;
}
#splash[hidden] { display: none; }
.splash-stage { text-align: center; padding: 20px; }
/* overflow visible so the peels can swing outside the viewBox as they open;
   the default clips them flat at the box edge mid-swing */
.splash-banana { width: min(52vw, 300px); margin: 0 auto 22px; overflow: visible; }
.splash-word {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(34px, 8vw, 68px); color: var(--ink);
  letter-spacing: -.02em; opacity: 0;
}
.splash-sub {
  font-size: 15px; letter-spacing: .22em; text-transform: uppercase;
  color: #7A5D0B; font-weight: 700; opacity: 0; margin-top: 6px;
}
.splash-skip {
  position: absolute; right: 18px; bottom: 18px;
  background: rgba(46,33,22,.1); border: 2px solid var(--ink); color: var(--ink);
  padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.splash-skip:hover { background: rgba(46,33,22,.2); }

/* ------------------------------------------------------------------ *
 * The peel, in five beats.
 *
 * The first version played every peel at once on the same curve, which is why
 * it read as a machine opening rather than as fruit: real peeling is sequential
 * and it overshoots. So the banana drops in and settles, the front peel folds
 * away first, the two sides follow a beat later and land past their mark before
 * easing back, and only then does the pudding rise into the gap.
 *
 * transform-box: view-box is load-bearing. Without it an SVG element resolves a
 * px transform-origin against its own tight bounding box, so each peel pivoted
 * about its own middle and swept sideways like a wire instead of hinging at the
 * stem. The hinge is (100, 46) — where the stem meets the fruit.
 * ------------------------------------------------------------------ */
.peel-flap  { transform-box: view-box; transform-origin: 100px 46px; }
.peel-flesh { transform-box: view-box; transform-origin: 100px 214px; }
.sp-shadow  { transform-box: view-box; transform-origin: 100px 243px; }

.splash-run .splash-banana { animation: drop .62s cubic-bezier(.25,1.5,.45,1) both; }
.splash-run .sp-shadow     { animation: shadow .62s cubic-bezier(.25,1.5,.45,1) both; }
.splash-run .peel-c        { animation: peelC .62s cubic-bezier(.45,1.5,.5,1) .52s both; }
.splash-run .peel-l        { animation: peelL .78s cubic-bezier(.4,1.6,.5,1) .66s both; }
.splash-run .peel-r        { animation: peelR .78s cubic-bezier(.4,1.6,.5,1) .72s both; }
.splash-run .peel-flesh    { animation: rise .52s cubic-bezier(.3,1.7,.5,1) .8s both; }
.splash-run .splash-word   { animation: pop .46s cubic-bezier(.2,1.9,.4,1) 1.06s both; }
.splash-run .splash-sub    { animation: pop .46s cubic-bezier(.2,1.9,.4,1) 1.2s both; }

@keyframes drop   { 0% { transform: translateY(-48px) scale(.92); opacity: 0 } 100% { transform: none; opacity: 1 } }
@keyframes shadow { 0% { transform: scaleX(.3); opacity: 0 } 100% { transform: none; opacity: 1 } }
/* the front peel folds toward the viewer and shortens as it goes */
@keyframes peelC  { 0% { transform: rotate(0) scaleY(1) } 100% { transform: rotate(3deg) scaleY(.22) translateY(4px) } }
@keyframes peelL  { 0% { transform: rotate(0) } 100% { transform: rotate(-66deg) } }
@keyframes peelR  { 0% { transform: rotate(0) } 100% { transform: rotate(66deg) } }
@keyframes rise   { 0% { transform: scaleY(.42); opacity: .25 } 100% { transform: none; opacity: 1 } }
@keyframes pop    { 0% { transform: translateY(16px) scale(.86); opacity: 0 } 100% { transform: none; opacity: 1 } }

#splash.lift { animation: lift .55s cubic-bezier(.6,0,.35,1) both; }
@keyframes lift { to { transform: translateY(-101%); } }

@media (prefers-reduced-motion: reduce) {
  .splash-run .splash-banana, .splash-run .sp-shadow, .splash-run .peel-c,
  .splash-run .peel-l, .splash-run .peel-r, .splash-run .peel-flesh,
  .splash-run .splash-word, .splash-run .splash-sub { animation: none !important; }
  .splash-word, .splash-sub { opacity: 1; }
  .peel-l { transform: rotate(-66deg); }
  .peel-r { transform: rotate(66deg); }
  .peel-c { transform: rotate(3deg) scaleY(.22) translateY(4px); }
  #splash.lift { animation: none; display: none; }
}

/* ==========================================================================
   hero
   ========================================================================== */
.hero { position: relative; padding: clamp(48px, 7vw, 92px) 0 clamp(56px, 8vw, 104px); overflow: hidden; }
.hero-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .hero-in { grid-template-columns: 1fr; } }

/* "Pudding." — the yellow, outlined, exactly the way the logo is drawn.
   It used to be #7A5D0B, an olive that existed only to make yellow legible on
   a light background. Outlining it solves the same problem without inventing a
   color nobody would choose. paint-order keeps the stroke behind the fill so
   the letterforms stay crisp. */
.hero h1 span {
  color: var(--peel); display: inline-block;
  -webkit-text-stroke: 3px var(--brown);
  paint-order: stroke fill;
}
.hero-art { position: relative; }
.hero-art svg { width: 100%; max-width: 460px; margin-inline: auto; }
.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-2deg) } 50% { transform: translateY(-14px) rotate(2deg) } }
@media (prefers-reduced-motion: reduce) { .float { animation: none; } }

.blob { position: absolute; border-radius: 50%; filter: blur(42px); opacity: .5; pointer-events: none; z-index: -1; }
.blob-1 { width: 380px; height: 380px; background: var(--peel); top: -80px; right: -60px; }
.blob-2 { width: 300px; height: 300px; background: #FFE9A8; bottom: -110px; left: -80px; }

/* ==========================================================================
   the fact strip — the three verified numbers
   ========================================================================== */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--ink); border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; }
@media (max-width: 700px) { .facts { grid-template-columns: 1fr; } }
.fact { background: var(--cream); padding: 22px 20px; text-align: center; }
.fact b { display: block; font-family: var(--display); font-size: clamp(30px, 4vw, 42px); line-height: 1; color: var(--ink); }
.fact span { display: block; margin-top: 7px; font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

/* ==========================================================================
   cards
   ========================================================================== */
.card {
  background: var(--white); border: 2px solid var(--ink); border-radius: var(--r-lg);
  padding: 24px; box-shadow: 0 5px 0 var(--ink);
}
.card-soft { background: var(--white); border: 2px solid var(--wafer-line); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow-2); }

/* --- flavor tile: real art, saturated tint, whole card is the link --- */
.flav {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 2.5px solid var(--ink); border-radius: var(--r-lg);
  box-shadow: 0 6px 0 var(--ink); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .16s cubic-bezier(.2,1.4,.4,1), box-shadow .16s ease;
}
.flav:hover { transform: translateY(-5px) rotate(-.5deg); box-shadow: 0 12px 0 var(--ink); }
.flav:hover .cup { transform: translateY(-4px) rotate(2deg) scale(1.04); }
.flav:hover .flav-go { background: var(--ink); color: var(--peel); }
.flav:focus-visible { outline: 3px solid var(--peel-deep); outline-offset: 4px; }

/* the tint is mixed toward cream rather than dropped to 13% alpha — the old
   `${hue}22` made every tile the same washed beige and the grid lost all
   flavor identity */
.flav-top {
  display: block; padding: 16px 10px 6px;
  background: color-mix(in srgb, var(--tint) 34%, #FFFDF6);
  border-bottom: 2.5px solid var(--ink);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .flav-top { background: var(--peel-soft); }
}
.cup { width: 100%; max-width: 168px; margin: 0 auto; transition: transform .22s cubic-bezier(.2,1.5,.4,1); }

.flav-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.flav-name { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.15; }
.flav-desc { font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
.flav-foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.flav-go {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--peel);
  transition: background .14s ease, color .14s ease;
}
.price { font-family: var(--display); font-size: 20px; font-weight: 600; }
.price small { font-family: var(--body); font-size: 13px; font-weight: 500; color: var(--ink-soft); }

/* --- icons --- */
.ico { width: 24px; height: 24px; flex: none; }
.ico-sm { width: 18px; height: 18px; }
.ico.flip { transform: scaleX(-1); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; border: 1.5px solid var(--ink);
}
.chip-peel { background: var(--peel); }
.chip-veg { background: var(--good-soft); color: #24592f; border-color: #24592f; }
.chip-seasonal { background: var(--berry-soft); color: #8f2f29; border-color: #8f2f29; }
.chip-quiet { background: var(--wafer); color: var(--ink-soft); border-color: var(--wafer-line); }

/* ==========================================================================
   tables — used by the wholesale catalogue
   ========================================================================== */
.tbl-wrap { overflow-x: auto; border: 2px solid var(--ink); border-radius: var(--r); background: var(--white); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 720px; }
table.tbl th, table.tbl td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--wafer-line); font-size: 15px; }
table.tbl thead th {
  background: var(--ink); color: var(--peel); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; border-bottom: none; white-space: nowrap;
}
table.tbl tbody tr:nth-child(even) { background: var(--cream-2); }
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   forms
   ========================================================================== */
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 14px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.input, select.input, textarea.input {
  width: 100%; padding: 13px 15px; font-size: 16px;
  background: var(--white); color: var(--ink);
  border: 2px solid var(--wafer-line); border-radius: var(--r-sm);
}
.input:focus { outline: none; border-color: var(--peel-deep); box-shadow: var(--ring); }
textarea.input { min-height: 130px; resize: vertical; }
.hint { font-size: 14px; color: var(--ink-soft); }
.err { color: #a3322b; font-size: 15px; font-weight: 600; }

.note {
  border-left: 5px solid var(--peel); background: var(--peel-soft);
  padding: 16px 20px; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 15px;
}
.note-warn { border-left-color: var(--berry); background: var(--berry-soft); }
.note-good { border-left-color: var(--good); background: var(--good-soft); }

/* ==========================================================================
   footer
   ========================================================================== */
.ftr { background: var(--ink); color: #D9CDBE; padding: clamp(44px, 6vw, 72px) 0 28px; }
.ftr a { color: #D9CDBE; text-decoration: none; }
.ftr a:hover { color: var(--peel); text-decoration: underline; }
.ftr .foot-h { font-family: var(--display); color: var(--white); font-size: 17px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: 9px; font-size: 15px; }
.ftr-btm {
  margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center;
  font-size: 14px; color: #A99A88;
}
.demo-chip {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  background: rgba(247,208,70,.14); border: 1px solid rgba(247,208,70,.4);
  color: var(--peel); padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
}

/* ==========================================================================
   the two-door login
   ========================================================================== */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); }
@media (max-width: 800px) { .doors { grid-template-columns: 1fr; } }
.door {
  display: block; text-decoration: none; text-align: left;
  border: 2px solid var(--ink); border-radius: var(--r-lg); padding: 30px;
  box-shadow: 0 6px 0 var(--ink); cursor: pointer; width: 100%;
  transition: transform .16s ease, box-shadow .16s ease;
  background: var(--white);
}
.door:hover { transform: translateY(-4px); box-shadow: 0 11px 0 var(--ink); }
.door[aria-pressed="true"] { background: var(--peel-soft); }
.door-ico { font-size: 42px; line-height: 1; margin-bottom: 12px; }
.door h3 { margin-bottom: 6px; }
.door p { font-size: 15px; color: var(--ink-soft); margin: 0; }

/* ==========================================================================
   portal / account shell
   ========================================================================== */
.portal { display: grid; grid-template-columns: 244px 1fr; gap: 30px; align-items: start; }
@media (max-width: 900px) { .portal { grid-template-columns: 1fr; } }
.side { position: sticky; top: 92px; }
.side nav { display: flex; flex-direction: column; gap: 4px; }
.side nav button {
  text-align: left; padding: 12px 16px; border-radius: var(--r-sm);
  border: 2px solid transparent; background: none; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--ink-soft);
}
.side nav button:hover { background: var(--peel-soft); color: var(--ink); }
.side nav button[aria-current="true"] { background: var(--peel); border-color: var(--ink); color: var(--ink); }
@media (max-width: 900px) {
  .side { position: static; }
  .side nav { flex-direction: row; flex-wrap: wrap; }
}

.panel[hidden] { display: none; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.kpi { background: var(--white); border: 2px solid var(--ink); border-radius: var(--r); padding: 18px; box-shadow: 0 4px 0 var(--ink); }
.kpi b { display: block; font-family: var(--display); font-size: 30px; line-height: 1.1; }
.kpi span { display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }

/* the order builder's sticky total */
.cartbar {
  position: sticky; bottom: 0; z-index: 30;
  background: var(--ink); color: var(--cream);
  border: 2px solid var(--ink); border-radius: var(--r);
  padding: 16px 20px; margin-top: 22px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  box-shadow: var(--shadow-3);
}
.cartbar b { font-family: var(--display); font-size: 26px; color: var(--peel); }
.cartbar .meter { flex: 1; min-width: 180px; }
.meter-track { height: 9px; background: rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; }
.meter-fill { height: 100%; background: var(--peel); border-radius: 999px; transition: width .25s ease; }
.cartbar small { font-size: 13.5px; color: #C9BBA9; display: block; margin-top: 6px; }

.qty { display: inline-flex; align-items: center; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--white); }
.qty button { width: 34px; height: 34px; border: none; background: none; cursor: pointer; font-size: 19px; font-weight: 700; line-height: 1; }
.qty button:hover { background: var(--peel-soft); }
.qty input { width: 44px; border: none; text-align: center; font-size: 15px; font-weight: 600; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ==========================================================================
   misc
   ========================================================================== */
.steps { counter-reset: s; display: grid; gap: 18px; }
.step { position: relative; padding-left: 62px; }
.step::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: -2px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--peel); border: 2px solid var(--ink);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 21px; font-weight: 600;
}
/* THE RESET LOOP.

   The track held two copies of the text as sixteen flex children with a 40px
   gap, and slid by translateX(-50%). Half the TRACK is not the width of one
   copy: sixteen children have fifteen gaps between them, so the two halves
   differ by exactly one gap and every loop jumped 40px sideways. That is the
   stutter.

   Two identical sets, each carrying its own trailing gap as padding, and no
   gap between the sets. Now 50% is exactly one set and the seam is invisible. */
.marquee { background: var(--brown); color: var(--peel); border-block: 3px solid var(--brown-2); overflow: hidden; padding: 13px 0; }
.marquee-in { display: flex; white-space: nowrap; font-family: var(--display); font-size: 20px; animation: slide 42s linear infinite; }
.marquee-set { display: flex; gap: 44px; padding-right: 44px; flex: none; }

/* FOUR SETS, AND IT SLIDES BY ONE OF THEM.
   Two was not enough: one set is about 900px, so on any screen wider than that
   the track emptied out on the right before it looped and the band went blank.
   Four sets always cover the viewport twice over, and translating -25% is
   exactly one set — so the content that scrolls off the left is already on the
   right and the seam cannot be seen. */
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@media (prefers-reduced-motion: reduce) { .marquee-in { animation: none; } }

.faq { border: 2px solid var(--ink); border-radius: var(--r); background: var(--white); overflow: hidden; }
.faq + .faq { margin-top: 14px; }
.faq summary { padding: 18px 22px; cursor: pointer; font-family: var(--display); font-size: 19px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 25px; line-height: 1; color: var(--peel-ink); }
.faq[open] summary::after { content: "−"; }
.faq-body { padding: 0 22px 20px; color: var(--ink-soft); font-size: 16px; }

.pill-row { display: flex; flex-wrap: wrap; gap: 9px; }

/* ==========================================================================
   PEEL PATROL — the whack-a-mole on the home page
   ========================================================================== */
.gamecard {
  position: relative;
  background: linear-gradient(180deg, #FFF3CC 0%, #FFE59B 100%);
  border: 3px solid var(--ink); border-radius: var(--r-xl);
  box-shadow: 0 10px 0 var(--ink);
  padding: 20px 20px 22px;
  overflow: hidden;
}
.gamecard::before {
  /* faint peel stripes, so the card is not a flat yellow rectangle */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16;
  background: repeating-linear-gradient(115deg, transparent 0 26px, #E0B227 26px 28px);
}
.gamecard > * { position: relative; }
.gamecard.shake { animation: shake .34s ease; }
@keyframes shake {
  0%,100% { transform: translateX(0) }
  20% { transform: translateX(-7px) rotate(-.5deg) }
  50% { transform: translateX(6px) rotate(.5deg) }
  80% { transform: translateX(-3px) }
}

.game-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.game-title { font-family: var(--display); font-size: 22px; font-weight: 600; margin: 0; }
.game-tally { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 700; }
.game-tally b { font-family: var(--display); font-size: 26px; line-height: 1; }
.game-tally .bad { color: #9A3A32; }

.game-meter { height: 12px; background: rgba(46,33,22,.16); border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; margin-bottom: 16px; }
.game-meter i { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 999px; transition: width .22s cubic-bezier(.2,1.6,.4,1); }

/* --- the grid ------------------------------------------------------- */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* --- a slot, not an oval ------------------------------------------------
   The bananas were escaping their holes in two directions at once: the sprite
   was taller than the hole so it floated above it, and its art sat off-center
   in the viewBox so the wiggle threw it out the side.

   Both are now structurally impossible. `.slot` is the clipping box and it has
   overflow:hidden, so nothing inside it can ever leave it — the banana rises
   INSIDE the slot and is hidden by the cup front, rather than rising above an
   oval and hoping the numbers line up.
   -------------------------------------------------------------------- */
.hole {
  position: relative; aspect-ratio: 1 / 1.06;
  border: none; background: none; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.slot {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 16px 16px 22px 22px;
  background: linear-gradient(180deg, #3A2B13 0%, #55401C 42%, #6B5127 100%);
  border: 3px solid var(--ink);
  box-shadow: inset 0 10px 14px -6px rgba(0,0,0,.8);
}

.pop {
  position: absolute; left: 50%; bottom: -2%;
  width: 74%; translate: -50% 0;
  transform: translateY(100%);
  transition: transform .2s cubic-bezier(.2,1.7,.4,1);
  will-change: transform;
}
.hole.up .pop      { transform: translateY(-48%); animation: wiggle 1.15s ease-in-out infinite .2s; }
.hole.up:hover .pop{ transform: translateY(-56%); }
.hole.whacked .pop { transform: translateY(30%) scale(1.18, .6); transition-duration: .09s; animation: none; }
@keyframes wiggle { 0%,100% { rotate: -4deg } 50% { rotate: 4deg } }

/* the cup front, drawn over the banana so it emerges from inside it */
/* the cup: a yellow band over a cream body, tapered like a real tub */
.front {
  position: absolute; z-index: 3; left: -1px; right: -1px; bottom: -1px; height: 47%;
  pointer-events: none;
  border-radius: 3px 3px 18px 18px;
  background: linear-gradient(180deg, #F7D046 0 26%, #FFFAEA 26% 100%);
  border: 3px solid var(--ink);
  clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%);
  box-shadow: inset 0 -12px 14px -12px rgba(46,33,22,.4);
}
.front::after {                 /* a wafer stripe, so the cup reads as ours */
  content: ""; position: absolute; left: 20%; right: 20%; top: 58%; height: 3px;
  border-radius: 2px; background: #EADCB8;
}

.nana { display: block; }
.nana .nana-bad { display: none; }
.hole.rotten .nana .nana-good { display: none; }
.hole.rotten .nana .nana-bad { display: block; }

/* the little word that flies out on a hit */
.cry {
  position: absolute; z-index: 4; left: 50%; top: -18%; translate: -50% 0;
  font-family: var(--display); font-weight: 600; font-size: 17px;
  color: var(--ink); background: var(--white);
  border: 2px solid var(--ink); border-radius: 999px; padding: 2px 11px;
  white-space: nowrap; pointer-events: none;
  animation: cry .72s cubic-bezier(.2,1,.3,1) both;
}
.cry.bad { background: #FFD9D5; color: #8A2A20; border-color: #8A2A20; }
@keyframes cry {
  0% { opacity: 0; transform: translateY(6px) scale(.7) }
  25% { opacity: 1; transform: translateY(-6px) scale(1.05) }
  100% { opacity: 0; transform: translateY(-34px) scale(1) }
}

/* banana bits thrown out of the hole */
.burst { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.burst i {
  position: absolute; left: 50%; top: 42%;
  width: 9px; height: 9px; border-radius: 2px 60% 2px 60%;
  background: var(--peel); border: 1.5px solid var(--ink);
  animation: bit .58s cubic-bezier(.2,.8,.4,1) both;
}
@keyframes bit {
  0% { opacity: 1; transform: translate(0,0) rotate(0) scale(.6) }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 26px)) rotate(var(--rot)) scale(1) }
}

/* --- the stage: idle / playing / won / wheel / prize ----------------- */
.stage > [data-panel-game] { display: none; }
.stage[data-state="idle"]    [data-panel-game="idle"],
.stage[data-state="playing"] [data-panel-game="playing"],
.stage[data-state="won"]     [data-panel-game="won"],
.stage[data-state="wheel"]   [data-panel-game="wheel"],
.stage[data-state="prize"]   [data-panel-game="prize"] { display: block; }

.game-intro { text-align: center; }
.game-intro p { font-size: 15.5px; color: #6B5320; margin-bottom: 14px; }

.have-code {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: rgba(255,255,255,.75); border: 2px dashed var(--ink);
  border-radius: var(--r-sm); padding: 9px 13px; font-size: 14px; margin-bottom: 14px;
}
.have-code b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; }

/* --- the wheel ------------------------------------------------------- */
.wheel-wrap { position: relative; width: min(100%, 340px); margin: 0 auto; padding-top: 6px; }
.wheel-svg { width: 100%; display: block; }
.wheel-rotor { transform-box: view-box; transform-origin: 170px 170px; }
.wheel-peg {
  position: absolute; z-index: 4; left: 50%; top: -10px; translate: -50% 0;
  width: 13%; min-width: 34px; max-width: 48px;
  filter: drop-shadow(0 3px 0 rgba(46,33,22,.3));
}
.wheel-peg svg { width: 100%; display: block; overflow: visible; }
.wheel-note { text-align: center; font-size: 15px; color: #6B5320; margin-top: 12px; }

/* --- the prize ------------------------------------------------------- */
.prize { text-align: center; }
.prize-label { font-family: var(--display); font-size: clamp(26px, 4vw, 36px); margin: 6px 0 4px; }
.prize-code {
  display: inline-block; margin: 10px 0 14px; padding: 12px 22px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 24px; font-weight: 700; letter-spacing: .12em;
  background: var(--white); border: 3px dashed var(--ink); border-radius: var(--r-sm);
}
.prize-code:focus-visible { outline: 3px solid var(--peel-deep); outline-offset: 3px; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .pop { transition: none; }
  .hole.up .pop { animation: none; }
  .gamecard.shake { animation: none; }
  .game-meter i { transition: none; }
  .wheel-rotor { transition: none !important; }
}

/* ==========================================================================
   the wholesale sub-nav — the header alone could not say which of the two
   tracks you were on, so the wholesale pages carry their own bar
   ========================================================================== */
.subnav { background: var(--ink); color: #E8DCCB; border-bottom: 3px solid var(--peel); position: sticky; top: 70px; z-index: 55; }
.subnav-in { display: flex; align-items: center; gap: 4px; min-height: 52px; overflow-x: auto; scrollbar-width: none; }
.subnav-in::-webkit-scrollbar { display: none; }
.subnav-tag {
  display: inline-flex; align-items: center; gap: 8px; flex: none; margin-right: 14px;
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--peel);
}
.subnav-tag .ico { width: 19px; height: 19px; }
.subnav a {
  flex: none; padding: 8px 14px; border-radius: 999px; text-decoration: none;
  font-size: 15px; font-weight: 500; color: #E8DCCB; white-space: nowrap;
}
.subnav a:hover { background: rgba(247,208,70,.16); color: #fff; }
.subnav a[aria-current="page"] { background: var(--peel); color: var(--ink); font-weight: 700; }
@media (max-width: 940px) { .subnav { top: 70px; } }

.t-wholesale .nav-wholesale { background: var(--peel); }
@media (max-width: 620px) { .nav-wholesale { display: none; } }

/* ==========================================================================
   neighborhood cards
   ========================================================================== */
.hood {
  background: var(--white); border: 2.5px solid var(--ink); border-radius: var(--r-lg);
  padding: 20px 22px 22px; box-shadow: 0 5px 0 var(--ink);
}
.hood-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--peel); border: 2px solid var(--ink); margin-bottom: 12px; }
.hood .hood-h { font-size: 19px; font-weight: 600; margin-bottom: 2px; }
.hood-count { font-size: 13.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--peel-ink); margin-bottom: 10px; }
.hood-list { margin: 0; padding-left: 18px; font-size: 15px; color: var(--ink-soft); line-height: 1.75; }

/* ==========================================================================
   flavor detail
   ========================================================================== */
.fl-hero { background: color-mix(in srgb, var(--tint) 22%, #FFFBF2); border-bottom: 2.5px solid var(--ink); padding: clamp(28px,5vw,56px) 0 clamp(36px,6vw,64px); }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .fl-hero { background: var(--peel-soft); } }
.fl-hero-in { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px,4vw,56px); align-items: center; }
@media (max-width: 820px) { .fl-hero-in { grid-template-columns: 1fr; } .fl-art { max-width: 240px; } }
.fl-art { background: var(--white); border: 2.5px solid var(--ink); border-radius: var(--r-lg); box-shadow: 0 6px 0 var(--ink); padding: 18px; }
.fl-hero h1 { font-size: clamp(34px,5.5vw,58px); margin-bottom: 10px; }
.backlink { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ink-soft); text-decoration: none; margin-bottom: 14px; }
.backlink:hover { color: var(--ink); }

.sizes { list-style: none; margin: 0; padding: 0; }
.sizes li { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 12px 0; border-bottom: 1px solid var(--wafer-line); }
.sizes li:last-child { border-bottom: 0; }
.sizes b { font-size: 16.5px; }
.sizes em { grid-column: 1 / -1; font-style: normal; font-size: 14px; color: var(--ink-soft); }

/* specificity: `table.tbl` sets min-width:720px and beats a bare `.tbl-mini`,
   so every small table was rendering 720px wide and pushing the page sideways.
   Matching the element too is what actually wins. */
table.tbl.tbl-mini { min-width: 0; width: 100%; }
.tbl-mini th, .tbl-mini td { padding: 10px 14px; }
table.tbl td.small, table.tbl th.small { font-size: 13.5px; color: var(--ink-soft); }

/* ==========================================================================
   footer, rebuilt — the old four equal columns left the brand block orphaned
   ========================================================================== */
.ftr-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 880px) { .ftr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ftr-grid { grid-template-columns: 1fr; } }
.ftr-brand p { font-size: 15px; color: #C9BBA9; max-width: 34ch; margin: 12px 0 14px; }
.ftr-brand .brand-mark { width: 44px; height: 44px; }
.ig { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.ftr-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.ftr-legal a { font-size: 14px; }

/* ==========================================================================
   small shared bits used by the new pages
   ========================================================================== */
.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature-ico { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--peel-soft); border: 2px solid var(--ink); color: var(--peel-ink); }
.feature h3 { font-size: 19px; margin-bottom: 4px; }
.feature p { font-size: 15.5px; color: var(--ink-soft); margin: 0; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,52px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.quote { border-left: 5px solid var(--peel); padding: 6px 0 6px 22px; font-family: var(--display); font-size: clamp(20px,2.6vw,27px); line-height: 1.3; }
.quote cite { display: block; margin-top: 10px; font-family: var(--body); font-size: 15px; font-style: normal; color: var(--ink-soft); font-weight: 600; }

/* the two doors, differentiated — they were identical white boxes before */
.door { position: relative; overflow: hidden; }
.door-retail { background: linear-gradient(170deg, #FFFDF6 0%, #FFF3CC 100%); }
.door-trade  { background: linear-gradient(170deg, #FFFDF6 0%, #EAE2D2 100%); }
.door-ico {
  display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 14px;
  border-radius: 16px; border: 2.5px solid var(--ink); background: var(--peel); color: var(--ink);
}
.door-trade .door-ico { background: var(--ink); color: var(--peel); }
.door-ico .ico { width: 28px; height: 28px; }
.door-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--peel-ink);
}
.door-trade .door-go { color: var(--cocoa); }
.door[aria-pressed="true"] { box-shadow: 0 6px 0 var(--ink), 0 0 0 4px rgba(247,208,70,.5); }
.door:hover .door-go .ico { transform: translateX(4px); transition: transform .15s ease; }

/* hub cards on the wholesale overview */
.card.hub { text-decoration: none; color: inherit; display: block; transition: transform .16s cubic-bezier(.2,1.4,.4,1), box-shadow .16s ease; }
.card.hub:hover { transform: translateY(-4px); box-shadow: 0 11px 0 var(--ink); }
.card.hub h3 { display: flex; align-items: center; gap: 10px; }
.card.hub h3 .ico { width: 20px; height: 20px; color: var(--peel-ink); }
.card.hub:hover h3 .ico { transform: translateX(4px); transition: transform .15s ease; }

/* steps: the generated number needs the heading not to carry its own margin */
.step h3 { font-size: 19px; margin-bottom: 4px; }
.step p { font-size: 16px; color: var(--ink-soft); margin: 0; }

/* marquee separators */
.marquee-in span { opacity: .95; }

.lost-banana { display: grid; place-items: center; width: 108px; height: 108px; margin: 0 auto 10px; border-radius: 50%; background: var(--peel); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); }
.lost-banana .ico { width: 56px; height: 56px; }

/* ==========================================================================
   Grid and flex children default to min-width:auto, which means a track can
   never shrink below its content's min-content size. One wide table inside a
   card was therefore widening its whole column and pushing the page sideways
   at 390px. min-width:0 lets the track shrink and the scroll container inside
   do its job. This is the single most common cause of mobile h-scroll.
   ========================================================================== */
.grid > *, .split > *, .portal > *, .hero-in > *, .fl-hero-in > *, .ftr-grid > * { min-width: 0; }
.tbl-wrap { max-width: 100%; }

/* ==========================================================================
   MOBILE
   Measured at 360 and 390 with touch emulation. No horizontal scroll and no
   type under 12px were found; what was wrong was everything you have to hit
   with a thumb. Footer links were 19px tall stacked 9px apart, which is a
   coin-toss on a phone.
   ========================================================================== */
@media (max-width: 760px) {
  :root { --gut: 16px; }

  body { font-size: 16.5px; }
  section { padding: clamp(40px, 9vw, 64px) 0; }
  .wrap, .wrap-narrow { width: min(100% - 28px, var(--page)); }

  h1 { font-size: clamp(34px, 10vw, 46px); }
  h2 { font-size: clamp(26px, 7.5vw, 34px); }
  h3 { font-size: clamp(19px, 5vw, 22px); }
  .lede { font-size: 17px; }

  /* thumb-sized nav links everywhere they are a list rather than prose */
  .ftr li { margin-bottom: 2px; }
  .ftr li a { display: block; padding: 11px 0; font-size: 15.5px; }
  .ftr-legal { gap: 6px 20px; }
  .ftr-legal a { display: inline-block; padding: 10px 0; }
  .ig { padding: 11px 0; }
  .backlink { padding: 9px 0; }
  .subnav a { padding: 12px 14px; }
  .faq summary { padding: 16px 18px; }

  .btn { padding: 14px 22px; font-size: 16px; }
  .btn-sm { padding: 11px 16px; font-size: 15px; }
  .btn-row { gap: 10px; }
  .btn-row > .btn { flex: 1 1 auto; }

  /* one column for anything that was two or three */
  .g2, .g3, .g4, .split, .doors, .three { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .fact { padding: 16px; }
  .hero { padding-top: 28px; }
  .hero-in { gap: 26px; }
  .card, .card-soft { padding: 18px; }
  .ftr-grid { gap: 8px 24px; }

  /* the game, sized for a phone */
  .gamecard { padding: 14px 14px 16px; border-radius: 26px; }
  .game-title { font-size: 19px; }
  .game-tally { gap: 10px; font-size: 13px; }
  .game-tally b { font-size: 21px; }
  .board { gap: 8px; }
  .slot { border-radius: 12px 12px 16px 16px; border-width: 2.5px; }
  .front { border-width: 2.5px; border-radius: 3px 3px 14px 14px; }
  .cry { font-size: 15px; padding: 2px 9px; }
  .wheel-wrap { width: min(100%, 290px); }
  .prize-code { font-size: 19px; padding: 10px 16px; letter-spacing: .1em; }
  .prize-label { font-size: 28px; }

  /* tables stay scrollable but say so */
  .tbl-wrap { position: relative; }
  table.tbl th, table.tbl td { padding: 11px 13px; font-size: 14.5px; }

  /* the portal and account side nav becomes a scrolling strip */
  .side nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
  .side nav::-webkit-scrollbar { display: none; }
  .side nav button { flex: none; padding: 11px 14px; }
  .cartbar { padding: 13px 15px; gap: 10px; }
  .cartbar b { font-size: 22px; }

  .marquee-in { font-size: 17px; gap: 26px; }
  .steps { gap: 14px; }
  .step { padding-left: 52px; }
  .step::before { width: 38px; height: 38px; font-size: 18px; }
}

@media (max-width: 420px) {
  .wrap, .wrap-narrow { width: min(100% - 22px, var(--page)); }
  .gamecard { padding: 12px 11px 14px; }
  .board { gap: 7px; }
  .game-head { gap: 8px; }
  .sizes li { grid-template-columns: 1fr; }
  .fl-art { padding: 12px; }
}

/* ==========================================================================
   Footer, back to the original four equal columns.
   The rebuilt 1.4fr brand-block version is gone at the client's request; the
   .ftr-brand / .ftr-grid rules above are retained only because .ig still uses
   the icon alignment.
   ========================================================================== */
/* The footer sets its own gap, so the shared .g4 formula — which subtracts
   three --gut values — computes a track minimum that is too wide and drops it
   to three columns. Four equal columns, stated outright; this is the layout
   the client approved. */
.ftr .g4 {
  gap: 30px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) { .ftr .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ftr .g4 { grid-template-columns: 1fr; } }
.ftr-blurb { font-size: 15px; color: #C9BBA9; max-width: 30ch; }
.ftr .foot-h { margin-bottom: 14px; }
.ftr li .ig { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }

/* the game, in its own band rather than in the hero */
.band-ink .gamecard, .band-peel .gamecard { max-width: 520px; margin-inline: auto; }
@media (max-width: 860px) {
  .band-ink .split > *:first-child, .band-peel .split > *:first-child { text-align: center; }
  .band-ink .split .eyebrow, .band-peel .split .eyebrow { justify-content: center; }
  .band-ink .split .lede, .band-peel .split .lede { margin-inline: auto; }
}

/* Text inside the dark band — .lede and .hint default to a dark ink that
   disappears on cocoa.
   Scoped to those two classes on purpose: a blanket `.band-ink p` also reached
   into the game card sitting inside the band and washed its instructions out to
   gray-on-yellow. The card is a light island and has to keep its own colors. */
.band-ink .lede, .band-ink .hint { color: #CDBFAD; }
.band-ink .hint a { color: var(--peel); }
.band-ink .gamecard { box-shadow: 0 10px 0 #17100A, 0 0 0 3px var(--ink); }
.band-ink .gamecard, .band-ink .gamecard .game-title, .band-ink .gamecard .game-tally { color: var(--ink); }
.band-ink .gamecard .game-tally .bad { color: #9A3A32; }
.band-ink .gamecard .prize-label, .band-ink .gamecard h2, .band-ink .gamecard h3 { color: var(--ink); }

/* ==========================================================================
   the shop
   ========================================================================== */
.splitter { display: grid; gap: 12px; }
.srow {
  display: flex; align-items: center; gap: 14px;
  background: var(--white); border: 2px solid var(--wafer-line); border-radius: var(--r); padding: 12px 16px;
}
.scup {
  width: 34px; height: 40px; flex: none; border-radius: 4px 4px 12px 12px;
  background: color-mix(in srgb, var(--tint) 55%, #FFFDF6);
  border: 2px solid var(--ink); position: relative;
}
.scup::before { content: ""; position: absolute; left: -2px; right: -2px; top: -2px; height: 9px; background: var(--peel); border: 2px solid var(--ink); border-radius: 3px 3px 0 0; }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .scup { background: var(--peel-soft); } }
.sname { flex: 1; font-weight: 600; font-size: 16.5px; }

.cart {
  background: var(--white); border: 2.5px solid var(--ink); border-radius: var(--r-lg);
  padding: 22px; box-shadow: 0 6px 0 var(--ink); position: sticky; top: 92px;
}
@media (max-width: 900px) { .cart { position: static; } }
.cart h2 { font-size: 22px; margin-bottom: 14px; }
.cart-lines { margin: 0 0 14px; }
.cart-lines .cl { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--wafer-line); font-size: 16px; }
.cart-lines .cl dt, .cart-lines .cl dd { margin: 0; }
.cart-lines .cl.sub { border-bottom: 0; padding: 3px 0; font-size: 14.5px; color: var(--ink-soft); }
.cart-empty { color: var(--ink-faint); font-size: 15px; padding: 8px 0 14px; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 0 16px; border-top: 2px solid var(--ink); margin-top: 6px; }
.cart-total span { font-size: 13.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.cart-total b { font-family: var(--display); font-size: 30px; font-weight: 600; }

/* ==========================================================================
   order tracking
   ========================================================================== */
.track-steps { list-style: none; margin: 18px 0 0; padding: 0; }
.track-steps li { position: relative; padding: 0 0 22px 34px; }
.track-steps li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
  border-radius: 50%; border: 2.5px solid var(--ink); background: var(--white);
}
.track-steps li::after { content: ""; position: absolute; left: 8px; top: 22px; bottom: 0; width: 2.5px; background: var(--wafer-line); }
.track-steps li:last-child { padding-bottom: 0; }
.track-steps li:last-child::after { display: none; }
.track-steps li.done::before { background: var(--ink); }
.track-steps li.now::before { background: var(--peel); box-shadow: 0 0 0 5px rgba(247,208,70,.35); }
.track-steps b { display: block; font-size: 16.5px; }
.track-steps span { font-size: 14.5px; color: var(--ink-soft); }

.price-lg { font-family: var(--display); font-size: 30px; font-weight: 600; margin-top: 6px; }
.price-lg small { font-family: var(--body); font-size: 15px; font-weight: 500; color: var(--ink-soft); }

/* the wholesale cup slider */
.cups-range { width: 100%; margin: 6px 0 2px; accent-color: var(--peel-deep); height: 28px; }
.range-ends { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--ink-soft); }
.range-ends output { font-family: var(--display); font-size: 26px; font-weight: 600; color: var(--ink); }

/* ==========================================================================
   HEADER — refined
   The mark is dark and square now, so it needs its own breathing room rather
   than the round yellow badge's. On a phone the seven-item nav cannot live in
   the bar at all, so the bar carries the mark, one primary action and the
   menu, and everything else drops into the panel.
   ========================================================================== */
.hdr-in { min-height: 74px; gap: 14px; }
.brand { gap: 12px; }
.brand-mark { width: 42px; height: 42px; border-radius: 10px; }
.brand-name { font-size: 26px; letter-spacing: -.025em; }

.nav a { font-size: 15.5px; padding: 9px 13px; }

@media (max-width: 1040px) {
  .nav a { padding: 9px 10px; font-size: 15px; }
}

@media (max-width: 940px) {
  .hdr-in { min-height: 66px; gap: 10px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-name { font-size: 23px; }
  /* the panel hangs off the real header height rather than a hard-coded 70px,
     which was leaving a gap on any phone where the bar was not exactly 70 */
  .nav { inset: 66px 0 auto; padding: 10px 18px 20px; }
  .nav a { padding: 14px 14px; font-size: 17px; border-radius: 12px; }
  .nav a + a { border-top: 1px solid var(--wafer-line); border-radius: 12px; }
  .nav-tools .btn { padding: 9px 15px; font-size: 14.5px; }
  .subnav { top: 66px; }
}

@media (max-width: 420px) {
  .brand-name { font-size: 21px; }
  .brand-mark { width: 34px; height: 34px; }
  .hdr-in { gap: 8px; }
  .nav-tools .btn { padding: 9px 13px; font-size: 14px; }
}


/* ==========================================================================
   punch card
   Ten dots, the tenth drawn differently because it is the free one. A row of
   identical dots makes people count; making the prize look like the prize
   means they do not have to.
   ========================================================================== */
.punch { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px }
.punch .p {
  width:30px; height:30px; border-radius:50%;
  border:2px dashed var(--wafer-line); background:var(--wafer);
}
.punch .p.on {
  border:2px solid var(--peel-ink); background:var(--peel);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.10);
  position:relative;
}
.punch .p.on::after {
  content:""; position:absolute; inset:7px 8px;
  border-radius:50% 50% 46% 46% / 60% 60% 40% 40%;
  background:var(--peel-ink); opacity:.55;
}
.punch .p.free {
  border-style:solid; border-color:var(--peel-ink);
  background:repeating-linear-gradient(45deg,var(--peel) 0 5px,#fff 5px 10px);
}
.punch .p.free.on { background:var(--peel-ink) }
.punch .p.free.on::after { background:var(--peel); opacity:1 }

/* the account's compact tracker — same steps, less vertical rhythm */
.track-steps.track-mini { margin-top:14px }
.track-steps.track-mini li { padding-bottom:14px }
.track-steps.track-mini b { font-size:15.5px }
.track-steps.track-mini span { font-size:13.5px }

/* portal spec sheets draw the real cup rather than a character */
.spec-art {
  width:76px; margin:0 auto 2px; padding:8px; border-radius:14px;
  background:color-mix(in srgb, var(--tint) 18%, #fff);
}
.spec-art svg { width:100%; height:auto; display:block }


/* A default checkbox renders at 13px, which is under any reasonable target
   size even when the label around it is generous. */
input[type="checkbox"], input[type="radio"] {
  width: 24px; height: 24px; flex: none;   /* WCAG 2.5.8 AA is 24x24 */
  accent-color: var(--peel-deep); cursor: pointer;
}


/* ==========================================================================
   hero — the two cups and a banana
   Laid out as overlapping absolute children of a fixed-ratio box so the group
   scales as one image. Percentages, not pixels: the same arrangement has to
   hold at 390px and at 1440px.
   ========================================================================== */
.hero-cups { position: relative; width: 100%; padding-bottom: 72%; }
.hero-cups > span { position: absolute; display: block; }
.hero-cups svg, .hero-cups img { width: 100%; height: auto; display: block; }

.hc-front { left: 22%; bottom: 0;   width: 62%; z-index: 2; }
.hc-back  { left: 0;   bottom: 12%; width: 47%; z-index: 1; opacity: .96; }
/* His banana is a much denser drawing than the crescent it replaces, so it
   carries at a smaller size and wants to overlap the cups rather than float
   beside them — a still life, not three objects in a row. */
.hc-nana  { right: -2%; bottom: 2%; width: 40%; z-index: 3;
            filter: drop-shadow(0 10px 14px rgba(67,39,26,.18)); }

@media (prefers-reduced-motion: no-preference) {
  .hc-back { animation: hc-drift 7s ease-in-out infinite; }
  .hc-nana { animation: hc-drift 6s ease-in-out infinite .8s; }
}
@keyframes hc-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(-2deg); }
}


/* ==========================================================================
   the shop — three steps and a summary that adds up
   ========================================================================== */
.shop-head { padding-bottom: 0; }
.shop-head h1 { font-size: clamp(36px, 6vw, 60px); }
.shop-wrap { padding-top: 30px; }

.shop {
  display: grid; grid-template-columns: minmax(0, 1fr) 370px;
  gap: 30px; align-items: start;
}
.shop-steps { min-width: 0; display: grid; gap: 8px; }

.pickset { border: 0; padding: 0; margin: 0 0 26px; min-width: 0; }
.pickset legend {
  display: flex; align-items: center; gap: 11px; padding: 0; margin-bottom: 16px;
  font-family: var(--display); font-size: 23px; font-weight: 600;
}
.stepno {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--peel); border: 2px solid var(--ink);
  font-family: var(--body); font-size: 15px; font-weight: 700;
}
/* Steps two and three are dimmed until a size is chosen, because until then
   there is nothing to split and nowhere to send. */
#step-split:not(.open), #step-where:not(.open) { opacity: .45; pointer-events: none; }
#step-split:not(.open) .stepno, #step-where:not(.open) .stepno { background: var(--wafer); }

.picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 560px) {
  .picks { grid-template-columns: 1fr; gap: 20px; }
  /* stacked, a flag hanging off the top overlaps the card above it */
  .pick-flag { top: -14px; right: 14px; }
}
.pick {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 20px 20px 18px; cursor: pointer; text-align: left;
  background: var(--white); border: 2.5px solid var(--ink); border-radius: var(--r-lg);
  box-shadow: 0 5px 0 var(--ink); min-width: 0;
  transition: transform .14s cubic-bezier(.2,1.4,.4,1), box-shadow .14s ease, background .14s ease;
}
.pick:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--ink); }
.pick:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.pick[aria-checked="true"] { background: var(--peel); }
.pick-flag {
  position: absolute; top: -12px; right: 12px;
  background: var(--ink); color: var(--peel); font-size: 13px; font-weight: 700;
  padding: 4px 11px; border-radius: 999px; letter-spacing: .01em;
}
.pick-n { font-family: var(--display); font-size: 40px; font-weight: 600; line-height: 1; }
.pick-l { font-size: 13.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.pick-p { font-family: var(--display); font-size: 23px; font-weight: 600; margin-top: 12px; }
.pick-per { font-size: 13.5px; color: var(--ink-soft); }
.pick[aria-checked="true"] .pick-l,
.pick[aria-checked="true"] .pick-per,
.pick[aria-checked="true"] .pick-note { color: #7A5D0B; }
.pick-note {
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--wafer-line);
  font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); align-self: stretch;
}
.pick[aria-checked="true"] .pick-note { border-top-color: rgba(122,93,11,.28); }

.qtyline {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding: 14px 18px;
  background: var(--wafer); border: 2px solid var(--wafer-line); border-radius: var(--r);
}
.qtyline-l { font-weight: 600; }
.qtyline-n { color: var(--ink-soft); font-size: 15px; margin-left: auto; }

.stepper {
  display: inline-flex; align-items: center; flex: none;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--white); overflow: hidden;
}
.stepper button {
  width: 42px; height: 42px; flex: none; border: 0; background: transparent;
  font-size: 21px; line-height: 1; cursor: pointer; color: var(--ink);
}
.stepper button:hover { background: var(--peel); }
.stepper input {
  width: 52px; height: 42px; border: 0; text-align: center; background: transparent;
  font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--ink);
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.splitter { display: grid; gap: 12px; }
.srow {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  background: var(--white); border: 2px solid var(--wafer-line); border-radius: var(--r); padding: 12px 16px;
}
.sart {
  width: 52px; flex: none; padding: 5px; border-radius: 11px;
  background: color-mix(in srgb, var(--tint) 20%, #fff);
}
.sart svg { width: 100%; height: auto; display: block; }
.sbody { min-width: 0; flex: 1; }
.sbody b { display: block; font-size: 17px; }
.sbody small { display: block; font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; }
@media (max-width: 520px) { .sbody small { display: none; } }

.opt { font-weight: 400; font-size: 13.5px; color: var(--ink-faint); }
.hp {
  /* A honeypot: hidden from people, still there for the bots that fill in every
     field. left:-9999px works but extends the layout box 10,000px sideways, and
     clip-path alone leaves the INPUT its full layout box — which is why a tap
     target audit kept reporting a 246x33 control nobody can see. Zero the
     child as well as the wrapper. */
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.hp input { width: 1px; height: 1px; padding: 0; border: 0; }
.hint-warn { color: #9A5B14; font-weight: 600; }

/* ---------------------------------------------------------- the summary */
.cart {
  position: sticky; top: 92px;
  background: var(--white); border: 2.5px solid var(--ink); border-radius: var(--r-lg);
  box-shadow: 0 6px 0 var(--ink); padding: 22px; min-width: 0;
}
.cart h2 { font-size: 23px; margin-bottom: 4px; }
.cart-art { display: flex; gap: 4px; justify-content: center; margin: 6px 0 2px; min-height: 4px; }
.cart-art .ca { width: 62px; }
.cart-art svg { width: 100%; height: auto; display: block; }

.cart-lines { margin: 10px 0 0; }
.cl { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--wafer-line); }
.cl dt { font-weight: 600; }
.cl dd { margin: 0; font-variant-numeric: tabular-nums; }
.cl.sub dt, .cl.sub dd { font-weight: 400; font-size: 14.5px; color: var(--ink-soft); }
.cl.save dt, .cl.save dd { color: #2F6A3A; font-weight: 600; }
.cart-empty { padding: 16px 0; color: var(--ink-soft); font-size: 15px; }

.codebox { margin: 16px 0 4px; }
.codebox-row { display: flex; gap: 8px; align-items: stretch; }
/* min-width:0 or the input's default intrinsic width pushes Apply onto its
   own line inside a 370px column. */
.codebox-row .input { flex: 1 1 auto; min-width: 0; }
.codebox-row .btn { flex: 0 0 auto; white-space: nowrap; }
.code-msg { font-size: 14px; margin: 8px 0 0; font-weight: 600; }
.code-msg.good { color: #2F6A3A; }
.code-msg.bad { color: #A3322B; }

.cart-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 14px 0 16px; padding-top: 14px; border-top: 2px solid var(--ink);
}
.cart-total span { font-size: 13.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.cart-total b { font-family: var(--display); font-size: 32px; font-weight: 600; }
.cart-foot { margin-top: 12px; }
.btn-lg { padding: 16px 26px; font-size: 17px; }

.assure h2 { font-size: 19px; margin: 12px 0 6px; }
.assure p { color: var(--ink-soft); }

@media (max-width: 980px) {
  .shop { grid-template-columns: 1fr; }
  /* On a phone the summary belongs at the end of the form, not glued to the
     top of a column that no longer exists. */
  .cart { position: static; }
}


/* ==========================================================================
   the wholesale builder
   Same two-column shape as the retail shop on purpose. The previous version
   put the total in a sticky bottom bar that floated over the split rows and,
   at 390px, over the cup count itself — measured at 17px of overlap on a
   laptop and 98px on a phone. A column cannot overlap what it sits beside.
   ========================================================================== */
.wsbuild { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; align-items: start; }
.wsbuild-main { min-width: 0; }
.wsbuild .kpis { margin-bottom: 26px; }
/* auto-fit at minmax(160px) leaves the fourth card alone on a second row once
   the builder's left column narrows. Four, then two, then two — never three
   and a widow. */
.wsbuild .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wsbuild .kpi { padding: 14px 14px 13px; }
.wsbuild .kpi b { font-size: 25px; }
.wsbuild .kpi span { font-size: 12.5px; letter-spacing: .06em; }
@media (max-width: 1320px) { .wsbuild .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .wsbuild .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .wsbuild .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wscart h3 { font-size: 21px; margin-bottom: 10px; }
.wscart .meter { margin: 14px 0 2px; }
.wscart .meter small { display: block; margin-top: 7px; font-size: 13.5px; color: var(--ink-soft); }

.quickcups { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.quickcups button {
  min-height: 40px; padding: 0 16px; cursor: pointer;
  background: var(--white); border: 2px solid var(--wafer-line); border-radius: 999px;
  font-family: var(--body); font-size: 15px; font-weight: 600; color: var(--ink);
}
.quickcups button:hover { border-color: var(--ink); }
.quickcups button[aria-pressed="true"] { background: var(--peel); border-color: var(--ink); }

.checkline {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 6px;
  padding: 14px 16px; background: var(--wafer); border: 2px solid var(--wafer-line); border-radius: var(--r);
}
.checkline b { display: block; font-size: 16px; }
.checkline small { display: block; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; margin-top: 2px; }

@media (max-width: 1080px) {
  .wsbuild { grid-template-columns: 1fr; }
  .wscart { position: static; }
}


/* ==========================================================================
   Banana Mania
   ========================================================================== */
/* .gamecard caps itself at 520px for the hero, and that rule sits later in
   this file — so a bare `.mania` selector lost the tie. Same specificity plus
   the shared class wins it back. */
.gamecard.mania { max-width: 1040px; margin-inline: auto; }
/* The stage owns the height: aspect-ratio for shape, min-height so the idle
   and win panels always have somewhere to sit. The canvas then fills whatever
   box that produces and the draw scales to cover it, so nothing spills out of
   the stage onto the card the way the first version did. */
.mania-stage {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 900 / 506; background: #FFFBF2;
}
/* A min-height alongside aspect-ratio lets the browser resolve WIDTH from the
   height — the stage came out 782px wide inside a 520px card. Below the point
   where the ratio still gives usable height, drop the ratio and set the height
   outright instead. */
@media (max-width: 760px) {
  .mania-stage { aspect-ratio: auto; height: 460px; }
}
.mania-canvas {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  cursor: crosshair; touch-action: none;
}
/* While a panel is up the canvas is scenery, not a control. */
.mania-stage:not([data-state="play"]) .mania-canvas { cursor: default; }

.mania-panel {
  position: absolute; inset: 0; z-index: 2; overflow: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 26px;
  background: rgba(21, 18, 16, .86);
  backdrop-filter: blur(3px);
}
/* .gamecard sets a dark ink color for the card; inside the overlay that is
   dark-on-dark, so the panel restates every color it uses rather than
   inheriting one that was chosen for a yellow background. */
.mania-panel, .mania-panel p, .mania-panel li, .mania-panel .howto { color: #E4D9C7; }
.mania-panel h3 { color: var(--peel) !important; }
.mania-panel .hint { color: #BDB1A2; }
.mania-panel b { color: var(--peel); }
/* Which panel is up is decided by setState() toggling the hidden attribute,
   not by a [data-state] selector here. A global `[hidden]{display:none
   !important}` outranks any display rule this file could write, so a CSS-only
   switch would set data-state correctly and still show nothing — which is
   exactly what it did the first time. */

.mania-panel h3 { font-family: var(--display); font-size: clamp(24px, 3.4vw, 34px); color: var(--peel); margin: 0; }
.mania-panel p { color: #E4D9C7; margin: 0; max-width: 46ch; }
.mania-panel .hint { color: #BDB1A2; }
.mania-panel .eyebrow { color: var(--peel); }
.big-num { font-family: var(--display); font-size: 56px; color: var(--peel); line-height: 1; }

.howto {
  text-align: left; margin: 4px 0 2px; padding-left: 22px;
  color: #E4D9C7; font-size: 16px; line-height: 1.85; max-width: 40ch;
}
.howto b { color: var(--peel); }

.mania .game-tally { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.combo { transition: color .2s ease, transform .2s ease; display: inline-block; }
.combo.hot { color: var(--peel); transform: scale(1.18); }

.lives { display: inline-flex; gap: 6px; }
.life {
  width: 15px; height: 21px; border-radius: 50% 50% 44% 44% / 62% 62% 38% 38%;
  background: var(--peel); border: 2px solid var(--ink); transform: rotate(-14deg);
}
.life.gone { background: transparent; opacity: .34; }
.band-ink .life { border-color: #F3E6CE; }

.wheel-panel { background: rgba(21, 18, 16, .93); }
.game-fallback { font-size: 14px; color: var(--ink-soft); margin-top: 14px; text-align: center; }
.band-ink .game-fallback { color: #BDB1A2; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; }
.tight-list { margin: 10px 0 0; padding-left: 20px; color: var(--ink-soft); line-height: 1.85; }

@media (prefers-reduced-motion: reduce) { .combo.hot { transform: none; } }


/* A table that scrolls sideways on a phone needs to look like it scrolls.
   Without the fade the last visible column reads as a column that got cut off,
   which is indistinguishable from a layout bug. The gradient is painted on the
   wrapper and pinned with background-attachment:local, so it appears only while
   there is more to the right and disappears at the end of the scroll. */
.tbl-wrap, .scrollx {
  background-image: linear-gradient(to right, transparent, transparent),
                    linear-gradient(to right, rgba(46,33,22,.13), transparent);
  background-position: right center, right center;
  background-repeat: no-repeat;
  background-size: 100% 100%, 26px 100%;
  background-attachment: local, scroll;
}
@media (min-width: 860px) { .tbl-wrap, .scrollx { background-image: none; } }


/* ==========================================================================
   rhythm
   The spacing that used to be typed into 116 inline margin-top declarations,
   in twelve different values. Components own their own spacing now, so a card
   looks like a card without every page restating it.
   ========================================================================== */
:root {
  --s1: 10px;
  --s2: 14px;
  --s3: 20px;
  --s4: 26px;
  --s5: 34px;
  --s6: 46px;
}

/* --- prose ------------------------------------------------------------- */
.lede + .btn-row,
p + .btn-row,
h1 + .btn-row,
h2 + .btn-row,
h3 + .btn-row { margin-top: var(--s4); }
.btn-row { margin-top: var(--s4); }
.btn-row:first-child { margin-top: 0; }

.note { margin-top: var(--s4); }
.note:first-child, .card .note:first-child { margin-top: 0; }
p + .note, ul + .note, table + .note, .tbl-wrap + .note { margin-top: var(--s4); }

.lede + .grid, .lede + .tbl-wrap, .lede + .splitter,
p + .grid, p + .tbl-wrap, h2 + .grid, h2 + .tbl-wrap { margin-top: var(--s4); }

.tbl-wrap { margin-top: var(--s3); }
.tbl-wrap:first-child { margin-top: 0; }

/* --- inside a card ----------------------------------------------------- */
/* Every feature card in the site is icon, heading, copy, optional price. It
   should not take three inline styles per card to say that. */
.feature-ico + h2,
.feature-ico + h3,
.hood-ico + h2 { margin-top: var(--s2); }

.card > p { color: var(--ink-soft); }
.card > p.price,
.card > p strong,
.card > p b { color: var(--ink); }

.price { margin-top: var(--s1); }

.card > h2, .card > h3 { margin-bottom: .35em; }
.card > *:last-child { margin-bottom: 0; }

/* --- sections ---------------------------------------------------------- */
/* A page's opening block runs into the one below it rather than stacking two
   full section paddings. */
.sec-lead { padding-bottom: 0; }
/* A lead-in and the block under it are one idea, so they do not get two full
   section paddings between them — that was ~104px of nothing on every page
   that opened with a headline. */
.sec-lead + section,
.sec-lead + .band,
.sec-lead + .band-ink,
.sec-lead + .band-peel { padding-top: clamp(34px, 4.2vw, 54px); }
.sec-tight { padding-top: var(--s5); }
.sec-lead .lede { margin-bottom: 0; }

/* --- small helpers, each earning its place ----------------------------- */
.muted { color: var(--ink-soft); }
.mt-block { margin-top: var(--s5); }
.center { text-align: center; }
.center .lede, .center .eyebrow { margin-inline: auto; }
.center .btn-row, .btn-row.center-row { justify-content: center; }

/* An inline link inside running prose. Thirteen pages set the color and the
   weight by hand; underline-offset is the part they all forgot. */
.link {
  color: var(--peel-ink); font-weight: 600;
  text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--peel-deep) 55%, transparent);
}
.link:hover { text-decoration-color: var(--peel-deep); }

/* form rows: two fields side by side, sharing the label rhythm */
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 20px; }


/* A line that qualifies the block above it — delivery limits, a pricing
   caveat, who a figure applies to. Twelve of these were floating under a card
   grid as a stray sentence with a hand-typed margin. A hairline and a real
   measure make it a footnote instead of an afterthought. */
.footnote {
  max-width: 78ch; margin: var(--s4) 0 0;
  padding-top: var(--s2); border-top: 1px solid var(--wafer-line);
  font-size: 14.5px; line-height: 1.65; color: var(--ink-soft);
}
.footnote:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.band .footnote, .band-peel .footnote { border-top-color: rgba(46,33,22,.14); }


/* ==========================================================================
   reveal on scroll
   Inert until js/reveal.js adds .has-reveal to <html>. If that file never
   loads, none of this applies and the page renders complete — which is the
   only acceptable failure mode for an effect.
   ========================================================================== */
.has-reveal [data-reveal=""] {
  opacity: 0;
  transform: translateY(6px);
}
.has-reveal [data-reveal="in"] {
  opacity: 1;
  transform: none;
  transition:
    opacity .55s cubic-bezier(.22, .61, .36, 1) calc(var(--reveal-i, 0) * 55ms),
    transform .55s cubic-bezier(.22, .61, .36, 1) calc(var(--reveal-i, 0) * 55ms);
}
/* Above the fold on load: present, and never transitioned. A hero that fades
   in after the paint looks broken on a slow connection. */
.has-reveal [data-reveal="now"] { opacity: 1; transform: none; }

/* The game canvases, the splash and the sticky summary are their own moving
   things; a reveal on top of them fights the animation already there. */
.has-reveal-skip,
.gamecard, .mania-stage, #splash, .cart, .wscart, .hero-art { }
@media (prefers-reduced-motion: reduce) {
  .has-reveal [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* Print renders the whole document without ever scrolling it, so anything
   waiting for an intersection is still at opacity 0 — a printed page would
   come out blank below the fold. Same reasoning for any tool that rasterises
   a full page in one pass. */
@media print {
  .has-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------- authorising an order */
/* The signature block on the wholesale portal. Set apart from the fields above
   it on purpose: this is the one part of the form that is a commitment rather
   than a preference, and it should not look like another optional note. */
.signbox { border-width: 2px; }
.signterms {
  margin: 0 0 16px; padding: 12px 14px;
  background: #FBF6EA; border-left: 3px solid var(--peel); border-radius: 8px;
  font-size: 14.5px; line-height: 1.55; color: var(--ink);
}
.signbox .checkline { margin-top: 14px; }
.signbox .checkline small { display: block; color: var(--ink-soft); font-size: 13px; margin-top: 2px; }