/* DietStation website · website/ lane. Colours come from the vendored DS tokens (vendor/tokens.css).
   Geometry is Figma's 1512 frame (file n1EpewQA5x60V4bZXnpgak, frame 4173:1792) scaled by --u.

   ONE SECTION PER SCREEN (Rashid, 2026-09-28): every section is a .panel exactly one viewport tall, and the
   page snaps one panel per scroll (native scroll-snap + snap-stop, so trackpads, keys and a11y still work).

   SCALE: 1 design px = --u. --u grows with the viewport width (no 1512 cap any more) and is held back by the
   height so each panel's content always fits its screen:
     MacBook 1512 x ~860  -> u ~1.0     Studio Display 2560 x ~1300 -> u ~1.6
     Pro Display XDR 3008 x ~1550 -> u ~1.9 (the widest tier; anything wider is centred at 3008)   */

@font-face { font-family: 'Urbane Rounded'; src: url('fonts/urbane-thin.woff2') format('woff2'); font-weight: 100; font-display: swap; }
@font-face { font-family: 'Urbane Rounded'; src: url('fonts/urbane-light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Urbane Rounded'; src: url('fonts/urbane-demibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Urbane Rounded'; src: url('fonts/urbane-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Proxima Nova'; src: url('fonts/proxima-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Proxima Nova'; src: url('fonts/proxima-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Avenir Next World'; src: url('fonts/avenir-world-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --vh: 100vh;
  --bleed: 0px;                                                 /* touch devices: lvh - svh + the toolbar strip (below, THE BLEED) */
  --k: 1;                                                       /* big-display tone-down (tiers below) */
  --uf: min(calc(100vw / 1512), calc(var(--vh) / 820));       /* LAYOUT unit: the frame fills the screen */
  --u: calc(var(--uf) * var(--k));                              /* SIZE unit: type and objects, toned down on big displays */
  --hk: 1;                                                      /* the header shrinks further on big displays */
  --uh: calc(var(--u) * var(--hk));
  --frame: calc(1512 * var(--uf));                             /* the Figma frame at this scale */
  --edge: max(0px, calc((100vw - var(--frame)) / 2));         /* space either side when height-limited */
  --gut: calc(var(--edge) + 56 * var(--uf));
  --f-head: 'Urbane Rounded', system-ui, sans-serif;
  --f-para: 'Proxima Nova', system-ui, sans-serif;
  --f-ar: 'Avenir Next World', 'Urbane Rounded', system-ui, sans-serif;
  --red: var(--ds-text-secondary-default);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --small: max(12px, calc(14 * var(--u)));                     /* 14px UI text, scaled on big screens */
  --hsmall: max(12px, calc(14 * var(--uh)));
  --bar-h: calc(env(safe-area-inset-top, 0px) + 52px);         /* the compact bar */
}
@supports (height: 100dvh) { :root { --vh: 100dvh; } }
/* Big displays scale up, but toned down (Rashid, 2026-09-28: "on the XDR everything is on the bigger side,
   tone it down by 20%, and the top nav should be smaller so we get more of the hero"). */
@media (min-width: 1920px) { :root { --k: .9; --hk: .8; } }
/* Studio Display (5K, 2560 CSS px wide) */
@media (min-width: 2560px) { :root { --k: .8; --hk: .72; --bubble-x: 760; --show-spread: 1.12; } }
/* Pro Display XDR (6K, 3008 CSS px wide): the widest tier; wider viewports centre a 3008 frame */
@media (min-width: 3008px) {
  :root { --k: .8; --hk: .72; --uf: min(calc(3008px / 1512), calc(var(--vh) / 820)); --bubble-x: 820; --show-spread: 1.18; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-snap-type: y mandatory; scroll-behavior: smooth; }
html.paging { scroll-snap-type: none; scroll-behavior: auto; }   /* the desktop wheel controller is driving: don't fight it (at rest, snap catches a scrollbar drag / autoscroll) */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--ds-surface-page); color: var(--ds-text-default-body);
  font-family: var(--f-para); -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
em { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; }

/* ── panels: one per screen, one per scroll ── */
.panel {
  position: relative; height: var(--vh); overflow: hidden;
  scroll-snap-align: start; scroll-snap-stop: always;
}
.panel-end { scroll-snap-align: end; }
.sat-panel, .metrics, .rank-panel { display: grid; place-items: center; }
.rank-panel { position: relative; z-index: 2; background: var(--ds-surface-page); }   /* covers the pinned stage (phone, coupon, pill) as #4 rises over its bleed band */
/* THE BLEED (Rashid 2026-10-03: "the tip of the showcase peeks from the bottom … just have it animate in … so the metrics
   show on their own"). Panels are 100svh, but iOS 26 Safari minimizes its toolbar on the way down and the screen is then
   ~100lvh tall: the next section's first (lvh - svh) showed under every stop (the red swoop card + kicker under the
   metrics, the footer's logo under #4, #4's white under Rewards). A gap of exactly that height goes before those sections.
   MARGINS, never taller panels: a snap area taller than the snapport (the toolbar re-expands on the way back up) lets the
   page rest anywhere inside it, off its stop (measured: 60 px off stays put), and atStop() then never sees a stop.
   Static units: nothing changes while scrolling (the re-snap law). Desktop: 0. NOT '.show': the minibar wears .show. */
.metrics, .show-track, .foot { margin-top: var(--bleed); }
.show-panels::after { content: ''; display: block; height: var(--bleed); }   /* inside the track: the pinned stage runs on under the last stop's band; #4 rises over it */

/* entrance: .rv children rise in each time their panel becomes the current one (and reset when it leaves) */
.rv { opacity: 0; transform: translateY(calc(40 * var(--u))); transition: opacity .7s var(--ease), transform .9s var(--ease); transition-delay: 0s; will-change: transform, opacity; }   /* a layer from the start: the rise may begin mid-snap (a transform on an uncomposited box is a layout in WebKit) */
.seen .rv { opacity: .999; transform: translateY(0); transition-delay: var(--d, 0s); }   /* once: a section stays as it landed. .999 / translateY(0), never 1 / none: in WebKit opacity reaching exactly 1 and a transform becoming none are full LAYOUTS (StyleDifference), and an entrance that starts mid-snap ends right as the page comes to rest — the re-snap window */
.rm .rv, .no-io .rv { opacity: 1; transform: none; transition: none; }

/* ── NUMBER ROLLERS (Rashid, 2026-10-03: the 86% and metrics slides 'start very slow … it should be continuous').
   site.js roller() builds them ONCE at boot; afterwards only a class ('go') and a composited transform change, so a
   roll may start mid-swipe without a layout (the re-snap law). Per digit:
     .rd  the slot: an inline-block whose in-flow ghost (.rg = the FINAL digit, invisible) gives it the old text's exact
          width, height and baseline (the tabular figures are inherited, like every other font property)
     .rw  the window: hugs the digit (slot middle -.4em … +.5em), absolutely placed (the slot's baseline is untouched),
          overflow hidden (a clip WebKit always applies to a composited child)
     .rs  the column: cells 1.1em apart, each line centred in its cell — a centred line's baseline sits (ascent-descent)/2
          below its middle at ANY line-height, so a cell's digit lands exactly on the ghost's. It slides up --k cells.
          A layer from the start (will-change): starting or finishing the roll never creates or destroys one.
   Urbane: a digit spans middle -.32em … +.43em; neighbours are 1.1em away, so at rest the window shows one whole digit
   and nothing else, and in motion the digits slide through a slot just taller than the type. ── */
.roll .rd { display: inline-block; position: relative; }
.roll .rg { visibility: hidden; }
.roll .rg::before, .roll .rs i::before { content: attr(data-d); }   /* generated glyphs: no digit text in the DOM but the sr-only number */
.roll .rw { position: absolute; left: -.1em; right: -.1em; top: calc(50% - .62em); height: 1.34em; overflow: hidden; pointer-events: none; -webkit-user-select: none; user-select: none;
  -webkit-mask-image: linear-gradient(transparent, #000 .22em, #000 calc(100% - .22em), transparent); mask-image: linear-gradient(transparent, #000 .22em, #000 calc(100% - .22em), transparent); }
  /* SOFT EDGES (Rashid 2026-10-04, DS motion: a digit fades in transit): the window is .22em taller each way and fades over
     that band — digits slide through a soft edge instead of a hard crop; the crisp middle (-.40…+.50em) still holds the
     resting glyph (-.32…+.43em), and the neighbours 1.1em away stay outside it */
.roll .rs {
  position: absolute; left: .1em; right: .1em; top: .07em; will-change: transform; transform: translateY(0);   /* cell 0's middle on the slot's middle (the window grew .22em upward) */
  transition: transform var(--roll-dur, 1.2s) var(--roll-ease, cubic-bezier(.33, 1, .68, 1)) var(--roll-delay, 0s);
}
.roll .rs i { display: block; height: 1.1em; line-height: 1.1em; font-style: normal; text-align: center; }
.roll.go .rs, .rm .roll .rs, .no-io .roll .rs { transform: translateY(calc(var(--k) * -1.1em)); }
.rm .roll .rs, .no-io .roll .rs { transition: none; }

/* ── header (4173:1865 + 4173:1852), part of the hero's screen ── */
.panel-hero {
  display: flex; flex-direction: column; background: var(--hero-bg);
  /* the hero's palette: the page's tokens (the red hero theme is gone, Rashid 2026-10-04: "make it all white, without the
     red hero"). Asset Gen's globe reads --globe-grey / --globe-red from here. */
  --hero-bg: var(--ds-surface-page);
  --hero-ink: var(--ds-text-default-hero);
  --hero-body: var(--ds-text-default-body);
  --hero-accent: var(--red);
  --hero-line: var(--ds-border-primary-default-subtle);
  --hero-sep: var(--ds-border-default);
  --hero-hover: var(--red);
  --hero-globe-grey: var(--ds-icon-primary-default-subtle-hover);
  --hero-globe-red: var(--ds-surface-secondary-default);
}
.top { position: relative; z-index: 3; background: transparent; flex: none; }
/* the globe runs behind the header (Rashid: "the top navigation not to clip the globe"): no solid ground, just a soft
   veil of the page colour that keeps the header readable and melts into the globe below it */
.top::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 56 * var(--uh)); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--hero-bg) 94%, transparent) 0%,
    color-mix(in srgb, var(--hero-bg) 80%, transparent) 62%, transparent 100%);
}
.brandrow {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: calc(30 * var(--uh)) var(--gut) 0;
}
.brandrow > * { min-height: calc(44 * var(--uh)); }
.brand { display: flex; align-items: flex-end; gap: calc(19 * var(--uh)); }
.logo { width: calc(52 * var(--uh)); height: calc(37 * var(--uh)); }
.tag { font: 600 max(13px, calc(16 * var(--uh)))/1.375 var(--f-head); color: var(--hero-ink); width: calc(185 * var(--uh)); min-width: 160px; }
.tag em { color: var(--hero-accent); }
/* ONE ROW, no nav row (Rashid, 2026-10-04: "disable the current secondary navigation … move Download App next to the
   language selector"): [logo + tagline ........ Kuwait | English (Download App)] */
.util { display: flex; align-items: center; gap: calc(24 * var(--uh)); align-self: center; margin-top: calc(10 * var(--uh)); white-space: nowrap; }
.icon-btn img { width: calc(24 * var(--uh)); height: calc(24 * var(--uh)); }
.locale { display: flex; align-items: center; gap: calc(9 * var(--uh)); font: 700 var(--hsmall)/1.43 var(--f-ar); color: var(--hero-body); }
.locale .sep { color: var(--hero-sep); }
.lc { display: inline-flex; align-items: center; gap: 6px; }
.lc-a, .flag { display: none; }   /* the short form + flag are the phones' (below) */
/* the Kuwait flag in a circle (phones): the bands + hoist trapezoid cropped round, with a hairline ring so the white
   band doesn't melt into the white header */
.flag { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; overflow: hidden; }
.flag svg { display: block; width: 100%; height: 100%; }
.flag::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(11, 14, 18, .14); }

/* the compact sticky bar (Rashid): once the full header scrolls away, a slim bar slides in, with the smile logo
   alone (no tagline) and the pill, on light frosted glass */
.minibar {   /* SIMPLE (Rashid 2026-10-03: "not a capsule … simple and adaptive to colour states"): a plain full-width bar,
                the smile and one pill, no border or shadow; white over every section (the on-red state went with the red showcase, 2026-10-04) */
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: var(--bar-h);
  padding: env(safe-area-inset-top, 0px) var(--gut) 0; display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.9);   /* ON the bar itself: Safari 26 tints its status strip from this fixed bar's background. White on every section now (the red showcase and its clear on-red bar are gone, 2026-10-04) */
  font-size: 14px; line-height: 1; white-space: nowrap;
  transform: translateY(-100%); transition: transform .4s var(--ease);
}
/* THE BLUR ON A PERMANENT LAYER (re-snap law, 2026-10-04): switching backdrop-filter off/on made or destroyed a layer in the
   last px of a snap. It lives on a permanent layer at .999 (never exactly 1: opacity crossing 1 is a LAYOUT in WebKit). */
.minibar::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;   /* only the BLUR lives here; the white stays on the bar */
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); will-change: opacity;
  opacity: .999; }
.minibar.show { transform: none; }
.mini-brand { display: flex; align-items: center; }
.mini-logo { width: 32px; height: auto; }
/* the one call to action: a red pill (header and bar) */
.pill, .minibar .pill {
  display: inline-flex; align-items: center; height: max(32px, calc(36 * var(--uh))); padding: 0 calc(18 * var(--uh)); border-radius: 999px;
  background: var(--red); color: #fff !important; font-weight: 600; text-decoration: none; transition: filter .2s, transform .2s;
}
.pill:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.minibar .pill { height: 34px; padding: 0 16px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .minibar { transition: none; } }

/* ── 1 · hero (4173:1825): the rest of the first screen ── */
.hero { position: relative; flex: 1; min-height: 0; }
.globe {
  position: absolute; right: 0; top: calc(50% - 419 * var(--u));   /* bleeds off the screen's right edge, as in Figma, even when the frame is height-limited */
  width: calc(1118 * var(--u)); height: calc(1053 * var(--u));
  pointer-events: none; z-index: 0;
  --globe-grey: var(--hero-globe-grey);   /* Asset Gen's globe reads these two */
  --globe-red: var(--hero-globe-red);
}
.globe-ph { width: 100%; height: 100%; animation: ph-in 1.6s var(--ease) both .15s; }
.globe canvas { position: absolute; inset: 0; }
/* full-bleed: the canvas fills the hero panel behind the header; the old box (#globe-mount) stays as the camera's
   measuring slot. Only the left (behind the counter) and the bottom (into the next section) melt. */
.globe-full {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  --globe-grey: var(--hero-globe-grey); --globe-red: var(--hero-globe-red);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-x, 40%)), linear-gradient(to bottom, #000 0, #000 84%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-x, 40%)), linear-gradient(to bottom, #000 0, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.globe-full canvas { position: absolute; inset: 0; }
.globe.slot { visibility: hidden; }
.panel-hero > .top, .panel-hero > .hero { position: relative; z-index: 1; }
/* the hero's layer sits over the full-bleed globe: let the pointer through to it (the tuner drags the globe),
   except on the things you can actually use */
.panel-hero > .hero { pointer-events: none; }
.hero > .counter, .hero > .explore { pointer-events: auto; }
.panel-hero > .top { z-index: 3; }
/* the globe's own edge fade is off; this mask melts only the left (behind the counter), the box's top and the bottom
   (into the next section). The right edge runs crisp to the screen edge (Rashid: "expand to the right"). */
.globe {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%), linear-gradient(to bottom, transparent 0, #000 9%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 24%), linear-gradient(to bottom, transparent 0, #000 9%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* only if SITE.globe.interactive is turned back on (off by Rashid's call): pointer in, vertical touch still scrolls */
.globe.interactive { pointer-events: auto; touch-action: pan-y; }
.globe.has-globe .globe-ph { visibility: hidden; animation: none; }
@keyframes ph-in { from { opacity: 0; transform: translate3d(6%, 2%, 0) scale(.96); } to { opacity: 1; transform: none; } }

.counter { position: absolute; z-index: 1; left: var(--gut); top: calc(47.8% - 114 * var(--u)); width: calc(573 * var(--u)); }
.c-row {
  display: flex; align-items: baseline; gap: 0;   /* one number, 50,128,403: the groups and their commas sit on one baseline, no gaps */
  height: calc(125 * var(--u)); padding: 0 calc(5 * var(--u));
  margin: calc(-16 * var(--u)) 0 calc(16 * var(--u));   /* baseline rows start at the top: the 50's 1.12em slot (157u) in the 125u row sat 16u above it when centred — same spot, same gap to the title */
  font-variant-numeric: tabular-nums;
}
.g { display: inline-flex; font-family: var(--f-head); line-height: 1; white-space: nowrap; }
.g-m { font-weight: 600; font-size: calc(140 * var(--u)); color: var(--hero-accent); }
.g-k, .g-o { font-weight: 100; font-size: calc(73 * var(--u)); color: var(--hero-ink); }
/* thousands commas between the groups (Rashid 2026-10-06: "regular commas so the number looks intact"; were hairline rules) */
.c-comma { flex: none; font: 100 calc(73 * var(--u))/1 var(--f-head); font-style: normal; color: var(--hero-ink); margin: 0 .06em 0 .02em; }
/* odometer digit: a clipped slot; a changed digit rolls up and out, the new one rolls in. SOFT EDGES (Rashid 2026-10-04:
   "the counters have a cropped top and bottom … soften them"; DS /system/motion.html: a digit in transit fades as it
   travels and lands crisp). The slot reaches .22em past the line box on both sides (negative margins: the row doesn't
   move) and fades over that band, so a digit slides in and out of a soft edge; at rest the glyph sits in the crisp middle. */
.d { position: relative; display: inline-block; overflow: hidden; box-sizing: content-box; height: 1.12em; line-height: 1.12em; padding: .22em 0; margin: -.22em 0;   /* content-box: the page is border-box, which ate the padding out of the slot */
  -webkit-mask-image: linear-gradient(transparent, #000 .3em, #000 calc(100% - .3em), transparent); mask-image: linear-gradient(transparent, #000 .3em, #000 calc(100% - .3em), transparent); }
.d > span { display: block; }
.d > span.in { position: absolute; left: 0; top: .22em; }
.c-title { margin: 0; padding: 0 calc(9 * var(--u)); font: 600 calc(43 * var(--u))/calc(75 * var(--u)) var(--f-head); color: var(--hero-ink); }
.c-title em { color: var(--hero-accent); }
.c-sub {
  margin: 0; padding: 0 calc(9 * var(--u)); display: flex; align-items: center; gap: calc(17 * var(--u));
  font: 300 calc(18 * var(--u)) var(--f-head); color: var(--hero-body); white-space: nowrap;
}
.c-sub b { font-weight: 600; }
.c-sub .bar { font-size: calc(24 * var(--u)); }
.explore {
  position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); bottom: calc(28 * var(--u) + 8px);
  display: flex; flex-direction: column; align-items: center;
  font: 700 var(--small)/1.43 var(--f-para); color: var(--hero-body);
}
.explore img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); animation: nudge 2.4s ease-in-out infinite; }
/* the arrow only nudges while the hero is on screen ('vis' = watchPanels' 55% line, toggled anyway): an endless animation
   kept every later stop restyling 60 times a second at rest (desktop profile 2026-10-04). Paint only: no layout. */
html:not(.no-io) .panel-hero:not(.vis) .explore img { animation-play-state: paused; }
@keyframes nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .explore img, .globe-ph { animation: none; } }

/* the globe camera tuner (?tune=globe), Rashid's tool, never on the visitor page */
.tuner {
  position: fixed; right: 16px; bottom: 16px; z-index: 30; width: 300px; padding: 14px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--ds-surface-page) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 0 0 1px var(--ds-border-primary-default-subtle), 0 16px 40px -20px rgba(11,14,18,.4);
  font: 400 13px/1.4 var(--f-para); color: var(--ds-text-default-body);
}
.tuner b { display: block; font: 600 15px var(--f-head); color: var(--ds-text-default-hero); margin-bottom: 4px; }
.tuner .tn-sub { margin: 12px 0 2px; font-size: 13px; }
.tuner .tn-code { white-space: pre-wrap; }
.tuner .tn-hint { margin: 0 0 10px; color: var(--ds-text-default-caption); }
.tuner label { display: grid; grid-template-columns: 74px 1fr 52px; align-items: center; gap: 8px; margin: 6px 0; }
.tuner input[type=range] { width: 100%; accent-color: var(--ds-surface-secondary-default); }
.tuner output { text-align: right; font-variant-numeric: tabular-nums; }
.tuner .tn-row { display: flex; gap: 8px; margin: 10px 0 8px; }
.tuner button { flex: 1; padding: 8px 10px; border-radius: 999px; font: 600 13px var(--f-head); color: var(--ds-text-default-hero); box-shadow: inset 0 0 0 1px var(--ds-border-default); }
.tuner button:hover { color: var(--red); }
.tuner .tn-code { display: block; user-select: all; font: 12px/1.4 ui-monospace, Menlo, monospace; color: var(--ds-text-default-caption); word-break: break-all; }
.tuner:empty { display: none; }

/* the carry box: a fixed layer so it can ride from the hero into the food section (JS places it) */
.hero-box {
  position: fixed; left: 50%; top: 0; z-index: 4; width: calc(110 * var(--u)); height: calc(110 * var(--u));
  transform: translate(-50%, 0); transform-origin: 50% 50%; will-change: transform, opacity; pointer-events: none; opacity: 0;   /* JS drives opacity along the timeline */
}
.hero-box.in-stage { position: absolute; z-index: 2; }   /* phones: landed, it lives in the food stage and scrolls with it */
.hero-box .body { position: absolute; inset: 0; transform-origin: 50% 88%; }
.hero-box .squash { position: absolute; inset: 0; transform-origin: 50% 88%; }
/* phones on Safari 26+: the flight follows a smoothed progress (site.js sdaInit: paused Web Animations); only the ride
   away to the next section is on the page's scroll timeline, so it stays pixel-tied to the stage */
.hero-box .ride { position: absolute; inset: 0; }
.hero-box.sda .ride { animation: box-ride linear both; animation-timeline: scroll(root block); animation-range: var(--ride-a, 100vh) var(--ride-b, 200vh); }
@keyframes box-ride { from { transform: none; } to { transform: translateY(var(--ride, -100vh)); } }
   /* the hop lives here (squash from the base), under the timeline's transform */
.hero-box .sheet { position: absolute; inset: 0; background-repeat: no-repeat; will-change: transform; }   /* a sprite frame (img/box), not a 3D scene */
/* the contact shadow (Rashid 2026-10-04: the baked one "jumps with it, highly unrealistic"): a soft ellipse on the ground
   at the box's foot, beside .jump so the hop/arc never carry it (site.js gApply). The frames' base line is 75.3% down, the
   box 69% wide: a tight dark contact band hugging that line + a wider, paler ambient pool, warm like Asset Gen's shadow.
   Always opacity < 1 on permanent layers: paint-only while a snap ends (the re-snap law). */
.hero-box .gnd { position: absolute; inset: 0; transform-origin: 50% 76%; will-change: transform, opacity; opacity: .999; }
.hero-box .gsh {
  position: absolute; left: 4%; width: 92%; top: 68%; height: 16%; will-change: transform, opacity; opacity: .999;
  background:   /* the contact band on the base line (75.3%), then the pool, a touch to the right (the key light is upper left) */
    radial-gradient(41% 20% at 50% 46%, rgba(60, 20, 24, .44), rgba(60, 20, 24, .24) 50%, rgba(60, 20, 24, 0)),
    radial-gradient(50% 47% at 53% 53%, rgba(60, 20, 24, .22), rgba(60, 20, 24, .09) 60%, rgba(60, 20, 24, 0));
}
.hero-box .gsh.hop { animation: gsh-hop .78s cubic-bezier(.3,.6,.4,1) both; }
/* in step with hop-r/hop-l (same keys, same curve): wider in the squashes, small and pale at the apex (the base is ~.8 box heights up) */
@keyframes gsh-hop {
  0%   { transform: scale(1, 1); opacity: .999; }
  14%  { transform: scale(1.1, 1); opacity: .999; }
  34%  { transform: scale(.74, .8); opacity: .5; }
  50%  { transform: scale(.68, .74); opacity: .42; }
  68%  { transform: scale(.94, .96); opacity: .86; }
  76%  { transform: scale(1.13, 1); opacity: .999; }
  88%  { transform: scale(.98, 1); opacity: .999; }
  100% { transform: scale(1, 1); opacity: .999; }
}
.hero-box .hop-r { animation: hop-r .78s cubic-bezier(.3,.6,.4,1) both; }
.hero-box .hop-l { animation: hop-l .78s cubic-bezier(.3,.6,.4,1) both; }
/* the playful hop (Rashid, 2026-10-02): anticipation squash, stretch on the way up, a lean at the apex, a fat squash on landing, a wobble, rest */
@keyframes hop-r {
  0%   { transform: translateY(0) scale(1, 1); }
  14%  { transform: translateY(0) scale(1.14, .84); }
  34%  { transform: translateY(-26%) scale(.9, 1.14) rotate(3deg); }
  50%  { transform: translateY(-34%) scale(1, 1) rotate(5deg); }
  68%  { transform: translateY(-6%) scale(.94, 1.08) rotate(1deg); }
  76%  { transform: translateY(0) scale(1.18, .8); }
  88%  { transform: translateY(0) scale(.96, 1.05); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes hop-l {
  0%   { transform: translateY(0) scale(1, 1); }
  14%  { transform: translateY(0) scale(1.14, .84); }
  34%  { transform: translateY(-26%) scale(.9, 1.14) rotate(-3deg); }
  50%  { transform: translateY(-34%) scale(1, 1) rotate(-5deg); }
  68%  { transform: translateY(-6%) scale(.94, 1.08) rotate(-1deg); }
  76%  { transform: translateY(0) scale(1.18, .8); }
  88%  { transform: translateY(0) scale(.96, 1.05); }
  100% { transform: translateY(0) scale(1, 1); }
}
.perf { position: fixed; left: 8px; bottom: 8px; z-index: 99; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.72); color: #fff; font: 600 12px/1.3 ui-monospace, monospace; pointer-events: none; }
.perf[data-dbg]::after { content: attr(data-dbg); display: block; max-width: 92vw; white-space: normal; font-size: 10px; font-weight: 400; opacity: .85; }

/* ── shared type (Figma text styles) ── */
.hero-h { margin: 0; font: 600 calc(96 * var(--u))/calc(112 * var(--u)) var(--f-head); color: var(--ds-text-default-hero); white-space: nowrap; }
.h2 { margin: 0; font: 600 calc(58.4 * var(--u))/calc(68.15 * var(--u)) var(--f-head); color: var(--ds-text-default-body); }
.kicker { margin: 0; font: 300 calc(40 * var(--u))/calc(68.15 * var(--u)) var(--f-head); color: var(--ds-text-default-body); }
.lede { margin: 0; font: 300 calc(32 * var(--u))/calc(52 * var(--u)) var(--f-head); color: var(--ds-text-default-body); }

/* ── 2 · food + bubbles (4173:1944 / 4173:1793): a pinned two-stop timeline ── */
.food-track { position: relative; }
.food-stage { position: sticky; top: 0; height: var(--vh); overflow: hidden; display: grid; place-items: center; z-index: 1; }
.food-steps { margin-top: calc(-1 * var(--vh)); }   /* the snap stops, under the stage */
.food-step { pointer-events: none; }
.bubbles { position: absolute; inset: 0; contain: strict; }
.bub {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  background: var(--ds-surface-secondary) center / cover no-repeat;
  will-change: transform; backface-visibility: hidden;
  display: grid; place-items: center; overflow: hidden;
}
.bub span { font: 600 13px/1.1 var(--f-head); text-align: center; padding: 0 10%; color: var(--ds-text-default-hero); }
.bub.c1 { background-color: var(--ds-surface-secondary-default-subtle); }
.bub.c1 span { color: var(--ds-text-secondary-default); }
.bub.c2 { background-color: var(--ds-surface-tertiary-default-subtle); }
.bub.c3 { background-color: var(--ds-surface-page-secondary); }
.food-copy {   /* in the middle of the space above the box (JS sets --food-copy-y and fades it in once the bubbles are up) */
  position: absolute; left: 50%; top: var(--food-copy-y, 36%); z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center;
  width: min(calc(900 * var(--u)), calc(100% - 2 * var(--gut, 20px)));   /* an explicit width: the headline now wraps (a box from left:50% only got half the stage) */
  opacity: 0; transform: translate(-50%, -50%) translateY(calc(26 * var(--u)));
}
.rm .food-copy { opacity: 1; transform: translate(-50%, -50%); }
.food-copy { will-change: transform, opacity; }   /* JS moves it every frame of the swipe: keep it on its own layer */
.food-copy .kicker { font-size: calc(34 * var(--u)); line-height: 1.7; }
.food-copy .hero-h { font-size: calc(88 * var(--u)); line-height: 1.17; white-space: normal; max-width: calc(820 * var(--u)); text-wrap: balance; }   /* 'Over 400 recipes at your fingertips' takes two lines */

.food-copy .n400 { color: var(--red); font-variant-numeric: tabular-nums; }
.food-copy::before {   /* a soft clearing so the headline reads over photos */
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: calc(1180 * var(--u)); height: calc(560 * var(--u)); transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--ds-surface-page) 40%, color-mix(in srgb, var(--ds-surface-page) 70%, transparent) 70%, transparent);
}

/* ── 3 · 86% (4173:1940 + arch 4173:1948) ── */
.sat-panel { --u: calc(var(--uf) * var(--k) * .74); }   /* the whole composition, smaller in its screen */
.sat { position: relative; width: calc(1512 * var(--u)); height: calc(760 * var(--u)); }
.sat-copy {
  position: absolute; z-index: 1; left: 50%; top: calc(55 * var(--u)); translate: -50% 0;
  width: calc(523 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(23 * var(--u));
  text-align: center;
  opacity: 0; translate: -50% calc(24 * var(--u)); transition: opacity .6s, translate .9s var(--ease);
}
.sat { --sat-lag: .6s; }   /* the smile leads; the words and the number follow (was 950 ms after settle) */
.sat-copy { will-change: transform, opacity; }
.sat.lit .sat-copy { opacity: .999; translate: -50% 0; transition-delay: var(--sat-lag); }   /* .999: see .seen .rv */
.sat .roll { --roll-delay: calc(var(--sat-lag) + .05s); }
.rm .sat-copy, .no-io .sat-copy { opacity: 1; translate: -50% 0; transition: none; }
.sat-copy p { margin: 0; }
.sat-ar { font: 700 calc(48 * var(--u))/calc(68.15 * var(--u)) var(--f-ar); color: var(--ds-text-default-body); }
.sat-num {
  height: calc(236 * var(--u)); display: flex; align-items: baseline; justify-content: center;
  font: 600 calc(300 * var(--u))/calc(220 * var(--u)) var(--f-head); color: var(--red);
  font-variant-numeric: tabular-nums;
}
.sat-num .pct { font-size: calc(96 * var(--u)); }
.sat-label { font: 600 calc(48 * var(--u))/calc(68.15 * var(--u)) var(--f-head); color: var(--ds-text-default-body); }
.arch { position: absolute; left: calc(220 * var(--u)); top: calc(265 * var(--u)); width: calc(1083 * var(--u)); height: calc(484 * var(--u)); overflow: visible; }
.arch path { fill: none; stroke: var(--ds-surface-secondary-default); stroke-width: 39; stroke-linecap: round; }
/* THE SMILE IS DRAWN BY A SWEEPING WEDGE (2026-10-04): stroke-dashoffset lays the SVG out on every frame in WebKit, and
   a mask driven by a registered custom property did not animate in iOS Safari (the smile appeared whole). A clip-path
   polygon fanned from the arc's centre (the top-middle of the viewBox) sweeps from the left end, through the bottom, to
   the right end; Safari animates polygon keyframes natively, and a clip-path change only repaints. The eased timing is
   baked into the keyframe spacing (generated: 11 frames, cubic-bezier(.45,0,.2,1), 14-point fan, radius well past the
   stroke). */
.arch { clip-path: polygon(50.00% 4.28%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%); }
.sat.drawn .arch { animation: arch-draw 1.4s linear both; }
.rm .arch, .no-io .arch, .rm .sat.drawn .arch, .no-io .sat.drawn .arch { clip-path: none; animation: none; }   /* (.sat.drawn .arch alone outranked .rm .arch) */
@keyframes arch-draw {
  0% { clip-path: polygon(50.00% 4.28%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%, -19.73% -7.49%); }
  10% { clip-path: polygon(50.00% 4.28%, -19.73% -7.49%, -19.76% -6.79%, -19.79% -6.10%, -19.82% -5.41%, -19.84% -4.72%, -19.87% -4.03%, -19.89% -3.33%, -19.91% -2.64%, -19.93% -1.95%, -19.94% -1.25%, -19.95% -0.56%, -19.97% 0.13%, -19.98% 0.83%, -19.99% 1.52%); }
  20% { clip-path: polygon(50.00% 4.28%, -19.73% -7.49%, -19.87% -3.91%, -19.96% -0.34%, -20.00% 3.24%, -19.99% 6.82%, -19.93% 10.40%, -19.82% 13.98%, -19.66% 17.55%, -19.45% 21.11%, -19.20% 24.65%, -18.89% 28.19%, -18.54% 31.70%, -18.14% 35.20%, -17.69% 38.67%); }
  30% { clip-path: polygon(50.00% 4.28%, -19.73% -7.49%, -20.00% 3.09%, -19.83% 13.68%, -19.23% 24.21%, -18.21% 34.61%, -16.77% 44.83%, -14.91% 54.80%, -12.66% 64.46%, -10.02% 73.75%, -7.01% 82.61%, -3.65% 90.98%, 0.03% 98.83%, 4.03% 106.09%, 8.31% 112.73%); }
  40% { clip-path: polygon(50.00% 4.28%, -19.73% -7.49%, -19.87% 12.42%, -18.49% 32.14%, -15.62% 51.26%, -11.33% 69.36%, -5.70% 86.04%, 1.14% 100.95%, 9.04% 113.75%, 17.83% 124.18%, 27.32% 132.00%, 37.30% 137.04%, 47.56% 139.20%, 57.88% 138.42%, 68.02% 134.73%); }
  50% { clip-path: polygon(50.00% 4.28%, -19.73% -7.49%, -19.60% 18.72%, -16.84% 44.38%, -11.56% 68.53%, -3.97% 90.26%, 5.67% 108.75%, 16.97% 123.30%, 29.52% 133.37%, 42.83% 138.57%, 56.42% 138.71%, 69.77% 133.78%, 82.37% 123.98%, 93.75% 109.66%, 103.49% 91.37%); }
  60% { clip-path: polygon(50.00% 4.28%, -19.73% -7.49%, -19.36% 22.45%, -15.58% 51.49%, -8.57% 78.21%, 1.32% 101.29%, 13.60% 119.60%, 27.68% 132.23%, 42.85% 138.57%, 58.38% 138.31%, 73.49% 131.45%, 87.45% 118.34%, 99.56% 99.61%, 109.24% 76.19%, 116.00% 49.24%); }
  70% { clip-path: polygon(50.00% 4.28%, -19.73% -7.49%, -19.20% 24.68%, -14.73% 55.69%, -6.58% 83.77%, 4.79% 107.34%, 18.72% 125.05%, 34.43% 135.90%, 51.03% 139.27%, 67.57% 134.96%, 83.11% 123.23%, 96.76% 104.74%, 107.76% 80.53%, 115.48% 52.00%, 119.48% 20.75%); }
  80% { clip-path: polygon(50.00% 4.28%, -19.73% -7.49%, -19.09% 25.98%, -14.20% 58.11%, -5.35% 86.92%, 6.90% 110.66%, 21.80% 127.84%, 38.44% 137.43%, 55.79% 138.82%, 72.78% 131.93%, 88.37% 117.19%, 101.60% 95.50%, 111.66% 68.20%, 117.92% 36.96%, 120.00% 3.72%); }
  90% { clip-path: polygon(50.00% 4.28%, -19.73% -7.49%, -19.03% 26.64%, -13.92% 59.33%, -4.71% 88.50%, 8.00% 112.28%, 23.40% 129.15%, 40.49% 138.03%, 58.20% 138.35%, 75.38% 130.09%, 90.94% 113.79%, 103.88% 90.47%, 113.37% 61.64%, 118.80% 29.14%, 119.84% -4.95%); }
  100% { clip-path: polygon(50.00% 4.28%, -19.73% -7.49%, -19.02% 26.83%, -13.83% 59.69%, -4.52% 88.96%, 8.32% 112.75%, 23.86% 129.52%, 41.10% 138.18%, 58.90% 138.18%, 76.14% 129.52%, 91.68% 112.75%, 104.52% 88.96%, 113.83% 59.69%, 119.02% 26.83%, 119.73% -7.49%); }
}

/* ── 4 · metrics (4173:1883) ── */
.metric-grid { width: var(--frame); padding: 0 calc(58 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(51 * var(--u)); text-align: center; }
.metric { display: flex; flex-direction: column; align-items: center; gap: calc(11 * var(--u)); }
.metric p { margin: 0; }
.metric .label { font: 300 calc(34 * var(--u))/1.3 var(--f-head); color: var(--ds-text-default-body); }   /* the title, under its number */
.metric .value { font: 600 calc(58.4 * var(--u))/calc(68.15 * var(--u)) var(--f-head); color: var(--red); white-space: nowrap; font-variant-numeric: tabular-nums; }
.metric .m-ic { display: block; width: calc(52 * var(--u)); height: calc(52 * var(--u)); color: var(--ds-text-default-hero); margin-bottom: calc(6 * var(--u));
  will-change: transform; transform: translateY(calc(14 * var(--u))) rotate(-14deg) scale(.55); transition: transform .8s cubic-bezier(.3,1.55,.5,1) calc(var(--d, 0s) + .12s); }
.metric .m-ic svg { display: block; width: 100%; height: 100%; }
.seen .metric .m-ic, .rm .metric .m-ic, .no-io .metric .m-ic { transform: translateY(0) rotate(0deg) scale(1); }   /* pops in with its column (never 'none': a layout in WebKit) */
.rm .metric .m-ic, .no-io .metric .m-ic { transition: none; }
.metric .roll { --roll-delay: var(--d, 0s); }   /* each number rolls as its column rises */

/* ── 5 · ranking + download (4173:1878) ── */
.rank { display: grid; grid-template-columns: calc(381 * var(--u)) calc(492 * var(--u)); align-items: start; padding-left: calc(3 * var(--u)); }
.rank p { margin: 0; }
.rank-l { text-align: center; display: flex; flex-direction: column; align-items: center; }
.rank-n { font: 700 calc(297 * var(--u))/calc(346.7 * var(--u)) var(--f-head); color: var(--red); white-space: nowrap; height: calc(330 * var(--u)); }
.rank-n .hash { font-weight: 600; font-size: calc(128 * var(--u)); }
.rank-where { font: 600 calc(40 * var(--u))/calc(68.15 * var(--u)) var(--f-head); color: var(--ds-text-default-body); }
.rank-r { padding-top: calc(65 * var(--u)); }
.rank-r .lede { width: calc(424 * var(--u)); margin-top: calc(36 * var(--u)); }

/* ── 6 · inside the app: one benefit per swipe (a sticky stage over one snap panel per benefit) ── */
.show-track { position: relative; }
.show-panels { margin-top: calc(-1 * var(--vh)); }   /* pulled up under the sticky stage: the stage's own box stays inside the track */
.show-panels { position: relative; z-index: 2; pointer-events: none; }   /* the empty snap stops lie over the stage: touches go through to the coupon and the phone */
.show-panel { position: relative; height: var(--vh); scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; }   /* empty snap stops over the pinned stage */
.show-stage .coupon-stage.fly { pointer-events: none; }
/* the one phone's four screens: stacked layers, pushed in / back by GSAP (site.js) */
.slay, .slay-o { position: absolute; inset: 0; will-change: transform; }
.slay-o { background: #ECECEF; }   /* opaque backing: an embed's transparent margins never show the layer beneath */
/* a SHEET's screen (Meals, Macros): what lies behind the overlay, in its top margin only (SITE.showcase ground). The lower
   half stays the sheet's white because the 402x874 frame scales by the screen's ROUNDED clientWidth and ends ~0.6px short
   of the screen's foot — a full-height colour would show there as a hairline. */
.slay-o.grounded { background: linear-gradient(var(--ground) 0 50%, #fff 50%); }
/* THE BLEED's size (measured in the iOS simulator, 2026-10-04): with Safari's toolbar minimized the viewport is exactly
   100lvh (754 on a 402x874 phone, svh 714), but Safari ALSO paints the page in a further ~58 px strip under its floating
   toolbar, below the viewport — no CSS unit reaches it. So the gap is lvh - svh plus a margin for that strip. Too big is
   harmless (it sits below the screen at rest; a swipe travels a little further); too small let the next section peek. */
@media (pointer: coarse) { @supports (height: 100svh) { :root { --vh: 100svh; --bleed: calc(max(0px, 100lvh - 100svh) + 72px); } } }
.slay-shade { position: absolute; inset: 0; z-index: 6; background: #000; opacity: 0; pointer-events: none; }
.fcs { position: relative; }
.fcs .fc { position: absolute; left: 0; right: 0; top: 0; will-change: opacity, transform; }   /* permanent layers: the push sets them every frame */
/* a clear cover over each phone's screen: iOS gives a swipe to a scrollable area INSIDE an iframe (Rewards' tiers sheet)
   even when the iframe ignores pointer events, which stuck the page on Rewards; the cover keeps every swipe on the page */
.phone-cover { position: absolute; inset: 0; z-index: 5; pointer-events: auto; background: transparent; touch-action: pan-y; }
.show-stage {
  position: sticky; top: 0; height: var(--vh); overflow-x: clip; overflow-y: visible; z-index: 1;   /* y visible: nothing of the stage is clipped at its foot (the coupon, the big dish). x CLIP (2026-10-04): the ripped coupon's torn tab stays parked ~230 px past the right edge (coupon.js tear(): fill 'forwards', opacity 0) and widened the whole DOCUMENT to 634 px for the rest of the visit — the swipe off Rewards then skipped #4 to the footer */
  --sh: min(calc(var(--vh) * .78), calc(790 * var(--u)));   /* the phone's screen height */
}
/* ONE THEME, WHITE (Rashid, 2026-10-04: "keep the white version as default … remove the one with the background. I don't need
   the option … we develop for one direction now only. Which is the white one"). The page's own white, dark copy, the DS
   .dvf.wire hairline phone in light grey ("keep the hairline phone wireframe design … not black fill … make it light gray").
   The red theme went with everything only it needed: the brand waves (.show-bg + vendor/ds-background.*), the light-first
   tide (.pre/.flood/.flooded, the ghost frame, the screen veil), the red cap, the red glow behind the phone. */
.show-stage { background: var(--ds-surface-page); --show-ink: var(--ds-text-default-hero); --show-body: var(--ds-text-default-body); }
.rig .dvf.wire { --dvf-wire: #C9C9CF; }   /* set ON the frame: device-frame.css defines --dvf-wire on .dvf.wire itself, so an ancestor's value never reached it */

/* the copy: left column, vertically centred; one benefit at a time. No kicker row above it (Rashid, 2026-10-04: "no need to
   do inside the app. The whole breadcrumb thing on the top"): the feature pill under the phone is the one navigator. The
   headline and its line are CENTRED ("center the text of the headlines. And the description"), phones and desktop. */
.show-copy { position: absolute; left: calc(var(--edge) + 120 * var(--u)); top: 50%; width: calc(520 * var(--u)); transform: translateY(-50%); z-index: 2; }
.fc { text-align: center; }
.fc h3, .fc p { text-wrap: balance; }   /* centred lines balance: no lone last word in the middle (desktop: 'glance', 'you.') */
/* desktop: the copy column is centred in the space between the page's edge and the phone (66% minus half its frame, a 48 px gap) */
@media (min-width: 761px) { .show-copy { left: var(--edge); right: auto; width: calc(66% - var(--edge) - var(--sh) * 201 / 874 - 12px - 48px); padding: 0 calc(24 * var(--u)); } .fcs { max-width: calc(560 * var(--u)); margin: 0 auto; } }
.fc h3 { margin: 0 0 calc(16 * var(--u)); font: 600 calc(64 * var(--u))/1.06 var(--f-head); letter-spacing: -.01em; color: var(--show-ink); }
.fc p { margin: 0 auto; max-width: calc(470 * var(--u)); font: 300 calc(26 * var(--u))/1.5 var(--f-head); color: var(--show-body); }

/* the phone: right of centre, a wireframe (DS .dvf.wire, light-grey hairline); dims while the coupon waits in front of it */
.rig {
  position: absolute; left: 66%; top: 50%; z-index: 1;
  transform: translate(-50%, -50%) translateY(var(--py, 0px));
  transition: opacity .5s;
}
.rig { opacity: .999; }   /* never exactly 1 (WebKit lays out when opacity crosses 1): the un-dim at a swipe's start ends ~0.5 s later, in the snap's tail */
.rig.dim { opacity: .35; }   /* no blur: a filter transition on a phone holding four iframes, at arrival and mid-swipe */
.rig .dvf { --dvf-h: var(--sh); }
.rig::before {   /* a faint shadow on the floor under the wireframe phone: a pre-blurred gradient (a filter on the phone re-rasterised it on every style change in Safari) */
  content: ''; position: absolute; left: 4%; right: 4%; bottom: -3.2%; height: 7%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(11,14,18,.12), rgba(11,14,18,.05) 55%, rgba(11,14,18,0));   /* faint: a line drawing barely casts one */
}
/* the screen: a 402x874 composition surface (the app's grabbed screens), scaled into the phone */
.scr { position: absolute; left: 0; top: 0; width: 402px; height: 874px; transform-origin: 0 0; overflow: hidden; background: var(--ds-surface-page); }
.scr.emb { background: transparent; visibility: hidden; pointer-events: none; }
.scr.emb.on { visibility: inherit; }   /* inherit, never visible: a hidden layer / away phone / off stage must hide its iframe too */
.emb-f { position: absolute; inset: 0; width: 402px; height: 874px; border: 0; display: block; visibility: hidden; background: transparent; }
.emb-f.on { visibility: inherit; }
.scr.emb.hold, .scr.emb.hold .emb-f { visibility: hidden; }   /* the big dish moment: Safari composites a WebGL iframe above its ancestors' opacity, so it is hidden outright */
/* THE APP, DRAWN (site.js MOMENTS): plain elements in the phone's 402x874 space */
.app { position: absolute; inset: 0; overflow: hidden; font: 400 15px/1.3 var(--f-para); color: #111; background: #fff; -webkit-font-smoothing: antialiased; }
.app b { font-family: var(--f-head); font-weight: 600; }
.app small { display: block; font-size: 12px; color: #8E8E93; }
.app img { display: block; max-width: none; }
.app .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #E6E6E6; color: #111; }
.app .ic svg { width: 16px; height: 16px; }
.app .ic.red { background: var(--red); box-shadow: none; color: #fff; }
.app .ripple { position: absolute; width: 90px; height: 90px; border-radius: 50%; background: rgba(255,255,255,.7); box-shadow: 0 0 0 2px rgba(255,255,255,.9); pointer-events: none; z-index: 5; }
/* Home */
.app.home { background: linear-gradient(170deg, #FF2A2F, #E0121A 55%, #B90C14); color: #fff; }
.home .h-head { position: absolute; left: 20px; top: 66px; display: flex; align-items: center; gap: 12px; }
.home .ava { width: 46px; height: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.home .ava img { width: 30px; height: auto; }
.home .h-head small { color: rgba(255,255,255,.78); font-size: 13px; }
.home .h-head b { font-size: 22px; }
.home .w { position: absolute; border-radius: 24px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); padding: 14px; display: flex; flex-direction: column; }
.home .w small { color: rgba(255,255,255,.8); }
.home .w-plan { left: 20px; top: 136px; width: 186px; height: 300px; background: linear-gradient(160deg, rgba(255,140,90,.5), rgba(255,255,255,.12)); justify-content: space-between; }
.home .w-row { display: flex; justify-content: space-between; align-items: center; }
.home .gold { font: 600 12px/1 var(--f-head); font-style: normal; color: #3a2a00; background: #FFD60A; border-radius: 99px; padding: 5px 9px; }
.home .plan { font: 300 30px/1 var(--f-head); } .home .plan em { font-style: normal; font-weight: 600; }
.home .ghost { display: grid; place-items: center; height: 40px; border-radius: 99px; background: rgba(255,255,255,.28); font: 600 14px var(--f-head); }
.home .ghost.sm { height: 32px; font-size: 13px; }
.home .w-days { left: 218px; top: 136px; width: 164px; height: 150px; gap: 8px; }
.home .w-days .ring { position: relative; width: 52px; height: 52px; }
.home .w-days svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.home .w-days circle { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 4; }
.home .w-days circle.arc { stroke: #fff; stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: 113.1; }
.home .w-days .n { position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; }
.home .w-days .w-t { position: absolute; left: 76px; top: 18px; } .home .w-t b { font-size: 15px; }
.home .w-days .ghost { margin-top: auto; }
.home .w-disc { left: 218px; top: 298px; width: 164px; height: 64px; justify-content: center; } .home .w-disc b { font-size: 18px; }
.home .w-cons { left: 218px; top: 372px; width: 164px; height: 64px; justify-content: center; } .home .w-cons b { font-size: 16px; }
.home .h-tray { position: absolute; left: 0; right: 0; top: 462px; bottom: 0; background: #fff; border-radius: 30px 30px 0 0; color: #111; padding: 20px 0 0 20px; }
.home .t-head { display: flex; align-items: baseline; gap: 8px; padding-right: 20px; } .home .t-head b { font-size: 20px; }
.home .t-head i { margin-left: auto; font: 600 13px/1 var(--f-head); font-style: normal; background: #F2F2F4; border-radius: 99px; padding: 8px 12px; }
.home .t-cards { display: flex; gap: 12px; margin-top: 16px; }
.home .tc { flex: 0 0 160px; height: 230px; border-radius: 22px; overflow: hidden; position: relative; background: #eee; }
.home .tc img { width: 100%; height: 100%; object-fit: cover; }
.home .tc b, .home .tc small { position: absolute; left: 12px; right: 12px; color: #fff; }
.home .tc b { bottom: 30px; font-size: 14px; line-height: 1.2; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.home .tc small { bottom: 12px; color: rgba(255,255,255,.85); }
.home .tc::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.home .tc b, .home .tc small { z-index: 1; }
.home .tabbar { position: absolute; left: 50%; bottom: 26px; width: 210px; height: 58px; transform: translate(-50%, 0); border-radius: 99px; background: rgba(40,30,25,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: flex; justify-content: space-around; align-items: center; }
.home .tabbar i { width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,.55); } .home .tabbar i.on { background: #fff; width: 46px; border-radius: 99px; }
/* the meal picker */
.app.pick { background: #F7F7F8; }
.pick .p-top { position: absolute; left: 16px; right: 16px; top: 58px; display: flex; align-items: center; justify-content: space-between; }
.pick .day { display: flex; flex-direction: column; align-items: center; width: 54px; padding: 6px 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #E6E6E6; }
.pick .day b { font-size: 18px; line-height: 1.1; } .pick .day i { width: 6px; height: 6px; border-radius: 50%; background: #20B05A; margin-top: 3px; }
.pick .p-sec { position: absolute; left: 16px; right: 16px; top: 128px; display: flex; justify-content: space-between; align-items: baseline; }
.pick .p-sec b { font-size: 20px; } .pick .cnt { font: 600 13px var(--f-head); font-style: normal; color: var(--red); }
.pick .p-grid { position: absolute; left: 16px; right: 16px; top: 166px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pick .pc { position: relative; height: 252px; border-radius: 22px; overflow: hidden; background: #ddd; transition: box-shadow .25s; }
.pick .pc img { width: 100%; height: 100%; object-fit: cover; }
.pick .pc::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.pick .pc::before { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--red); transition: box-shadow .25s; pointer-events: none; }
.pick .pc.on::before { box-shadow: inset 0 0 0 4px var(--red); }
.pick .pc.on { box-shadow: 0 12px 26px -12px rgba(237,28,36,.7); }
.pick .rate { position: absolute; left: 10px; top: 10px; z-index: 2; font: 600 13px var(--f-head); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.pick .chk { position: absolute; right: 10px; top: 10px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; transform: scale(0); }
.pick .chk svg { width: 15px; height: 15px; }
.pick .pc-t { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; color: #fff; }
.pick .pc-t b { display: block; font-size: 14px; line-height: 1.2; } .pick .pc-t small { color: rgba(255,255,255,.82); font-size: 11px; margin-top: 4px; }
.pick .gauge { position: absolute; left: 14px; right: 14px; bottom: 26px; height: 74px; border-radius: 26px; background: #2a1d1d; overflow: hidden; }
.pick .g-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #ED1C24, #FF6A3D 55%, #FFC21E); }
.pick .g-row { position: relative; display: flex; align-items: center; gap: 12px; height: 100%; padding: 0 12px 0 16px; color: #fff; }
.pick .g-row small { color: rgba(255,255,255,.75); font-size: 10px; } .pick .g-row b { font-size: 16px; } .pick .g-row em { font-style: normal; font-size: 10px; opacity: .75; }
.pick .next { margin-left: auto; padding: 10px 14px; border-radius: 99px; background: rgba(255,255,255,.22); font: 600 13px var(--f-head); transition: background .3s, color .3s; }
.pick .next.go { background: #FFD60A; color: #3a2a00; }
.pick .toast { position: absolute; left: 50%; top: 56px; transform: translate(-50%, -120%); opacity: 0; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 12px 18px 12px 12px; border-radius: 99px; background: #111; color: #fff; font: 600 14px var(--f-head); white-space: nowrap; box-shadow: 0 10px 30px -8px rgba(0,0,0,.4); }
.pick .toast span { width: 24px; height: 24px; border-radius: 50%; background: #20B05A; display: grid; place-items: center; } .pick .toast svg { width: 14px; height: 14px; }
/* Adjust Macros */
.app.macro { background: #9E1016; }   /* the sheet rises over a dimmed red ground */
.macro .m-sheet { position: absolute; left: 0; right: 0; top: 54px; bottom: 0; background: #fff; border-radius: 34px 34px 0 0; }
.macro .m-head { position: absolute; left: 16px; right: 16px; top: 14px; display: flex; align-items: center; justify-content: space-between; }
.macro .m-head b { font-size: 18px; } .macro .m-head i { font: 600 15px var(--f-head); font-style: normal; color: var(--red); }
.macro .m-plate { position: absolute; left: 71px; top: 82px; width: 260px; height: 260px; }
.macro .m-plate svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.macro .m-plate circle { fill: none; stroke-width: 9; stroke-linecap: round; } .macro .m-plate .trk { stroke: #F1F1F3; }
.macro .a-p { stroke: var(--red); } .macro .a-c { stroke: #FF8A3D; } .macro .a-f { stroke: #FFC21E; }
.macro .m-plate img { position: absolute; left: 58px; top: 58px; width: 144px; height: 144px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 6px #fff, 0 14px 30px -10px rgba(0,0,0,.35); }
.macro .m-name { position: absolute; left: 20px; right: 20px; top: 360px; text-align: center; } .macro .m-name b { font-size: 17px; }
.macro .m-steps { position: absolute; left: 20px; right: 20px; top: 430px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: center; }
.macro .m-steps small { color: #111; font: 600 14px var(--f-head); margin-bottom: 10px; }
.macro .sp { position: relative; display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 9px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px #ECECEE, 0 6px 16px -10px rgba(0,0,0,.25); overflow: hidden; }
.macro .sp b { font-size: 17px; }
.macro .sp i.mi, .macro .sp i.pl { position: relative; width: 30px; height: 30px; border-radius: 50%; background: #C7C7CC; }
.macro .sp i.pl { background: var(--red); }
.macro .sp i.mi::before, .macro .sp i.pl::before, .macro .sp i.pl::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2.4px; border-radius: 2px; background: #fff; transform: translate(-50%, -50%); }
.macro .sp i.pl::after { transform: translate(-50%, -50%) rotate(90deg); }
.macro .m-total { position: absolute; left: 20px; right: 20px; top: 556px; padding-top: 18px; border-top: 1px solid #EFEFF1; display: flex; justify-content: space-between; align-items: baseline; }
.macro .m-total > b { font-size: 20px; } .macro .m-total span { font: 600 13px var(--f-head); color: var(--red); } .macro .kd { font-size: 30px; color: var(--red); }
.macro .m-confirm { position: absolute; left: 20px; right: 20px; top: 630px; height: 56px; border-radius: 99px; background: var(--red); color: #fff; display: grid; place-items: center; font: 600 17px var(--f-head); }
/* Rewards */
.app.rew { background: #F4F4F6; }
.rew .r-head { position: absolute; left: 0; right: 0; top: 0; height: 270px; padding: 70px 22px 0; background: linear-gradient(170deg, #FF2A2F, #C80F17); color: #fff; border-radius: 0 0 32px 32px; }
.rew .r-head small { color: rgba(255,255,255,.8); font-size: 13px; } .rew .r-head b { display: block; font-size: 28px; margin-top: 4px; }
.rew .tiers { position: relative; margin-top: 34px; height: 46px; }
.rew .tiers::before, .rew .t-fill { content: ''; position: absolute; left: 12px; right: 12px; top: 8px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.3); }
.rew .t-fill { right: auto; width: 0; background: #FFD60A; max-width: calc(100% - 24px); }
.rew .tier { position: absolute; top: 0; transform: translateX(-50%); text-align: center; } .rew .tier i { display: block; width: 20px; height: 20px; margin: 0 auto 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
.rew .tier small { color: #fff; font: 600 11px var(--f-head); }
.rew .t0 { left: 12px; transform: none; } .rew .t1 { left: 37%; } .rew .t2 { left: 63%; } .rew .t2 i { background: #FFD60A; } .rew .t3 { right: 12px; left: auto; transform: none; } .rew .t3 i { opacity: .6; }
.rew .r-list { position: absolute; left: 18px; right: 18px; top: 296px; display: flex; flex-direction: column; gap: 12px; }
.rew .rc { position: relative; height: 96px; border-radius: 22px; background: #fff; padding: 16px 18px; box-shadow: 0 6px 18px -12px rgba(0,0,0,.3); transition: opacity .4s, filter .4s; }
.rew .rc b { display: block; font-size: 24px; margin-top: 2px; } .rew .rc i { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 600 13px var(--f-head); font-style: normal; color: #8E8E93; }
.rew .rc.hot { background: linear-gradient(120deg, #ED1C24, #FF5A36); color: #fff; } .rew .rc.hot small, .rew .rc.hot i { color: rgba(255,255,255,.85); }
.rew .rc.used { opacity: .35; filter: grayscale(1); }
.rew .r-done { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; padding: 30px 24px; border-radius: 32px 32px 0 0; background: #fff; box-shadow: 0 -16px 40px -20px rgba(0,0,0,.35); transform: translateY(110%); text-align: center; z-index: 4; }
.rew .r-done .tick { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: #20B05A; color: #fff; } .rew .r-done .tick svg { width: 32px; height: 32px; }
.rew .r-done b { display: block; font-size: 26px; } .rew .r-done small { margin-top: 6px; font-size: 14px; }
.rew .code { display: inline-block; min-width: 150px; min-height: 44px; margin-top: 22px; padding: 10px 18px; border-radius: 14px; border: 2px dashed var(--red); color: var(--red); font: 700 22px/1 var(--f-head); letter-spacing: .08em; }

/* Rewards: one light coupon in front of the phone, ripped by hand, then it flies into the app */
.coupon-stage {
  position: absolute; left: 66%; top: 50%; z-index: 3; width: min(calc(440 * var(--u)), 86vw);
  translate: -50% -50%; opacity: 0; scale: .92; pointer-events: none; visibility: hidden; will-change: opacity, scale, translate;   /* mounted once: a permanent layer */
  transition: opacity .5s, scale .8s var(--ease), translate .8s var(--ease), visibility 0s .5s;
}
.coupon-stage.on { visibility: visible; transition-delay: 0s; }
.coupon-stage.on { opacity: .999; scale: 1; pointer-events: auto; }   /* .999: on/gone/fly never cross 1 (a layout in WebKit) */
.coupon-stage.gone { opacity: 0 !important; visibility: hidden; pointer-events: none !important; transition: none; }   /* swiped away: gone at once (paint only) */
/* permanent layers for the idle loops: starting/ending a transform animation without one re-lays out the page */
.hero-box .body, .coupon-prompt span::after, .coupon-mount .dsc-stub { will-change: transform; }
.coupon-stage.fly { opacity: 0; scale: .4; translate: -50% -40%; pointer-events: none; transition: opacity .45s .1s, scale .6s cubic-bezier(.5,0,.2,1), translate .6s cubic-bezier(.5,0,.2,1); }
.coupon-mount { width: 100%; }
.coupon-prompt { margin: calc(20 * var(--u)) 0 0; text-align: center; font: 600 calc(19 * var(--u)) var(--f-head); color: var(--show-ink); transition: opacity .3s; }
.coupon-stage.done .coupon-prompt { opacity: 0; }
.coupon-prompt span::after { content: ' →'; display: inline-block; }
/* the arrow's nudge is a pure CSS loop (a timer toggling a class changed the stage mid-swipe) */
.coupon-stage.on .coupon-prompt span::after { animation: nudge-x 4.5s var(--ease) 2s infinite; }
@keyframes nudge-x { 0%, 78%, 100% { transform: none; } 84%, 94% { transform: translateX(8px); } 89% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .coupon-stage.on .coupon-prompt span::after { animation: none; } }

/* ── 7 · footer: one calm band — brand + line, our sites, the stores; the year underneath ── */
.foot {
  background: var(--ds-surface-default); border-top: 1px solid var(--ds-border-default);
  padding: calc(56 * var(--u)) var(--gut) calc(28 * var(--u));
  font: 400 var(--small)/1.5 var(--f-para); color: var(--ds-text-default-body);
}
.foot a { color: inherit; text-decoration: none; transition: color .15s; }
.foot a:hover { color: var(--red); }
.foot-main { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: calc(32 * var(--u)) calc(72 * var(--u)); }
.foot-brand { display: flex; flex-direction: column; gap: calc(16 * var(--u)); max-width: calc(340 * var(--u)); }
.foot-brand > img { width: calc(51 * var(--u)); height: calc(40 * var(--u)); }
.foot-brand p { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)) calc(36 * var(--u)); font-weight: 600; font-family: var(--f-head); font-size: calc(16 * var(--u)); color: var(--ds-text-default-heading, inherit); }
.foot-bottom { margin-top: calc(40 * var(--u)); padding-top: calc(20 * var(--u)); border-top: 1px solid var(--ds-border-default); font-size: calc(13 * var(--u)); opacity: .8; }
/* App Store / Google Play: black pills with the store's mark */
.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.store { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 14px; border-radius: 14px; background: #111317; color: #fff !important; text-decoration: none; transition: transform .15s, filter .15s; }
.store:hover { transform: translateY(-1px); filter: brightness(1.15); }
.store svg { width: 24px; height: 24px; flex: none; }
.store span { display: flex; flex-direction: column; font: 600 16px/1.1 var(--f-head); }
.store small { font: 400 10.5px/1.2 var(--f-para); opacity: .85; }
.rank-r .stores { margin-top: calc(32 * var(--u)); }
.web-join { display: inline-block; margin-top: calc(18 * var(--u)); font: 600 calc(17 * var(--u)) var(--f-head); color: var(--red); text-decoration: none; }
.web-join:hover { text-decoration: underline; }
/* header: a quiet "Join" (the web subscription) beside the Download pill */
.hlink { font: 600 var(--small) var(--f-para); color: var(--ds-text-default-heading, inherit); text-decoration: none; }
.hlink:hover { color: var(--red); }

/* ── phones: own layout, not a shrunken desktop. Every panel fits one screen, so the snap stays MANDATORY: one swipe
       lands on one section and a scroll-driven stage never rests half-told (verified in the iOS simulator, 2026-10-02). ── */
@media (max-width: 760px) {
  :root { --uf: calc(100vw / 402); --u: var(--uf); --uh: var(--uf); --edge: 0px; --gut: 20px; --small: 14px; --hsmall: 14px; }
  @supports (height: 100svh) { :root { --vh: 100svh; } }   /* --bleed: touch only (above); a narrow desktop window has no toolbar strip */
  .panel { height: var(--vh); min-height: 0; overflow: hidden; }   /* EXACTLY one screen (audit: the hero and metrics overflowed svh on most iPhones, and the box's ride was timed to svh) */
  .brandrow { padding: 14px var(--gut) 12px; align-items: center; }
  .brandrow > * { min-height: 0; }
  .brand { gap: 12px; align-items: center; }
  .logo { width: 40px; height: 28px; }
  .tag { font-size: 14px; line-height: 18px; width: 170px; }
  @media (max-width: 560px) { .tag { display: none; } }   /* the smile alone on phones: the tagline + KW | EN + the pill need ~440 px (the bar is 362 at 402) */
  .util { margin: 0; gap: 12px; }
  .icon-btn img, .explore img { width: 24px; height: 24px; }
  /* phones (Rashid, 2026-10-04): "let it say KW EN, and have the Kuwait flag next to KW in a circle" — the words stay
     for screen readers, the short form + flag show */
  .locale { gap: 7px; }
  .locale .sep { display: none; }   /* phones: 'KW EN' (Rashid 2026-10-04) */
  .lc { gap: 5px; }
  .lc-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lc-a { display: inline; }
  .flag { display: block; }
  .pill { height: 34px; padding: 0 16px; font-size: 14px; }
  .util .pill { height: 32px; padding: 0 14px; font-size: 13px; }   /* phones: the header's corner CTA, beside KW | EN */

  .hero { padding: clamp(84px, 14svh, 118px) var(--gut) 24px; display: flex; flex-direction: column; }   /* room for the box, the hero's hat (JS parks it above the counter) */
  /* phones (Rashid, 2026-09-29): the counter centred at the top, the globe centred at the bottom */
  .counter { position: relative; left: 0; top: 0; width: auto; order: 0; text-align: center; }
  .c-row { height: auto; padding: 0; margin: 0; justify-content: center; }
  /* the counter group 35% smaller than before (Rashid, 2026-10-02), the box sits on top of it */
  .g-m { font-size: min(13.5vw, 71px); }
  .g-k, .g-o { font-size: min(7.2vw, 39px); }
  .c-comma { font-size: min(7.2vw, 39px); }
  .c-title { font-size: min(4.8vw, 24px); line-height: 1.6; padding: 0 2px; }
  .c-sub { font-size: min(3vw, 13px); gap: 2px 10px; padding: 0 2px; white-space: normal; flex-wrap: wrap; justify-content: center; }
  .c-sub .bar { display: none; }
  .hero { padding-bottom: 0; }
  .globe {
    position: relative; order: 1; left: auto; right: auto; top: auto; margin: auto calc(-1 * var(--gut)) 0;
    width: calc(100% + 2 * var(--gut)); height: auto; aspect-ratio: auto; flex: 1 1 0; min-height: 0; transform: none;   /* takes what the screen leaves */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 88%, transparent 100%);
  }
  /* full-bleed on phones: the planet fills the hero behind the counter (no cropped limb), framed on the bottom
     box, and only its foot melts into the hero's ground (no hard cut at the panel's edge) */
  .globe-full {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 78%, transparent 100%);
  }
  .explore { position: absolute; order: 2; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); margin: 0; font-size: 14px; z-index: 2; }
  .hero-box { width: 115px; height: 115px; }

  .hero-h { font-size: 8.8vw; line-height: 1.2; }
  .kicker { font-size: 4.6vw; line-height: 1.6; }
  .lede { font-size: 4.6vw; line-height: 1.6; }
  .h2 { font-size: 8.4vw; line-height: 1.15; }
  .food-copy { padding: 0 var(--gut); }
  .food-copy .hero-h { font-size: 8.8vw; line-height: 1.2; max-width: none; }
  .food-copy .kicker { font-size: 4.2vw; }

  .food-copy::before { width: 130vw; height: 90vw; }
  .sat-panel { --u: var(--uf); }
  .sat { width: 100%; height: 92vw; }
  .sat-copy { width: 100%; top: 6vw; }
  .sat-ar { font-size: 8vw; line-height: 1.4; }
  .sat-num { height: 30vw; font-size: 34vw; line-height: 28vw; }
  .sat-num .pct { font-size: 11vw; }
  .sat-label { font-size: 6vw; line-height: 1.4; }
  .arch { left: 11vw; width: 78vw; height: 34.9vw; top: 51vw; }   /* Rashid 2026-10-04: narrower (11vw clear of each edge) and lower — its curve sits ~12vw under 'Satisfaction Rate' (was 96vw wide, nearly touching the label and the screen's edges) */
  .sat-panel, .metrics, .rank-panel { padding-top: calc(var(--bar-h) + 16px); }   /* the compact bar overlays the top: keep the content below it */
  .metrics { padding: calc(var(--bar-h) + 16px) var(--gut) 40px; }
  .metric-grid { width: auto; padding: 0; grid-template-columns: 1fr; gap: min(44px, 3.4svh); }   /* sized by height too: one screen on SE and Plus/Max */
  .metric .label { font-size: min(6vw, 3svh); line-height: 1.5; }
  .metric .value { font-size: min(9vw, 4.6svh); line-height: 1.3; }
  .metric .m-ic { width: min(11vw, 5.4svh); height: min(11vw, 5.4svh); margin-bottom: 2px; }
  @media (max-height: 700px) { .metrics { padding-bottom: 16px; } .metric-grid { gap: 20px; } }   /* short phones: still one screen */
  .rank-panel { padding: calc(var(--bar-h) + 16px) var(--gut) 64px; }
  .rank { grid-template-columns: 1fr; row-gap: 24px; text-align: center; justify-items: center; padding: 0; }
  .rank-n { font-size: 44vw; line-height: 40vw; height: auto; }
  .rank-n .hash { font-size: 19vw; }
  .rank-where { font-size: 6vw; line-height: 1.4; }
  .rank-r { padding-top: 0; }
  .rank-r .lede { width: auto; margin-top: 12px; }
  .foot { padding: calc(var(--bar-h) + 24px) var(--gut) calc(24px + env(safe-area-inset-bottom, 0px)); scroll-snap-align: start; }   /* top: clear of the compact bar (it hid the logo) */   /* phones: the footer is ~2 screens; stop at its top, then its end */
  .foot .foot-bottom { scroll-snap-align: end; }
  .foot-main { flex-direction: column; align-items: flex-start; gap: 24px; }
  .foot-links { flex-direction: column; font-size: 17px; gap: 14px; }
  .foot-bottom { margin-top: 28px; font-size: 13px; }
  .rank-r .stores { justify-content: center; margin-top: 22px; }
  .web-join { font-size: 16px; margin-top: 14px; }
  .hlink { display: none; }   /* phones: KW | EN + the pill fill the bar; Join lives in #4 and the footer */

  /* inside the app, phones: the copy on top (under the bar), the phone fitted below it (JS: fitRig) */
  .show-copy { left: var(--gut); right: var(--gut); width: auto; top: calc(var(--bar-h) + 18px); transform: none; }
  .fc h3 { font-size: clamp(24px, 7vw, 30px); margin-bottom: 6px; text-wrap: balance; }   /* one line at 375: a two-line headline squeezed the phone */
  .fc p { font-size: 15px; max-width: none; }
  .rig { left: 50%; }
  .coupon-stage { left: 50%; top: 62%; }
  .tuner { top: 64px; bottom: auto; left: 12px; right: 12px !important; width: auto; max-height: 42vh; overflow-y: auto; padding: 10px 12px; }
  .tuner .tn-hint { display: none; }
  .tuner label { margin: 2px 0; }   /* the globe sits at the bottom on phones */
}

/* ── the loader: the smile and a red line that fills as the pieces arrive; the page under it can't scroll ── */
body.loading { overflow: hidden; }
.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 26px; background: var(--ds-surface-page); transition: opacity .5s ease, visibility 0s .5s; }
.loader.done { opacity: 0; visibility: hidden; }
.ld-slot { width: 150px; height: 150px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-box.on-loader { z-index: 101; }   /* above the loader while it waits in the slot and jumps */
.hero-box .jump { position: absolute; inset: 0; transform-origin: 50% 50%; }
@keyframes ld-breathe { 50% { transform: scale(1.06); } }
.ld-bar { width: 160px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--red) 14%, transparent); overflow: hidden; }
.ld-bar i { display: block; width: 100%; height: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .35s ease; }

/* ── Every bite counted: the 3D dish on its own, big, before it settles back into the phone ── */
.plate-hero { position: absolute; left: 66%; top: 50%; z-index: 4; width: min(calc(var(--sh) * .78), 640px); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; visibility: hidden; transform-origin: 0 0; }   /* aspect set by site.js to the sheet plate's */
.phone-scrim { position: absolute; inset: 0; z-index: 8; background: rgba(11,14,18,.34); opacity: 0; pointer-events: none; will-change: opacity; }
.plate-hero { will-change: transform, opacity; opacity: .999; }   /* permanent layers: hiding the dish mid-swipe never creates or destroys one; .999 so 'off' (0) never crosses 1 (a layout in WebKit) */
.plate-hero.off, .phone-scrim.off { opacity: 0 !important; }   /* !important: outranks a paused fill:forwards animation */   /* the phone dims while the dish is out */
.plate-hero.on { visibility: visible; }
.plate-hero.off { visibility: hidden; }   /* gone = parked, not just transparent: macro-plate draws only while its canvas is visible (checkVisibility), so an opacity-0 dish swiped away mid-moment kept rendering WebGL every frame until the settle's bigOff */
.plate-hero canvas { width: 100% !important; height: 100% !important; }
.rig.away { opacity: 0; visibility: hidden; transform: translate(-50%, -50%) translateY(var(--py, 0px)) scale(.9); transition: opacity .45s ease, transform .6s var(--ease), visibility 0s .45s; }   /* visibility too: Safari didn't repaint the opacity on the layer holding the phone's iframe */
.rig { transition: opacity .5s ease, transform .6s var(--ease); will-change: opacity; }
/* THE WIDGETS ON THEIR OWN (site.js liftMoment): Home's ?lift=1 page over the stage, moved by transform from big to exactly the
   phone's screen; a permanent layer (paint only while a swipe ends); .999 / 0 never 1 */
.lift-f { position: absolute; left: 0; top: 0; z-index: 4; width: 402px; height: 874px; border: 0; background: transparent; transform-origin: 0 0;
  pointer-events: none; visibility: hidden; opacity: .999; will-change: transform, opacity; color-scheme: light; }
.lift-f.on { visibility: visible; }
.lift-f.off { opacity: 0 !important; }
@media (min-width: 761px) { .show-stage { --sh: min(calc((var(--vh) - var(--bar-h) - 102px) * .9), calc(740 * var(--u))); --rig-y: calc(50% + var(--bar-h) / 2 - 33px); } .rig { top: var(--rig-y); } }   /* short desktop windows: the phone clears the bar; room below it for the feature pill */
/* ── THE FEATURE PILL (Rashid, 2026-10-04: "a small navigator of the app features, pill shaped, under the phone … flip
   through features manually … while scrolling it flips on its own"). Four equal segments on a light-grey track; a red thumb
   slides with the scroll (site.js render(), the same interpolation as the push); the active label shows white through the
   thumb (a white copy of the labels inside it, sliding back as it moves). A tap glides to that feature and replays its moment.
   Composite only while scrolling (two transforms). ── */
.snav { position: absolute; z-index: 3; left: 50%; top: calc(var(--rig-y, 50%) + var(--py, 0px) + var(--sh) / 2 + 26px); translate: -50% 0;
  width: min(330px, 88vw); height: 40px; border-radius: 999px; touch-action: pan-y;
  background: none; box-shadow: inset 0 0 0 1px #BDBDC5;   /* Rashid 2026-10-04: "has a grey fill. Let's remove the fill and keep it just a hairline outline and make the text inside in black" — a 1 px line a touch darker than the phone's 1.5 px #C9C9CF, so the two read as one weight */
  opacity: .999; }
@media (min-width: 761px) { .snav { left: 66%; width: 340px; } }
.snav-row { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; }
.snav-b, .snav-hi span { display: grid; place-items: center; font: 600 clamp(11px, 3.3vw, 13px)/1 var(--f-head); white-space: nowrap; }   /* 'Rewards' fits the thumb at 320 px */
.snav-b { color: var(--show-ink, #0b0e12); border-radius: 999px; }   /* black ink; the active one shows white through the red thumb (.snav-hi) */
.snav-b:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.snav-thumb { position: absolute; left: 3px; top: 3px; bottom: 3px; width: calc(25% - 6px); border-radius: 999px; background: var(--red); box-shadow: 0 4px 12px -3px rgba(237,28,36,.5); pointer-events: none; will-change: transform; overflow: hidden; }   /* its rounded overflow is the window the white labels show through */
.snav-hi { color: #fff; pointer-events: none; will-change: transform; inset: auto; left: -3px; top: -3px; width: calc(400% + 24px); height: calc(100% + 6px); }   /* inside the thumb, the pill's own size and place; site.js slides it back by the thumb's travel (transforms only: the clip-path it replaced repainted the stage every push frame) */
@media (max-width: 760px) and (max-height: 640px) { .show-copy { top: calc(var(--bar-h) + 8px); } .fc p { font-size: 14px; line-height: 1.4; } }
@media (max-width: 760px) { .plate-hero { left: 50%; width: min(94vw, 460px); top: calc(50% + var(--py, 0px)); } }
/* THE PHONE FRAME ON PHONES = THE DESKTOP FRAME, SCALED (Rashid, 2026-10-04: "The phone frame looks a lot better on desktop… the
   roundedness is perfect on desktop. So let's match the phone frame for the mobile app showcase to the one on desktop").
   device-frame.css draws a FIXED 12 px bezel, 1.5 px lines and 4 px side buttons around radii that scale with the screen, so
   the smaller screen on phones (265 px wide on a 402 phone, 181 on an SE, vs 292 at 1512 x 860) wore a relatively heavier
   bezel and lines, and the corners no longer nested the same way. Here every part is the desktop's own proportion of the
   screen's width (12 / 1.5 / 4 px at 292 px); the radii already scale; the screen (--sh) is unchanged, so fitRig's room, the
   lift's dock and the dish's dock (both read the screen's rect live) are exactly as before. */
@media (max-width: 760px) {
  .rig .dvf { --dvf-bezel: calc(var(--dvf-w) * .04106); }
  .rig .dvf.wire { --dvf-wire-w: max(1px, calc(var(--dvf-w) * .005133)); }
  .rig .dvf.wire::before, .rig .dvf.wire::after { width: calc(var(--dvf-w) * .013687); }
  .rig .dvf.wire::before { left: calc(var(--dvf-w) * -.013687); }
  .rig .dvf.wire::after { right: calc(var(--dvf-w) * -.013687); }
}
/* the coupon's white card on the white page: an edge and a lift so it reads (static: never changes mid-swipe) */
.coupon-mount { filter: drop-shadow(0 0 .6px rgba(11,14,18,.3)) drop-shadow(0 14px 22px rgba(11,14,18,.12)); }