/* Restaurant website, design v2 ("La comanda") — served by Nova for every tenant.
   Palette: forno (oven black) · farina (flour paper) · pomodoro · basilico · crosta (crust gold) */
[hidden] { display: none !important; }
:root {
  --forno: #16110D;
  --forno-2: #221A14;
  --farina: #F5EFE4;
  --crema: #EDE3D1;
  --pomodoro: #D9412A;
  --pomodoro-dk: #B8321F;
  --basilico: #2F5D34;
  --crosta: #E3A24A;
  --ink: #1E1814;
  --muted: #6E6257;
  --line: rgba(30, 24, 20, .14);
  --line-light: rgba(245, 239, 228, .14);
  --wa: #1FA855;

  --f-display: 'Fraunces', Georgia, serif;
  --f-body: 'Manrope', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  --r: 22px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--farina);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* paper grain */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .05; transform: translateZ(0);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; }
a { color: inherit; }
svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.fill { fill: currentColor; stroke: none; }
:focus-visible { outline: 2px solid var(--pomodoro); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.tiny { font-size: 11px; }
.italic { font-style: italic; font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.hindi { font-family: 'Tiro Devanagari Hindi', serif; }

/* ── Buttons ─────────────────────────────── */
.btn {
  --bg: var(--forno); --fg: var(--farina);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px; border: 1.5px solid transparent;
  background: var(--bg); color: var(--fg);
  font: 600 14px/1 var(--f-body); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: transform .25s var(--ease), background .2s, box-shadow .25s var(--ease);
}
.btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 16px 26px; font-size: 15px; }
.btn-sm { padding: 10px 16px; font-size: 13px; }
.btn-ink { --bg: var(--forno); --fg: var(--farina); }
.btn-tomato { --bg: var(--pomodoro); --fg: #fff; box-shadow: 0 10px 30px -10px rgba(217, 65, 42, .7); }
.btn-tomato:hover { background: var(--pomodoro-dk); }
.btn-cream { --bg: var(--farina); --fg: var(--forno); }
.btn-ghost { --bg: transparent; --fg: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost-light { --bg: transparent; --fg: var(--farina); border-color: rgba(245,239,228,.3); }
.btn-ghost-light:hover { border-color: var(--farina); }
.btn-wa { --bg: var(--wa); --fg: #fff; }
.btn-wa:hover { background: #178C46; }
.link { color: var(--pomodoro); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .3s var(--ease); }
.link:hover { background-size: 100% 1.5px; }

/* ── Nav ─────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 239, 228, .82);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-row { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 19px/1 var(--f-display); letter-spacing: -.01em; }
.brand img { border-radius: 50%; }
.brand em { font-style: italic; font-weight: 400; color: var(--pomodoro); }
.brand.light { color: var(--farina); }
.nav-links { display: none; gap: 28px; }
.nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--muted); transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.status { display: none; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.status i { width: 8px; height: 8px; border-radius: 50%; background: #aaa; }
.status.open i { background: #22A55A; box-shadow: 0 0 0 0 rgba(34,165,90,.6); animation: ping 2s infinite; }
.status.closed i { background: var(--pomodoro); }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(34,165,90,0); } 100% { box-shadow: 0 0 0 0 rgba(34,165,90,0); } }
@media (min-width: 900px) { .nav-links { display: flex; } }
@media (min-width: 640px) { .status { display: inline-flex; } }

/* ── Hero ─────────────────────────────── */
.hero { position: relative; padding: clamp(28px, 6vw, 72px) 0 clamp(48px, 8vw, 110px); overflow: hidden; }
.hero::before { /* warm glow from the oven */
  content: ''; position: absolute; right: -20vw; top: -10vw; width: 70vw; height: 70vw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(227, 162, 74, .28), transparent 70%); pointer-events: none;
}
.hero-grid { position: relative; display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 40px; } }

.kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--basilico); margin: 0 0 22px; font-weight: 500; }
.veg-mark { width: 16px; height: 16px; border: 1.5px solid var(--basilico); border-radius: 3px; display: inline-grid; place-items: center; flex-shrink: 0; }
.veg-mark::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--basilico); }

.display {
  font-family: var(--f-display); font-weight: 400; font-optical-sizing: auto;
  font-size: clamp(56px, 11.5vw, 148px); line-height: .9; letter-spacing: -.035em; margin: 0 0 28px;
  font-variation-settings: 'SOFT' 50;
}
.display .italic { color: var(--pomodoro); font-weight: 300; }
.lede { font-size: clamp(17px, 1.6vw, 19px); color: var(--muted); max-width: 34em; margin: 0 0 32px; }
.lede strong { color: var(--ink); font-weight: 700; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-proof { list-style: none; margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 520px; }
.hero-proof b { display: block; font: 500 clamp(28px, 3.4vw, 40px)/1 var(--f-display); letter-spacing: -.02em; }
.hero-proof small { font-size: .5em; color: var(--pomodoro); margin-left: 2px; }
.hero-proof li > span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.35; }

.hero-art { position: relative; justify-self: center; width: min(100%, 500px); }
.arch {
  aspect-ratio: 4 / 5; border-radius: 999px 999px var(--r) var(--r); overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(22, 17, 13, .55); background: var(--forno);
}
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 60%; transform: scale(1.08); animation: slowzoom 18s ease-in-out infinite alternate; will-change: transform; }
@keyframes slowzoom { to { transform: scale(1.18) translateY(-2%); } }

.stamp { position: absolute; left: -44px; top: 18%; width: 150px; height: 150px; animation: spin 26s linear infinite; will-change: transform; }
.stamp .disc { fill: var(--crosta); stroke: none; }
.stamp .ring { stroke: rgba(22,17,13,.35); stroke-width: 1; stroke-dasharray: 2 4; }
.stamp text { font: 500 13.5px var(--f-mono); letter-spacing: .22em; fill: var(--forno); stroke: none; }
.stamp { filter: drop-shadow(0 12px 24px rgba(22,17,13,.35)); z-index: 2; }
.stamp-core {
  position: absolute; left: -44px; top: 18%; width: 150px; height: 150px; display: grid; place-content: center; text-align: center;
  pointer-events: none; z-index: 3;
}
.stamp-core .hindi { font-size: 22px; line-height: 1; color: var(--forno); }
.stamp-core .mono { font-size: 9px; color: var(--forno); margin-top: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }

.ticket-float {
  position: absolute; right: -10px; bottom: 28px; width: min(270px, 78%);
  background: var(--farina); border-radius: 14px; padding: 16px 18px 18px; text-decoration: none;
  box-shadow: 0 24px 50px -18px rgba(22,17,13,.5); animation: float 6s ease-in-out infinite;
  -webkit-mask: radial-gradient(circle 7px at 0 58%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 58%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 7px at 0 58%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 58%, #0000 98%, #000) right / 51% 100% no-repeat;
}
.ticket-float .mono { color: var(--pomodoro); display: block; }
.ticket-float strong { display: block; font: 500 22px/1.15 var(--f-display); margin: 6px 0 10px; }
.ticket-float .row { display: flex; gap: 12px; align-items: flex-end; justify-content: space-between; border-top: 1.5px dashed var(--line); padding-top: 10px; }
.ticket-float .row span { font-size: 12.5px; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ticket-float .row b { font: 600 18px var(--f-display); white-space: nowrap; }
@keyframes float { 50% { transform: translateY(-8px); } }
/* Phones and small tablets, where the hero stacks: no photo and no chef's
   pick. The स्वागत seal spins in the top-right corner, over the layout, and
   the kicker keeps clear of it. The two column wrappers
   step aside (display: contents) so their children share one grid. */
@media (max-width: 979px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: stretch; }
  .hero-copy, .hero-art { display: contents; }
  .arch { display: none; }
  .hero-grid { position: relative; }
  .stamp, .stamp-core { position: absolute; left: auto; right: var(--gutter); top: -6px; width: 96px; height: 96px; margin: 0; }
  .stamp-core .hindi { font-size: 15px; }
  .stamp-core .mono { font-size: 7px; }
  .hero .kicker { padding-right: 104px; }
  .ticket-float { display: none; }
}

/* ── Marquee ─────────────────────────────── */
/* The strip and the fire along its top edge tilt together. */
.marquee-wrap { position: relative; z-index: 2; transform: rotate(-1.2deg); margin: 0 -10px; }
.marquee { background: var(--pomodoro); color: #fff; overflow: hidden; padding: 16px 0; box-shadow: 0 10px 30px -15px rgba(0,0,0,.3); position: relative; }
/* Fire along the top of the strip, drawn flat: three bands of flame tongues
   scrolling at different speeds (the front one is the strip's own red, so
   the fire grows out of it), a pizza on its peel riding them, and the usual
   shortcuts floating on the fire and sinking into it. */
.flames { position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(70px, 8vw, 110px); margin-bottom: -1px; pointer-events: none; overflow: hidden; }
.tongue { position: absolute; left: 0; right: 0; bottom: 0; background-repeat: repeat-x; background-position: 0 100%; animation: tongues linear infinite, lick 3s ease-in-out infinite alternate; }
.tongue.t1 { height: 92%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 80' preserveAspectRatio='none'%3E%3Cpath fill='%23F2B75A' d='M0 80V50C10 50 18 30 22 8C26 28 34 38 40 44C46 30 52 22 58 16C62 34 72 44 80 48C88 40 96 26 102 6C106 28 116 40 124 46C132 36 140 28 146 20C150 36 156 46 160 50V80Z'/%3E%3C/svg%3E"); background-size: 190px 100%; animation-duration: 22s, 3.4s; opacity: .95; }
.tongue.t2 { height: 70%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 80' preserveAspectRatio='none'%3E%3Cpath fill='%23EE7A33' d='M0 80V50C10 50 18 30 22 8C26 28 34 38 40 44C46 30 52 22 58 16C62 34 72 44 80 48C88 40 96 26 102 6C106 28 116 40 124 46C132 36 140 28 146 20C150 36 156 46 160 50V80Z'/%3E%3C/svg%3E"); background-size: 150px 100%; animation-duration: 14s, 2.6s; animation-delay: 0s, -1s; }
.tongue.t3 { height: 46%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 80' preserveAspectRatio='none'%3E%3Cpath fill='%23D9412A' d='M0 80V50C10 50 18 30 22 8C26 28 34 38 40 44C46 30 52 22 58 16C62 34 72 44 80 48C88 40 96 26 102 6C106 28 116 40 124 46C132 36 140 28 146 20C150 36 156 46 160 50V80Z'/%3E%3C/svg%3E"); background-size: 120px 100%; animation-duration: 9s, 2.2s; animation-delay: 0s, -.5s; }
@keyframes tongues { to { background-position: -1140px 100%; } }
@keyframes lick { from { transform: translateY(4%); } to { transform: translateY(-4%); } }
.tongue.t2 { animation-name: tongues2, lick; }
@keyframes tongues2 { to { background-position: -1050px 100%; } }
.tongue.t3 { animation-name: tongues3, lick; }
@keyframes tongues3 { to { background-position: -960px 100%; } }
/* the pizza on its peel, riding the fire */
.peel { position: absolute; left: clamp(8px, 5vw, 80px); bottom: 18%; width: clamp(120px, 13vw, 190px); z-index: 1; }
.peel svg { display: block; width: 100%; height: auto; stroke: none; overflow: visible; }
.peel-bob { transform-box: fill-box; transform-origin: 50% 60%; animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
/* the usual, adrift and going under */
.drift { position: absolute; bottom: 30%; left: 0; z-index: 1; animation: drift linear infinite; }
.drift i { display: block; font: 500 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--muted); background: #FFFBF4; border-radius: 999px; padding: 5px 9px; white-space: nowrap; box-shadow: 0 2px 0 rgba(30,24,20,.08); text-decoration: line-through; text-decoration-color: rgba(217,65,42,.7); animation: tag-bob 2.4s ease-in-out infinite alternate; }
.drift.d1 { animation-duration: 26s; animation-delay: -4s; }
.drift.d2 { animation-duration: 31s; animation-delay: -16s; }
.drift.d3 { animation-duration: 28s; animation-delay: -10s; }
.drift.d4 { animation-duration: 34s; animation-delay: -24s; }
.drift.d2 i { animation-duration: 2.9s; } .drift.d3 i { animation-duration: 2.1s; } .drift.d4 i { animation-duration: 2.6s; }
/* across the fire, going under as it nears the far side */
@keyframes drift { 0% { transform: translate(110vw, 0); opacity: 1; } 65% { transform: translate(28vw, 3px); opacity: 1; } 100% { transform: translate(-20vw, 34px) rotate(-10deg); opacity: 0; } }
@keyframes tag-bob { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-4px) rotate(3deg); } }
@media (max-width: 640px) { .drift.d3, .drift.d4 { display: none; } .flames { height: 54px; } .peel { width: 104px; bottom: 10%; } .drift { bottom: 22%; } }
.marquee-track { display: flex; gap: 28px; width: max-content; animation: marquee 40s linear infinite; will-change: transform; font: 400 italic clamp(20px, 2.4vw, 28px)/1 var(--f-display); white-space: nowrap; }
.marquee-track span:nth-child(4n+3) { font-style: normal; font-family: var(--f-mono); font-size: .55em; letter-spacing: .12em; text-transform: uppercase; align-self: center; }
.marquee-track span:nth-child(4n+1) { }
.marquee-track i { font-style: normal; color: var(--crosta); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Sections ─────────────────────────────── */
.section { padding: clamp(72px, 11vw, 140px) 0; position: relative; }
.paper { background: var(--farina); }
.cream { background: var(--crema); }
.ink { background: var(--forno); color: var(--farina); }
.sec-head { max-width: 760px; margin-bottom: clamp(36px, 6vw, 64px); }
.sec-head-split { max-width: none; display: grid; gap: 20px; align-items: end; }
@media (min-width: 900px) { .sec-head-split { grid-template-columns: 1.2fr .8fr; gap: 60px; } }
.eyebrow { color: var(--pomodoro); margin: 0 0 18px; }
.eyebrow.light { color: var(--crosta); }
.h2 { font: 400 clamp(38px, 6vw, 76px)/1 var(--f-display); letter-spacing: -.03em; margin: 0; }
.h2 .italic { color: var(--pomodoro); font-weight: 300; }
.h2.light .italic, .ink .h2 .italic { color: var(--crosta); }
.sec-sub { color: var(--muted); font-size: 17px; max-width: 36em; margin: 20px 0 0; }
.sec-sub.light { color: rgba(245,239,228,.68); }
.sec-head-split .sec-sub { margin: 0; }
.strike { position: relative; }
.strike::after { content: ''; position: absolute; left: -4%; right: -4%; top: 55%; height: .09em; background: var(--ink); transform: rotate(-4deg) scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .4s; }
.in .strike::after, .strike.in::after { transform: rotate(-4deg) scaleX(1); }

/* ── La differenza: the usual, struck through, then ours ────────────────
   Big type, no pictures. Without JS (or with reduced motion) each step is the
   usual beside ours. With JS the section pins (.vs2-live), one step per stretch
   of scroll, and --w (0→1, set by v2.js) plays the step:
     --s  0→1 over the first third: a line strikes through the usual
     --b  0→1 over the rest: the usual lifts away, ours rises in, the stage warms */
.vs2 { background: var(--farina); padding: clamp(72px, 11vw, 140px) 0; position: relative; }
.vs2-top { margin-bottom: clamp(28px, 5vw, 48px); }
.vs2-head .h2 { font-size: clamp(34px, 5vw, 64px); }
.vs2-rail, .vs2-hint { display: none; }
.vs2-scene { padding: clamp(28px, 5vw, 48px) 0; border-top: 1px solid var(--line); }
.vs3-kicker { font: 600 15px/1.3 var(--f-body); margin: 0 0 clamp(14px, 3vw, 24px); color: var(--muted); }
.vs3-kicker .mono { color: var(--pomodoro); margin-right: 10px; }
.vs3-duel { display: grid; gap: 22px 40px; }
@media (min-width: 760px) { .vs3-duel { grid-template-columns: 1fr 1fr; } }
.vs3-side { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.vs3-who { font-size: 11px; color: var(--muted); }
.vs3-side.ours .vs3-who { color: var(--pomodoro); }
.vs3-big { font: 800 clamp(64px, 10vw, 140px)/.9 var(--f-body); letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.vs3-big.word { font-size: clamp(40px, 5vw, 76px); letter-spacing: -.045em; white-space: nowrap; }
.vs3-big small { font-size: .36em; letter-spacing: -.01em; margin-left: .08em; font-weight: 700; }
.vs3-big s { text-decoration: none; position: relative; display: inline-block; }
.vs3-big s::after { content: ''; position: absolute; left: -3%; right: -3%; top: 52%; height: .07em; border-radius: .04em; background: var(--pomodoro); transform: rotate(-3deg) scaleX(var(--s, 1)); transform-origin: left center; }
.vs3-side.usual .vs3-big { color: #B5ADA2; }
.vs3-side.ours .vs3-big { color: var(--pomodoro); }
.vs3-note { font-size: 15px; line-height: 1.4; max-width: 24em; color: var(--muted); }
.vs3-side.ours .vs3-note { color: var(--ink); font-weight: 600; }

/* ── The infographics: each shows the number itself. --p is how far the
   fire has got (1 when static, so they show ours). ── */
.vs2-scene { --p: 1; }
.vs2-scene { display: grid; gap: 24px; }
@media (min-width: 900px) { .vs2-scene { grid-template-columns: minmax(260px, .8fr) 1.2fr; align-items: center; gap: 56px; } }
.vs3-viz { margin: 0; position: relative; width: 100%; max-width: 340px; justify-self: center; }
.vs3-viz svg { display: block; width: 100%; height: auto; stroke: none; }
.vs3-viz figcaption, .vs3-fat-title { font-size: 10.5px; color: var(--muted); text-align: center; margin: 12px 0 0; }
.vs3-dial-labels text { font: 500 11px var(--f-mono); fill: var(--muted); text-anchor: middle; }
.vs3-swap { display: inline-grid; }
.vs3-swap i { grid-area: 1 / 1; font-style: normal; color: var(--ink); }
.vs3-swap i:first-child { opacity: clamp(0, calc((.5 - var(--p)) * 20), 1); }
.vs3-swap i:last-child { opacity: clamp(0, calc((var(--p) - .5) * 20), 1); color: var(--pomodoro); }
.vs3-why { margin: 18px 0 0; font-size: 15px; line-height: 1.5; max-width: 30em; color: var(--ink); border-left: 3px solid var(--crosta); padding-left: 14px; }
/* 01 dial */
.vs3-dial-sweep { stroke-dashoffset: calc(100 - var(--p) * 100); }
.vs3-dial-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.vs3-dial-mid b { font: 800 clamp(48px, 6vw, 76px)/.9 var(--f-body); letter-spacing: -.05em; color: color-mix(in srgb, var(--pomodoro) calc(var(--p) * 100%), #8F877C); font-variant-numeric: tabular-nums; }
.vs3-dial-mid .mono { font-size: 10px; color: var(--muted); }
/* 02 lens */
.vs3-lens-usual { opacity: calc(1 - var(--p)); }
.vs3-lens-ours { opacity: var(--p); }
/* 03 fat */
.vs3-fat { max-width: 380px; }
.vs3-fat-title { text-align: left; margin: 0 0 12px; }
.vs3-fatbar { display: flex; height: 64px; border-radius: 14px; overflow: hidden; background: #E4DDD2; }
.vs3-fatbar i { display: block; height: 100%; }
.vs3-fatbar .sat { width: calc((49 - 35 * var(--p)) * 1%); background: color-mix(in srgb, #8F877C calc((1 - var(--p)) * 100%), #B8321F); }
.vs3-fatbar .mono-f { width: calc((37 + 36 * var(--p)) * 1%); background: color-mix(in srgb, #C4BCB0 calc((1 - var(--p)) * 100%), #9BA93A); }
.vs3-fatbar .poly { width: calc((9 + 2 * var(--p)) * 1%); background: color-mix(in srgb, #D8D1C6 calc((1 - var(--p)) * 100%), #E3A24A); }
.vs3-fat-legend { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.vs3-fat-legend li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--muted); }
.vs3-fat-legend li::before { content: ''; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; align-self: center; }
.vs3-fat-legend .sat::before { background: #B8321F; }
.vs3-fat-legend .mono-f::before { background: #9BA93A; }
.vs3-fat-legend .poly::before { background: #E3A24A; }
.vs3-fat-legend b { font: 800 22px var(--f-body); color: var(--ink); min-width: 2.4em; font-variant-numeric: tabular-nums; }
.vs3-fat-legend .sat b { color: var(--pomodoro); font-size: 30px; }
.vs3-fat-src { font-size: 11px; color: var(--muted); margin: 12px 0 0; }
/* 04 gauge */
.vs3-gauge-hot { stroke-dashoffset: calc(100 - (50 + 50 * var(--p))); }
.vs3-needle { transform-box: view-box; transform-origin: 160px 180px; transform: rotate(calc(var(--p) * 90deg)); }
.vs3-gauge-read { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 6px; }
.vs3-gauge-read b { font: 800 clamp(34px, 4vw, 48px)/1 var(--f-body); letter-spacing: -.04em; color: color-mix(in srgb, var(--pomodoro) calc(var(--p) * 100%), #8F877C); font-variant-numeric: tabular-nums; }
.vs3-gauge-read .mono { font-size: 10px; color: var(--muted); }
/* 05 cross-section: the dense slab burns away into the airy rim */
.vs3-xs-stage { position: relative; }
.vs3-xs-ours { position: absolute; inset: 0; clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }

/* ── live: pinned, one step at a time ── */
.vs2-live { padding: 0; }
.vs2-live .vs2-track { height: calc(var(--vs-n, 5) * 50vh + 100vh); }
.vs2-live .vs2-stage {
  --b: clamp(0, calc((var(--w, 0) - .34) / .66), 1);
  position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column;
  padding: clamp(78px, 11vh, 110px) 0 clamp(16px, 3vh, 28px); overflow: hidden;
  background: color-mix(in srgb, #F3E2C2 calc(var(--b) * 100%), #ECE9E4);
}
.vs2-live .vs2-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 40px; margin-bottom: 0; }
.vs2-live .vs2-head .eyebrow { margin-bottom: 10px; }
.vs2-live .vs2-head .h2 { font-size: clamp(30px, 4.4vw, 58px); }
.vs2-live .vs2-rail { display: flex; position: relative; gap: 4px; padding-bottom: 12px; }
.vs2-rail button { border: 0; background: none; cursor: pointer; padding: 6px 10px; display: flex; align-items: baseline; gap: 6px; font: 600 13px var(--f-body); color: var(--muted); border-radius: 999px; transition: color .3s, background .3s; }
.vs2-rail button i { font: 500 10.5px var(--f-mono); font-style: normal; letter-spacing: .06em; }
.vs2-rail button.on { color: var(--farina); background: var(--forno); }
.vs2-rail-bar { position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.vs2-rail-bar em { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--crosta), var(--pomodoro)); }
@media (max-width: 640px) { .vs2-rail button span { display: none; } .vs2-rail button { padding: 6px 9px; } }

.vs2-live .vs2-scenes { position: relative; flex: 1; min-height: 0; }
.vs2-live .vs2-scene {
  --s: clamp(0, calc(var(--w, 0) / .34), 1);
  --b: clamp(0, calc((var(--w, 0) - .34) / .66), 1);
  position: absolute; inset: 0 var(--gutter); padding: 0; border: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(24px);
  transition: opacity .5s var(--ease), transform .7s var(--ease), visibility 0s .5s;
}
.vs2-live .vs2-scene.on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease), transform .7s var(--ease), visibility 0s; }
.vs2-live .vs2-scene.past { transform: translateY(-24px); }
.vs2-live .vs3-kicker { font-size: clamp(15px, 1.6vw, 19px); color: var(--ink); }
/* The burn. Both words share one spot, and --bw (set by v2.js) is the
   longer word's width, so the ember crosses exactly the type. --p (0→1) is how far
   the fire has got: left of it is ours, right of it is still the usual. */
.vs2-live .vs2-scene { --p: clamp(0, calc((var(--w, 0) - .1) / .8), 1); }
.vs2-live .vs2-stage { --b: clamp(0, calc((var(--w, 0) - .1) / .8), 1); }
.vs2-live .vs2-scene { align-items: center; text-align: center; }
.vs2-live .vs3-duel { display: inline-grid; grid-template-columns: auto; position: relative; }
.vs2-live .vs3-side { align-items: center; }
.vs2-live .vs3-note { margin: 0 auto; }
.vs2-live .vs3-side { grid-area: 1 / 1; }
.vs2-live .vs3-big { font-size: clamp(110px, 22vw, 300px); white-space: nowrap; }
/* both words span the whole duel, so their masks and the ember share one
   coordinate: the fire edge is the same line on both */
.vs2-live .vs3-side .vs3-big { align-self: stretch; display: block; text-align: center; }
.vs2-live .vs3-big.word { font-size: clamp(64px, 15vw, 240px); }
.vs2-live .vs3-big s::after { display: none; }
.vs2-live .vs3-side.usual .vs3-big {
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--p) * var(--bw, 100%)), #000 calc(var(--p) * var(--bw, 100%) + 4%));
          mask-image: linear-gradient(90deg, transparent calc(var(--p) * var(--bw, 100%)), #000 calc(var(--p) * var(--bw, 100%) + 4%));
}
.vs2-live .vs3-side.ours .vs3-big {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p) * var(--bw, 100%) - 4%), transparent calc(var(--p) * var(--bw, 100%)));
          mask-image: linear-gradient(90deg, #000 calc(var(--p) * var(--bw, 100%) - 4%), transparent calc(var(--p) * var(--bw, 100%)));
  text-shadow: 0 0 calc((1 - var(--p)) * 40px) rgba(227, 162, 74, .55);
}
/* captions hand over halfway */
.vs2-live .vs3-side.usual .vs3-who, .vs2-live .vs3-side.usual .vs3-note { opacity: calc(1 - var(--p) * 2); }
.vs2-live .vs3-side.ours .vs3-who, .vs2-live .vs3-side.ours .vs3-note { opacity: calc(var(--p) * 2 - 1); transform: translateY(calc((1 - var(--p)) * 12px)); }
.vs2-live .vs3-note { font-size: clamp(15px, 1.5vw, 18px); }
/* the ember: a glowing edge across the type, throwing sparks */
.vs3-ember { display: none; }
.vs2-live .vs3-ember {
  display: block; position: absolute; z-index: 2; pointer-events: none;
  top: 18px; bottom: 34%; left: calc(var(--p) * var(--bw, 100%)); width: 4px; margin-left: -2px; border-radius: 4px;
  background: linear-gradient(180deg, transparent, #FFD27A 18%, #F08A2E 50%, #D9412A 82%, transparent);
  box-shadow: 0 0 18px 6px rgba(240, 138, 46, .55), 0 0 60px 18px rgba(217, 65, 42, .25);
  transition: opacity .35s;
}
.vs2-live .vs2-scene.start .vs3-ember, .vs2-live .vs2-scene.done .vs3-ember { opacity: 0; }
/* Once the wipe is through, ours shows whole: no mask edge left fading the
   last digit (or its unit) of a figure like 48h. */
.vs2-live .vs2-scene.done .vs3-side.ours .vs3-big { -webkit-mask-image: none; mask-image: none; }
.vs2-live .vs2-scene.done .vs3-side.usual .vs3-big { visibility: hidden; }
.vs3-ember b { position: absolute; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #FFC45E; box-shadow: 0 0 6px 2px rgba(255, 170, 60, .8); opacity: 0; animation: vs3-spark 1.4s ease-out infinite; }
.vs3-ember b:nth-child(1) { top: 30%; --dx: -26px; animation-delay: 0s; }
.vs3-ember b:nth-child(2) { top: 50%; --dx: 22px; animation-delay: .25s; }
.vs3-ember b:nth-child(3) { top: 65%; --dx: -14px; animation-delay: .5s; }
.vs3-ember b:nth-child(4) { top: 40%; --dx: 30px; animation-delay: .75s; }
.vs3-ember b:nth-child(5) { top: 75%; --dx: -32px; animation-delay: 1s; width: 3px; height: 3px; }
.vs3-ember b:nth-child(6) { top: 55%; --dx: 12px; animation-delay: 1.2s; width: 3px; height: 3px; }
@keyframes vs3-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), -70px) scale(.3); }
}
.vs2-live .vs2-hint { display: block; text-align: center; margin: 12px 0 0; color: var(--muted); font-size: 11px; transition: opacity .4s; }
.vs2-live .vs2-hint span { display: inline-block; animation: vs2-bob 1.4s ease-in-out infinite; }
@keyframes vs2-bob { 50% { transform: translateY(4px); } }
.vs2-live.moved .vs2-hint { opacity: 0; }
/* live: diagram and type side by side (stacked on phones) */
.vs2-live .vs2-scene { display: grid; grid-template-columns: 1fr; align-content: center; align-items: center; justify-items: stretch; text-align: left; gap: clamp(12px, 3vh, 28px); }
@media (min-width: 900px) { .vs2-live .vs2-scene { grid-template-columns: minmax(280px, .85fr) 1.15fr; gap: 56px; } }
.vs2-live .vs3-text { min-width: 0; }
.vs2-live .vs3-duel { display: inline-grid; }
.vs2-live .vs3-side { align-items: flex-start; }
.vs2-live .vs3-side .vs3-big { text-align: left; }
.vs2-live .vs3-note { margin: 0; }
.vs2-live .vs3-big { font-size: clamp(76px, 12vw, 200px); }
.vs2-live .vs3-big.word { font-size: clamp(52px, 8.4vw, 150px); }
@media (max-width: 899px) {
  .vs2-live .vs3-viz { max-width: min(220px, 30vh); }
  .vs2-live .vs3-fat { max-width: 340px; }
  .vs2-live .vs3-fat-legend { grid-template-columns: repeat(3, auto); gap: 4px 12px; }
  .vs2-live .vs3-fat-legend li { flex-direction: column; gap: 0; font-size: 11px; }
  .vs2-live .vs3-fat-legend li::before { display: none; }
  .vs2-live .vs3-fat-legend b, .vs2-live .vs3-fat-legend .sat b { font-size: 22px; }
  .vs2-live .vs3-fatbar { height: 40px; }
  .vs2-live .vs3-fat-src { display: none; }
  .vs2-live .vs3-why { font-size: 13.5px; margin-top: 10px; }
  .vs2-live .vs3-big { font-size: clamp(64px, 20vw, 120px); }
  .vs2-live .vs3-big.word { font-size: clamp(44px, 14vw, 90px); }
  .vs2-live .vs2-head .h2 { font-size: 26px; }
  .vs2-live .vs2-head .eyebrow { margin-bottom: 4px; }
}
/* phones: clear the fixed bottom dock (.dock, under 900px), and size the
   pinned stage's contents by the screen's height, so a short phone fits the
   heading, rail, diagram, word and captions without any of it running under
   the dock. */
@media (max-width: 899px) {
  .vs2-live .vs2-stage { padding: calc(68px + clamp(8px, 1.8svh, 20px)) 0 calc(76px + env(safe-area-inset-bottom)); }
  .vs2-live .vs2-head .h2 { font-size: clamp(20px, 3.3svh, 28px); }
  .vs2-live .vs2-head .eyebrow { font-size: 10.5px; }
  .vs2-live .vs2-rail { padding-bottom: 8px; }
  .vs2-live .vs2-scenes { margin-top: clamp(6px, 1.4svh, 14px); }
  .vs2-live .vs2-scene { gap: clamp(6px, 1.6svh, 20px); }
  .vs2-live .vs3-viz { max-width: min(220px, 25svh); }
  .vs2-live .vs3-viz figcaption { margin-top: 4px; }
  .vs2-live .vs3-kicker { margin-bottom: clamp(4px, 1.2svh, 14px); font-size: 15px; }
  .vs2-live .vs3-big { font-size: clamp(52px, min(20vw, 10svh), 120px); }
  .vs2-live .vs3-big.word { font-size: clamp(38px, min(14vw, 7.4svh), 90px); }
  .vs2-live .vs3-side { gap: clamp(4px, 1svh, 10px); }
  .vs2-live .vs3-note { font-size: clamp(13px, 1.9svh, 16px); }
  .vs2-live .vs3-why { font-size: clamp(12.5px, 1.75svh, 14px); margin-top: clamp(6px, 1.2svh, 12px); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ── 48 ore ─────────────────────────────── */
.dough-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .dough-grid { grid-template-columns: .9fr 1.1fr; gap: 80px; } }
.dough-sticky { align-self: start; }
@media (min-width: 900px) { .dough-sticky { position: sticky; top: 110px; } }
/* phones: the clock pins under the nav, compact, and the stations scroll up
   beneath it */
@media (max-width: 899px) {
  .dough-sticky {
    position: sticky; top: 68px; z-index: 5;
    margin: 0 calc(var(--gutter) * -1); padding: 14px var(--gutter) 16px;
    background: var(--forno); border-bottom: 1px solid var(--line-light);
  }
  .dough-sticky .eyebrow { margin-bottom: 6px; }
  .dough-sticky .clock b { font-size: 84px; }
  .dough-sticky .clock .mono { margin-top: .9em; }
  .dough-sticky .clock-bar { margin: 12px 0 0; max-width: none; }
  .dough-sticky .clock-note { display: none; }
}
.clock { display: flex; align-items: flex-start; gap: 14px; }
.clock .mono { color: var(--crosta); margin-top: 1.4em; }
.clock b { font: 300 clamp(120px, 20vw, 260px)/.82 var(--f-display); letter-spacing: -.06em; font-variant-numeric: tabular-nums; color: var(--farina); font-variation-settings: 'SOFT' 100; }
.clock-bar { height: 4px; background: var(--line-light); border-radius: 4px; overflow: hidden; margin: 22px 0; max-width: 420px; }
.clock-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--crosta), var(--pomodoro)); transform: scaleX(.04); transform-origin: left; will-change: transform; }
.clock-note { color: rgba(245,239,228,.6); max-width: 22em; margin: 0; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { padding: clamp(28px, 5vw, 56px) 0; border-top: 1px solid var(--line-light); opacity: .35; transition: opacity .5s var(--ease); }
.step.on { opacity: 1; }
.step:last-child { border-bottom: 1px solid var(--line-light); }
.step .mono { color: var(--crosta); }
.step h3 { font: 400 clamp(28px, 3.6vw, 42px)/1.08 var(--f-display); letter-spacing: -.02em; margin: 14px 0 12px; }
.step p { color: rgba(245,239,228,.7); margin: 0 0 20px; max-width: 32em; }
.step .btn { align-self: flex-start; }
@media (min-width: 900px) { .step { min-height: 42vh; } }

/* Each station's diagram. --q (0→1) plays it: registered so it can be
   transitioned, and set to 1 when the station comes into focus (.step.on,
   the same moment the Ora clock moves). Without JS (.dough-live unset) or
   with reduced motion the diagrams simply show their end state. */
@property --q { syntax: '<number>'; inherits: true; initial-value: 1; }
.step { --q: 1; }
.dough-live .step { --q: 0; transition: opacity .5s var(--ease), --q 1.6s var(--ease); }
.dough-live .step.on { --q: 1; }
.step { display: grid; gap: 22px; }
@media (min-width: 900px) { .step { grid-template-columns: 240px 1fr; align-items: center; gap: 36px; } }
.step-copy { display: flex; flex-direction: column; }
.step .tl-viz { margin: 0; position: relative; color: var(--farina); min-height: 190px; display: flex; flex-direction: column; justify-content: center; max-width: 320px; }
.step .tl-viz svg { display: block; width: 100%; height: auto; max-height: 170px; stroke: none; }
.step .tl-viz figcaption, .step .tl-viz-label { font-size: 10px; color: rgba(245,239,228,.5); text-align: center; margin: 8px 0 0; }
/* The drawings were made for paper: on the oven-black section their ink
   lines turn to flour, and the pale fills to faint light. */
.step .tl-viz [stroke="#1E1814"] { stroke: var(--farina); }
.step .tl-viz [fill="#1E1814"] { fill: var(--farina); }
.step .tl-thermo rect[fill="#FFFFFF"] { fill: rgba(245,239,228,.06); }
.step .tl-viz circle[stroke="#E4DDD2"] { stroke: rgba(245,239,228,.12); }
.step .tl-viz ellipse[fill="rgba(30,24,20,.08)"] { fill: rgba(245,239,228,.08); }
/* 01 mix: what goes in, and what's crossed out */
.tl-mix .tl-viz-label { text-align: left; margin: 0 0 6px; }
.tl-in { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tl-in li { --on: clamp(0, calc(var(--q) * 5 - var(--i)), 1); background: rgba(245,239,228,.06); border: 1px solid var(--line-light); color: var(--farina); border-radius: 10px; padding: 7px 10px; opacity: var(--on); transform: translateY(calc((1 - var(--on)) * 10px)); }
.tl-in b { display: block; font: 800 15px var(--f-body); letter-spacing: -.02em; }
.tl-in span { display: none; }
.tl-out { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.tl-out li { --x: clamp(0, calc(var(--q) * 5 - var(--i) - .5), 1); position: relative; font-size: 11.5px; color: rgba(245,239,228,.55); padding: 3px 9px; border: 1px dashed rgba(245,239,228,.25); border-radius: 999px; }
.tl-out li::after { content: ''; position: absolute; left: 5px; right: 5px; top: 50%; height: 2px; background: var(--pomodoro); transform: scaleX(var(--x)); transform-origin: left; }
/* 02 cold: the mercury drops, the ball swells, bubbles form */
.tl-thermo-fill { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(calc(1 - var(--q) * .72)); }
.tl-ball { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(calc(.62 + .38 * var(--q))); }
.tl-bub { opacity: clamp(0, calc(var(--q) * 7 - var(--i) - 1), 1); }
/* 03 stretch: air pushed to the rim, which puffs */
.tl-rim { stroke-width: calc(4px + 24px * var(--q)); }
.tl-push path { transform-box: view-box; transform-origin: 150px 100px; transform: rotate(var(--a)) translateY(calc(var(--q) * -30px)); opacity: calc(.25 + .75 * var(--q)); }
/* 04 fire: ninety seconds go round */
.tl-timer { stroke-dashoffset: calc(100 - var(--q) * 100); }
.tl-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: vs2-flicker 1.1s ease-in-out infinite alternate; }
.tl-timer-read { position: absolute; inset: 0 0 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding-top: 10px; }
.tl-timer-read b { font: 800 38px/1 var(--f-body); letter-spacing: -.04em; color: var(--pomodoro); font-variant-numeric: tabular-nums; }
.tl-timer-read b small { font-size: .45em; margin-left: 2px; }
.tl-timer-read .mono { font-size: 9px; color: rgba(245,239,228,.55); }

/* ── Le voci: real reviews from Google ─────────────────────────────── */
.g-logo { width: 22px; height: 22px; flex-shrink: 0; stroke: none; }
.gr-stars { color: #F4B400; letter-spacing: 2px; font-size: 15px; }
.gr-score { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.gr-score-row { display: flex; align-items: center; gap: 12px; }
.gr-score-row .g-logo { width: 34px; height: 34px; }
.gr-score b { font: 800 clamp(44px, 5vw, 60px)/1 var(--f-body); letter-spacing: -.04em; }
.gr-score .gr-stars { font-size: 20px; }
.gr-meta { color: var(--muted); font-size: 14px; }
.gr-score .review-ctas { margin-top: 6px; }
.gr-grid { columns: 3 300px; column-gap: 20px; }
.gr-card { break-inside: avoid; margin: 0 0 20px; background: #FFFBF4; border: 1px solid var(--line); border-radius: 18px; padding: 20px 20px 18px; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.gr-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(30,24,20,.4); }
.gr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.gr-top .g-logo { width: 18px; height: 18px; }
.gr-card blockquote { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.gr-card.open blockquote { -webkit-line-clamp: unset; display: block; }
.gr-card figcaption { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.gr-av { position: relative; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--crosta); display: grid; place-items: center; }
.gr-av i { font: 700 15px var(--f-body); font-style: normal; color: var(--forno); }
.gr-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gr-card figcaption b { display: block; font-size: 14px; }
.gr-card figcaption small { display: block; font-size: 12px; color: var(--muted); }
@media (max-width: 759px) {
  .gr-grid { columns: auto; display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; }
  .gr-grid::-webkit-scrollbar { display: none; }
  .gr-card { flex: 0 0 84%; margin: 0; scroll-snap-align: start; }
}

/* ── La comanda ─────────────────────────────── */
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 18px; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex-shrink: 0; border: 1.5px solid var(--line); background: transparent; color: var(--ink); border-radius: 999px; padding: 10px 18px; font: 600 14px var(--f-body); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.tab:hover { border-color: var(--ink); }
.tab[aria-selected="true"] { background: var(--forno); color: var(--farina); border-color: var(--forno); }
.tab small { opacity: .55; font-weight: 500; margin-left: 4px; }

.tickets { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tickets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tickets { grid-template-columns: repeat(3, 1fr); } }
.ticket {
  position: relative; background: #FBF7EF; border-radius: 14px; padding: 22px 22px 18px;
  display: flex; flex-direction: column; min-height: 210px;
  box-shadow: 0 1px 0 rgba(30,24,20,.06), 0 12px 30px -20px rgba(30,24,20,.35);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  animation: ticketIn .5s var(--ease) both;
  /* the notches sit on the dashed line above the price, whatever the height */
  -webkit-mask: radial-gradient(circle 8px at 0 calc(100% - 70px), #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% calc(100% - 70px), #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 8px at 0 calc(100% - 70px), #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% calc(100% - 70px), #0000 98%, #000) right / 51% 100% no-repeat;
}
/* the dish's photo, edge to edge across the top of the ticket */
.ticket-img { margin: -22px -22px 16px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px 14px 0 0; background: #EFE7D9; }
.ticket-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ticket:hover .ticket-img img { transform: scale(1.05); }
.ticket.has-img h3 { margin-top: 10px; }
.ticket:hover { transform: translateY(-4px) rotate(-.4deg); }
@keyframes ticketIn { from { opacity: 0; transform: translateY(14px); } }
.ticket-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ticket-top .mono { color: var(--muted); font-size: 11px; }
.ticket h3 { font: 500 24px/1.1 var(--f-display); letter-spacing: -.015em; margin: 12px 0 8px; }
.ticket p { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ticket-foot { margin-top: auto; padding-top: 16px; border-top: 1.5px dashed var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ticket-foot .price { font: 500 22px var(--f-display); }
.ticket.picked { box-shadow: 0 0 0 2px var(--pomodoro), 0 18px 40px -20px rgba(217,65,42,.6); }
.ticket.picked .ticket-top .mono { color: var(--pomodoro); }
.ticket.skeleton { background: linear-gradient(100deg, #EFE7D9 30%, #F7F1E6 50%, #EFE7D9 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }

.add { width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--forno); color: var(--farina); display: grid; place-items: center; cursor: pointer; transition: transform .2s var(--ease), background .2s; }
.add:hover { background: var(--pomodoro); transform: rotate(90deg); }
.add svg { width: 18px; height: 18px; stroke-width: 2.4; }
.qty { display: inline-flex; align-items: center; gap: 4px; background: var(--pomodoro); color: #fff; border-radius: 999px; padding: 4px; }
.qty button { width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,.16); color: #fff; font: 600 18px/1 var(--f-body); cursor: pointer; }
.qty button:hover { background: rgba(255,255,255,.3); }
.qty span { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.tickets-foot { margin: 28px 0 0; text-align: center; }
@media (max-width: 639px) {
  .tickets { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 14px; scroll-padding: 0 var(--gutter); }
  .tickets::-webkit-scrollbar { display: none; }
  .ticket { scroll-snap-align: start; }
  .ticket:hover { transform: none; }
}
.menu-error { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 30px 0; }

/* ── Bento (rooms) ─────────────────────────────── */
.bento { display: grid; gap: 16px; grid-template-columns: 1fr; }
.room { position: relative; border-radius: var(--r); overflow: hidden; min-height: 320px; display: flex; align-items: flex-end; background: var(--forno); color: var(--farina); isolation: isolate; }
.room img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.room:hover img { transform: scale(1.05); }
.room::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(22,17,13,.96) 0%, rgba(22,17,13,.78) 42%, rgba(22,17,13,.1) 85%); }
@media (max-width: 759px) { .room-dine { min-height: 440px; } .room-dine img { object-position: 50% 15%; } }
.room-body { padding: clamp(22px, 3vw, 32px); }
.room .mono { color: var(--crosta); }
.room h3 { font: 400 clamp(26px, 3vw, 36px)/1.05 var(--f-display); letter-spacing: -.02em; margin: 10px 0 10px; }
.room p { color: rgba(245,239,228,.75); font-size: 14.5px; margin: 0 0 18px; max-width: 30em; }
.room-host { background: var(--crosta); color: var(--forno); }
.room-host::before, .room-member::before, .room-order::before { display: none; }
.room-host .mono { color: var(--pomodoro-dk); }
.room-host p { color: rgba(22,17,13,.72); }
.room-doodle { position: absolute; right: -18px; top: -18px; width: 170px; height: 170px; color: rgba(22,17,13,.18); stroke-width: 2; animation: spin 60s linear infinite; }
.room-member { background: var(--basilico); }
.room-order { background: var(--pomodoro); }
.room-order::before { display: none; }
.room-order .mono { color: #FFE0B5; }
.room-order p { color: rgba(255,255,255,.85); }
.room-member .mono { color: #BFE3B8; }
.room-sip { min-height: 260px; }
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(260px, auto); }
  .room-dine { grid-column: span 4; grid-row: span 2; }
  .room-sip { grid-column: span 3; }
  .room-order { grid-column: span 2; }
  .room-host { grid-column: span 2; }
  .room-member { grid-column: span 3; }
}

/* ── WhatsApp concierge ─────────────────────────────── */
.wa-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 900px) { .wa-grid { grid-template-columns: 1fr 1fr; gap: 80px; } }
.wa-list { list-style: none; padding: 0; margin: 30px 0 34px; }
.wa-list li { display: flex; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line-light); font-size: 16px; }
.wa-list li:last-child { border-bottom: 1px solid var(--line-light); }
.wa-list span { font: 500 12px var(--f-mono); color: var(--crosta); padding-top: 3px; }
.phone {
  justify-self: center; width: min(100%, 380px); border-radius: 40px; padding: 12px; background: #2A221C;
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.8), inset 0 0 0 1.5px rgba(255,255,255,.08);
  transform: rotate(2.5deg);
}
.phone-top { display: flex; align-items: center; gap: 10px; background: #1F2C33; color: #E9EDEF; padding: 14px 16px; border-radius: 30px 30px 0 0; }
.phone-top img { border-radius: 50%; }
.phone-top b { display: block; font-size: 14px; }
.phone-top span { font-size: 11.5px; color: #8FA3AD; }
.chat {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 14px 26px; min-height: 380px; border-radius: 0 0 30px 30px;
  background: #0B141A radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 14px 14px;
}
.msg { margin: 0; max-width: 82%; padding: 9px 12px; border-radius: 10px; font-size: 14px; line-height: 1.4; color: #E9EDEF; opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.msg.show { opacity: 1; transform: none; }
.msg.me { align-self: flex-end; background: #005C4B; border-top-right-radius: 3px; }
.msg.them { align-self: flex-start; background: #202C33; border-top-left-radius: 3px; }

/* ── Voices ─────────────────────────────── */
.voices { display: grid; gap: 40px; align-items: end; }
@media (min-width: 900px) { .voices { grid-template-columns: 1.5fr 1fr; gap: 80px; } }
.quote { margin: 0; }
.display-quote { font: 300 clamp(28px, 4vw, 50px)/1.15 var(--f-display); letter-spacing: -.02em; margin: 0 0 24px; font-style: italic; font-variation-settings: 'SOFT' 100; }
.quote figcaption { color: var(--muted); font-size: 15px; }
.quote figcaption b { color: var(--ink); }
.review-card { background: var(--forno); color: var(--farina); padding: 30px; border-radius: var(--r); }
.stars { color: var(--crosta); font-size: 22px; letter-spacing: 4px; }
.review-card p { color: rgba(245,239,228,.78); margin: 12px 0 22px; }
.review-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.review-card .btn-ink { --bg: var(--farina); --fg: var(--forno); }
.review-card .link { color: var(--crosta); }

/* ── FAQ ─────────────────────────────── */
.faq-grid { display: grid; gap: 30px; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: .8fr 1.2fr; gap: 80px; } }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font: 500 clamp(19px, 2vw, 23px)/1.25 var(--f-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 300 30px var(--f-body); color: var(--pomodoro); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0 0 24px; color: var(--muted); max-width: 40em; }

/* ── Finale ─────────────────────────────── */
.finale { background: var(--pomodoro); color: var(--farina); padding: clamp(72px, 10vw, 130px) 0; position: relative; overflow: hidden; }
.finale::before { content: ''; position: absolute; left: -15vw; bottom: -30vw; width: 60vw; height: 60vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(227,162,74,.55), transparent); }
.finale-grid { position: relative; display: grid; gap: 50px; align-items: center; }
@media (min-width: 900px) { .finale-grid { grid-template-columns: 1.1fr .9fr; gap: 70px; } }
.finale .eyebrow.light { color: #FFE0B5; }
.finale-title { font: 400 clamp(52px, 9vw, 120px)/.9 var(--f-display); letter-spacing: -.04em; margin: 0 0 34px; }
.finale-title .italic { font-weight: 300; }
.finale .btn-tomato { --bg: var(--forno); --fg: var(--farina); box-shadow: none; }
.finale .btn-tomato:hover { background: #000; }
.visit { background: var(--farina); color: var(--ink); border-radius: var(--r); padding: 10px 24px 24px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.visit-row { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.visit-row .mono { color: var(--pomodoro); padding-top: 3px; }
.visit-row p { margin: 0; font-weight: 500; }
.visit-row a { text-decoration: none; }
.map { width: 100%; height: 200px; border: 0; border-radius: 14px; margin-top: 18px; filter: grayscale(.4) sepia(.2); }

/* ── Footer ─────────────────────────────── */
.footer { background: var(--forno); color: rgba(245,239,228,.7); padding: 64px 0 calc(110px + env(safe-area-inset-bottom)); font-size: 14px; }
.footer-grid { display: grid; gap: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--line-light); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } .footer { padding-bottom: 40px; } }
.foot-note { max-width: 28em; margin: 16px 0 0; }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col .mono { color: var(--crosta); margin-bottom: 4px; }
.foot-col a, .foot-links a { text-decoration: none; transition: color .2s; }
.foot-col a:hover, .foot-links a:hover { color: var(--farina); }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; font-size: 12.5px; color: rgba(245,239,228,.45); }
.foot-legal p { margin: 0; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ── Order tray ─────────────────────────────── */
.tray { position: fixed; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 60; padding: 0 12px; pointer-events: none; }
.tray[hidden] { display: block; }
.tray-inner {
  pointer-events: auto; max-width: 640px; margin: 0 auto; background: var(--forno); color: var(--farina);
  border-radius: 20px; padding: 12px 12px 12px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.6);
  transform: translateY(160%); transition: transform .5s var(--ease);
}
.tray.show .tray-inner { transform: none; }
.tray-sum { display: flex; flex-direction: column; margin-right: auto; }
.tray-sum .mono { color: var(--crosta); font-size: 10.5px; }
.tray-sum b { font: 500 22px/1.1 var(--f-display); }
.tray-mode { display: flex; background: rgba(245,239,228,.08); border-radius: 999px; padding: 3px; }
.tray-mode button { border: none; background: transparent; color: rgba(245,239,228,.65); font: 600 12.5px var(--f-body); padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.tray-mode button[aria-checked="true"] { background: var(--farina); color: var(--forno); }
@media (min-width: 900px) { .tray { bottom: 24px; } }
@media (max-width: 420px) { .tray-inner { padding-left: 16px; } .tray-mode { order: 3; width: 100%; } .tray-mode button { flex: 1; } }

/* ── Mobile dock ─────────────────────────────── */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(22,17,13,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-light);
}
.dock a { display: flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(245,239,228,.8); text-decoration: none; font-size: 11px; font-weight: 600; padding: 6px 0; }
.dock a:first-child { color: var(--crosta); }
.dock svg { width: 22px; height: 22px; }
@media (min-width: 900px) { .dock { display: none; } }
/* Out of the way while the hero is on screen — it has its own buttons — and
   up once it scrolls off (v2.js sets .dock-on on <body>). */
.dock { transition: transform .45s var(--ease), opacity .45s var(--ease); }
body:not(.dock-on) .dock { transform: translateY(110%); opacity: 0; pointer-events: none; }

/* ── Phones: each section a page of the book ──
   The hero and its fire strip fill exactly one screen under the nav; every
   other section is at least a screen tall with its content centred; and the
   scroll settles on the start of each page. In 48 ore each station is a page
   under the pinned clock. Proximity, not mandatory: a page taller than the
   screen still scrolls freely, and the pinned sections keep working. */
@media (max-width: 899px) {
  html { scroll-snap-type: y proximity; scroll-padding-top: 68px; }
  .hero { min-height: calc(100svh - 68px - 64px); display: flex; align-items: center; padding: 20px 0 64px; scroll-snap-align: start; }
  .hero > .hero-grid { width: 100%; }
  /* The hero's contents scale with the screen's height, so hero and strip
     are one screen on a tall phone and a short one alike. */
  .hero .kicker { margin-bottom: clamp(10px, 2.2svh, 22px); }
  .hero .display { font-size: clamp(40px, min(14vw, 8.2svh), 84px); }
  .hero .lede { font-size: clamp(14.5px, 2.15svh, 18px); margin-bottom: clamp(14px, 3svh, 32px); }
  .hero-ctas { flex-wrap: nowrap; gap: 10px; }
  .hero-ctas .btn-lg { flex: 1 1 auto; min-height: clamp(44px, 6.4svh, 56px); padding: 0 14px; font-size: 14.5px; white-space: nowrap; }
  .hero-proof { margin-top: clamp(16px, 3.2svh, 40px); padding-top: clamp(12px, 2.2svh, 22px); }
  .hero-proof b { font-size: clamp(24px, 4.2svh, 40px); }
  .hero-proof li > span { font-size: 11.5px; margin-top: 4px; }
  .section, .finale { min-height: calc(100svh - 68px); display: flex; flex-direction: column; justify-content: center; scroll-snap-align: start; }
  .vs2 { scroll-snap-align: start; }
  #dough { justify-content: flex-start; }
  #dough .step { min-height: calc(100svh - 68px - 190px); scroll-snap-align: start; scroll-margin-top: calc(68px + 190px); display: flex; flex-direction: column; justify-content: center; }
}


/* ── Reveal ─────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.hero .reveal:nth-child(2) { transition-delay: .08s; }
.hero .reveal:nth-child(3) { transition-delay: .16s; }
.hero .reveal:nth-child(4) { transition-delay: .24s; }
.hero .reveal:nth-child(5) { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal, .msg { opacity: 1; transform: none; }
  .step { opacity: 1; }
}