/* ==========================================================================
   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 colour 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 ------------------------------------------------------- */
  --cream:      #FFFBF2;   /* page — vanilla custard */
  --cream-2:    #FDF4E3;   /* alternating bands */
  --wafer:      #F3E5C6;   /* vanilla wafer, for cards that need to sit up */
  --wafer-line: #E6D3AC;   /* hairlines on cream */
  --white:      #FFFFFF;

  /* --- ink ----------------------------------------------------------- */
  --ink:        #2E2116;   /* cocoa, not black */
  --ink-soft:   #6B5946;   /* 5.4:1 on cream */
  --ink-faint:  #8A7761;   /* 4.6:1 on cream — the floor for body text here */

  /* --- the banana ---------------------------------------------------- */
  --peel:       #F7D046;   /* banana yellow, the accent */
  --peel-deep:  #E0B227;   /* pressed/active, and text-on-cream when needed */
  --peel-soft:  #FDF0C4;   /* tint fills */
  --peel-ink:   #7A5D0B;   /* yellow that is legible as TEXT on cream */
  --stem:       #5C8A4A;   /* the green at the top of the banana */
  --berry:      #D9544D;   /* errors, sale flags */
  --berry-soft: #FDECEA;
  --good:       #3F7D4E;
  --good-soft:  #E8F3EA;
  --cocoa:      #4A3A2E;

  /* --- 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 colour 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;
  background: var(--cream);
  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(56px, 8vw, 104px) 0; }
.band { background: var(--cream-2); }
.band-ink { background: var(--ink); color: var(--cream); }
.band-ink h1, .band-ink h2, .band-ink h3 { color: var(--white); }
.band-peel { background: var(--peel-soft); }

.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: 14px; }

/* ==========================================================================
   header + nav
   ========================================================================== */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 251, 242, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 2px solid var(--ink);
}
.hdr-in { display: flex; align-items: center; gap: 18px; min-height: 70px; }

.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; margin-right: auto; }
/* The mark is the client's logo.png — a raster, not an inline SVG. It carries
   its own black tile, so the rounding belongs here. */
.brand-mark { width: 38px; height: 38px; flex: none; border-radius: 9px; display: block; }
.brand-name {
  font-family: var(--display); font-weight: 600; font-size: 25px;
  letter-spacing: -.02em; color: var(--ink); white-space: nowrap;
}
.brand-name b { color: var(--peel-ink); font-weight: 600; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 9px 14px; border-radius: 999px; text-decoration: none;
  font-size: 15px; font-weight: 500; color: var(--ink-soft); white-space: nowrap;
}
.nav a:hover { background: var(--peel-soft); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--peel); color: var(--ink); font-weight: 600; }

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

.burger {
  display: none; width: 46px; height: 42px; border: 2px solid var(--ink);
  border-radius: var(--r-sm); background: var(--white); cursor: pointer;
  align-items: center; justify-content: center; flex: none;
}
.burger span { display: block; width: 20px; height: 2.5px; background: var(--ink); border-radius: 2px; position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2.5px;
  background: var(--ink); 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; } }

.hero h1 span { color: var(--peel-ink); display: inline-block; }
.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); }

/* --- flavour 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
   flavour 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;
}
.marquee { background: var(--ink); color: var(--peel); border-block: 2px solid var(--ink); overflow: hidden; padding: 12px 0; }
.marquee-in { display: flex; gap: 40px; white-space: nowrap; font-family: var(--display); font-size: 20px; animation: slide 26s linear infinite; }
@keyframes slide { to { transform: translateX(-50%); } }
@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-centre
   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; } }

/* ==========================================================================
   neighbourhood 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; }

/* ==========================================================================
   flavour 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
   grey-on-yellow. The card is a light island and has to keep its own colours. */
.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 { 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; }
.hc-nana  { right: 0;  bottom: 8%;  width: 30%; z-index: 3; }

@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 colour for the card; inside the overlay that is
   dark-on-dark, so the panel restates every colour 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 colour 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; }