/* Create Competition -- "The Create Cup", New York.

   Visual system lifted from v6 of the Create marketing site (Brand-led), which
   is itself built to the Wonder Create Style Guide (May 2026):
   - Feta page, Gooper Regular heads and Volte body, all in text primary
   - Ube CTAs with Feta type, 8px corners
   - a Shallot ticker in plum caps, Fabrikat for eyebrows
   - Gradient 1 (Ube > Pitaya > Spicy Mayo > Shallot) as a process grid of
     stepped bars, never mixed with Gradient 2
   - the 12x12 Feta-line photo reveal on photography
   Content structure follows create.wonder.com/waitlist. */

@font-face { font-family: 'Volte'; src: url('/fonts/Volte/WEB/fonts/Volte-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Volte'; src: url('/fonts/Volte/WEB/fonts/Volte-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Volte'; src: url('/fonts/Volte/WEB/fonts/Volte-Semibold.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'Gooper'; src: url('/fonts/Gooper/webfonts/Gooper7-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Gooper'; src: url('/fonts/Gooper/webfonts/Gooper7-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Fabrikat'; src: url('/fonts/Fabrikat/Fabrikat Normal/Web/Fabrikat-Normal-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  /* primary palette */
  --ube: #B803B8; --pesto: #00462A; --feta: #FAF5EE; --shallot: #FAC0FF;
  /* gradient palette -- row 1 and row 2 never mix inside one gradient */
  --pitaya: #EF00AF; --spicy-mayo: #FF7B61;
  --celery: #A1D745; --mint-jelly: #00D882; --ginger: #FFE780; --cucumber: #CCF4CD;
  --grad-1: linear-gradient(180deg, var(--ube) 0%, var(--pitaya) 30%, var(--spicy-mayo) 75%, var(--shallot) 93%);
  --grad-1-flip: linear-gradient(0deg, var(--ube) 0%, var(--pitaya) 30%, var(--spicy-mayo) 75%, var(--shallot) 93%);
  /* v6's resolved inks */
  /* text primary (v6's --ink) carries every head, label and link -- the
     earlier deep plums (#2C0040, #5E0066) are retired */
  --h-ink: rgba(24, 22, 22, .96);
  --plum: rgba(24, 22, 22, .96);
  --plum-hover: rgba(24, 22, 22, .96);
  --ube-deep: #8E028E; --ube-soft: #F6E4F6;
  --ink: rgba(24, 22, 22, .96);
  --ink-2: rgba(46, 42, 43, .84);
  --soft: rgba(35, 31, 32, .68);
  --line: rgba(24, 22, 22, .14);
  --line-strong: rgba(24, 22, 22, .28);
  --critical: #B3261E;

  --font-body: 'Volte', system-ui, sans-serif;
  --font-heading: 'Gooper', Georgia, serif;
  --font-eyebrow: 'Fabrikat', 'Volte', system-ui, sans-serif;

  /* v6's headline scale (Figma "Prj-Create - create.Wonder.com" 57:247) */
  /* v6's headline scale, Figma "Prj-Create - create.Wonder.com" 60:866:
     Gooper H1 80 / H2 62 / H3 48 / H4 36 / H5 24 (hero, section and
     sub-section heads); Volte Medium H6 42 / H7 36 / H8 24 / H9 18 for the
     working titles -- cards, names, steps */
  --h1: clamp(52px, 5.55vw, 80px);  --h1-lh: 1.04;
  --h2: clamp(42px, 4.3vw, 62px);   --h2-lh: 1.06;
  --h3: clamp(34px, 3.35vw, 48px);  --h3-lh: 1.1;
  --h4: clamp(28px, 2.5vw, 36px);   --h4-lh: 1.15;
  --h5: 24px;                       --h5-lh: 1.25;
  --vh6: clamp(32px, 2.95vw, 42px); --vh7: clamp(28px, 2.5vw, 36px); --vh8: 24px; --vh9: 18px;

  --max: 1320px; --r: 24px;
  --ease: cubic-bezier(.22, .78, .3, 1);
  --ease-in: cubic-bezier(.2, .8, .2, 1);
  --header-h: 76px; --strip-h: 40px;
}

/* ===== resets ===== */
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { background: var(--feta); font-family: var(--font-body); color: var(--ink);
  font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
input, textarea, select { font: inherit; color: var(--ink); }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: calc(var(--max) + 64px); margin: 0 auto; padding: 0 32px; }

/* ===== type ===== */
.h1, .h2, .h3, .h4, .h5 { font-family: var(--font-heading); font-weight: 400; color: var(--h-ink); }
.h1 { font-size: var(--h1); line-height: var(--h1-lh); letter-spacing: -.01em; }
.h2 { font-size: var(--h2); line-height: var(--h2-lh); letter-spacing: -.01em; }
.h3 { font-size: var(--h3); line-height: var(--h3-lh); }
.h4 { font-size: var(--h4); line-height: var(--h4-lh); }
.h5 { font-size: var(--h5); line-height: var(--h5-lh); }
/* Volte Medium working titles */
.vt { font-family: var(--font-body); font-weight: 500; letter-spacing: -.01em; color: var(--h-ink); }
.ln { display: block; }
.sub { margin-top: 20px; max-width: 560px; font-size: 19px; line-height: 28px; color: var(--ink-2); }
.caps { font-family: var(--font-eyebrow); font-weight: 700; font-size: 12px; line-height: 16px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--plum); }
.center { text-align: center; }
.center .sub { margin-left: auto; margin-right: auto; }

/* ===== buttons ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px;
  border-radius: 8px; background: var(--ube); color: var(--feta); white-space: nowrap;
  font-family: var(--font-eyebrow); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .3s ease, transform .25s var(--ease); }
.btn:hover { background: var(--ube-deep); }
.btn svg { transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
/* every CTA is Ube: filled, or Ube type on a Ube outline. On Ube the type is
   Feta, never white, per the style guide's colour rules */
.btn.ghost { background: transparent; color: var(--ube); box-shadow: inset 0 0 0 1.5px var(--ube); }
.btn.ghost:hover { background: var(--ube-soft); }
.btn.sm { height: 40px; padding: 0 18px; font-family: var(--font-body); font-weight: 500; font-size: 15px;
  letter-spacing: 0; text-transform: none; }
/* no CTA taller than 50px */
.btn.lg { height: 48px; padding: 0 26px; font-size: 14px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.link { color: var(--ube); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.link:hover { text-decoration-thickness: 2px; }

/* ===== motion: v6's one blur-rise ===== */
[data-in] { opacity: 0; transform: translateY(14px); filter: blur(6px);
  transition: opacity .9s var(--ease-in), transform .9s var(--ease-in), filter .9s var(--ease-in);
  transition-delay: calc(var(--d, 0) * 90ms); }
[data-in].in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { [data-in] { opacity: 1; transform: none; filter: none; transition: none; } }

/* ===== ticker: the contest, running along the top ===== */
.strip { position: relative; z-index: 41; height: var(--strip-h); display: flex; align-items: center; overflow: hidden; white-space: nowrap;
  background: var(--shallot); color: var(--plum);
  font-family: var(--font-eyebrow); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.strip-track { display: inline-flex; animation: run 60s linear infinite; }
.strip-track > span { display: inline-flex; align-items: center; gap: 8px; padding: 0 28px; }
.spark { display: inline-block; width: 11px; height: 11px; flex: none; background: url('img/ai-sparkle.svg') center / contain no-repeat; }
@keyframes run { to { transform: translateX(-50%); } }
.strip:hover .strip-track { animation-play-state: paused; }

/* ===== header: links left, wordmark centred, CTA right ===== */
.header { position: sticky; top: 0; z-index: 40; background: var(--feta); transition: box-shadow .3s; }
.header.stuck { box-shadow: 0 1px 0 var(--line); }
.header-in { height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav { display: flex; gap: 28px; }
/* v6's header links: deep plum, no underline at rest; on hover the colour
   fades to Ube and a Gradient 1 underline draws in from the left */
.nav a, .nav-link { position: relative; font-weight: 500; font-size: 15px; color: var(--h-ink); transition: color .35s ease; }
.nav a::after, .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ube) 0%, var(--pitaya) 30%, var(--spicy-mayo) 75%, var(--shallot) 93%);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:hover, .nav a:focus-visible, .nav-link:hover, .nav-link:focus-visible { color: var(--ube); }
.nav a:hover::after, .nav a:focus-visible::after, .nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }
.logo img { height: 24px; width: auto; }
.actions { display: flex; justify-content: flex-end; align-items: center; gap: 20px; }

/* ===== hero: v6's pink spread full bleed, the waitlist's copy centred on its open middle ===== */
.hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  min-height: max(640px, calc(100svh - var(--header-h) - var(--strip-h))); background: #F4B7BD; }
.hero > .hero-photo { position: absolute; inset: 0; }
.hero-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-in { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 24px; padding-bottom: 120px; }
.hero-in .sub { max-width: 560px; margin-left: auto; margin-right: auto; color: var(--h-ink); }
.hero-ctas { justify-content: center; }
.hero-note { color: rgba(24, 22, 22, .72); }
.hero .btn.ghost { background: rgba(250, 245, 238, .6); }
.hero .btn.ghost:hover { background: rgba(250, 245, 238, .9); }
.hero > .roundel { right: 48px; top: 48px; }
/* the process grid: equal widths, stepped heights -- "the restaurant being built" */
.stairs { position: absolute; left: 0; top: 0; display: flex; height: 92px; pointer-events: none; }
.stairs i { width: 56px; height: 0; background: var(--grad-1); animation: stair-grow 1.1s var(--ease) forwards; animation-delay: calc(var(--i) * 70ms + .1s); }
.stairs i:nth-child(even) { background: var(--grad-1-flip); }
@keyframes stair-grow { to { height: var(--h); } }

.cup-banner { display: inline-flex; align-items: center; gap: 12px; padding: 6px 16px 6px 6px; border-radius: 10px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 28px; transition: box-shadow .25s; }
.cup-banner:hover { box-shadow: inset 0 0 0 1.5px var(--plum); }
.cup-banner b { padding: 5px 10px; border-radius: 6px; background: var(--ube); color: var(--feta);
  font-family: var(--font-eyebrow); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.cup-banner span { font-weight: 500; font-size: 15px; color: var(--h-ink); }
.cup-banner svg { color: var(--plum); transition: transform .25s var(--ease); }
.cup-banner:hover svg { transform: translateX(3px); }
.hero .h1 { font-size: var(--h1); line-height: var(--h1-lh); }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 36px; }
.hero-note { margin-top: 20px; font-size: 14px; }


/* the concepts carousel, below the hero: the stage left, the copy right */
.concepts { padding: 120px 0; }
.concepts-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.concepts-nav { display: flex; align-items: center; gap: 10px; margin-top: 32px; }
.btn.sq { width: 48px; padding: 0; }
.concepts-count { margin-left: 8px; font-family: var(--font-eyebrow); font-weight: 700; font-size: 12px; letter-spacing: .08em; color: var(--plum); font-variant-numeric: tabular-nums; }
.hero-stage { position: relative; aspect-ratio: 5 / 4; border-radius: var(--r); overflow: hidden; background: #e7c0e4; }
.hero-stage .bowl { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.hero-stage .bowl.on { opacity: 1; }
.hero-cap { position: absolute; left: 20px; bottom: 20px; z-index: 4; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px; border-radius: 10px; background: rgba(250, 245, 238, .94); backdrop-filter: blur(8px);
  font-size: 14px; line-height: 18px; color: var(--h-ink); box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
.hero-cap i { width: 28px; height: 28px; border-radius: 6px; background: var(--cap, var(--ube)); flex: none; }
.hero-cap b { font-weight: 600; }
.hero-cap em { font-style: normal; color: var(--soft); }
.hero-dots { position: absolute; right: 20px; bottom: 30px; z-index: 4; display: flex; gap: 6px; }
.hero-dots button { width: 8px; height: 8px; border-radius: 2px; background: rgba(250, 245, 238, .6); transition: width .4s var(--ease), background .3s; }
.hero-dots button.on { width: 24px; background: var(--feta); }
/* the Create Cup roundel, spinning like v6's hero sticker */
.roundel { position: absolute; z-index: 5; right: -28px; top: -36px; width: 156px; height: 156px; }
.roundel-ring { position: absolute; inset: 0; animation: spin 22s linear infinite; }
.roundel-ring text { font-family: var(--font-eyebrow); font-weight: 700; font-size: 10.5px; letter-spacing: .16em; fill: var(--plum); }
.roundel-disc { position: absolute; inset: 0; border-radius: 50%; background: var(--ginger); box-shadow: 0 10px 30px rgba(24, 22, 22, .25); }
.roundel-disc::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 1.5px dashed rgba(24, 22, 22, .45); }
.roundel .cup-mark { position: absolute; left: 50%; top: 50%; width: 54px; transform: translate(-50%, -52%) rotate(-8deg); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== the photography treatment (style guide p.30-32) =====
   Square cells, thin Feta lines. The wave: each cell's lines and a soft Feta
   flash fade in and out while its blur clears; app.js staggers the cells
   corner to corner (--dl) so it reads as one gentle sweep, once. */
.pg { position: relative; overflow: hidden; }
.pg-cells { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(var(--cols, 12), 1fr); align-content: start; pointer-events: none; }
.pg-cells i { position: relative; aspect-ratio: 1; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: pg-clear 1.7s cubic-bezier(.45, 0, .25, 1) var(--dl) both paused; }
.pg-cells i::before, .pg-cells i::after { content: ''; position: absolute; inset: 0; opacity: 0;
  animation: 1.7s cubic-bezier(.45, 0, .25, 1) var(--dl) both paused; }
.pg-cells i::before { background: var(--feta); animation-name: pg-flash; }
.pg-cells i::after { border-right: 1.5px solid var(--feta); border-bottom: 1.5px solid var(--feta); animation-name: pg-line; }
.pg.pg-run .pg-cells i, .pg.pg-run .pg-cells i::before, .pg.pg-run .pg-cells i::after { animation-play-state: running; }
@keyframes pg-clear { 0%, 20% { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } 100% { backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } }
/* the lines and the flash move in step with the blur: in while it holds (0-20%),
   then all three ease out together on the same curve */
@keyframes pg-line { 0% { opacity: 0; } 20% { opacity: .95; } 100% { opacity: 0; } }
@keyframes pg-flash { 0% { opacity: 0; } 20% { opacity: .2; } 100% { opacity: 0; } }
.pg.pg-done .pg-cells { display: none; }

/* ===== the bowl + its sticker =====
   The photographs are the image library's Lid=Yes shots with the generic
   template sticker taken off. Each bowl's lid box (from Figma, in the
   2400x1920 frame) is passed as --l/--t/--s, and the band is drawn across
   the lid and clipped to its circle, the way the real stickers are printed. */
.bowl { position: relative; aspect-ratio: 5 / 4; overflow: hidden; }
.bowl > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lid { position: absolute; left: calc(var(--l) / 2400 * 100%); top: calc(var(--t) / 1920 * 100%);
  width: calc(var(--s) / 2400 * 100%); aspect-ratio: 1; clip-path: circle(44.6% at 50.4% 50.4%); container-type: inline-size; }
.band { position: absolute; left: -2%; right: -2%; top: 39%; height: 21.5%; transform: rotate(1.1deg);
  display: grid; grid-template-columns: 1fr auto auto 1fr; align-items: center; gap: 3cqw; padding: 0 15cqw;
  box-shadow: 0 .6cqw 1.4cqw rgba(0, 0, 0, .18); }
/* a soft sheen, so it reads as printed and stuck under the light */
.band::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(170deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .06)); }
.b-logo { grid-column: 2; width: 12cqw; height: 12cqw; display: grid; place-items: center; flex: none; }
.b-logo svg { width: 100%; height: 100%; }
.b-copy { grid-column: 3; display: flex; flex-direction: column; gap: .5cqw; min-width: 0; max-width: 46cqw; }
.b-copy small { font-size: 2.1cqw; line-height: 1.1; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; opacity: .85; }
.b-copy b { font-size: calc(4.6cqw * var(--fit, 1)); line-height: 1.02; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-copy span { font-size: calc(2.5cqw * var(--fit, 1)); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-qr { grid-column: 4; justify-self: start; width: 9.5cqw; height: 9.5cqw; padding: .7cqw; background: #fff; border-radius: .8cqw; }
.b-qr svg { width: 100%; height: 100%; }

/* NYC sticker styles. Creator brands, not Wonder's -- so these are free to use
   their own palettes and type, the way a real creator's would. */
.t-diner { background: #1C4E9D; color: #fff; }
.t-diner::before { content: ''; position: absolute; left: 0; right: 0; top: 7%; bottom: 7%; pointer-events: none;
  border-top: 2.4cqw solid transparent; border-bottom: 2.4cqw solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 11h4V1h12v8h-6V5h2v2h2V3H6v8h18' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 2.4cqw 0 round; }
.t-diner .b-copy b { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; }
.t-diner .b-copy small { font-family: Georgia, serif; letter-spacing: .1em; }
.t-subway { background: #121212; color: #fff; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.t-subway::before { content: ''; position: absolute; left: 0; right: 0; top: 11%; height: .5cqw; background: #fff; }
.t-subway .b-copy b { font-weight: 700; letter-spacing: -.01em; }
.t-cart { background: #FFC72C; color: #1B3F8F; font-family: 'Arial Black', 'Helvetica Neue', sans-serif; }
.t-cart::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 15%;
  background: repeating-linear-gradient(90deg, #D52B1E 0 4cqw, #fff 4cqw 8cqw); }
.t-cart .b-copy b { font-weight: 900; text-transform: uppercase; letter-spacing: .01em; }
.t-cart .b-copy small, .t-cart .b-copy span { font-family: 'Helvetica Neue', Helvetica, sans-serif; font-weight: 700; }
.t-cab { background: #F7C600; color: #111; font-family: Futura, 'Trebuchet MS', sans-serif; }
.t-cab::before, .t-cab::after { content: ''; position: absolute; left: 0; right: 0; height: 13%;
  background: conic-gradient(#111 25%, #fff 0 50%, #111 0 75%, #fff 0) 0 0 / 2.6cqw 2.6cqw; }
.t-cab::before { top: 0; } .t-cab::after { bottom: 0; top: auto; }
.t-cab .b-copy b { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.t-neon { background: #15101B; color: #FF4FB0; font-family: 'Avenir Next', 'Helvetica Neue', sans-serif; }
.t-neon .b-copy b { color: #FFD6EE; font-weight: 600; text-shadow: 0 0 .6cqw #FF2D9B, 0 0 1.8cqw #FF2D9B, 0 0 3.6cqw #FF2D9B; }
.t-neon .b-copy small { color: #6CF2FF; text-shadow: 0 0 1cqw #13D8FF; }
.t-neon .b-copy span { color: #fff; opacity: .8; }
.t-picado { background: #EE4E8A; color: #fff; font-family: 'Avenir Next Condensed', 'Arial Narrow', sans-serif; }
.t-picado::before, .t-picado::after { content: ''; position: absolute; left: 0; right: 0; height: 2.2cqw;
  background: radial-gradient(circle at 50% 0, #FFC72C 1.1cqw, transparent 1.15cqw) 0 0 / 2.4cqw 2.4cqw repeat-x; }
.t-picado::before { top: 4%; } .t-picado::after { bottom: 4%; transform: scaleY(-1); }
.t-picado .b-copy b { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.t-market { background: #D2B07D; color: #1F4D2B; font-family: 'American Typewriter', 'Courier New', serif; }
.t-market::before { content: ''; position: absolute; inset: 9% 0; border-top: .4cqw dashed rgba(31, 77, 43, .55); border-bottom: .4cqw dashed rgba(31, 77, 43, .55); }
.t-market .b-copy b { font-weight: 700; }

/* ===== sections ===== */
.sec { padding: 128px 0; }
.sec-head { margin-bottom: 56px; }
.sec-head.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.sec-head.split .sub { margin-top: 0; justify-self: end; }
/* beside a paragraph the head steps down to v6's H3 Subsection */
.eyebrow { margin-bottom: 18px; }

/* The fold line from the waitlist ("With Create, you don't need real estate,
   staff, or capital...") on Spicy Mayo, set big */
.fold-line { background: var(--spicy-mayo); padding: 88px 0; }
.fold-line p { font-family: var(--font-heading); font-weight: 400; font-size: var(--h4); line-height: 1.12; color: var(--feta);
  max-width: 1080px; margin: 0 auto; text-align: center; }
.fold-line .w { display: inline-block; opacity: .22; transition: opacity .5s ease; transition-delay: calc(var(--w) * 45ms); }
.fold-line.in .w { opacity: 1; }
.fold-line em { font-style: normal; color: var(--h-ink); }

/* 1-2-3: v6's coloured step panels, each beside its photograph */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.step { display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: var(--c); color: var(--t, var(--h-ink)); }
.step-art { position: relative; aspect-ratio: 5 / 4; overflow: hidden; }
.step-art > img, .step-art > .bowl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.step-body { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.step-n { font-family: var(--font-heading); font-weight: 300; font-size: 64px; line-height: 1; color: var(--t, var(--h-ink)); }
.step h3 { margin-top: 28px; font-family: var(--font-heading); font-weight: 400; font-size: var(--h5); line-height: 1.12; color: var(--t, var(--h-ink)); }
.step p { margin-top: 14px; padding-top: 14px; border-top: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 25%, transparent);
  font-size: 16px; line-height: 24px; color: var(--t, var(--ink)); }
.step:nth-child(1) { --c: var(--ginger); }
.step:nth-child(2) { --c: var(--pesto); --t: var(--feta); }
.step:nth-child(3) { --c: var(--shallot); }
.step:nth-child(2) .step-n, .step:nth-child(2) h3 { color: var(--shallot); }

.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-top: 72px; }
.pillar { padding: 28px 32px 0 0; }
.pillar + .pillar { padding-left: 32px; border-left: 1px solid var(--line); }
.pillar b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--h-ink); }
.pillar p { margin-top: 8px; color: var(--ink-2); }

/* NYC, on a lid: the sticker showcase -- a drifting row of bowls */
.lids { background: #fff; overflow: hidden; }
.lids-row { display: flex; gap: 20px; width: max-content; animation: run 70s linear infinite; padding: 8px 0; }
.lids-row:hover { animation-play-state: paused; }
.lid-card { width: 380px; flex: none; }
.lid-card .bowl { border-radius: 18px; }
.lid-card figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 14px 4px 0; }
.lid-card figcaption b { font-weight: 600; color: var(--h-ink); }
.lid-card figcaption span { color: var(--soft); font-size: 14px; white-space: nowrap; }
.lids-foot { margin-top: 40px; display: flex; justify-content: center; }

/* the competition */
.cup { background: var(--feta); }
/* the four figures */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--h-ink); border-bottom: 1px solid var(--line-strong); }
.stats > div { padding: 24px 24px 28px 0; }
.stats > div + div { padding-left: 24px; border-left: 1px solid var(--line-strong); }
.stats dt { font-family: var(--font-eyebrow); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--plum); }
.stats dd { margin: 10px 0 0; font-family: var(--font-heading); font-weight: 400; font-size: var(--h3); line-height: 1; color: var(--h-ink); }

.cup-block { margin-top: 112px; }
.block-head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; align-items: end; margin-bottom: 36px; }
.block-head p { font-size: 18px; line-height: 27px; color: var(--ink-2); justify-self: end; max-width: 440px; }

/* categories: three coloured cards, each with a sample concept's bowl */
.cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cat { display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: var(--c); }
.cat-art .bowl { border-radius: 0; }
.cat-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.cat-body .caps { color: var(--h-ink); opacity: .7; }
.cat-body h4 { margin-top: 10px; font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--h-ink); }
.cat-body p:not(.caps) { margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--ink); flex: 1; }
.cat-eg { margin-top: 18px; align-self: flex-start; padding: 5px 10px; border-radius: 6px; background: rgba(255, 255, 255, .6); font-size: 13px; font-weight: 500; color: var(--h-ink); }

/* prizes: three tiers, first in Ube */
.prizes { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.prize { position: relative; border-radius: var(--r); padding: 32px; overflow: hidden; background: var(--c, #fff); color: var(--h-ink); min-height: 340px; }
.prize.first { --c: var(--ube); color: var(--feta); }
.prize.second { --c: var(--shallot); }
.prize.third { --c: var(--ginger); }
.prize .caps { color: inherit; opacity: .85; }
.prize .amt { display: block; margin-top: 22px; font-family: var(--font-heading); font-weight: 400; font-size: clamp(64px, 6.4vw, 104px); line-height: .95; color: inherit; }
.prize .amt-l { margin-top: 6px; font-size: 17px; font-weight: 500; }
.prize ul { margin-top: 28px; display: grid; gap: 10px; position: relative; z-index: 1; max-width: 300px; }
.prize li { display: flex; gap: 10px; font-size: 16px; line-height: 22px; }
.prize li::before { content: ''; flex: none; width: 13px; height: 13px; margin-top: 5px; background: url('img/ai-sparkle.svg') center / contain no-repeat; }
.prize.first li::before { filter: brightness(0) invert(88%) sepia(30%) saturate(900%) hue-rotate(250deg); }
.prize .cup-big { position: absolute; right: 28px; bottom: -22px; width: 150px; transform: rotate(8deg); filter: drop-shadow(0 20px 30px rgba(24, 22, 22, .35)); }

.cup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; margin-top: 96px; }
.ruled { border-top: 1px solid var(--h-ink); }
.ruled li { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line-strong); }
.ruled li .caps { padding-top: 5px; }
.ruled li b { font-family: var(--font-heading); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--h-ink); display: block; }
.ruled li p { margin-top: 4px; color: var(--ink-2); font-size: 15px; }
.ruled li.now .caps { color: var(--ube); }
.ruled li.now b::after { content: 'Open now'; margin-left: 10px; vertical-align: 4px; padding: 3px 9px; border-radius: 4px; background: var(--ube); color: var(--feta);
  font-family: var(--font-eyebrow); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.judging { display: grid; gap: 14px; }
.judge { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; padding: 20px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.judge i { font-style: normal; font-family: var(--font-heading); font-size: 30px; line-height: 1; color: var(--ube); padding-top: 2px; }
.judge b { font-weight: 600; color: var(--h-ink); font-size: 17px; }
.judge p { margin-top: 2px; font-size: 15px; color: var(--ink-2); }
.judge .bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--feta); overflow: hidden; }
.judge .bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ube) 0%, var(--pitaya) 30%, var(--spicy-mayo) 75%, var(--shallot) 93%); border-radius: inherit;
  transition: width 1.2s var(--ease) .2s; }
.judging.in .judge .bar span { width: var(--p); }
.judge-intro { margin: 12px 0 24px; color: var(--ink-2); }
.judge .bar span { transition-duration: 1.4s; }
.apply li .caps { white-space: nowrap; }
.bonus, .bonus-box { margin-top: 20px; padding: 24px; border-radius: 16px; background: var(--pesto); color: var(--feta); }
.bonus-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.bonus-head .caps { color: var(--shallot); }
.bonus-head b { font-family: var(--font-heading); font-weight: 400; font-size: 26px; color: var(--feta); }
.bonus ul { margin-top: 16px; display: grid; gap: 14px; }
.bonus li { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: start; }
.bonus li i { font-style: normal; font-family: var(--font-heading); font-size: 26px; line-height: 1; color: var(--shallot); }
.bonus li i small { display: block; margin-top: 4px; font-family: var(--font-body); font-size: 12px; color: rgba(250, 245, 238, .7); }
.bonus li b { font-weight: 600; font-size: 16px; }
.bonus li p { margin-top: 2px; font-size: 14px; line-height: 20px; color: rgba(250, 245, 238, .78); }
.bonus-fine { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(250, 245, 238, .18); font-size: 13px; line-height: 19px; color: rgba(250, 245, 238, .7); }
.who { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 10px; }
.who span { padding: 10px 16px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; color: var(--h-ink); }
.who span.y::before { content: '✓'; margin-right: 8px; color: var(--ube); font-weight: 700; }

/* join: the email, the waitlist, then on to the entry */
.join { position: relative; overflow: hidden; background: var(--pesto); color: var(--feta); padding: 120px 0 128px; }
.join .h2 { color: var(--feta); }
.join .sub { color: rgba(250, 245, 238, .78); }
.join .caps { color: var(--shallot); }
.join-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.join-form { background: var(--feta); border-radius: var(--r); padding: 36px; color: var(--ink); }
.join-form h3 { font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1.15; color: var(--h-ink); }
.join-form > p { margin-top: 8px; color: var(--ink-2); }
.join-steps { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.join-steps span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--h-ink);
  padding: 5px 11px 5px 6px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.join-steps span i { width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700;
  background: var(--shallot); color: var(--plum); }
.email-row { margin-top: 24px; display: flex; gap: 10px; }
.email-row .field { flex: 1; }
.join-fine { margin-top: 14px; font-size: 13px; line-height: 18px; color: var(--soft); }
.join-done { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 14px 16px; border-radius: 12px; background: var(--cucumber); color: var(--pesto); font-weight: 500; }
.join-done svg { flex: none; }

/* footer */
/* the full grid above the footer: the bars rise left to right and finish level */
.foot-steps { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; height: 80px; }
.foot-steps i { height: 100%; background: var(--grad-1); transform: scaleY(0); transform-origin: bottom;
  transition: transform .9s cubic-bezier(.19, 1, .22, 1) var(--dl); }
.foot-steps i:nth-child(even) { background: var(--grad-1-flip); }
.foot-steps.in i { transform: none; }
/* on the landing page the join section's plum carries on under the bars */
body[data-page='home'] .foot-steps { background: var(--pesto); }
body[data-page='home'] .join { padding-bottom: 96px; }
@media (prefers-reduced-motion: reduce) { .foot-steps i { transform: none; transition: none; } }
.foot { padding: 72px 0 64px; background: var(--feta); }
/* v6's footer: the W at 112px, two link columns, the copyright right-aligned -- four even columns */
.fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }
.fmark img { width: 112px; height: 112px; display: block; }
.fcol h4 { font-family: var(--font-body); font-weight: 600; font-size: 19.5px; color: var(--h-ink); margin-bottom: 16px; }
.fcol ul { display: flex; flex-direction: column; gap: 6px; }
.fcol a { position: relative; display: inline-block; z-index: 0; font-size: 16.8px; line-height: 1.5; font-weight: 500;
  padding: 2px 8px; margin: 0 -8px; color: var(--plum); }
.fcol a::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 8px;
  background: linear-gradient(90deg, rgba(184, 3, 184, .22), rgba(239, 0, 175, .22) 30%, rgba(255, 123, 97, .22) 75%, rgba(250, 192, 255, .3) 93%);
  transform: scaleY(0); transition: transform .35s var(--ease); }
.fcol a:hover::before, .fcol a:focus-visible::before { transform: scaleY(1); }
.fbase { font-size: 15.6px; color: var(--ink-2); text-align: right; padding-top: 2px; }

/* ===== form atoms (the waitlist's and the entry's) ===== */
.field { display: block; position: relative; }
.field > span.lbl { display: block; margin-bottom: 8px; font-family: var(--font-eyebrow); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--h-ink); }
.field > span.lbl em { font-style: normal; color: var(--soft); font-family: var(--font-body); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 13px; margin-left: 4px; }
.input, .textarea, .select { width: 100%; height: 52px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line-strong); background: #fff;
  font-size: 16px; color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s; }
.textarea { height: auto; min-height: 140px; padding: 14px 16px; line-height: 24px; resize: vertical; }
.select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23181616' stroke-width='1.6'/%3E%3C/svg%3E") right 16px center no-repeat; padding-right: 40px; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--ube); box-shadow: 0 0 0 3px rgba(184, 3, 184, .16); }
.input::placeholder, .textarea::placeholder { color: rgba(35, 31, 32, .42); }
.field.err .input, .field.err .textarea, .field.err .select, .chips.err { border-color: var(--critical); box-shadow: 0 0 0 3px rgba(179, 38, 30, .1); }
.err-msg { display: none; margin-top: 6px; font-size: 13px; color: var(--critical); }
.err .err-msg, .chips.err + .err-msg, .check.err .err-msg { display: block; }
.count { position: absolute; right: 12px; bottom: 10px; font-size: 12px; color: var(--soft); pointer-events: none; }
.count.under { color: var(--plum); }
.prefix { position: relative; }
.prefix > b { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-weight: 500; color: var(--soft); pointer-events: none; }
.prefix .input { padding-left: 32px; }

/* ===== toast ===== */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 100; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 12px 18px; border-radius: 10px; background: var(--pesto); color: var(--feta); font-size: 15px; transition: opacity .3s, transform .3s var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ===================================================================
   The entry page
   =================================================================== */
.e-top { padding: 48px 0 40px; }
.progress { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.progress span { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; color: var(--soft); }
.progress span i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700;
  box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.progress span.done { color: var(--h-ink); }
.progress span.done i { background: var(--pesto); color: var(--feta); box-shadow: none; }
.progress span.cur { color: var(--h-ink); }
.progress span.cur i { background: var(--ube); color: var(--feta); box-shadow: none; }
.progress hr { width: 36px; border: 0; height: 1px; background: var(--line-strong); }
.welcome { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 10px 16px 10px 12px; border-radius: 10px;
  background: var(--cucumber); color: var(--pesto); font-weight: 500; font-size: 15px; }
.welcome b { font-weight: 600; }

.e-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; padding-bottom: 120px; }
.e-form { display: grid; gap: 24px; }
.fs { border: 0; padding: 36px; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.fs-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; }
.fs-head .n { font-family: var(--font-heading); font-weight: 300; font-size: 40px; line-height: 1; color: var(--ube); }
.fs-head h2 { font-family: var(--font-heading); font-weight: 400; font-size: 32px; line-height: 1.1; color: var(--h-ink); }
.fs-head p { margin-top: 6px; color: var(--ink-2); font-size: 15px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fs .field + .field, .fs .row + .field, .fs .field + .row, .fs .row + .row, .fs .chips-wrap + .field, .fs .field + .chips-wrap, .fs .row + .chips-wrap, .fs .chips-wrap + .row, .fs .chips-wrap + .chips-wrap { margin-top: 20px; }
.row > .field + .field { margin-top: 0; }
.row-3 { grid-template-columns: 2fr 1fr 1fr; }
.textarea.sm { min-height: 96px; }
.count.over { color: var(--critical); font-weight: 600; }
.textarea { padding-bottom: 32px; }
.opt { font-style: normal; font-size: 16px; color: var(--soft); font-family: var(--font-body); }
.dishes { margin-top: 28px; }
.dishes-lbl { display: block; margin-bottom: 12px; font-family: var(--font-eyebrow); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--h-ink); }
.dish { padding: 20px; border-radius: 14px; background: var(--feta); box-shadow: inset 0 0 0 1px var(--line); }
.dish + .dish { margin-top: 12px; }
.dish-n { display: block; margin-bottom: 12px; font-family: var(--font-heading); font-size: 20px; color: var(--ube); }
.dish .field + .field { margin-top: 14px; }
.cat-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-radius: 16px; }
.cat-picks.err { box-shadow: 0 0 0 3px rgba(179, 38, 30, .25); }
.cat-picks.err + .err-msg { display: block; }
.cat-pick { position: relative; cursor: pointer; }
.cat-pick input { position: absolute; opacity: 0; pointer-events: none; }
.cat-pick > span { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 18px 18px 52px; border-radius: 14px; background: var(--feta);
  box-shadow: inset 0 0 0 1px var(--line-strong); transition: background .2s, box-shadow .2s; }
.cat-pick > span::before { content: ''; position: absolute; left: 18px; top: 20px; width: 20px; height: 20px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.cat-pick b { font-family: var(--font-heading); font-weight: 400; font-size: 21px; line-height: 1.15; color: var(--h-ink); }
.cat-pick small { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.cat-pick:hover > span { box-shadow: inset 0 0 0 1.5px var(--h-ink); }
.cat-pick input:checked + span { background: var(--c); box-shadow: inset 0 0 0 2px var(--h-ink); }
.cat-pick input:checked + span::before { background: var(--ube) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.4 3.4L11 1.6' fill='none' stroke='%23FAF5EE' stroke-width='2'/%3E%3C/svg%3E") center no-repeat; box-shadow: none; }
.cat-pick input:focus-visible + span { outline: 2px solid var(--ube); outline-offset: 2px; }
.cat-pick.entered { cursor: not-allowed; opacity: .55; }
.bonus-box { margin-top: 24px; }
.bonus-box .lbl, .bonus-box .field > span.lbl { color: var(--shallot); }
.bonus-box .lbl em { color: rgba(250, 245, 238, .6); }
.bonus-box .field, .bonus-box .row { margin-top: 16px; }
.bonus-box .drop { background: rgba(250, 245, 238, .06); border-color: rgba(250, 245, 238, .3); }
.bonus-box .drop b { color: var(--feta); }
.bonus-box .drop small { color: rgba(250, 245, 238, .7); }
.bonus-box .drop:hover { background: rgba(250, 245, 238, .12); border-color: var(--shallot); }
.bonus-box .chips-wrap { margin-top: 16px; }
.bonus-mini { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.bonus-mini li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(250, 245, 238, .08); font-size: 14px; }
.bonus-mini li i { font-style: normal; font-weight: 600; color: var(--shallot); }
.preview-ctrl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.preview-ctrl label span { display: block; margin-bottom: 6px; font-family: var(--font-eyebrow); font-weight: 700; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--shallot); }
.preview-ctrl .select { height: 42px; font-size: 14px; }
.nudge { margin-top: 32px; }
.done-left { margin-top: 14px; font-size: 14px; color: var(--soft); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; border-radius: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 8px; background: var(--feta);
  box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: 500; font-size: 15px; color: var(--h-ink); cursor: pointer; transition: background .2s, box-shadow .2s, color .2s; }
.chip span:hover { box-shadow: inset 0 0 0 1.5px var(--h-ink); }
.chip input:checked + span { background: var(--h-ink); color: var(--feta); box-shadow: none; }
.chip input:focus-visible + span { outline: 2px solid var(--ube); outline-offset: 2px; }
.chip span i { width: 14px; height: 14px; border-radius: 3px; background: var(--sw); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.drop { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 14px; border: 1.5px dashed var(--line-strong); background: var(--feta); cursor: pointer; transition: border-color .2s, background .2s; width: 100%; }
.drop:hover { border-color: var(--ube); background: #fff; }
.drop i { width: 44px; height: 44px; border-radius: 12px; background: var(--shallot); display: grid; place-items: center; flex: none; color: var(--plum); }
.drop b { display: block; font-weight: 600; color: var(--h-ink); }
.drop small { color: var(--soft); font-size: 14px; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; cursor: pointer; }
.check + .check { margin-top: 16px; }
.check input { appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 6px; border: 1.5px solid var(--line-strong); background: #fff; cursor: pointer;
  display: grid; place-items: center; transition: background .2s, border-color .2s; }
.check input:checked { background: var(--ube); border-color: var(--ube); }
.check input:checked::after { content: ''; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.check input:focus-visible { outline: 2px solid var(--ube); outline-offset: 2px; }
.check.err input { border-color: var(--critical); }
.check .err-msg { grid-column: 2; margin-top: 0; }
.check p { color: var(--ink-2); font-size: 15px; line-height: 22px; }
.submit-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 8px 4px 0; }
.submit-row p { font-size: 14px; color: var(--soft); max-width: 380px; }

.e-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 20px;
  /* taller than the screen once a rule is open, so it scrolls on its own rather than hiding its foot */
  max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: var(--r); }
/* the preview crops the bowl's backdrop, top and bottom, so the lid stays big */
.preview .crop { position: relative; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 16px; }
.preview .crop .bowl { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.preview { border-radius: var(--r); background: var(--pesto); color: var(--feta); padding: 20px; }
.preview-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 14px; }
.preview-head .caps { color: var(--shallot); }
.preview-head span { font-size: 13px; color: rgba(250, 245, 238, .7); }
.preview .bowl > img { transition: opacity .35s; }
.preview-note { padding: 14px 4px 2px; font-size: 14px; line-height: 20px; color: rgba(250, 245, 238, .75); }
.rules { border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: 8px 24px; }
.rules > .caps { display: block; padding: 18px 0 6px; color: var(--h-ink); }
.q + .q { border-top: 1px solid var(--line); }
.q-h { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0;
  font-family: var(--font-heading); font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--h-ink); }
.pm { position: relative; width: 28px; height: 28px; flex: none; border-radius: 6px; background: var(--shallot); transition: background .3s, transform .4s var(--ease); }
.pm::before, .pm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--h-ink); transform: translate(-50%, -50%); transition: transform .4s var(--ease); }
.pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.q.open .pm { background: var(--ube); transform: rotate(180deg); }
.q.open .pm::before, .q.open .pm::after { background: var(--feta); }
.q.open .pm::after { transform: translate(-50%, -50%) rotate(0); }
.q-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.q.open .q-a { grid-template-rows: 1fr; }
.q-a > div { overflow: hidden; }
.q-a .in { padding: 0 0 18px; font-size: 15px; line-height: 23px; color: var(--ink-2); }
.q-a .in li { position: relative; padding-left: 16px; }
.q-a .in li + li { margin-top: 6px; }
.q-a .in li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--ube); }
.q-a .in b { color: var(--h-ink); font-weight: 600; }

/* confirmation */
.confirm { padding: 72px 0 128px; }
.done-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.entry-no { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 10px 16px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.entry-no b { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 17px; color: var(--h-ink); letter-spacing: .04em; }
.confirm .ruled { margin-top: 40px; }
.done-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 40px; }
.done-art { position: relative; }
.done-art .bowl { border-radius: var(--r); box-shadow: 0 30px 60px rgba(24, 22, 22, .18); transform: rotate(-2deg); }
.done-art .roundel { right: -24px; top: -40px; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; background: var(--c); opacity: .95;
  animation: fall var(--t) cubic-bezier(.3, .6, .5, 1) var(--dl) forwards; }
@keyframes fall { to { transform: translate(var(--x), 110vh) rotate(var(--r)); } }

/* ===== responsive ===== */
@media (max-width: 1080px) {
  .hero-grid, .cup-hero, .cup-grid, .join-grid, .e-grid, .done-grid, .sec-head.split, .concepts-grid { grid-template-columns: 1fr; }
  .sec-head.split .sub { justify-self: start; }
  .roundel, .hero > .roundel { right: 16px; top: 16px; width: 112px; height: 112px; }
  .e-aside { position: static; order: -1; max-height: none; overflow: visible; }
  .steps { grid-template-columns: 1fr; }
  .cats { grid-template-columns: 1fr 1fr; }
  .prizes { grid-template-columns: 1fr; }
  .block-head { grid-template-columns: 1fr; }
  .block-head p { justify-self: start; }
  .step { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  .hero-in { padding-top: 96px; }
  .cup-banner span { font-size: 14px; white-space: normal; line-height: 18px; }
  .nav { display: none; }
  .header-in { grid-template-columns: auto 1fr; }
  .sec { padding: 88px 0; }
  .step { display: flex; }
  .pillars { grid-template-columns: 1fr; }
  .pillar + .pillar { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .pillar { padding: 20px 0; }
  .row, .row-3 { grid-template-columns: 1fr; }
  .cats, .cat-picks { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .fs { padding: 24px; }
  .email-row { flex-direction: column; }
  .ruled li { grid-template-columns: 1fr; gap: 6px; }
  .lid-card { width: 280px; }
  .fgrid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .fbase { text-align: left; }
  .prize { padding: 32px; }
  .prize .cup-big { width: 140px; right: 16px; }
}

/* the join head runs longer now ("...enter the competition."), so H3 */

.prize.first ul { max-width: 250px; }
.done-grid { align-items: start; }
.done-art { position: sticky; top: calc(var(--header-h) + 64px); margin-top: 48px; }

/* ===== round 4 ===== */
/* how Create works: one screen. The section fills the viewport under the
   header and everything in it is sized to fit */
#how { min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; padding: 48px 0; }
#how .sec-head { margin-bottom: 32px; }
#how .step-art { aspect-ratio: 2 / 1; }
#how .step-body { padding: 20px 24px 24px; }
#how .step-n { font-size: 40px; }
#how .step h3 { margin-top: 14px; }
#how .step p { margin-top: 10px; padding-top: 10px; font-size: 15px; line-height: 22px; }

/* how to apply: its own section -- the head left, the steps right */
.apply-sec { background: #fff; }
.split-sec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; }
.split-l { position: sticky; top: calc(var(--header-h) + 48px); }
.split-l .who { margin-top: 32px; }
.apply { border-top: 1px solid var(--h-ink); }
.apply li { padding: 26px 0; }
.apply li b { font-size: 28px; }
.apply li p { font-size: 16px; margin-top: 6px; }

/* how we judge: its own section -- the rubric left, the bonus right */
.judge-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; }
.judge-grid .bonus { margin-top: 0; padding: 32px; }
.judge-sec .sec-head .sub .link { white-space: nowrap; }
@media (max-width: 1080px) {
  .split-sec, .judge-grid { grid-template-columns: 1fr; }
  .split-l { position: static; }
  #how { min-height: 0; }
}
.apply-sec, .judge-sec { padding: 96px 0; }
.judge-grid .judge { padding: 16px 20px; }

/* ===== round 5 ===== */
/* after the prizes: the one thing to do next */
.signup-band { margin-top: 64px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  padding: 32px 36px; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.signup-band b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: var(--h5); line-height: 1.15; color: var(--h-ink); }
.signup-band p { margin-top: 6px; color: var(--ink-2); font-size: 17px; }

/* ===== round 6 ===== */
/* ticker: no marks, the items spaced a little wider */
.strip-track > span { padding: 0 32px; }

/* hero: v6's "Ready to create your restaurant?" photograph -- the dishes run
   along the top, the copy sits on the open mint beneath them */
.hero { background: #8FD3B0; align-items: flex-end; }
.hero-photo > img { object-position: 50% 0; }
.hero-in { padding-top: clamp(220px, 24vw, 340px); padding-bottom: 104px; }
.hero .h1 { color: var(--pesto); }
.hero-in .sub { color: var(--pesto); font-weight: 500; }
.hero > .roundel { top: auto; bottom: 48px; right: 48px; }

/* heads on the scale: section heads H2, block heads H3, card titles Volte H8 */
.cup-block .h4 { font-size: var(--h3); line-height: var(--h3-lh); }
.step h3, .cat-body h4 { font-family: var(--font-body); font-weight: 500; font-size: var(--vh8); line-height: 1.25; letter-spacing: -.01em; }
.step-n { font-family: var(--font-body); font-weight: 500; font-size: var(--vh6); line-height: 1.1; }
#how .step-n { font-size: var(--vh7); }
.fs-head h2 { font-size: var(--h4); line-height: var(--h4-lh); }
.fs-head .n { font-family: var(--font-body); font-weight: 500; font-size: var(--vh7); }
.join-form h3 { font-size: var(--h5); line-height: var(--h5-lh); }
.cat-pick b { font-family: var(--font-body); font-weight: 500; font-size: var(--vh9); letter-spacing: -.01em; }
.signup-band { display: none; }

/* the join section on Pesto: Feta type, Shallot eyebrow (Feta/Shallot on Pesto, per the guide) */
.join .caps { color: var(--shallot); }
.join .sub { color: rgba(250, 245, 238, .82); }
@media (max-width: 720px) {
  .hero-in { padding-top: 200px; padding-bottom: 72px; }
  .hero > .roundel { bottom: auto; top: 16px; }
}
/* the dishes sit ~16-47% down this photo: lift it so they clear the copy, and
   anchor the copy to the hero's foot so the CTA is always above the fold */
.hero-photo > img { object-position: 50% 72%; }
.hero-in { padding-top: 0; padding-bottom: 64px; }
@media (max-width: 720px) {
  .hero { min-height: 760px; }
  .hero-photo > img { object-position: 50% 0; }
  .hero-in { padding-top: 0; padding-bottom: 56px; }
}

/* ===== round 7 ===== */
/* hero: the headline on one line, the sub to 1200px, both in text primary */
.hero .h1, .hero-in .sub { color: var(--ink); }
.hero .h1 .ln { display: inline; }
.hero .h1 .ln + .ln::before { content: ' '; }
@media (min-width: 721px) { .hero .h1 { white-space: nowrap; } }
.hero-in .sub { max-width: 1200px; }
/* the patch, 25% larger (156 -> 195px; 112 -> 140px on phones) */
.roundel { width: 195px; height: 195px; }
.roundel-ring { width: 100%; height: 100%; }
.roundel .cup-mark { width: 68px; }
@media (max-width: 1080px) { .roundel, .hero > .roundel { width: 140px; height: 140px; } .roundel .cup-mark { width: 48px; } }
/* at 195px the patch would sit on the 1200px sub-copy, so it goes top right, on the table like a sticker */
.hero > .roundel { top: 32px; bottom: auto; right: 40px; }

/* ===== round 8 ===== */
/* hero: headline and sub to 800px, the block centred top to bottom */
.hero { align-items: center; }
.hero-in { padding-top: 0; padding-bottom: 0; }
.hero .h1, .hero-in .sub { max-width: 800px; margin-left: auto; margin-right: auto; }
@media (min-width: 721px) { .hero .h1 { white-space: normal; } }
/* the patch back bottom right -- clear of the 800px copy */
.hero > .roundel { top: auto; bottom: 48px; right: 48px; }
@media (max-width: 720px) {
  .hero-in { padding-top: 160px; padding-bottom: 56px; }
  .hero > .roundel { bottom: 24px; right: 16px; }
}
/* centred copy needs the dishes higher: the photo lifted all the way up */
@media (min-width: 721px) { .hero-photo > img { object-position: 50% 100%; } }

/* ===== round 9 ===== */
.hero .h1, .hero-in .sub { max-width: 700px; }

/* ===== round 10 ===== */
/* the wave: every cell starts clear, rises to its peak and fades back to clear
   as the band passes -- 0 -> 100 -> 0. Peaks are 25% lower than before:
   blur 12 -> 9px, lines .95 -> .71, flash .2 -> .15 */
.pg-cells i { backdrop-filter: none; -webkit-backdrop-filter: none; animation-duration: .7s; animation-timing-function: ease-in-out; }
.pg-cells i::before, .pg-cells i::after { animation-duration: .7s; animation-timing-function: ease-in-out; }
@keyframes pg-clear { 0% { backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } 50% { backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } 100% { backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } }
@keyframes pg-line { 0% { opacity: 0; } 50% { opacity: .71; } 100% { opacity: 0; } }
@keyframes pg-flash { 0% { opacity: 0; } 50% { opacity: .15; } 100% { opacity: 0; } }

/* ===== round 11 ===== */
/* hero headline back on its two lines: "Your vision." / "Our kitchen." */
.hero .h1 .ln { display: block; }
.hero .h1 .ln + .ln::before { content: none; }

/* ===== round 12 ===== */
/* the band ~10 diagonals wide: 1s per cell, 100ms per step (app.js) */
.pg-cells i, .pg-cells i::before, .pg-cells i::after { animation-duration: 1s; }

/* ===== round 13 ===== */
/* three categories with longer descriptions: the entry picker stacks them as full-width rows */
.cat-picks { grid-template-columns: 1fr; }

/* =====================================================================
   round 14 -- motion, after v6
   ===================================================================== */
/* hero headline: a letter at a time out of its mask, once the fonts are in */
.hero-rise .ln { display: block; }
.cw, .cm { display: inline-block; vertical-align: top; }
.cm { overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.cc { display: inline-block; transform: translateY(110%); transition: transform .9s cubic-bezier(.22, 1, .36, 1) calc(.2s + var(--ci, 0) * 22ms); }
body.booted .hero-rise .cc { transform: none; }
/* the hero's follow-ups: v6's blur-rise, after the headline */
[data-vp] { opacity: 0; transform: translateY(14px); filter: blur(6px);
  transition: opacity .9s var(--ease-in) var(--vd, 0s), transform .9s var(--ease-in) var(--vd, 0s), filter .9s var(--ease-in) var(--vd, 0s); }
body.booted [data-vp] { opacity: 1; transform: none; filter: none; }
.roundel[data-vp] { position: absolute; }

/* section heads: line masks clipped at the foot, words rising left to right */
.wb-text .wb-mask { display: block; clip-path: inset(-10% 0 0 0); padding-bottom: .22em; margin-bottom: -.22em; }
.wb-text .wb-line { display: block; }
.wb-text .wb-w { display: inline-block; transform: translateY(140%); }
.wb-text.hin .wb-w { transform: none; transition: transform .75s cubic-bezier(.19, 1, .22, 1) calc(.15s + var(--index, 0) * .1s + var(--wi, 0) * .045s); }
/* sub copy: line by line, a lift and a fade, no blur */
.hl { display: block; }
.hl-in { display: block; transform: translateY(32%); opacity: 0;
  transition: transform .75s cubic-bezier(.17, .17, 0, 1) calc(.2s + var(--li, 0) * .12s), opacity .75s cubic-bezier(.17, .17, 0, 1) calc(.2s + var(--li, 0) * .12s); }
.hin .hl-in { transform: none; opacity: 1; }

/* cards: open from an inset frame to full, the image settling from 1.25x */
.grow[data-in], .step[data-in], .cat[data-in] { opacity: 1; transform: none; filter: none; }
.grow, .step .step-art, .cat .cat-art { clip-path: inset(16% 16% 16% 16% round var(--r)); transition: clip-path 1.2s var(--ease) calc(var(--g, 0) * .12s); }
.grow.in, .step.in .step-art, .cat.in .cat-art { clip-path: inset(0 0 0 0 round 0); }
.grow.in { clip-path: inset(0 0 0 0 round var(--r)); }
.step-art > img, .step-art > .bowl > img, .cat-art .bowl > img, .hero-stage .bowl > img {
  transform: scale(1.25); transition: transform 1.4s var(--ease) calc(var(--g, 0) * .12s); }
.step.in .step-art > img, .step.in .step-art > .bowl > img, .cat.in .cat-art .bowl > img, .hero-stage.in .bowl > img { transform: none; }
.step .step-body, .cat .cat-body { opacity: 0; transition: opacity .8s ease calc(.35s + var(--g, 0) * .12s); }
.step.in .step-body, .cat.in .cat-body { opacity: 1; }
/* card titles rise a letter at a time; the step rule draws in */
.step.in .cc, .cat.in .cc { transform: none; transition-delay: calc(.45s + var(--g, 0) * .12s + var(--ci, 0) * 22ms); }
.step p { border-top: 0; position: relative; }
.step p::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: currentColor; opacity: .25;
  transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) calc(.5s + var(--g, 0) * .12s); }
.step.in p::before { transform: none; }
/* bodies light word by word as they climb */
.lit-text .lw { opacity: .28; transition: opacity .675s ease; }
.lit-text .lw.lit { opacity: 1; }
.fold-line .w { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cc, .wb-text .wb-w, .hl-in, [data-vp] { transform: none !important; opacity: 1 !important; filter: none !important; transition: none !important; }
  .grow, .step .step-art, .cat .cat-art, .step-art > img, .cat-art .bowl > img, .hero-stage .bowl > img { clip-path: none !important; transform: none !important; transition: none !important; }
  .step .step-body, .cat .cat-body { opacity: 1; }
  .step p::before { transform: none; }
  .lit-text .lw { opacity: 1; }
}

/* ===== round 15 ===== */
/* hero headline at 120px (scaling down on narrower screens); it's wider than the 700px sub, so it gets its own width */
.hero .h1 { font-size: clamp(56px, 8.4vw, 120px); line-height: 1.02; max-width: none; }
/* the concepts carousel now follows the lids row, not the hero */
.concepts { padding: 120px 0; }

/* ===== round 16 ===== */
/* hero: three lines at 90px, the sub at 20px */
.hero .h1 { font-size: clamp(52px, 6.25vw, 90px); line-height: 1.04; }
.hero-in .sub { font-size: 20px; line-height: 30px; }

/* the entry steps */
.stepper { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; counter-reset: s; }
.stepper li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 10px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; font-size: 15px; color: var(--soft); transition: background .3s, color .3s, box-shadow .3s; }
.stepper li i { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 700;
  background: var(--feta); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background .3s, color .3s; }
.stepper li em { font-style: normal; font-weight: 400; color: var(--soft); margin-left: 2px; }
.stepper li.cur { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ube); }
.stepper li.cur i { background: var(--ube); color: var(--feta); box-shadow: none; }
.stepper li.done { color: var(--ink); cursor: pointer; }
.stepper li.done i { background: var(--pesto); color: var(--feta); box-shadow: none; font-size: 0; }
.stepper li.done i::before { content: '✓'; font-size: 13px; }
.stepper li.done:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

.step-pane.pane-in { animation: pane-in .6s var(--ease-in) both; }
@keyframes pane-in { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.step-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.cat-hint { display: block; margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.cat-hint:empty { display: none; }
.dishes-lbl em { font-style: normal; font-family: var(--font-body); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 13px; color: var(--soft); margin-left: 4px; }
.fs .field + .dishes, .fs .dishes + .field { margin-top: 24px; }
.uploads { display: grid; gap: 12px; margin-bottom: 20px; }
.files { display: grid; gap: 8px; }
.files:empty { display: none; }
.files li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: var(--feta);
  box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; }
.files button { color: var(--ube); font-weight: 500; font-size: 14px; }
.review dl { border-top: 1px solid var(--ink); }
.rv-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-strong); align-items: start; }
.rv-row dt { font-family: var(--font-eyebrow); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding-top: 3px; }
.rv-row dd { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.rv-row dd b { color: var(--ink); }
.rv-edit { color: var(--ube); font-weight: 500; font-size: 14px; }
.agree { margin-top: 28px; }
.submit-note { margin-top: 16px; font-size: 14px; color: var(--soft); }
.e-top { padding-bottom: 32px; }
@media (max-width: 720px) {
  .rv-row { grid-template-columns: 1fr auto; } .rv-row dt { grid-column: 1 / -1; }
  .step-nav .btn { padding: 0 16px; }
}
/* three lines need room under the dishes: the copy block sits lower */
@media (min-width: 721px) { .hero-in { padding-top: 150px; padding-bottom: 24px; } }

/* ===== round 17 ===== */
/* the entry popup */
html.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; }
.modal-scrim { position: absolute; inset: 0; background: rgba(24, 22, 22, .52); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .3s ease; }
.modal-panel { position: relative; width: min(840px, 100%); max-height: calc(100vh - 48px); max-height: calc(100svh - 48px); display: flex; flex-direction: column;
  border-radius: var(--r); background: var(--feta); box-shadow: 0 30px 80px rgba(24, 22, 22, .3);
  opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity .45s var(--ease-in), transform .45s var(--ease-in), filter .45s var(--ease-in); }
.modal.on .modal-scrim { opacity: 1; }
.modal.on .modal-panel { opacity: 1; transform: none; filter: none; }
.modal-body { overflow-y: auto; overscroll-behavior: contain; padding: 40px 40px 36px; border-radius: inherit; }
.modal-x { position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center;
  background: #fff; box-shadow: inset 0 0 0 1px #E7E1DC; color: var(--ink); }
.modal-x:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.wz-head { margin-bottom: 28px; padding-right: 48px; }
.wz-head .h4 { margin-top: 2px; }
.wz-sub { margin-top: 10px; font-size: 16px; line-height: 24px; color: var(--ink-2); max-width: 560px; }
.modal .e-form { display: grid; gap: 0; }
.modal .fs { padding: 28px; }
.modal-rules { margin-top: 24px; }
.modal-rules .rules { padding: 4px 20px; box-shadow: inset 0 0 0 1px #E7E1DC; }
.modal-rules .q-h { font-size: 18px; padding: 14px 0; }

/* the stepper: numbers in Feta circles, joined by a rule in the default border colour */
.stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 28px; }
.stepper li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; background: none; box-shadow: none;
  text-align: center; font-weight: 500; font-size: 14px; line-height: 18px; color: var(--soft); }
.stepper li:not(:last-child)::after { content: ''; position: absolute; top: 18px; left: calc(50% + 26px); right: calc(-50% + 26px); height: 1px; background: #E7E1DC; }
.stepper li i { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  font-size: 15px; font-weight: 600; background: var(--feta); color: var(--ink); box-shadow: inset 0 0 0 1px #E7E1DC; transition: box-shadow .3s, color .3s; }
.stepper li em { display: block; font-style: normal; font-weight: 400; font-size: 12px; color: var(--soft); margin: 0; }
.stepper li.cur { color: var(--ink); box-shadow: none; }
.stepper li.cur i { background: var(--feta); color: var(--ube); box-shadow: inset 0 0 0 1.5px var(--ube); }
.stepper li.done { color: var(--ink); cursor: pointer; box-shadow: none; }
.stepper li.done i { background: var(--feta); color: var(--pesto); box-shadow: inset 0 0 0 1.5px var(--pesto); font-size: 0; }
.stepper li.done i::before { content: '✓'; font-size: 15px; }
.stepper li.done:hover { box-shadow: none; }
.stepper li.done:hover i { box-shadow: inset 0 0 0 2px var(--pesto); }

/* the confirmation, inside the popup */
.modal .confirm { padding: 0; }
.modal .done-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.modal .done-art { position: relative; top: auto; margin: 8px 24px 0; max-width: 420px; }
.modal .confirm .h2 { font-size: var(--h3); }

/* join: the headline and button centred over the blue brand shot */
.join { position: relative; overflow: hidden; background: #75C4FC; color: var(--ink); padding: 0; min-height: 720px; display: flex; align-items: flex-end; }
.join-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.join-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 360px; padding-bottom: 96px; }
.join .h2 { color: var(--ink); max-width: 800px; }
.join .caps { color: var(--ink); }
.join-in .btn { margin-top: 32px; }
body[data-page='home'] .foot-steps { background: #75C4FC; }
@media (max-width: 720px) {
  .modal { padding: 0; place-items: end center; }
  .modal-panel { max-height: 100svh; border-radius: 20px 20px 0 0; }
  .modal-body { padding: 28px 20px; }
  .modal .fs { padding: 20px; }
  .stepper li span { font-size: 12px; }
  .join { min-height: 560px; } .join-in { padding-top: 260px; padding-bottom: 64px; }
}
/* the dishes along the top, the copy on the open blue beneath */
.join-bg { object-position: 50% 100%; }
.join-in { padding-top: 400px; padding-bottom: 88px; }
@media (max-width: 720px) { .join-bg { object-position: 50% 92%; } .join-in { padding-top: 280px; } }
body[data-page='home'] .join { padding-bottom: 0; }
@media (min-width: 721px) { .join-in { padding-top: 500px; padding-bottom: 80px; } }
/* finished steps: a drawn tick, centred (the glyph sat high) */
.stepper li.done i { font-size: 15px; color: transparent;
  background: var(--feta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1.5 5.8l3.6 3.6L12.5 1.8' fill='none' stroke='%2300462A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.stepper li.done i::before { content: none; }

/* ===== round 18 ===== */
/* the competition opens straight on the categories */
.cup .cup-block:first-child { margin-top: 0; }
.center-head { display: block; text-align: center; }
.center-head .h4 { max-width: none; }
.center-head p { justify-self: auto; max-width: none; margin: 12px auto 0; }
/* category cards: white text panel, an 8px brand-gradient bar under the image */
.cat { background: #fff; box-shadow: inset 0 0 0 1px #E7E1DC; }
.cat-art { position: relative; }
.cat-bar { display: block; height: 8px; }
.cat:nth-child(1) .cat-bar { background: linear-gradient(90deg, var(--ube) 0%, var(--pitaya) 30%, var(--spicy-mayo) 75%, var(--shallot) 93%); }
.cat:nth-child(2) .cat-bar { background: linear-gradient(90deg, var(--celery) 0%, var(--mint-jelly) 30%, var(--ginger) 75%, var(--cucumber) 93%); }
.cat:nth-child(3) .cat-bar { background: linear-gradient(90deg, var(--pitaya) 0%, var(--spicy-mayo) 100%); }
.cat-body { background: #fff; }
.cat-body h4 { font-weight: 600; }
.cat-body p:not(.caps) { font-size: 16px; line-height: 24px; flex: 0 1 auto; }
/* the example badge sits on the photo, top left */
.cat-art .cat-eg { position: absolute; top: 16px; left: 16px; z-index: 3; margin: 0; background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); }
/* prizes: two cards */
.prizes.two { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
@media (max-width: 1080px) { .prizes.two { grid-template-columns: 1fr; } }

/* round 19: second and third win early access, set as words at the figure's place */
.prize .amt-word { font-size: clamp(48px, 4.6vw, 72px); line-height: 1.02; }

/* ===== round 20 ===== */
/* winners: the head centred top to bottom on the left, the two cards stacked on the right */
.winners { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.winners .block-head { display: block; margin-bottom: 0; }
.winners .block-head p { justify-self: auto; margin-top: 16px; max-width: 440px; }
.winners .prizes.two { grid-template-columns: 1fr; gap: 20px; }
.winners .prize { min-height: 0; }
@media (max-width: 1080px) { .winners { grid-template-columns: 1fr; gap: 32px; } }
/* section headlines in Pesto */
.sec-head .h2, .sec-head .h3, .block-head .h4, .join .h2, .wz-head .h4, .modal .confirm .h2 { color: var(--pesto); }
/* category eyebrows in Ube */
.cat-body .caps { color: var(--ube); opacity: 1; }

/* ===== round 21 ===== */
/* How it works + New York, on a lid: head and sub centred, stacked */
#how .sec-head.split, #lids .sec-head.split { display: block; text-align: center; }
#how .sec-head.split .sub, #lids .sec-head.split .sub { justify-self: auto; margin: 16px auto 0; max-width: 640px; }
#how .sec-head .h2, #lids .sec-head .h2 { max-width: 900px; margin-left: auto; margin-right: auto; }
#how .sec-head .h2 { max-width: none; }  /* one line, so the section still fits a screen */
/* round 22: the closing head in text primary */
.join .h2 { color: var(--ink); }

/* ===== round 23: the popup, compact and all white ===== */
.modal-panel { width: min(1040px, 100%); background: #fff; }
.modal-body { padding: 32px 40px 28px; }
.modal .wz-head { margin-bottom: 20px; padding-right: 56px; }
.modal .wz-head .h4 { margin: 0; color: var(--pesto); }
/* the stepper spans the form's width: circle + label, a rule filling the gap */
.modal .stepper { display: flex; align-items: center; gap: 0; margin-top: 20px; width: calc(100% + 56px); }
.modal .stepper li { flex: 1 1 auto; flex-direction: row; gap: 10px; text-align: left; white-space: nowrap; }
.modal .stepper li:last-child { flex: 0 0 auto; }
.modal .stepper li:not(:last-child)::after { position: static; flex: 1; height: 1px; margin: 0 14px; background: #E7E1DC; content: ''; left: auto; right: auto; top: auto; }
.modal .stepper li em { display: inline; margin-left: 4px; }
.modal .stepper li i { flex: none; }
/* the form sits straight on the white: no inner card */
.modal .fs { padding: 0; border-radius: 0; box-shadow: none; background: transparent; }
.modal .fs-head { display: block; margin-bottom: 16px; }
.modal .fs-head h2 { font-family: var(--font-body); font-weight: 500; font-size: var(--vh8); line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.modal .fs-head h2 .opt { font-size: 16px; }
.modal .fs-head p { margin-top: 2px; font-size: 14px; color: var(--ink-2); }
/* tighter fields so every step fits one screen */
.modal .field > span.lbl { margin-bottom: 6px; }
.modal .input, .modal .select { height: 44px; background-color: #fff; }
.modal .textarea { min-height: 72px; height: 72px; padding: 10px 14px 26px; line-height: 22px; background: #fff; }
.modal .textarea.sm { min-height: 64px; height: 64px; }
.modal .count { bottom: 6px; }
.modal .fs .field + .field, .modal .fs .row + .field, .modal .fs .field + .row, .modal .fs .row + .row,
.modal .fs .field + .dishes, .modal .fs .dishes + .field, .modal .fs .dishes + .row, .modal .fs .row + .dishes { margin-top: 14px; }
.modal .row { gap: 14px; }
.modal .cat-hint { margin-top: 4px; font-size: 12px; line-height: 16px; }
/* three dishes side by side */
.modal .dishes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.modal .dishes-lbl { grid-column: 1 / -1; margin-bottom: -6px; }
.modal .dish { padding: 0; background: none; box-shadow: none; }
.modal .dish + .dish { margin-top: 0; }
.modal .dish-n { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.modal .dish .field + .field { margin-top: 8px; }
.modal .dish .field > span.lbl { display: none; }
.modal .step-nav { margin-top: 20px; padding-top: 16px; }
.modal .drop { padding: 14px 16px; background: #fff; }
.modal .files li { background: #fff; }
.modal .review dl { border-top-color: #E7E1DC; }
.modal .rv-row { padding: 9px 0; border-bottom-color: #E7E1DC; }
.modal .agree { margin-top: 16px; }
.modal .check + .check { margin-top: 10px; }
.modal-rules { margin-top: 16px; }
.modal-rules .rules { padding: 0 16px; }
.modal-rules .rules > .caps { padding: 12px 0 2px; }
.modal-rules .q-h { font-size: 16px; padding: 9px 0; font-family: var(--font-body); font-weight: 500; }
.modal .submit-note { margin-top: 10px; font-size: 13px; }
.modal .confirm, .modal .entry-no { background: #fff; }
@media (max-width: 860px) {
  .modal .dishes { grid-template-columns: 1fr; }
  .modal .stepper li span { display: none; }
  .modal .stepper li.cur span { display: inline; }
}
/* step 2: category and name stacked beside the concept */
.modal .r-top { align-items: stretch; }
.modal .r-stack { display: grid; gap: 14px; align-content: start; }
.modal .f-concept { display: flex; flex-direction: column; }
.modal .f-concept .textarea { flex: 1; height: auto; min-height: 120px; }
/* step 4: the review left, agreement and rules right */
.modal .s4 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.modal .s4 .agree { margin-top: 0; }
@media (max-width: 860px) { .modal .s4 { grid-template-columns: 1fr; } }
/* step 2 trimmed to fit 900px screens */
.modal .dish-n { display: none; }
.modal .dish .field + .field { margin-top: 6px; }
.modal [data-step='2'] .fs-head p { display: none; }
.modal [data-step='2'] .fs-head { margin-bottom: 12px; }
.modal .row .textarea:not(.f-concept .textarea) { height: 64px; min-height: 64px; }
.modal .step-nav { margin-top: 16px; padding-top: 12px; }
.modal-body { padding: 28px 40px 22px; }
.modal .wz-head { margin-bottom: 16px; }
.modal .stepper { margin-top: 14px; }
.modal .row > .field + .field, .modal .row > .field + .r-stack, .modal .row > .r-stack + .field { margin-top: 0; }

/* ===== round 24: five steps ===== */
/* step 3: the two answers stacked, each with real room to write */
.modal .textarea.tall { height: 168px; min-height: 168px; }
.modal [data-step='3'] .field + .field { margin-top: 20px; }
/* five labels on one line */
.modal .stepper li { font-size: 13px; gap: 8px; }
.modal .stepper li:not(:last-child)::after { margin: 0 10px; }
.modal .stepper li i { width: 32px; height: 32px; font-size: 14px; }
/* step 2 has room now: taller dish descriptions and concept */
.modal [data-step='2'] .textarea.sm { height: 96px; min-height: 96px; }
.modal [data-step='2'] .f-concept .textarea { min-height: 150px; }

/* ===== round 25: step 2 -- category | name, concept full width, one box per dish ===== */
.modal [data-step='2'] .f-concept .textarea { min-height: 120px; height: 120px; }
.modal .dish-lbl { display: block; margin-bottom: 6px; font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.modal .dish-lbl em { font-weight: 400; font-size: 12px; color: var(--soft); }
.modal .dishes > .field { margin-top: 0 !important; }
.modal .dish-ta { height: 132px; min-height: 132px; }
.modal .dishes-lbl { margin-bottom: 0; }

/* ===== round 26: winners ===== */
/* first place: v6's magenta promo -- a Shallot-to-Spicy-Mayo alpha gradient with an Ube-alpha stroke */
.winners .prize.first { --c: transparent; color: var(--ink);
  background: linear-gradient(90deg, rgba(250, 192, 255, .65), rgba(255, 123, 97, .22));
  box-shadow: inset 0 0 0 1px rgba(184, 3, 184, .25); }
.winners .prize.first .caps { color: var(--ube); opacity: 1; }
.winners .prize.first .amt { color: var(--ink); }
.winners .prize.first li::before { filter: none; }
/* second and third: informational -- Feta, the default border, quieter type */
.winners .prize.second { --c: var(--feta); background: var(--feta); box-shadow: inset 0 0 0 1px #E7E1DC; padding: 24px 32px; }
.winners .prize.second .caps { color: var(--ink-2); opacity: 1; }
.winners .prize.second .amt-word { margin-top: 10px; font-family: var(--font-body); font-weight: 500; font-size: var(--vh8); line-height: 1.25; letter-spacing: -.01em; }
.winners .prize.second .amt-l { display: inline; margin: 0; font-size: var(--vh8); font-weight: 500; }
.winners .prize.second .amt-word, .winners .prize.second .amt-l { color: var(--ink); }
.winners .prize.second .amt-word { display: inline; }
.winners .prize.second .amt-word::after { content: ' '; }
.winners .prize.second ul { margin-top: 10px; }
.winners .prize.second li { font-size: 15px; color: var(--ink-2); }
.winners .prize.second li::before { filter: grayscale(1) brightness(.3); opacity: .5; }
.winners .prize.first ul { max-width: 380px; }
.winners .prize.second ul { max-width: none; }

/* ===== round 27 ===== */
/* secondary CTAs, as across the Create prototypes: white, the default border, text primary; a sunken hover */
.btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #E7E1DC; }
.btn.ghost:hover { background: #F7F6F3; }
.hero .btn.ghost { background: #fff; }

/* dropdown, after the analytics prototype's Select */
.dd { position: relative; }
.dd-native { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.dd-btn { width: 100%; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px;
  border-radius: 6px; border: 1px solid #E7E1DC; background: #fff; font-size: 15px; font-weight: 500; color: #2E2A2B; text-align: left;
  transition: background 220ms var(--ease); }
.dd-btn:hover, .dd.open .dd-btn { background: #F7F6F3; }
.dd-btn:focus-visible { outline: none; border-color: var(--ube); box-shadow: 0 0 0 3px rgba(184, 3, 184, .16); }
.dd-btn svg { flex: none; color: rgba(35, 31, 32, .65); transition: transform 240ms var(--ease); }
.dd.open .dd-btn svg { transform: rotate(180deg); }
.dd-ph { color: rgba(35, 31, 32, .42); font-weight: 400; }
.dd-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; padding: 4px; background: #fff;
  border: 1px solid #E7E1DC; border-radius: 6px; box-shadow: 0 8px 28px rgba(24, 22, 22, .12); }
.dd-menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; font-size: 14px; font-weight: 500; color: #2E2A2B; }
.dd-menu button:hover, .dd-menu button:focus-visible { background: #F7F6F3; outline: none; }
.dd-menu button.on { background: #F7E6FB; color: var(--ube); }
.dd-menu button[disabled] { color: rgba(35, 31, 32, .4); cursor: not-allowed; background: none; }
.field.err .dd-btn { border-color: var(--critical); box-shadow: 0 0 0 3px rgba(179, 38, 30, .1); }

/* form labels: 14px */
.modal .field > span.lbl, .modal .dishes-lbl { font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.modal .dishes-lbl { display: block; }
/* (Optional), in text disabled */
.opt, .modal .field > span.lbl em.opt, .modal .stepper li em { font-style: normal; font-weight: 400; color: rgba(35, 31, 32, .4); }
.modal .fs-head h2 .opt { font-size: 16px; }
/* the stepper: (Optional) on a line under Uploads */
.modal .stepper li span { display: inline-flex; flex-direction: column; line-height: 16px; }
.modal .stepper li em { display: block; margin: 2px 0 0; font-size: 12px; line-height: 14px; }
/* step sub copy 16px */
.modal .fs-head p { font-size: 16px; line-height: 24px; }
/* inspiration step: no labels, so the boxes get the room */
.modal [data-step='3'] .field + .field { margin-top: 16px; }
.modal .textarea.tall { height: 200px; min-height: 200px; }
/* uploads: two columns, a solid default border */
.modal .uploads { grid-template-columns: 1fr 1fr; }
.modal .uploads .files { grid-column: 1 / -1; }
.modal .drop { border: 1px solid #E7E1DC; height: 100%; }
.modal .drop:hover { border-color: var(--ube); }
@media (max-width: 720px) { .modal .uploads { grid-template-columns: 1fr; } }
/* confirmation step: checkboxes, rules, legal -- one column */
.modal .s4 { display: block; }
.modal .s4-r { max-width: 640px; }
.modal-rules .rules { padding-top: 4px; }
/* prize card titles, in place of the eyebrows */
.prize-t { font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 22px; }
.winners .prize.first .prize-t { color: var(--ube); }
.winners .prize.second .prize-t { color: var(--ink); }
/* the submitted state: centred, no recap */
.modal .confirm .progress { justify-content: center; }
.done-c { text-align: center; max-width: 620px; margin: 24px auto 8px; }
.done-c .h3 { color: var(--pesto); }
.done-c .sub { margin: 14px auto 0; max-width: 560px; }
.done-c .done-ctas { justify-content: center; margin-top: 32px; }
.done-c .done-left { margin-top: 14px; }

/* =====================================================================
   round 28 -- the popup, rebuilt on one frame and one grid.
   Frame: 960 x 760, fixed for every step. 40px side margins, 32px top.
   Head (40px) / rule with 24px either side / stepper (32px) / 32px /
   step title + sub / 24px / a 12-column field grid (16px gutters, 20px
   rows) / the buttons pinned to the foot, 32px below a rule.
   ===================================================================== */
#wizard .modal-panel { width: min(960px, calc(100vw - 48px)); height: min(760px, calc(100svh - 48px)); max-height: none;
  display: flex; flex-direction: column; background: #fff; border-radius: 24px; overflow: hidden; }
#wizard .wz-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 40px 0; }
#wizard .wz-title { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 36px; line-height: 40px; color: var(--ink); }
#wizard .modal-x { position: static; flex: none; width: 40px; height: 40px; border-radius: 8px; background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 1px #E7E1DC; transition: background .2s; }
#wizard .modal-x:hover { background: #F7F6F3; box-shadow: inset 0 0 0 1px #E7E1DC; }
#wizard .wz-rule { border: 0; height: 1px; background: #E7E1DC; margin: 24px 40px; flex: none; }
#wizard .wz-main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 40px 32px; overflow-y: auto; overscroll-behavior: contain; }

/* stepper: no strokes. To do = sunken; current = Shallot / Ube; done = Ube / white */
#wizard .stepper { display: flex; align-items: flex-start; width: 100%; margin: 0 0 32px; padding: 0; gap: 0; }
#wizard .stepper li { position: relative; flex: 1 1 0; display: flex; align-items: center; gap: 10px; min-width: 0;
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); background: none; box-shadow: none; padding: 0; text-align: left; white-space: nowrap; }
#wizard .stepper li:last-child { flex: 0 0 auto; }
#wizard .stepper li:not(:last-child)::after { content: ''; position: static; flex: 1; height: 1px; margin: 0 12px; background: #E7E1DC; }
#wizard .stepper li i { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 14px; font-weight: 600; background: #F7F6F3; color: var(--ink); box-shadow: none; transition: background .3s, color .3s; }
#wizard .stepper li span { position: relative; display: block; }
#wizard .stepper li em { position: absolute; left: 0; top: 20px; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; color: rgba(35, 31, 32, .4); margin: 0; }
#wizard .stepper li.cur i { background: var(--shallot); color: var(--ube); box-shadow: none; }
#wizard .stepper li.done { cursor: pointer; }
#wizard .stepper li.done i { color: transparent; font-size: 0; box-shadow: none;
  background: var(--ube) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1.5 5.8l3.6 3.6L12.5 1.8' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
#wizard .stepper li.done i::before { content: none; }
#wizard .stepper li.done:hover i { background-color: var(--ube-deep); box-shadow: none; }

/* the form fills what is left; each step pins its buttons to the foot */
#wizard .e-form { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; }
#wizard .step-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 0; padding: 0; margin: 0; min-width: 0; }
#wizard .step-pane[hidden] { display: none; }
#wizard .fs-head { display: block; margin: 0 0 24px; }
#wizard .fs-head h3 { margin: 0; font-family: var(--font-body); font-weight: 500; font-size: 24px; line-height: 30px; letter-spacing: -.01em; color: var(--ink); }
#wizard .fs-head p { margin: 4px 0 0; font-size: 16px; line-height: 24px; color: var(--ink-2); max-width: 720px; }
#wizard .step-nav { margin-top: auto; padding-top: 24px; border-top: 1px solid #E7E1DC; display: flex; justify-content: space-between; align-items: center; }
#wizard .step-nav .btn { min-width: 120px; }
#wizard .g + .step-nav { margin-top: auto; }
#wizard .g { margin-bottom: 32px; }

/* the field grid */
#wizard .g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; row-gap: 20px; align-content: start; }
#wizard .c12 { grid-column: span 12; } #wizard .c6 { grid-column: span 6; } #wizard .c4 { grid-column: span 4; } #wizard .c3 { grid-column: span 3; }
#wizard .g > .field, #wizard .g > * { margin: 0 !important; min-width: 0; }
#wizard .field { display: flex; flex-direction: column; position: relative; }
#wizard .field > span.lbl, #wizard .g-lbl { display: block; margin: 0 0 8px; font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 20px;
  letter-spacing: 0; text-transform: none; color: var(--ink); }
#wizard .g-lbl { margin-bottom: -12px; }
#wizard .opt { font-weight: 400; color: rgba(35, 31, 32, .4); font-style: normal; }
#wizard .input, #wizard .dd-btn { height: 44px; border: 1px solid #E7E1DC; border-radius: 6px; background: #fff; font-size: 15px; padding: 0 14px; }
#wizard .textarea { border: 1px solid #E7E1DC; border-radius: 6px; background: #fff; font-size: 15px; line-height: 22px; padding: 11px 14px 26px; resize: none; min-height: 0; }
#wizard .input:focus, #wizard .textarea:focus { border-color: var(--ube); box-shadow: 0 0 0 3px rgba(184, 3, 184, .16); }
#wizard .field.err .input, #wizard .field.err .textarea, #wizard .field.err .dd-btn { border-color: var(--critical); box-shadow: 0 0 0 3px rgba(179, 38, 30, .1); }
#wizard .count { position: absolute; right: 12px; bottom: 7px; font-size: 12px; line-height: 16px; color: var(--soft); }
#wizard .err .count { bottom: 29px; }
#wizard .err-msg { margin-top: 6px; font-size: 13px; line-height: 16px; }
#wizard .t-concept { height: 120px; }
#wizard .t-dish { height: 136px; }
#wizard .t-tall { height: 176px; }
#wizard .t-statement { height: 120px; }
#wizard .cat-hint { display: none; }

/* uploads */
#wizard .drop { display: flex; align-items: center; gap: 16px; width: 100%; height: 100%; min-height: 96px; padding: 20px; border-radius: 12px;
  border: 1px solid #E7E1DC; background: #fff; text-align: left; transition: border-color .2s, background .2s; }
#wizard .drop:hover { border-color: var(--ube); background: #fff; }
#wizard .drop i { width: 44px; height: 44px; border-radius: 10px; background: #F7F6F3; color: var(--ink); display: grid; place-items: center; flex: none; }
#wizard .drop b { display: block; font-weight: 600; font-size: 15px; color: var(--ink); }
#wizard .drop small { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--soft); }
#wizard .files:empty { display: none; }
#wizard .files li { background: #fff; box-shadow: inset 0 0 0 1px #E7E1DC; border-radius: 6px; }

/* confirmation */
#wizard .agree { display: grid; gap: 14px; margin: 0; }
#wizard .check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; margin: 0; }
#wizard .check input { border: 1px solid #E7E1DC; }
#wizard .check input:checked { border-color: var(--ube); }
#wizard .check p { font-size: 16px; line-height: 24px; color: var(--ink); }

/* the thank-you: same frame, the head and rule stay; the message centred in the space below */
#wizard .wz-main > .confirm { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0; background: #fff; }
#wizard .done-c { margin: 0 auto; }
#wizard .done-c .h3 { font-size: var(--h3); color: var(--ink); }

@media (max-width: 860px) {
  #wizard .modal-panel { height: calc(100svh - 24px); }
  #wizard .wz-top { padding: 24px 20px 0; } #wizard .wz-rule { margin: 20px; } #wizard .wz-main { padding: 0 20px 20px; }
  #wizard .wz-title { font-size: 28px; line-height: 34px; }
  #wizard .c6, #wizard .c4, #wizard .c3 { grid-column: span 12; }
  #wizard .stepper li span { display: none; } #wizard .stepper li.cur span { display: block; }
}
#wizard .t-dish { height: 112px; }
#wizard .stepper li { flex: 1 1 auto; }
#wizard .stepper li:not(:last-child)::after { min-width: 16px; }
.strip-track > span.strip-dot { padding: 0; }
/* ticker type in plum */
.strip { color: #5E0066; }

/* ===== round 29: New York only + the countdown ===== */
.nyc { background: #fff; padding: 112px 0 104px; }
.nyc-head { text-align: center; margin-bottom: 48px; }
.nyc-head .sub { margin: 16px auto 0; max-width: 640px; }
.nyc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.nyc-card { grid-column: span 4; position: relative; margin: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; background: #F7F6F3; }
.nyc-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.nyc-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 22, 22, 0) 45%, rgba(24, 22, 22, .72) 100%); }
.nyc-tag { position: absolute; top: 16px; left: 16px; z-index: 2; padding: 5px 10px; border-radius: 6px; background: rgba(255, 255, 255, .92);
  font-size: 13px; font-weight: 500; color: var(--ink); }
.nyc-card figcaption { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; color: #fff; }
.nyc-card figcaption b { display: block; font-family: var(--font-body); font-weight: 600; font-size: var(--vh8); line-height: 1.2; letter-spacing: -.01em; }
.nyc-card figcaption span { display: block; margin-top: 6px; font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, .88); }
.nyc-map { grid-column: span 4; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px #E7E1DC; }
.nyc-map-img { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.nyc-map-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 55%; }
.pin { position: absolute; z-index: 1; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 4px 9px 4px 5px; border-radius: 6px; background: #fff; box-shadow: 0 2px 8px rgba(24, 22, 22, .14); font-size: 12px; font-weight: 600; color: var(--ink); }
.pin i { width: 10px; height: 10px; border-radius: 50%; background: var(--ube); box-shadow: 0 0 0 3px rgba(184, 3, 184, .2); }
.nyc-map-copy { padding: 20px 24px 22px; border-top: 1px solid #E7E1DC; }
.nyc-map-copy b { display: block; font-family: var(--font-body); font-weight: 600; font-size: var(--vh8); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.nyc-map-copy span { display: block; margin-top: 6px; font-size: 16px; line-height: 24px; color: var(--ink-2); }

.countdown { margin-top: 20px; display: flex; align-items: center; gap: 32px; padding: 24px 28px; border-radius: var(--r);
  background: linear-gradient(90deg, rgba(250, 192, 255, .65), rgba(255, 123, 97, .22)); box-shadow: inset 0 0 0 1px rgba(184, 3, 184, .25); }
.cd-copy { flex: 1; }
.cd-copy b { display: block; font-family: var(--font-body); font-weight: 600; font-size: var(--vh8); line-height: 1.2; color: var(--ink); }
.cd-copy span { display: block; margin-top: 4px; font-size: 16px; color: var(--ink-2); }
.cd-tiles { display: flex; gap: 10px; }
.cd-t { width: 92px; padding: 12px 0 10px; border-radius: 12px; background: #fff; text-align: center; box-shadow: inset 0 0 0 1px rgba(184, 3, 184, .18); }
.cd-t b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 44px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cd-t span { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
@media (max-width: 1080px) {
  .nyc-card, .nyc-map { grid-column: span 6; } .nyc-map { grid-column: span 12; min-height: 420px; }
  .countdown { flex-wrap: wrap; } .cd-copy { flex-basis: 100%; }
}
@media (max-width: 720px) { .nyc-card, .nyc-map { grid-column: span 12; } .cd-t { width: 80px; } }

/* ===== the closing card, after v6 ===== */
.join-sec { padding: 56px 0 120px; background: var(--feta); }
.close-card { position: relative; border-radius: 24px; overflow: hidden; height: calc(100vh - 76px - 112px); min-height: 560px; max-height: 760px;
  display: grid; place-items: end center; padding: 32px 32px 64px;
  clip-path: inset(calc((1 - var(--ex, 1)) * 9%) calc((1 - var(--ex, 1)) * 9%) round calc(24px + (1 - var(--ex, 1)) * 16px)); }
.close-photo { position: absolute; inset: 0; background: #75C4FC; }
.close-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 100%; scale: calc(1.12 - .12 * var(--ex, 1)); }
.close-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.close-in .h2 { color: var(--ink); }
body[data-page='home'] .foot-steps { background: var(--feta); }

/* ===== round 30: the countdown as a full-width Shallot band ===== */
.countdown { margin: 0; display: block; padding: 28px 0; border-radius: 0; background: var(--shallot); box-shadow: none; }
.cd-in { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cd-copy { flex: 0 1 auto; }
.cd-t { background: #fff; box-shadow: none; }
@media (max-width: 720px) { .cd-in { flex-direction: column; align-items: flex-start; gap: 16px; } }

/* ===== round 31: hero -- badge over a 72px head, the countdown card top right ===== */
.hero .h1 { font-size: clamp(48px, 5vw, 72px); line-height: 1.04; }
.hero .hero-badge { position: relative; inset: auto; right: auto; top: auto; bottom: auto; width: 140px; height: 140px; margin: 0 auto 24px; }
.hero .hero-badge .cup-mark { width: 50px; }
@media (min-width: 721px) { .hero-in { padding-top: 140px; padding-bottom: 32px; } }
.hero-cd { position: absolute; top: 24px; right: 40px; z-index: 5; padding: 16px 16px 14px; border-radius: 16px; background: #fff;
  box-shadow: 0 12px 30px rgba(24, 22, 22, .14); text-align: center; }
.hero-cd > b { display: block; font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 20px; color: var(--ink); }
.hero-cd .cd-tiles { margin-top: 10px; gap: 6px; }
.hero-cd .cd-t { width: 64px; padding: 8px 0 6px; border-radius: 10px; background: #F7F6F3; box-shadow: none; }
.hero-cd .cd-t b { font-size: 28px; line-height: 32px; }
.hero-cd .cd-t span { font-size: 11px; }
.hero-cd .cd-date { display: block; margin-top: 8px; font-size: 12px; color: var(--soft); }
@media (max-width: 720px) { .hero-cd { position: relative; top: auto; right: auto; margin: 0 auto 24px; width: max-content; } }
/* the competition overview closes on its CTA */
.cup-cta { margin-top: 56px; display: flex; justify-content: center; }
.hero-cd { right: max(32px, calc((100vw - 1320px) / 2)); top: 32px; }

/* ===== round 32 ===== */
/* How it works cards: Gooper Light numbers and titles */
.step .step-n, #how .step-n, .step h3 { font-family: var(--font-heading); font-weight: 300; letter-spacing: -.01em; }
#how .step-n { font-size: 44px; line-height: 1; }
.step h3 { font-size: 30px; line-height: 1.1; }

/* the three categories, with more weight: taller photos, a big Ube numeral,
   Gooper titles, a thicker brand bar, and a lift with the photo easing in on hover */
.cat { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.cat:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px #E7E1DC, 0 24px 48px rgba(24, 22, 22, .12); }
.cat .cat-art { aspect-ratio: 1 / 1; }
.cat .cat-art .bowl { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.cat:hover .cat-art .bowl > img { transform: scale(1.05); transition: transform 1s var(--ease); }
.cat-bar { height: 10px; }
.cat-body { padding: 28px 28px 32px; }
.cat-n { display: block; font-family: var(--font-heading); font-weight: 300; font-size: 56px; line-height: 1; color: var(--ube); }
.cat-body h4 { margin-top: 14px; font-family: var(--font-heading); font-weight: 400; font-size: var(--h4); line-height: 1.1; letter-spacing: -.01em; color: var(--ink); }
.cat-body p:not(.caps) { margin-top: 14px; }
.cat-art .cat-eg { font-size: 13px; padding: 6px 11px; }

/* ===== round 33: the competition overview -- a NYC street, a concept over its corner ===== */
.overview { background: #fff; padding: 120px 0; }
.ov-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: center; }
.ov-art { grid-column: 1 / span 7; position: relative; aspect-ratio: 7 / 6; }
.ov-art figure { position: absolute; margin: 0; overflow: hidden; border-radius: var(--r); }
.ov-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ov-city { left: 0; top: 0; width: 82%; aspect-ratio: 4 / 3; }
.ov-concept { right: 0; bottom: 0; width: 42%; aspect-ratio: 3 / 4; box-shadow: 0 0 0 8px #fff, 0 30px 60px rgba(24, 22, 22, .18); }
.ov-concept figcaption { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 6px; background: rgba(255, 255, 255, .92); font-size: 13px; font-weight: 500; color: var(--ink); }
.ov-copy { grid-column: 9 / span 4; }
.ov-copy .h3 { color: var(--pesto); }
.ov-copy .sub { margin-top: 16px; }
.ov-list { margin-top: 32px; border-top: 1px solid #E7E1DC; }
.ov-list li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid #E7E1DC; }
.ov-list li > span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--shallot); color: var(--ube);
  font-weight: 600; font-size: 15px; }
.ov-list b { display: block; font-family: var(--font-body); font-weight: 600; font-size: var(--vh8); line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.ov-list p { margin-top: 4px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
@media (max-width: 1080px) { .ov-art { grid-column: 1 / -1; margin-bottom: 48px; } .ov-copy { grid-column: 1 / -1; } }
.overview { padding: 104px 0; }
.ov-art { aspect-ratio: 5 / 4; }
.ov-city { width: 80%; }
.ov-concept { width: 40%; aspect-ratio: 4 / 5; padding: 8px; background: #fff; box-shadow: none; }
.ov-concept img { border-radius: calc(var(--r) - 8px); }
.ov-concept figcaption { left: 20px; bottom: 20px; }
.ov-copy .h3 { font-size: var(--h3); }
.ov-list li { padding: 16px 0; }
/* no ticker: the hero fills the screen under the header alone */
.hero { min-height: max(640px, calc(100svh - var(--header-h))); }

/* =====================================================================
   MOBILE -- every section, 390px first. Rule for this site: any new
   design, layout or content gets its phone treatment here too.
   ===================================================================== */
.only-sm { display: none; }
.stepper-now { display: none; }
@media (max-width: 720px) {
  .only-lg { display: none; } .only-sm { display: inline; }
  :root { --header-h: 64px; }
  .wrap { padding: 0 20px; }
  .header-in { height: 64px; grid-template-columns: 1fr auto; }
  .logo img { height: 20px; }
  .actions .btn.sm { height: 36px; padding: 0 16px; font-size: 14px; }

  /* hero: the dishes as a band on top, fading into the table colour; then badge, head, sub, the countdown card */
  .hero { display: block; min-height: 0; background: #89CEAD; }
  .hero > .hero-photo { position: absolute; left: 0; right: 0; top: 0; bottom: auto; height: 300px; }
  .hero > .hero-photo > img { object-position: 50% 0 !important; }
  .hero > .hero-photo::after { content: ''; position: absolute; inset: auto 0 0 0; height: 90px; z-index: 4; background: linear-gradient(180deg, rgba(137, 206, 173, 0), #89CEAD); }
  .hero-in { padding: 196px 20px 28px !important; }
  .hero .hero-badge { width: 104px; height: 104px; margin-bottom: 16px; }
  .hero .hero-badge .cup-mark { width: 38px; }
  .hero .h1 { font-size: 44px; line-height: 1.05; white-space: normal; }
  .hero-in .sub { margin-top: 16px; font-size: 17px; line-height: 26px; }
  .hero-cd { position: relative; top: auto !important; right: auto !important; z-index: 1; margin: 0 20px 32px; width: auto; box-shadow: 0 8px 24px rgba(24, 22, 22, .1); }
  .hero-cd .cd-tiles { justify-content: center; }
  .hero-cd .cd-t { flex: 1; width: auto; max-width: 96px; }

  /* sections */
  .sec, .overview, .nyc { padding: 72px 0; }
  .sec-head, .nyc-head { margin-bottom: 32px; }
  .sec-head .h2, .block-head .h4, .center-head .h4 { font-size: 34px !important; line-height: 1.1; }
  .sub { font-size: 17px; line-height: 26px; }
  .fold-line { padding: 56px 0; }
  .fold-line p { font-size: 28px; line-height: 1.2; }
  #how { min-height: 0; padding: 72px 0; }
  #how .sec-head .h2 { white-space: normal; }
  .step { display: flex; }
  #how .step-art { aspect-ratio: 16 / 10; }
  .step h3 { font-size: 26px; }

  .ov-art { aspect-ratio: 1 / 1; margin-bottom: 40px; }
  .ov-city { width: 88%; }
  .ov-concept { width: 50%; }
  .ov-copy .h3 { font-size: 32px; }

  .cup-block { margin-top: 72px; }
  .cats { gap: 16px; }
  .cat-n { font-size: 44px; }
  .cat-body { padding: 22px 22px 26px; }
  .cat-body h4 { font-size: 28px; }
  .winners { gap: 28px; }
  .winners .block-head p { max-width: none; }
  .winners .prize { padding: 24px; }
  .winners .prize.second { padding: 20px 24px; }
  .prize .amt { font-size: 64px; }
  .prize .cup-big { display: none; }
  .winners .prize.first ul { max-width: none; }
  .cup-cta { margin-top: 40px; }
  .cup-cta .btn, .lids-foot .btn { width: 100%; }

  .lid-card { width: 260px; }
  .lids-foot { padding: 0 20px; }

  /* footer: the W small, the columns side by side, the copyright last */
  .foot { padding: 48px 0 40px; }
  .fgrid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .fmark { grid-column: 1 / -1; }
  .fmark img { width: 56px; height: 56px; }
  .fbase { grid-column: 1 / -1; text-align: left; }
  .foot-steps { height: 48px; }

  /* the popup: a full-screen sheet; the steps as circles with the current one named; the buttons stay in reach */
  .modal { padding: 0 !important; place-items: stretch !important; }
  #wizard .modal-panel { width: 100vw; height: 100svh; max-height: none; border-radius: 0; }
  #wizard .wz-top { padding: 16px 20px 0; }
  #wizard .wz-title { font-size: 26px; line-height: 32px; }
  #wizard .wz-rule { margin: 16px 20px; }
  #wizard .wz-main { padding: 0 20px; }
  #wizard .stepper { margin-bottom: 10px; }
  #wizard .stepper li { flex: 1 1 0; }
  #wizard .stepper li span { display: none !important; }
  #wizard .stepper li:not(:last-child)::after { margin: 0 6px; }
  .stepper-now { display: block; margin: 0 0 20px; font-size: 13px; font-weight: 600; color: var(--soft); }
  #wizard .fs-head { margin-bottom: 20px; }
  #wizard .fs-head h3 { font-size: 22px; }
  #wizard .fs-head p { font-size: 15px; line-height: 22px; }
  #wizard .c6, #wizard .c4, #wizard .c3 { grid-column: span 12; }
  #wizard .c3 { grid-column: span 6; }
  #wizard .g { row-gap: 16px; margin-bottom: 24px; }
  #wizard .input, #wizard .dd-btn, #wizard .textarea { font-size: 16px; }   /* 16px stops iOS zooming into fields */
  #wizard .t-dish { height: 120px; }
  #wizard .t-tall { height: 160px; }
  #wizard .step-nav { position: sticky; bottom: 0; z-index: 3; margin: auto -20px 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: #fff; }
  #wizard .step-nav .btn { min-width: 0; flex: 1; }
  #wizard .step-nav { gap: 10px; }
  #wizard .step-nav > span:empty { display: none; }
  #wizard .drop { min-height: 0; }
  .done-c .done-ctas { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .done-c .h3 { font-size: 34px; }
}
@media (max-width: 720px) { #wizard .step-nav [data-back] { flex: 0 0 auto; padding: 0 18px; } #wizard .step-nav .btn:not([data-back]) { flex: 1; padding: 0 14px; } }
.nav a { white-space: nowrap; }
@media (max-width: 960px) { .nav { display: none; } .header-in { grid-template-columns: 1fr auto; } }

/* =====================================================================
   v2 -- waitlist first, a clear message, New York, less on the page.
   Every section below is a fixed template filled from content.js.
   ===================================================================== */
/* hero: the message, one line of why, the button */
.hero .h1 { font-size: clamp(52px, 6vw, 84px); line-height: 1.02; max-width: 900px; margin: 0 auto; }
.hero-in .sub { max-width: 640px; font-size: 20px; line-height: 30px; }
.hero-ctas { display: flex; justify-content: center; margin-top: 32px; }
@media (min-width: 721px) { .hero-in { padding-top: 170px !important; padding-bottom: 56px !important; } }

/* peach banner: the city line, then the way to learn about Create */
.v2-banner { padding: 88px 0; text-align: center; }
.v2-banner p { max-width: 920px; }
.v2-banner p em { display: block; color: var(--ink); margin-bottom: 6px; }
.v2-banner .btn.on-peach { margin-top: 32px; background: #fff; color: var(--ink); box-shadow: none; }
.v2-banner .btn.on-peach:hover { background: var(--feta); }

/* three key points: no fixed one-screen height here */
#how { min-height: 0 !important; display: block !important; padding: 112px 0 !important; }
#how .step-art { aspect-ratio: 4 / 3 !important; }
#how .step p { font-size: 16px; line-height: 24px; }

/* personas */
.personas { background: #fff; }
.nyc-only { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 6px 12px; border-radius: 8px; background: var(--shallot);
  font-size: 14px; font-weight: 600; color: var(--ube); }
.nyc-only i { width: 8px; height: 8px; border-radius: 50%; background: var(--ube); }
.pz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pz { margin: 0; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: var(--feta); }
.pz-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.pz-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform 1s var(--ease); }
.pz:hover .pz-img img { transform: scale(1.04); }
.pz-tag { position: absolute; top: 16px; left: 16px; padding: 5px 10px; border-radius: 6px; background: rgba(255, 255, 255, .94); font-size: 13px; font-weight: 600; color: var(--ink); }
.pz figcaption { padding: 24px 24px 28px; }
.pz figcaption b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1.12; color: var(--ink); }
.pz figcaption span { display: block; margin-top: 10px; font-size: 16px; line-height: 24px; color: var(--ink-2); }

/* the Cup at a glance */
.cup2 { background: var(--feta); }
.c2-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.c2-cat { display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px #E7E1DC; }
.c2-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.c2-art .bowl { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.c2-body { padding: 22px 24px 26px; }
.c2-n { font-family: var(--font-heading); font-weight: 300; font-size: 40px; line-height: 1; color: var(--ube); }
.c2-body h3 { margin-top: 10px; font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1.12; color: var(--ink); }
.c2-body p { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.c2-facts { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.c2-prize, .c2-fact { border-radius: var(--r); padding: 24px 28px; }
.c2-prize { display: flex; align-items: center; gap: 20px; background: linear-gradient(90deg, rgba(250, 192, 255, .65), rgba(255, 123, 97, .22)); box-shadow: inset 0 0 0 1px rgba(184, 3, 184, .25); }
.c2-prize > b { font-family: var(--font-heading); font-weight: 400; font-size: 72px; line-height: 1; color: var(--ink); }
.c2-prize span, .c2-fact span { display: block; font-weight: 600; font-size: 18px; line-height: 24px; color: var(--ink); }
.c2-prize p, .c2-fact p { margin-top: 4px; font-size: 16px; line-height: 22px; color: var(--ink-2); }
.c2-fact { background: #fff; box-shadow: inset 0 0 0 1px #E7E1DC; }
.cup2 .cup-cta { flex-direction: column; align-items: center; gap: 18px; }
.c2-faq { font-size: 16px; }

/* ---- v6's footer, 1:1 ---- */
.z-foot-steps { background: #fff; height: 80px; }
.z-foot-steps .g-stairs { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; height: 80px; direction: rtl; }
.z-foot-steps .g-stairs i { height: 80px; background: linear-gradient(180deg, var(--ube) 0%, var(--pitaya) 30%, var(--spicy-mayo) 75%, var(--shallot) 93%);
  transform: scaleY(0); transform-origin: bottom; transition: transform .9s cubic-bezier(.19, 1, .22, 1) var(--dl); }
.z-foot-steps .g-stairs i:nth-child(even) { background: linear-gradient(0deg, var(--ube) 0%, var(--pitaya) 30%, var(--spicy-mayo) 75%, var(--shallot) 93%); }
.z-foot-steps.in .g-stairs i { transform: none; }
.z-foot { padding: 72px 0 40px; background: var(--feta); }
.z-foot .z-wrap { max-width: none; padding: 0 120px; }
.z-fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }
.z-fmark img { width: 112px; height: 112px; display: block; }
.z-fcol h4 { font-family: var(--font-body); font-weight: 600; font-size: 19.47px; line-height: 24px; color: var(--ink); margin-bottom: 16px; }
.z-fcol ul { display: flex; flex-direction: column; gap: 6px; }
.z-fcol a { position: relative; display: inline-block; z-index: 0; font-size: 16.8px; line-height: 1.5; font-weight: 500; padding: 2px 8px; margin: 0 -8px; color: #5E0066; }
.z-fcol a::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 8px;
  background: linear-gradient(90deg, rgba(184, 3, 184, .22), rgba(239, 0, 175, .22) 30%, rgba(255, 123, 97, .22) 75%, rgba(250, 192, 255, .3) 93%);
  transform: scaleY(0); transition: transform .35s var(--ease); }
.z-fcol a:hover::before, .z-fcol a:focus-visible::before { transform: scaleY(1); }
.z-fbase { font-size: 15.6px; color: var(--ink); text-align: right; padding-top: 2px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .z-foot-steps .g-stairs i { transform: none; transition: none; } }
.foot-steps, .foot { display: none; }

/* ---- the FAQ page ---- */
.faq-page { background: #fff; }
.faq { padding: 96px 0 120px; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.faq-side { position: sticky; top: calc(var(--header-h) + 40px); }
.faq-side .h2 { color: var(--pesto); }
.faq-side .sub { margin-top: 16px; }
.faq-toc { display: flex; flex-direction: column; gap: 4px; margin: 28px 0 32px; }
.faq-toc a { align-self: flex-start; font-weight: 500; color: var(--ink); padding: 4px 0; border-bottom: 1px solid transparent; }
.faq-toc a:hover { border-color: var(--ink); }
.faq-g + .faq-g { margin-top: 48px; }
.faq-g { scroll-margin-top: calc(var(--header-h) + 24px); }
.faq-g h2 { font-family: var(--font-body); font-weight: 600; font-size: var(--vh8); line-height: 1.25; color: var(--ink); margin-bottom: 8px; }
.faq-qs { border-top: 1px solid #E7E1DC; }
.faq-qs .q { border-bottom: 1px solid #E7E1DC; }
.faq-qs .q + .q { border-top: 0; }
.faq-qs .q-h { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 26px; color: var(--ink); padding: 18px 0; }
.faq-qs .q-a .in { font-size: 16px; line-height: 26px; color: var(--ink-2); padding: 0 48px 20px 0; }
.faq-qs .q-a .in b { color: var(--ink); }
.s1-fine { font-size: 13px; line-height: 19px; color: var(--soft); }
.nav a[aria-current] { color: var(--ube); }

/* ---- v2 on phones ---- */
@media (max-width: 1080px) {
  .pz-grid, .c2-cats { grid-template-columns: 1fr 1fr; }
  .c2-facts { grid-template-columns: 1fr 1fr; } .c2-prize { grid-column: 1 / -1; }
  .faq-grid { grid-template-columns: 1fr; gap: 40px; } .faq-side { position: static; }
  .z-foot .z-wrap { padding: 0 32px; }
}
@media (max-width: 720px) {
  .hero .h1 { font-size: 42px; }
  .hero-in { padding-top: 210px !important; }
  .hero-in .sub { font-size: 17px; line-height: 26px; }
  .hero-ctas .btn { width: 100%; }
  .v2-banner { padding: 56px 0; }
  .v2-banner .btn.on-peach { width: 100%; }
  #how { padding: 72px 0 !important; }
  .pz-grid, .c2-cats, .c2-facts { grid-template-columns: 1fr; gap: 16px; }
  .pz-img { aspect-ratio: 4 / 3; }
  .pz figcaption b, .c2-body h3 { font-size: 24px; }
  .c2-prize { padding: 20px 22px; } .c2-prize > b { font-size: 56px; }
  .cup2 .cup-cta .btn { width: 100%; }
  .faq { padding: 56px 0 72px; }
  .faq-qs .q-a .in { padding-right: 0; }
  .z-foot { padding: 48px 0 40px; }
  .z-foot .z-wrap { padding: 0 20px; }
  .z-fgrid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .z-fmark { grid-column: 1 / -1; } .z-fmark img { width: 56px; height: 56px; }
  .z-fbase { grid-column: 1 / -1; text-align: left; }
  .z-foot-steps, .z-foot-steps .g-stairs, .z-foot-steps .g-stairs i { height: 48px; }
}

/* ===== v2, round 2: the new hero shot, the badge in a centred countdown card ===== */
.hero { background: #4EE0BD; }
.hero > .hero-photo > img { object-position: 50% 50% !important; }
@media (min-width: 721px) { .hero-in { padding-top: 72px !important; padding-bottom: 72px !important; } }
.hero .h1 { max-width: 880px; }
.hero-cd { position: relative !important; top: auto !important; right: auto !important; display: flex; align-items: center; gap: 20px;
  margin: 36px auto 0; width: max-content; padding: 16px 22px 16px 16px; text-align: left; }
.hero-cd .cd-badge { position: relative; inset: auto; width: 104px; height: 104px; flex: none; }
.hero-cd .cd-badge .cup-mark { width: 38px; }
.hero-cd .cd-badge .roundel-ring text { font-size: 11px; }
.hero-cd .cd-main > b { display: block; font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 20px; color: var(--ink); }
.hero-cd .cd-tiles { margin-top: 10px; justify-content: flex-start; }
.hero-cd .cd-date { display: none; }
@media (max-width: 720px) {
  .hero { background: #4EE0BD; }
  .hero > .hero-photo { inset: 0 !important; height: auto !important; }
  .hero > .hero-photo::after { display: none; }
  .hero > .hero-photo > img { object-position: 50% 0 !important; }
  .hero-in { padding: 64px 20px 40px !important; }
  .hero .h1 { font-size: 38px; line-height: 1.08; }
  .hero-cd { width: 100%; margin-top: 24px; gap: 14px; padding: 14px; }
  .hero-cd .cd-badge { width: 76px; height: 76px; }
  .hero-cd .cd-badge .cup-mark { width: 28px; }
  .hero-cd .cd-main { flex: 1; min-width: 0; }
  .hero-cd .cd-main > b { font-size: 14px; }
  .hero-cd .cd-t { flex: 1; width: auto; }
  .hero-cd .cd-t b { font-size: 24px; line-height: 28px; }
}
.hero .h1 { font-size: clamp(44px, 4.6vw, 66px); line-height: 1.04; }
@media (min-width: 721px) { .hero { min-height: max(820px, calc(100svh - var(--header-h))); } .hero-in { padding-top: 150px !important; padding-bottom: 64px !important; } }
@media (max-width: 720px) { .hero-in { padding-top: 190px !important; } .hero .h1 { font-size: 40px; } }
@media (min-width: 721px) { .hero-in .sub { max-width: 540px; } }
/* personas match the How it works tiles: the same 4:3 photo */
.pz-img { aspect-ratio: 4 / 3; }
.pz-img img { object-position: center 30%; }
.pz figcaption { padding-bottom: 32px; }
.pz:nth-child(1) .pz-img img { object-position: center 8%; }
.pz:nth-child(2) .pz-img img { object-position: center 4%; }
.pz:nth-child(3) .pz-img img { object-position: center 0%; }

/* =====================================================================
   v2 round 3: checker band, New York first, pinned Wonder Create cards,
   the Cup in the deli-cup Greek key
   ===================================================================== */
/* the taxicab checker (Figma 95:61): 60px squares, #FFD64A / #FAAB20, two rows */
.checker { height: 120px; background: conic-gradient(#FAAB20 0 90deg, #FFD64A 90deg 180deg, #FAAB20 180deg 270deg, #FFD64A 270deg 360deg) 0 0 / 120px 120px; }

/* New York cards in the How-it-works colours: Ginger, Pesto, Shallot */
.pz:nth-child(1) { background: var(--ginger); }
.pz:nth-child(2) { background: var(--pesto); }
.pz:nth-child(3) { background: var(--shallot); }
.pz:nth-child(2) figcaption b { color: var(--shallot); }
.pz:nth-child(2) figcaption span { color: rgba(250, 245, 238, .86); }
.pz figcaption span { color: var(--ink); }

/* Wonder Create: head left, the cards right, pinned while you scroll through them */
.wc { background: #fff; }
.wc-track { position: relative; height: calc((var(--n) * .75 + 1) * 100vh); }
.wc-stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: flex; align-items: center; }
.wc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; width: 100%; }
.wc-copy .h2 { color: var(--pesto); }
.wc-copy .sub { margin-top: 16px; }
.wc-dots { margin-top: 40px; display: grid; gap: 4px; }
.wc-dots li { display: flex; align-items: center; gap: 14px; padding: 10px 0; font-weight: 500; font-size: 17px; color: rgba(35, 31, 32, .45); cursor: pointer; transition: color .4s ease; }
.wc-dots li i { width: 8px; height: 8px; border-radius: 999px; background: #E7E1DC; transition: width .5s var(--ease), background .4s ease; }
.wc-dots li.on { color: var(--ink); }
.wc-dots li.on i { width: 28px; background: var(--ube); }
.wc-cards { position: relative; height: min(600px, calc(100vh - var(--header-h) - 96px)); }
.wc-card { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: #F7F6F3;
  opacity: 0; transform: translateY(64px) scale(.97); transition: opacity .6s ease, transform .8s var(--ease); pointer-events: none; }
.wc-card.cur { opacity: 1; transform: none; pointer-events: auto; }
.wc-card.past { opacity: 0; transform: translateY(-48px) scale(.95); }
.wc-art { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.wc-art > img, .wc-art > .bowl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.wc-body { padding: 24px 28px 28px; }
.wc-n { font-family: var(--font-heading); font-weight: 300; font-size: 40px; line-height: 1; color: var(--ube); }
.wc-body h3 { margin-top: 8px; font-family: var(--font-heading); font-weight: 300; font-size: 32px; line-height: 1.1; color: var(--ink); }
.wc-body p { margin-top: 8px; font-size: 17px; line-height: 26px; color: var(--ink-2); max-width: 520px; }

/* the Cup: Ube, the Greek key of the classic NYC deli cup, the prize up front */
.cup3 { background: var(--feta); }
.cup-panel { --key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 37h40M4 37V5h32v24H14V15h12' fill='none' stroke='%23FAF5EE' stroke-width='3.4' stroke-linejoin='miter'/%3E%3C/svg%3E");
  position: relative; border-radius: 32px; overflow: hidden; background: var(--ube); color: var(--feta); }
.cup-panel::before { content: ''; position: absolute; inset: 0; background: var(--key) 0 0 / 56px 56px repeat; opacity: .08; pointer-events: none; }
.key-band { position: relative; height: 48px; background: var(--ube-deep) var(--key) 0 50% / 48px 48px repeat-x; }
.cup-in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 64px 32px 72px; }
.cup-emblem { width: 120px; height: 120px; border-radius: 50%; background: var(--feta); display: grid; place-items: center; box-shadow: 0 0 0 8px rgba(250, 245, 238, .18); }
.cup-emblem .cup-mark { width: 52px; transform: rotate(-6deg); }
.cup-title { margin-top: 28px; font-family: var(--font-heading); font-weight: 400; font-size: var(--h2); line-height: 1.04; color: var(--feta); }
.cup-sub { margin-top: 10px; font-size: 19px; color: var(--shallot); }
.cup-prize { margin-top: 36px; display: flex; flex-direction: column; align-items: center; }
.cup-prize b { font-family: var(--font-heading); font-weight: 400; font-size: clamp(96px, 12vw, 168px); line-height: .9; color: var(--feta); letter-spacing: -.02em; }
.cup-prize span { margin-top: 8px; font-family: var(--font-heading); font-weight: 300; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; color: var(--shallot); }
.cup-prize p { margin-top: 10px; font-size: 17px; color: rgba(250, 245, 238, .86); }
.cup-final { margin-top: 32px; display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 12px;
  background: rgba(250, 245, 238, .12); box-shadow: inset 0 0 0 1px rgba(250, 245, 238, .35); font-weight: 600; font-size: 18px; line-height: 24px; color: var(--feta); }
.cup-final i { width: 18px; height: 18px; flex: none; background: url('img/ai-sparkle.svg') center / contain no-repeat; filter: brightness(0) invert(96%); }
.cup-cats { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cup-cats > span { font-size: 15px; color: var(--shallot); }
.cup-cats ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cup-cats li { padding: 8px 14px; border-radius: 8px; background: rgba(250, 245, 238, .14); font-weight: 500; font-size: 15px; color: var(--feta); }
.cup-go { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.btn.on-ube { background: var(--feta); color: var(--ube); }
.btn.on-ube:hover { background: #fff; }
.cup-faq { color: var(--feta); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1080px) {
  .wc-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 720px) {
  .checker { height: 80px; background-size: 80px 80px; }
  .wc { padding: 72px 0; }
  .wc-track { height: auto; }
  .wc-stage { position: static; height: auto; display: block; }
  .wc-grid { grid-template-columns: 1fr; gap: 28px; }
  .wc-dots { display: none; }
  .wc-cards { height: auto; display: grid; gap: 16px; }
  .wc-card, .wc-card.past, .wc-card.next { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; }
  .wc-art { flex: none; aspect-ratio: 4 / 3; }
  .wc-body h3 { font-size: 26px; }
  .cup-panel { border-radius: 24px; }
  .key-band { height: 36px; background-size: 36px 36px; }
  .cup-in { padding: 44px 20px 52px; }
  .cup-emblem { width: 96px; height: 96px; }
  .cup-title { font-size: 34px; }
  .cup-final { font-size: 16px; text-align: left; }
  .cup-go .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .wc-card { transition: none; } }

/* the band: the running key between two rules, as on the cup */
.key-band { box-shadow: inset 0 3px 0 rgba(250, 245, 238, .9), inset 0 -3px 0 rgba(250, 245, 238, .9); background-size: 44px 44px; background-position: 0 2px; }

/* ===== v2 round 4 ===== */
/* hero: two lines; the type block 150px wider */
.hero .h1 { max-width: 1030px; }
@media (min-width: 721px) { .hero-in .sub { max-width: 690px; } }

/* Wonder Create: 3:4 cards with a carousel marker under them; no step titles */
.wc-right { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.wc-cards { height: min(640px, calc(100vh - var(--header-h) - 120px)); aspect-ratio: 3 / 4; width: auto; }
.wc-body h3 { font-size: 28px; }
.wc-body p { font-size: 16px; line-height: 24px; }
.wc-marker { display: flex; gap: 8px; }
.wc-marker i { width: 8px; height: 8px; border-radius: 999px; background: #E7E1DC; transition: width .5s var(--ease), background .4s ease; }
.wc-marker i.on { width: 28px; background: var(--ube); }

/* the Cup: full width, 600px tall, the Greek key in the checker yellows */
.cup3 { padding: 0 !important; }
.cup-panel { --key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 37h40M4 37V5h32v24H14V15h12' fill='none' stroke='%23FFD64A' stroke-width='3.4'/%3E%3C/svg%3E");
  border-radius: 0; height: 600px; display: flex; flex-direction: column; }
.cup-panel::before { opacity: .16; }
.key-band { flex: none; height: 44px; background-color: #FAAB20; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 37h40M4 37V5h32v24H14V15h12' fill='none' stroke='%23B803B8' stroke-width='3.4'/%3E%3C/svg%3E");
  box-shadow: inset 0 3px 0 #FFD64A, inset 0 -3px 0 #FFD64A; }
.cup-in { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; text-align: left; padding: 0 32px; }
.cup-l { display: flex; flex-direction: column; align-items: flex-start; }
.cup-emblem { width: 88px; height: 88px; }
.cup-emblem .cup-mark { width: 40px; }
.cup-title { margin-top: 20px; font-size: var(--h2); }
.cup-sub { margin-top: 8px; }
.cup-go { margin-top: 28px; flex-direction: row; align-items: center; gap: 24px; }
.cup-r { display: flex; flex-direction: column; align-items: flex-start; }
.cup-prize { margin-top: 0; flex-direction: row; align-items: center; gap: 20px; }
.cup-prize b { font-size: clamp(96px, 10vw, 150px); color: #FFD64A; }
.cup-prize span { margin-top: 0; display: block; color: var(--feta); }
.cup-prize p { margin-top: 4px; text-align: left; }
.cup-final { margin-top: 24px; }
.cup-final i { filter: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z' fill='%23FFD64A'/%3E%3C/svg%3E"); }
.cup-cats { margin-top: 24px; align-items: flex-start; }
.cup-cats ul { justify-content: flex-start; }
@media (max-width: 1080px) { .cup-panel { height: auto; } .cup-in { grid-template-columns: 1fr; gap: 32px; padding: 56px 32px; } }
@media (max-width: 720px) {
  .wc-right { align-items: stretch; } .wc-cards { aspect-ratio: auto; height: auto; } .wc-marker { display: none; }
  .wc-card .wc-art { aspect-ratio: 3 / 4; }
  .cup-in { padding: 44px 20px; gap: 28px; }
  .cup-go { flex-direction: column; align-items: stretch; width: 100%; }
  .cup-prize { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cup-prize b { font-size: 96px; }
}
.cup-panel::before { opacity: .09; }

/* ===== v2 round 5 ===== */
/* the Cup: the running key in the two checker yellows, a card on top with 120px of pattern above and below */
.cup4 { padding: 120px 0; background-color: #FFD64A;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 37h40M4 37V5h32v24H14V15h12' fill='none' stroke='%23FAAB20' stroke-width='3.4'/%3E%3C/svg%3E");
  background-size: 56px 56px; }
.cup-card { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; padding: 56px; border-radius: var(--r); background: #fff;
  box-shadow: 0 20px 50px rgba(120, 70, 0, .14); }
.cup-card-l { display: flex; flex-direction: column; align-items: flex-start; }
.cup-card .cup-badge { position: relative; inset: auto; width: 120px; height: 120px; margin-bottom: 20px; }
.cup-card .cup-badge .cup-mark { width: 44px; }
.cup-card .cup-title { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: var(--h2); line-height: 1.04; color: var(--pesto); }
.cup-card .cup-sub { margin-top: 14px; max-width: 540px; font-size: 18px; line-height: 28px; color: var(--ink-2); }
.cup-card .cup-final { margin-top: 24px; display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(250, 192, 255, .65), rgba(255, 123, 97, .22)); box-shadow: inset 0 0 0 1px rgba(184, 3, 184, .25);
  font-weight: 600; font-size: 16px; line-height: 22px; color: var(--ink); }
.cup-card .cup-final i { width: 16px; height: 16px; flex: none; filter: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z' fill='%23B803B8'/%3E%3C/svg%3E") center / contain no-repeat; }
.cup-card .cup-go { margin-top: 28px; display: flex; flex-direction: row; align-items: center; gap: 24px; }
.cup-card .cup-faq { color: var(--ube); }

/* the prize as a Grubhub gift card */
.cup-card-r { display: flex; justify-content: center; perspective: 1200px; }
.gh-card { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1.586; border-radius: 20px; overflow: hidden; padding: 26px 28px;
  display: flex; flex-direction: column; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #FF9A2E 0%, #FF8000 38%, #F05A00 100%);
  box-shadow: 0 24px 50px rgba(240, 90, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .18);
  transform: rotate(-4deg); transition: transform .6s var(--ease); }
.cup-card:hover .gh-card { transform: rotate(-1deg) translateY(-6px); }
.gh-card::before { content: ''; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.gh-card::after { content: ''; position: absolute; right: 40px; bottom: -120px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.gh-word { position: relative; z-index: 1; font-family: 'Avenir Next', 'Helvetica Neue', Arial, sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -.02em; line-height: 1; }
.gh-kind { position: relative; z-index: 1; margin-top: 6px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.gh-amt { position: relative; z-index: 1; margin-top: auto; font-family: 'Avenir Next', 'Helvetica Neue', Arial, sans-serif; font-weight: 800; font-size: clamp(64px, 6.4vw, 92px); line-height: .95; letter-spacing: -.03em; }
.gh-for { position: relative; z-index: 1; margin-top: 8px; font-size: 14px; font-weight: 500; opacity: .92; }
.gh-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 45%, transparent 60%);
  transform: translateX(-100%); animation: gh-shine 4.5s ease-in-out 1.2s infinite; }
@keyframes gh-shine { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .gh-shine { animation: none; } }

/* categories, from v1 */
.cats-sec { background: var(--feta); }
.cats-sec .block-head { margin-bottom: 40px; }
.cats-sec .block-head .h2 { color: var(--pesto); }
.cat-bar.g1 { background: linear-gradient(90deg, var(--ube) 0%, var(--pitaya) 30%, var(--spicy-mayo) 75%, var(--shallot) 93%); }
.cat-bar.g2 { background: linear-gradient(90deg, var(--celery) 0%, var(--mint-jelly) 30%, var(--ginger) 75%, var(--cucumber) 93%); }
.cat-bar.g3 { background: linear-gradient(90deg, var(--pitaya) 0%, var(--spicy-mayo) 100%); }
.cats-sec .cup-cta { margin-top: 48px; }

/* Wonder Create, now last before the footer, on Feta */
.wc { background: var(--feta); }
.wc-card { background: #fff; }
.z-foot-steps { background: var(--feta); }

@media (max-width: 1080px) { .cup-card { grid-template-columns: 1fr; gap: 40px; padding: 40px; } }
@media (max-width: 720px) {
  .cup4 { padding: 56px 0; background-size: 40px 40px; }
  .cup-card { padding: 28px 22px; gap: 32px; }
  .cup-card .cup-badge { width: 92px; height: 92px; }
  .cup-card .cup-title { font-size: 34px; }
  .cup-card .cup-sub { font-size: 16px; line-height: 24px; }
  .cup-card .cup-go { flex-direction: column; align-items: stretch; width: 100%; gap: 14px; text-align: center; }
  .gh-card { padding: 20px 22px; border-radius: 16px; }
  .gh-word { font-size: 24px; }
  .cats-sec .cup-cta .btn { width: 100%; }
}

/* ===== v2 round 6 ===== */
/* the Cup card, a little smaller; its right half in vertical bands of Gradient 2, the credit cards stacked on top */
.cup-card { max-width: 1120px; margin: 0 auto; padding: 0; gap: 0; overflow: hidden; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.cup-card-l { padding: 48px 48px 52px; justify-content: center; }
.cup-card .cup-badge { width: 104px; height: 104px; margin-bottom: 18px; }
.cup-card .cup-title { font-size: clamp(36px, 3.6vw, 52px); }
.cup-card .cup-sub { font-size: 17px; line-height: 26px; }
.cup-card-r { position: relative; min-height: 460px; align-items: center; justify-content: center; perspective: none;
  background: linear-gradient(180deg, var(--celery) 0%, var(--mint-jelly) 30%, var(--ginger) 75%, var(--cucumber) 93%); }
.cup-card-r::before { content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 6), rgba(0, 0, 0, 0) calc(100% / 6) calc(100% / 3)); }
.cup-card-r .bands { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.gh-stack { position: relative; z-index: 1; width: min(380px, 78%); aspect-ratio: 1.586; }
.gh-stack .gh-card { position: absolute; inset: 0; max-width: none; width: 100%;
  transform: translate(calc(var(--i) * -18px), calc(var(--i) * -22px)) rotate(calc(-4deg - var(--i) * 4deg)); }
.gh-stack .gh-card[style*='--i:0'] { z-index: 3; } .gh-stack .gh-card[style*='--i:1'] { z-index: 2; filter: brightness(.94); } .gh-stack .gh-card[style*='--i:2'] { z-index: 1; filter: brightness(.88); }
.cup-card:hover .gh-stack .gh-card { transform: translate(calc(var(--i) * -30px), calc(var(--i) * -34px)) rotate(calc(-3deg - var(--i) * 6deg)); }
/* Grubhub's brand orange, sampled from their app icon: #FF5500 */
.gh-card { background: #FF5500; box-shadow: 0 18px 40px rgba(120, 40, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .16); padding: 24px 26px; }
.gh-card::before { background: rgba(255, 255, 255, .08); } .gh-card::after { background: rgba(255, 255, 255, .05); }
.gh-icon { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 12px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.gh-kind { margin-top: 12px; font-size: 14px; letter-spacing: .08em; }
.gh-amt { font-family: var(--font-body); font-weight: 600; }
.gh-word, .gh-for { display: none; }
.gh-stack .gh-card:not([style*='--i:0']) .gh-shine { display: none; }

/* categories, as the pinned carousel */
.cats-wc { background: var(--feta); }
.cats-wc .wc-copy .h2 { color: var(--pesto); }
.wc-cta { margin-top: 32px; }
.cat-card { background: #fff; }
.cat-card .wc-art { position: relative; }
.cat-card .cat-eg { position: absolute; top: 14px; left: 14px; z-index: 3; }
.cat-card .cat-bar { display: block; height: 10px; flex: none; }
.cat-card .wc-body h3 { font-weight: 400; }
.cat-card .wc-body p { font-size: 15px; line-height: 22px; }
.cats-sec { display: none; }

/* thought starters, back at the bottom */
.lids { background: #fff; }
.lids .sec-head { margin-bottom: 40px; }

@media (max-width: 1080px) { .cup-card { grid-template-columns: 1fr; } .cup-card-r { min-height: 380px; } }
@media (max-width: 720px) {
  .cup-card-l { padding: 28px 22px 32px; }
  .cup-card-r { min-height: 300px; }
  .gh-stack { width: 72%; }
  .gh-icon { width: 40px; height: 40px; border-radius: 9px; }
  .wc-cta .btn { width: 100%; }
}
/* the bands: six equal bars of Gradient 2, alternating 180 degrees (the guide's full grid) */
.cup-card-r { background: none; }
.cup-card-r::before { display: none; }
.cup-card-r .bands i { background: linear-gradient(180deg, var(--celery) 0%, var(--mint-jelly) 30%, var(--ginger) 75%, var(--cucumber) 93%); }
.cup-card-r .bands i:nth-child(even) { background: linear-gradient(0deg, var(--celery) 0%, var(--mint-jelly) 30%, var(--ginger) 75%, var(--cucumber) 93%); }

/* ===== v2: the business section -- three text touts between vertical rules, on Feta ===== */
.biz { background: var(--feta); }
.biz .sec-head { margin-bottom: 56px; }
.biz .sec-head .h2 { max-width: 860px; margin: 0 auto; }
.biz-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.biz-t { padding: 4px 40px 8px; }
.biz-t + .biz-t { border-left: 1px solid #E7E1DC; }
.biz-t:first-child { padding-left: 0; } .biz-t:last-child { padding-right: 0; }
.biz-n { display: block; font-family: var(--font-heading); font-weight: 300; font-size: 44px; line-height: 1; color: var(--ube); }
.biz-t h3 { margin-top: 18px; font-family: var(--font-body); font-weight: 600; font-size: var(--vh8); line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.biz-t p { margin-top: 10px; font-size: 17px; line-height: 26px; color: var(--ink-2); max-width: 340px; }
@media (max-width: 720px) {
  .biz .sec-head { margin-bottom: 32px; }
  .biz-row { grid-template-columns: 1fr; }
  .biz-t, .biz-t:first-child, .biz-t:last-child { padding: 24px 0; }
  .biz-t + .biz-t { border-left: 0; border-top: 1px solid #E7E1DC; }
  .biz-n { font-size: 36px; }
}
/* the touts carry the old section's photos: 4:3, rounded, above the number */
.biz-art { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; margin-bottom: 24px; background: #F7F6F3; }
.biz-art > img, .biz-art > .bowl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.biz-t p { max-width: none; }
/* equal columns: the gap carries the rule, so every tout (and its photo) is the same width */
.biz-row { column-gap: 80px; }
.biz-t, .biz-t:first-child, .biz-t:last-child { padding: 0; position: relative; }
.biz-t + .biz-t { border-left: 0; }
.biz-t + .biz-t::before { content: ''; position: absolute; left: -40px; top: 0; bottom: 0; width: 1px; background: #E7E1DC; }
@media (max-width: 720px) {
  .biz-row { row-gap: 0; }
  .biz-t, .biz-t:first-child, .biz-t:last-child { padding: 24px 0; }
  .biz-t + .biz-t::before { display: none; }
  .biz-t + .biz-t { border-top: 1px solid #E7E1DC; }
}
/* the Cup's two promises, ticked: Volte Medium 20, text primary */
.cup-perks { margin-top: 22px; display: grid; gap: 12px; }
.cup-perks li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; font-family: var(--font-body); font-weight: 500; font-size: 20px; line-height: 28px; color: var(--ink); }
.cup-perks li::before { content: ''; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ube) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1.5 5.8l3.6 3.6L12.5 1.8' fill='none' stroke='%23FAF5EE' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
@media (max-width: 720px) { .cup-perks li { font-size: 18px; line-height: 26px; } }
/* the ticks: plain black checkmarks, no circle; the copy at 18px */
.cup-perks li { grid-template-columns: 20px 1fr; gap: 12px; font-size: 18px; line-height: 26px; }
.cup-perks li::before { width: 20px; height: 26px; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14'%3E%3Cpath d='M1.5 7.5l4.8 4.8L16.5 2' fill='none' stroke='%23181616' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
/* the perks at 16px */
.cup-perks li { font-size: 16px; line-height: 24px; }
.cup-perks li::before { height: 24px; }
@media (max-width: 720px) { .cup-perks li { font-size: 16px; line-height: 24px; } }

/* ===== FAQ expanders, as on v6's FAQ page ===== */
.faq-qs { border-top: 1px solid #E7E1DC; }
.faq-qs .q { border-bottom: 1px solid #E7E1DC; }
.faq-qs .q-h { gap: 24px; padding: 22px 0; font-family: var(--font-body); font-weight: 500; font-size: 24px; line-height: 30px; color: var(--ink); }
.faq-qs .q-a { transition: grid-template-rows .45s var(--ease); }
.faq-qs .q-a .in { padding: 0 64px 26px 0; font-size: 17px; line-height: 1.6; color: var(--ink); max-width: 62ch; }
/* the chip: Shallot with a deep-plum plus closed; Ube with a Feta minus open, turning as it opens */
.faq-qs .pm { width: 36px; height: 36px; border-radius: 999px; background: var(--shallot); transition: background .3s, transform .4s var(--ease); }
.faq-qs .pm::before, .faq-qs .pm::after { width: 14px; height: 1.5px; background: #2C0040; transition: transform .4s var(--ease), background .3s; }
.faq-qs .q.open .pm { background: var(--ube); transform: rotate(180deg); }
.faq-qs .q.open .pm::before, .faq-qs .q.open .pm::after { background: var(--feta); }
@media (max-width: 720px) { .faq-qs .q-h { font-size: 19px; line-height: 26px; padding: 18px 0; } .faq-qs .q-a .in { padding-right: 0; font-size: 16px; } }

/* =====================================================================
   v3 -- the contest first, less scrolling: side-swipe carousels, the
   same type, photography, colours and patterns as v2.
   ===================================================================== */
:root { --edge: max(32px, calc((100vw - 1320px) / 2)); }
@media (max-width: 720px) { :root { --edge: 20px; } }

/* section rhythm, tighter than v2 */
.sec { padding: 96px 0; }
.left-head { display: block; text-align: left; margin-bottom: 36px; }
.left-head .sub { margin-left: 0; }
.sec-head .h2 { color: var(--pesto); }

/* hero */
.hero .h1 { max-width: 1030px; }
.checker.thin { height: 48px; background-size: 48px 48px; }
/* hero B: copy left on Feta, the photo right */
.hero-split { background: var(--feta); min-height: 0 !important; display: block; }
.hs-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.hs-copy { text-align: left; }
.hero-split .h1 { margin: 0; font-size: clamp(48px, 5vw, 76px); color: var(--ink); }
.hero-split .sub { margin: 20px 0 0; max-width: 560px; font-size: 19px; line-height: 29px; color: var(--ink-2); }
.hero-split .hero-ctas { justify-content: flex-start; }
.hero-split .hero-cd { margin: 32px 0 0 !important; }
.hs-photo { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r); overflow: hidden; background: #4EE0BD; }
.hs-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }

/* ---- the carousel ---- */
.car-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  padding: 4px var(--edge) 8px; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.car-track::-webkit-scrollbar { display: none; }
.car-track.drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.car-track.drag * { pointer-events: none; }
.car-card { flex: none; scroll-snap-align: start; }
.car-track::after { content: ''; flex: none; width: 1px; }
.car-ctl { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.car-dots { display: flex; gap: 8px; }
.car-dots button { width: 8px; height: 8px; border-radius: 999px; background: #E7E1DC; transition: width .4s var(--ease), background .3s; }
.car-dots button.on { width: 28px; background: var(--ube); }
.car-arrows { display: flex; gap: 10px; }
.car-btn { width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #E7E1DC; transition: background .2s, opacity .2s; }
.car-btn:hover { background: #F7F6F3; }
.car-btn:disabled { opacity: .35; cursor: default; }
.car.fits .car-ctl { display: none; }

/* 2 -- what is Wonder Create */
.what { background: var(--feta); }
.w-card { width: min(520px, 38vw); display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: #fff; }
.w-art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.w-art > img, .w-art > .bowl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.w-body { padding: 24px 28px 28px; }
.w-n, .c-n { font-family: var(--font-heading); font-weight: 300; font-size: 40px; line-height: 1; color: var(--ube); }
.w-body h3, .c-body h3 { margin-top: 10px; font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); }
.w-body p, .c-body p { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.what-row .biz-row { margin-top: 8px; }

/* 3 -- how the competition works: the Greek-key panel (A) */
.how-k { padding: 96px 0; background-color: #FFD64A;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 37h40M4 37V5h32v24H14V15h12' fill='none' stroke='%23FAAB20' stroke-width='3.4'/%3E%3C/svg%3E");
  background-size: 56px 56px; }
.hk-card { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--r); overflow: hidden; background: #fff;
  box-shadow: 0 20px 50px rgba(120, 70, 0, .14); }
.hk-l { padding: 48px 48px 52px; }
.hk-l .h2 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.06; color: var(--pesto); }
.hk-l .sub { margin-top: 12px; font-size: 17px; line-height: 26px; }
.hk-steps { margin-top: 28px; display: grid; gap: 0; border-top: 1px solid #E7E1DC; }
.hk-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid #E7E1DC; }
.hk-n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--shallot); color: var(--ube); font-weight: 600; font-size: 15px; }
.hk-steps b { display: block; font-weight: 600; font-size: 18px; line-height: 24px; color: var(--ink); }
.hk-steps p { margin-top: 2px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.hk-go { margin-top: 28px; }
.hk-r { position: relative; min-height: 460px; display: flex; align-items: center; justify-content: center; }
.hk-r .bands { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.hk-r .bands i { background: linear-gradient(180deg, var(--celery) 0%, var(--mint-jelly) 30%, var(--ginger) 75%, var(--cucumber) 93%); }
.hk-r .bands i:nth-child(even) { background: linear-gradient(0deg, var(--celery) 0%, var(--mint-jelly) 30%, var(--ginger) 75%, var(--cucumber) 93%); }
.hk-card:hover .gh-stack .gh-card { transform: translate(calc(var(--i) * -30px), calc(var(--i) * -34px)) rotate(calc(-3deg - var(--i) * 6deg)); }
/* B: a timeline */
.how-t { background: #fff; }
.ht-line { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 8px; }
.ht-line::before { content: ''; position: absolute; left: 0; right: 0; top: 49px; height: 2px; background: linear-gradient(90deg, var(--ube), var(--pitaya), var(--spicy-mayo)); }
.ht-line li { position: relative; }
.ht-tag { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--shallot); color: var(--ube); font-weight: 600; font-size: 13px; }
.ht-dot { display: block; width: 18px; height: 18px; margin: 14px 0 20px; border-radius: 50%; background: var(--ube); box-shadow: 0 0 0 6px #fff; position: relative; }
.ht-line b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); }
.ht-line p { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--ink-2); max-width: 340px; }
.ht-go { margin-top: 40px; display: flex; justify-content: center; }

/* 4 -- categories */
.cats3 { background: #fff; }
.c-card { width: min(440px, 32vw); display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: var(--feta); }
.c-art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.c-art .bowl { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.c-art .cat-eg { position: absolute; top: 14px; left: 14px; z-index: 3; }
.c-card .cat-bar { display: block; height: 10px; flex: none; }
.cat-bar.g1 { background: linear-gradient(90deg, var(--ube) 0%, var(--pitaya) 30%, var(--spicy-mayo) 75%, var(--shallot) 93%); }
.cat-bar.g2 { background: linear-gradient(90deg, var(--celery) 0%, var(--mint-jelly) 30%, var(--ginger) 75%, var(--cucumber) 93%); }
.cat-bar.g3 { background: linear-gradient(90deg, var(--pitaya) 0%, var(--spicy-mayo) 100%); }
.c-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 22px 26px 26px; }
.c-body p { flex: 1; }
.c-enter { margin-top: 20px; }
.cats-wc .c-enter { margin-top: 14px; height: 40px; }
.cats-wc { background: #fff; }

/* 5 -- who it's for */
.who3 { background: var(--feta); }
.p-card { position: relative; width: 300px; aspect-ratio: 4 / 5; margin: 0; border-radius: var(--r); overflow: hidden; background: #F7F6F3; }
.p-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.p-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 22, 22, 0) 40%, rgba(24, 22, 22, .76) 100%); }
.p-card figcaption { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 1; color: #fff; }
.p-card figcaption b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 26px; line-height: 1.1; }
.p-card figcaption span { display: block; margin-top: 6px; font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, .9); }
.p-last { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 24px; background: var(--ube); color: var(--feta); }
.p-last::after { display: none; }
.p-last b { font-family: var(--font-heading); font-weight: 400; font-size: 32px; line-height: 1.08; }
.p-last span { margin: 8px 0 20px; font-size: 16px; color: var(--shallot); }
.p-last .btn { width: 100%; padding: 0 12px; }
.who-drift .lids-row { animation-duration: 60s; }
.p-drift { width: 280px; flex: none; }

/* 6 -- FAQ on the page */
.faq3 { background: #fff; }
.f3-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.f3-side .h2 { color: var(--pesto); }
.f3-side .sub { margin-top: 14px; }
.faq3-c .faq-qs { max-width: 860px; margin: 0 auto; }

/* 7 -- rules and policies */
.rules3 { background: var(--feta); padding: 64px 0; }
.r3-h { font-family: var(--font-body); font-weight: 600; font-size: var(--vh8); color: var(--ink); margin-bottom: 20px; }
.r3-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.r3-card { position: relative; display: block; padding: 22px 56px 22px 24px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px #E7E1DC; transition: box-shadow .2s; }
.r3-card:hover { box-shadow: inset 0 0 0 1.5px var(--ube); }
.r3-card b { display: block; font-weight: 600; font-size: 18px; color: var(--ink); }
.r3-card span { display: block; margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.r3-card i { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--ube); }

/* the rules page */
.rules-page { background: #fff; }
.rp-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.rp-toc { position: sticky; top: calc(var(--header-h) + 40px); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rp-toc .h3 { color: var(--pesto); margin-bottom: 16px; }
.rp-toc a:not(.btn) { font-weight: 500; color: var(--ink); padding: 4px 0; border-bottom: 1px solid transparent; }
.rp-toc a:not(.btn):hover { border-color: var(--ink); }
.rp-toc .btn { margin-top: 20px; }
.rp-note { padding: 14px 16px; border-radius: 12px; background: var(--shallot); color: var(--ink); font-size: 15px; margin-bottom: 32px; }
.rp-body article { scroll-margin-top: calc(var(--header-h) + 24px); padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid #E7E1DC; }
.rp-body h2 { font-family: var(--font-body); font-weight: 600; font-size: var(--vh8); color: var(--ink); margin-bottom: 14px; }
.rp-body p { font-size: 16px; line-height: 26px; color: var(--ink-2); }
.rp-body p + p { margin-top: 12px; }
.rp-body b { color: var(--ink); }

/* the section library's bar */
.lib-bar { position: sticky; top: var(--header-h); z-index: 39; display: flex; align-items: center; gap: 16px; padding: 12px var(--edge);
  background: var(--h-ink, #181616); background: #181616; color: var(--feta); }
.lib-name { font-family: var(--font-eyebrow); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.lib-bar .select { width: min(460px, 50vw); height: 40px; font-size: 14px; }
.lib-bar .btn.sm { background: var(--shallot); color: var(--ube); }
.lib-bar .btn.sm[disabled] { opacity: .6; }
.lib-bar .lib-open { margin-left: auto; color: var(--feta); }
.lib-tail { height: 40vh; background: var(--feta); }

@media (max-width: 1080px) {
  .hs-grid, .hk-card, .f3-grid, .rp-grid { grid-template-columns: 1fr; gap: 40px; }
  .hk-r { min-height: 380px; }
  .rp-toc { position: static; }
  .w-card { width: min(520px, 62vw); } .c-card { width: min(440px, 56vw); }
}
@media (max-width: 720px) {
  .sec { padding: 64px 0; }
  .left-head { margin-bottom: 24px; }
  .hs-grid { padding-top: 40px; padding-bottom: 48px; gap: 32px; }
  .hero-split .h1 { font-size: 42px; }
  .checker.thin { height: 32px; background-size: 32px 32px; }
  .car-track { gap: 14px; }
  .w-card, .c-card { width: 84vw; }
  .p-card { width: 72vw; }
  .car-arrows { display: none; }
  .car-ctl { justify-content: center; margin-top: 18px; }
  .how-k { padding: 48px 0; background-size: 40px 40px; }
  .hk-l { padding: 28px 22px 32px; }
  .hk-go .btn, .ht-go .btn { width: 100%; }
  .hk-r { min-height: 280px; }
  .ht-line { grid-template-columns: 1fr; gap: 28px; }
  .ht-line::before { left: 8px; right: auto; top: 40px; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--ube), var(--spicy-mayo)); }
  .ht-line li { padding-left: 36px; }
  .ht-dot { position: absolute; left: 0; top: 40px; margin: 0; }
  .ht-line b { margin-top: 18px; font-size: 26px; }
  .r3-row { grid-template-columns: 1fr; }
  .lib-bar { flex-wrap: wrap; gap: 10px; } .lib-bar .select { width: 100%; } .lib-bar .lib-open { margin-left: 0; }
}
.w-art { aspect-ratio: 16 / 10; }
.left-head .sub { max-width: 640px; }
@media (min-width: 721px) { .hero:not(.hero-split) .hero-in .sub { max-width: 600px; } }
.c-art { aspect-ratio: 16 / 10; }
/* carousel cards off to the side must still show (the peek says "swipe"): no per-card reveal */
.car-card[data-in] { opacity: 1; transform: none; filter: none; }

/* =====================================================================
   v3 section options B-D -- reference treatments in our type, colours,
   photography and patterns. Each block is one option.
   ===================================================================== */
body[data-page='home'] [data-libonly] { display: none; }
.lib-note { max-width: 720px; margin: 72px auto; padding: 24px 28px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px #E7E1DC; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.lib-note b { color: var(--ink); }
/* stickers: a round photo with a white ring, like a die-cut sticker */
.stk { position: relative; display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.22em; border-radius: 50%; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 .06em #fff, 0 .08em .2em rgba(24, 22, 22, .18); transition: transform .35s var(--ease); }
.stk > img, .stk > .bowl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.stk .bowl > img { transform: scale(1.35); }
.stk .lid { display: none; }
/* marquee rows */
.mq { overflow: hidden; white-space: nowrap; }
.mq-t { display: inline-flex; animation: run 40s linear infinite; }
.mq.rev .mq-t { animation-direction: reverse; }
.mq span { padding-right: .4em; }

/* ---- Hero B: sticker headline ---- */
.hb2 { background: var(--feta); min-height: 0 !important; display: block; }
.hb2-in { padding-top: clamp(56px, 9vh, 104px); padding-bottom: 56px; }
.hb2-h { font-family: var(--font-heading); font-weight: 400; font-size: clamp(54px, 8.2vw, 132px); line-height: .98; letter-spacing: -.02em; color: var(--ink); }
.hb2-h .ln:last-child { color: var(--pesto); }
.hb2-stk { position: relative; display: inline-block; width: 1.12em; height: 1.12em; vertical-align: -.16em; margin-left: .08em; transform: rotate(-10deg); }
.hb2-f { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 .07em #fff, 0 .12em .3em rgba(24, 22, 22, .2); opacity: 0; transform: scale(.85) rotate(-8deg); transition: opacity .35s ease, transform .5s var(--ease); }
.hb2-f.on { opacity: 1; transform: none; }
.hb2-f .bowl { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.hb2-f .bowl > img { transform: scale(1.3); }
.hb2-row { margin-top: 48px; padding-top: 28px; border-top: 1px solid #E7E1DC; display: grid; grid-template-columns: minmax(0, 5fr) auto minmax(0, 4fr); gap: 40px; align-items: center; }
.hb2-row .sub { margin: 0; max-width: 520px; font-size: 18px; line-height: 27px; }
.hb2-cd { justify-self: end; display: flex; align-items: center; gap: 16px; }
.hb2-cd > b, .hc2-cd > b { font-weight: 600; font-size: 14px; line-height: 18px; max-width: 120px; color: var(--ink); }
.hb2-cd .cd-t, .hc2-cd .cd-t { background: #fff; box-shadow: inset 0 0 0 1px #E7E1DC; }

/* ---- Hero C: plate window over marquee rows ---- */
.hc2 { position: relative; overflow: hidden; background: var(--feta); min-height: max(760px, calc(100svh - var(--header-h))) !important; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 48px; }
.hc2-mq { position: absolute; left: -10%; right: -10%; top: 6%; transform: rotate(-7deg); display: grid; gap: 4px; }
.hc2-mq .mq { font-family: var(--font-heading); font-weight: 400; font-size: clamp(56px, 7vw, 108px); line-height: 1.05; text-transform: uppercase; letter-spacing: -.01em; }
.hc2-mq .solid { color: var(--ube); }
.hc2-mq .outline { color: transparent; -webkit-text-stroke: 1.5px var(--ube); }
.hc2-mq .mq:nth-child(3) .mq-t { animation-duration: 52s; } .hc2-mq .mq:nth-child(4) .mq-t { animation-duration: 46s; }
.hc2-plate { position: absolute; left: 50%; top: 9%; width: min(48vh, 78vw); aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%) scale(var(--s, 1)); transform-origin: 50% 40%;
  box-shadow: 0 0 0 12px var(--feta), 0 0 0 14px #E7E1DC, 0 30px 60px rgba(24, 22, 22, .18); z-index: 2; }
.hc2-plate > img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.hc2-plate .cd-badge { position: absolute !important; right: -6%; top: -4%; width: 30%; height: 30%; }
.hc2-in { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 0; }
.hc2 .h1 { font-size: clamp(44px, 5vw, 72px); line-height: 1.02; color: var(--pesto); background: var(--feta); padding: 6px 18px; border-radius: 12px; }
.hc2 .sub { margin: 12px auto 0; max-width: 620px; font-size: 18px; line-height: 27px; }
.hc2-row { margin-top: 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; }
.hc2-cd { display: flex; align-items: center; gap: 12px; }

/* ---- Hero D: idea box ---- */
.hd2 { position: relative; overflow: hidden; background: var(--feta); min-height: max(720px, calc(100svh - var(--header-h))) !important; display: flex; align-items: center; }
.hd2-snap { position: absolute; margin: 0; width: clamp(140px, 15vw, 230px); aspect-ratio: 4 / 5; padding: 10px 10px 34px; background: #fff; box-shadow: 0 16px 36px rgba(24, 22, 22, .14);
  transform: translateY(var(--py, 0)) rotate(var(--r)); z-index: 1; }
.hd2-snap img { width: 100%; height: 100%; object-fit: cover; }
.hd2-snap.s0 { --r: -9deg; left: 4%; top: 10%; } .hd2-snap.s1 { --r: 7deg; right: 5%; top: 8%; }
.hd2-snap.s2 { --r: 6deg; left: 7%; bottom: 8%; } .hd2-snap.s3 { --r: -6deg; right: 6%; bottom: 10%; }
.hd2-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 48px; padding-bottom: 48px; }
.hd2 .h1 { font-size: clamp(48px, 5.6vw, 84px); color: var(--ink); }
.hd2 .sub { margin: 16px auto 0; max-width: 600px; font-size: 18px; line-height: 27px; }
.idea { margin-top: 32px; width: min(680px, 100%); padding: 18px 18px 16px; border-radius: 24px; background: #fff; text-align: left; box-shadow: inset 0 0 0 1px #E7E1DC, 0 20px 44px rgba(24, 22, 22, .1); }
.idea-l { display: block; font-weight: 600; font-size: 14px; color: var(--ink); padding: 0 4px 6px; }
.idea textarea { width: 100%; border: 0; outline: none; resize: none; background: none; padding: 4px; font-family: var(--font-heading); font-weight: 300; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; color: var(--ink); }
.idea textarea::placeholder { color: rgba(35, 31, 32, .42); }
.idea-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; padding-top: 12px; border-top: 1px solid #E7E1DC; }
.idea-hint { font-size: 13px; line-height: 18px; color: var(--soft); }
.hd2-cd { margin-top: 18px; font-size: 15px; color: var(--ink-2); }
.hd2-cd b { font-family: var(--font-heading); font-weight: 400; font-size: 22px; color: var(--ube); }

/* ---- What B: sticker sentence ---- */
.wb2 { background: var(--feta); }
.wb2-h { font-family: var(--font-body); font-weight: 600; font-size: var(--vh8); color: var(--pesto); margin-bottom: 18px; }
.wb2-s { font-family: var(--font-heading); font-weight: 400; font-size: clamp(32px, 4.2vw, 62px); line-height: 1.22; letter-spacing: -.01em; color: var(--ink); max-width: 1180px; }
.wb2-s mark { color: inherit; padding: 0 .12em; border-radius: .18em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--hl), var(--hl)) left 70% / 0% 100% no-repeat; transition: background-size .9s var(--ease); }
.wb2-s .m-s { --hl: var(--shallot); } .wb2-s .m-c { --hl: var(--cucumber); } .wb2-s .m-g { --hl: var(--ginger); }
.wb2-s.in mark { background-size: 100% 100%; }
.wb2-s.in .m-c { transition-delay: .25s; } .wb2-s.in .m-g { transition-delay: .5s; }
.wb2-s .stk { cursor: zoom-in; } .wb2-s .stk.r0 { transform: rotate(-8deg); } .wb2-s .stk.r1 { transform: rotate(6deg); } .wb2-s .stk.r2 { transform: rotate(-4deg); }
.wb2-s .stk.pop { transform: scale(2.6) rotate(0); z-index: 5; }
@media (hover: hover) { .wb2-s .stk:hover { transform: scale(1.6) rotate(0); z-index: 5; } }
.wb2-notes { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; border-top: 1px solid #E7E1DC; padding-top: 24px; }
.wb2-notes b { display: block; font-weight: 600; font-size: 17px; color: var(--ink); }
.wb2-notes span { display: block; margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--ink-2); }

/* ---- What C: photo + list ---- */
.wc2 { background: var(--feta); }
.wc2-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.wc2-photo { position: relative; aspect-ratio: 5 / 4; border-radius: var(--r); overflow: hidden; background: #F7F6F3; }
.wc2-img { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .6s ease, transform 1.2s var(--ease); }
.wc2-img.on { opacity: 1; transform: none; }
.wc2-img > img, .wc2-img > .bowl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.wc2-copy .h2 { font-size: var(--h3); }
.wc2-list { margin-top: 28px; border-top: 1px solid #E7E1DC; }
.wc2-list li { border-bottom: 1px solid #E7E1DC; }
.wc2-list button { width: 100%; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 8px; padding: 18px 0; text-align: left; }
.wc2-n { font-family: var(--font-heading); font-weight: 300; font-size: 26px; color: var(--ube); }
.wc2-list b { font-family: var(--font-heading); font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--ink); }
.wc2-list .pm { width: 32px; height: 32px; border-radius: 999px; background: var(--shallot); position: relative; transition: background .3s, transform .4s var(--ease); }
.wc2-list .pm::before, .wc2-list .pm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: #2C0040; transform: translate(-50%, -50%); transition: transform .4s var(--ease); }
.wc2-list .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.wc2-list li.on .pm { background: var(--ube); transform: rotate(180deg); }
.wc2-list li.on .pm::before, .wc2-list li.on .pm::after { background: var(--feta); }
.wc2-list li.on .pm::after { transform: translate(-50%, -50%) rotate(0); }
.wc2-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.wc2-list li.on .wc2-a { grid-template-rows: 1fr; }
.wc2-a > div { overflow: hidden; }
.wc2-a p { padding: 0 48px 20px 52px; font-size: 16px; line-height: 24px; color: var(--ink-2); }

/* ---- What D: circle -> arch -> card ---- */
.wd2 { background: var(--feta); }
.wd2-c { width: min(400px, 30vw); }
.kh { position: relative; overflow: hidden; background: #F7F6F3; width: 100%;
  --a: min(1, calc(var(--k, 0) * 2)); --b: max(0, calc(var(--k, 0) * 2 - 1));
  aspect-ratio: calc(1 / (1 + .3333 * var(--a)));
  border-radius: 999px 999px calc(999px * (1 - var(--a)) + 24px * var(--a)) calc(999px * (1 - var(--a)) + 24px * var(--a));
  border-top-left-radius: calc(1px * (400 * (1 - var(--b))) + 24px * var(--b)); border-top-right-radius: calc(1px * (400 * (1 - var(--b))) + 24px * var(--b)); }
.kh > img, .kh > .bowl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.wd2-c .w-n { display: block; margin-top: 20px; }
.wd2-c h3 { margin-top: 8px; font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--ink); }
.wd2-c p { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.car-kh .car-track { justify-content: safe center; }

/* ---- How B: tilted menu card over a photo ---- */
.hb3 { position: relative; padding: 20px; background: var(--feta); }
.hb3-photo { position: relative; height: min(820px, calc(100svh - var(--header-h) - 40px)); min-height: 640px; border-radius: 24px; overflow: hidden; }
.hb3-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hb3-photo .gh-stack { position: absolute; right: 9%; top: 50%; width: min(340px, 26vw); transform: translateY(-50%); }
.hb3-card { position: absolute; left: max(48px, 6vw); top: 50%; width: min(620px, 48vw); transform: translateY(-50%) rotate(-3deg); background: var(--feta); padding: 0 40px 36px; border-radius: 4px;
  box-shadow: 0 30px 60px rgba(24, 22, 22, .28); outline: 1px solid var(--pesto); outline-offset: -14px; }
.hb3-card::after { content: ''; position: absolute; inset: 18px; border: 1px solid var(--pesto); pointer-events: none; }
.hb3-card[data-in] { opacity: 0; transform: translateY(-42%) rotate(-3deg); filter: none; transition: opacity .8s ease, transform 1s var(--ease); }
.hb3-card[data-in].in { opacity: 1; transform: translateY(-50%) rotate(-3deg); }
.hb3-chk { height: 24px; margin: 0 -40px 28px; background-size: 24px 24px; }
.hb3-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 0 6px; }
.hb3-top h2 { font-family: var(--font-eyebrow); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--pesto); }
.hb3-no { font-family: var(--font-heading); font-weight: 300; font-size: 22px; color: var(--ube); }
.hb3-rows { margin: 18px 6px 0; border-top: 1px solid var(--pesto); }
.hb3-rows li { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--pesto); }
.hb3-n { font-family: var(--font-heading); font-weight: 300; font-size: 24px; color: var(--ube); }
.hb3-rows b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 26px; line-height: 1.12; color: var(--ink); }
.hb3-rows p { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.hb3-rows i { font-style: normal; padding-left: 14px; border-left: 1px solid var(--pesto); font-family: var(--font-eyebrow); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--pesto); white-space: nowrap; }
.hb3-stamp { position: absolute; right: -22px; top: 60px; padding: 14px 18px; border-radius: 50%; background: var(--ube); color: var(--feta); transform: rotate(12deg);
  font-family: var(--font-heading); font-size: 22px; line-height: 1; box-shadow: 0 0 0 3px var(--feta), 0 0 0 4.5px var(--ube); }
.hb3-go { margin: 24px 6px 0; }

/* ---- How C: colour rows on a swirl panel ---- */
.hc3 { background: var(--feta); }
.hc3-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; padding: 56px; border-radius: 28px; color: var(--feta);
  background: repeating-radial-gradient(circle at 78% 50%, #00462A 0 34px, #005735 34px 68px); }
.hc3-copy .h2 { color: var(--feta) !important; font-size: var(--h3); }
.hc3-copy .sub { color: rgba(250, 245, 238, .84); }
.hc3-go { margin-top: 28px; }
.hc3-rows { display: grid; gap: 8px; }
.hc3-rows li { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 28px; border-radius: 18px; color: var(--ink); }
.hc3-rows .r0 { background: var(--shallot); } .hc3-rows .r1 { background: var(--ginger); } .hc3-rows .r2 { background: var(--cucumber); }
.hc3-rows b { font-family: var(--font-heading); font-weight: 400; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05; }
.hc3-rows span { font-family: var(--font-eyebrow); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-align: right; }

/* ---- How D: giant numerals, lit in turn ---- */
.hd3 { background: #fff; }
.hd3-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #E7E1DC; border-bottom: 1px solid #E7E1DC; }
.hd3-row li { position: relative; padding: 28px 28px 32px; overflow: hidden; transition: background .5s ease; }
.hd3-row li + li { border-left: 1px solid #E7E1DC; }
.hd3-row li.on { background: var(--ginger); }
.hd3-l { display: block; font-weight: 600; font-size: 14px; line-height: 20px; color: var(--ink); max-width: 240px; min-height: 40px; }
.hd3-n { display: block; margin-top: 20px; font-family: var(--font-heading); font-weight: 300; font-size: clamp(88px, 10vw, 156px); line-height: .9; letter-spacing: -.03em; color: rgba(24, 22, 22, .2); transition: color .5s ease; }
.hd3-row li.on .hd3-n { color: var(--ink); }
.hd3-row p { margin-top: 18px; font-size: 15px; line-height: 22px; color: var(--ink-2); max-width: 300px; opacity: .55; transition: opacity .5s; }
.hd3-row li.on p { opacity: 1; }
.hd3-row .gh-stack { position: absolute; right: -20px; bottom: -30px; width: 150px; transform: rotate(-8deg); opacity: .25; transition: opacity .5s; }
.hd3-row li.on .gh-stack { opacity: 1; }
.hd3-go { margin-top: 32px; }

/* ---- Categories B: postage stamps ---- */
.cb3 { background: #fff; }
.stamp { width: min(380px, 28vw); padding: 14px; --o: var(--ube); --i: var(--shallot);
  background: radial-gradient(circle at 10px 10px, transparent 7px, var(--o) 7.5px) -10px -10px / 20px 20px; transform: rotate(var(--t, 0deg)); transition: transform .4s var(--ease); }
.stamp.s0 { --t: -1.5deg; } .stamp.s1 { --o: var(--pesto); --i: var(--cucumber); --t: 1deg; } .stamp.s2 { --o: #FAAB20; --i: var(--feta); --t: -.5deg; }
.stamp:hover { transform: rotate(0) translateY(-6px); }
.stamp-in { height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 22px 24px; background: var(--i); outline: 2px dashed rgba(24, 22, 22, .18); outline-offset: -8px; }
.stamp-bowl { position: relative; width: 74%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 6px #fff, 0 14px 28px rgba(24, 22, 22, .18); }
.stamp-bowl .bowl { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; } .stamp-bowl .bowl > img { transform: scale(1.25); }
.stamp h3 { margin-top: 22px; font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1.08; color: var(--ink); }
.stamp p { margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--ink-2); flex: 1; }
.stamp .c-enter { margin-top: 18px; }
.car-stamps .car-track { padding-top: 16px; padding-bottom: 20px; justify-content: safe center; }

/* ---- Categories C: fanned cards ---- */
.cc3 { background: var(--feta); overflow: hidden; }
.cc3-h { text-align: center; font-family: var(--font-heading); font-weight: 400; font-size: clamp(56px, 9vw, 150px); line-height: .95; letter-spacing: -.02em; color: var(--pesto); }
.fan { position: relative; height: 560px; margin-top: -70px; display: flex; justify-content: center; }
.fan-c { position: absolute; top: 0; width: 340px; border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: 0 24px 50px rgba(24, 22, 22, .18); cursor: pointer; outline: none;
  transition: transform .5s var(--ease), box-shadow .5s, z-index 0s .25s; }
.fan-c.f0 { transform: translateX(-310px) rotate(-8deg) translateY(30px); z-index: 1; }
.fan-c.f1 { transform: translateY(-4px); z-index: 2; }
.fan-c.f2 { transform: translateX(310px) rotate(8deg) translateY(30px); z-index: 1; }
.fan-c:hover, .fan-c.front { z-index: 4 !important; transition: transform .5s var(--ease), box-shadow .5s, z-index 0s; }
.fan-c.f0:hover, .fan-c.f0.front { transform: translateX(-320px) rotate(-3deg) translateY(-12px); }
.fan-c.f1:hover, .fan-c.f1.front { transform: translateY(-16px); }
.fan-c.f2:hover, .fan-c.f2.front { transform: translateX(320px) rotate(3deg) translateY(-12px); }
.fan-art { position: relative; aspect-ratio: 1; } .fan-art .bowl { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.fan-b { padding: 20px 22px 22px; }
.fan-b h3 { font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1.08; color: var(--ink); }
.fan-b p { margin-top: 6px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.fan-b .c-enter { margin-top: 14px; }
.cc3-s { text-align: center; margin-top: 8px; font-size: 17px; color: var(--ink-2); }

/* ---- Categories D: crossing ribbons + menu rows ---- */
.cd3 { background: #fff; overflow: hidden; padding-top: 40px; }
.ribbons { position: relative; height: 300px; margin-bottom: 48px; }
.rib { position: absolute; left: -10%; right: -10%; height: 92px; display: flex; align-items: center; overflow: hidden; }
.rib.r0 { top: 18px; background: var(--shallot); transform: rotate(-5deg); z-index: 1; }
.rib.r1 { top: 110px; background: var(--cucumber); transform: rotate(3deg); z-index: 2; }
.rib.r2 { top: 196px; background: var(--ginger); transform: rotate(-2.5deg); z-index: 1; }
.rib-t { display: inline-flex; align-items: center; gap: 28px; white-space: nowrap; will-change: transform; }
.rib-t > span { font-family: var(--font-heading); font-weight: 400; font-size: 58px; line-height: 1; color: var(--ink); text-transform: uppercase; letter-spacing: -.01em; }
.rib-s { font-size: 64px; }
.menu-rows { border-top: 1px solid var(--ink); }
.menu-rows li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid #E7E1DC; }
.mr-n { font-family: var(--font-heading); font-weight: 300; font-size: 34px; color: var(--ube); }
.menu-rows b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 32px; line-height: 1.1; color: var(--ink); }
.menu-rows p { margin-top: 4px; font-size: 16px; line-height: 24px; color: var(--ink-2); max-width: 620px; }
.menu-rows .c-enter { margin: 0; }

/* ---- Who B: Stories player ---- */
.wb3 { background: var(--feta); }
.wb3-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.wb3-go { margin-top: 28px; }
.story { position: relative; justify-self: center; width: min(380px, 100%); aspect-ratio: 9 / 16; max-height: 76svh; border-radius: 28px; overflow: hidden; background: #181616; box-shadow: 0 30px 60px rgba(24, 22, 22, .25); }
.story-bars { position: absolute; z-index: 3; left: 14px; right: 14px; top: 14px; display: flex; gap: 6px; }
.story-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.story-bars b { display: block; height: 100%; width: 0; background: #fff; }
.story-bars i.done b { width: 100%; }
.story-bars i.run b { animation: bar 4.5s linear forwards; }
.story.hold .story-bars i.run b { animation-play-state: paused; }
@keyframes bar { to { width: 100%; } }
.story-f { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .4s ease; }
.story-f.on { opacity: 1; }
.story-f img { width: 100%; height: 100%; object-fit: cover; }
.story-f::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 100%); }
.story-f figcaption { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 18px; }
.story-f figcaption b { display: inline-block; padding: 6px 12px; border-radius: 14px 14px 14px 4px; background: var(--shallot); color: var(--ink); font-family: var(--font-heading); font-weight: 400; font-size: 24px; }
.story-f figcaption span { display: block; margin-top: 8px; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: #fff; color: var(--ink); font-size: 15px; line-height: 21px; width: fit-content; max-width: 92%; }
.story-tap { position: absolute; z-index: 4; top: 40px; bottom: 120px; width: 40%; }
.story-tap.prev { left: 0; } .story-tap.next { right: 0; }

/* ---- Who C: polaroid stack ---- */
.wc3 { background: #fff; overflow: hidden; }
.wc3-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.wc3-h { font-family: var(--font-heading); font-weight: 400; font-size: clamp(48px, 5.6vw, 84px); line-height: 1; letter-spacing: -.02em; color: var(--pesto); }
.wc3-go { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.polas { position: relative; height: 560px; }
.pola { position: absolute; left: 50%; top: 4%; width: min(340px, 70vw); margin: 0; padding: 12px 12px 18px; background: var(--c); box-shadow: 0 18px 40px rgba(24, 22, 22, .16); cursor: pointer;
  transform: translateX(-50%) translate(calc(var(--pos) * 14px), calc(var(--pos) * 8px)) rotate(calc(var(--rot) * 1deg)); transition: transform .45s var(--ease), opacity .3s; }
.pola.c0 { --c: var(--shallot); --rot: -4; } .pola.c1 { --c: var(--cucumber); --rot: 3; } .pola.c2 { --c: var(--ginger); --rot: -2; } .pola.c3 { --c: #fff; --rot: 5; } .pola.c4 { --c: var(--feta); --rot: -6; }
.pola img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pola figcaption { padding: 12px 4px 0; }
.pola b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 24px; line-height: 1.1; color: var(--ink); }
.pola span { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.pola.fly { transform: translateX(40%) translateY(-10%) rotate(18deg); opacity: 0; }

/* ---- Who D: Made for ___ ---- */
.wd3 { background: var(--feta); }
.wd3-h { font-family: var(--font-heading); font-weight: 400; font-size: clamp(44px, 6vw, 96px); line-height: 1.05; letter-spacing: -.02em; color: var(--pesto); }
.wd3-slot { position: relative; display: inline-grid; vertical-align: bottom; color: var(--ube); }
.wd3-w { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(40%); transition: opacity .4s ease, transform .6s var(--ease); }
.wd3-w.on { opacity: 1; transform: none; }
.wd3-stage { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.wd3-photo { position: relative; aspect-ratio: 4 / 5; max-height: 62svh; justify-self: start; width: 100%; max-width: 460px; }
.wd3-photo img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: cover; border-radius: 12px; opacity: 0; transition: opacity .5s ease; }
.wd3-photo img.on { opacity: 1; }
.vf { position: absolute; width: 34px; height: 34px; border: 3px solid var(--ube); }
.vf.tl { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; } .vf.tr { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; }
.vf.bl { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; } .vf.br { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }
.wd3-cap { position: relative; display: grid; min-height: 96px; }
.wd3-cap span { grid-area: 1 / 1; font-family: var(--font-heading); font-weight: 300; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; color: var(--ink); opacity: 0; transition: opacity .5s ease; }
.wd3-cap span.on { opacity: 1; }
.wd3-av { display: flex; gap: 12px; margin-top: 24px; }
.av { position: relative; width: 56px; height: 56px; border-radius: 50%; padding: 4px; transition: transform .3s var(--ease); }
.av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.av svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.av circle { fill: none; stroke: var(--ube); stroke-width: 3; stroke-dasharray: 126; stroke-dashoffset: 126; }
.av.on { transform: scale(1.12); }
.av.on circle { stroke-dashoffset: 0; }
.av.run circle { animation: ring 3.2s linear forwards; }
@keyframes ring { from { stroke-dashoffset: 126; } to { stroke-dashoffset: 0; } }
.wd3-sub { margin: 24px 0 24px; }

/* ---- FAQ B: Greek-key frame ---- */
.fb3 { background: #fff; }
.key-frame { padding: 28px; border-radius: 28px; background-color: #FFD64A;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 37h40M4 37V5h32v24H14V15h12' fill='none' stroke='%23FAAB20' stroke-width='3.4'/%3E%3C/svg%3E"); background-size: 28px 28px; }
.key-in { padding: 56px; border-radius: 18px; background: var(--feta); }
.key-in .faq-qs { max-width: 860px; margin: 0 auto; }

/* ---- FAQ C: one at a time ---- */
.fc3 { background: var(--feta); }
.one { max-width: 760px; margin: 0 auto; }
.one-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.one-tabs::-webkit-scrollbar { display: none; }
.one-tabs button { flex: none; padding: 9px 14px 10px; border-radius: 12px 12px 0 0; background: #EFE8DE; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.one-tabs button.on { background: #fff; color: var(--ube); }
.one-card { position: relative; min-height: 340px; padding: 32px 32px 28px; border-radius: 0 20px 20px 20px; background: #fff; box-shadow: 0 16px 36px rgba(24, 22, 22, .08); display: flex; flex-direction: column; }
.one-q { display: none; flex: 1; }
.one-q.on { display: flex; flex-direction: column; }
.one-k { font-weight: 600; font-size: 13px; color: var(--soft); padding-bottom: 12px; border-bottom: 1px solid #E7E1DC; }
.one-q h3 { margin-top: 18px; font-family: var(--font-heading); font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1.12; color: var(--ink); }
.one-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.one-a > p { overflow: hidden; }
.one-card.read .one-a { grid-template-rows: 1fr; }
.one-a p { margin-top: 18px; padding: 0; font-size: 17px; line-height: 27px; color: var(--ink); }
.one-card.read .one-a p { padding: 18px 20px; border-radius: 14px; background: var(--cucumber); }
.one-ctl { margin-top: auto; padding-top: 24px; display: flex; gap: 10px; align-items: center; }
.one-read { flex: 1; }
.one-all { display: block; margin: 18px auto 0; }
.one.listing .one-tabs, .one.listing .one-card { display: none; }
.one-list { margin-top: 12px; }

/* ---- FAQ D: heading card + tiles ---- */
.fd3 { background: #fff; }
.fd3-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.fd3-card { position: sticky; top: calc(var(--header-h) + 24px); padding: 32px; border-radius: var(--r); background: var(--shallot); }
.fd3-card .h2 { font-size: var(--h3); color: var(--pesto); }
.fd3-card > p { margin-top: 10px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.fd3-card img { margin-top: 22px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.fd3-card .fd3-cur { margin: 18px 0 16px; font-weight: 500; color: var(--ink); }
.faq-qs.tiles { border-top: 0; display: grid; gap: 8px; }
.faq-qs.tiles .q { border: 0; border-radius: 14px; background: var(--feta); padding: 0 22px; }
.faq-qs.tiles .q-h { font-size: 19px; line-height: 26px; padding: 18px 0; }
.faq-qs.tiles .q-a .in { padding-right: 0; font-size: 16px; }

/* ---- Rules B: framed link table + checker ---- */
.rb3 { background: var(--feta); padding-top: 56px; }
.rb3-frame { position: relative; padding: 28px 32px 32px; background: var(--feta); outline: 1px solid var(--pesto); outline-offset: -8px; border: 1px solid var(--pesto); }
.rb3-t { display: block; text-align: center; font-family: var(--font-eyebrow); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--pesto); margin-bottom: 20px; }
.rb3-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--pesto); border-bottom: 1px solid var(--pesto); }
.rb3-row a { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; font-family: var(--font-heading); font-size: 22px; color: var(--ink); transition: background .2s; }
.rb3-row a + a { border-left: 1px solid var(--pesto); }
.rb3-row a:hover { background: #fff; }
.rb3-row a i { color: var(--ube); }
.rb3-mq { margin-top: 40px; padding: 12px 0; font-family: var(--font-heading); font-size: 34px; color: var(--pesto); text-transform: uppercase; border-top: 1px solid #E7E1DC; }

/* ---- Rules C: big word blocks ---- */
.rc3 { background: var(--feta); padding: 72px 0; }
.blocks { display: flex; flex-direction: column; align-items: center; gap: 0; }
.blk { display: inline-flex; align-items: center; gap: 18px; padding: 10px 34px 14px; font-family: var(--font-heading); font-weight: 400; font-size: clamp(36px, 5vw, 72px); line-height: 1.05; color: var(--ink); transition: transform .3s var(--ease); }
.blk.k0 { background: var(--ginger); border-radius: 6px; } .blk.k1 { background: var(--shallot); border-radius: 999px; margin-top: -4px; } .blk.k2 { background: var(--cucumber); border-radius: 6px; margin-top: -4px; }
.blk:hover { transform: scale(1.03) rotate(-1deg); }
.blk svg { width: .5em; height: .5em; color: var(--ube); }

/* ---- Rules D: pattern tiles ---- */
.rd3 { background: #fff; padding: 64px 0; }
.ptiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pt { position: relative; display: flex; align-items: flex-end; min-height: 200px; padding: 16px; border-radius: 20px; overflow: hidden; transition: transform .3s var(--ease); }
.pt:hover { transform: translateY(-4px); }
.pt.p0 { background-color: #FFD64A; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 37h40M4 37V5h32v24H14V15h12' fill='none' stroke='%23FAAB20' stroke-width='3.4'/%3E%3C/svg%3E"); background-size: 36px 36px; }
.pt.p1 { background: conic-gradient(#FAAB20 0 90deg, #FFD64A 90deg 180deg, #FAAB20 180deg 270deg, #FFD64A 270deg 360deg) 0 0 / 56px 56px; }
.pt.p2 { background: linear-gradient(180deg, var(--celery) 0%, var(--mint-jelly) 30%, var(--ginger) 75%, var(--cucumber) 93%); }
.pt > span { flex: 1; display: block; padding: 14px 16px; border-radius: 12px; background: #fff; }
.pt b { display: block; font-weight: 600; font-size: 18px; color: var(--ink); }
.pt em { display: block; margin-top: 2px; font-style: normal; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.pt > i { position: absolute; right: 28px; bottom: 34px; color: var(--ube); }

/* ---- Sticky Enter (extra) ---- */
.sbar { position: fixed; z-index: 45; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: none; align-items: center; gap: 12px; padding: 0 18px; height: 56px; border-radius: 14px;
  background: var(--ube); color: var(--feta); font-weight: 600; font-size: 16px; box-shadow: 0 12px 30px rgba(184, 3, 184, .35); transform: translateY(140%); transition: transform .45s var(--ease); }
.sbar span { flex: 1; } .sbar em { font-style: normal; font-weight: 500; font-size: 14px; color: var(--shallot); }
.sbar.show { transform: none; }
.sbadge { position: fixed; z-index: 45; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); width: 112px; height: 112px; border-radius: 50%; background: var(--ube); box-shadow: 0 14px 34px rgba(184, 3, 184, .35);
  display: grid; place-items: center; transform: scale(0); transition: transform .45s var(--ease); }
.sbadge.show { transform: none; }
.sb-ring { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.sb-ring text { font-family: var(--font-eyebrow); font-weight: 700; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; fill: var(--feta); }
.sb-dot { width: 48px; height: 48px; border-radius: 50%; background: var(--feta); color: var(--ube); display: grid; place-items: center; }
.sbadge:hover .sb-dot { transform: rotate(-30deg); transition: transform .3s; }
@media (max-width: 720px) { .sbar { display: flex; } .sbadge { width: 88px; height: 88px; right: 14px; bottom: 14px; } .sb-dot { width: 38px; height: 38px; } }

/* the library bar, with option tabs */
.lib-tabs { display: flex; gap: 4px; }
.lib-tabs a { position: relative; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; color: var(--feta); background: rgba(250, 245, 238, .1); }
.lib-tabs a.on { background: var(--feta); color: #181616; }
.lib-tabs a i { position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--mint-jelly); }
.lib-meta { display: flex; flex-direction: column; min-width: 0; line-height: 18px; }
.lib-meta b { font-size: 14px; } .lib-meta span { font-size: 12px; color: rgba(250, 245, 238, .7); }
.lib-bar .select { width: 240px; }

/* ===== options on tablets and phones ===== */
@media (max-width: 1080px) {
  .hb2-row { grid-template-columns: 1fr; gap: 20px; } .hb2-cd { justify-self: start; }
  .wc2-grid, .wb3-grid, .wc3-grid, .wd3-stage, .hc3-panel, .fd3-grid { grid-template-columns: 1fr; gap: 32px; }
  .wd2-c { width: min(400px, 56vw); } .stamp { width: min(380px, 56vw); }
  .hb3-card { width: min(620px, 70vw); }
  .fd3-card { position: static; }
}
@media (max-width: 720px) {
  .hb2-in { padding-top: 36px; padding-bottom: 36px; } .hb2-h { font-size: 48px; } .hb2-row { margin-top: 28px; } .hb2-go .btn { width: 100%; }
  .hb2-cd { flex-direction: column; align-items: flex-start; gap: 10px; } .hb2-cd > b { max-width: none; }
  .hc2 { min-height: 720px !important; padding-bottom: 32px; } .hc2-mq { top: 4%; } .hc2-mq .mq { font-size: 46px; } .hc2-plate { top: 7%; width: 74vw; } .hc2 .h1 { font-size: 38px; }
  .hc2-row { flex-direction: column; gap: 14px; } .hc2-row .btn { width: 100%; }
  .hd2-snap { width: 96px; padding: 5px 5px 16px; } .hd2-snap.s0 { left: -14px; top: 18px; } .hd2-snap.s1 { right: -14px; top: 26px; } .hd2-snap.s2, .hd2-snap.s3 { display: none; }
  .hd2-in { padding-top: 120px; } .hd2 .h1 { font-size: 40px; } .idea-row { flex-direction: column; align-items: stretch; } .idea-row .btn { width: 100%; }
  .wb2-s { font-size: 30px; line-height: 1.3; } .wb2-notes { grid-template-columns: 1fr; gap: 14px; }
  .wc2-photo { aspect-ratio: 16 / 10; } .wc2-list b { font-size: 22px; } .wc2-a p { padding: 0 0 16px 52px; }
  .wd2-c { width: 78vw; }
  .hb3 { padding: 12px; } .hb3-photo { height: 300px; min-height: 0; } .hb3-photo .gh-stack { width: 46%; right: 6%; top: 46%; }
  .hb3-card { position: relative; left: auto; top: auto; width: auto; margin: -64px 8px 0; transform: rotate(-2deg); padding: 0 22px 26px; }
  .hb3-card[data-in] { transform: translateY(24px) rotate(-2deg); } .hb3-card[data-in].in { transform: rotate(-2deg); }
  .hb3-chk { margin: 0 -22px 20px; } .hb3-rows li { grid-template-columns: 36px 1fr; } .hb3-rows i { grid-column: 2; border: 0; padding: 0; }
  .hb3-rows b { font-size: 22px; } .hb3-stamp { right: -6px; top: 40px; font-size: 17px; } .hb3-go .btn { width: 100%; }
  .hc3-panel { padding: 28px 20px; border-radius: 22px; } .hc3-rows li { padding: 16px 18px; } .hc3-rows b { font-size: 24px; } .hc3-go .btn { width: 100%; }
  .hd3-row { grid-template-columns: 1fr; } .hd3-row li + li { border-left: 0; border-top: 1px solid #E7E1DC; } .hd3-row li { padding: 18px 16px 20px; }
  .hd3-n { font-size: 72px; margin-top: 8px; } .hd3-row .gh-stack { width: 110px; } .hd3-go .btn { width: 100%; }
  .stamp { width: 80vw; }
  .cc3-h { font-size: 46px; } .fan { height: auto; margin-top: 20px; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 6px 20px 16px; margin-left: -20px; margin-right: -20px; justify-content: flex-start; scrollbar-width: none; }
  .fan-c { position: relative; flex: none; width: 78vw; scroll-snap-align: center; transform: none !important; }
  .ribbons { height: 210px; margin-bottom: 28px; } .rib { height: 64px; } .rib.r1 { top: 82px; } .rib.r2 { top: 142px; } .rib-t > span { font-size: 36px; } .rib-s { font-size: 40px; }
  .menu-rows li { grid-template-columns: 40px 1fr; } .menu-rows .c-enter { grid-column: 2; justify-self: start; } .menu-rows b { font-size: 26px; } .mr-n { font-size: 26px; }
  .story { width: 100%; max-height: 72svh; }
  .polas { height: 470px; } .pola { width: 74vw; } .wc3-h { font-size: 44px; }
  .wd3-h { font-size: 40px; } .wd3-stage { gap: 20px; } .wd3-photo { max-height: 50svh; justify-self: center; } .wd3-cap { min-height: 120px; } .wd3-av { justify-content: space-between; } .av { width: 52px; height: 52px; }
  .key-frame { padding: 14px; background-size: 20px 20px; } .key-in { padding: 28px 18px; }
  .one-card { padding: 22px 20px 20px; min-height: 380px; }
  .rb3-row { grid-template-columns: 1fr; } .rb3-row a + a { border-left: 0; border-top: 1px solid var(--pesto); } .rb3-mq { font-size: 24px; }
  .blk { font-size: 34px; padding: 8px 22px 11px; }
  .ptiles { grid-template-columns: 1fr; } .pt { min-height: 140px; }
  .lib-bar .select { width: 100%; }
}
/* hero C: the marquee sits behind the plate, quieter, so the headline leads */
.hc2-mq { top: 14%; }
.hc2-mq .solid { color: var(--shallot); }
.hc2-mq .outline { -webkit-text-stroke: 1.2px rgba(184, 3, 184, .45); }
.hc2 .h1 { background: none; padding: 0; }
.hc2-in { background: radial-gradient(60% 70% at 50% 60%, var(--feta) 55%, rgba(250, 245, 238, 0) 100%); padding: 24px 40px 8px; }
/* hero D: the snaps sit further out */
.hd2-snap { width: clamp(130px, 12.5vw, 200px); }
.hd2-snap.s0 { left: 2.5%; } .hd2-snap.s1 { right: 2.5%; } .hd2-snap.s2 { left: 5%; } .hd2-snap.s3 { right: 4%; }
.hc2-plate { top: 7%; width: min(42vh, 74vw); overflow: visible; }
.hc2-plate > .bowl { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; aspect-ratio: auto; }
.hc2-plate > .bowl > img { transform: scale(1.32); }
.hc2-plate { top: 5%; width: min(38vh, 70vw); }
.wd2-c { width: min(320px, 26vw); } .car-kh .car-track { gap: 32px; }
.hd3-n { white-space: nowrap; font-size: clamp(72px, 8vw, 128px); }
.cc3-h { font-size: clamp(52px, 6.4vw, 104px); }
.fan { margin-top: 28px; height: 580px; }
.fan-c.f0 { transform: translateX(-340px) rotate(-7deg) translateY(30px); } .fan-c.f2 { transform: translateX(340px) rotate(7deg) translateY(30px); }
.fan-c.f0:hover, .fan-c.f0.front { transform: translateX(-350px) rotate(-3deg) translateY(-8px); } .fan-c.f2:hover, .fan-c.f2.front { transform: translateX(350px) rotate(3deg) translateY(-8px); }
.wb3-copy .h2, .wc2-copy .h2 { color: var(--pesto); } .wd3-photo { max-width: 380px; }
.hb3 { overflow: hidden; }
@media (max-width: 720px) {
  .wd3-h > span:first-child { display: block; }
  .wd3-slot { display: grid; } .wd3-w { white-space: normal; }
}
@media (max-width: 720px) {
  .car-kh .car-track { justify-content: flex-start; } .wd2-c { width: 70vw; }
  /* how D on phones: a compact row of three, the copy for the lit one below */
  .hd3-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hd3-row li + li { border-top: 0; border-left: 1px solid #E7E1DC; }
  .hd3-row li { padding: 14px 10px 16px; }
  .hd3-l { font-size: 11px; line-height: 14px; min-height: 42px; }
  .hd3-n { font-size: 40px; margin-top: 10px; white-space: normal; }
  .hd3-row p { font-size: 12px; line-height: 17px; margin-top: 10px; }
  .hd3-row .gh-stack { display: none; }
  /* the library bar: one compact strip */
  .lib-bar { padding: 8px 12px; gap: 8px; }
  .lib-name, .lib-open { display: none; }
  .lib-bar .select { width: 100%; height: 36px; }
  .lib-tabs a { width: 32px; height: 32px; }
  .lib-meta { flex: 1; } .lib-meta span { display: none; }
  .lib-bar .btn.sm { height: 32px; padding: 0 10px; font-size: 13px; }
}

/* =====================================================================
   v3 section options, round 2 -- informative first: every option shows
   all of its content at once. Motion is only the one gentle reveal.
   ===================================================================== */
/* ---- Hero B: split with the key facts ---- */
.h3b { background: var(--feta); min-height: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.h3b-copy { padding: clamp(48px, 7vh, 88px) 56px 48px var(--edge); display: flex; flex-direction: column; justify-content: center; }
.h3b .h1 { font-size: clamp(48px, 5.2vw, 80px); line-height: 1.02; color: var(--ink); }
.h3b .sub { margin: 18px 0 0; max-width: 520px; font-size: 18px; line-height: 27px; }
.h3b-go { margin-top: 28px; }
.facts { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.facts > div { padding: 14px 16px 0 0; }
.facts > div + div { padding-left: 16px; border-left: 1px solid #E7E1DC; }
.facts dt { font-weight: 600; font-size: 13px; color: var(--ink-2); }
.facts dd { margin: 4px 0 0; }
.facts dd b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: clamp(30px, 2.8vw, 42px); line-height: 1.05; color: var(--ink); }
.facts dd span { display: block; margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.facts em { font-style: normal; font-weight: 600; color: var(--ube); }
.h3b-tiles { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 10px; padding: 10px; background: #EFE8DE; }
.tile { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; }
.tile .bowl { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.tile.empty { background: transparent; }

/* ---- Hero C: photo card + essentials ticket ---- */
.h3c { background: var(--feta); padding: 12px; min-height: 0 !important; display: block !important; }
.h3c-card { position: relative; min-height: min(820px, calc(100svh - var(--header-h) - 24px)); border-radius: 24px; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 40px; }
.h3c-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.h3c-copy { position: relative; max-width: 620px; padding: 28px 32px; border-radius: 20px; background: rgba(250, 245, 238, .94); }
.h3c .h1 { font-size: clamp(44px, 4.6vw, 72px); line-height: 1.02; color: var(--ink); }
.h3c .sub { margin: 14px 0 0; font-size: 17px; line-height: 26px; }
.ticket { position: relative; width: 360px; flex: none; padding: 22px 24px 24px; border-radius: 6px; background: var(--feta); box-shadow: 0 24px 50px rgba(24, 22, 22, .25);
  outline: 1px solid var(--pesto); outline-offset: -8px; }
.tk-t { display: block; font-family: var(--font-eyebrow); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--pesto); padding: 4px 4px 12px; border-bottom: 1px dashed var(--pesto); }
.ticket dl > div { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 10px 4px; border-bottom: 1px dashed rgba(0, 70, 42, .4); }
.ticket dt { font-weight: 600; font-size: 13px; color: var(--pesto); }
.ticket dd { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.tk-cd { margin: 14px 4px 14px; font-size: 14px; color: var(--ink-2); }
.tk-cd em { font-style: normal; font-family: var(--font-heading); font-size: 22px; color: var(--ube); }
.ticket .btn { width: 100%; }

/* ---- Hero D: headline + three answers ---- */
.h3d { background: var(--feta); min-height: 0 !important; display: block !important; }
.h3d-in { padding-top: clamp(48px, 8vh, 96px); text-align: center; }
.h3d .h1 { font-size: clamp(48px, 5.6vw, 84px); color: var(--ink); }
.h3d .sub { margin: 16px auto 0; max-width: 640px; font-size: 18px; line-height: 27px; }
.answers { margin: 40px auto 0; max-width: 1100px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; border-top: 1px solid var(--ink); }
.answers li { padding: 18px 24px 4px 0; }
.answers li + li { padding-left: 24px; border-left: 1px solid #E7E1DC; }
.an-n { font-family: var(--font-heading); font-weight: 300; font-size: 22px; color: var(--ube); }
.answers b { display: block; margin-top: 6px; font-family: var(--font-heading); font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--ink); }
.answers p { margin-top: 6px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.h3d-go { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.h3d-cd { font-size: 14px; color: var(--ink-2); }
.h3d-cd em { font-style: normal; font-weight: 600; color: var(--ube); }
.h3d-strip { margin-top: 48px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 0 8px; }
.h3d-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px 14px 0 0; }

/* ---- What B: who does what ---- */
.w3b { background: var(--feta); }
.roles { width: 100%; border-collapse: collapse; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px #E7E1DC; }
.roles th, .roles td { padding: 18px 24px; text-align: left; border-bottom: 1px solid #E7E1DC; }
.roles thead th { font-weight: 600; font-size: 13px; color: var(--ink-2); background: #F7F6F3; }
.roles thead th:nth-child(n+2), .roles td { width: 150px; text-align: center; }
.roles tbody th b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--ink); }
.roles tbody th span { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-2); font-weight: 400; }
.roles tbody tr:last-child th, .roles tbody tr:last-child td { border-bottom: 0; }
.yes { display: inline-block; width: 30px; height: 30px; border-radius: 50%; background: var(--shallot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1.5 5.8l3.6 3.6L12.5 1.8' fill='none' stroke='%23B803B8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.yes.w { background-color: var(--cucumber); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1.5 5.8l3.6 3.6L12.5 1.8' fill='none' stroke='%2300462A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.nones { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.nones li { padding: 8px 14px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #E7E1DC; font-weight: 600; font-size: 14px; color: var(--ink); }
.nones li::before { content: '✕'; margin-right: 8px; color: var(--ube); }

/* ---- What C: three rows, photo and text ---- */
.w3c { background: #fff; }
.alt-rows { display: grid; gap: 20px; max-width: 1100px; margin: 0 auto; }
.alt-rows li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: center; }
.alt-rows li.flip .ar-art { order: 2; }
.ar-art { position: relative; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: #F7F6F3; }
.ar-art > img, .ar-art > .bowl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.ar-t h3 { margin-top: 8px; font-family: var(--font-heading); font-weight: 400; font-size: 34px; line-height: 1.1; color: var(--ink); }
.ar-t p { margin-top: 10px; font-size: 17px; line-height: 26px; color: var(--ink-2); max-width: 460px; }

/* ---- What D: index rows ---- */
.w3d { background: var(--feta); }
.idx { border-top: 1px solid var(--ink); }
.idx li { display: grid; grid-template-columns: 56px 120px minmax(0, 4fr) minmax(0, 6fr); gap: 24px; align-items: center; padding: 16px 0; border-bottom: 1px solid #E7E1DC; }
.idx-n { font-family: var(--font-heading); font-weight: 300; font-size: 28px; color: var(--ube); }
.idx-art { position: relative; width: 120px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
.idx-art > img, .idx-art > .bowl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.idx b { font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); }
.idx p { font-size: 16px; line-height: 24px; color: var(--ink-2); }

/* ---- How B: staircase ---- */
.h4b { background: #fff; }
.stairs3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.stairs3 li { position: relative; padding: 24px 24px 28px; border-radius: 20px; overflow: hidden; min-height: 300px; }
.stairs3 .st1 { margin-top: 48px; } .stairs3 .st2 { margin-top: 96px; }
.stairs3 .st0 { background: linear-gradient(180deg, var(--shallot), #fff 90%); } .stairs3 .st1 { background: linear-gradient(180deg, var(--cucumber), #fff 90%); } .stairs3 .st2 { background: linear-gradient(180deg, var(--ginger), #fff 90%); }
.st-top { display: flex; justify-content: space-between; align-items: center; }
.st-n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-weight: 700; color: var(--ube); }
.st-tag { padding: 5px 10px; border-radius: 8px; background: #fff; font-weight: 600; font-size: 13px; color: var(--ink); }
.stairs3 b { display: block; margin-top: 40px; font-family: var(--font-heading); font-weight: 400; font-size: 32px; line-height: 1.08; color: var(--ink); }
.stairs3 p { margin-top: 10px; font-size: 16px; line-height: 24px; color: var(--ink-2); max-width: 320px; }
.stairs3 .gh-stack { width: 150px; margin: 28px 0 0 auto; transform: rotate(-6deg); }
.h4-go { margin-top: 36px; } .h4-go.center { display: flex; justify-content: center; }

/* ---- How C: from all entries to 3 winners ---- */
.h4c { background: var(--feta); }
.funnel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; max-width: 1000px; margin: 0 auto; }
.funnel li { display: flex; flex-direction: column; justify-content: flex-end; height: 380px; }
.fn-bar { height: var(--h); border-radius: 18px 18px 6px 6px; padding: 18px 20px; display: flex; align-items: flex-start; }
.fn-bar.f0 { background: linear-gradient(180deg, var(--ube) 0%, var(--pitaya) 30%, var(--spicy-mayo) 75%, var(--shallot) 93%); }
.fn-bar.f1 { background: linear-gradient(180deg, var(--pitaya) 0%, var(--spicy-mayo) 60%, var(--shallot) 100%); }
.fn-bar.f2 { background: linear-gradient(180deg, var(--spicy-mayo) 0%, var(--shallot) 100%); }
.fn-bar b { font-family: var(--font-heading); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05; color: var(--feta); }
.fn-bar.f2 b { color: var(--ink); }
.funnel p { margin-top: 12px; font-size: 16px; line-height: 23px; color: var(--ink-2); min-height: 46px; }

/* ---- How D: deli receipt ---- */
.h4d { background: #fff; }
.h4d-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.h4d-steps { margin-top: 28px; border-top: 1px solid #E7E1DC; }
.h4d-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid #E7E1DC; }
.h4d-steps li > span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--shallot); color: var(--ube); font-weight: 600; }
.h4d-steps b { display: block; font-weight: 600; font-size: 18px; color: var(--ink); }
.h4d-steps p { margin-top: 2px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.receipt { position: relative; justify-self: center; width: min(400px, 100%); padding: 32px 28px 28px; background: var(--feta); box-shadow: 0 24px 50px rgba(24, 22, 22, .14);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; color: var(--ink); transform: rotate(1.5deg);
  -webkit-mask: radial-gradient(circle at 8px 100%, transparent 7px, #000 7.5px) -8px 0 / 16px 100% repeat-x; mask: radial-gradient(circle at 8px 100%, transparent 7px, #000 7.5px) -8px 0 / 16px 100% repeat-x; padding-bottom: 40px; }
.rc-h { display: block; text-align: center; font-family: var(--font-heading); font-weight: 400; font-size: 28px; color: var(--pesto); }
.rc-no { display: block; text-align: center; margin-top: 4px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 16px; border-bottom: 1px dashed var(--ink); }
.receipt ul { padding: 12px 0; border-bottom: 1px dashed var(--ink); }
.receipt li, .rc-tot { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; font-size: 14px; }
.rc-q { width: 22px; } .rc-t { font-weight: 600; } .receipt i, .rc-tot i { flex: 1; border-bottom: 1px dotted rgba(24, 22, 22, .4); transform: translateY(-4px); } .rc-v { text-align: right; }
.rc-tot { padding-top: 14px; font-size: 16px; } .rc-tot b { font-size: 18px; color: var(--ube); }
.rc-bar { height: 44px; margin-top: 16px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 9px, var(--ink) 9px 10px, transparent 10px 13px); }
.rc-f { margin-top: 10px; text-align: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }

/* ---- Categories B: oval cells ---- */
.c4b { background: #fff; }
.ovals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #E7E1DC; border-bottom: 1px solid #E7E1DC; }
.ov { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 28px 36px; }
.ov + .ov { border-left: 1px solid #E7E1DC; }
.ov-img { position: relative; width: 78%; aspect-ratio: 4 / 5; border-radius: 50%; overflow: hidden; }
.ov-img .bowl { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.ov .c-n { margin-top: 22px; }
.ov h3 { margin-top: 6px; font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); }
.ov p { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--ink-2); max-width: 320px; flex: 1; }
.ov .c-enter { margin-top: 20px; }

/* ---- Categories C: category table ---- */
.c4c { background: var(--feta); }
.ctab { border-top: 1px solid var(--ink); }
.ctab > li { display: grid; grid-template-columns: 120px minmax(0, 4fr) minmax(0, 4fr) auto; gap: 28px; align-items: center; padding: 20px 0; border-bottom: 1px solid #E7E1DC; }
.ct-img { position: relative; width: 120px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; }
.ct-img .bowl { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.ct-main b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); }
.ct-main p { margin-top: 6px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.ct-ideas > span { display: block; font-weight: 600; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.ct-ideas ul { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-ideas li { padding: 6px 11px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #E7E1DC; font-size: 14px; color: var(--ink); }

/* ---- Categories D: colour panels with idea lists ---- */
.c4d { background: #fff; }
.cpanels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cp { display: flex; flex-direction: column; padding: 26px 26px 28px; border-radius: 22px; }
.cp.p0 { background: var(--shallot); } .cp.p1 { background: var(--cucumber); } .cp.p2 { background: var(--ginger); }
.cp-top { display: flex; justify-content: space-between; align-items: flex-start; }
.cp-bowl { position: relative; width: 112px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 5px #fff; }
.cp-bowl .bowl { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; } .cp-bowl .bowl > img { transform: scale(1.25); }
.cp h3 { margin-top: 18px; font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); }
.cp > p { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--ink); }
.cp-l { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(24, 22, 22, .15); font-weight: 600; font-size: 13px; color: var(--ink-2); }
.cp ul { margin-top: 8px; display: grid; gap: 6px; flex: 1; }
.cp li { padding-left: 18px; position: relative; font-size: 15px; line-height: 22px; color: var(--ink); }
.cp li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--ube); }
.cp .c-enter { margin-top: 20px; align-self: flex-start; }

/* ---- Who B: grid of six ---- */
.u4b { background: var(--feta); }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pg-t { margin: 0; border-radius: 20px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.pg-img { aspect-ratio: 16 / 10; overflow: hidden; } .pg-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.pg-t figcaption { padding: 18px 20px 20px; }
.pg-t figcaption b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--ink); }
.pg-t figcaption span { display: block; margin-top: 6px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.pg-t.k0 .pg-img { background: var(--ginger); } .pg-t.k1 .pg-img { background: var(--shallot); } .pg-t.k2 .pg-img { background: var(--cucumber); }
.pg-cta { background: var(--ube); color: var(--feta); padding: 24px; justify-content: flex-end; align-items: flex-start; }
.pg-cta b { font-family: var(--font-heading); font-weight: 400; font-size: 32px; line-height: 1.08; }
.pg-cta span { margin: 8px 0 18px; color: var(--shallot); font-size: 16px; }

/* ---- Who C: checklist + collage ---- */
.u4c { background: #fff; }
.u4c-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.collage { position: relative; aspect-ratio: 1; }
.collage img { position: absolute; object-fit: cover; border-radius: 18px; box-shadow: 0 18px 40px rgba(24, 22, 22, .14); }
.collage .cl0 { left: 0; top: 0; width: 62%; aspect-ratio: 4 / 5; }
.collage .cl1 { right: 0; top: 18%; width: 46%; aspect-ratio: 4 / 5; border: 6px solid #fff; }
.collage .cl2 { left: 20%; bottom: 0; width: 46%; aspect-ratio: 1; border: 6px solid #fff; }
.u4c .h2 { font-size: var(--h3); }
.fy { margin-top: 24px; font-weight: 600; font-size: 15px; color: var(--ink); }
.checks { margin-top: 10px; border-top: 1px solid #E7E1DC; }
.checks li { position: relative; padding: 14px 0 14px 40px; border-bottom: 1px solid #E7E1DC; }
.checks li::before { content: ''; position: absolute; left: 0; top: 16px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--shallot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1.5 5.8l3.6 3.6L12.5 1.8' fill='none' stroke='%23B803B8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.checks b { display: block; font-weight: 600; font-size: 17px; color: var(--ink); }
.checks span { display: block; margin-top: 2px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.u4-go { margin-top: 28px; } .u4-go.center { display: flex; justify-content: center; }

/* ---- Who D: speech bubbles ---- */
.u4d { background: var(--feta); }
.chat { max-width: 860px; margin: 0 auto; display: grid; gap: 14px; }
.chat li { display: flex; align-items: flex-end; gap: 12px; max-width: 78%; }
.chat li.r { margin-left: auto; flex-direction: row-reverse; }
.chat img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.bub { padding: 14px 18px; border-radius: 20px 20px 20px 6px; }
.chat li.r .bub { border-radius: 20px 20px 6px 20px; }
.bub.b0 { background: var(--shallot); } .bub.b1 { background: #fff; } .bub.b2 { background: var(--cucumber); } .bub.b3 { background: var(--ginger); } .bub.b4 { background: #fff; }
.bub b { display: block; font-weight: 600; font-size: 14px; color: var(--ube); }
.bub span { display: block; margin-top: 3px; font-family: var(--font-heading); font-weight: 400; font-size: 22px; line-height: 1.25; color: var(--ink); }

/* ---- FAQ B: all open, two columns ---- */
.f4b { background: #fff; }
.qa2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; border-top: 1px solid var(--ink); }
.qa2 > div { padding: 20px 0; border-bottom: 1px solid #E7E1DC; }
.qa2 dt { font-family: var(--font-heading); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--ink); }
.qa2 dd { margin: 8px 0 0; font-size: 15px; line-height: 23px; color: var(--ink-2); }

/* ---- FAQ C: quick answers, then the rest ---- */
.f4c { background: var(--feta); }
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.qk { padding: 22px 24px; border-radius: 18px; }
.qk.k0 { background: var(--shallot); } .qk.k1 { background: var(--ginger); } .qk.k2 { background: var(--cucumber); }
.qk b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 24px; line-height: 1.15; color: var(--ink); }
.qk p { margin-top: 8px; font-size: 15px; line-height: 23px; color: var(--ink); }
.f4c-rest { max-width: none; }

/* ---- FAQ D: grouped, all open ---- */
.f4d { background: #fff; }
.fg { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 40px; padding: 28px 0; border-top: 1px solid var(--ink); }
.fg h3 { font-family: var(--font-body); font-weight: 600; font-size: 18px; color: var(--pesto); }
.fg dl { display: grid; gap: 20px; }
.fg dt { font-family: var(--font-heading); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--ink); }
.fg dd { margin: 6px 0 0; font-size: 15px; line-height: 23px; color: var(--ink-2); max-width: 680px; }

/* ---- Rules B: at a glance ---- */
.r4b { background: var(--feta); padding: 64px 0; }
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.glance > div { padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #E7E1DC; }
.glance dt { font-weight: 600; font-size: 16px; color: var(--ink); }
.glance dd { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.r4-links { background: #fff; border: 1px solid var(--pesto); }

/* ---- Rules C: summary + documents ---- */
.r4c { background: #fff; padding: 64px 0; }
.r4c-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.r4c-k { font-weight: 600; font-size: 14px; color: var(--ink-2); margin: -8px 0 10px; }
.summ { display: grid; gap: 10px; }
.summ li { position: relative; padding-left: 20px; font-size: 16px; line-height: 24px; color: var(--ink); }
.summ li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--ube); }
.docs { border-top: 1px solid var(--ink); }
.docs a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 4px; border-bottom: 1px solid #E7E1DC; }
.docs a:hover { background: var(--feta); }
.docs b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 22px; color: var(--ink); }
.docs span { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-2); }
.docs i { color: var(--ube); }

/* ---- Rules D: one compact line ---- */
.r4d { background: var(--feta); padding: 28px 0; border-top: 1px solid #E7E1DC; }
.r4d-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.r4d p { font-size: 14px; color: var(--ink-2); }
.r4d nav { display: flex; align-items: center; gap: 12px; }
.r4d nav a { font-family: var(--font-eyebrow); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.r4d nav a:hover { color: var(--ube); }
.r4d nav i { color: var(--ube); font-style: normal; }

/* ===== round 2 on tablets and phones ===== */
@media (max-width: 1080px) {
  .h3b { grid-template-columns: 1fr; } .h3b-copy { padding: 48px var(--edge) 32px; } .h3b-tiles { grid-template-columns: repeat(5, 1fr); grid-auto-rows: auto; }
  .h3b-tiles .tile:nth-child(n+6) { display: none; }
  .h3c-card { flex-direction: column; align-items: stretch; justify-content: flex-end; padding: 24px; } .ticket { width: 100%; }
  .h4d-grid, .u4c-grid, .r4c-grid { grid-template-columns: 1fr; gap: 40px; }
  .ctab > li { grid-template-columns: 96px minmax(0, 1fr); } .ct-img { width: 96px; } .ct-ideas, .ctab .c-enter { grid-column: 2; } .ctab .c-enter { justify-self: start; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .h3b .h1 { font-size: 42px; } .h3b-copy { padding: 36px 20px 28px; } .h3b-go .btn { width: 100%; }
  .facts { grid-template-columns: 1fr; } .facts > div, .facts > div + div { padding: 12px 0; border-left: 0; border-bottom: 1px solid #E7E1DC; display: grid; grid-template-columns: 110px 1fr; align-items: baseline; }
  .facts dd { margin: 0; } .facts dd b { font-size: 26px; }
  .h3b-tiles { grid-template-columns: repeat(3, 1fr); padding: 8px; gap: 8px; } .h3b-tiles .tile:nth-child(n+4) { display: none; }
  .h3c { padding: 8px; } .h3c-card { padding: 12px; min-height: 0; padding-top: 200px; } .h3c-copy { padding: 20px; } .h3c .h1 { font-size: 36px; } .ticket { padding: 18px; }
  .h3d .h1 { font-size: 42px; } .answers { grid-template-columns: 1fr; } .answers li, .answers li + li { padding: 14px 0; border-left: 0; border-bottom: 1px solid #E7E1DC; }
  .h3d-go .btn { width: 100%; } .h3d-strip { grid-template-columns: repeat(3, 1fr); margin-top: 32px; } .h3d-strip img:nth-child(n+4) { display: none; }
  .roles th, .roles td { padding: 12px 10px; } .roles thead th:nth-child(n+2), .roles td { width: 64px; } .roles tbody th b { font-size: 18px; } .roles tbody th span { font-size: 13px; }
  .alt-rows li { grid-template-columns: 1fr; gap: 14px; } .alt-rows li.flip .ar-art { order: 0; } .ar-t h3 { font-size: 28px; }
  .idx li { grid-template-columns: 72px 1fr; gap: 6px 14px; } .idx-n { display: none; } .idx-art { width: 72px; grid-row: span 2; align-self: start; } .idx b { font-size: 24px; } .idx p { font-size: 15px; }
  .stairs3 { grid-template-columns: 1fr; gap: 12px; } .stairs3 .st1, .stairs3 .st2 { margin-top: 0; } .stairs3 li { min-height: 0; } .stairs3 b { margin-top: 18px; font-size: 26px; } .stairs3 .gh-stack { width: 110px; margin-top: 14px; }
  .h4-go .btn { width: 100%; }
  .funnel { gap: 8px; } .funnel li { height: 280px; } .fn-bar { padding: 12px; } .fn-bar b { font-size: 20px; } .funnel p { font-size: 13px; line-height: 18px; }
  .receipt { transform: none; padding: 26px 18px 36px; } .receipt li, .rc-tot { font-size: 13px; }
  .ovals { grid-template-columns: 1fr; border: 0; } .ov { padding: 24px 0; border-bottom: 1px solid #E7E1DC; } .ov + .ov { border-left: 0; } .ov-img { width: 60%; aspect-ratio: 1; }
  .ctab > li { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; } .ct-img { width: 72px; } .ct-main b { font-size: 24px; }
  .cpanels { grid-template-columns: 1fr; } .cp-bowl { width: 84px; }
  .pgrid { grid-template-columns: 1fr 1fr; gap: 10px; } .pg-t figcaption { padding: 12px 12px 14px; } .pg-t figcaption b { font-size: 19px; } .pg-t figcaption span { font-size: 13px; line-height: 18px; }
  .pg-cta { grid-column: 1 / -1; padding: 20px; } .pg-cta .btn { width: 100%; }
  .collage { max-width: 320px; } .u4-go .btn { width: 100%; }
  .chat li { max-width: 92%; } .chat img { width: 44px; height: 44px; } .bub span { font-size: 18px; }
  .qa2 { grid-template-columns: 1fr; } .qa2 dt { font-size: 20px; }
  .quick { grid-template-columns: 1fr; gap: 10px; }
  .fg { grid-template-columns: 1fr; gap: 14px; }
  .glance { grid-template-columns: 1fr 1fr; gap: 8px; }
  .r4d-in { flex-direction: column; align-items: flex-start; } .r4d nav { flex-wrap: wrap; }
}

/* =====================================================================
   v3 section options, round 3 -- three kinds of carousel for each
   carousel section; style guide + v2 pieces elsewhere. Every slide shows
   its full text; nothing advances by itself.
   ===================================================================== */
.sl-ctl { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.sl-ctl.center { justify-content: center; }
.sl-count { min-width: 64px; text-align: center; font-weight: 600; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
[data-sl] { outline: none; touch-action: pan-y; }
[data-sl]:focus-visible { box-shadow: 0 0 0 3px rgba(184, 3, 184, .25); border-radius: 12px; }
.gbands { position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.gbands.g1 i { background: linear-gradient(180deg, var(--ube) 0%, var(--pitaya) 30%, var(--spicy-mayo) 75%, var(--shallot) 93%); }
.gbands.g1 i:nth-child(even) { background: linear-gradient(0deg, var(--ube) 0%, var(--pitaya) 30%, var(--spicy-mayo) 75%, var(--shallot) 93%); }
.gbands.g2 i { background: linear-gradient(180deg, var(--celery) 0%, var(--mint-jelly) 30%, var(--ginger) 75%, var(--cucumber) 93%); }
.gbands.g2 i:nth-child(even) { background: linear-gradient(0deg, var(--celery) 0%, var(--mint-jelly) 30%, var(--ginger) 75%, var(--cucumber) 93%); }

/* ---- What B: coverflow ---- */
.x-cf { background: var(--feta); overflow: hidden; }
.cf-stage { position: relative; height: 560px; }
.cf-c { position: absolute; left: 50%; top: 0; width: min(440px, 76vw); border-radius: var(--r); overflow: hidden; background: #fff; cursor: pointer;
  transform: translateX(calc(-50% + var(--d, 0) * 78%)) scale(calc(1 - var(--ad, 0) * .14)); opacity: calc(1 - var(--ad, 0) * .35); z-index: calc(10 - var(--ad, 0));
  transition: transform .6s var(--ease), opacity .5s ease; box-shadow: 0 20px 44px rgba(24, 22, 22, .1); }
.cf-c.cur { cursor: default; box-shadow: 0 28px 60px rgba(24, 22, 22, .16); }
.cf-art { position: relative; aspect-ratio: 16 / 11; } .cf-art > img, .cf-art > .bowl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.cf-b { padding: 22px 26px 26px; }
.cf-b h3 { margin-top: 8px; font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); }
.cf-b p { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--ink-2); }

/* ---- What C: tabbed slider ---- */
.x-tb { background: #fff; }
.tb-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid #E7E1DC; }
.tb-tabs button { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 16px 4px 18px; font-family: var(--font-heading); font-size: 24px; line-height: 1.15; color: rgba(24, 22, 22, .4); text-align: left; transition: color .3s; }
.tb-tabs button span { font-weight: 300; font-size: 18px; color: var(--ube); }
.tb-tabs button::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--ube); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.tb-tabs button.on { color: var(--ink); } .tb-tabs button.on::after { transform: none; }
.tb-stage { display: grid; margin-top: 28px; }
.tb-s { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; opacity: 0; visibility: hidden; transform: translateX(calc(var(--d, 0) * 40px)); transition: opacity .45s ease, transform .55s var(--ease), visibility 0s .45s; }
.tb-s.cur { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .55s var(--ease); }
.tb-art { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; } .tb-art > img, .tb-art > .bowl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.tb-b h3 { margin-top: 8px; font-family: var(--font-heading); font-weight: 400; font-size: var(--h4); line-height: 1.1; color: var(--ink); }
.tb-b p { margin-top: 12px; font-size: 18px; line-height: 28px; color: var(--ink-2); }

/* ---- What D: pinned, with the titles listed ---- */
.x-wc { background: var(--feta); }
.x-wc .wc-copy .h2 { color: var(--pesto); }
.wc-list { margin-top: 28px; border-top: 1px solid #E7E1DC; }
.wc-list li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid #E7E1DC; font-family: var(--font-heading); font-size: 24px; color: rgba(24, 22, 22, .35); transition: color .4s; }
.wc-list li span { font-weight: 300; font-size: 18px; color: var(--ube); }
.wc-list li.on { color: var(--ink); }
.x-wc .wc-card { background: #fff; }

/* ---- Categories B: split slider ---- */
.x-sp { background: #fff; }
.sp { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: stretch; }
.sp-photo { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; }
.sp-img { position: absolute; inset: 0; clip-path: inset(0 0 0 100%); transition: clip-path .7s var(--ease); }
.sp-img.cur { clip-path: inset(0); z-index: 2; }
.sp-img .bowl { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.sp-panel { display: flex; flex-direction: column; }
.sp-list { border-top: 1px solid var(--ink); }
.sp-list button { width: 100%; display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid #E7E1DC; font-family: var(--font-heading); font-size: 28px; line-height: 1.1; color: rgba(24, 22, 22, .38); text-align: left; transition: color .3s; }
.sp-list button span { font-weight: 300; font-size: 18px; color: var(--ube); }
.sp-list button.on { color: var(--ink); }
.sp-detail { display: grid; margin-top: 22px; flex: 1; }
.sp-d { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.sp-d.cur { opacity: 1; visibility: visible; transition: opacity .4s .15s; }
.sp-d p { font-size: 17px; line-height: 26px; color: var(--ink-2); }
.sp-l { display: block; margin-top: 16px; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.sp-d ul, .hs-b ul { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.sp-d li, .hs-b li { padding: 6px 11px; border-radius: 8px; background: var(--feta); font-size: 14px; color: var(--ink); }
.sp-d .c-enter { margin-top: 22px; }

/* ---- Categories C: deck with peeking tabs ---- */
.x-dk { background: var(--feta); }
.dk-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.dk-names { margin-top: 28px; border-top: 1px solid #E7E1DC; }
.dk-names button { width: 100%; display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #E7E1DC; font-family: var(--font-heading); font-size: 24px; color: rgba(24, 22, 22, .38); text-align: left; transition: color .3s; }
.dk-names button span { font-weight: 300; font-size: 18px; color: var(--ube); }
.dk-names button.on { color: var(--ink); }
.dk-stage { position: relative; height: 600px; }
.dk-c { position: absolute; left: 50%; top: 0; width: min(400px, 82vw); border-radius: var(--r); overflow: visible; background: #fff; box-shadow: 0 18px 40px rgba(24, 22, 22, .14);
  transform: translateX(-50%) translateY(calc(max(var(--d, 0), 0) * 38px)) scale(calc(1 - max(var(--d, 0), 0) * .05)); z-index: calc(10 - var(--d, 0));
  transition: transform .6s var(--ease), opacity .5s; }
.dk-c[style*='--d: -'] { transform: translateX(-50%) translateY(-60px) rotate(-8deg); opacity: 0; pointer-events: none; }
.dk-art { position: relative; aspect-ratio: 16 / 11; border-radius: var(--r) var(--r) 0 0; overflow: hidden; } .dk-art .bowl { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.dk-b { padding: 20px 24px 24px; }
.dk-b h3 { margin-top: 6px; font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); }
.dk-b p { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.dk-b .c-enter { margin-top: 16px; }
.dk-tab { position: absolute; left: 20px; bottom: -30px; padding: 6px 12px; border-radius: 0 0 10px 10px; font-weight: 600; font-size: 13px; color: var(--ink); opacity: 0; transition: opacity .3s; }
.dk-c.k0 .dk-tab { background: var(--shallot); } .dk-c.k1 .dk-tab { background: var(--cucumber); } .dk-c.k2 .dk-tab { background: var(--ginger); }
.dk-c:not(.cur) .dk-tab { opacity: 1; }

/* ---- Categories D: sideways track on scroll ---- */
.x-hs { position: relative; background: #fff; }
.hs-pin { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.hs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 28px; }
.hs-bar { width: 220px; height: 4px; border-radius: 4px; background: #E7E1DC; overflow: hidden; } .hs-bar i { display: block; height: 100%; width: 0; background: var(--ube); }
.hs-track { display: flex; gap: 20px; padding: 0 var(--edge); will-change: transform; }
.hs-c { flex: none; width: min(780px, 70vw); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--r); overflow: hidden; }
.hs-c.k0 { background: var(--shallot); } .hs-c.k1 { background: var(--cucumber); } .hs-c.k2 { background: var(--ginger); }
.hs-art { position: relative; min-height: 400px; } .hs-art .bowl { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; } .hs-art .cat-eg { position: absolute; top: 14px; left: 14px; z-index: 3; }
.hs-b { padding: 28px 28px 30px; display: flex; flex-direction: column; align-items: flex-start; }
.hs-b h3 { margin-top: 6px; font-family: var(--font-heading); font-weight: 400; font-size: 32px; line-height: 1.08; color: var(--ink); }
.hs-b p { margin-top: 10px; font-size: 16px; line-height: 24px; color: var(--ink); }
.hs-b li { background: rgba(255, 255, 255, .7); }
.hs-b .c-enter { margin-top: auto; }

/* ---- Who B: thumbnail slider ---- */
.x-th { background: var(--feta); }
.th { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; }
.th-photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; }
.th-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .5s, transform .9s var(--ease); }
.th-photo img.cur { opacity: 1; transform: none; }
.th-cap { display: grid; min-height: 190px; }
.th-cap > div { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--ease); }
.th-cap > div.cur { opacity: 1; transform: none; }
.th-k { font-weight: 600; font-size: 14px; color: var(--ube); }
.th-cap b { display: block; margin-top: 8px; font-family: var(--font-heading); font-weight: 400; font-size: var(--h3); line-height: 1.05; color: var(--ink); }
.th-cap p { margin-top: 12px; font-family: var(--font-heading); font-weight: 300; font-size: 26px; line-height: 1.3; color: var(--ink-2); }
.th-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.th-thumbs button { display: flex; flex-direction: column; gap: 6px; text-align: left; opacity: .55; transition: opacity .3s; }
.th-thumbs button.on { opacity: 1; }
.th-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; box-shadow: 0 0 0 0 var(--ube); transition: box-shadow .3s; }
.th-thumbs button.on img { box-shadow: 0 0 0 3px var(--ube); }
.th-thumbs span { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.th-go { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }

/* ---- Who C: drifting row ---- */
.x-dr { background: #fff; overflow: hidden; }
.dr { overflow: hidden; outline: none; }
.dr-t { display: flex; gap: 20px; width: max-content; animation: run 55s linear infinite; padding: 8px 0; }
.dr:hover .dr-t, .dr:focus-within .dr-t, .dr:focus .dr-t { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .dr-t { animation: none; } .dr { overflow-x: auto; } }
.dr-c { width: 300px; margin: 0; padding: 12px 12px 18px; border-radius: 4px; background: var(--feta); box-shadow: 0 10px 26px rgba(24, 22, 22, .1); }
.dr-c.k0 { transform: rotate(-2deg); } .dr-c.k1 { transform: rotate(1.5deg) translateY(16px); } .dr-c.k2 { transform: rotate(-1deg); } .dr-c.k3 { transform: rotate(2deg) translateY(12px); } .dr-c.k4 { transform: rotate(-1.5deg); }
.dr-c img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.dr-c figcaption { padding: 12px 4px 0; }
.dr-c b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 24px; color: var(--ink); }
.dr-c span { display: block; margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.dr-go { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .dr-go span { font-size: 14px; color: var(--ink-2); }

/* ---- Who D: polaroid loop ---- */
.x-pl { background: var(--feta); overflow: hidden; }
.pl-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 48px; align-items: center; }
.pl-go { margin-top: 28px; }
.pl-stage { position: relative; height: 560px; }
.pl-c { position: absolute; left: 50%; top: 10px; width: min(330px, 74vw); margin: 0; padding: 12px 12px 18px; cursor: pointer; background: var(--bg, #fff); box-shadow: 0 16px 36px rgba(24, 22, 22, .16);
  transform: translateX(calc(-50% + var(--d, 0) * 46%)) rotate(calc(var(--d, 0) * 7deg)) translateY(calc(var(--ad, 0) * 22px)); opacity: calc(1 - var(--ad, 0) * .25); z-index: calc(10 - var(--ad, 0));
  transition: transform .6s var(--ease), opacity .4s; }
.pl-c[style*='--ad: 2'], .pl-c[style*='--ad: 3'] { opacity: 0; pointer-events: none; }
.pl-c.cur { cursor: default; }
.pl-c.k0 { --bg: var(--shallot); } .pl-c.k1 { --bg: var(--cucumber); } .pl-c.k2 { --bg: var(--ginger); } .pl-c.k3 { --bg: #fff; } .pl-c.k4 { --bg: var(--shallot); }
.pl-c img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pl-c figcaption { padding: 12px 4px 0; }
.pl-c b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 24px; color: var(--ink); }
.pl-c span { display: block; margin-top: 4px; font-size: 15px; line-height: 21px; color: var(--ink-2); }
.pl-last { --bg: var(--ube); min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; color: var(--feta); }
.pl-last b { font-family: var(--font-heading); font-weight: 400; font-size: 32px; line-height: 1.08; color: var(--feta); }
.pl-last span { margin: 8px 0 18px; color: var(--shallot); font-size: 16px; }

/* ---- How B: process grid ---- */
.x-pg { background: #fff; }
.pgr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.pgr-bar { position: relative; border-radius: 16px 16px 0 0; padding: 18px; display: flex; justify-content: space-between; align-items: flex-start; overflow: hidden;
  background: linear-gradient(180deg, var(--ube) 0%, var(--pitaya) 30%, var(--spicy-mayo) 75%, var(--shallot) 93%); }
.pgr-bar.flip { background: linear-gradient(0deg, var(--ube) 0%, var(--pitaya) 30%, var(--spicy-mayo) 75%, var(--shallot) 93%); }
.pgr .s0 .pgr-bar { height: 160px; } .pgr .s1 .pgr-bar { height: 230px; } .pgr .s2 .pgr-bar { height: 300px; }
.pgr-n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--feta); color: var(--ube); font-weight: 700; }
.pgr-tag { padding: 5px 10px; border-radius: 8px; background: var(--feta); font-weight: 600; font-size: 13px; color: var(--ink); }
.pgr-bar .gh-stack { position: absolute; right: 18px; bottom: 18px; width: 150px; transform: rotate(-6deg); }
.pgr b { display: block; margin-top: 16px; font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); }
.pgr p { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--ink-2); max-width: 340px; }

/* ---- How C: Ube Cup panel ---- */
.x-up { background: var(--feta); }
.up { position: relative; background: var(--ube); color: var(--feta); overflow: hidden;
  --key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 37h40M4 37V5h32v24H14V15h12' fill='none' stroke='%23FFD64A' stroke-width='3.4'/%3E%3C/svg%3E"); }
.up::before { content: ''; position: absolute; inset: 0; background: var(--key) 0 0 / 56px 56px repeat; opacity: .09; pointer-events: none; }
.up .key-band { position: relative; height: 44px; background-color: #FAAB20; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 37h40M4 37V5h32v24H14V15h12' fill='none' stroke='%23B803B8' stroke-width='3.4'/%3E%3C/svg%3E"); background-size: 44px 44px; box-shadow: inset 0 3px 0 #FFD64A, inset 0 -3px 0 #FFD64A; }
.up-in { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.up-h { font-family: var(--font-heading); font-weight: 400; font-size: var(--h3); line-height: 1.06; color: var(--feta); }
.up-s { margin-top: 10px; font-size: 18px; color: var(--shallot); }
.up-steps { margin-top: 24px; border-top: 1px solid rgba(250, 245, 238, .3); }
.up-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(250, 245, 238, .3); }
.up-steps li > span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #FFD64A; color: var(--ube); font-weight: 700; }
.up-steps b { font-weight: 600; font-size: 18px; color: var(--feta); }
.up-steps p { margin-top: 2px; font-size: 15px; line-height: 22px; color: rgba(250, 245, 238, .85); }
.up-go { margin-top: 28px; }
.up-prize { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.up-prize .opt-badge { position: relative; inset: auto; width: 110px; height: 110px; margin-bottom: 10px; }
.up-prize b { font-family: var(--font-heading); font-weight: 400; font-size: clamp(96px, 10vw, 150px); line-height: .9; color: #FFD64A; }
.up-prize span { margin-top: 6px; font-family: var(--font-heading); font-weight: 300; font-size: 32px; color: var(--feta); }
.up-prize p { margin-top: 10px; max-width: 320px; font-size: 16px; line-height: 23px; color: rgba(250, 245, 238, .85); }

/* ---- How D: timeline on the taxi checker ---- */
.x-tl { background: #fff; }
.tl { position: relative; padding-top: 22px; }
.tl-rail { position: absolute; left: 0; right: 0; top: 34px; height: 24px; background-size: 24px 24px; border-radius: 4px; }
.tl-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.tl-pill { display: inline-block; padding: 8px 14px; border-radius: 10px; background: var(--ube); color: var(--feta); font-weight: 600; font-size: 14px; box-shadow: 0 0 0 4px #fff; }
.tl-steps b { display: block; margin-top: 28px; font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); }
.tl-steps p { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--ink-2); max-width: 340px; }
.tl-prize { margin-top: 44px; display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 24px 28px; border-radius: var(--r);
  background: linear-gradient(90deg, rgba(250, 192, 255, .65), rgba(255, 123, 97, .22)); box-shadow: inset 0 0 0 1px rgba(184, 3, 184, .25); }
.tl-prize .gh-stack { width: 170px; transform: rotate(-6deg); }
.tl-prize b { font-family: var(--font-heading); font-weight: 400; font-size: 28px; color: var(--ink); }
.tl-prize p { margin-top: 6px; font-size: 16px; line-height: 24px; color: var(--ink); }

/* ---- FAQ B: white card on the Greek key ---- */
.x-fk { padding: 96px 0; background-color: #FFD64A;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 37h40M4 37V5h32v24H14V15h12' fill='none' stroke='%23FAAB20' stroke-width='3.4'/%3E%3C/svg%3E"); background-size: 56px 56px; }
.fk-card { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; padding: 48px; border-radius: var(--r); background: #fff; box-shadow: 0 20px 50px rgba(120, 70, 0, .14); }
.fk-l .h2 { font-size: var(--h3); color: var(--pesto); } .fk-l .sub { margin: 12px 0 24px; }

/* ---- FAQ C: accordion + still-have-questions card ---- */
.x-fq { background: var(--feta); }
.fq-w { max-width: 860px; margin: 0 auto; }
.fq-card { margin-top: 32px; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 20px 24px; border-radius: var(--r);
  background: linear-gradient(90deg, rgba(250, 192, 255, .65), rgba(255, 123, 97, .22)); box-shadow: inset 0 0 0 1px rgba(184, 3, 184, .25); }
.fq-card .opt-badge { position: relative; inset: auto; width: 96px; height: 96px; }
.fq-card b { font-family: var(--font-heading); font-weight: 400; font-size: 26px; color: var(--ink); }
.fq-card p { margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--ink); }

/* ---- FAQ D: gradient-band panel + numbered questions ---- */
.x-fg { background: #fff; }
.fg-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.fg-panel { position: sticky; top: calc(var(--header-h) + 24px); min-height: 420px; border-radius: var(--r); overflow: hidden; display: flex; align-items: flex-end; }
.fg-in { position: relative; margin: 16px; padding: 22px 24px; border-radius: 16px; background: var(--feta); }
.fg-in .h2 { font-size: var(--h3); color: var(--pesto); } .fg-in p { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.faq-qs.num .q-h { justify-content: flex-start; }
.faq-qs.num .q-h .pm { margin-left: auto; }
.qn { flex: none; width: 44px; font-family: var(--font-heading); font-weight: 300; font-size: 20px; color: var(--ube); }
.faq-qs.num .q-a .in { padding-left: 44px; }

/* ---- Rules B: Ube band ---- */
.x-rb { padding: 64px 0; background: var(--ube); color: var(--feta); }
.rb-h { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.rb-h h2 { font-family: var(--font-heading); font-weight: 400; font-size: 36px; color: var(--feta); }
.rb-h p { font-size: 15px; color: var(--shallot); }
.rb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rb-cards a { position: relative; display: block; padding: 22px 56px 22px 22px; border-radius: 16px; background: var(--feta); transition: transform .3s var(--ease); }
.rb-cards a:hover { transform: translateY(-3px); }
.rb-cards b { display: block; font-weight: 600; font-size: 18px; color: var(--ink); } .rb-cards span { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.rb-cards i { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--ube); }

/* ---- Rules C: between checker strips ---- */
.x-rc { background: var(--feta); }
.rc-in { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 28px; }
.rc-in b { font-weight: 600; font-size: 18px; color: var(--ink); } .rc-in p { margin-top: 2px; font-size: 14px; color: var(--ink-2); }
.rc-in nav { display: flex; gap: 10px; flex-wrap: wrap; }
.rc-in nav a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #E7E1DC; font-weight: 600; font-size: 14px; color: var(--ink); }
.rc-in nav a svg { color: var(--ube); } .rc-in nav a:hover { box-shadow: inset 0 0 0 1.5px var(--ube); }

/* ---- Rules D: gradient grid tiles ---- */
.x-rg { background: #fff; padding: 64px 0; }
.rg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rg-t { position: relative; display: flex; align-items: flex-end; min-height: 220px; padding: 14px; border-radius: 20px; overflow: hidden; transition: transform .3s var(--ease); }
.rg-t:hover { transform: translateY(-4px); }
.rg-l { position: relative; flex: 1; display: block; padding: 16px 48px 16px 16px; border-radius: 12px; background: var(--feta); }
.rg-l b { display: block; font-weight: 600; font-size: 18px; color: var(--ink); } .rg-l em { display: block; margin-top: 2px; font-style: normal; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.rg-l i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--ube); }
.rg-legal { margin-top: 18px; font-size: 14px; color: var(--ink-2); }

/* ===== round 3 on tablets and phones ===== */
@media (max-width: 1080px) {
  .tb-s, .sp, .dk-grid, .th, .pl-grid, .up-in, .fk-card, .fg-grid { grid-template-columns: 1fr; gap: 32px; }
  .fg-panel { position: relative; top: auto; min-height: 220px; }
  .hs-c { width: 80vw; }
}
@media (max-width: 720px) {
  .cf-stage { height: 520px; } .cf-c { width: 78vw; transform: translateX(calc(-50% + var(--d, 0) * 88%)) scale(calc(1 - var(--ad, 0) * .1)); }
  .tb-tabs { grid-template-columns: 1fr; } .tb-tabs button { font-size: 20px; padding: 12px 4px; border-bottom: 1px solid #E7E1DC; } .tb-tabs button::after { top: 0; bottom: 0; right: auto; width: 3px; height: auto; transform: scaleY(0); transform-origin: top; }
  .tb-tabs button.on::after { transform: none; } .tb-s { gap: 16px; } .tb-b p { font-size: 16px; line-height: 24px; }
  .wc-list li { font-size: 20px; }
  .sp-photo { aspect-ratio: 4 / 3; } .sp-list button { font-size: 22px; } .sp-d .c-enter { width: 100%; }
  .dk-stage { height: 560px; } .dk-names button { font-size: 20px; }
  .x-hs { padding: 64px 0; } .hs-pin { position: static; height: auto; display: block; overflow: visible; }
  .hs-head { flex-direction: column; align-items: flex-start; } .hs-bar { display: none; }
  .hs-track { overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 12px; scrollbar-width: none; transform: none !important; }
  .hs-c { width: 84vw; grid-template-columns: 1fr; scroll-snap-align: center; } .hs-art { min-height: 220px; } .hs-b .c-enter { margin-top: 18px; }
  .th-cap { min-height: 170px; } .th-cap p { font-size: 20px; } .th-thumbs { gap: 6px; } .th-thumbs span { font-size: 11px; }
  .th-go { flex-direction: column; align-items: stretch; } .th-go .btn { width: 100%; }
  .dr-c { width: 240px; } .dr-go .btn { width: calc(100% - 40px); }
  .pl-stage { height: 520px; } .pl-c { width: 72vw; transform: translateX(calc(-50% + var(--d, 0) * 34%)) rotate(calc(var(--d, 0) * 6deg)) translateY(calc(var(--ad, 0) * 18px)); }
  .pl-go .btn { width: 100%; }
  .pgr { gap: 8px; } .pgr .s0 .pgr-bar { height: 110px; } .pgr .s1 .pgr-bar { height: 150px; } .pgr .s2 .pgr-bar { height: 190px; }
  .pgr-bar { padding: 10px; } .pgr-n { width: 30px; height: 30px; font-size: 14px; } .pgr-tag { display: none; } .pgr-bar .gh-stack { width: 80px; right: 6px; bottom: 8px; }
  .pgr b { font-size: 19px; } .pgr p { font-size: 13px; line-height: 19px; }
  .up-in { padding-top: 40px; padding-bottom: 40px; } .up-go .btn { width: 100%; } .up .key-band { height: 32px; background-size: 32px 32px; }
  .tl-rail { left: 15px; right: auto; top: 0; bottom: 0; width: 24px; height: auto; }
  .tl-steps { grid-template-columns: 1fr; gap: 28px; padding-left: 52px; } .tl-steps b { margin-top: 12px; font-size: 24px; }
  .tl { padding-top: 0; }
  .tl-prize { grid-template-columns: 1fr; gap: 16px; padding: 20px; } .tl-prize .gh-stack { width: 140px; } .tl-prize .btn { width: 100%; }
  .x-fk { padding: 48px 0; background-size: 40px 40px; } .fk-card { padding: 24px 18px; } .fk-l .btn { width: 100%; }
  .fq-card { grid-template-columns: 1fr; text-align: center; justify-items: center; } .fq-card .btn { width: 100%; }
  .faq-qs.num .q-a .in { padding-left: 0; } .qn { width: 34px; font-size: 17px; }
  .rb-cards, .rg { grid-template-columns: 1fr; } .rg-t { min-height: 150px; }
  .rc-in nav { width: 100%; } .rc-in nav a { flex: 1; justify-content: center; }
}
.tb-stage { overflow: hidden; }

/* =====================================================================
   round 4
   ===================================================================== */
/* the taxi checker at v2's size: 60px squares, two rows */
.checker.thin { height: 120px; background-size: 120px 120px; }
@media (max-width: 720px) { .checker.thin { height: 80px; background-size: 80px 80px; } }

/* What C: no tabs; the section head sits beside the photo */
.x-tb .tb-stage { margin-top: 0; }
.tb-h { font-family: var(--font-heading); font-weight: 400; font-size: var(--h3); line-height: 1.06; color: var(--pesto); margin-bottom: 24px; }

/* ---- How B: steps on the magenta gradient bands ---- */
.x-gb { position: relative; overflow: hidden; padding: 96px 0; }
.x-gb > .gbands { z-index: 0; }
.gb-in { position: relative; z-index: 1; }
.gb-head { display: inline-block; padding: 22px 28px; border-radius: 20px; background: var(--feta); box-shadow: 0 16px 36px rgba(94, 0, 102, .2); }
.gb-head h2 { font-family: var(--font-heading); font-weight: 400; font-size: var(--h2); line-height: 1.04; color: var(--pesto); }
.gb-head p { margin-top: 8px; font-size: 18px; color: var(--ink-2); }
.gb-steps { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.gb-steps li { position: relative; padding: 26px 26px 30px; border-radius: 24px; background: var(--feta); box-shadow: 0 20px 44px rgba(94, 0, 102, .22); overflow: hidden; min-height: 320px; }
.gb-steps .s2 { background: #FFD64A; }
.gb-n { display: block; font-family: var(--font-heading); font-weight: 300; font-size: 120px; line-height: .85; color: var(--ube); }
.gb-tag { position: absolute; top: 26px; right: 24px; padding: 6px 11px; border-radius: 8px; background: var(--ube); color: var(--feta); font-weight: 600; font-size: 13px; }
.gb-steps b { display: block; margin-top: 18px; font-family: var(--font-heading); font-weight: 400; font-size: 32px; line-height: 1.08; color: var(--ink); }
.gb-steps p { margin-top: 10px; font-size: 16px; line-height: 24px; color: var(--ink); max-width: 300px; }
.gb-steps .gh-stack { position: absolute; right: -18px; bottom: -26px; width: 170px; transform: rotate(-8deg); }
.gb-go { margin-top: 32px; }

/* ---- How C: three colour blocks, giant numbers ---- */
.x-cb { background: var(--pesto); }
.cb-head { padding: 64px 0 40px; }
.cb-head h2 { font-family: var(--font-heading); font-weight: 400; font-size: var(--h2); line-height: 1.04; color: var(--feta); }
.cb-head p { margin-top: 8px; font-size: 18px; color: var(--cucumber); }
.cb-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cb-blocks li { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 520px; padding: 32px 36px 40px; overflow: hidden; }
.cb-blocks .b0 { background: var(--ube); color: var(--feta); }
.cb-blocks .b1 { background: var(--spicy-mayo); color: var(--ink); }
.cb-blocks .b2 { background: #FFD64A; color: var(--ink); }
.cb-n { font-family: var(--font-heading); font-weight: 300; font-size: clamp(160px, 17vw, 260px); line-height: .8; letter-spacing: -.04em; }
.b0 .cb-n { color: var(--shallot); } .b1 .cb-n { color: var(--feta); } .b2 .cb-n { color: var(--ube); }
.cb-tag { display: inline-block; padding: 6px 11px; border-radius: 8px; font-weight: 600; font-size: 13px; background: rgba(250, 245, 238, .9); color: var(--ink); }
.cb-t b { display: block; margin-top: 14px; font-family: var(--font-heading); font-weight: 400; font-size: 36px; line-height: 1.06; }
.cb-t p { margin-top: 10px; font-size: 17px; line-height: 26px; max-width: 340px; opacity: .92; }
.cb-blocks .gh-stack { position: absolute; right: 24px; top: 40px; width: 170px; transform: rotate(8deg); }
.cb-foot { padding: 32px 0 40px; }
.cb-foot .btn { background: var(--feta); color: var(--ube); }

/* ---- Categories B: horizontal cards ---- */
.x-hc { background: var(--feta); }
.hcard { width: min(860px, 78vw); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); border-radius: var(--r); overflow: hidden; background: #fff; }
.hc-art { position: relative; min-height: 380px; } .hc-art .bowl { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.hc-art .cat-eg { position: absolute; top: 14px; left: 14px; z-index: 3; }
.hc-b { display: flex; flex-direction: column; align-items: flex-start; padding: 28px 30px 30px; }
.hcard.k0 .hc-b { border-top: 8px solid var(--shallot); } .hcard.k1 .hc-b { border-top: 8px solid var(--cucumber); } .hcard.k2 .hc-b { border-top: 8px solid var(--ginger); }
.hc-b h3 { margin-top: 6px; font-family: var(--font-heading); font-weight: 400; font-size: 34px; line-height: 1.06; color: var(--ink); }
.hc-b p { margin-top: 10px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.hc-b ul { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.hc-b li { padding: 6px 11px; border-radius: 8px; background: var(--feta); font-size: 14px; color: var(--ink); }
.hc-b .c-enter { margin-top: auto; padding-top: 0; }
.hc-b ul + .c-enter { margin-top: 22px; }

/* ---- Who C: portrait row -- simple, calm, readable ---- */
.x-pr { background: #fff; }
.prow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.prow img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 25%; border-radius: 12px; display: block; }
.prow b { display: block; margin-top: 16px; padding-top: 12px; border-top: 1px solid #E7E1DC; font-family: var(--font-heading); font-weight: 400; font-size: 22px; line-height: 1.15; color: var(--ink); }
.prow p { margin-top: 6px; font-size: 15px; line-height: 23px; color: var(--ink-2); }
.pr-go { margin-top: 40px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .pr-go span { font-size: 15px; color: var(--ink-2); }

@media (max-width: 1080px) {
  .gb-steps, .cb-blocks { grid-template-columns: 1fr; } .gb-steps li { min-height: 0; } .cb-blocks li { min-height: 360px; }
  .prow { grid-template-columns: repeat(5, 240px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -32px; padding-right: 32px; }
  .prow li { scroll-snap-align: start; }
}
@media (max-width: 720px) {
  .tb-h { font-size: 32px; margin-bottom: 12px; }
  .x-gb { padding: 56px 0; } .gb-head { padding: 18px 20px; } .gb-head h2 { font-size: 34px; } .gb-n { font-size: 84px; } .gb-steps b { font-size: 26px; } .gb-steps .gh-stack { width: 120px; } .gb-go .btn { width: 100%; }
  .cb-head { padding: 44px 0 28px; } .cb-head h2 { font-size: 34px; } .cb-blocks li { min-height: 0; padding: 24px 22px 28px; gap: 14px; } .cb-n { font-size: 120px; }
  .cb-t b { font-size: 28px; } .cb-blocks .gh-stack { width: 110px; right: 16px; top: 24px; } .cb-foot .btn { width: 100%; }
  .hcard { width: 84vw; grid-template-columns: 1fr; } .hc-art { min-height: 220px; } .hc-b { padding: 20px 20px 22px; } .hc-b h3 { font-size: 28px; }
  .prow { grid-template-columns: repeat(5, 72vw); margin-right: -20px; padding-right: 20px; gap: 14px; } .pr-go .btn { width: 100%; }
}
.gb-steps .s2 p { max-width: 58%; }
.gb-steps .gh-stack { width: 140px; right: -24px; bottom: -34px; }
.cb-blocks li { min-height: 440px; }
@media (max-width: 720px) { .gb-steps .s2 p { max-width: 62%; } .cb-blocks li { min-height: 0; } }

/* =====================================================================
   round 5
   ===================================================================== */
/* What A: three uniform cards on the grid, centred, the whole section in one view */
.what-grid { padding: 72px 0; }
.what-grid .sec-head { margin-bottom: 36px; }
.wg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; }
.wg .w-card { width: auto; height: 100%; text-align: center; }
.wg .w-art { aspect-ratio: 16 / 11; }
.wg .w-body { flex: 1; padding: 22px 26px 28px; }
.wg .w-body p { max-width: 320px; margin-left: auto; margin-right: auto; }
@media (min-width: 1081px) { .what-grid { min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; } .what-grid > .wrap { width: 100%; } }

/* What D: colour panels joined by arrows (the v1/v2 step colours) */
.x-wd { background: #fff; }
.wd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; max-width: 1200px; margin: 0 auto; }
.wd li { position: relative; display: flex; flex-direction: column; border-radius: var(--r); background: var(--c); color: var(--t, var(--ink)); }
.wd .k0 { --c: var(--ginger); } .wd .k1 { --c: var(--pesto); --t: var(--feta); } .wd .k2 { --c: var(--shallot); }
.wd-art { position: relative; aspect-ratio: 16 / 11; margin: 12px 12px 0; border-radius: 16px; overflow: hidden; }
.wd-art > img, .wd-art > .bowl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.wd-b { padding: 20px 24px 26px; }
.wd-n { font-family: var(--font-heading); font-weight: 300; font-size: 44px; line-height: 1; color: var(--ube); }
.wd .k1 .wd-n { color: var(--shallot); }
.wd-b h3 { margin-top: 10px; font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1.1; }
.wd-b p { margin-top: 8px; font-size: 16px; line-height: 24px; opacity: .9; }
.wd-arrow { position: absolute; z-index: 2; right: -28px; top: 34%; width: 44px; height: 44px; margin-right: -8px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ube); color: var(--feta); box-shadow: 0 0 0 5px #fff; font-style: normal; }

@media (max-width: 1080px) { .wg, .wd { grid-template-columns: 1fr; max-width: 560px; } .wd-arrow { right: 50%; top: auto; bottom: -30px; margin-right: -22px; transform: rotate(90deg); } }
@media (max-width: 720px) { .what-grid { padding: 56px 0; } .wg { gap: 14px; } .wg .w-art { aspect-ratio: 16 / 9; } }
@media (min-width: 1081px) { .what-grid { padding: 48px 0; } .what-grid .sec-head { margin-bottom: 28px; } }

/* =====================================================================
   round 6
   ===================================================================== */
/* What A: the cards fade up into place, left to right; no image effects */
.wg .w-card[data-in] { opacity: 0; transform: translateY(24px); filter: none;
  transition: opacity .6s ease, transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 140ms); }
.wg .w-card[data-in].in { opacity: 1; transform: none; }

/* What D: an open photo row -- photo, number, title, text; nothing else */
.x-wo { background: var(--feta); }
.wo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.wo-art { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; }
.wo-art > img, .wo-art > .bowl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.wo-n { display: block; margin-top: 20px; font-weight: 600; font-size: 14px; color: var(--ube); }
.wo h3 { margin-top: 4px; font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); }
.wo p { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--ink-2); max-width: 360px; }

/* How B: three steps, three pictures */
.x-h3 { background: #fff; }
.h3s { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.h3s-art { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; display: grid; place-items: center; }
.h3s-art > img, .h3s-art > .bowl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.h3s-art.k2 { background: var(--ginger); }
.h3s-art .gh-stack { width: 56%; transform: rotate(-6deg); }
.h3s-top { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.h3s-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ube); color: var(--feta); font-weight: 700; }
.h3s-tag { font-weight: 600; font-size: 14px; color: var(--ube); }
.h3s b { display: block; margin-top: 12px; font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); }
.h3s p { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--ink-2); max-width: 360px; }

/* How C: one line, three stops */
.x-hl { background: var(--feta); }
.hl3 { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; text-align: center; max-width: 1100px; margin: 0 auto; }
.hl3::before { content: ''; position: absolute; top: 28px; left: 16.66%; right: 16.66%; height: 3px; background: var(--ube); border-radius: 3px; }
.hl3 li { position: relative; display: flex; flex-direction: column; align-items: center; }
.hl3-dot { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--ube); color: var(--feta); font-family: var(--font-heading); font-size: 26px; box-shadow: 0 0 0 8px var(--feta); }
.hl3-tag { margin-top: 18px; font-weight: 600; font-size: 14px; color: var(--ube); }
.hl3 b { margin-top: 6px; font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); }
.hl3 p { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--ink-2); max-width: 300px; }
.hl3-prize { max-width: 1100px; margin: 44px auto 0; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 22px 28px; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px #E7E1DC; }
.hl3-prize .gh-stack { width: 140px; transform: rotate(-6deg); }
.hl3-prize b { font-family: var(--font-heading); font-weight: 400; font-size: 28px; color: var(--ink); }
.hl3-prize p { margin-top: 4px; font-size: 16px; line-height: 24px; color: var(--ink-2); }

/* Who A on v3: a continuous scroll -- pauses on hover or focus */
.loop { overflow: hidden; outline: none; }
.loop-t { display: flex; gap: 20px; width: max-content; animation: run 44s linear infinite; padding: 4px 0 8px; }
.loop:hover .loop-t, .loop:focus .loop-t, .loop:focus-within .loop-t { animation-play-state: paused; }
.loop .p-card { width: 300px; flex: none; }
@media (prefers-reduced-motion: reduce) { .loop-t { animation: none; } .loop { overflow-x: auto; } }

@media (max-width: 1080px) { .wo, .h3s { grid-template-columns: 1fr; max-width: 560px; } }
@media (max-width: 720px) {
  .wo { gap: 28px; } .wo h3, .h3s b { font-size: 26px; }
  .hl3 { grid-template-columns: 1fr; gap: 28px; text-align: left; } .hl3::before { left: 28px; right: auto; top: 28px; bottom: 28px; width: 3px; height: auto; }
  .hl3 li { display: grid; grid-template-columns: 58px 1fr; column-gap: 18px; align-items: start; } .hl3-dot { grid-row: span 3; } .hl3-tag { margin-top: 0; } .hl3 b, .hl3 p { grid-column: 2; } .hl3 b { font-size: 24px; }
  .hl3-prize { grid-template-columns: 1fr; gap: 14px; padding: 20px; } .hl3-prize .btn { width: 100%; }
  .loop .p-card { width: 72vw; }
}

/* ===================== round 7 ===================== */
/* Cats A: one category at a time -- tabs, a single card, arrows */
.co-tabs { display: flex; gap: 8px; margin-top: 32px; }
.co-tabs button { display: inline-flex; align-items: baseline; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--feta); font-weight: 600; font-size: 15px; line-height: 1; color: var(--ink); white-space: nowrap; transition: background .3s, color .3s; }
.co-tabs button span { font-weight: 500; color: var(--ube); transition: color .3s; }
.co-tabs button.on { background: var(--ube); color: var(--feta); }
.co-tabs button.on span { color: var(--shallot); }
.co-stage { display: grid; margin-top: 20px; overflow: hidden; border-radius: var(--r); }
.co-card { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); border-radius: var(--r); overflow: hidden; background: var(--feta);
  opacity: 0; visibility: hidden; transform: translateX(calc(var(--d, 0) * 48px)); transition: opacity .4s ease, transform .6s var(--ease), visibility 0s .6s; }
.co-card.cur { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease .05s, transform .6s var(--ease), visibility 0s; }
.co-art { position: relative; min-height: 460px; }
.co-art .bowl { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.co-art .cat-eg { position: absolute; top: 16px; left: 16px; z-index: 3; margin: 0; }
.co-art .cat-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; z-index: 3; }
.co-b { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 48px; }
.co-b h3 { margin-top: 10px; font-family: var(--font-heading); font-weight: 400; font-size: 44px; line-height: 1.05; color: var(--ink); }
.co-b p { margin-top: 12px; max-width: 40ch; font-size: 18px; line-height: 27px; color: var(--ink-2); }
.co-b .sp-l { margin-top: 24px; }
.co-b ul { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.co-b li { padding: 6px 11px; border-radius: 8px; background: #fff; font-size: 14px; color: var(--ink); }
.co-b .c-enter { margin-top: 28px; }
.co-ctl { justify-content: flex-end; }
@media (max-width: 720px) {
  .co-tabs { margin-top: 24px; overflow-x: auto; scrollbar-width: none; }
  .co-tabs button { padding: 10px 14px; font-size: 14px; }
  .co-tabs::-webkit-scrollbar { display: none; }
  .co-card { grid-template-columns: 1fr; }
  .co-art { min-height: 0; aspect-ratio: 4 / 3; }
  .co-b { padding: 22px 22px 26px; }
  .co-b h3 { font-size: 32px; } .co-b p { font-size: 16px; line-height: 24px; }
  .co-ctl { justify-content: center; }
}

/* the header drops into frame with the hero photo's sweep (app.js runPhotoGrids) */
body.hdr-drop .header { transform: translateY(-100%); }
body.hdr-drop.hdr-in .header { transform: none; transition: transform 1.1s cubic-bezier(.22, 1, .36, 1), box-shadow .3s; }
@media (prefers-reduced-motion: reduce) { body.hdr-drop .header { transform: none; } }
/* the photo runs up behind the header, so the Feta bar drops in over the image.
   The hero is pulled up by the header's height and padded back down, so the
   copy doesn't move; the photo's crop is kept where it was. */
body[data-page='home'] .hero { margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h); }
@media (min-width: 721px) {
  body[data-page='home'] .hero { min-height: calc(max(820px, 100svh - var(--header-h)) + var(--header-h)); }
  body[data-page='home'] .hero > .hero-photo > img { object-position: 50% min(0px, calc(50% + var(--header-h) / 2)) !important; }
}

/* round 8: category headlines in Pesto (every option); Who it's for head centred */
#categories .h2 { color: var(--pesto); }
#who .left-head { text-align: center; }
#who .left-head .h2 { text-wrap: balance; }
#who .left-head .sub { margin-left: auto; margin-right: auto; }

/* ===================== round 9 ===================== */
/* every section headline 14px smaller (62 -> 48; the 48s -> 34); phones 28 */
main section .h2.h2 { font-size: clamp(28px, calc(4.3vw - 14px), 48px) !important; }
main .hk-l .h2.h2, main .x-tb .tb-h.tb-h, main .fk-l .h2.h2, main .fg-in .h2.h2, main .hkt-main .h2.h2 { font-size: clamp(26px, calc(3.4vw - 14px), 34px) !important; }
@media (max-width: 720px) { main section .h2.h2, main .x-tb .tb-h.tb-h, main .hk-l .h2.h2, main .fk-l .h2.h2, main .fg-in .h2.h2, main .hkt-main .h2.h2 { font-size: 28px !important; } }

/* What A: card text left aligned */
.wg .w-card { text-align: left; }
.wg .w-body p { max-width: none; margin-left: 0; margin-right: 0; }

/* the category gradient, vertical, on the photo's right edge (Cats A + B) */
.cat-bar.v { position: absolute; top: 0; bottom: 0; right: 0; left: auto; z-index: 3; width: 10px; height: auto; }
.cat-bar.v.g1 { background: linear-gradient(180deg, var(--ube) 0%, var(--pitaya) 30%, var(--spicy-mayo) 75%, var(--shallot) 93%); }
.cat-bar.v.g2 { background: linear-gradient(180deg, var(--celery) 0%, var(--mint-jelly) 30%, var(--ginger) 75%, var(--cucumber) 93%); }
.cat-bar.v.g3 { background: linear-gradient(180deg, var(--pitaya) 0%, var(--spicy-mayo) 100%); }
.co-stage { margin-top: 0; }
.hcard .hc-b, .hcard.k0 .hc-b, .hcard.k1 .hc-b, .hcard.k2 .hc-b { border-top: 0; }
@media (max-width: 720px) { .cat-bar.v { width: 8px; } }

/* How B: option A's Greek-key card, one step at a time */
.hkc .hk-l { display: flex; flex-direction: column; }
.hkc-dots { display: flex; gap: 8px; margin-top: 28px; }
.hkc-dots button { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--shallot); color: var(--ube); font-weight: 600; font-size: 15px; transition: background .3s, color .3s; }
.hkc-dots button.on { background: var(--ube); color: var(--feta); }
.hkc-txt { display: grid; margin-top: 20px; padding-top: 20px; border-top: 1px solid #E7E1DC; }
.hkc-txt .sl-s { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(calc(var(--d, 0) * 24px)); transition: opacity .35s ease, transform .5s var(--ease), visibility 0s .5s; }
.hkc-txt .sl-s.cur { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .05s, transform .5s var(--ease), visibility 0s; }
.hkc-tag { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ube); }
.hkc-txt b { display: block; margin-top: 8px; font-family: var(--font-heading); font-weight: 400; font-size: 32px; line-height: 1.1; color: var(--ink); }
.hkc-txt p { margin-top: 8px; max-width: 40ch; font-size: 17px; line-height: 26px; color: var(--ink-2); }
.hkc-go { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 28px; }
.hkc-go .sl-ctl { margin-top: 0; }
.hkc-art { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; place-items: center; }
.hkc-art .sl-s { grid-area: 1 / 1; width: 100%; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: scale(.94) translateX(calc(var(--d, 0) * 24px)); transition: opacity .35s ease, transform .6s var(--ease), visibility 0s .6s; }
.hkc-art .sl-s.cur { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .05s, transform .6s var(--ease), visibility 0s; }
.hkc-ph { width: min(380px, 78%); aspect-ratio: 1; object-fit: cover; border-radius: 20px; box-shadow: 0 18px 40px rgba(24, 22, 22, .18); }
.hkc-ea { width: min(380px, 78%); aspect-ratio: 1.586; display: flex; flex-direction: column; justify-content: space-between; padding: 26px 28px; border-radius: 20px; background: var(--feta); box-shadow: 0 18px 40px rgba(24, 22, 22, .18); }
.hkc-ea img { width: 64%; }
.hkc-ea span { align-self: flex-start; padding: 7px 12px; border-radius: 999px; background: var(--ube); color: var(--feta); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 720px) {
  .hkc .hk-r { order: -1; min-height: 200px; }
  .hkc-dots { margin-top: 20px; }
  .hkc-txt b { font-size: 26px; } .hkc-txt p { font-size: 16px; line-height: 24px; }
  .hkc-go { flex-direction: column-reverse; align-items: stretch; }
  .hkc-go .sl-ctl { justify-content: center; }
  .hkc-ph, .hkc-ea { width: min(240px, 70%); }
  .hkc-ea { padding: 18px 20px; }
}

/* How C: option A as a ticket -- steps across, the prize on a torn-off stub */
.hkt { position: relative; max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 300px; border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: 0 30px 60px rgba(120, 70, 0, .18); }
.hkt-main { padding: 48px; border-right: 2px dashed #E7E1DC; }
.hkt-main .sub { margin-top: 12px; font-size: 17px; line-height: 26px; }
.hkt-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 32px; padding-top: 28px; border-top: 1px solid #E7E1DC; }
.hkt-steps .hk-n { display: grid; }
.hkt-tag { display: block; margin-top: 16px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ube); }
.hkt-steps b { display: block; margin-top: 6px; font-weight: 600; font-size: 18px; line-height: 24px; color: var(--ink); }
.hkt-steps p { margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.hkt-go { display: flex; align-items: center; gap: 18px; margin-top: 32px; }
.hkt-go span { font-size: 14px; color: var(--ink-2); }
.hkt-stub { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; }
.hkt-stub .bands { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.hkt-stub .bands i { background: linear-gradient(180deg, var(--celery) 0%, var(--mint-jelly) 30%, var(--ginger) 75%, var(--cucumber) 93%); }
.hkt-stub .bands i:nth-child(even) { background: linear-gradient(0deg, var(--celery) 0%, var(--mint-jelly) 30%, var(--ginger) 75%, var(--cucumber) 93%); }
.hkt-stub .gh-stack { width: 76%; }
/* the punched notches where the stub tears off */
.hkt::before, .hkt::after { content: ''; position: absolute; right: 289px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: #FFD64A; }
.hkt::before { top: -11px; } .hkt::after { bottom: -11px; }
@media (max-width: 960px) { .hkt-steps { grid-template-columns: 1fr; gap: 0; } .hkt-steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 14px 0; border-bottom: 1px solid #E7E1DC; } .hkt-steps .hk-n { grid-row: span 3; } .hkt-tag { margin-top: 0; } }
@media (max-width: 720px) {
  .hkt { grid-template-columns: 1fr; }
  .hkt-main { padding: 26px 22px 28px; border-right: 0; border-bottom: 2px dashed #E7E1DC; }
  .hkt-steps { margin-top: 20px; padding-top: 4px; }
  .hkt-go { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; }
  .hkt-go span { text-align: center; }
  .hkt-stub { min-height: 200px; }
  .hkt-stub .gh-stack { width: 60%; }
  .hkt::before, .hkt::after { right: auto; top: auto; bottom: 189px; }
  .hkt::before { left: -11px; } .hkt::after { right: -11px; }
}
.hkt-main .h2 { color: var(--pesto); }
/* the stub's smaller credit cards: type scales with the card */
.hkt-stub .gh-stack { container-type: inline-size; width: 70%; }
.hkt-stub .gh-card { padding: 7cqw 7.5cqw; border-radius: 6cqw; }
.hkt-stub .gh-icon { width: 15cqw; height: 15cqw; border-radius: 3.5cqw; }
.hkt-stub .gh-kind { margin-top: 3cqw; font-size: 4cqw; }
.hkt-stub .gh-amt { font-size: 25cqw; }

/* ===================== round 10 ===================== */
/* How A: no rule above the first step or below the last; numbers on a soft Ube tint */
.hk-steps { border-top: 0; }
.hk-steps li:last-child { border-bottom: 0; }
.hk-n { background: rgba(184, 3, 184, .12); color: var(--ube); }

/* How B: photos fill the right panel */
.hkc .hk-r { overflow: hidden; }
.hkc-art { position: absolute; inset: 0; grid-template: 1fr / 1fr; }
.hkc-art .sl-s.fill { position: relative; align-self: stretch; justify-self: stretch; height: 100%; }
.hkc-art .sl-s.fill > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hkc-pill { position: absolute; left: 20px; bottom: 20px; padding: 8px 14px; border-radius: 999px; background: var(--feta); color: var(--ube); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hkc-txt { margin-top: 28px; }

/* How C: option A's card under a spread of dishes, the credit stack on the seam */
.hkp { max-width: 1120px; margin: 0 auto; border-radius: var(--r); background: #fff; box-shadow: 0 30px 60px rgba(120, 70, 0, .18); }
.hkp-ph { position: relative; height: clamp(180px, 28svh, 260px); }
.hkp-ph > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; border-radius: var(--r) var(--r) 0 0; }
.hkp-ph .gh-stack { position: absolute; right: 48px; bottom: -64px; z-index: 2; width: 230px; }
.hkp-b { padding: 36px 48px 40px; }
.hkp-head { padding-right: 280px; }
.hkp-head .h2 { color: var(--pesto); }
.hkp-head .sub { margin-top: 10px; font-size: 17px; line-height: 26px; }
.hkp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 28px; }
.hkp-n { display: block; font-family: var(--font-heading); font-weight: 300; font-size: 56px; line-height: 1; color: var(--ube); }
.hkp-steps b { display: block; margin-top: 10px; font-weight: 600; font-size: 18px; line-height: 24px; color: var(--ink); }
.hkp-steps p { margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.hkp-go { display: flex; align-items: center; gap: 18px; margin-top: 30px; }
.hkp-go span { font-size: 14px; color: var(--ink-2); }
@media (max-width: 720px) {
  .hkp-ph { height: 140px; }
  .hkp-ph .gh-stack { right: 16px; bottom: -36px; width: 120px; }
  .hkp-b { padding: 24px 22px 26px; }
  .hkp-head { padding-right: 0; padding-top: 18px; }
  .hkp-steps { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
  .hkp-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .hkp-n { font-size: 40px; }
  .hkp-steps b { margin-top: 2px; }
  .hkp-go { flex-direction: column; align-items: stretch; gap: 10px; }
  .hkp-go span { text-align: center; }
}
.hkp-ph .gh-stack { container-type: inline-size; }
.hkp-ph .gh-card { padding: 7cqw 7.5cqw; border-radius: 6cqw; }
.hkp-ph .gh-icon { width: 15cqw; height: 15cqw; border-radius: 3.5cqw; }
.hkp-ph .gh-kind { margin-top: 3cqw; font-size: 4.5cqw; }
.hkp-ph .gh-amt { font-size: 25cqw; }

/* ===================== round 11 ===================== */
/* How B: each picture wipes in over the last one, in the direction you're moving.
   The new slide's clip opens (from the right going forward, from the left going
   back) while the old one holds underneath, then the old one is put away. */
.hkc-art .sl-s, .hkc-art .sl-s.cur { opacity: 1; visibility: visible; transform: none; }
.hkc-art .sl-s { z-index: 1; clip-path: inset(0 clamp(0%, calc(var(--d, 0) * -100%), 100%) 0 clamp(0%, calc(var(--d, 0) * 100%), 100%));
  transition: clip-path 0s .8s; }
.hkc-art .sl-s.cur { z-index: 2; clip-path: inset(0 0 0 0); transition: clip-path .8s cubic-bezier(.7, 0, .2, 1); }
.hkc-art .sl-s.fill > img { transform: scale(1.08); transition: transform 0s .8s; }
.hkc-art .sl-s.fill.cur > img { transform: none; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.hkc-art .sl-s .gh-stack { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hkc-art .sl-s, .hkc-art .sl-s.cur, .hkc-art .sl-s > img { transition: none !important; } }

/* How C: smaller numbers, roomier steps joined by one rule across and rules down */
.hkp-steps { gap: 0; margin-top: 32px; border-top: 1px solid #E7E1DC; }
.hkp-steps li { padding: 26px 32px 6px; }
.hkp-steps li:first-child { padding-left: 0; }
.hkp-steps li:last-child { padding-right: 0; }
.hkp-steps li + li { border-left: 1px solid #E7E1DC; }
.hkp-n { font-size: 32px; }
.hkp-steps b { margin-top: 14px; font-family: var(--font-heading); font-weight: 400; font-size: 26px; line-height: 1.1; }
.hkp-steps p { margin-top: 8px; font-size: 16px; line-height: 24px; }
.hkp-go { margin-top: 28px; }
@media (max-width: 720px) {
  .hkp-steps { margin-top: 18px; }
  .hkp-steps li, .hkp-steps li:first-child, .hkp-steps li:last-child { padding: 14px 0; }
  .hkp-steps li + li { border-left: 0; border-top: 1px solid #E7E1DC; }
  .hkp-n { font-size: 26px; }
  .hkp-steps b { margin-top: 0; font-size: 21px; }
  .hkp-steps p { margin-top: 4px; font-size: 14px; line-height: 20px; }
}

/* How D: one card -- the taxi checker as its top edge, head + prize + CTA left, the steps right */
.tlu { max-width: 1200px; margin: 0 auto; border-radius: var(--r); overflow: hidden; background: var(--feta); }
.tlu-rail.checker { height: 32px; background-size: 32px 32px; }
.tlu-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding: 52px 56px 56px; }
.tlu-l { display: flex; flex-direction: column; align-items: flex-start; }
.tlu-l .h2 { color: var(--pesto); }
.tlu-l .sub { margin-top: 14px; font-size: 18px; line-height: 27px; }
.tlu-prize { display: flex; align-items: center; gap: 18px; margin-top: auto; padding-top: 36px; }
.tlu-prize .gh-stack { flex: none; width: 112px; container-type: inline-size; }
.tlu-prize .gh-card { padding: 7cqw 7.5cqw; border-radius: 7cqw; }
.tlu-prize .gh-kind, .tlu-prize .gh-amt { display: none; }
.tlu-prize .gh-icon { width: 30cqw; height: 30cqw; border-radius: 7cqw; }
.tlu-prize p { font-size: 15px; line-height: 22px; color: var(--ink-2); }
.tlu-prize b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 24px; line-height: 1.1; color: var(--ink); }
.tlu-go { margin-top: 28px; }
.tlu-steps { display: grid; align-content: center; }
.tlu-steps li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding: 26px 0; border-top: 1px solid rgba(24, 22, 22, .12); }
.tlu-steps li:first-child { border-top: 0; padding-top: 0; }
.tlu-steps li:last-child { padding-bottom: 0; }
.tlu-n { font-family: var(--font-heading); font-weight: 300; font-size: 44px; line-height: 1; color: var(--ube); }
.tlu-steps .tl-pill { box-shadow: none; font-size: 13px; padding: 6px 12px; }
.tlu-steps b { display: block; margin-top: 12px; font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--ink); }
.tlu-steps p { margin-top: 6px; max-width: 46ch; font-size: 16px; line-height: 24px; color: var(--ink-2); }
@media (max-width: 960px) { .tlu-in { grid-template-columns: 1fr; gap: 36px; } .tlu-prize { margin-top: 28px; padding-top: 0; } .tlu-l { display: block; } }
@media (max-width: 720px) {
  .tlu-rail.checker { height: 24px; background-size: 24px 24px; }
  .tlu-in { gap: 28px; padding: 26px 22px 28px; }
  .tlu-l .sub { font-size: 16px; line-height: 24px; }
  .tlu-prize { margin-top: 20px; }
  .tlu-prize .gh-stack { width: 84px; }
  .tlu-go .btn { width: 100%; }
  .tlu-steps li { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 18px 0; }
  .tlu-n { font-size: 32px; }
  .tlu-steps b { margin-top: 8px; font-size: 22px; }
  .tlu-steps p { font-size: 15px; line-height: 22px; }
}
/* How D areas: head + foot left, steps right; on phones head, steps, then prize + CTA */
.tlu-in { grid-template-areas: 'head steps' 'foot steps'; grid-template-rows: auto 1fr; row-gap: 0; }
.tlu-l { grid-area: head; } .tlu-steps { grid-area: steps; } .tlu-foot { grid-area: foot; align-self: end; }
.tlu-prize { margin-top: 0; padding-top: 36px; }
@media (max-width: 960px) { .tlu-in { grid-template-areas: 'head' 'steps' 'foot'; grid-template-rows: none; row-gap: 28px; } .tlu-prize { padding-top: 0; } }
.tlu-prize .gh-stack { margin-left: 14px; }

/* ===================== round 12 ===================== */
/* How A: a Figma photo (22:83, blue spread) behind the credit stack instead of the bands */
.hk-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* How D: the cup (Greek-key) pattern as the top edge; head + CTA, the credit lockup, Volte steps */
.tlu-rail { height: 40px; background-color: #FFD64A;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 37h40M4 37V5h32v24H14V15h12' fill='none' stroke='%23FAAB20' stroke-width='3.4'/%3E%3C/svg%3E");
  background-size: 40px 40px; }
.tlu-in { grid-template-areas: 'head steps' 'lock steps'; grid-template-rows: auto 1fr; row-gap: 0; }
.tlu-l { grid-area: head; } .tlu-lock { grid-area: lock; } .tlu-steps { grid-area: steps; }
.tlu-go { margin-top: 28px; }
.tlu-lock { align-self: center; display: flex; flex-direction: column; align-items: center; padding-top: 44px; text-align: center; }
.tlu-lock .gh-stack { width: 280px; container-type: inline-size; }
.tlu-lock .gh-card { padding: 7cqw 7.5cqw; border-radius: 6cqw; }
.tlu-lock .gh-icon { width: 17cqw; height: 17cqw; border-radius: 4cqw; }
.tlu-lock .gh-kind { margin-top: 3cqw; font-size: 4.6cqw; }
.tlu-lock .gh-amt { display: none; }
.tlu-lock p { margin-top: 34px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.tlu-lock b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); }
.tlu-steps li { display: block; }
.tlu-eb { display: block; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ube); }
.tlu-steps b { margin-top: 10px; font-family: var(--font-body); font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--ink); }
.tlu-steps p { margin-top: 6px; }
@media (max-width: 960px) {
  .tlu-in { grid-template-areas: 'head' 'lock' 'steps'; grid-template-rows: none; row-gap: 32px; }
  .tlu-lock { padding-top: 0; }
}
@media (max-width: 720px) {
  .tlu-rail { height: 28px; background-size: 28px 28px; }
  .tlu-lock .gh-stack { width: 200px; }
  .tlu-lock p { margin-top: 24px; }
  .tlu-lock b { font-size: 24px; }
  .tlu-steps b { margin-top: 6px; font-size: 20px; }
}
/* the fanned cards rise ~70px above the stack's box: give them that room */
.tlu-lock .gh-stack { margin-top: 64px; }
@media (max-width: 960px) { .tlu-lock .gh-stack { margin-top: 56px; } }
.tlu-lock .gh-stack { translate: 18px 0; } /* the fan leans left; centre it optically over the caption */

/* round 13 -- How D: steps + CTA in the right column, top-aligned with the headline;
   the cards show the big $250 in their centre (no CREDIT label) */
.tlu-in { grid-template-areas: 'head right' 'lock right'; }
.tlu-r { grid-area: right; align-self: start; }
.tlu-steps { align-content: start; }
.tlu-r .tlu-go { margin-top: 32px; }
.tlu-lock .gh-kind { display: none; }
.tlu-lock .gh-amt { display: grid; place-items: center; position: absolute; inset: 0; margin: 0; font-size: 26cqw; }
@media (max-width: 960px) { .tlu-in { grid-template-areas: 'head' 'lock' 'right'; } .tlu-r .tlu-go { margin-top: 24px; } }
@media (max-width: 720px) { .tlu-r .tlu-go .btn { width: 100%; } }
.tlu-lock .gh-amt { font-size: calc(26cqw - 12px); color: #FFFFFF; }

/* ===================== round 15 ===================== */
/* Cats A (live): photo and copy split 50/50, centred head, no numbers */
.co-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.co-b h3 { margin-top: 0; }
.cats-one .left-head { text-align: center; }
.cats-one .left-head .sub { margin-left: auto; margin-right: auto; }
.co-ctl { justify-content: center; }

/* Who D (live): every polaroid a bold, bright colour with 12px corners; the one you
   land on turns green checker, its caption on a Feta label so it stays readable */
.pl-c { border-radius: 12px; }
.pl-c img { border-radius: 6px; }
.pl-c.k0 { --bg: var(--spicy-mayo); }
.pl-c.k1 { --bg: var(--ube); }
.pl-c.k2 { --bg: #FFD64A; }
.pl-c.k3 { --bg: var(--pitaya); }
.pl-c.k4 { --bg: var(--celery); }
.pl-c.k1 b, .pl-c.k3 b { color: var(--feta); }
.pl-c.k1 span, .pl-c.k3 span { color: rgba(250, 245, 238, .86); }
.pl-c.cur { background: conic-gradient(#00D882 0 90deg, #CCF4CD 90deg 180deg, #00D882 180deg 270deg, #CCF4CD 270deg 360deg) 0 0 / 28px 28px; }
.pl-c figcaption { border-radius: 8px; transition: background-color .3s; }
.pl-c.cur figcaption { margin: 6px -6px -12px; padding: 6px 10px 12px; background: var(--feta); }
.pl-c.cur b { color: var(--ink); }
.pl-c.cur span { color: var(--ink-2); }
/* the arrows sit 60px closer to the cards */
.x-pl .sl-ctl { margin-top: -38px; position: relative; z-index: 6; }

/* type hierarchy: card titles always sit a clear step below the section headline
   (desktop h2 48 -> card titles <= 34; phones h1 40 / h2 28 / card titles 20-22 / body 15-16) */
.co-b h3 { font-size: 34px; }
main .h1, main .h2 { text-wrap: balance; }
@media (max-width: 720px) {
  .w-body h3, .wg .w-body h3 { font-size: 22px; line-height: 1.15; }
  .co-b h3 { font-size: 22px; line-height: 1.15; }
  .pl-c b { font-size: 20px; line-height: 1.15; }
  .faq-qs .q-h { font-size: 18px; line-height: 24px; padding: 16px 0; }
  .faq-qs .q-a .in { font-size: 16px; line-height: 24px; padding-right: 0; }
  .rp-body .rp-title { font-size: 28px; }
}

/* rules page: the Legal draft, set for reading */
.rp-body { max-width: 760px; }
.rp-body .rp-title { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1.08; color: var(--pesto); margin-bottom: 16px; }
.rp-caps { font-size: 13px !important; line-height: 20px !important; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink) !important; }
.rp-body > .rp-caps { margin-bottom: 36px; }
.rp-body h3 { display: flex; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--ink); margin-bottom: 12px; }
.rp-body h3 span { color: var(--ube); font-variant-numeric: tabular-nums; }
.rp-body article { padding-bottom: 28px; margin-bottom: 28px; }
.rp-body article:last-child { border-bottom: 0; }
.rp-body a:not(.btn) { color: var(--ube); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.rp-body p, .rp-body li { overflow-wrap: break-word; }
.rp-ol, .rp-ul { margin: 12px 0; display: grid; gap: 8px; }
.rp-ol { counter-reset: rp; }
.rp-ol > li { position: relative; padding-left: 28px; font-size: 16px; line-height: 26px; color: var(--ink-2); counter-increment: rp; }
.rp-ol > li::before { content: counter(rp) '.'; position: absolute; left: 0; font-weight: 600; color: var(--ink); }
.rp-ul > li { position: relative; padding-left: 18px; font-size: 16px; line-height: 26px; color: var(--ink-2); }
.rp-ul > li::before { content: ''; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--ube); }
.rp-ol .rp-ul { margin: 8px 0 0; gap: 4px; }
.rp-score { margin: 14px 0 16px; border: 1px solid #E7E1DC; border-radius: 12px; overflow: hidden; }
.rp-score div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 16px; font-size: 15px; line-height: 22px; }
.rp-score div + div { border-top: 1px solid #E7E1DC; }
.rp-score dt { color: var(--ink); font-weight: 500; }
.rp-score dd { color: var(--ube); font-weight: 600; white-space: nowrap; }
.rp-jump { width: 100%; }
.rp-jump summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
.rp-jump summary::-webkit-details-marker { display: none; }
.rp-jump ol { display: grid; gap: 2px; counter-reset: toc; }
.rp-jump li { counter-increment: toc; }
.rp-jump li a { display: flex; gap: 10px; padding: 5px 0; font-size: 15px; font-weight: 500; color: var(--ink); }
.rp-jump li a::before { content: counter(toc); min-width: 20px; color: var(--ube); font-variant-numeric: tabular-nums; }
.rp-jump li a:hover { color: var(--ube); }
.rp-more { margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.rp-more a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 961px) { .rp-jump summary { pointer-events: none; } }
@media (max-width: 960px) {
  .rp-toc { gap: 0; }
  .rp-jump { padding: 14px 16px; border-radius: 12px; background: var(--feta); }
  .rp-jump summary { margin: 0; display: flex; justify-content: space-between; align-items: center; }
  .rp-jump summary::after { content: '+'; font-size: 20px; line-height: 1; color: var(--ube); }
  .rp-jump[open] summary { margin-bottom: 10px; }
  .rp-jump[open] summary::after { content: '−'; }
  .rp-toc > .btn { width: 100%; margin-top: 16px; }
}
@media (max-width: 720px) {
  .rp-body h3 { font-size: 18px; }
  .rp-body p, .rp-ol > li, .rp-ul > li { font-size: 15px; line-height: 24px; }
  .rp-score div { padding: 10px 14px; font-size: 14px; }
}
@media (max-width: 720px) { .rp-body .rp-title { font-size: 28px; } }
@media (max-width: 720px) { .co-card { grid-template-columns: 1fr; } }
/* Who D's headline in Pesto, like every other section headline */
.x-pl .pl-copy .h2 { color: var(--pesto); }

/* terms + privacy pages (same layout as the rules) */
.rp-date { margin: -6px 0 22px; font-size: 14px !important; color: var(--ink-2); }
.rp-body > .rp-caps { margin-top: 18px; }
.rp-body > .rp-intro-last { margin-bottom: 36px; }
.rp-caps-in { text-transform: uppercase; font-size: 14px; letter-spacing: .02em; color: var(--ink); }
.rp-body h4 { margin: 18px 0 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.rp-body h3 + h4 { margin-top: 4px; }
.rp-ul > li > p { margin-top: 10px; }
.rp-ul .rp-ul { margin: 10px 0 0; gap: 6px; }
.rp-ul .rp-ul > li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ube); }
.rp-soon { padding: 28px; border-radius: 16px; background: var(--feta); }
.rp-soon b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 28px; color: var(--ink); }
.rp-soon p { margin-top: 8px; }
.rp-toc > .rp-more { margin: 0 0 4px; }
@media (max-width: 720px) { .rp-caps-in { font-size: 13px; } .rp-soon { padding: 22px; } .rp-soon b { font-size: 24px; } }

/* ===================== round 17 ===================== */
/* Stickers sit on the lids: a bowl must stay 5:4 (the photo's own shape) or the
   lid box -- placed in % of the bowl -- drifts off the lid when the photo crops.
   So the bowl keeps 5:4 and is scaled to cover its frame instead (cq units). */
.co-art, .hc-art, .c-art { container-type: size; overflow: hidden; }
.co-art > .bowl, .hc-art > .bowl, .c-art > .bowl { position: absolute; inset: auto; left: 50%; top: 50%;
  width: max(100cqw, 125cqh); height: max(100cqh, 80cqw); aspect-ratio: auto; transform: translate(-50%, -50%); }

/* Who D: only The dreamer wears the checker (Mint Jelly + Pesto); its caption keeps a Feta
   label for legibility. The card you land on no longer changes colour. The host moves off
   Ube-with-white-text to a bright sky blue with dark text. */
.pl-c.cur { background: var(--bg, #fff); }
.pl-c.cur figcaption { margin: 0; padding: 12px 4px 0; background: none; }
.pl-c.cur b { color: var(--ink); } .pl-c.cur span { color: var(--ink-2); }
.pl-c.k1 { --bg: #75C4FC; }
.pl-c.k1 b, .pl-c.k1.cur b { color: var(--ink); }
.pl-c.k1 span, .pl-c.k1.cur span { color: rgba(24, 22, 22, .78); }
.pl-c.k3.cur b { color: var(--feta); } .pl-c.k3.cur span { color: rgba(250, 245, 238, .86); }
.pl-c.k0, .pl-c.k0.cur { background: conic-gradient(#00D882 0 90deg, var(--pesto) 90deg 180deg, #00D882 180deg 270deg, var(--pesto) 270deg 360deg) 0 0 / 28px 28px; }
.pl-c.k0 figcaption, .pl-c.k0.cur figcaption { margin: 6px -6px -12px; padding: 6px 10px 12px; background: var(--feta); }
.pl-c.k0 b, .pl-c.k0.cur b { color: var(--ink); } .pl-c.k0 span, .pl-c.k0.cur span { color: var(--ink-2); }

/* ===================== round 18 ===================== */
/* Who D: The host on Mint Jelly (dark text); The family recipe keeper on Spicy Mayo, the peach, with white text */
.pl-c.k1 { --bg: var(--mint-jelly); }
.pl-c.k3 { --bg: var(--spicy-mayo); }
.pl-c.k3 b, .pl-c.k3.cur b { color: #FFFFFF; }
.pl-c.k3 span, .pl-c.k3.cur span { color: #FFFFFF; }

/* ===== motion, unified (round 18) =====
   One language for the whole page, all on scroll:
   - section headlines: words rise out of a line mask (wb-text)
   - section subs: each line rises (hl-text)
   - cards and components: one soft fade-up, staggered by --d (left to right / top to bottom)
   - photos settle from a 4% zoom as their card arrives
   No blur: it was the costly part, and the page felt slow with it. */
[data-in] { opacity: 0; transform: translateY(24px); filter: none;
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--d, 0) * 100ms); }
[data-in].in { opacity: 1; transform: none; }
.wg .w-card[data-in] { transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 100ms); }
.hl-in { transition: transform .8s cubic-bezier(.2, .7, .2, 1) calc(.2s + var(--li, 0) * .08s), opacity .7s ease calc(.2s + var(--li, 0) * .08s); }
/* photos settle */
.wg .w-card .w-art :is(img, .bowl), .co .co-art > .bowl, .hk-photo > img { scale: 1.04; transition: scale 1.4s cubic-bezier(.2, .7, .2, 1) .1s; }
.wg .w-card.in .w-art :is(img, .bowl), .co.in .co-art > .bowl, .hk-card.in .hk-photo > img { scale: 1; }
.pl[data-in] .pl-stage { transition: none; }
@media (prefers-reduced-motion: reduce) {
  [data-in], .wg .w-card[data-in] { opacity: 1; transform: none; transition: none; }
  .wg .w-card .w-art :is(img, .bowl), .co .co-art > .bowl, .hk-photo > img { scale: 1; transition: none; }
}
.rv-pop { position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; }
/* round 19 -- Who D: The host on mint #CCF4CD; The busy parent on peach #FF7B61; the dreamer's checker #0A8F45 + Pesto */
.pl-c.k1 { --bg: #CCF4CD; }
.pl-c.k3 { --bg: #FF7B61; }
.pl-c.k0, .pl-c.k0.cur { background: conic-gradient(#0A8F45 0 90deg, var(--pesto) 90deg 180deg, #0A8F45 180deg 270deg, var(--pesto) 270deg 360deg) 0 0 / 28px 28px; }

/* ===================== round 20 =====================
   Who D polaroids on a checker grid: --sq is one checker square. Every card is
   22 x 31 squares: a 1-square frame, a 20x20 photo, a 1-square gap, an 8-square
   caption block, a 1-square foot -- so on The dreamer the frame is exactly one
   square of the pattern around the photo and around the caption, edge to edge. */
.x-pl { --sq: 15px; }
.pl-c { box-sizing: border-box; width: calc(var(--sq) * 22); padding: var(--sq); }
.pl-c img { width: 100%; aspect-ratio: 1; border-radius: 4px; }
.pl-c figcaption, .pl-c.cur figcaption, .pl-c.k0 figcaption, .pl-c.k0.cur figcaption {
  box-sizing: border-box; height: calc(var(--sq) * 8); margin: var(--sq) 0 0; padding: 10px 12px; border-radius: 4px; overflow: hidden; }
.pl-c.k0, .pl-c.k0.cur { background-size: calc(var(--sq) * 2) calc(var(--sq) * 2); background-position: 0 0; }
@media (max-width: 720px) {
  .x-pl { --sq: 14px; }
  .pl-c { width: calc(var(--sq) * 20); }
  .pl-c figcaption, .pl-c.cur figcaption, .pl-c.k0 figcaption, .pl-c.k0.cur figcaption { height: calc(var(--sq) * 9); padding: 8px 10px; }
}
.x-pl .sl-ctl { margin-top: -12px; } /* cards grew 26px on the grid; keeps the approved card-to-arrows gap */
/* round 21: the bars rise out of the Feta footer's top edge into the white above, never over Feta */
.z-foot-steps { background: #fff; }
/* round 22: a 44px tap target round the header logo */
.header .logo { display: inline-flex; align-items: center; min-height: 44px; }
/* carousel dots: same look, a 32px tap target (the dot is painted inside the padding) */
.car-dots { gap: 0; }
.car-dots button { box-sizing: content-box; height: 8px; padding: 12px 4px; background-clip: content-box; }
/* the library bar's label wraps on narrow phones instead of running off */
.lib-meta b { overflow-wrap: anywhere; }

/* ===================== round 23: the Typeform entry =====================
   Step 2 of the popup is the embedded Typeform. Our header, stepper and close stay;
   the form fills the rest of the panel. */
#wizard .tf-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 20px; }
#wizard.tf-on .wz-main { overflow: hidden; padding-bottom: 0; }
.tf-who { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: var(--feta); font-size: 14px; color: var(--ink-2); }
.tf-who b { color: var(--ink); font-weight: 600; }
.tf-who-email { color: var(--ink-2); }
.tf-notme { font-size: 14px; font-weight: 600; color: var(--ube); text-decoration: underline; text-underline-offset: 3px; }
.tf-wrap { position: relative; flex: 1; min-height: 0; margin-top: 12px; border-radius: 16px; overflow: hidden; background: #FAF5EE; }
.tf-wrap > div, .tf-wrap iframe { width: 100% !important; height: 100% !important; border: 0; }
.tf-msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; font-size: 15px; color: var(--ink-2); }
@media (max-width: 720px) {
  #wizard .tf-pane { margin-top: 14px; }
  .tf-who { padding: 8px 12px; font-size: 13px; }
  .tf-who-email { display: block; }
  .tf-wrap { margin: 10px -20px 0; border-radius: 0; }
}
#wizard.tf-on .e-form { display: none; }
/* no step indicator in the popup any more: sign up, then the entry */
#wizard .step-pane[data-step='1'] .fs-head { margin-top: 28px; }
#wizard .tf-pane { margin-top: 24px; }
@media (max-width: 720px) { #wizard .step-pane[data-step='1'] .fs-head { margin-top: 16px; } #wizard .tf-pane { margin-top: 16px; } }
/* the Typeform sits inside the popup with the same breathing room as everything else,
   instead of running into the popup's bottom edge */
#wizard.tf-on .wz-main { padding-bottom: 32px; }
@media (max-width: 720px) {
  #wizard.tf-on .wz-main { padding-bottom: 20px; }
  .tf-wrap { margin: 10px 0 0; border-radius: 16px; }
}

/* ===================== round 24 ===================== */
/* footer: an Enter button in the right column, the © under it */
.z-fend { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.z-fend .z-fbase { padding-top: 0; }
@media (max-width: 720px) {
  .z-fend { grid-column: 1 / -1; align-items: stretch; gap: 24px; }
  .z-fend .btn { width: 100%; }
  .z-fend .z-fbase { text-align: left; }
}
/* What A: Volte Medium 24 numbers, 28 titles. Cats A: 28 titles */
.wg .w-n { font-family: var(--font-body); font-weight: 500; font-size: 24px; line-height: 1; color: var(--ube); }
.wg .w-body h3 { font-size: 28px; line-height: 1.1; }
.co-b h3 { font-size: 28px; line-height: 1.1; }
@media (max-width: 720px) {
  .wg .w-n { font-size: 20px; }
  .wg .w-body h3, .co-b h3 { font-size: 22px; }
}

/* round 26-27: hero photo = Figma 158:2429 (bowls round an open Mint Jelly centre, 1376x768).
   The table green backs the photo while it loads; the centre stays open behind the copy. */
.hero { background: #03C07F; }
body[data-page='home'] .hero > .hero-photo > img { object-position: 50% 50% !important; }

/* round 28: hero options A-E -- the table colour backs each photo while it loads */
.hero.hero-mint { background: #03C07F; }
.hero.hero-lime { background: #9ECC46; }
.hero.hero-magenta { background: #B416A9; }
.hero.hero-forest { background: #07452C; }
.hero.hero-coral { background: #E97A5E; }
.hero-magenta .h1, .hero-forest .h1, .hero-magenta .hero-in > .sub, .hero-forest .hero-in > .sub { color: var(--feta); }
.hero-magenta .hero-ctas .btn { background: #fff; color: var(--ube); }
.hero-magenta .hero-ctas .btn:hover { background: var(--feta); }

/* ===================== round 28: the entry as its own page =====================
   Clicking Enter slides a full page up from the bottom; it locks under the header
   (which stays on top), with the X top right. Headline and sub centred, the sign-up
   step and then the Typeform centred in one column under them. */
html #wizard.modal { inset: var(--header-h) 0 0 0; z-index: 39; display: block; padding: 0 !important; }
html #wizard .modal-scrim { display: none; }
html #wizard .modal-panel { width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none; background: var(--feta);
  opacity: 1; filter: none; transform: translateY(100%); transition: transform .65s cubic-bezier(.2, .8, .2, 1); }
html #wizard.on .modal-panel { transform: none; }
html #wizard .wz-top { position: relative; display: block; padding: 48px 72px 0; text-align: center; }
html #wizard .wz-head { max-width: 720px; margin: 0 auto; }
html #wizard .wz-title { font-size: 48px; line-height: 1.06; color: var(--pesto); text-wrap: balance; }
html #wizard .wz-sub { margin: 14px auto 0; max-width: 560px; font-size: 18px; line-height: 27px; color: var(--ink-2); text-wrap: balance; }
html #wizard .modal-x { position: absolute; top: 24px; right: 24px; background: #fff; }
html #wizard .wz-rule { display: none; }
html #wizard .wz-main { width: 100%; max-width: 800px; margin: 0 auto; padding: 0 24px 40px; }
html #wizard .e-form { width: 100%; max-width: 560px; margin: 32px auto 0; padding: 32px; border-radius: 20px; background: #fff; }
html #wizard .step-pane[data-step='1'] .fs-head { margin-top: 0; }
html #wizard.tf-on .e-form { display: none; }
html #wizard .tf-pane { margin-top: 28px; }
html #wizard .tf-wrap { background: #FAF5EE; box-shadow: inset 0 0 0 1px #E7E1DC; }
html #wizard .tf-who { background: #fff; }
html #wizard.tf-on .wz-main { padding-bottom: 32px; }
html #wizard .wz-main > .confirm { background: transparent; }
@media (prefers-reduced-motion: reduce) { html #wizard .modal-panel { transition: none; } }
@media (max-width: 720px) {
  html #wizard .wz-top { padding: 28px 56px 0; text-align: center; }
  html #wizard .wz-title { font-size: 30px; }
  html #wizard .wz-sub { margin: 10px auto 0; font-size: 15px; line-height: 22px; }
  html #wizard .modal-x { top: 20px; right: 16px; }
  html #wizard .wz-main { padding: 0 16px 20px; }
  html #wizard .e-form { margin-top: 20px; padding: 20px; }
  html #wizard .tf-pane { margin-top: 18px; }
  html #wizard.tf-on .wz-main { padding-bottom: 16px; }
}
html #wizard .wz-title { max-width: none; width: 100%; margin: 0 auto; }
html #wizard .e-form { flex: none; display: block; }
html #wizard .e-form .step-pane { height: auto; min-height: 0; }
html #wizard .e-form .step-nav { margin-top: 28px; }
html #wizard .wz-head { padding: 0; }
/* round 29: the entry page is white, with the default stroke along its top edge.
   The sign-up card keeps its shape with the same stroke; the "Entering as" bar goes Feta. */
html #wizard .modal-panel { background: #FFFFFF; border-top: 1px solid var(--line); }
html #wizard .e-form { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
html #wizard .tf-who { background: var(--feta); }

/* round 30: How E -- option A's cup (Greek-key) pattern, Sunken ground with Feta lines */
.how-k.how-sunken { background-color: #F7F6F3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 37h40M4 37V5h32v24H14V15h12' fill='none' stroke='%23FAF5EE' stroke-width='3.4'/%3E%3C/svg%3E"); }
/* round 31: How E lines in the default border colour (#E7E1DC) on Sunken */
.how-k.how-sunken {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 37h40M4 37V5h32v24H14V15h12' fill='none' stroke='%23E7E1DC' stroke-width='3.4'/%3E%3C/svg%3E"); }

/* round 32 -- Hero F: the checker band swapped for the Greek key (the How pattern) in the
   classic NYC coffee cup's blue with white lines; same height, two rows of the key */
.key-band { height: 120px; background-color: #0B5CAB;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 37h40M4 37V5h32v24H14V15h12' fill='none' stroke='%23FFFFFF' stroke-width='3.4'/%3E%3C/svg%3E");
  background-size: 60px 60px; }
@media (max-width: 720px) { .key-band { height: 80px; background-size: 40px 40px; } }
/* (on .key-band on purpose: the older rules' thin edge lines frame it -- the user prefers it with them) */
/* How E -- the banner's yellow taxi checker fills the section behind the card (60px squares) */
.how-k.how-sunken { background: conic-gradient(#FAAB20 0 90deg, #FFD64A 90deg 180deg, #FAAB20 180deg 270deg, #FFD64A 270deg 360deg) 0 0 / 120px 120px; }
@media (max-width: 720px) { .how-k.how-sunken { background-size: 80px 80px; } }
@media (max-width: 720px) { .lib-bar .lib-meta { flex: 1 1 100%; order: 3; } .lib-bar .lib-meta b { overflow-wrap: normal; } }

/* round 33: How E checker sized by checkerFit() (fx.js): --sq is one square */
#how.how-k.how-sunken { min-height: 0; padding: 0 24px; box-sizing: border-box; display: flex; align-items: center;
  background: conic-gradient(#FAAB20 0 90deg, #FFD64A 90deg 180deg, #FAAB20 180deg 270deg, #FFD64A 270deg 360deg) 0 0 / calc(var(--sq, 90px) * 2) calc(var(--sq, 90px) * 2); }
#how.how-k.how-sunken > .wrap { width: 100%; padding: 0; }
@media (max-width: 720px) { #how.how-k.how-sunken { padding: 0 16px; } }

/* FAQ expanders: no circle until open; open = the magenta promo gradient (Shallot -> Spicy Mayo alpha) */
.faq-qs .pm { background: transparent; box-shadow: none; }
.faq-qs .pm::before, .faq-qs .pm::after { background: var(--ink); }
.faq-qs .q.open .pm { background: linear-gradient(90deg, rgba(250, 192, 255, .65), rgba(255, 123, 97, .22)); box-shadow: inset 0 0 0 1px rgba(184, 3, 184, .25); }
.faq-qs .q.open .pm::before, .faq-qs .q.open .pm::after { background: var(--ink); }

/* round 34: FAQ open state back to solid Ube, no stroke, Feta icon; closed stays a plain + */
.faq-qs .q.open .pm { background: var(--ube); box-shadow: none; }
.faq-qs .q.open .pm::before, .faq-qs .q.open .pm::after { background: var(--feta); }

/* round 35 -- Hero G: v6's threshold band under the hero: 16 equal Gradient 1 bars,
   each turned 180deg from its neighbour; same height as the checker band */
.g-band6 { display: grid; grid-template-columns: repeat(16, 1fr); height: 120px; }
.g-band6 i { background: var(--grad-1); }
.g-band6 i:nth-child(even) { background: var(--grad-1-flip); }
@media (max-width: 720px) { .g-band6 { grid-template-columns: repeat(8, 1fr); height: 80px; } .g-band6 i:nth-child(n+9) { display: none; } }
/* What A, "You get paid": the Create Sales card floats over the top of the couch photo, bowls left clear */
.w-art { position: relative; }
.w-art .w-ui { position: absolute; left: 50%; top: 9%; z-index: 2; width: min(62%, 240px); transform: translateX(-50%) rotate(-2deg);
  padding: 12px 14px 10px; border-radius: 12px; background: #fff; box-shadow: 0 16px 34px rgba(24, 22, 22, .28); text-align: left; }
.wu-hd { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 600; color: var(--ink); }
.wu-hd em { font-style: normal; font-weight: 500; font-size: 11px; color: var(--ink-2); }
.wu-v { display: block; margin-top: 6px; font-family: var(--font-body); font-weight: 500; font-size: 24px; line-height: 1; color: var(--ink); letter-spacing: -.01em; }
.wu-l { display: block; margin-top: 4px; font-size: 11px; color: var(--ink-2); }
.w-ui svg { display: block; width: 100%; height: 38px; margin-top: 8px; }
@media (max-width: 720px) { .w-art .w-ui { width: min(60%, 220px); } }
.w-art .w-ui { top: 6%; width: min(54%, 210px); padding: 10px 12px 8px; }
.wu-v { font-size: 21px; margin-top: 4px; } .w-ui svg { height: 30px; margin-top: 6px; }

/* round 37 -- a category's own photo fills the bowl frame (5:4 like the bowls) */
.bowl.cat-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the Sales card on "You get paid": centred in the photo, level */
.w-art .w-ui { top: 50%; transform: translate(-50%, -50%); }

/* round 38 -- The dreamer: solid Pesto, no checker; caption straight on the card in Shallot */
.pl-c.k0, .pl-c.k0.cur { background: var(--pesto); }
.pl-c.k0 figcaption, .pl-c.k0.cur figcaption { background: transparent; }
.pl-c.k0 b, .pl-c.k0.cur b, .pl-c.k0 span, .pl-c.k0.cur span { color: var(--shallot); }

/* round 42 -- category cards: the cup Greek key, turned vertical, replaces the gradient strip.
   One 40px tile per row, so the pattern fits the 40px strip exactly. */
.cat-bar.v, .cat-bar.v.g1, .cat-bar.v.g2, .cat-bar.v.g3 { width: 40px;
  background: #FFD64A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath transform='rotate(90 20 20)' d='M0 37h40M4 37V5h32v24H14V15h12' fill='none' stroke='%23FAAB20' stroke-width='3.4'/%3E%3C/svg%3E") 0 0 / 40px 40px repeat-y; }
@media (max-width: 720px) { .cat-bar.v, .cat-bar.v.g1, .cat-bar.v.g2, .cat-bar.v.g3 { width: 40px; } }
.hero.hero-mint-wrap { background: #03C07F; }

/* round 44 -- category strip: the Greek key in the coffee-cup blue with white lines (Hero F's band colours) */
.cat-bar.v, .cat-bar.v.g1, .cat-bar.v.g2, .cat-bar.v.g3 {
  background: #0B5CAB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath transform='rotate(90 20 20)' d='M0 37h40M4 37V5h32v24H14V15h12' fill='none' stroke='%23FFFFFF' stroke-width='3.4'/%3E%3C/svg%3E") 0 0 / 40px 40px repeat-y; }

/* the entry page now covers the whole screen, header included, so there's only one CTA in view */
html #wizard.modal { inset: 0; z-index: 90; }
html #wizard .modal-panel { border-top: 0; }

/* round 45 -- the vertical key, drawn for the strip: the rail and the key's outer edge both
   sit exactly on the drawing's edges (viewBox trimmed to the strokes), so with 5px of blue
   all round the left and right gaps match. --kp (fx.js keyStripFit) = one whole key. */
.cat-bar.v, .cat-bar.v.g1, .cat-bar.v.g2, .cat-bar.v.g3 { width: 40px; background: #0B5CAB; }
.cat-bar.v::after { content: ''; position: absolute; inset: 5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.3 0 35.4 40' preserveAspectRatio='none'%3E%3Cpath d='M3 0V40M3 4H35V36H11V14H25V26' fill='none' stroke='%23FFFFFF' stroke-width='3.4'/%3E%3C/svg%3E") 0 0 / 30px var(--kp, 34px) repeat-y; }
/* phones: the strip runs up to the card's corner; a 16px corner clears the first key (24px clipped it) */
@media (max-width: 720px) { .cats-one .co-stage, .cats-one .co-card { border-radius: 16px; } }
/* round 46 -- the strip's key is one drawing per strip (fx.js keyStripFit), stretched to the inset box */
.cat-bar.v::after { background: var(--kimg) 0 0 / 100% 100% no-repeat; }

/* round 47 -- How E: the checker always frames the card. Older #how rules forced padding and
   display:block with !important, so these must too. Phones: 20px sides, like the category cards. */
#how.how-k.how-sunken { display: flex !important; align-items: center; padding: 0 24px !important; }
@media (max-width: 720px) { #how.how-k.how-sunken { padding: 0 20px !important; } }
/* phones: the category key runs horizontally along the bottom of the photo, right above the title */
@media (max-width: 720px) {
  .co-art .cat-bar.v, .hc-art .cat-bar.v { top: auto; bottom: 0; left: 0; right: 0; width: auto !important; height: 40px; }
  .cats-one .co-stage, .cats-one .co-card { border-radius: var(--r); }   /* the strip is off the corner now */
}

/* ===================== v4 Final (Figma 66:5678) ===================== */
/* header: Ube bar, Feta/Shallot wordmark, white nav, white button with Ube type */
.header, .header.stuck { background: var(--ube); }
.header.stuck { box-shadow: 0 1px 0 rgba(24, 22, 22, .12); }
.header .nav a { color: rgba(255, 255, 255, .96); font-weight: 500; font-size: 15px; }
.header .nav a:hover { color: #fff; opacity: .8; }
.header .nav { gap: 28px; }
.header .logo img { height: 21px; }
.btn-inv, .btn.sm.btn-inv, .btn.lg.btn-inv { background: #fff; color: var(--ube); box-shadow: none;
  font-family: var(--font-body); font-weight: 600; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; border-radius: 8px; }
.btn-inv:hover { background: var(--feta); color: var(--ube); }
.btn.sm.btn-inv { height: 40px; padding: 0 18px; }
.btn.lg.btn-inv { height: 48px; padding: 0 26px; }
@media (max-width: 720px) { .header .logo img { height: 18px; } .actions .btn.sm.btn-inv { height: 36px; padding: 0 14px; font-size: 14px; } }

/* hero: magenta table, white copy, centred under the Create Cup card */
.hero.hero-final { background: #B416A9; min-height: 0 !important; height: 732px; display: flex; align-items: center; justify-content: center; }
.hero-final > .hero-photo > img { object-position: 50% 45% !important; }
.hero-final .hero-in { padding: 140px 32px 64px !important; text-align: center; }
.hero-final .h1 { max-width: 1030px; margin: 0 auto; font-size: 66px; line-height: 1.04; letter-spacing: -.01em; color: #fff; }
.hero-final .hero-in > .sub { max-width: 572px; margin: 20px auto 0; font-family: var(--font-body); font-weight: 500; font-size: 20px; line-height: 30px; color: rgba(255, 255, 255, .96); }
.hero-final .hero-ctas { margin-top: 32px; justify-content: center; }
/* the Create Cup card: cream, title in cup gold, the gold cup breaking out of it, live countdown */
.cup-card { position: absolute; z-index: 3; top: 52px; left: 50%; transform: translateX(-50%); width: 573px; height: 93px; box-sizing: border-box;
  display: grid; grid-template-columns: 1fr 112px auto; align-items: center; padding: 0 16px 0 28px; border-radius: 16px;
  background: #F9F5EF; box-shadow: 0 0 0 1px rgba(214, 176, 72, .55), 0 18px 40px rgba(60, 0, 60, .22); }
.cup-card[data-vp] { transform: translateX(-50%) translateY(14px); }
body.booted .cup-card[data-vp] { transform: translateX(-50%); }
.cup-t b { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 24px; line-height: 1.1;
  background: linear-gradient(180deg, #C2852B, #9A5E1C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cup-t span { display: block; margin-top: 4px; font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--ink); }
.cup-img { justify-self: center; width: 101px; height: auto; margin: -24px 0; filter: drop-shadow(0 10px 14px rgba(60, 30, 0, .35)); }
.cup-card .cd-tiles { display: flex; gap: 6px; }
.cup-card .cd-t { width: 46px; height: 58px; display: grid; place-content: center; text-align: center; border-radius: 8px; background: #F0ECE3; }
.cup-card .cd-t b { font-family: var(--font-heading); font-weight: 400; font-size: 22px; line-height: 1; color: var(--ink); }
.cup-card .cd-t span { margin-top: 5px; font-size: 10px; font-weight: 600; color: var(--ink-2); }
@media (max-width: 720px) {
  .hero.hero-final { height: auto; min-height: 640px !important; }
  .hero-final .hero-in { padding: 168px 20px 56px !important; }
  .hero-final .h1 { font-size: 40px; line-height: 1.06; }
  .hero-final .hero-in > .sub { font-size: 17px; line-height: 26px; }
  .hero-final .hero-ctas .btn { width: 100%; }
  .cup-card { top: 28px; width: calc(100% - 40px); height: 84px; grid-template-columns: 1fr 64px auto; padding: 0 10px 0 16px; border-radius: 14px; }
  .cup-t b { font-size: 19px; } .cup-t span { font-size: 13px; }
  .cup-img { width: 64px; margin: -18px 0; }
  .cup-card .cd-t { width: 38px; height: 50px; } .cup-card .cd-t b { font-size: 18px; } .cup-card .cd-t span { font-size: 9px; }
}
/* the hero runs up under the header (photo behind it), so offsets count from the header's bottom */
body[data-page='home'] .hero.hero-final { height: calc(732px + var(--header-h)); }
body[data-page='home'] .cup-card { top: calc(var(--header-h) + 24px); }
@media (max-width: 720px) {
  body[data-page='home'] .hero.hero-final { height: auto; }
  body[data-page='home'] .cup-card { top: calc(var(--header-h) + 20px); }
  .cup-card { height: 76px; grid-template-columns: 1fr 52px auto; gap: 6px; padding: 0 8px 0 14px; }
  .cup-t b { font-size: 17px; white-space: nowrap; } .cup-t span { font-size: 12px; white-space: nowrap; }
  .cup-img { width: 52px; margin: -14px 0; }
  .cup-card .cd-tiles { gap: 4px; } .cup-card .cd-t { width: 36px; height: 46px; } .cup-card .cd-t b { font-size: 17px; }
  .hero-final .hero-in { padding: 150px 20px 56px !important; }
}
@media (max-width: 370px) { .cup-t b { font-size: 15px; } .cup-card .cd-t { width: 32px; } }
/* the 3D trophy hovers over the middle of the card (trophy.js); the flat cup is the fallback */
.cup-card { grid-template-columns: 1fr 120px auto; }
.cup-3d { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; transform: translate(-50%, -60%); pointer-events: none; display: grid; place-items: center; }
.cup-3d .cup-img { width: 92px; margin: 0; }
.cup-3d.is-3d .cup-img { display: none; }
.cup-3d .cup-canvas { width: 100% !important; height: 100% !important; display: block; filter: drop-shadow(0 14px 16px rgba(70, 30, 0, .32)); }
@media (max-width: 720px) { .cup-card { grid-template-columns: 1fr 70px auto; } .cup-3d { width: 104px; height: 104px; } .cup-3d .cup-img { width: 56px; } }
.cup-3d { width: 150px; height: 140px; transform: translate(-50%, -50%); }
@media (max-width: 720px) { .cup-3d { width: 96px; height: 96px; } }
.cup-card, #countdown.cup-card { overflow: visible !important; }
@media (max-width: 720px) { .cup-card .cd-t span { font-size: 8px; letter-spacing: 0; } }

/* ===== v4: type + colour from the updated Figma components (66:5678) ===== */
/* in-page buttons: Volte Semibold 14, 1px tracking, uppercase, no arrow (the footer keeps its Fabrikat CTA) */
main .btn.lg:not(.btn-inv), main .btn.c-enter { font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; height: 48px; padding: 0 26px; }
/* section subcopy: Volte Medium, Pesto */
#what .sec-head .sub, #categories .sec-head .sub { font-family: var(--font-body); font-weight: 500; font-size: 24px; line-height: 28px; color: var(--pesto); }
#who .sub, #how .hk-l .sub { font-family: var(--font-body); font-weight: 500; font-size: 19px; line-height: 26px; color: var(--pesto); }
#who .sub { line-height: 28px; }
/* What cards: Gooper Light numbers, Volte Semibold titles, Volte Medium body, all Pesto */
.wg .w-n { font-family: var(--font-heading); font-weight: 300; font-size: 24px; line-height: 24px; color: var(--pesto); }
.wg .w-body h3 { font-family: var(--font-body); font-weight: 600; font-size: 28px; line-height: 30.8px; color: var(--pesto); }
.wg .w-body p { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; color: var(--pesto); }
/* How steps: Pesto titles and body */
#how .hk-steps b { font-weight: 600; font-size: 18px; line-height: 24px; color: var(--pesto); }
#how .hk-steps p { font-weight: 500; font-size: 15px; line-height: 22px; color: var(--pesto); }
/* category cards: Volte Semibold title, Volte Medium body, Pesto labels */
.co-b h3 { font-family: var(--font-body); font-weight: 600; font-size: 28px; line-height: 30.8px; color: var(--pesto); }
.co-b p { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 27px; color: var(--pesto); }
.co-b .sp-l { font-weight: 600; font-size: 15px; line-height: 24px; color: var(--pesto); }
/* How: Shallot panel with the stone texture behind the credit cards */
.hk-r.hk-tex { position: relative; background: var(--shallot); overflow: hidden; }
.hk-r.hk-tex::before { content: ''; position: absolute; inset: 0; background: url('img/texture-stone.jpg') center / cover; mix-blend-mode: hard-light; opacity: .5; }
.hk-r.hk-tex .rv-pop { position: relative; z-index: 1; }
@media (max-width: 720px) {
  #what .sec-head .sub, #categories .sec-head .sub { font-size: 17px; line-height: 24px; }
  #who .sub, #how .hk-l .sub { font-size: 16px; line-height: 24px; }
  .wg .w-n { font-size: 20px; line-height: 20px; }
  .wg .w-body h3, .co-b h3 { font-size: 22px; line-height: 1.15; }
  .co-b p { font-size: 16px; line-height: 24px; }
}
/* round 3: ticker 50px narrower; the hero fills the screen, the bars start just below it (as v3) */
.cup-card { width: 523px; }
body[data-page='home'] .hero.hero-final { height: auto; min-height: max(640px, 100svh) !important; }
@media (max-width: 720px) { body[data-page='home'] .hero.hero-final { min-height: max(600px, 100svh) !important; } }
@media (max-width: 720px) { .cup-card { width: calc(100% - 40px); } }
/* round 4: the ticker sits 60px lower; the copy below keeps clear of it */
body[data-page='home'] .cup-card { top: calc(var(--header-h) + 84px); }
.hero-final .hero-in { padding-top: 200px !important; }
@media (max-width: 720px) { body[data-page='home'] .cup-card { top: calc(var(--header-h) + 80px); } .hero-final .hero-in { padding-top: 210px !important; } }
@media (min-width: 721px) { body[data-page='home'] .hero.hero-final { min-height: max(700px, 100svh) !important; } }

/* ===================== v4 round 5 (Figma 85:11838 entry, new category + What images) ===================== */
/* category photos carry their own brand badge now -- no "Example:" pill */
.co-art .cat-eg, .hc-art .cat-eg { display: none; }
/* entry page, simplified: Gooper Light title + the deadline, then the sign-up card */
html #wizard .wz-top { padding: 48px 72px 0; }
html #wizard .wz-title { font-family: var(--font-heading); font-weight: 300; font-size: 28px; line-height: 36px; letter-spacing: .15px; color: var(--pesto); }
html #wizard .wz-sub { margin: 4px auto 0; max-width: none; font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 22px; color: var(--pesto); }
html #wizard .e-form { margin-top: 32px; padding: 32px; border-radius: 20px; background: #fff; box-shadow: none; border-top: 1px solid #E7E1DC; border-radius: 0; }
html #wizard .step-pane[data-step='1'] .fs-head { margin: 0 0 24px; }
html #wizard .step-pane[data-step='1'] .fs-head h3 { font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 22px; color: var(--pesto); }
html #wizard .step-pane[data-step='1'] .fs-head p { margin-top: 2px; font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 22px; color: var(--pesto); }
html #wizard .step-pane[data-step='1'] .g { row-gap: 20px; }
html #wizard .step-pane[data-step='1'] .lbl { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--ink); }
html #wizard .step-pane[data-step='1'] .input { height: 44px; border-radius: 6px; font-size: 15px; }
html #wizard .step-pane[data-step='1'] .input:focus { border-color: var(--ube); box-shadow: 0 0 0 3px rgba(184, 3, 184, .16); }
html #wizard .s1-fine { font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 18px; color: rgba(35, 31, 32, .65); }
html #wizard .step-pane[data-step='1'] .step-nav { margin-top: 0; padding-top: 24px; border-top: 0; justify-content: flex-end; }
html #wizard .step-pane[data-step='1'] .step-nav > span:empty { display: none; }
html #wizard .step-pane[data-step='1'] [data-next] { font-family: var(--font-eyebrow); font-weight: 700; font-size: 14px; letter-spacing: .97px; text-transform: uppercase; height: 48px; padding: 0 26px; color: var(--feta); }
@media (max-width: 720px) {
  html #wizard .wz-top { padding: 28px 56px 0; }
  html #wizard .wz-title { font-size: 26px; line-height: 32px; }
  html #wizard .wz-sub { font-size: 15px; line-height: 20px; }
  html #wizard .e-form { margin-top: 20px; padding: 24px 4px; }
  html #wizard .step-pane[data-step='1'] .step-nav { position: static; margin: 0; padding: 20px 0 0; background: none; }
  html #wizard .step-pane[data-step='1'] [data-next] { width: 100%; }
}
html #wizard .modal-x { box-shadow: none; background: #fff; }
html #wizard .wz-sub { margin-top: 8px; }

/* round 6: category photos are the full 5:4 shots (more table round the badges);
   How panel behind the credit cards is lime (#A1D745, Celery) with the stone texture */
.hk-r.hk-tex { background: var(--celery); }
.co-art .bowl.cat-photo > img, .hc-art .bowl.cat-photo > img { object-position: 50% 15%; }
.co-art .bowl.cat-photo > img, .hc-art .bowl.cat-photo > img { object-position: 50% 40%; }

/* round 7: the trophy also stands in the footer, overlapping the W's bottom-right */
.z-fmark { position: relative; display: inline-block; }
.foot-cup { position: absolute; right: -54px; bottom: -22px; width: 92px; height: 92px; pointer-events: none; display: grid; place-items: center; }
.foot-cup .cup-img { width: 46px; height: auto; }
.foot-cup.is-3d .cup-img { display: none; }
.foot-cup .cup-canvas { width: 100% !important; height: 100% !important; display: block; filter: drop-shadow(0 8px 10px rgba(70, 30, 0, .3)); }
@media (max-width: 720px) { .foot-cup { right: -34px; bottom: -14px; width: 60px; height: 60px; } .foot-cup .cup-img { width: 30px; } }
.z-fmark { justify-self: start; align-self: start; width: max-content; }
.foot-cup { right: -40px; bottom: -18px; width: 84px; height: 84px; }
.cup-3d { width: 124px; height: 124px; }
@media (max-width: 720px) { .foot-cup { right: -30px; bottom: -12px; width: 56px; height: 56px; } }
/* footer cup: just tucked into the W's bottom-right corner */
.foot-cup { right: -62px; bottom: -28px; }
@media (max-width: 720px) { .foot-cup { right: -40px; bottom: -18px; } }

/* phones: the ticker gets two rows -- title + cup, then three full-size countdown tiles */
@media (max-width: 720px) {
  .cup-card { height: auto; grid-template-columns: 1fr; grid-template-areas: 't' 'tiles'; row-gap: 14px; padding: 18px 16px 16px; }
  .cup-t { grid-area: t; padding-right: 92px; }
  .cup-t b { font-size: 22px; } .cup-t span { font-size: 14px; }
  .cup-3d { left: auto; right: 6px; top: -30px; transform: none; width: 96px; height: 96px; }
  .cup-card .cd-tiles { grid-area: tiles; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cup-card .cd-t { width: auto; height: 60px; border-radius: 10px; }
  .cup-card .cd-t b { font-size: 24px; }
  .cup-card .cd-t span { margin-top: 6px; font-size: 11px; letter-spacing: 0; }
  .hero-final .hero-in { padding-top: 330px !important; }
}
@media (max-width: 370px) { .cup-t b { font-size: 20px; } .hero-final .hero-in { padding-top: 320px !important; } }

/* phones: in How it works, the lime panel with the credit cards leads the card */
@media (max-width: 960px) {
  .how-sunken .hk-card .hk-r { order: -1; min-height: 300px; }
}
@media (max-width: 720px) { .how-sunken .hk-card .hk-r { min-height: 240px; } }
@media (max-width: 960px) { .how-sunken .hk-r .gh-stack { width: min(300px, 64%); } }
@media (max-width: 720px) { .how-sunken .hk-r .gh-stack { width: 58%; } .how-sunken .hk-card .hk-r { min-height: 220px; } .how-sunken .hk-l { padding-top: 28px; } }
@media (max-width: 960px) {
  .how-sunken .hk-r .gh-stack { container-type: inline-size; }
  .how-sunken .hk-r .gh-card { padding: 7cqw 7.5cqw; border-radius: 6cqw; }
  .how-sunken .hk-r .gh-icon { width: 15cqw; height: 15cqw; border-radius: 3.5cqw; }
  .how-sunken .hk-r .gh-kind { margin-top: 3cqw; font-size: 4.6cqw; }
  .how-sunken .hk-r .gh-amt { font-size: 24cqw; }
}
@media (max-width: 960px) { .how-sunken .hk-r .rv-pop { translate: 16px 22px; } }

/* round 8: the canvases grow by the same ratio the camera stepped back (1.12 -> 1.45),
   so the cup stays the same size on screen but has room to float without clipping */
.cup-3d { width: 160px; height: 160px; }
.foot-cup { width: 108px; height: 108px; right: -74px; bottom: -40px; }
@media (max-width: 720px) { .cup-3d { width: 124px; height: 124px; top: -44px; right: -8px; } .foot-cup { width: 72px; height: 72px; right: -48px; bottom: -26px; } }
/* desktop ticker tiles: 12px either side of the number and label */
@media (min-width: 721px) { .cup-card .cd-t { width: auto; min-width: 46px; padding: 0 12px; } }
@media (min-width: 721px) { .cup-card .cd-tiles .cd-t { width: max-content !important; flex: 0 0 auto; padding: 0 12px; box-sizing: border-box; } .cup-card { grid-template-columns: 1fr 124px auto; } }
@media (min-width: 721px) { .cup-card { grid-template-columns: auto 1fr auto; padding: 0 16px 0 28px; } }
@media (min-width: 721px) { .cup-card .cup-t { grid-column: 1; } .cup-card .cd-tiles { grid-column: 3; justify-self: end; } }

/* ===== round 9: ticker per Figma 85:11901 (our 3D cup stays) ===== */
.cup-card { width: 538px; height: 88px; padding: 0 18px 0 19px; border-radius: 18px;
  background: linear-gradient(90deg, #F9F7F1, #F8F6F0); box-shadow: inset 0 0 0 1px #E9E5DB, 0 18px 40px rgba(60, 0, 60, .18); }
.cup-t b { font-family: var(--font-body); font-weight: 600; font-size: 20px; line-height: 26px; color: #944D06;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; }
.cup-t span { margin-top: 4px; font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 20px; color: #211E17; }
.cup-card .cd-t { background: #F0ECE4; border-radius: 10px; color: #211E17; }
.cup-card .cd-t b { font-family: var(--font-heading); font-weight: 400; font-size: 22px; line-height: 28px; letter-spacing: .15px; color: #211E17; }
.cup-card .cd-t span { margin-top: 2px; font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 18px; color: #211E17; letter-spacing: 0; }
@media (min-width: 721px) {
  .cup-card .cd-tiles { width: 189px; gap: 5px; display: flex; }
  .cup-card .cd-tiles .cd-t { flex: 1 1 0 !important; width: auto !important; min-width: 0; height: 61px; padding: 6px 0 7px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
}
@media (max-width: 720px) {
  .cup-card { width: calc(100% - 40px); height: auto; padding: 18px 16px 16px; }
  .cup-t b { font-size: 20px; line-height: 26px; } .cup-t span { font-size: 14px; line-height: 20px; }
  .cup-card .cd-t { height: 61px; padding: 6px 0 7px; display: flex; flex-direction: column; align-items: center; }
  .cup-card .cd-t b { font-size: 22px; line-height: 28px; } .cup-card .cd-t span { font-size: 12px; line-height: 18px; }
}
/* footer CTA = the in-page CTAs: Volte Semibold 14, 1px tracking, uppercase, no arrow */
.z-fend .btn.z-fcta { font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; height: 48px; padding: 0 26px; }
/* round 10: the photos are the comps' own crops -- fill the box exactly, centred */
.bowl.cat-photo > picture { position: absolute; inset: 0; display: block; }
.co-art .bowl.cat-photo img, .hc-art .bowl.cat-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50% !important; }