/* Grato – a restaurant at night and the paper on its counter: espresso-dark heroes and bands,
   clean white and stone surfaces for reading, the app's own tomato red as the one brand colour.
   Paper objects from the trade (stamp card, till receipt, menu card) carry the motion. */
:root {
  --ristretto: #15100D;
  --ristretto-2: #211915;
  --ristretto-line: rgba(255, 244, 236, 0.13);
  --on-dark: #FAF6F2;
  --on-dark-2: #BFB3AA;
  --bg: #FFFFFF;
  --stone: #F2F0ED;
  --tile: #FFFFFF;
  --text: #1C1714;
  --text-2: #5F5751;
  --line: #DCD7D1;
  --brand: #B8461F;
  --brand-hover: #9C3A18;
  --brand-hi: #F0835A;
  --paper: #FDFDFB;
  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; background: var(--ristretto); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
h1, h2 { font-family: var(--serif); letter-spacing: -0.015em; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.04; max-width: 18ch; }
h3 { font-family: var(--sans); font-weight: 600; font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1180px, 100% - 44px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--bg); padding: 8px 12px; z-index: 40; }
.skip:focus { left: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Navigation: dark like the room, always ── */
.localnav { position: sticky; top: 0; z-index: 30; background: rgba(21, 16, 13, 0.86); color: var(--on-dark);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--ristretto-line); }
.localnav__inner { display: flex; align-items: center; gap: 28px; height: 64px; }
.localnav__title { font-family: var(--serif); font-size: 1.65rem; text-decoration: none; color: var(--brand-hi); }
.localnav__links { display: flex; gap: 6px; margin-left: auto; font-size: 0.95rem; }
.localnav__links a { position: relative; text-decoration: none; color: var(--on-dark-2); padding: 8px 12px; border-radius: 999px; transition: color 200ms, background-color 200ms; }
.localnav__links a:hover { color: var(--on-dark); background: rgba(255, 255, 255, 0.07); }
.localnav__links a[aria-current="page"] { color: var(--on-dark); background: rgba(240, 131, 90, 0.16); }
.lang { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); }
.lang button { font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--on-dark-2); background: none; border: 0; border-radius: 999px; padding: 5px 10px; cursor: pointer; transition: color 200ms, background-color 200ms; }
.lang button:hover { color: var(--on-dark); }
.lang button[aria-pressed="true"] { background: var(--on-dark); color: var(--ristretto); }
.menu-toggle { display: none; }

/* ── Links and buttons ── */
.kicker { font-weight: 600; color: var(--brand); font-size: 1.02rem; letter-spacing: 0.01em; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.links { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 24px; font-size: 1.2rem; }
.link { color: var(--brand); text-decoration: none; font-weight: 500; }
.link::after { content: " ›"; }
.link:hover { text-decoration: underline; }
.button { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px;
  font-weight: 600; text-decoration: none; overflow: hidden; isolation: isolate; transition: transform 300ms var(--ease), color 250ms, border-color 250ms; }
.button::after { content: "›"; font-size: 1.2em; line-height: 1; transition: transform 300ms var(--ease); }
.button:hover { transform: translateY(-2px); }
.button:hover::after { transform: translateX(4px); }
.button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: scaleX(0); transform-origin: left; transition: transform 450ms var(--ease); }
.button:hover::before { transform: scaleX(1); }
.button--brand { background: var(--brand); color: #fff; }
.button--brand::before { background: var(--brand-hover); }
.button--ghost { color: var(--on-dark); box-shadow: inset 0 0 0 1.5px rgba(255, 244, 236, 0.4); }
.button--ghost::before { background: rgba(255, 255, 255, 0.1); }
.button--light { background: #fff; color: #8F3416; }
.button--light::before { background: #FFF1EA; }

/* ── iPhone: real screenshot in a titanium body with side buttons and Dynamic Island ── */
.iphone {
  --w: 300px;
  position: relative; display: block; width: var(--w); flex: none;
  padding: calc(var(--w) * 0.03);
  border-radius: calc(var(--w) * 0.175);
  background: #050505;
  box-shadow:
    0 0 0 calc(var(--w) * 0.006) #2A2B2E,
    0 0 0 calc(var(--w) * 0.014) #8D9198,
    0 0 0 calc(var(--w) * 0.018) #4A4C50,
    0 calc(var(--w) * 0.14) calc(var(--w) * 0.24) calc(var(--w) * -0.06) rgba(20, 10, 4, 0.38);
}
.iphone img { width: 100%; aspect-ratio: 1206 / 2622; object-fit: cover; border-radius: calc(var(--w) * 0.148); background: #F2F2F7; }
.iphone__island { position: absolute; z-index: 1; top: calc(var(--w) * 0.058); left: 50%; transform: translateX(-50%);
  width: calc(var(--w) * 0.29); height: calc(var(--w) * 0.085); border-radius: 999px; background: #000; }
.iphone::before { content: ""; position: absolute; left: calc(var(--w) * -0.026); top: 19%; width: calc(var(--w) * 0.012); height: 5%;
  border-radius: 3px 0 0 3px; background: #8D9198;
  box-shadow: 0 calc(var(--w) * 0.2) 0 0 #8D9198, 0 calc(var(--w) * 0.36) 0 0 #8D9198; }
.iphone::after { content: ""; position: absolute; right: calc(var(--w) * -0.026); top: 28%; width: calc(var(--w) * 0.012); height: 13%;
  border-radius: 0 3px 3px 0; background: #8D9198; }

/* ── Home hero: the stamp card fills up, then the app takes over ── */
.hero { position: relative; background: var(--ristretto); color: var(--on-dark); padding-block: clamp(56px, 8vw, 104px) clamp(72px, 9vw, 120px); overflow: clip; }
.hero::before { /* the checked tablecloth under everything, barely there */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.016;
  background:
    repeating-linear-gradient(0deg, #fff 0 22px, transparent 22px 44px),
    repeating-linear-gradient(90deg, #fff 0 22px, transparent 22px 44px);
  -webkit-mask-image: linear-gradient(transparent 30%, #000); mask-image: linear-gradient(transparent 30%, #000);
}
.hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
.hero .kicker { color: var(--brand-hi); }
.hero h1 { margin-top: 14px; font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1.02; max-width: 12ch; }
.hero__sub { margin-top: 24px; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.4; color: var(--on-dark-2); max-width: 30ch; }

.scene { position: relative; height: 660px; }
.stampcard {
  position: absolute; left: -80px; top: 340px; width: 285px; padding: 22px 24px 26px; border-radius: 14px;
  background: var(--paper); color: var(--text);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.04);
  transform: rotate(-9deg);
}
.stampcard::before { content: ""; position: absolute; inset: 7px; border: 1.5px solid color-mix(in srgb, var(--brand) 35%, transparent); border-radius: 9px; pointer-events: none; }
.stampcard__label { display: block; font: 600 0.72rem/1 var(--sans); letter-spacing: 0.06em; color: var(--brand); }
.stampcard__shop { display: block; margin-top: 6px; font-family: var(--serif); font-size: 1.7rem; line-height: 1.1; }
.stampcard__slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 18px; }
.stampcard__slots i { position: relative; aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed #C9C0B8; }
.stampcard__slots i:not(.is-empty)::after {
  content: "G"; position: absolute; inset: -3px; border-radius: 50%; display: grid; place-items: center;
  font: 400 1.25rem/1 var(--serif); color: var(--brand);
  border: 2.5px solid var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--paper));
  transform: rotate(calc(var(--n) * 23deg - 30deg));
}
.scene__phone { position: absolute; right: 0; top: 0; }
.iphone--scene { --w: 300px; }
.chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px;
  border-radius: 16px; background: var(--paper); color: var(--text); font-weight: 600; font-size: 0.98rem; white-space: nowrap;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.55);
}
.chip::before { content: ""; width: 28px; height: 28px; border-radius: 9px; flex: none; }
.chip--points { left: 40px; top: 610px; }
.chip--points::before { background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 16px no-repeat; }
.chip--reward { left: -20px; top: 150px; }
.chip--reward::before { background: #1F7A4D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; }

@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: title-in 1100ms var(--ease) both 80ms; }
  .hero__sub { animation: fade-up 900ms var(--ease) both 300ms; }
  .hero .actions { animation: fade-up 900ms var(--ease) both 420ms; }
  .stampcard { animation: card-in 1000ms var(--ease) both 250ms; }
  .stampcard__slots i:not(.is-empty)::after { animation: stamp 420ms cubic-bezier(0.3, 1.5, 0.5, 1) both; animation-delay: calc(900ms + var(--n) * 230ms); }
  .scene__phone { animation: phone-in 1300ms var(--ease) both 2400ms; }
  .iphone--scene { animation: float 7s ease-in-out infinite 3700ms; }
  .chip--points { animation: pop 700ms cubic-bezier(0.3, 1.6, 0.5, 1) both 3300ms, float 6s ease-in-out infinite 4000ms; }
  .chip--reward { animation: pop 700ms cubic-bezier(0.3, 1.6, 0.5, 1) both 3800ms, float 6.5s ease-in-out infinite 4500ms; }
}
@keyframes title-in { from { opacity: 0; transform: translateY(40px); clip-path: inset(0 -20% 100% -20%); } to { clip-path: inset(0 -20% -20% -20%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } }
@keyframes card-in { from { opacity: 0; transform: rotate(-24deg) translate(-80px, 80px); } }
@keyframes stamp { 0% { opacity: 0; transform: rotate(calc(var(--n) * 23deg - 30deg)) scale(2.2); } 60% { opacity: 1; } 100% { opacity: 1; } }
@keyframes phone-in { from { opacity: 0; transform: translate(60px, 120px) rotate(8deg); } }
@keyframes pop { from { opacity: 0; transform: scale(0.6) translateY(20px); } }
@keyframes float { 50% { transform: translateY(-12px); } }

/* ── Ticker of places ── */
.marquee { background: var(--brand); color: #fff; overflow: hidden; padding-block: 20px; }
.marquee__track { display: flex; width: max-content; }
.marquee__track span { flex: none; padding-right: 0.6em; font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2rem); white-space: nowrap; }
.marquee__track span::after { content: " ·"; }
@media (prefers-reduced-motion: no-preference) { .marquee__track { animation: ticker 48s linear infinite; } }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ── Sub-page hero: dark, text left, phone right ── */
.page-hero { position: relative; background: var(--ristretto); color: var(--on-dark); padding-block: 88px 104px; overflow: clip; }
.page-hero .kicker { color: var(--brand-hi); }
.page-hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.page-hero h1 { margin-top: 12px; font-size: clamp(2.8rem, 5.6vw, 4.9rem); line-height: 1.02; max-width: 12ch; }
.lede { margin-top: 24px; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.45; color: var(--on-dark-2); max-width: 36ch; }
.lede--more { margin-top: 14px; font-size: 1.05rem; }
.page-hero__visual { display: flex; justify-content: center; }
.iphone--hero { --w: 300px; }
.page-hero .legend li { color: var(--on-dark); }
.page-hero .role { background: var(--ristretto-2); color: var(--on-dark); box-shadow: 0 0 0 1px var(--ristretto-line); }
.page-hero--plain { padding-bottom: 72px; }
.page-hero--plain h1 { max-width: 16ch; }
@media (prefers-reduced-motion: no-preference) {
  .page-hero h1 { animation: title-in 1100ms var(--ease) both 80ms; }
  .page-hero .lede { animation: fade-up 900ms var(--ease) both 300ms; }
  .page-hero__visual { animation: phone-in 1200ms var(--ease) both 250ms; }
  .iphone--hero { animation: float 7s ease-in-out infinite 1500ms; }
}

/* ── Sections ── */
.section { padding-block: clamp(88px, 11vw, 136px); }
.section--tight { padding-top: 48px; }
.section--gray, .section--stone { background: var(--stone); }
.section__sub { margin-top: 18px; font-size: 1.2rem; color: var(--text-2); max-width: 42ch; }

/* Entry cards on the home page: small menu cards with a double rule */
.entries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.entry { position: relative; display: flex; flex-direction: column; padding: 34px 30px 40px; border-radius: 20px;
  background: var(--tile); text-decoration: none; box-shadow: 0 0 0 1px var(--line); transition: transform 500ms var(--ease), box-shadow 300ms; }
.entry::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--line); border-radius: 13px; pointer-events: none; transition: border-color 300ms; }
.entry:hover { transform: translateY(-8px); box-shadow: 0 0 0 1px var(--line), 0 40px 60px -40px rgba(60, 25, 8, 0.45); }
.entry:hover::before { border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.entry__kicker { font-weight: 600; color: var(--brand); }
.entry__title { margin-top: 8px; font-family: var(--serif); font-size: 1.9rem; line-height: 1.12; }
.entry__more { margin-top: 12px; color: var(--brand); font-weight: 600; }
.entry__more::after { content: " ›"; display: inline-block; transition: transform 300ms var(--ease); }
.entry:hover .entry__more::after { transform: translateX(5px); }
.iphone--entry { --w: 220px; margin: 52px auto 0; transition: transform 600ms var(--ease); }
.entry:hover .iphone--entry { transform: translateY(-10px) rotate(-2deg); }

/* Espresso band: points or cashback, the figures roll in */
.band { background: var(--ristretto); color: var(--on-dark); padding-block: clamp(88px, 10vw, 128px); }
.band__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.band h2 { color: var(--on-dark); }
.band__sub { margin-top: 16px; font-size: 1.2rem; color: var(--on-dark-2); max-width: 34ch; }
.band .button { margin-top: 32px; }
.band__figures { margin: 0; display: grid; gap: 34px; }
.band__figures div { padding-top: 20px; border-top: 1px solid var(--ristretto-line); }
.band__figures dt { font-family: var(--serif); font-size: clamp(3.4rem, 7vw, 5.4rem); line-height: 1; color: var(--brand-hi); }
.band__figures dd { margin: 8px 0 0; color: var(--on-dark-2); font-size: 1.1rem; }
.roll .ch { display: inline-block; }
.js .roll.is-rolling .ch { animation: roll 900ms var(--ease) both; animation-delay: calc(var(--c) * 60ms); }
@keyframes roll { from { opacity: 0; transform: translateY(0.7em) rotateX(-70deg); } }

/* Highlights gallery: full phones, never cut */
.gallery { margin-top: 56px; }
.gallery__track { list-style: none; margin: 0; display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px max(22px, calc((100vw - 1180px) / 2)) 28px; scroll-padding-inline: max(22px, calc((100vw - 1180px) / 2)); scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.tile { flex: none; scroll-snap-align: start; width: 340px; border-radius: 24px; background: var(--tile); box-shadow: 0 0 0 1px var(--line);
  display: flex; flex-direction: column; align-items: center; padding-bottom: 36px; transition: transform 500ms var(--ease); }
.tile:hover { transform: translateY(-6px); }
.tile__text { padding: 32px 30px 0; align-self: stretch; min-height: 148px; }
.tile h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.15; letter-spacing: 0; }
.tile p { margin-top: 8px; color: var(--text-2); }
.iphone--tile { --w: 230px; margin-top: 24px; }
.gallery__controls { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.round { width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--text); color: var(--bg); transition: transform 300ms var(--ease), opacity 200ms; }
.round:hover { transform: scale(1.08); }
.round:disabled { opacity: 0.25; cursor: default; transform: none; }
.round svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* A visit, printed as a till receipt that comes out of the printer when it scrolls into view */
.visit { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.visit .next { grid-column: 1 / -1; }
.bon { position: relative; width: min(460px, 100%); justify-self: center; padding-top: 14px; }
.bon__slot { position: absolute; left: -16px; right: -16px; top: 0; height: 22px; border-radius: 12px; background: var(--ristretto); z-index: 2;
  box-shadow: inset 0 -6px 0 #2E241F; }
.bon__paper {
  --tooth: 10px;
  position: relative; background: var(--paper); color: var(--text); padding: 30px 30px calc(30px + var(--tooth));
  font-family: var(--mono); font-size: 0.9rem;
  filter: drop-shadow(0 24px 30px rgba(40, 20, 8, 0.16)) drop-shadow(0 0 1px rgba(40, 20, 8, 0.35));
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--tooth) * 2) var(--tooth) repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--tooth) * 2) var(--tooth) repeat-x;
}
.bon__head { display: grid; gap: 2px; text-align: center; color: var(--text-2); font-size: 0.8rem; padding-bottom: 16px; border-bottom: 1.5px dashed #A99C92; }
.bon__shop { font-weight: 700; font-size: 1.05rem; color: var(--text); }
.bon__foot { margin-top: 18px; padding-top: 16px; border-top: 1.5px dashed #A99C92; text-align: center; color: var(--text-2); font-size: 0.82rem; }
.steps { list-style: none; padding: 0; margin: 8px 0 0; counter-reset: step; display: grid; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.4em 1fr; padding-block: 16px; }
.steps li + li { border-top: 1px dotted #C5BAB1; }
.steps li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; font-weight: 700; color: var(--brand); }
.steps h3 { font-family: var(--mono); font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.steps p { margin-top: 4px; color: var(--text-2); }
@media (prefers-reduced-motion: no-preference) {
  .js .bon__paper { clip-path: inset(0 0 100% 0); transform: translateY(-40px); }
  .js .bon.is-visible .bon__paper { clip-path: inset(0 0 -40px 0); transform: none; transition: clip-path 2.4s steps(24, end), transform 2.4s steps(24, end); }
}

/* Feature rows, alternating; numbered flow */
.flow { list-style: none; padding: 0; margin: 40px 0 0; counter-reset: step; display: grid; gap: 40px; }
.flow li { counter-increment: step; display: grid; grid-template-columns: 64px 1fr; column-gap: 8px; }
.flow li::before { content: counter(step); grid-row: span 2; font-family: var(--serif); font-size: 2.8rem; line-height: 1; color: var(--brand); }
.flow p { margin-top: 8px; color: var(--text-2); max-width: 34ch; }
.flow-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.flow-grid__visual { display: flex; justify-content: center; }
.iphone--flow { --w: 280px; }
.rows { display: grid; gap: clamp(96px, 12vw, 150px); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.row--flip .row__text { order: 2; }
.row__text h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); max-width: 15ch; }
.row__text > p { margin-top: 18px; font-size: 1.14rem; color: var(--text-2); max-width: 40ch; }
.row__visual { position: relative; isolation: isolate; display: flex; justify-content: center; }
.row__visual::before { /* a plate behind every phone */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 52%; width: min(430px, 92%); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--stone); box-shadow: inset 0 0 0 22px var(--bg), inset 0 0 0 23px var(--line);
}
.section--gray .row__visual::before, .section--stone .row__visual::before { background: var(--bg); box-shadow: inset 0 0 0 22px var(--stone), inset 0 0 0 23px var(--line); }
.iphone--row { --w: 280px; }

/* Reward list like a menu card */
.menu { list-style: none; padding: 0; margin: 28px 0 0; max-width: 420px; }
.menu li { display: flex; align-items: baseline; gap: 10px; padding-block: 10px; font-weight: 500; }
.menu__dots { flex: 1; border-bottom: 2px dotted var(--line); transform: translateY(-4px); }
.menu li > span:last-child { font-family: var(--serif); color: var(--brand); white-space: nowrap; }

/* Pairs of phones with captions */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: 72px; margin-top: 72px; }
.pair figure { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.iphone--pair { --w: 270px; transition: transform 600ms var(--ease); }
.pair figure:hover .iphone--pair { transform: translateY(-8px); }
.pair figcaption { margin-top: 28px; }
.pair strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.6rem; }
.pair figcaption span { display: block; margin-top: 6px; color: var(--text-2); }

/* Rules and facts, set like a menu: name, dotted leader, then the explanation */
.rules { margin: 52px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
.rules div { padding: 24px 0; border-top: 1px solid var(--line); }
.rules dt { display: flex; align-items: baseline; gap: 12px; font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; }
.rules dt::after { content: ""; flex: 1; min-width: 24px; border-bottom: 2px dotted var(--line); transform: translateY(-5px); }
.rules dd { margin: 8px 0 0; color: var(--text-2); max-width: 46ch; }
.facts { list-style: none; padding: 0; margin: 52px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.facts li { background: var(--tile); border-radius: 20px; padding: 32px 28px; box-shadow: 0 0 0 1px var(--line); transition: transform 500ms var(--ease); }
.section--gray .facts li, .section--stone .facts li { background: var(--bg); }
.facts li:hover { transform: translateY(-6px); }
.facts p { margin-top: 8px; color: var(--text-2); }

/* Roles table */
.table-wrap { margin-top: 44px; overflow-x: auto; border-radius: 18px; background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
.roles { width: 100%; border-collapse: collapse; min-width: 560px; }
.roles th, .roles td { padding: 17px 20px; border-bottom: 1px solid var(--line); text-align: center; }
.roles tr:last-child th, .roles tr:last-child td { border-bottom: 0; }
.roles thead th { background: var(--ristretto); color: var(--on-dark); font-weight: 600; font-size: 0.95rem; }
.roles tbody th { text-align: left; font-weight: 500; }
.roles thead th:first-child { text-align: left; }
.roles tbody tr { transition: background-color 200ms; }
.roles tbody tr:hover { background: var(--stone); }
.roles .yes { color: var(--brand); font-size: 0.9rem; font-weight: 600; }
.roles .no { color: var(--text-2); }
.roles .part { color: var(--text-2); font-size: 0.9rem; }
.footnote { margin-top: 16px; color: var(--text-2); font-size: 0.9rem; }

/* Compare (points / cashback) */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.compare__col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.iphone--compare { --w: 280px; }
.compare h2 { margin-top: 44px; font-size: 2.4rem; }
.specs { margin: 20px 0 0; display: grid; gap: 20px; }
.specs dt { font-family: var(--serif); font-size: 1.75rem; color: var(--brand); }
.specs dd { margin: 2px auto 0; color: var(--text-2); max-width: 28ch; }

/* Calculator on a till receipt */
.calc-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.receipt { margin: 0; justify-self: center; width: min(400px, 100%); }
.receipt__paper {
  --tooth: 10px;
  background: var(--paper); color: #1F1A17; font-family: var(--mono); font-size: 0.92rem;
  padding: 28px 26px calc(28px + var(--tooth)); transform: rotate(-1.5deg);
  filter: drop-shadow(0 22px 30px rgba(40, 20, 8, 0.18)) drop-shadow(0 0 1px rgba(40, 20, 8, 0.3));
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--tooth) * 2) var(--tooth) repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--tooth) * 2) var(--tooth) repeat-x;
  transition: transform 600ms var(--ease);
}
.receipt:hover .receipt__paper { transform: rotate(0deg) translateY(-4px); }
.receipt__shop { font-weight: 700; font-size: 1.02rem; text-align: center; }
.receipt__meta { text-align: center; color: #7A6A60; font-size: 0.82rem; margin-top: 2px; }
.mode { display: grid; grid-template-columns: 1fr 1fr; margin: 22px 0 18px; border: 1.5px solid #1F1A17; border-radius: 10px; overflow: hidden; }
.mode button { font: inherit; font-weight: 700; padding: 9px 4px; border: 0; cursor: pointer; background: transparent; color: #1F1A17; transition: background-color 250ms, color 250ms; }
.mode button[aria-checked="true"] { background: #1F1A17; color: #FCFBF8; }
.line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 8px; }
.money-field { display: inline-flex; align-items: baseline; gap: 6px; border-bottom: 1.5px dashed #9C8C82; }
.money-field input { font: inherit; font-weight: 700; font-size: 1.12rem; width: 7.5ch; text-align: right; border: 0; background: transparent; color: inherit; padding: 2px 0; }
.money-field input:focus { outline: none; }
.money-field:focus-within { border-bottom-color: #B8461F; border-bottom-style: solid; }
.receipt__error { color: #B3261E; font-size: 0.82rem; text-align: right; }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper button { font: inherit; font-size: 1.1rem; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; border: 1.5px solid #1F1A17; background: transparent; color: #1F1A17; }
.stepper button:disabled { opacity: 0.3; cursor: default; }
.stepper output { min-width: 4.5ch; text-align: center; font-weight: 700; }
.receipt__cut { border: 0; border-top: 1.5px dashed #9C8C82; margin: 18px 0 16px; }
.receipt__label { font-size: 0.82rem; color: #7A6A60; }
.receipt__total { font-family: var(--serif); font-size: clamp(2.4rem, 7vw, 3rem); line-height: 1.1; color: #1F7A4D; font-variant-numeric: tabular-nums; }
.receipt__total.bump { animation: bump 260ms ease-out; }
@keyframes bump { 40% { transform: scale(1.06); } }
.receipt__rule { font-size: 0.82rem; color: #7A6A60; margin-top: 4px; }

/* "Next page" link at the end of each page */
.next { display: flex; flex-direction: column; gap: 2px; margin-top: 96px; padding-top: 30px; border-top: 1px solid var(--line); text-decoration: none; }
.next span { color: var(--text-2); font-size: 0.95rem; }
.next strong { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4.4vw, 3.4rem); color: var(--text); transition: color 250ms; }
.next strong::after { content: " ›"; display: inline-block; color: var(--brand); transition: transform 400ms var(--ease); }
.next:hover strong { color: var(--brand); }
.next:hover strong::after { transform: translateX(10px); }

/* Footer: back in the dark room */
.foot { background: var(--ristretto); color: var(--on-dark-2); font-size: 0.88rem; padding-block: 56px; }
.foot__grid { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.foot__brand { font-family: var(--serif); font-size: 2.2rem; color: var(--brand-hi); text-decoration: none; }
.foot__grid p { margin-top: 8px; max-width: 46ch; }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 24px; align-content: flex-start; }
.foot__links a { color: var(--on-dark); text-decoration: none; }
.foot__links a:hover { color: var(--brand-hi); }

/* Scroll reveal (only when JS runs); siblings come in one after another */
.js .reveal { opacity: 0; transform: translateY(44px); transition: opacity 900ms var(--ease), transform 1000ms var(--ease); transition-delay: calc(var(--r, 0) * 110ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Tablet */
@media (max-width: 980px) {
  .menu-toggle { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font: inherit; font-weight: 600; font-size: 0.95rem;
    color: var(--on-dark); background: none; border: 0; padding: 8px 4px; cursor: pointer; }
  .menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform 200ms ease; }
  .menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .menu-toggle__bars::before { top: -6px; }
  .menu-toggle__bars::after { top: 6px; }
  .menu-open .menu-toggle__bars { background: transparent; }
  .menu-open .menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
  .menu-open .menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
  .localnav__links { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0;
    padding: 8px 22px 22px; background: var(--ristretto); border-bottom: 1px solid var(--ristretto-line); box-shadow: 0 24px 30px -20px rgba(0, 0, 0, 0.6); }
  .menu-open .localnav__links { display: flex; }
  .localnav__links a { padding: 15px 0; font-size: 1.2rem; border-radius: 0; border-bottom: 1px solid var(--ristretto-line); }
  .localnav__links a:hover, .localnav__links a[aria-current="page"] { background: none; color: var(--brand-hi); }
  .lang { margin-left: 4px; }
  .hero__grid { grid-template-columns: 1fr; gap: 56px; }
  .hero h1 { max-width: 13ch; }
  .scene { width: min(560px, 100%); margin-inline: auto; }
  .entries { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .band__grid, .page-hero__grid, .flow-grid, .calc-grid, .visit { grid-template-columns: 1fr; }
  .page-hero { padding-top: 64px; }
  .row, .row--flip { grid-template-columns: 1fr; gap: 48px; }
  .row--flip .row__text { order: 0; }
  .facts { grid-template-columns: 1fr 1fr; }
}
/* Phone */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .localnav__inner { gap: 14px; }
  .hero { padding-top: 48px; }
  .actions .button { flex: 1 1 100%; justify-content: center; }
  .scene { height: 640px; }
  .stampcard { width: 220px; left: 0; top: 0; padding: 14px 16px 18px; }
  .scene__phone { top: 170px; }
  .stampcard__shop { font-size: 1.3rem; }
  .stampcard__slots { gap: 8px; margin-top: 12px; }
  .stampcard__slots i:not(.is-empty)::after { font-size: 0.95rem; }
  .iphone--scene { --w: 215px; }
  .chip { font-size: 0.85rem; padding: 10px 14px 10px 10px; }
  .chip::before { width: 24px; height: 24px; }
  .chip--points { left: 0; top: 560px; }
  .chip--reward { left: 0; right: auto; top: 250px; white-space: normal; max-width: 120px; }
  .iphone--hero, .iphone--row, .iphone--flow, .iphone--compare { --w: 250px; }
  .tile { width: 290px; }
  .tile__text { padding: 28px 24px 0; min-height: 132px; }
  .iphone--tile { --w: 210px; }
  .rules, .facts { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; gap: 72px; }
  .pair { grid-template-columns: 1fr; gap: 72px; }
  .receipt__paper, .bon__paper { padding-inline: 20px; }
  .lang button { padding: 5px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .receipt__total.bump { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .entry, .tile, .button, .iphone--entry, .iphone--pair, .facts li { transition: none; }
}

/* ---------- Annotations on screenshots ---------- */
.iphone__screen { position: relative; display: block; }
.spot {
  position: absolute; z-index: 2;
  left: calc(var(--sx) * 1%); top: calc(var(--sy) * 1%);
  width: calc(var(--sw) * 1%); height: calc(var(--sh) * 1%);
  border: 2px solid var(--spot, #B8461F); border-radius: calc(var(--w) * 0.03);
  background: color-mix(in srgb, var(--spot, #B8461F) 7%, transparent);
  pointer-events: none;
}
.spot__n {
  position: absolute; left: 0; top: 0; transform: translate(-45%, -45%);
  width: max(20px, calc(var(--w) * 0.075)); height: max(20px, calc(var(--w) * 0.075)); border-radius: 50%;
  display: grid; place-items: center; font: 700 max(11px, calc(var(--w) * 0.04)) / 1 var(--sans);
  color: #fff; background: var(--spot, #B8461F); box-shadow: 0 0 0 2px #fff, 0 4px 10px -3px rgba(0, 0, 0, 0.35);
}
.annotated { display: flex; flex-direction: column; align-items: center; }
.legend { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; max-width: 340px; }
.legend li { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 0.98rem; }
.legend__n { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 0.75rem/1 var(--sans); color: #fff; background: var(--spot, #B8461F); }
.annotated:has([data-role="till"]) { --spot: #1F7A4D; }
.annotated:has([data-role="owner"]) { --spot: #3D3A8C; }
.js .legend li { opacity: 0; transform: translateY(6px); }
.js .annotated:has(.is-lit) .legend li { opacity: 1; transform: none; transition: opacity 400ms ease, transform 400ms ease; transition-delay: calc(650ms + var(--i) * 350ms); }
.iphone[data-role="till"] { --spot: #1F7A4D; }
.iphone[data-role="owner"] { --spot: #3D3A8C; }
.page-hero .annotated:has([data-role="owner"]) { --spot: #8F8BE8; }
.page-hero .iphone[data-role="owner"] { --spot: #8F8BE8; }

.js .spot { opacity: 0; transform: scale(0.94); }
.js .is-lit .spot { opacity: 1; transform: none; transition: opacity 500ms ease, transform 600ms var(--ease);
  transition-delay: calc(350ms + var(--i) * 350ms); animation: spot-pulse 1400ms ease-out calc(950ms + var(--i) * 350ms) 1; }
@keyframes spot-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--spot, #B8461F) 45%, transparent); }
  100% { box-shadow: 0 0 0 calc(var(--w) * 0.05) transparent; }
}

/* QR code: a ring runs once around every 30 seconds – exactly how often the code changes. */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.spot--timer { border-color: color-mix(in srgb, var(--spot, #B8461F) 25%, transparent); }
.spot--timer::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px;
  background: conic-gradient(var(--spot, #B8461F) var(--sweep), transparent 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.is-lit .spot--timer::before { animation: sweep 30s linear infinite; }
@keyframes sweep { to { --sweep: 360deg; } }

/* Whose screen is this? A small label above the phone. */
.role {
  position: absolute; z-index: 3; left: 50%; top: calc(var(--w) * -0.13); transform: translateX(-50%);
  font: 600 0.82rem/1 var(--sans); letter-spacing: 0.01em; white-space: nowrap;
  padding: 7px 12px 7px 24px; border-radius: 999px; color: var(--text);
  background: var(--tile); box-shadow: 0 0 0 1px var(--line);
}
.role::before { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--spot, #B8461F); }
.role--till::before { background: #1F7A4D; }
.role--owner::before { background: #3D3A8C; }
.row__visual, .page-hero__visual, .compare__col, .pair figure, .story__sticky { padding-top: 34px; }

/* Text highlight: a marker stroke drawn in when the text becomes visible. */
.hl {
  color: inherit; background: linear-gradient(transparent 58%, color-mix(in srgb, #B8461F 24%, transparent) 58%) no-repeat;
  background-size: 0% 100%; transition: background-size 900ms var(--ease) 350ms; padding: 0 1px;
}
.is-visible .hl, .hl.is-visible { background-size: 100% 100%; }
.hero .hl, .page-hero .hl, .band .hl { background-image: linear-gradient(transparent 58%, rgba(240, 131, 90, 0.4) 58%); }

/* ---------- Till: one phone follows the steps ---------- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 24px; }
.story__steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.story__step { counter-increment: step; min-height: 62vh; display: grid; grid-template-columns: 84px 1fr; align-content: center;
  opacity: 0.3; transform: translateX(-10px); transition: opacity 500ms ease, transform 700ms var(--ease); }
.story__step > * { grid-column: 2; }
.story__step.is-active { opacity: 1; transform: none; }
.story__step::before { content: counter(step); grid-column: 1; grid-row: 1; align-self: start;
  font-family: var(--serif); font-size: 3.4rem; line-height: 1; color: var(--brand); }
.story__step h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.08; }
.story__step p { margin-top: 12px; font-size: 1.12rem; color: var(--text-2); max-width: 36ch; }
.story__mobile { display: none; }
.story__stage { position: relative; isolation: isolate; }
.story__sticky { position: sticky; top: calc(50vh - 340px); height: 680px; display: grid; place-items: center; }
.story__sticky::before { content: ""; position: absolute; z-index: -1; width: 460px; aspect-ratio: 1; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -48%);
  background: var(--bg); box-shadow: inset 0 0 0 24px var(--stone), inset 0 0 0 25px var(--line); }
.story__layer { grid-area: 1 / 1; opacity: 0; transform: translateY(30px) rotate(3deg) scale(0.96); transition: opacity 500ms ease, transform 800ms var(--ease); }
.story__layer.is-active { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .story { grid-template-columns: 1fr; }
  .story__stage { display: none; }
  .story__step { min-height: 0; opacity: 1; transform: none; grid-template-columns: 56px 1fr; padding-bottom: 72px; }
  .story__step::before { font-size: 2.6rem; }
  .story__mobile { display: flex; justify-content: center; margin-top: 56px; grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .js .spot, .js .legend li { opacity: 1; transform: none; transition: none; animation: none; }
  .is-lit .spot--timer::before { animation: none; --sweep: 360deg; }
  .hl { transition: none; background-size: 100% 100%; }
  .story__step, .story__layer { transition: none; }
}