/* Inrest, told as one table's night.
   A Dubai lounge at 01:51 on a Saturday night: service-corridor navy, the royal blue of the
   staff app, the signal cyan of "now" on a host's phone, and the thermal-paper white of the
   bill as it prints. Unbounded for the signs, Onest for the words (the app's own face),
   JetBrains Mono for times and receipt lines. The protagonist is the bill of one demo booking,
   OVR2KFQ0: it prints a line per chapter beside the real screens, then goes back to Meta. */

:root {
  /* colour model: rationed accent. Navy and ice carry the area; cyan marks "now" and the
     receipt's stamps; royal is the one action. */
  --night: #0a1230;
  --night-2: #111b44;
  --night-3: #1f2c66;
  --night-line: #2b3a78;
  --on-night: #e9eefa;
  --on-night-2: #aab6d3;
  --royal: #2148ee;
  --royal-hover: #1a3bd0;
  --royal-night: #8d97ff;
  --signal: #19c3ff;
  --signal-ink: #00687f;
  --ice: #eef4fe;
  --ice-2: #dfe8f8;
  --paper: #f6f2e9;
  --paper-2: #e9e2d3;
  --ink: #0e1b40;
  --ink-2: #44526f;
  --line: #d3dcec;

  --display: "Unbounded", "Arial Black", sans-serif;
  --text: "Onest", "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --display-weight: 300;

  /* type: six roles. display 40 → 80, title 30 → 44, heading 22 → 28, lead 20 → 22, body 17 → 18, small 15 */
  --t-display: clamp(2.5rem, 1.45rem + 4.3vw, 5rem);
  --t-title: clamp(1.875rem, 1.5rem + 1.45vw, 2.75rem);
  --t-heading: clamp(1.375rem, 1.26rem + 0.42vw, 1.75rem);
  --t-lead: clamp(1.25rem, 1.21rem + 0.14vw, 1.375rem);
  --t-body: clamp(1.0625rem, 1.04rem + 0.08vw, 1.125rem);
  --t-small: 0.9375rem;

  /* space: asymmetric bands */
  --band-in: clamp(72px, 9vw, 136px);
  --band-out: clamp(104px, 13vw, 200px);
  --gutter: clamp(20px, 4.6vw, 72px);
  --radius-sm: 10px;
  --radius-lg: 18px;

  /* motion */
  --e-settle: cubic-bezier(0.2, 0.86, 0.28, 1);
  --e-leave: cubic-bezier(0.62, 0.02, 0.78, 0.18);
  --t-tap: 130ms;
  --t-state: 280ms;
  --t-panel: 420ms;
  --t-arrive: 860ms;
  --t-drift: 38s;

  --card-w: min(34vw, 31rem);
  --screen-w: min(calc(100vw - 2 * var(--gutter) - var(--card-w) - 48px), 1000px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); color: var(--on-night); scroll-padding-top: 88px; }
body {
  margin: 0; font: 400 var(--t-body)/1.55 var(--text); color: var(--on-night); background: var(--night);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, ul, figure, pre { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
::selection { background: var(--signal); color: var(--night); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: var(--night-line) var(--night); }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 10px 16px; background: var(--paper); color: var(--ink); border-radius: var(--radius-sm); }
.skip:focus { top: 16px; }

h1, h2 { font-family: var(--display); font-weight: var(--display-weight); letter-spacing: -0.035em; text-wrap: balance; }
h1 { font-size: var(--t-display); line-height: 1.02; }
h2 { font-size: var(--t-title); line-height: 1.08; }
h3 { font: 700 var(--t-heading)/1.2 var(--text); letter-spacing: -0.012em; }
.eyebrow { font: 500 var(--t-small)/1.4 var(--mono); color: var(--signal); letter-spacing: 0.02em; margin-bottom: 26px; }
.lede { font-size: var(--t-lead); line-height: 1.45; color: var(--on-night); max-width: 32rem; }
.side-note { font: 400 var(--t-small)/1.5 var(--mono); color: var(--on-night-2); max-width: 30rem; }

/* ---------- buttons and nav ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 26px;
  border-radius: 999px; font: 700 17px/1 var(--text); text-decoration: none; white-space: nowrap;
  transition: transform var(--t-tap) var(--e-settle), box-shadow var(--t-state) var(--e-settle), background-color var(--t-state) var(--e-settle);
}
.btn-primary { background: var(--royal); color: #fff; box-shadow: 0 10px 28px -12px rgb(33 72 238 / 0.9), inset 0 1px 0 rgb(255 255 255 / 0.18); }
.btn-primary:hover { background: var(--royal-hover); transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgb(33 72 238 / 0.95), inset 0 1px 0 rgb(255 255 255 / 0.18); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 6px 16px -10px rgb(33 72 238 / 0.9); }
.btn-pill { min-height: 42px; padding: 0 18px; font-size: 15px; background: var(--royal); color: #fff; }
.btn-pill:hover { background: var(--royal-hover); transform: translateY(-1px); }

.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 28px;
  height: 70px; padding: 0 var(--gutter);
  background: rgb(10 18 48 / 0.84); backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
}
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--on-night); text-decoration: none; }
.brand-mark { width: 30px; height: 34px; }
.brand-word { width: 68px; height: 21px; color: var(--on-night); }
.nav nav { display: flex; gap: 26px; margin-left: 18px; }
.nav nav a { font: 500 var(--t-small)/1 var(--text); color: var(--on-night-2); text-decoration: none; padding: 8px 0; }
.nav nav a:hover, .nav nav a[aria-current="step"] { color: var(--on-night); text-decoration: underline 2px var(--signal); text-underline-offset: 8px; }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.lang { font: 500 var(--t-small)/1 var(--text); color: var(--on-night-2); text-decoration: none; }
.lang:hover { color: var(--on-night); }

/* ---------- the run: one held stage under six chapters ---------- */
.run { background: var(--night); }
.stage { position: relative; height: 100svh; min-height: 640px; }
[data-story="static"] .stage { height: auto; min-height: 0; display: grid; gap: 28px; padding: 110px var(--gutter) 40px; }

.backdrop {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  animation-name: backdrop-drift;
}
.backdrop .plan { fill: none; stroke: var(--night-3); stroke-width: 2; }
.backdrop .seats { fill: var(--night-3); }
.stage::after { /* grain, so the navy reads as a lit room, not a flat fill */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.rig {
  position: absolute; z-index: 2; right: var(--gutter); top: 15svh; width: var(--screen-w);
  animation-name: rig-rise;
}
.rig-peak { transform-origin: 0% 100%; animation-name: rig-peak; }
.screen {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--ice); border: 1px solid rgb(255 255 255 / 0.12);
  box-shadow: 0 50px 90px -40px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(0 0 0 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.5);
  animation: rise var(--t-arrive) var(--e-settle) both 120ms;
}
.chrome { display: flex; gap: 7px; align-items: center; height: 26px; padding: 0 14px; background: #e3eaf8; border-bottom: 1px solid var(--line); }
.chrome i { width: 9px; height: 9px; border-radius: 50%; background: #c2cde3; }
.shots { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ice); }
.shot { position: absolute; inset: 0; width: 100%; height: 100%; }
.shot img, .shot.shot-today { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.pan { width: 100%; height: 100%; }
[data-story="live"] .shot:not(.shot-today) { opacity: 0; transition: opacity 360ms var(--e-settle); }
.run:has(#c-host:not([data-state="before"])) .shot-booking,
.run:has(#c-floor:not([data-state="before"])) .shot-floor,
.run:has(#c-bill:not([data-state="before"])) .shot-pos,
.run:has(#c-ads:not([data-state="before"])) .shot-ads { opacity: 1; }
[data-story="static"] .shot:not(.shot-today) { display: none; }

.shot-booking .pan { transform-origin: 86% 6%; animation-name: push-booking; }
.shot-floor .pan { transform-origin: 36% 46%; animation-name: push-floor; }
.shot-pos .pan { transform-origin: 74% 80%; animation-name: push-pos; }
.shot-ads .pan { transform-origin: 30% 62%; animation-name: push-ads; }

.phone-rig {
  position: absolute; z-index: 3; bottom: 4svh;
  right: calc(var(--gutter) + var(--screen-w) - 120px); width: clamp(150px, 14vw, 210px);
  animation-name: phone-rise;
}
.phone-in { animation-name: phone-focus; }
.phone-out { animation-name: phone-leave; }
.phone {
  overflow: hidden; border-radius: 30px; background: var(--paper);
  border: 7px solid #050b22; box-shadow: 0 40px 70px -30px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(255 255 255 / 0.1);
}
.phone img { width: 100%; height: auto; }

.big-total {
  position: absolute; z-index: 1; right: calc(var(--gutter) - 0.04em); top: 9svh; margin: 0;
  font: 300 clamp(6rem, 22vw, 21rem)/0.8 var(--display); letter-spacing: -0.06em;
  color: rgb(141 151 255 / 0.17); pointer-events: none; font-variant-numeric: tabular-nums;
  animation-name: total-rise; --rest: 0; display: none;
}
.run:has(#c-ads:not([data-state="before"])) .big-total { display: block; }

.handoff { position: absolute; z-index: 4; inset: 0; pointer-events: none; --rest: 0; }
.handoff-line { position: absolute; left: calc(100% - var(--gutter) - 380px); top: 15svh; width: 170px; height: 46svh; overflow: visible; }
.handoff-line path { fill: none; stroke: var(--signal); stroke-width: 2.5; stroke-linecap: butt; stroke-dasharray: 1 1.01; stroke-dashoffset: 1; animation-name: draw-on; }
.chip {
  position: absolute; right: var(--gutter); display: grid; gap: 4px; padding: 12px 16px; margin: 0;
  background: var(--night-2); border: 1px solid var(--signal); border-radius: var(--radius-sm);
  box-shadow: 0 18px 40px -20px rgb(0 0 0 / 0.8); animation-name: chip-in;
}
.chip b { font: 500 var(--t-small)/1.2 var(--text); color: var(--on-night); }
.chip span { font: 400 var(--t-small)/1.2 var(--mono); color: var(--signal); }
.chip-meta { top: 15svh; }
.chip-google { top: calc(15svh + 86px); right: calc(var(--gutter) + 48px); }

/* the bill: the page's signature device */
.receipt {
  position: absolute; z-index: 5; right: calc(var(--gutter) + 18px); bottom: 5svh; width: 330px;
  display: grid; gap: 7px; padding: 18px 20px 22px;
  background: var(--paper); color: var(--ink); rotate: -2deg;
  font: 400 var(--t-small)/1.35 var(--mono);
  box-shadow: 0 30px 60px -28px rgb(0 0 0 / 0.85);
}
.receipt::after { /* torn bottom edge, the same tear the band uses between chapters */
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
  background: radial-gradient(circle at 6px 8px, transparent 5px, var(--paper) 5.5px) 0 0 / 12px 8px repeat-x;
}
.r-head { font-weight: 500; letter-spacing: 0.04em; padding-bottom: 8px; border-bottom: 1px dashed var(--paper-2); }
.r-line { display: grid; grid-template-columns: 3.6em 1fr; gap: 8px; font-size: var(--t-small); line-height: 1.35; }
.r-line time { color: var(--signal-ink); font-weight: 500; }
.r-meta { padding-top: 8px; border-top: 1px dashed var(--paper-2); font-weight: 500; }
.r-foot { color: var(--ink-2); padding-top: 6px; }
[data-story="live"] .run .receipt .r-line { display: none; }
.run:has(#c-click:not([data-state="before"])) :is(.r-click, .r-book),
.run:has(#c-floor:not([data-state="before"])) .r-seat,
.run:has(#c-bill:not([data-state="before"])) .r-bill,
.run:has(#c-ads[data-state="active"], #c-ads[data-state="after"]) .r-meta { display: grid !important; animation: stamp 420ms var(--e-settle) both; }
[data-story="static"] .run .receipt { position: relative; right: auto; bottom: auto; justify-self: end; }

/* chapters scroll over the stage */
.chapter { position: relative; }
.hero.chapter { padding: 128px var(--gutter) 0; }
.hero-copy { position: relative; max-width: 78rem; }
.hero h1 { margin-bottom: 34px; }
.hero h1 .line { display: block; overflow: clip; padding: 0.06em 0.2em 0.14em 0; margin: -0.06em -0.2em -0.14em 0; }
.hero h1 .line > span { display: block; }
.hero h1 .line:nth-child(1) > span { transform: translate3d(0, calc(var(--p, 0) * -125%), 0); }
.hero h1 .line:nth-child(2) > span { transform: translate3d(0, calc(clamp(0, var(--p, 0) * 1.35 - 0.12, 1) * -125%), 0); }
.hero h1 .line:nth-child(3) > span { transform: translate3d(0, calc(clamp(0, var(--p, 0) * 1.7 - 0.3, 1) * -125%), 0); }
.hl { display: inline-block; padding: 0 0.12em 0.04em; margin: 0 0.02em; background: var(--signal); color: var(--night); font-weight: 500; rotate: -1.5deg; }
.hero-foot { display: grid; gap: 26px; max-width: 30rem; opacity: calc(1 - var(--p, 0) * 1.8); transform: translate3d(0, calc(var(--p, 0) * -60px), 0); }
.cta-row { display: grid; gap: 14px; justify-items: start; }
.hero-copy > .eyebrow { opacity: calc(1 - var(--p, 0) * 2.2); }
.hero-copy { animation: rise var(--t-arrive) var(--e-settle) both; }

.chapter:not(.hero) { padding: 0 var(--gutter); }
.card {
  width: var(--card-w); padding: 26px 28px 30px;
  position: relative; background: var(--night-2);
}
.card::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 3px; background: var(--signal); }
[data-story="live"] .card { position: sticky; top: 19svh; margin-top: 14svh; }
.card-time { font: 500 var(--t-small)/1 var(--mono); color: var(--signal); margin-bottom: 16px; }
.card h2 { margin-bottom: 18px; }
.card h2 .line + .line > span { color: var(--on-night-2); }
.card p:not(.card-time) { color: var(--on-night); }
.card-figure { display: grid; gap: 6px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--night-line); }
.card-figure span { font: 300 var(--t-title)/1 var(--display); color: var(--signal); letter-spacing: -0.03em; }
.card-figure small { font: 400 var(--t-small)/1.4 var(--mono); color: var(--on-night-2); }
.card-note { margin-top: 18px; font: 400 var(--t-small)/1.5 var(--mono); color: var(--on-night-2) !important; }

/* ---------- band: the receipt's torn edge as a chapter break ---------- */
.band {
  position: relative; background: var(--paper); color: var(--ink); overflow: clip;
  padding: 26px 0;
}
.band::before, .band::after {
  content: ""; position: absolute; left: 0; right: 0; height: 10px;
  background: radial-gradient(circle at 7px 0, var(--night) 6px, transparent 6.5px) 0 0 / 14px 10px repeat-x;
}
.band::before { top: 0; }
.band::after { bottom: 0; background: radial-gradient(circle at 7px 10px, var(--ice) 6px, transparent 6.5px) 0 0 / 14px 10px repeat-x; }
.band-track { display: flex; width: max-content; animation: band var(--t-drift) linear infinite; }
.band-track span { padding: 12px 0; font: 300 var(--t-heading)/1 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.band-track span::after { content: "·"; padding: 0 0.9em; color: var(--signal-ink); }

/* ---------- service: index rows with the screen inline ---------- */
.service { background: var(--ice); color: var(--ink); padding: var(--band-in) var(--gutter) var(--band-out); }
.section-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 72px; }
.section-lede { color: var(--ink-2); font-size: var(--t-lead); line-height: 1.45; max-width: 34rem; }
.rows { display: grid; }
.row {
  position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 32px 48px; align-items: center; padding: 44px 0;
}
.row-n { font: 300 var(--t-heading)/1 var(--display); color: var(--signal-ink); align-self: start; padding-top: 4px; }
.row-copy { display: grid; gap: 14px; max-width: 30rem; }
.row-copy p { color: var(--ink-2); }
.row-shot { overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 16 / 9; background: var(--ice-2); box-shadow: 0 30px 60px -36px rgb(14 27 64 / 0.45), 0 0 0 1px var(--line); }
.row-shot img { width: 100%; height: 100%; object-fit: cover; }
.crop-today img { object-position: 60% 30%; }
.crop-grid img { object-position: 70% 40%; }
.crop-waitlist img { object-position: 50% 20%; }
.crop-inbox img { object-position: 20% 30%; }
.crop-copilot img { object-position: 60% 45%; }
.row:nth-child(even) .row-shot { margin-left: -6vw; }
.row-rule { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; border: 0; height: 1px; background: var(--line); }

/* ---------- guests: three screens at three rates ---------- */
.guests {
  background: var(--paper); color: var(--ink);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px;
  padding: var(--band-out) var(--gutter) var(--band-in); overflow: clip;
}
[data-story="live"] .guests { min-height: 0; }
.guests-copy { display: grid; gap: 20px; align-content: start; max-width: 34rem; }
.guests-copy h2 { margin-bottom: 8px; }
.guests-copy p { color: var(--ink-2); }
.guests-copy h3 { margin-top: 8px; }
.rule { border: 0; height: 1px; background: var(--paper-2); margin: 16px 0 4px; }
.figure { display: grid; gap: 6px; margin-top: 10px; }
.figure span { font: 300 clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem)/1 var(--display); letter-spacing: -0.04em; color: var(--royal); }
.figure small { font: 400 var(--t-small)/1.45 var(--mono); color: var(--ink-2); }
.guests-art { position: relative; min-height: 720px; }
.g-shot { position: absolute; overflow: hidden; border-radius: var(--radius-lg); background: var(--ice); box-shadow: 0 40px 80px -40px rgb(14 27 64 / 0.55), 0 0 0 1px var(--line); }
.g-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.g1 { top: 0; right: -4vw; width: 112%; aspect-ratio: 16 / 10; translate: 0 calc((1 - var(--enter, 1)) * 90px - var(--p, 0) * 40px); }
.g2 { top: 44%; left: -8%; width: 76%; aspect-ratio: 16 / 11; translate: 0 calc((1 - var(--enter, 1)) * 190px - var(--p, 0) * 110px); }
.g3 { top: 64%; right: -2vw; width: 56%; aspect-ratio: 16 / 12; translate: 0 calc((1 - var(--enter, 1)) * 300px - var(--p, 0) * 190px); }

/* ---------- phones ---------- */
.phones {
  background: var(--night); color: var(--on-night);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center;
  padding: var(--band-in) var(--gutter) var(--band-out); overflow: clip;
}
.phones-art { position: relative; display: flex; gap: 28px; justify-content: center; }
.phones-art .phone { width: min(17vw, 250px); }
.p1 { translate: 0 calc((1 - var(--enter, 1)) * 120px - var(--p, 0) * 30px); }
.p2 { margin-top: 120px; translate: 0 calc((1 - var(--enter, 1)) * 260px - var(--p, 0) * 120px); }
.phones-copy { display: grid; gap: 22px; max-width: 32rem; }
.phones-copy p:not(.side-note) { color: var(--on-night); font-size: var(--t-lead); line-height: 1.45; }

/* ---------- setup ---------- */
.setup { background: var(--ice); color: var(--ink); padding: var(--band-in) var(--gutter) var(--band-out); }
.setup h2 { max-width: 22ch; margin-bottom: 64px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.steps li { display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line); }
.step-n { font: 300 clamp(3rem, 2rem + 3vw, 5rem)/0.9 var(--display); color: var(--royal); letter-spacing: -0.05em; }
.steps p { color: var(--ink-2); }
.code {
  margin-top: 56px; padding: 20px 24px; overflow-x: auto; border-radius: var(--radius-sm);
  background: var(--night); color: var(--on-night); font: 400 var(--t-small)/1.6 var(--mono);
}

/* ---------- questions ---------- */
.faq {
  background: var(--paper); color: var(--ink);
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px;
  padding: var(--band-out) var(--gutter) var(--band-in);
}
.faq h2 { align-self: start; position: sticky; top: 120px; }
.faq-list { display: grid; }
details { border-top: 1px solid var(--paper-2); padding: 22px 0; }
details:last-child { border-bottom: 1px solid var(--paper-2); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; font: 700 var(--t-heading)/1.25 var(--text); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 300 var(--t-heading)/1 var(--display); color: var(--signal-ink); transition: rotate var(--t-state) var(--e-settle); }
details[open] summary::after { rotate: 45deg; }
details p { margin-top: 14px; color: var(--ink-2); max-width: 40rem; }

/* ---------- close: the finished bill comes back beside the button ---------- */
.close { background: var(--night); }
.close-stage { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; align-items: center; padding: 90px var(--gutter) 40px; }
.close-copy { display: grid; gap: 28px; justify-items: start; }
.close-copy h2 { font-size: var(--t-title); max-width: 18ch; }
.close-copy h2 .line + .line > span { color: var(--signal); }
.receipt-full {
  position: relative; right: auto; bottom: auto; justify-self: center; width: min(360px, 100%);
  animation-name: receipt-return;
}
[data-story="static"] .close-stage { padding-block: 140px 120px; }

.foot { background: var(--night-2); color: var(--on-night-2); padding: 56px var(--gutter) 64px; display: grid; gap: 10px; font-size: var(--t-small); }
.foot .brand-word { width: 92px; height: 28px; color: var(--on-night); margin-bottom: 8px; }
.foot a { color: var(--on-night); }

/* ---------- keyframes scrubbed by story.js ---------- */
@keyframes backdrop-drift { from { transform: none; opacity: 0.35; } to { transform: translate3d(0, -70px, 0) scale(1.06); opacity: 1; } }
@keyframes rig-rise { from { transform: translate3d(0, 44svh, 0) scale(0.96); } to { transform: none; } }
@keyframes rig-peak { 0%, 20% { transform: none; } 100% { transform: translate3d(-2vw, 6svh, 0) scale(0.8); } }
@keyframes push-booking { from { transform: none; } to { transform: scale(1.42); } }
@keyframes push-floor { from { transform: none; } to { transform: scale(1.32); } }
@keyframes push-pos { from { transform: none; } to { transform: scale(1.5); } }
@keyframes push-ads { 0%, 15% { transform: none; } to { transform: scale(1.24); } }
@keyframes phone-rise { from { transform: translate3d(0, 34svh, 0); } to { transform: none; } }
@keyframes phone-focus { from { transform: none; } to { transform: translate3d(-3vw, -7svh, 0) scale(1.1) rotate(-3deg); } }
@keyframes phone-leave { from { transform: none; opacity: 1; } 70% { opacity: 1; } to { transform: translate3d(-40vw, 30svh, 0) rotate(-12deg); opacity: 0; } }
@keyframes total-rise { 0%, 25% { transform: translate3d(0, 34svh, 0); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes draw-on { from { stroke-dashoffset: 1; opacity: 0; } 4% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes chip-in { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@keyframes receipt-return { from { transform: translate3d(36vw, 10svh, 0) rotate(8deg); opacity: 0; } 60% { opacity: 1; } to { transform: rotate(-2deg); opacity: 1; } }

/* one-shot motion */
@keyframes rig-rise-phone { from { transform: translate3d(0, 8svh, 0) scale(0.96); } to { transform: none; } }
@keyframes phone-rise-phone { from { transform: translate3d(0, 12svh, 0); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 46px, 0); } }
@keyframes stamp { from { opacity: 0; transform: translate3d(0, -6px, 0); background: rgb(25 195 255 / 0.25); } }
@keyframes band { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  *:not([data-track]), *:not([data-track])::before, *:not([data-track])::after { animation: none !important; transition: none !important; }
  .band-track { flex-wrap: wrap; width: auto; justify-content: center; }
  .band-track span[aria-hidden] { display: none; }
}

/* ---------- tablet and phone ---------- */
@media (max-width: 1100px) {
  :root { --card-w: min(40vw, 26rem); }
  .nav nav { display: none; }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; --card-w: 100%; --screen-w: calc(100vw - 40px); }
  .nav { height: 62px; gap: 14px; }
  .nav-end { gap: 14px; }
  .btn-pill { min-height: 38px; padding: 0 14px; font-size: 14px; }

  .rig { top: auto; bottom: 6svh; }
  .phone-rig { right: auto; left: 14px; bottom: 3svh; width: 27vw; }
  .big-total { top: auto; bottom: 46svh; font-size: 34vw; }
  .handoff-line { display: none; }
  .chip { right: 20px; }
  .chip-meta { top: auto; bottom: calc(6svh + (100vw - 40px) * 0.625 + 92px); }
  .chip-google { top: auto; right: 20px; bottom: calc(6svh + (100vw - 40px) * 0.625 + 30px); }

  .receipt { width: min(78vw, 300px); right: 16px; bottom: calc(6svh + (100vw - 40px) * 0.625 + 6px); font-size: 12px; padding: 12px 14px 16px; gap: 5px; }
  .run .receipt .r-foot { display: none; }
  /* on a phone the bill shows only its newest line */
  .run:has(#c-floor:not([data-state="before"])) :is(.r-click, .r-book),
  .run:has(#c-bill:not([data-state="before"])) .r-seat,
  .run:has(#c-ads[data-state="active"], #c-ads[data-state="after"]) .r-bill { display: none !important; }
  .run:has(#c-click:not([data-state="before"])):not(:has(#c-floor:not([data-state="before"]))) .r-click { display: none !important; }

  /* phone: the screen waits just under the call to action, the bill appears with the first chapter */
  .rig { animation-name: rig-rise-phone; }
  .phone-rig { animation-name: phone-rise-phone; }
  .run:not(:has(#c-click:not([data-state="before"]))) .receipt { opacity: 0; }
  .hero.chapter { padding-top: 92px; }
  .hero h1 { font-size: clamp(2rem, 8.6vw, 2.75rem); letter-spacing: -0.04em; }
  .hero h1 .line, .hero h1 .line > span { display: inline; }
  .hero h1 { opacity: calc(1 - var(--p, 0) * 1.6); }
  .hero-foot { max-width: none; }
  .hero .side-note { display: none; }
  .hero .lede { font-size: var(--t-body); }
  [data-story="live"] .card { top: 9svh; margin-top: 8svh; }
  .card { padding: 18px 20px 22px; }
  .card h2 { font-size: 1.5rem; }
  .card p:not(.card-time):not(.card-note) { font-size: var(--t-small); }

  .section-head, .guests, .phones, .faq, .close-stage { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: 2.6rem minmax(0, 1fr); gap: 18px; padding: 32px 0; }
  .row-shot { grid-column: 1 / -1; }
  .row:nth-child(even) .row-shot { margin-left: -20px; margin-right: 0; }
  .guests-art { min-height: 128vw; }
  .phones-art .phone { width: 42vw; }
  .p2 { margin-top: 70px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .faq h2 { position: static; }
  .close-stage { padding-top: 96px; }
  .receipt-full { animation-name: none; transform: rotate(-2deg); }
}