/* The first screen plays one night of a business: the hour moves, the steel door comes down and the phone keeps answering.
   The sections below follow the scroll, quietly, and the page ends with a door opening on the button. */
:root {
  --ink: #0e1420;
  --paper: #ffffff;
  --tint: #f3f5f9;
  --line: #dfe3ea;
  --muted: #566072;
  --brand: #005cbb; /* The primary color of the panel. */
  --sign: #ffc812;
  --red: #d7261e;
  --night: #0f1836;
  --steel: #6d747d;
  --steel-dark: #4f555d;
  --chat: #ece5dd;
  --bubble-out: #d9fdd3;
  --bubble-in: #ffffff;
  --wa-deep: #0b5c4f;

  --font-body: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", monospace;
  --font-logo: "Zappe Logo", Roboto, "Segoe UI", sans-serif;

  --bar-h: 68px;
  --vh: 1vh;

  /* Changed by app.js as the hour moves. */
  --sky: #f6ab20;
  --on-sky: var(--ink);
  --on-sky-strong: var(--ink);
  --logo: var(--brand);
  --cta-bg: var(--ink);
  --cta-fg: var(--sign);
  --lamp: 0;
  --shut: 0;

  --focus: var(--brand);

  color-scheme: light;
}

@supports (height: 1svh) {
  :root { --vh: 1svh; }
}

@font-face { font-family: "Geist"; src: url("fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* Only the letters of the logo: the panel writes its name in Roboto. */
@font-face { font-family: "Zappe Logo"; src: url("fonts/roboto-zappe.woff2") format("woff2"); font-weight: 400; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--bar-h); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--font-body);
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ol, ul, fieldset, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

h2 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 600; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
h3 { font-size: 1.2rem; font-weight: 600; line-height: 1.25; letter-spacing: -.018em; }

/* What rises into place the first time it is seen. */
[data-reveal] { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(26px); }

/* ---------- Top bar ---------- */

.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--bar-h);
  padding-inline: max(32px, calc((100% - 1176px) / 2));
  background: var(--sky); /* what scrolls under the bar never touches the logo */
  color: var(--on-sky);
  --focus: var(--on-sky);
}

.bar--solid {
  --logo: var(--brand);
  --focus: var(--brand);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 0 var(--line);
  color: var(--ink);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* The same mark as the panel: outlined bubble of 24 px, 8 px of gap, the name at 22 px. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--logo);
  font: 400 22px/28px var(--font-logo);
  letter-spacing: 0;
  text-decoration: none;
  transition: color .25s ease;
}
.logo__icon { display: block; width: 24px; height: 24px; fill: currentColor; }

.bar__links { display: flex; gap: 24px; margin-left: auto; font-size: .97rem; }
.bar__links a { font-weight: 500; text-decoration: none; }
.bar__links a:hover { text-decoration: underline; text-underline-offset: 4px; }

.bar__cta {
  padding: 8px 15px;
  border: 1.5px solid currentColor;
  border-radius: 10px;
  font-size: .97rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.bar--solid .bar__cta { border-color: var(--brand); background: var(--brand); color: var(--paper); }

.bar__progress {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--on-sky-strong);
  transform: scaleX(var(--page, 0));
  transform-origin: 0 50%;
}
.bar--solid .bar__progress { background: var(--brand); }

/* ---------- The story of one night ---------- */

.story { --focus: var(--on-sky); background: var(--sky); color: var(--on-sky); overflow-x: clip; }

.story__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 630px);
  gap: 0 48px;
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: max(32px, env(safe-area-inset-left, 0px)) max(32px, env(safe-area-inset-right, 0px));
}

.story__copy {
  display: grid;
  gap: 22px;
  align-content: center;
  justify-items: start;
  padding-block: calc(var(--bar-h) + 28px) 32px;
}

h1 {
  font-size: min(calc((100vw - 742px) / 7.7), 4.05rem); /* "O WhatsApp não." fills its column on one line */
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -.048em;
}
h1 span { display: block; }
.h1__door { opacity: calc(1 - var(--shut) * .42); }
.h1__whatsapp { color: var(--on-sky-strong); }

.story__lead { max-width: 31em; font-size: clamp(1.06rem, 1.45vw, 1.2rem); line-height: 1.5; letter-spacing: -.012em; }

.story__actions { display: grid; gap: 12px; justify-items: start; }

.story__note { max-width: 31em; font-size: .94rem; opacity: .86; }

.button {
  display: inline-block;
  padding: 15px 24px;
  border-radius: 12px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-decoration: none;
  transition: transform .15s ease;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(1px); }

/* ---------- Stage ---------- */

.stage {
  --phone-h: clamp(440px, calc(100 * var(--vh) - var(--bar-h) - 118px), 556px);
  display: grid;
  gap: 12px;
  align-content: center;
  min-width: 0;
  padding-block: calc(var(--bar-h) + 12px) 16px;
}

.segments { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  padding: 6px 13px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: var(--on-sky);
  font-size: .92rem;
  font-weight: 500;
}
.chip[aria-pressed="true"] { border-color: var(--on-sky-strong); background: var(--on-sky-strong); color: var(--sky); }

/* The phone stands in front of the shop; the clock sits under the shop, beside the phone. */
.scene { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; }

.scene__side { display: grid; gap: 16px; min-width: 0; margin-left: -36px; padding-top: 12px; }

.shop { position: relative; }

.shop__lamp {
  position: absolute;
  top: -70px;
  left: 50%;
  width: 150%;
  height: 340px;
  background: radial-gradient(closest-side, rgba(255, 214, 110, .34), rgba(255, 214, 110, 0));
  opacity: var(--lamp);
  pointer-events: none;
  transform: translateX(-50%);
}

.shop__sign {
  position: relative;
  padding: 10px 14px;
  border: 3px solid var(--ink);
  border-radius: 6px 6px 0 0;
  background: var(--sign);
  box-shadow: 0 0 calc(var(--lamp) * 42px) rgba(255, 214, 110, .55);
  color: var(--ink);
  font-size: clamp(1.02rem, 1.9vw, 1.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-align: center;
}

.shop__front {
  position: relative;
  height: clamp(150px, calc(100 * var(--vh) - 510px), 300px);
  border: 3px solid var(--ink);
  border-top: 0;
  background: #fff3cf;
  overflow: hidden;
}

.shop__inside { position: absolute; inset: 0; }
.shop__room { display: block; width: 100%; height: 100%; }
.shop__open {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 3px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  background: var(--paper);
  font-size: .85rem;
  font-weight: 700;
  transform: rotate(4deg);
}

/* The steel door follows --shut, from 0 (rolled up) to 1 (closed). */
.shop__shutter {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 26px),
    repeating-linear-gradient(to bottom, var(--steel) 0 9px, var(--steel-dark) 9px 11px);
  border-bottom: 7px solid #2c3036;
  transform: translateY(calc((var(--shut) - 1) * 101%));
}

.shop__plate {
  position: absolute;
  top: 40%;
  left: 58%;
  padding: 6px 15px;
  border-radius: 4px;
  background: var(--red);
  color: var(--paper);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.2;
  transform: translate(-50%, -50%) rotate(-3deg);
  white-space: nowrap;
}

.shop__street { height: 12px; background: #2c3036; }

/* Phone */

.phone {
  --focus: var(--brand);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 300px;
  height: var(--phone-h);
  border: 8px solid #0b0b0d;
  border-radius: 32px;
  background: var(--chat);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .35);
  color: var(--ink);
  overflow: hidden;
}

.phone__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 10px;
  background: var(--wa-deep);
  color: var(--paper);
}

.phone__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sign);
  color: var(--ink);
  font-weight: 700;
}

.phone__who { display: grid; min-width: 0; font-size: .95rem; line-height: 1.25; }
.phone__who strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.status { font-size: .78rem; opacity: .95; }
.status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #5fe08a; }
.status[data-state="waiting"]::before { background: var(--sign); }
.status[data-state="human"]::before { background: #7cc4ff; }

.phone__chat {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 10px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.phone__chat:focus-visible { outline-offset: -3px; } /* the phone clips anything outside it */

.phone__reason {
  padding: 8px 12px;
  background: var(--sign);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.3;
}

.msg {
  position: relative;
  flex: none;
  max-width: 88%;
  padding: 7px 10px 6px;
  border-radius: 9px;
  background: var(--bubble-in);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
  font-size: .9rem;
  line-height: 1.34;
  overflow-wrap: anywhere;
}
.msg--out { align-self: flex-end; background: var(--bubble-out); }
.msg--in { align-self: flex-start; }
.msg--new { animation: pop .24s ease-out; }

@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

.msg__by { display: block; margin-bottom: 2px; color: var(--wa-deep); font-size: .72rem; font-weight: 700; }
.msg__time { float: right; margin: 5px 0 0 10px; color: var(--muted); font: 400 .66rem/1 var(--font-mono); }
.msg__note { display: block; margin-bottom: 3px; color: var(--muted); font: 400 .68rem/1.2 var(--font-mono); }

.wave { display: flex; align-items: center; gap: 2px; height: 22px; margin-bottom: 4px; }
.wave i { display: block; width: 3px; border-radius: 2px; background: #6b7c78; }
.wave b { margin-right: 6px; font: 400 .7rem/1 var(--font-mono); }

.msg__transcript { display: block; color: #3e4340; font-style: italic; }

.photo { display: block; width: 100%; margin-bottom: 5px; border-radius: 6px; }

.receipt {
  display: grid;
  gap: 2px;
  margin-bottom: 5px;
  padding: 9px 10px;
  border: 1px dashed #b8b8b0;
  border-radius: 6px;
  background: #f7f7f4;
  font: 400 .72rem/1.3 var(--font-mono);
}
.receipt strong { font-size: .95rem; font-weight: 500; }

.typing { display: flex; flex: none; align-self: flex-end; gap: 4px; padding: 10px 12px; border-radius: 9px; background: var(--bubble-out); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #5d6f69; animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .25; } }

/* The clock */

.dial { display: grid; gap: 6px; padding-left: 56px; }

.dial__clock { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }

.clock { color: var(--on-sky-strong); font: 500 1.9rem/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }

.dial__day { font-size: .95rem; }

.dial__story { min-height: 3em; max-width: 30em; font-size: 1rem; font-weight: 500; line-height: 1.5; letter-spacing: -.012em; }

.dial__label { font-size: .9rem; font-weight: 500; }

#hour { width: 100%; height: 26px; margin: 0; accent-color: var(--on-sky-strong); cursor: grab; }
#hour:active { cursor: grabbing; }

.dial__ends { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 400 .76rem/1.2 var(--font-mono); }
.dial__replay { padding: 3px 10px; border: 1.5px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: inherit; }

.stage__disclaimer { font-size: .8rem; opacity: .82; }

.shutter-band {
  height: 22px;
  background: repeating-linear-gradient(to bottom, var(--steel) 0 5px, var(--steel-dark) 5px 7px);
  border-bottom: 4px solid #2c3036;
}

/* ---------- Plain sections ---------- */

.band { padding-block: clamp(64px, 9vw, 120px); padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
.band--tint { background: var(--tint); }

.band__inner { display: grid; gap: 40px; max-width: 1120px; margin: 0 auto; }
.band__inner.narrow { max-width: 720px; gap: 8px; }

.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 72px; align-items: start; }

.prose { display: grid; gap: 16px; min-width: 0; }
.prose p { max-width: 36em; }

/* Rules */

.rules { display: grid; gap: 10px; margin-top: 6px; }
.rules legend { margin-bottom: 10px; font-weight: 600; }

.rule { display: flex; align-items: center; gap: 12px; width: fit-content; font-size: 1.05rem; cursor: pointer; }
.rule input { width: 22px; height: 22px; margin: 0; accent-color: var(--brand); cursor: pointer; }

.tester { display: grid; gap: 12px; min-width: 0; }
.tester__label { font-weight: 600; }
.tester__picks { display: flex; flex-wrap: wrap; gap: 8px; }

.pick {
  padding: 9px 13px;
  border: 1.5px solid var(--line);
  border-radius: 10px 10px 10px 2px;
  background: var(--paper);
  font-size: .97rem;
  text-align: left;
  transition: border-color .15s ease;
}
.pick:hover { border-color: var(--ink); }
.pick[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.ticket { display: grid; align-content: start; gap: 10px; min-height: 172px; padding: 16px; border-radius: 16px; background: var(--chat); }
.ticket .msg { max-width: 94%; font-size: .98rem; }

.inbox-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3px 10px;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--paper);
  font-size: .94rem;
}
.inbox-row strong { grid-column: 2; font-weight: 600; }
.inbox-row span { grid-column: 2; color: var(--muted); }
.inbox-row i { grid-row: 1 / span 2; width: 12px; height: 12px; border-radius: 50%; background: var(--sign); box-shadow: 0 0 0 2px var(--ink); }
.inbox-row--ai i { background: #5fe08a; }

/* The panel: a picture of the real screen and what to notice in it. */

.tour { --focus: var(--sign); padding-block: clamp(64px, 9vw, 110px); padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); background: var(--night); color: var(--paper); overflow-x: clip; }

.tour__stage { display: grid; justify-items: center; gap: 16px; max-width: 1180px; margin: 0 auto; }

.tour h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); text-align: center; }

.tour__frame {
  width: 100%;
  border-radius: 14px;
  background: #f6f7fb;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  overflow: hidden;
}

.tour__frame img { display: block; width: 100%; height: auto; }

.tour__captions { display: grid; gap: 8px; width: min(100%, 44em); font-size: 1.1rem; line-height: 1.4; letter-spacing: -.012em; }

.tour__note { font-size: .82rem; opacity: .72; }

/* Mini chat */

.sends { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.send { padding: 10px 15px; border: 1.5px solid var(--ink); border-radius: 10px; background: transparent; font-weight: 600; }
.send:hover { background: var(--ink); color: var(--paper); }

.minichat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 430px;
  padding: 16px;
  border-radius: 16px;
  background: var(--chat);
  overflow-y: auto;
}

/* Steps: a real sequence, lit one after the other as the page moves. */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: step; }

.steps li {
  --on: clamp(0, calc(var(--p, 1) * 3 - var(--i)), 1);
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding-top: 16px;
  border-top: 3px solid var(--line);
  counter-increment: step;
  opacity: calc(.38 + var(--on) * .62);
}
.steps li::before { content: counter(step); color: var(--brand); font-size: 2.2rem; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.steps li::after {
  content: "";
  position: absolute;
  inset: -3px 0 auto;
  height: 3px;
  background: var(--brand);
  transform: scaleX(var(--on));
  transform-origin: 0 50%;
}

/* Price */

.poster {
  --p: 1;
  --cta-bg: var(--ink); /* fixed: the color of the night stays in the first screen */
  --cta-fg: var(--sign);
  display: grid;
  gap: 10px;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 24px;
  background: var(--sign);
  transform: translateY(calc((1 - var(--p)) * 48px)) rotate(calc((1 - var(--p)) * -4deg)) scale(calc(.94 + var(--p) * .06));
}

.poster__kicker { font-size: 1.05rem; font-weight: 600; }

.poster__price { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 .12em; font-size: clamp(5.4rem, 13vw, 9.5rem); font-weight: 650; line-height: .98; letter-spacing: -.06em; }
.poster__cur { margin-top: .14em; font-size: .3em; letter-spacing: -.03em; }
.poster__per { align-self: flex-end; margin-bottom: .5em; font-size: .17em; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }

.poster__foot { font-size: 1.05rem; font-weight: 600; }
.poster .button { justify-self: start; margin-top: 8px; }

.includes { display: grid; gap: 8px; }
.includes li { padding-left: 26px; background: linear-gradient(var(--brand), var(--brand)) no-repeat 2px .68em / 12px 2px; }

.calc { display: grid; gap: 6px; margin-top: 8px; padding: 16px; border-radius: 14px; background: var(--paper); }
.calc label { font-weight: 600; }
.calc input { width: 100%; height: 32px; margin: 0; accent-color: var(--brand); }
.calc__out { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font: 500 1rem/1.3 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.fine { color: var(--muted); font-size: .92rem; }

/* FAQ */

details { border-bottom: 1px solid var(--line); }
details:first-of-type { margin-top: 18px; border-top: 1px solid var(--line); }

summary {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-block: 16px;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -.015em;
  list-style: none;
  cursor: pointer;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; color: var(--brand); font-size: 1.4rem; font-weight: 400; line-height: 1.1; }
details[open] summary::after { content: "–"; }

details p { max-width: 38em; padding-bottom: 18px; }

/* Closing: the door of the first screen, now opening on the button. */

.closing {
  --p: 1;
  --cta-bg: var(--sign);
  --cta-fg: var(--ink);
  --focus: var(--sign);
  position: relative;
  display: grid;
  align-items: center;
  min-height: calc(78 * var(--vh));
  padding: clamp(56px, 9vw, 100px) max(20px, env(safe-area-inset-right, 0px)) clamp(56px, 9vw, 100px) max(20px, env(safe-area-inset-left, 0px));
  background: var(--night);
  color: var(--paper);
  overflow: hidden;
}

.closing__door {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 60px),
    repeating-linear-gradient(to bottom, var(--steel) 0 14px, var(--steel-dark) 14px 17px);
  border-bottom: 10px solid #2c3036;
  transform: translateY(calc(var(--p) * -101%));
  will-change: transform;
}
/* It opens with the scroll, so it needs motion allowed and room to be seen moving. */
@media (max-height: 559px), (prefers-reduced-motion: reduce) {
  .closing__door { display: none; }
}

.closing__plate { padding: 8px 18px; border-radius: 6px; background: var(--red); color: var(--paper); font-size: 1.05rem; font-weight: 700; transform: rotate(-2deg); }

.closing__inner { display: grid; justify-items: start; gap: 20px; width: 100%; max-width: 720px; margin: 0 auto; }
.closing h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.closing p { max-width: 34em; font-size: 1.15rem; }

.foot { --focus: var(--sign); padding: 28px max(20px, env(safe-area-inset-right, 0px)) 96px max(20px, env(safe-area-inset-left, 0px)); border-top: 1px solid #2b3560; background: var(--night); color: #c8cbd8; font-size: .9rem; }
.foot__inner { display: grid; gap: 10px; max-width: 1120px; margin: 0 auto; }
.foot__mark { font-size: .82rem; opacity: .85; }

/* Mobile dock and consent */

.dock {
  position: fixed;
  inset: auto 0 0;
  z-index: 20;
  padding: 14px max(20px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  background: var(--brand);
  color: var(--paper);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}
.dock[hidden] { display: none; }
.dock:focus-visible { --focus: var(--paper); outline-offset: -6px; }

.consent {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 30;
  display: grid;
  gap: 10px;
  max-width: 330px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  font-size: .92rem;
}
.consent[hidden] { display: none; }
.consent__actions { display: flex; justify-content: flex-end; gap: 8px; }
.consent__no, .consent__yes { padding: 7px 13px; border: 1.5px solid var(--ink); border-radius: 8px; background: transparent; font-weight: 600; }
.consent__yes { background: var(--ink); color: var(--paper); }

/* ---------- Text and stage side by side, filling the first screen ---------- */

@media (min-width: 1101px) {
  .story__inner { min-height: calc(100 * var(--vh)); }
}

/* Big monitors: the same scene, larger. */
@media (min-width: 1500px) and (min-height: 860px) {
  .bar { padding-inline: max(32px, calc((100% - 1376px) / 2)); }
  .story__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 740px); gap: 0 72px; max-width: 1440px; }
  h1 { font-size: 4.6rem; }
  .story__lead { font-size: 1.3rem; }
  .scene { grid-template-columns: 340px minmax(0, 1fr); }
  .phone { width: 340px; }
  .stage { --phone-h: clamp(440px, calc(100 * var(--vh) - var(--bar-h) - 118px), 680px); }
  .shop__front { height: clamp(150px, calc(100 * var(--vh) - 590px), 380px); }
}

@media (max-width: 1100px) {
  :root { --bar-h: 60px; }
  .bar { padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
  .bar__links { display: none; }
  .bar__cta { margin-left: auto; }
  .story__inner { display: block; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
  .story__copy { padding-block: calc(var(--bar-h) + 26px) 18px; }
  h1 { font-size: clamp(2.5rem, 9.4vw, 5.4rem); }
  .stage { --phone-h: 520px; padding-block: 8px 28px; }
}

@media (max-width: 860px) {
  .two, .steps { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Phones: the shop becomes a strip behind the phone, which takes the screen ---------- */

@media (max-width: 720px) {
  h1 { font-size: clamp(2.35rem, 11.6vw, 4.6rem); }
  .bar--solid .bar__cta { display: none; }

  /* The first screen holds the promise, the button and the door coming down; the rest of the text waits below the phone. */
  .story__inner { display: flex; flex-direction: column; gap: 14px; padding-block: calc(var(--bar-h) + 22px) 28px; }
  .story__copy, .story__actions, .story__lead { display: contents; }
  .lead__first, .lead__more { display: block; }
  .lead__more { order: 2; }
  .story__note { order: 3; }
  .story .button { align-self: flex-start; }

  .stage { --phone-h: clamp(400px, calc(100 * var(--vh) - var(--bar-h) - 270px), 520px); order: 1; display: flex; flex-direction: column; gap: 8px; padding-block: 6px 0; }
  .segments { flex-wrap: nowrap; justify-content: center; gap: 6px; }
  .chip { position: relative; padding: 4px 11px; font-size: .86rem; }
  .chip::after { content: ""; position: absolute; inset: -7px -3px; } /* 44 px to touch, without a taller chip */

  /* The hour above the door, the slider under the phone it moves. */
  .scene { display: flex; flex-direction: column; align-items: center; }
  .scene__side, .dial { display: contents; }
  .dial__clock, .dial__story, .dial__label, .dial__ends { width: 100%; }
  .dial__clock { padding-top: 6px; }
  .clock { font-size: 1.45rem; }
  .dial__day { font-size: .88rem; }
  .dial__story { min-height: 2.8em; margin-block: 2px 8px; font-size: .92rem; line-height: 1.4; }

  .shop { order: 1; width: 100%; }
  .shop__sign { padding: 5px 10px; font-size: .98rem; }
  .shop__front { height: clamp(72px, calc(12 * var(--vh)), 120px); }
  .shop__open { top: 6px; right: 8px; padding: 1px 7px; font-size: .72rem; }
  .shop__plate { top: 38%; font-size: .84rem; padding: 3px 10px; }
  .shop__street { height: 7px; }

  .phone { order: 2; width: min(100%, 340px); margin-top: -12px; border-width: 7px; border-radius: 26px; }

  .dial__label { order: 3; margin-top: 12px; }
  #hour { order: 4; height: 44px; }
  .dial__ends { order: 5; min-height: 34px; }
  .dial__replay { padding: 7px 14px; }
  .stage__disclaimer { font-size: .7rem; text-align: center; }

  .calc input { height: 44px; }
  .poster .button { display: none; } /* the dock is already there, with the same words */

  .tour__captions { font-size: 1rem; }
  .tour h2 { font-size: 1.6rem; }
}

@media (max-width: 360px) {
  .bar { gap: 12px; }
  .bar__cta { padding-inline: 11px; font-size: .9rem; }
}

@media (min-width: 721px) {
  .dock { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .msg--new, .typing i { animation: none; }
  .button, [data-reveal] { transition: none; }
}