/* MamChef home page. Site-chrome tokens + their rgba() triplets; the app mock-ups (.phone-screen / .app-*, .order-card / .oc-*) and the
   hidden .sister-* block keep the app tokens (see site.css header). */

/* --chap: rounded overlap of each chapter onto the previous one (hidden part of the previous section's bottom padding).
   --sec-top / --sec-bot: VISIBLE space above the first and below the last content of a chapter (founder round 3: ~40-50 px on desktop). */
:root { --chap: clamp(24px, 4vw, 56px); --sec-top: clamp(28px, 12px + 2.4vw, 48px); --sec-bot: clamp(40px, 16px + 4vw, 72px); }

/* Chapters stack like cards: each overlaps the previous one with rounded top corners */
.story, .why, .origin, .cooks, .hood, .launch, .faq, .site-footer {
  position: relative; margin-top: calc(var(--chap) * -1); border-radius: var(--chap) var(--chap) 0 0;
}
.sec-head { max-width: 780px; }
.sec-head .lead { margin-top: 18px; }

/* ---------- Kicker pill (hero + launch) ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px;
  background: rgba(243, 217, 205, .1); border: 1px solid var(--hair-dark); color: var(--on-rust);
  font-family: var(--display); font-weight: 600; font-size: .9375rem; letter-spacing: .01em;
}
.kicker-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.kicker-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--gold); animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.4); opacity: .9; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

/* Gold highlight word with a hand-drawn gold underline (dark surfaces only) */
.hl { position: relative; color: var(--gold); white-space: nowrap; }
.hl::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -.12em; height: .22em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10C52 3 120 2 197 8' fill='none' stroke='%23eba743' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transform-origin: 0 50%; transform: scaleX(1); transition: transform 1s .6s var(--ease);
}
.js .rv:not(.in) .hl::after { transform: scaleX(0); }

/* ======================= HERO ======================= */
.hero {
  position: relative; isolation: isolate; overflow: hidden; z-index: 0;
  padding-top: calc(var(--hdr-h) + clamp(56px, 7vw, 88px)); padding-bottom: var(--chap);
  background: radial-gradient(70% 60% at 74% 30%, var(--rust-500) 0%, var(--rust-700) 46%, var(--ember) 100%);
}
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-floor {
  position: absolute; left: -30%; right: -30%; bottom: -6%; height: 58%; overflow: hidden;
  transform: perspective(560px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, var(--forest) 0%, transparent 80%); mask-image: linear-gradient(to top, var(--forest) 0%, transparent 80%);
}
.hero-floor::before {
  content: ""; position: absolute; inset: -72px 0 0;
  background-image: linear-gradient(rgba(243, 217, 205, .16) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(243, 217, 205, .16) 1.5px, transparent 1.5px);
  background-size: 72px 72px; animation: floor 5s linear infinite;
}
@keyframes floor { to { transform: translateY(72px); } }
.hero-glow {
  position: absolute; right: 2%; top: 4%; width: min(62vw, 900px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(217, 103, 76, .30), rgba(217, 103, 76, .08) 55%, rgba(217, 103, 76, 0));
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .65; transform: scale(.94); } }
.hero-hat { position: absolute; right: -4vw; top: calc(var(--hdr-h) + 10px); width: min(50vw, 720px); color: rgba(243, 217, 205, .16); --sw: 2.2; }
.js .hero-hat use { transition-duration: 2.6s; }

.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(24px, 4vw, 72px); align-items: center;
  min-height: min(760px, calc(100svh - var(--hdr-h) - 200px));
}
.hero h1 { margin-top: 24px; font-size: clamp(2.5rem, 1.6rem + 4.5vw, 5.5rem); line-height: .98; letter-spacing: -.035em; color: var(--white); }
.hero-sub { margin-top: 24px; max-width: 34em; color: var(--on-rust); font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: 9px; color: var(--white); font-family: var(--display); font-weight: 600; font-size: .9375rem; }
.chips svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgba(235, 167, 67, .18); color: var(--gold); }

/* Stage: arch window into the clay world + 3D phone + floating glass cards */
.hero-stage { position: relative; perspective: 1400px; }
.stage {
  --mx: 0; --my: 0;
  position: relative; width: min(100%, 580px); margin-left: auto; aspect-ratio: 580 / 640;
  transform-style: preserve-3d; transform: rotateY(calc(var(--mx) * 7deg)) rotateX(calc(var(--my) * -6deg));
  transition: transform .8s var(--ease);
}
.stage::before, .stage::after {
  content: ""; position: absolute; border: 1px solid rgba(243, 217, 205, .22); border-radius: 999px 999px 52px 52px;
  right: -16px; top: -16px; width: calc(76% + 32px); height: calc(86% + 32px); transform: translateZ(-70px);
}
.stage::after { right: -36px; top: -36px; width: calc(76% + 72px); height: calc(86% + 72px); border-color: rgba(243, 217, 205, .1); transform: translateZ(-110px); }
.arch {
  position: absolute; right: 0; top: 0; width: 76%; height: 86%; overflow: hidden; background: var(--ember-card);
  border-radius: 999px 999px 36px 36px; transform: translateZ(-40px);
  box-shadow: 0 50px 90px rgba(42, 19, 14, .6), 0 0 0 1px rgba(243, 217, 205, .3), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.arch picture, .arch img { width: 100%; height: 100%; }
.arch img, .arch video { object-fit: cover; object-position: 38% 72%; transform: scale(1.08) translate(calc(var(--mx) * -10px), calc(var(--my) * -8px)); transition: transform .8s var(--ease); }
.arch-video video, .sv-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.arch-video.is-playing video, .sv-video.is-playing video { opacity: 1; }
.arch-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(42, 19, 14, .6), rgba(42, 19, 14, 0) 42%); }

/* Phone (CSS 3D). Inner sizes scale with the phone via container units. */
.phone { position: absolute; container-type: inline-size; transform-style: preserve-3d; }
.phone--hero { left: 2%; bottom: 0; width: 47%; transform: translateZ(70px) rotateY(-16deg) rotateX(5deg) rotateZ(-3deg); }
.phone-body {
  position: relative; aspect-ratio: 9 / 19.2; padding: 3.2cqw; border-radius: 15cqw; transform-style: preserve-3d;
  background: linear-gradient(150deg, var(--ember-card), var(--ember) 62%);
  box-shadow: inset 0 0 0 1.5px rgba(243, 217, 205, .4), inset 0 0 0 4px var(--ember), 0 40px 70px rgba(42, 19, 14, .6), -24px 30px 50px rgba(42, 19, 14, .35);
  animation: float 7s ease-in-out infinite;
}
.phone-body::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ember); transform: translateZ(-14px); box-shadow: 0 0 0 1px rgba(243, 217, 205, .12); }
@keyframes float { 50% { translate: 0 -12px; } }
.phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 12cqw; background: var(--paper); color: var(--forest); font-size: 10px; font-size: 3.85cqw; line-height: 1.3; }
.island { position: absolute; z-index: 5; left: 50%; top: 2.4cqw; width: 28cqw; height: 7.6cqw; border-radius: 999px; background: var(--ember); transform: translateX(-50%); }
.phone-glare { position: absolute; inset: 3.2cqw; border-radius: 12cqw; overflow: hidden; pointer-events: none; }
.phone-glare::before {
  content: ""; position: absolute; inset: -20% -60%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .26) 49%, rgba(255, 255, 255, 0) 56%);
  transform: translateX(-60%); animation: sweep 7s ease-in-out infinite 1.5s;
}
@keyframes sweep { 0%, 55% { transform: translateX(-60%); } 85%, 100% { transform: translateX(60%); } }

/* App UI inside the phone (built from the app's own EN/LT strings; decorative, aria-hidden) */
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; opacity: 0; transition: opacity .6s var(--ease); }
.scr > * { flex-shrink: 0; }
.scr.is-on { opacity: 1; }
.scr svg { width: 1.6em; height: 1.6em; flex: none; }
.phone-screen b, .app-chips span, .app-tags i, .app-nav .on, .app-seg span, .app-allergen, .app-qty i, .app-sec, .app-badge, .app-oc-f, .app-oc-rate, .oc-price { font-family: var(--display); font-weight: 600; }
.app-top { padding: 4.4em 1.4em 1.5em; border-radius: 0 0 1.8em 1.8em; background: var(--forest); color: var(--white); }
.app-loc { display: flex; align-items: center; gap: .8em; }
.app-round { display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.app-loc-t { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.app-loc-t small { font-size: 1em; color: var(--mint); }
.app-loc-t b { font-size: 1.25em; }
.app-search { display: flex; align-items: center; gap: .8em; height: 3.7em; margin-top: 1.2em; padding: 0 1.2em; border-radius: 1.2em; background: var(--white); color: var(--deep); font-size: 1.02em; white-space: nowrap; overflow: hidden; }
.app-chips { display: flex; gap: .6em; padding: 1.2em 1.4em .3em; overflow: hidden; }
.app-chips span { flex: none; padding: .55em 1em; border-radius: 999px; border: 1px solid var(--mint); background: var(--white); color: var(--forest); font-size: 1.02em; font-weight: 700; white-space: nowrap; }
.app-chips .on { background: var(--forest); border-color: var(--forest); color: var(--white); }
.app-card { margin: 1em 1.4em 0; overflow: hidden; border-radius: 1.4em; background: var(--white); box-shadow: 0 .4em 1.2em rgba(15, 42, 34, .08); }
.app-img { position: relative; aspect-ratio: 16 / 8; }
.app-img picture, .app-img img { width: 100%; height: 100%; object-fit: cover; }
.app-heart { position: absolute; top: .8em; right: .8em; display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: 50%; background: var(--white); color: var(--rust); }
.app-heart svg { width: 1.5em; height: 1.5em; }
.app-meta { display: flex; flex-direction: column; gap: .5em; padding: .9em 1.1em 1.1em; }
.app-meta b { font-family: var(--display); font-size: 1.22em; color: var(--forest); }
.app-tags { display: flex; flex-wrap: wrap; gap: .4em; }
.app-tags i { padding: .3em .8em; border-radius: 999px; background: var(--mint); color: var(--forest); font-style: normal; font-size: .95em; font-weight: 700; white-space: nowrap; }
.app-nav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; align-items: flex-end; padding: .8em .5em 1.7em; background: var(--white); border-top: 1px solid var(--mint); }
.app-nav span { display: flex; flex-direction: column; align-items: center; gap: .2em; color: var(--deep); }
.app-nav small { font-size: .9em; }
.app-nav svg { width: 2em; height: 2em; }
.app-nav .on { color: var(--forest); font-weight: 700; }
.app-nav .app-fab { display: grid; place-items: center; width: 4.6em; height: 4.6em; margin-top: -2.6em; border-radius: 50%; background: var(--forest); color: var(--white); box-shadow: 0 0 0 .45em var(--paper); }
.app-nav .app-fab svg { width: 2.3em; height: 2.3em; }
.app-title { padding: 4.6em 1.4em .4em; font-family: var(--display); font-weight: 800; font-size: 1.7em; color: var(--forest); }
.scr-2 .app-title, .scr-3 .app-title { font-size: 1.7em; padding: 2.7em .82em .3em; }
.app-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .3em; margin: .8em 1.4em 0; padding: .3em; border-radius: 1.2em; background: var(--mint); }
.app-seg span { padding: .7em; border-radius: .9em; text-align: center; font-weight: 700; color: var(--forest); }
.app-seg .on { background: var(--white); box-shadow: 0 .2em .6em rgba(15, 42, 34, .1); }
.app-item { display: flex; align-items: center; gap: 1em; margin: .8em 1.4em 0; padding: .7em .8em; border-radius: 1.3em; background: var(--white); }
.app-item img { width: 5.4em; height: 5.4em; border-radius: .9em; object-fit: cover; }
.app-qty { display: flex; align-items: center; gap: .4em; }
.app-qty b { min-width: 1.1em; text-align: center; color: var(--forest); font-size: 1.1em; }
.app-it { flex: 1; min-width: 0; display: grid; gap: .3em; }
.app-it b { font-size: 1.2em; color: var(--forest); }
.app-it small { color: var(--deep); font-size: 1em; }
.app-qty i { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; border: 1px solid var(--mint); color: var(--forest); font-style: normal; font-weight: 700; }
.app-allergen { display: flex; align-items: center; gap: .6em; margin: .9em 1.4em 0; color: var(--forest); font-weight: 700; }
.app-allergen svg { color: var(--deep); }
.app-sum { display: grid; gap: .5em; margin: 1em 1.4em 0; padding: 1em 1.1em; border-radius: 1.2em; background: var(--white); }
.app-sum-h { color: var(--forest); font-size: 1.12em; }
.app-kv { display: flex; align-items: baseline; justify-content: space-between; gap: .6em; color: var(--deep); }
.app-kv b { color: var(--forest); }
.app-tot { padding-top: .5em; border-top: 1px solid var(--mint); color: var(--forest); font-size: 1.15em; }
.app-tot b { font-weight: 800; }
.app-note { display: flex; gap: .7em; margin: 1em 1.4em 0; padding: 1em; border-radius: 1.2em; background: var(--forest); color: var(--white); font-size: 1.02em; line-height: 1.35; }
.app-note svg { color: var(--gold); }
.app-pay { display: flex; align-items: center; justify-content: center; gap: .6em; margin: auto 1.4em 2.2em; padding: 1.15em; border-radius: 1.2em; background: var(--gold); color: var(--forest); font-family: var(--display); font-weight: 800; font-size: 1.15em; }
/* My Orders (user-app OrderCard + compact OrderStatusTracker; real labels, sample values) */
.app-sec { margin: .9em 1.4em 0; color: var(--deep); font-weight: 700; }
.app-oc { margin: .5em 1.4em 0; padding: 1em; border-radius: 1.3em; background: var(--white); color: var(--forest); box-shadow: 0 .4em 1.2em rgba(15, 42, 34, .08); }
.app-oc-h { display: flex; align-items: center; gap: .8em; }
.app-oc-logo { width: 3.8em; height: 3.8em; border-radius: .8em; object-fit: cover; flex: none; }
.app-oc-t { min-width: 0; display: grid; justify-items: start; gap: .35em; }
.app-oc-t b { max-width: 100%; overflow: hidden; font-size: 1.15em; white-space: nowrap; text-overflow: ellipsis; }
.app-badge { display: inline-flex; align-items: center; gap: .45em; padding: .25em .8em; border-radius: 999px; background: rgba(194, 225, 215, .6); color: var(--forest); font-size: .92em; white-space: nowrap; }
.app-badge::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--sage); }
.app-trk { display: flex; margin-top: 1em; }
.app-trk > span { position: relative; flex: 1; display: grid; justify-items: center; gap: .4em; color: var(--sage); }
.app-trk > span::before, .app-trk > span::after { content: ""; position: absolute; top: 1.3em; width: 50%; height: 2px; background: var(--mint); }
.app-trk > span::before { left: 0; }
.app-trk > span::after { right: 0; }
.app-trk > span:first-child::before, .app-trk > span:last-child::after { display: none; }
.app-trk .d::before, .app-trk .d::after, .app-trk .now::before { background: var(--forest); }
.app-trk i { position: relative; z-index: 1; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--mint); color: var(--sage); }
.scr .app-trk svg { width: 1.3em; height: 1.3em; }
.app-trk .d i { background: var(--forest); color: var(--white); }
.app-trk .now i { background: var(--sage); color: var(--white); box-shadow: 0 0 0 .35em rgba(82, 124, 112, .2); }
.app-trk small { font-size: .88em; line-height: 1.15; text-align: center; }
.app-trk .now small { color: var(--forest); font-family: var(--display); font-weight: 600; }
.app-oc-m { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-top: .9em; color: var(--sage); }
.app-oc-m > span { display: inline-flex; align-items: center; gap: .4em; min-width: 0; white-space: nowrap; }
.scr .app-oc-m svg { width: 1.2em; height: 1.2em; }
.app-oc-m b { color: var(--forest); font-size: 1.1em; }
.app-oc-f { margin-top: .8em; padding-top: .7em; border-top: 1px solid var(--paper); color: var(--sage); text-align: right; }
.app-oc-f::after { content: " \203A"; }
.app-oc-rate { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-top: .8em; padding: .7em .9em; border-radius: .9em; background: rgba(235, 167, 67, .2); color: var(--forest); }
.app-stars { display: flex; gap: .15em; color: var(--gold); fill: var(--gold); }
.scr .app-stars svg { width: 1.35em; height: 1.35em; }

/* Floating glass cards around the phone */
.float {
  position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 18px;
  background: rgba(255, 255, 255, .84); color: var(--ink); box-shadow: 0 18px 40px rgba(42, 19, 14, .35); /* same tint as before, no backdrop blur (r4) */
  border: 1px solid rgba(255, 255, 255, .6); white-space: nowrap; animation: drift 8s ease-in-out infinite;
}
.float b { display: block; font-family: var(--display); font-weight: 700; font-size: .9375rem; line-height: 1.2; }
.float small { display: block; color: var(--umber); font-size: .8125rem; }
.float-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--rust-100); color: var(--rust-700); flex: none; }
.float-ic svg { width: 19px; height: 19px; }
.float-ic.ok { background: var(--ok); color: var(--white); }
.float-a { left: 40%; top: 20%; transform: translateZ(130px); }
.float-b { left: -12%; top: 75%; transform: translateZ(140px); animation-duration: 9.5s; animation-delay: -3s; }
.float-c { right: 4%; bottom: 3%; transform: translateZ(100px); padding: 10px 16px; background: rgba(42, 19, 14, .8); color: var(--white); border-color: var(--hair-dark); animation-duration: 10s; animation-delay: -5s; }
.float-c .hat { width: 22px; color: var(--gold); }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* ---------- Trust strip (marquee; static wrapped list when motion is off) ---------- */
.trust {
  position: relative; margin-top: clamp(48px, 6vw, 80px); overflow: hidden;
  border-block: 1px solid var(--hair-dark); background: rgba(42, 19, 14, .5);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--forest) 8%, var(--forest) 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--forest) 8%, var(--forest) 92%, transparent);
}
.trust-track { display: flex; width: max-content; animation: marquee 80s linear infinite; } /* list + 3 clones: -50% = 2 lists, so 80s keeps the old speed */
.trust:hover .trust-track { animation-play-state: paused; }
.trust-list { display: flex; gap: 56px; padding: 22px 28px; list-style: none; }
.trust-list li { display: inline-flex; align-items: center; gap: 12px; color: var(--white); font-family: var(--display); font-weight: 600; font-size: 1.0625rem; white-space: nowrap; }
.trust-list svg { width: 20px; height: 20px; color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }
.motion-off .trust { -webkit-mask-image: none; mask-image: none; }
.motion-off .trust-track { width: auto; animation: none; justify-content: center; }
.motion-off .trust-clone { display: none; }
.motion-off .trust-list { flex-wrap: wrap; justify-content: center; gap: 14px 36px; }

/* ======================= HOW IT WORKS (sticky story) ======================= */
.story { z-index: 1; background: var(--cream); padding: var(--sec-top) 0 calc(var(--chap) + var(--sec-bot)); }
.story-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 88px); margin-top: clamp(32px, 4vw, 56px); }
.story-visual { position: sticky; top: calc(var(--hdr-h) + 36px); align-self: start; height: min(660px, calc(100vh - var(--hdr-h) - 72px)); perspective: 1400px; }
.story-frame { position: absolute; inset: 0 13% 7% 0; overflow: hidden; border-radius: var(--r3); background: var(--sand); box-shadow: var(--shadow-2); }
.sv, .sv-video { position: absolute; inset: 0; opacity: 0; transform: scale(1.07); transition: opacity .8s var(--ease), transform 1.4s var(--ease); }
.sv img { width: 100%; height: 100%; object-fit: cover; }
/* living-room still is shown mirrored (founder 2026-10-23); set on elements that carry no transform of their own */
.mirror-x { transform: scaleX(-1); }
.story[data-active="1"] .sv-1, .story[data-active="1"] .sv-video, .story[data-active="2"] .sv-2, .story[data-active="3"] .sv-3 { opacity: 1; transform: none; }
.story-ring { position: absolute; left: 18px; top: 18px; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-1); }
.story-ring svg { position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); transform: rotate(-90deg); }
.story-ring circle { fill: none; stroke: var(--line); stroke-width: 4; }
.story-ring .ring-fg { stroke: var(--rust-500); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: .667; transition: stroke-dashoffset .7s var(--ease); }
.story[data-active="2"] .ring-fg { stroke-dashoffset: .333; }
.story[data-active="3"] .ring-fg { stroke-dashoffset: 0; }
.ring-n b { display: none; font-family: var(--display); font-weight: 800; font-size: 1.375rem; color: var(--ink); }
.story[data-active="1"] .n1, .story[data-active="2"] .n2, .story[data-active="3"] .n3 { display: block; }
.phone--story { right: 0; bottom: 0; width: min(40%, 270px); transform: rotateY(-12deg) rotateZ(2deg); }
.phone--story .phone-body { animation-duration: 8s; }
.story[data-active="1"] .scr-1, .story[data-active="2"] .scr-2, .story[data-active="3"] .scr-3 { opacity: 1; }

.story-steps { list-style: none; }
.step { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 74vh; padding: 32px 0 32px 28px; }
.step::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--line); transition: background-color .5s; }
.step.is-active::before { background: var(--rust-500); }
.step-media { display: none; }
.step-n { font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 2rem + 3vw, 5rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--rust-400); transition: color .5s, -webkit-text-stroke-color .5s; }
.step.is-active .step-n { color: var(--rust-500); -webkit-text-stroke-color: var(--rust-500); }
.step h3 { margin-top: 14px; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 800; }
.step p { margin-top: 12px; max-width: 32em; color: var(--umber); font-size: 1.0625rem; }
.story-cta { display: flex; justify-content: center; margin-top: 24px; }

/* Stacked step cards (no pinned visual): ALWAYS below 1024 px, and on short screens or with motion off.
   The pinned scroll story only runs at >= 1024 px wide and >= 600 px high with motion on. */
@media (max-width: 1023px), (max-height: 599px) {
  .story-visual { display: none; }
  .story-grid { grid-template-columns: 1fr; gap: 0; }
  .story-steps { display: grid; gap: 20px; }
  .step { position: static; min-height: 0; justify-content: flex-start; padding: 0 0 26px; overflow: hidden; border-radius: var(--r3); background: var(--white); box-shadow: var(--shadow-1); }
  .step::before { display: none; }
  .step-media { display: block; overflow: hidden; aspect-ratio: 16 / 9; }
  .step-media img { width: 100%; height: 100%; object-fit: cover; }
  .step > .step-n, .step > h3, .step > p { padding-inline: 22px; }
  .step .step-n { margin-top: 20px; color: var(--rust-500); -webkit-text-stroke-color: var(--rust-500); font-size: 2.5rem; }
  .step h3 { margin-top: 8px; }
}
.motion-off .story-visual { display: none; }
.motion-off .story-grid { grid-template-columns: 1fr; gap: 0; }
.motion-off .story-steps { display: grid; gap: 20px; }
.motion-off .step { position: static; min-height: 0; justify-content: flex-start; padding: 0 0 26px; overflow: hidden; border-radius: var(--r3); background: var(--white); box-shadow: var(--shadow-1); }
.motion-off .step::before { display: none; }
.motion-off .step-media { display: block; overflow: hidden; aspect-ratio: 16 / 9; }
.motion-off .step-media img { width: 100%; height: 100%; object-fit: cover; }
.motion-off .step > .step-n, .motion-off .step > h3, .motion-off .step > p { padding-inline: 22px; }
.motion-off .step .step-n { margin-top: 20px; color: var(--rust-500); -webkit-text-stroke-color: var(--rust-500); font-size: 2.5rem; }
.motion-off .step h3 { margin-top: 8px; }
@media (min-width: 1024px) {
  .motion-off .story-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) and (max-height: 599px) {
  .story-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Tablets: image left, text right (.story prefix: must win over the .motion-off copy above) */
@media (min-width: 600px) and (max-width: 1023px) {
  .story .step { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 6px; align-items: start; padding: 0 28px 0 0; }
  .story .step-media { grid-row: 1 / 4; height: 100%; min-height: 230px; aspect-ratio: auto; }
  .story .step > .step-n, .story .step > h3, .story .step > p { grid-column: 2; }
  .story .step .step-n { margin-top: 28px; }
  .story .step > p { padding-bottom: 28px; }
}
/* Cards rise in as they enter (transform/opacity only; site.js adds .in via [data-inview]; motion off = shown at once) */
@media (max-width: 1023px) {
  html.js:not(.motion-off) .step { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  html.js:not(.motion-off) .step-media img { transform: scale(1.06); transition: transform 1.2s var(--ease); }
  html.js:not(.motion-off) .step.in { opacity: 1; transform: none; }
  html.js:not(.motion-off) .step.in .step-media img { transform: none; }
}

/* ======================= WHY (bento with spotlight) ======================= */
.why { z-index: 2; overflow: hidden; background: var(--forest); padding: var(--sec-top) 0 calc(var(--chap) + var(--sec-bot)); }
.why::before { content: ""; position: absolute; left: -20%; top: -30%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(44, 83, 70, .7), rgba(44, 83, 70, 0)); pointer-events: none; }
.why .wrap { position: relative; }
/* T-20261024-03: why = the forest band (mint text, gold accents, white icons in rust-600 tiles); cooks = neutral charcoal, gold accents */
.why .eyebrow, .cooks .eyebrow { color: var(--gold); }
.bento {
  display: grid; gap: 16px; margin-top: clamp(36px, 4vw, 56px);
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "a a b c" "a a d e" "g g g f";
}
.tile {
  --x: 50%; --y: 0%; --rx: 0deg; --ry: 0deg;
  position: relative; isolation: isolate; padding: 28px; border-radius: 26px; overflow: hidden;
  background: linear-gradient(160deg, rgba(194, 225, 215, .09), rgba(194, 225, 215, .025));
  border: 1px solid rgba(194, 225, 215, .16);
  transform: perspective(900px) rotateX(var(--ry)) rotateY(var(--rx));
  transition: transform .5s var(--ease), border-color .4s, opacity .8s var(--ease);
}
.tile::before, .tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; }
.tile::before { z-index: -1; background: radial-gradient(480px circle at var(--x) var(--y), rgba(235, 167, 67, .12), transparent 45%); }
.tile::after {
  padding: 1px; background: radial-gradient(300px circle at var(--x) var(--y), var(--gold), rgba(194, 225, 215, .3) 40%, transparent 70%);
  -webkit-mask: linear-gradient(var(--forest) 0 0) content-box, linear-gradient(var(--forest) 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(var(--forest) 0 0) content-box exclude, linear-gradient(var(--forest) 0 0);
}
.bento:hover .tile::before, .bento:hover .tile::after, .tile:focus-within::after { opacity: 1; }
.tile.is-tap { transform: translateY(-4px); }
.tile-ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: var(--rust-600); border: 1px solid var(--rust-400); color: var(--white); }
.tile-ic svg { width: 24px; height: 24px; }
.tile h3 { margin-top: 20px; color: var(--white); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 750; line-height: 1.15; }
.tile p { margin-top: 10px; color: var(--mint); font-size: 1rem; }
.tile p a { color: var(--gold); font-family: var(--display); font-weight: 600; text-underline-offset: 3px; }
.tile-a { grid-area: a; display: flex; flex-direction: column; padding: 0; }
.tile-b { grid-area: b; } .tile-c { grid-area: c; } .tile-d { grid-area: d; } .tile-e { grid-area: e; } .tile-f { grid-area: f; }
.tile-g { grid-area: g; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: center; }
.tile-art { position: relative; flex: 1; min-height: 240px; overflow: hidden; }
.tile-art picture, .tile-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 62%; transform: scale(1.35); transform-origin: 30% 62%; }
.tile-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--forest) 2%, rgba(21, 57, 47, 0) 55%); }
.tile-a .tile-body { position: relative; padding: 0 28px 28px; margin-top: -56px; }
.flow { position: relative; display: flex; justify-content: space-between; container-type: inline-size; padding: 6px 0; }
.flow::before { content: ""; position: absolute; left: 28px; right: 28px; top: 34px; height: 2px; background: linear-gradient(90deg, var(--gold), var(--rust-400)); opacity: .45; }
.flow-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 33%; text-align: center; }
.flow-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--forest); border: 1px solid rgba(194, 225, 215, .3); color: var(--white); }
.flow-step:nth-last-of-type(2) .flow-ic { background: var(--rust-500); border-color: var(--rust-400); color: var(--white); } /* 3rd step ("Charged"); :last-of-type never matched: the trailing .flow-dot span is the last span */
.flow-ic svg { width: 24px; height: 24px; }
.flow-step b { color: var(--white); font-family: var(--display); font-weight: 600; font-size: .9375rem; line-height: 1.25; }
.flow-dot { position: absolute; z-index: 2; left: calc(16.5% - 6px); top: 29px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px rgba(235, 167, 67, .25); animation: flowdot 4.8s var(--ease) infinite; }
@keyframes flowdot { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 75% { transform: translateX(67cqw); opacity: 1; } 90%, 100% { transform: translateX(67cqw); opacity: 0; } }
.motion-off .flow-dot { display: none; }

/* ======================= ORIGIN STORY ======================= */
.origin { z-index: 3; background: var(--cream); padding: var(--sec-top) 0 calc(var(--chap) + var(--sec-bot)); text-align: center; }
.origin .divider { margin-bottom: 26px; }
.origin .divider svg { width: 36px; color: var(--rust-500); }
.quote { max-width: 21ch; margin: 22px auto 0; font-size: clamp(2rem, 1.2rem + 3.4vw, 4.25rem); font-weight: 800; line-height: 1.07; letter-spacing: -.03em; color: var(--ink); }
.quote mark { color: inherit; background: linear-gradient(transparent 60%, rgba(235, 167, 67, .35) 60%, rgba(235, 167, 67, .35) 94%, transparent 94%); padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.origin-text { display: grid; gap: 14px; max-width: 640px; margin: 30px auto 0; color: var(--umber); font-size: 1.125rem; }

/* ======================= FOR HOME COOKS ======================= */
.cooks { z-index: 4; overflow: hidden; background: var(--char); padding: var(--sec-top) 0 calc(var(--chap) + var(--sec-bot)); }
.cooks::before { content: ""; position: absolute; right: -15%; top: 5%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(235, 167, 67, .16), rgba(235, 167, 67, 0)); pointer-events: none; }
.cooks-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 88px); align-items: center; }
.cooks .lead { margin-top: 20px; }
.cooks .hl { color: var(--gold); }
.cooks .hl::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10C52 3 120 2 197 8' fill='none' stroke='%23eba743' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cooks-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 34px; }
.fine { color: var(--blush-dim); font-size: .9375rem; }
/* "Become a chef" in cooks = the band's one filled rust object: rust-500 fill (hover 600, active 700), white label + white hat
   (gold on rust-500 is 2.70:1); ring + sweep kept */
.cooks .btn-chef::after { background: linear-gradient(110deg, rgba(243, 217, 205, 0) 35%, rgba(243, 217, 205, .2) 50%, rgba(243, 217, 205, 0) 65%) no-repeat -150% 0 / 60% 100%, var(--rust-500); }
.cooks .btn-chef:hover::after { background-color: var(--rust-600); background-position: 250% 0; }
.cooks .btn-chef:active::after { background-color: var(--rust-700); }
.cooks .btn-chef .hat { color: var(--white); }
.cooks-art { position: relative; padding: 0 0 0 8%; }
.cooks-frame { position: relative; aspect-ratio: 4 / 4.6; max-width: 500px; margin-left: auto; overflow: hidden; border-radius: 999px 999px 32px 32px; box-shadow: 0 50px 90px rgba(42, 19, 14, .7), 0 0 0 1px rgba(243, 217, 205, .25); }
.cooks-frame picture, .cooks-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.order-card {
  position: absolute; left: 0; bottom: 12%; display: grid; gap: 12px; width: min(250px, 62%); padding: 16px;
  border-radius: 20px; background: var(--white); color: var(--forest); box-shadow: 0 24px 50px rgba(42, 19, 14, .55); animation: drift 8s ease-in-out infinite;
}
.oc-top { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 700; }
.oc-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--rust); }
.oc-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--rust); animation: ping 2s var(--ease) infinite; }
.oc-dish { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px; background: rgba(194, 225, 215, .35); }
.oc-dish img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; mix-blend-mode: multiply; flex: none; }
.oc-dish-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.oc-dish b { font-family: var(--display); font-weight: 700; font-size: .9375rem; line-height: 1.2; }
.oc-price { color: var(--deep); font-size: .875rem; white-space: nowrap; }
.oc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.oc-btns i { padding: 9px 6px; border-radius: 12px; border: 1px solid var(--mint); text-align: center; font-style: normal; font-family: var(--display); font-weight: 600; font-size: .875rem; }
.oc-btns .ok { background: var(--forest); border-color: var(--forest); color: var(--white); }
.payout-card {
  position: absolute; right: -2%; top: 8%; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px;
  border-radius: 18px; background: var(--char-card); border: 1px solid var(--hair-dark); box-shadow: 0 24px 50px rgba(42, 19, 14, .5);
  animation: drift 9s ease-in-out infinite -4s;
}
.payout-card .hat { width: 30px; color: var(--gold); }
.payout-card b { display: block; color: var(--white); font-family: var(--display); font-weight: 700; font-size: .9375rem; }
.payout-card small { display: block; color: var(--blush); font-size: .8125rem; }
.rail { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 0; list-style: none; }
.rail::before { content: ""; position: absolute; left: 24px; right: 24px; top: 24px; height: 2px; background: linear-gradient(90deg, var(--gold), rgba(243, 217, 205, .25)); transform-origin: 0 50%; transition: transform 1.6s var(--ease); }
.js .rail:not(.in)::before { transform: scaleX(0); }
.rail li { position: relative; padding-right: 8px; }
.rail-n { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--char-card); border: 1px solid rgba(235, 167, 67, .55); color: var(--gold); font-family: var(--display); font-weight: 800; font-size: 1.125rem; }
.rail h3 { margin-top: 18px; color: var(--white); font-size: 1.3rem; font-weight: 750; }
.rail p { margin-top: 8px; color: var(--blush); font-size: 1rem; }

/* ======================= NEIGHBOURHOOD MAP ======================= */
.hood { z-index: 5; overflow: hidden; background: var(--cream); padding: var(--sec-top) 0 calc(var(--chap) + var(--sec-bot)); }
.hood-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.hood .lead { margin-top: 20px; }
.hood .btn { margin-top: 32px; white-space: normal; text-align: left; min-height: 52px; padding: 12px 22px; }
.map { perspective: 1500px; padding: 40px 0 10px; }
/* side-by-side layout: the tilted plane is drawn shorter than its box; pull the empty box edges in so the visible top gap matches the other chapters */
@media (min-width: 900px) { .map { padding: 0; margin-top: -44px; } }
.map-plane {
  position: relative; aspect-ratio: 4 / 3; border-radius: 30px; transform-style: preserve-3d;
  transform: rotateX(40deg) rotateZ(-9deg); box-shadow: 0 70px 80px -30px rgba(15, 42, 34, .5), 0 0 0 1px rgba(21, 57, 47, .1);
  transition: transform 1.6s var(--ease);
}
.js .map:not(.in) .map-plane { transform: rotateX(56deg) rotateZ(-16deg) scale(.92); }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 30px; }
.radius { position: absolute; inset: 0; overflow: hidden; border-radius: 30px; }
.radius i { position: absolute; left: 48%; top: 52%; width: 72%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(194, 225, 215, .5); background: radial-gradient(closest-side, rgba(194, 225, 215, 0) 60%, rgba(194, 225, 215, .14)); transform: translate(-50%, -50%) scale(.15); opacity: 0; animation: radar 5s ease-out infinite; }
.radius i + i { animation-delay: 2.5s; }
@keyframes radar { 0% { transform: translate(-50%, -50%) scale(.15); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.motion-off .radius i { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(.75); }
.motion-off .radius i + i { transform: translate(-50%, -50%) scale(.45); }
.you { position: absolute; left: 48%; top: 52%; width: 22px; height: 22px; border-radius: 50%; background: var(--white); border: 5px solid var(--mint); box-shadow: 0 0 0 8px rgba(255, 255, 255, .18); transform: translate(-50%, -50%); }
.pin, .pin-card { position: absolute; transform-origin: 50% 100%; transform: translate(-50%, -100%) rotateZ(9deg) rotateX(-40deg); }
.pin { width: 46px; height: 58px; display: grid; justify-items: center; }
.pin::before { content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 46px; border-radius: 50% 50% 50% 6px; background: var(--gold); transform: rotate(-45deg); box-shadow: 0 10px 18px rgba(15, 42, 34, .35); }
.pin .hat { position: relative; width: 24px; margin-top: 10px; color: var(--forest); }
.pin-rust::before { background: var(--rust); }
.pin-rust .hat { color: var(--white); }
.pin::after { content: ""; position: absolute; bottom: -4px; left: 50%; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; border: 2px solid var(--gold); transform: rotateX(70deg); animation: ping 2.6s var(--ease) infinite; opacity: .8; }
.pin-rust::after { border-color: var(--rust-lt); }
.pin-1 { left: 24%; top: 32%; } .pin-2 { left: 72%; top: 24%; } .pin-3 { left: 66%; top: 70%; } .pin-4 { left: 17%; top: 74%; }
.pin-2::after, .pin-4::after { animation-delay: -1.3s; }
.pin-card { display: grid; gap: 6px; padding: 10px 14px; border-radius: 14px; background: var(--white); box-shadow: 0 16px 30px rgba(15, 42, 34, .35); white-space: nowrap; }
.pin-card b { font-family: var(--display); font-weight: 700; font-size: .875rem; color: var(--forest); }
.pin-card .app-tags { font-size: 11px; }
.pc-1 { left: 24%; top: 16%; }
.pc-2 { left: 66%; top: 54%; }

/* ======================= LAUNCH / GET THE APP ======================= */
.launch { z-index: 6; background: radial-gradient(80% 90% at 12% 0%, var(--rust-500), var(--rust-700) 55%, var(--ember)); padding: var(--sec-top) 0 calc(var(--chap) + var(--sec-bot)); overflow: hidden; }
.launch::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(243, 217, 205, .12) 1.2px, transparent 1.2px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(70% 70% at 80% 40%, var(--forest), transparent); mask-image: radial-gradient(70% 70% at 80% 40%, var(--forest), transparent); pointer-events: none; }
.get-head { max-width: 760px; }
.get-head .h2 { margin-top: 18px; }
.get-head .lead { margin-top: 16px; color: var(--on-rust); }
.get-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(32px, 4vw, 48px); }
/* Ticket cards: main part + QR stub below a perforation (side notches sit at the perforation: stub height is fixed) */
.get-card {
  --stub: 188px;
  position: relative; display: grid; grid-template-rows: 1fr var(--stub); border-radius: 32px;
  background: linear-gradient(135deg, rgba(243, 217, 205, .1), rgba(243, 217, 205, .02)), var(--ember); border: 1px solid rgba(243, 217, 205, .24); box-shadow: 0 50px 100px rgba(42, 19, 14, .5);
  -webkit-mask: radial-gradient(circle 18px at 0 calc(100% - var(--stub)), transparent 17px, var(--forest) 18px) left / 51% 100% no-repeat, radial-gradient(circle 18px at 100% calc(100% - var(--stub)), transparent 17px, var(--forest) 18px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 18px at 0 calc(100% - var(--stub)), transparent 17px, var(--forest) 18px) left / 51% 100% no-repeat, radial-gradient(circle 18px at 100% calc(100% - var(--stub)), transparent 17px, var(--forest) 18px) right / 51% 100% no-repeat;
}
.get-main { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(26px, 3.6vw, 48px); }
.get-card h3 { font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.25rem); font-weight: 800; color: var(--white); }
.get-line { margin-top: 10px; color: var(--blush); font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); }
.store-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.store { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 20px 8px 14px; border-radius: 16px; background: var(--ember); border: 1px solid rgba(243, 217, 205, .3); color: var(--white); text-decoration: none; transition: transform .4s var(--ease), border-color .3s; }
.store:hover { transform: translateY(-2px); border-color: var(--gold); }
.store svg { width: 26px; height: 26px; }
.store small { display: block; color: var(--blush); font-size: .75rem; line-height: 1.2; }
.store b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.0625rem; line-height: 1.15; }
.get-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: auto; padding-top: 18px; color: var(--gold); font-family: var(--display); font-weight: 600; text-underline-offset: 4px; }
.get-link svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.get-link:hover svg { transform: translateX(3px); }
.get-stub { display: flex; align-items: center; gap: 22px; padding: 0 clamp(26px, 3.6vw, 48px); border-top: 2px dashed rgba(243, 217, 205, .3); }
.qr { position: relative; flex: none; width: 140px; padding: 10px; border-radius: 18px; background: var(--white); box-shadow: 0 16px 32px rgba(42, 19, 14, .45), 0 0 0 5px rgba(217, 103, 76, .3); overflow: hidden; }
.qr svg { width: 100%; height: auto; shape-rendering: crispEdges; }
.qr::after { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 3px; border-radius: 3px; background: var(--rust-500); opacity: .55; animation: scan 3.2s ease-in-out infinite; }
@keyframes scan { 50% { transform: translateY(124px); } }
.motion-off .qr::after { display: none; }
.qr-txt { display: grid; gap: 6px; }
.qr-cap { color: var(--white); font-family: var(--display); font-weight: 650; font-size: 1.0625rem; line-height: 1.25; }
.qr-txt small { color: var(--blush); font-size: .875rem; line-height: 1.35; }
/* Phones: only this platform's store badge, no QR (a phone cannot scan its own screen) */
.os-ios .store-gp, .os-android .store-as, .os-ios .get-stub, .os-android .get-stub { display: none; }
.os-ios .get-card, .os-android .get-card { grid-template-rows: 1fr; -webkit-mask: none; mask: none; }
.get-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 28px; color: var(--on-rust); font-size: .9375rem; }
/* on the open band (rust gradient): white text, white arrow (gold on rust-500 is 2.70:1) */
.partners { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--white); font-family: var(--display); font-weight: 600; text-underline-offset: 4px; }
.partners svg { width: 18px; height: 18px; color: var(--white); transition: transform .4s var(--ease); }
.partners:hover svg { transform: translateX(3px); }

/* ======================= FAQ ======================= */
.faq { z-index: 7; background: var(--cream); padding: var(--sec-top) 0 clamp(64px, 8vw, 96px); }
.faq-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 88px); }
.faq-head { position: sticky; top: calc(var(--hdr-h) + 48px); align-self: start; }
.faq-head .lead { margin-top: 18px; }
.faq-head .lead a, .support-note a { color: var(--rust-600); font-family: var(--display); font-weight: 600; text-underline-offset: 3px; }
.faq-group + .faq-group { margin-top: 48px; }
.faq-group h3 { margin-bottom: 8px; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--umber); }
.faq details { border-bottom: 1px solid rgba(21, 57, 47, .14); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 16px 0;
  list-style: none; cursor: pointer; font-family: var(--display); font-weight: 650; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.25; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(var(--rust-500), var(--rust-500)) center / 14px 2px no-repeat, linear-gradient(var(--rust-500), var(--rust-500)) center / 2px 14px no-repeat, var(--white);
  box-shadow: 0 0 0 1px var(--line); transition: transform .45s var(--ease), background-color .3s;
}
.faq summary:hover::after { box-shadow: 0 0 0 1px var(--rust-500); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { padding: 0 58px 24px 0; color: var(--umber); }
.faq details[open] p { animation: faq-in .5s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }
.faq-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 20px; color: var(--rust-600); font-family: var(--display); font-weight: 600; text-underline-offset: 4px; }
.faq-more svg { width: 18px; height: 18px; }
.faq-head .lead a:hover, .support-note a:hover, .faq-more:hover, .support-item dd a:hover { color: var(--rust-700); }

/* ======================= SUPPORT ======================= */
.support-section { position: relative; z-index: 7; background: var(--cream); padding: 0 0 36px; }
.support-card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 32px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.support-intro { margin-top: 16px; color: var(--umber); }
.support-note { margin-top: 14px; color: var(--umber); font-size: .9375rem; }
.support-grid { display: grid; gap: 12px; }
.support-item { padding: 18px 20px; border-radius: 18px; background: var(--cream); border: 1px solid var(--line); }
.support-item dt { font-size: .8125rem; font-family: var(--display); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--umber); }
.support-item dd { margin-top: 4px; font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--ink); overflow-wrap: anywhere; }
.support-item dd a { color: var(--rust-600); text-underline-offset: 3px; }

/* ---------- BizzChef sister block (markup kept verbatim, hidden) ---------- */
.sister-section { position: relative; z-index: 7; background: var(--paper); color: var(--forest); padding: 0 var(--gut) calc(var(--chap) + clamp(72px, 9vw, 120px)); }
.sister-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; max-width: var(--wrap); margin: 0 auto; padding: 28px 32px; border-radius: 24px; background: var(--white); border: 1px solid var(--mint); }
.sister-card h3 { font-size: 1.375rem; }
.sister-card p { margin-top: 6px; color: var(--deep); }
.sister-card .btn-secondary { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--forest); color: var(--forest); font-weight: 700; text-decoration: none; }
.sister-card .btn-secondary:hover { background: var(--forest); color: var(--white); }
.sister-card .ext { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


.site-footer { z-index: 8; }

/* ======================= RESPONSIVE ======================= */
@media (max-width: 1199px) {
  .float-a { left: 40%; transform: translateZ(130px); }
  /* "Ready for Pickup" stays in front of the phone (phone's nearest corner is ~130px deep); scale(.9) cancels the perspective growth */
  .float-b { left: -2%; top: 69%; transform: translateZ(150px) scale(.9); }
  .float-c { transform: translateZ(60px); }
}
@media (max-width: 1099px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a a" "b c" "d e" "g g" "f f"; }
  .tile-a .tile-art { min-height: 260px; }
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .rail::before { display: none; }
}
@media (max-width: 899px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 48px; }
  .stage { margin: 0 auto; width: min(100%, 470px); }
  .hero-hat { width: 90vw; right: -30vw; top: auto; bottom: 18%; }
  .cooks-inner, .hood-inner { grid-template-columns: 1fr; }
  .cooks-art { padding: 0; max-width: 480px; margin: 0 auto; width: 100%; }
  .faq-inner { grid-template-columns: 1fr; }
  .faq-head { position: static; }
  .get-grid { grid-template-columns: minmax(0, 1fr); }
  .support-card { grid-template-columns: 1fr; }
  .tile-g { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .hero { padding-top: calc(var(--hdr-h) + 44px); }
  .hero-ctas .btn { flex: 1 1 100%; }
  .chips { gap: 10px 16px; }
  .float { padding: 8px 12px 8px 8px; border-radius: 14px; gap: 8px; white-space: normal; max-width: min(58%, 230px); }
  .float b { font-size: .8125rem; }
  .float small { font-size: .75rem; }
  .float-ic { width: 30px; height: 30px; border-radius: 9px; }
  .float-a { left: 40%; top: 16%; transform: translateZ(130px); }
  .float-b { left: 3%; top: 68%; max-width: min(74%, 270px); transform: translateZ(150px) scale(.9); }
  .float-c { right: 0; bottom: 0; transform: translateZ(24px); }
  .trust-list { gap: 40px; padding: 18px 20px; }
  .trust-list li { font-size: 1rem; }
  .bento { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e" "g" "f"; }
  .tile { padding: 24px; }
  .tile-a .tile-body { padding: 0 24px 24px; }
  .rail { grid-template-columns: 1fr; row-gap: 28px; }
  .rail li { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; }
  .rail li h3 { margin-top: 10px; }
  .rail li p { grid-column: 2; }
  .order-card { width: 66%; bottom: 6%; }
  .payout-card { right: 0; top: 4%; }
  .map { padding-top: 24px; }
  .map-plane { transform: rotateX(34deg) rotateZ(-7deg); }
  .pin { width: 36px; height: 46px; }
  .pin::before { width: 36px; height: 36px; }
  .pin .hat { width: 19px; margin-top: 8px; }
  .pin-card { padding: 8px 10px; }
  .pin-card b { font-size: .75rem; }
  .pin-card .app-tags { font-size: 9.5px; }
  .faq details p { padding-right: 0; }
  .get-card { --stub: 172px; }
  .get-stub { gap: 16px; }
  .qr { width: 124px; padding: 8px; }
  @keyframes scan { 50% { transform: translateY(110px); } }
}
@media (min-width: 1600px) {
  .stage { width: min(100%, 640px); }
}

/* T-20261023-07 r5: phones (≤ 899 px or touch) get every shadow at 70% (offset, blur, spread × 0.7, whole px;
   em sizes × 0.7 to 2 decimals); colours unchanged, desktop untouched. var(--shadow-1/2) users scale via site.css. */
@media (max-width: 899px), (pointer: coarse) {
  .arch { box-shadow: 0 35px 63px rgba(42, 19, 14, .6), 0 0 0 1px rgba(243, 217, 205, .3), inset 0 0 0 1px rgba(255, 255, 255, .1); }
  .phone-body { box-shadow: inset 0 0 0 1px rgba(243, 217, 205, .4), inset 0 0 0 3px var(--ember), 0 28px 49px rgba(42, 19, 14, .6), -17px 21px 35px rgba(42, 19, 14, .35); }
  .phone-body::before { box-shadow: 0 0 0 1px rgba(243, 217, 205, .12); }
  .app-card { box-shadow: 0 .28em .84em rgba(15, 42, 34, .08); }
  .app-nav .app-fab { box-shadow: 0 0 0 .32em var(--paper); }
  .app-seg .on { box-shadow: 0 .14em .42em rgba(15, 42, 34, .1); }
  .app-oc { box-shadow: 0 .28em .84em rgba(15, 42, 34, .08); }
  .app-trk .now i { box-shadow: 0 0 0 .25em rgba(82, 124, 112, .2); }
  .float { box-shadow: 0 13px 28px rgba(42, 19, 14, .35); }
  .flow-dot { box-shadow: 0 0 0 4px rgba(235, 167, 67, .25); }
  .cooks-frame { box-shadow: 0 35px 63px rgba(42, 19, 14, .7), 0 0 0 1px rgba(243, 217, 205, .25); }
  .order-card { box-shadow: 0 17px 35px rgba(42, 19, 14, .55); }
  .payout-card { box-shadow: 0 17px 35px rgba(42, 19, 14, .5); }
  .map-plane { box-shadow: 0 49px 56px -21px rgba(15, 42, 34, .5), 0 0 0 1px rgba(21, 57, 47, .1); }
  .you { box-shadow: 0 0 0 6px rgba(255, 255, 255, .18); }
  .pin::before { box-shadow: 0 7px 13px rgba(15, 42, 34, .35); }
  .pin-card { box-shadow: 0 11px 21px rgba(15, 42, 34, .35); }
  .get-card { box-shadow: 0 35px 70px rgba(42, 19, 14, .5); }
  .qr { box-shadow: 0 11px 22px rgba(42, 19, 14, .45), 0 0 0 4px rgba(217, 103, 76, .3); }
  .faq summary::after { box-shadow: 0 0 0 1px var(--line); }
  .faq summary:hover::after { box-shadow: 0 0 0 1px var(--rust-500); }
}