/* Ommi Bayya webapp v2 — brand tokens from Brand Guidelines v1.2 */
:root {
  --blue:#26509C; --red:#D3271F; --saffron:#F7D13B; --cream:#F5E9CF; --rose:#EF8DB4;
  --teal:#1AA8A8; --orange:#F06A22; --olive:#1F8A4A; --ink:#13224A; --paper:#FFFDF4; --mist:#C9D3EC;
  --soft:#3B4E7E;
  --display:"Grandstander","Comic Sans MS",system-ui,sans-serif;
  --body:"Karla","Segoe UI",system-ui,sans-serif;
  --arabic:"Lalezar","Noto Kufi Arabic",sans-serif;
  --grain:url("/img/grain.png");
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --gutter:20px;
  color-scheme:light;
}
*, *::before, *::after { box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; overflow-x:clip; touch-action:manipulation; overscroll-behavior-x:none }
body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.5; overflow-x:hidden; overflow-x:clip; width:100%; position:relative; -webkit-tap-highlight-color:transparent }
img, svg { display:block; max-width:100% }
button { font:inherit; color:inherit; cursor:pointer }
a { color:inherit }
:focus-visible { outline:3px solid var(--saffron); outline-offset:3px; border-radius:6px }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.ar { font-family:var(--arabic); direction:rtl }
.wrap { width:min(100% - 2*var(--gutter), 560px); margin-inline:auto }
section { position:relative; background-image:var(--grain); background-size:220px }

/* ---------- type ---------- */
.eyebrow { margin:0 0 8px; font-weight:700; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--red) }
.eyebrow--sun { color:var(--saffron) }
.eyebrow--ink { color:var(--ink) }
.h2 { margin:0; font-family:var(--display); font-weight:900; font-size:clamp(34px, 9.4vw, 54px); line-height:.98; color:var(--blue); text-wrap:balance }
.h2--cream { color:var(--cream) }
.h2--ink { color:var(--ink) }
.lead { margin:10px 0 0; font-size:18px; color:var(--soft) }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:12px 22px; font-family:var(--display); font-weight:700; font-size:18px; text-decoration:none; border:3px solid var(--ink); border-radius:999px; transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out) }
.btn--red { background:var(--red); color:var(--paper); box-shadow:0 5px 0 var(--ink) }
.btn--ghost { background:var(--paper); color:var(--ink); box-shadow:0 5px 0 var(--ink) }
.btn--ghost-ink { background:transparent; color:var(--ink); border-color:var(--ink) }
.btn:active { transform:translateY(4px); box-shadow:0 1px 0 var(--ink) }
.btn__ico { width:20px; height:20px }

/* ---------- bunting ---------- */
.bunting { width:100%; height:auto; filter:url(#rough) }

/* ---------- boiling lines (stop-motion wobble) ---------- */
@keyframes boil { 0% { filter:url(#b1) } 33% { filter:url(#b2) } 66% { filter:url(#b3) } }
.boil { animation:boil .5s steps(1) infinite }

/* ---------- reveal on scroll ---------- */
.js .reveal { opacity:0; transform:translateY(28px) rotate(var(--rr, 0deg)); transition:opacity .6s var(--ease-out), transform .7s var(--ease-out) }
.js .reveal.is-in { opacity:1; transform:none }

/* =========================================================
   DOOR
   ========================================================= */
.door-screen { position:fixed; inset:0; z-index:100; touch-action:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background:var(--paper) var(--grain); background-size:220px; transition:opacity .55s ease, visibility .55s }
.door-screen[hidden] { display:none }
.door-screen.is-gone { opacity:0; visibility:hidden; pointer-events:none }
.door-bunting { position:absolute; top:0; left:0; right:0 }
.door-skip { position:absolute; top:max(14px, env(safe-area-inset-top)); right:16px; z-index:3; padding:8px 14px; background:transparent; border:2px solid var(--ink); border-radius:999px; font-weight:700; font-size:14px }
.door { position:relative; width:min(68vw, 300px); aspect-ratio:5/8; perspective:1100px; filter:drop-shadow(0 18px 0 rgba(19,34,74,.12)) }
.door__arch { position:absolute; inset:-16px -16px -2px; border:13px solid var(--saffron); border-bottom:0; border-radius:50% 50% 0 0 / 31% 31% 0 0; outline:3px solid var(--ink); outline-offset:-1px; box-shadow:inset 0 0 0 3px var(--ink); filter:url(#rough); z-index:2; pointer-events:none }
.door__light { position:absolute; inset:0; border-radius:50% 50% 0 0 / 31% 31% 0 0; background:radial-gradient(ellipse at 50% 70%, #FFF6C9 0%, var(--saffron) 45%, var(--orange) 100%); opacity:.9 }
.door__leaf { position:absolute; top:0; bottom:0; width:50%; border:3px solid var(--ink);
  background:
    radial-gradient(circle, var(--ink) 2.2px, transparent 2.8px) 9px 9px / 18px 18px,
    linear-gradient(var(--blue), var(--blue));
  box-shadow:inset 0 0 0 10px var(--blue), inset 0 0 0 13px var(--ink);
  transition:transform 1.1s cubic-bezier(.6,.05,.2,1); backface-visibility:hidden; z-index:1 }
.door__leaf--l { left:0; border-top-left-radius:100% 62%; transform-origin:left center }
.door__leaf--r { right:0; border-top-right-radius:100% 62%; transform-origin:right center }
.door__knocker { position:absolute; right:12px; top:55%; width:22px; height:22px; border:4px solid var(--saffron); border-radius:50%; box-shadow:0 0 0 2px var(--ink) }
.door.is-open .door__leaf--l { transform:rotateY(-108deg) }
.door.is-open .door__leaf--r { transform:rotateY(108deg) }
.door__stamp { position:absolute; left:50%; top:58%; z-index:3; width:146px; height:146px; transform:translate(-50%,-50%) rotate(-8deg); border:3px solid var(--ink); border-radius:50%;
  background:var(--red); box-shadow:inset 0 0 0 7px var(--red), inset 0 0 0 10px var(--saffron), 0 6px 0 var(--ink);
  color:var(--paper); display:grid; place-content:center; text-align:center; animation:pulse 2.2s var(--ease-out) infinite;
  transition:transform .35s var(--ease-back), opacity .35s }
.door__stamp .ar { font-size:38px; line-height:1; color:var(--saffron) }
.door__stamp .lat { font-family:var(--display); font-weight:900; font-size:24px; line-height:1.1 }
@keyframes pulse { 0%, 100% { transform:translate(-50%,-50%) rotate(-8deg) scale(1) } 50% { transform:translate(-50%,-50%) rotate(-5deg) scale(1.06) } }
.door.is-open .door__stamp { animation:none; transform:translate(-50%,-50%) scale(.2) rotate(30deg); opacity:0 }
.door-hint { margin:0; font-family:var(--display); font-weight:700; font-size:17px; color:var(--soft) }

/* =========================================================
   TOP BAR + PILL
   ========================================================= */
.topbar { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:space-between; align-items:center; padding:max(10px, env(safe-area-inset-top)) 14px 10px; pointer-events:none }
.topbar > * { pointer-events:auto }
.topbar__badge { width:46px; height:46px; border-radius:50%; background:var(--paper); box-shadow:0 3px 0 var(--ink); opacity:0; transform:scale(.6) rotate(-20deg); transition:opacity .3s, transform .4s var(--ease-back) }
.topbar.is-scrolled .topbar__badge { opacity:1; transform:none }
.topbar__badge svg { width:100%; height:100% }
.topbar__right { display:flex; align-items:center; gap:8px }
.replay { width:42px; height:42px; display:grid; place-items:center; padding:9px; background:var(--paper); color:var(--ink); border:2.5px solid var(--ink); border-radius:50%; box-shadow:0 3px 0 var(--ink); transition:transform .4s var(--ease-back) }
.replay svg { width:100%; height:100% }
.replay:active { transform:rotate(-200deg) scale(.92) }
.lang { display:flex; background:var(--paper); border:2.5px solid var(--ink); border-radius:999px; padding:3px; box-shadow:0 3px 0 var(--ink) }
.lang button { min-width:40px; min-height:34px; padding:0 8px; border:0; border-radius:999px; background:transparent; font-weight:700; font-size:13px; letter-spacing:.06em }
.lang button[aria-pressed="true"] { background:var(--blue); color:var(--paper) }

.pill { position:fixed; left:50%; bottom:max(16px, env(safe-area-inset-bottom)); z-index:50; display:flex; align-items:center; gap:8px; padding:12px 24px; min-height:52px;
  background:var(--red); color:var(--paper); border:3px solid var(--ink); border-radius:999px; box-shadow:0 5px 0 var(--ink); font-family:var(--display); font-weight:700; font-size:18px; text-decoration:none;
  transform:translate(-50%, 140%); transition:transform .45s var(--ease-back) }
.pill svg { width:20px; height:20px }
.pill.is-on { transform:translate(-50%, 0) }

/* =========================================================
   HERO
   ========================================================= */
.hero { min-height:100svh; display:flex; align-items:center; justify-content:center; padding:96px 0 64px; background-color:var(--cream); overflow:hidden }
.hero__bunting { position:absolute; top:0; left:0; right:0 }
.hero__inner { position:relative; z-index:2; width:min(100% - 2*var(--gutter), 520px); text-align:center; display:flex; flex-direction:column; align-items:center }
.hero__logo { width:min(64vw, 300px); height:auto; margin-bottom:18px }
.hero__title { position:relative; margin:4px 0 0; font-family:var(--display); font-weight:900; font-size:clamp(36px, 10.5vw, 60px); line-height:.98; color:var(--blue); text-wrap:balance }
.squiggle-draw { width:72%; height:16px; margin:10px auto 0 }
.squiggle-draw path { fill:none; stroke:var(--red); stroke-width:6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; filter:url(#rough) }
.is-ready .squiggle-draw path { transition:stroke-dashoffset 1s .5s var(--ease-out); stroke-dashoffset:0 }
.hero__sub { margin:12px 0 0; font-size:20px; color:var(--soft) }
.hero__ctas { margin-top:26px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px }
.hero__floats .float { position:absolute; transform:translateY(var(--y, 0px)) rotate(var(--r)); will-change:transform; filter:drop-shadow(3px 4px 0 rgba(19,34,74,.18)) }
.js .stamp-in { opacity:0; transform:scale(1.5) rotate(-8deg) }
.is-ready .stamp-in { opacity:1; transform:none; transition:opacity .35s, transform .55s var(--ease-back) }
.js .hero__inner > :not(.hero__logo) { opacity:0; transform:translateY(18px) }
.is-ready .hero__inner > :not(.hero__logo) { opacity:1; transform:none; transition:opacity .6s var(--ease-out), transform .7s var(--ease-out) }
.is-ready .hero__inner > :nth-child(2) { transition-delay:.15s }
.is-ready .hero__inner > :nth-child(3) { transition-delay:.25s }
.is-ready .hero__inner > :nth-child(4) { transition-delay:.35s }
.is-ready .hero__inner > :nth-child(5) { transition-delay:.45s }

/* =========================================================
   STORY — the path from her kitchen to Lisbon
   ========================================================= */
.story { padding:84px 0 96px; background-color:var(--blue); color:var(--cream);
  background-image:var(--grain), repeating-conic-gradient(#2A58A8 0 25%, var(--blue) 0 50%); background-size:220px, 96px 96px }
.story::before, .menu::before, .quiz::before, .foot::before, .what::before, .heat::before { content:""; position:absolute; left:0; right:0; top:-11px; height:12px; background:radial-gradient(circle at 10px 12px, var(--edge) 9.5px, transparent 10px) 0 0/20px 12px repeat-x; z-index:3 }
.story { --edge:var(--blue) }
.path { position:relative; margin-top:36px; padding-left:76px }
.path__line { position:absolute; left:8px; top:8px; bottom:8px; width:60px; height:calc(100% - 16px); overflow:visible }
.path__line path { fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round }
.path__track { stroke:rgba(245,233,207,.22); stroke-width:4; stroke-dasharray:.012 .016 }
.path__ink { stroke:var(--saffron); stroke-width:6; stroke-dasharray:1; stroke-dashoffset:var(--dash, 1) }
.stops { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:64px }
.stop { position:relative; min-height:96px }
.stop__stamp { position:absolute; left:-84px; top:-6px; width:72px; height:72px; border-radius:50%; background:var(--paper); border:3px solid var(--ink); box-shadow:0 4px 0 var(--ink); display:grid; place-items:center; padding:10px; transform:scale(0) rotate(-30deg); transition:transform .5s var(--ease-back) }
.stop__stamp svg { width:100%; height:100% }
.stop__stamp--badge { padding:3px }
.stop.is-in .stop__stamp { transform:none }
.stop__label { margin:0; font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--saffron) }
.stop__text { margin:4px 0 0; font-size:21px; line-height:1.4; text-wrap:pretty }
.stop__text--big { font-family:var(--display); font-weight:900; font-size:clamp(26px, 7.4vw, 36px); line-height:1.08; color:var(--paper) }

/* =========================================================
   WHAT IS A FRICASSÉE — sticky, scroll-built
   ========================================================= */
.what { height:300vh; background-color:var(--saffron); --edge:var(--saffron) }
.what__stage { position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:70px 0 90px; overflow:hidden }
.bun { width:min(78vw, 360px); margin:6px auto 0 }
.bun svg { overflow:visible }
.bun__top { transform-box:fill-box; transform-origin:96% 100%; transform:translate(calc(var(--open, 0) * 14px), calc(var(--open, 0) * -30px)) rotate(calc(var(--open, 0) * 15deg)) }
.drop { transform:translateY(calc((1 - var(--d, 0)) * -240px)); opacity:var(--d, 0) }
.what__steps { position:relative; min-height:150px; text-align:center }
.what__step { position:absolute; inset:0 0 auto; margin:0; font-family:var(--display); font-weight:700; font-size:clamp(22px, 6.4vw, 30px); line-height:1.2; opacity:0; transform:translateY(14px); transition:opacity .35s, transform .45s var(--ease-out) }
.what__step.is-on { opacity:1; transform:none }
.say { position:absolute; left:50%; bottom:0; margin:0; transform:translateX(-50%) rotate(-3deg); white-space:nowrap; padding:6px 14px; background:var(--paper); border:2.5px solid var(--ink); font-family:var(--display); font-weight:700; font-size:16px }
.say b { color:var(--red) }

/* =========================================================
   MENU
   ========================================================= */
.menu { padding:84px 0 40px; background-color:var(--cream); --edge:var(--cream); scroll-margin-top:10px }
.card { position:relative; margin:42px 0 0; padding:28px 0 30px; color:var(--paper) }
.card::before { content:""; position:absolute; inset:0; background:var(--band) var(--grain); background-size:220px; filter:url(#rough-lg); z-index:0 }
.card--red { --band:var(--red) } .card--green { --band:var(--olive) } .card--orange { --band:var(--orange); color:var(--ink) }
.card__shot { position:relative; z-index:1; width:min(100% - 2*var(--gutter), 560px); margin:-56px auto 0; padding:7px; background:var(--paper); border:3px solid var(--ink); box-shadow:6px 7px 0 rgba(19,34,74,.3); transform:rotate(-1.6deg) }
.card--rev .card__shot { transform:rotate(1.6deg) }
.card__shot img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover }
.burst { position:absolute; top:-26px; right:-10px; width:92px; height:92px; transform:rotate(10deg); filter:drop-shadow(3px 4px 0 rgba(19,34,74,.25)) }
.card--rev .burst { right:auto; left:-10px; transform:rotate(-10deg) }
.burst svg { width:100%; height:100% }
.burst text { font-family:var(--display); font-weight:900; font-size:32px; text-anchor:middle }
.burst--sun use { fill:var(--saffron) } .burst--sun text { fill:var(--ink) }
.burst--red use { fill:var(--red) } .burst--red text { fill:var(--paper) }
.card__body { position:relative; z-index:1; width:min(100% - 2*var(--gutter), 560px); margin:22px auto 0 }
.sticker { display:inline-block; padding:4px 12px; background:var(--saffron); color:var(--ink); border:2.5px solid var(--ink); font-family:var(--display); font-weight:700; font-size:15px; transform:rotate(-3deg) }
.js .card .sticker { transform:scale(1.6) rotate(-12deg); opacity:0 }
.js .card.is-in .sticker { transform:rotate(-3deg); opacity:1; transition:transform .45s .35s var(--ease-back), opacity .2s .35s }
.card__name { margin:10px 0 0; font-family:var(--display); font-weight:900; font-size:clamp(34px, 9.6vw, 50px); line-height:.95 }
.card__tag { display:flex; align-items:center; gap:8px; margin:8px 0 0; font-family:var(--display); font-weight:700; font-size:17px; color:var(--saffron) }
.card--orange .card__tag { color:var(--ink) }
.card__tag svg { width:34px; height:24px; filter:drop-shadow(1px 2px 0 rgba(19,34,74,.25)) }
.card__desc { margin:8px 0 0; font-size:19px; line-height:1.4; font-weight:500 }

/* =========================================================
   HEAT
   ========================================================= */
.heat { --h:var(--saffron); --hfg:var(--ink); padding:84px 0 90px; background-color:var(--h); color:var(--hfg); transition:background-color .45s ease, color .45s ease; --edge:var(--h) }
.heat::before { transition:background .45s }
.heat[data-level="2"] { --h:var(--orange) }
.heat[data-level="3"] { --h:var(--red); --hfg:var(--paper) }
.heat[data-level="4"] { --h:#8E1A14; --hfg:var(--paper) }
.heat .h2, .heat .eyebrow { color:var(--hfg); transition:color .45s }
.heat__card { margin-top:26px; padding:24px 20px 22px; background:var(--paper); color:var(--ink); border:3px solid var(--ink); box-shadow:0 6px 0 var(--ink); text-align:center }
.heat__chilis { display:flex; justify-content:center; gap:4px; height:46px }
.heat__chilis svg { width:62px; height:40px; transition:transform .4s var(--ease-back), opacity .3s; opacity:.15; transform:scale(.7) rotate(-10deg); filter:grayscale(1) }
.heat__chilis svg.on { opacity:1; transform:rotate(calc(-20deg + var(--i) * 10deg)); filter:none }
.heat[data-level="4"] .heat__chilis { animation:shake .5s 2 }
@keyframes shake { 0%, 100% { transform:none } 20% { transform:translateX(-6px) rotate(-3deg) } 40% { transform:translateX(6px) rotate(3deg) } 60% { transform:translateX(-4px) } 80% { transform:translateX(4px) } }
.heat__name { margin:10px 0 0; font-family:var(--display); font-weight:900; font-size:clamp(30px, 8.6vw, 42px); line-height:1; color:var(--blue) }
.heat__sub { margin:4px 0 0; font-size:17px; color:var(--soft) }
.heat__range { -webkit-appearance:none; appearance:none; width:100%; height:44px; margin:20px 0 4px; background:transparent }
.heat__range::-webkit-slider-runnable-track { height:16px; border-radius:999px; border:2.5px solid var(--ink); background:linear-gradient(90deg, var(--saffron), var(--orange), var(--red), #8E1A14) }
.heat__range::-moz-range-track { height:16px; border-radius:999px; border:2.5px solid var(--ink); background:linear-gradient(90deg, var(--saffron), var(--orange), var(--red), #8E1A14) }
.heat__range::-webkit-slider-thumb { -webkit-appearance:none; width:40px; height:40px; margin-top:-14px; border-radius:50%; background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-40 -24 80 48'%3E%3Cpath d='M-30 -6 C-10 -14 14 -10 28 4 C33 9 30 13 24 11 C10 5 -8 5 -26 7 C-35 7 -37 -2 -30 -6Z' fill='%23D3271F' stroke='%2313224A' stroke-width='4'/%3E%3C/svg%3E") center/26px no-repeat; border:3px solid var(--ink); box-shadow:0 3px 0 var(--ink) }
.heat__range::-moz-range-thumb { width:36px; height:36px; border-radius:50%; background:var(--paper); border:3px solid var(--ink) }
.heat__ticks { display:grid; grid-template-columns:repeat(4, 1fr) }
.heat__ticks button { min-height:40px; border:0; background:transparent; font-family:var(--display); font-weight:900; font-size:18px; color:var(--soft) }
.heat__ticks button[aria-pressed="true"] { color:var(--red) }
.heat__say { margin:14px 0 0; padding-top:14px; border-top:2px dashed rgba(19,34,74,.25); font-size:16px }
.heat__say b { display:block; font-family:var(--display); font-size:22px; color:var(--red) }

/* =========================================================
   QUIZ
   ========================================================= */
.quiz { padding:84px 0 96px; background-color:var(--cream); --edge:var(--cream) }
.quiz__frame { margin-top:26px; padding:12px; border:3px solid var(--ink); box-shadow:0 6px 0 var(--ink); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Crect width='56' height='56' fill='%2326509C'/%3E%3Cpath d='M28 8 L34 22 L48 28 L34 34 L28 48 L22 34 L8 28 L22 22Z' fill='%23F7D13B'/%3E%3Ccircle cx='28' cy='28' r='5' fill='%23D3271F'/%3E%3C/svg%3E") 0 0/40px 40px }
.quiz__box { padding:22px 18px 24px; background:var(--paper); border:3px solid var(--ink) }
.quiz__step { display:none }
.quiz__step.is-on { display:block; animation:stepIn .45s var(--ease-out) }
@keyframes stepIn { from { opacity:0; transform:translateX(24px) } to { opacity:1; transform:none } }
.quiz__q { display:flex; align-items:center; gap:10px; margin:0 0 14px; font-family:var(--display); font-weight:700; font-size:21px; line-height:1.2 }
.quiz__n { flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--red); color:var(--paper); border:2.5px solid var(--ink); font-weight:900; font-size:17px; transform:rotate(-6deg) }
.chips { display:grid; gap:10px }
.chips--heat { grid-template-columns:1fr 1fr }
.chip { display:flex; align-items:center; gap:12px; min-height:58px; padding:10px 14px; text-align:left; background:var(--cream); border:2.5px solid var(--ink); border-radius:16px; font-weight:700; font-size:17px; transition:transform .15s var(--ease-out), background .2s }
.chip svg { flex:none; width:44px; height:30px }
.chip:active { transform:scale(.97) }
.chip.is-picked { background:var(--saffron) }
.chips--heat .chip { flex-direction:column; align-items:flex-start; gap:4px }
.mini-chilis { display:flex; gap:1px }
.mini-chilis svg { width:24px; height:15px }
.quiz__result { text-align:center }
.quiz__yours { margin:0; font-weight:700; font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:var(--red) }
.quiz__result img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; margin:12px 0 0; border:3px solid var(--ink); transform:rotate(-1.5deg); animation:slap .5s var(--ease-back) }
@keyframes slap { from { transform:scale(1.3) rotate(-10deg); opacity:0 } }
.quiz__name { margin:14px 0 0; font-family:var(--display); font-weight:900; font-size:34px; line-height:1; color:var(--blue) }
.quiz__order { margin:8px 0 0; font-size:17px }
.quiz__order b { font-family:var(--display); color:var(--red) }
.quiz__actions { margin-top:18px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px }

/* =========================================================
   FOOTER
   ========================================================= */
.foot { position:relative; padding:70px var(--gutter) 120px; background:var(--red) var(--grain); background-size:220px; color:var(--cream); text-align:center; --edge:var(--red) }
.foot__badge { width:120px; height:120px; margin:0 auto; animation:spin 30s linear infinite }
@keyframes spin { to { transform:rotate(360deg) } }
.foot__big { margin:16px 0 0; font-family:var(--display); font-weight:900; font-size:48px; line-height:1 }
.foot__ar { margin:6px 0 0; font-size:38px; color:var(--saffron) }
.foot__small { margin:14px 0 0; font-size:16px; opacity:.9 }

/* card flash when reached from the quiz */
.card.flash .card__shot { animation:flash 1s var(--ease-out) }
@keyframes flash { 30% { transform:scale(1.04) rotate(0) } }

/* ---------- wider screens: keep it a phone-first column, decorate the sides ---------- */
@media (min-width:760px) {
  body { font-size:18px }
  .card { padding:36px 0 40px }
  .card__shot { margin-top:-64px }
}

/* ---------- reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  .boil, .foot__badge, .door__stamp { animation:none }
  .js .reveal, .js .stamp-in, .js .hero__inner > *, .js .card .sticker { opacity:1 !important; transform:none !important; transition:none !important }
  .squiggle-draw path { stroke-dashoffset:0 }
  .stop__stamp { transform:none; transition:none }
  .what { height:auto }
  .what__stage { position:relative; height:auto; padding:84px 0 }
  .what__steps { min-height:0 }
  .what__step { position:static; opacity:1; transform:none; margin-top:8px }
  .say { position:static; display:inline-block; transform:rotate(-3deg); margin-top:16px }
  .bun__top { transform:translate(14px, -30px) rotate(15deg) }
  .drop { transform:none; opacity:1 }
  .path__ink { stroke-dashoffset:0 }
}