/* Inrest: the product site in the product's own light.
   The page uses the staff app's palette (ice, white, ink, royal), so the screenshots and the
   page read as one surface. Deep blue appears only on two bands: the hosts' phones and the close.
   One memorable thing: the line of one evening under the held screen, five stops from the
   Instagram ad click to the bill going back to Meta. It fills as you scroll and returns,
   finished, at the end. Everything else stays quiet: no labels over headings, no numbering that
   is not a sequence, nothing floating over a screenshot except the widget phone in its chapter. */

:root {
  --ice: #eef3fc;
  --white: #ffffff;
  --ink: #0e1b40;
  --ink-2: #4a5878;
  --royal: #2148ee;
  --royal-hover: #1a3bd0;
  --deep: #0a1a6e;
  --deep-2: #08145a;
  --on-deep: #eef2ff;
  --on-deep-2: #b9c5f0;
  --line: #d5deee;

  --display: "Unbounded", "Segoe UI", sans-serif;
  --text: "Onest", "Segoe UI", sans-serif;

  /* scale after Bringhurst: 15 · 18 · 21 · 26 · 44 · 72 (phone 15 · 17 · 19 · 21 · 30 · 38) */
  --t-small: 0.9375rem;
  --t-body: clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem);
  --t-lead: clamp(1.1875rem, 1.13rem + 0.25vw, 1.3125rem);
  --t-heading: clamp(1.3125rem, 1.2rem + 0.45vw, 1.625rem);
  --t-title: clamp(1.875rem, 1.45rem + 1.55vw, 2.75rem);
  --t-display: clamp(2.375rem, 1.45rem + 3.6vw, 4.5rem);

  --gutter: max(20px, 5vw, calc((100vw - 1320px) / 2));
  --section-in: clamp(80px, 9vw, 128px);
  --section-out: clamp(96px, 11vw, 160px);
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 28px 60px -32px rgb(14 27 64 / 0.38), 0 0 0 1px var(--line);
  --ease: cubic-bezier(0.22, 0.8, 0.28, 1);

  /* the held stage: copy column, screen, and the evening line under the screen */
  --nav-h: 72px;
  --copy-w: min(32vw, 27rem);
  --stage-top: calc(var(--nav-h) + 5svh);
  --screen-w: min(calc(100vw - 2 * var(--gutter) - var(--copy-w) - 56px), 1000px, calc((100svh - var(--stage-top) - 196px) * 1.6));
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ice); scroll-padding-top: calc(var(--nav-h) + 16px); }
body { margin: 0; font: 400 var(--t-body)/1.6 var(--text); color: var(--ink); background: var(--ice); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
::selection { background: var(--royal); color: var(--white); }
:focus-visible { outline: 3px solid var(--royal); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 10px 16px; background: var(--white); color: var(--ink); border-radius: var(--radius); }
.skip:focus { top: 16px; }

h1, h2 { font-family: var(--display); font-weight: 300; text-wrap: balance; }
h1 { font-size: var(--t-display); line-height: 1.04; letter-spacing: -0.04em; }
h2 { font-size: var(--t-title); line-height: 1.12; letter-spacing: -0.03em; }
h3 { font: 600 var(--t-heading)/1.25 var(--text); letter-spacing: -0.01em; }
.lede { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); max-width: 36rem; }
.note { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); max-width: 34rem; }
.figure { display: grid; gap: 4px; }
.figure span { font: 300 clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem)/1 var(--display); letter-spacing: -0.04em; color: var(--royal); font-variant-numeric: tabular-nums; }
.figure small { font-size: var(--t-small); color: var(--ink-2); }

/* ---------- buttons and nav ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
  border-radius: 999px; font: 600 17px/1 var(--text); text-decoration: none; white-space: nowrap;
  transition: background-color 200ms var(--ease), transform 120ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--royal); color: var(--white); }
.btn-primary:hover { background: var(--royal-hover); }
.btn-light { background: var(--white); color: var(--deep); }
.btn-light:hover { background: var(--ice); }
.btn-pill { min-height: 42px; padding: 0 18px; font-size: 15px; background: var(--royal); color: var(--white); }
.btn-pill:hover { background: var(--royal-hover); }

.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 32px;
  height: var(--nav-h); padding: 0 var(--gutter);
  background: rgb(238 243 252 / 0.88); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgb(14 27 64 / 0.07);
}
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 30px; height: 34px; }
.brand-word { width: 70px; height: 21px; color: var(--ink); }
.nav nav { display: flex; gap: 28px; }
.nav nav a, .lang { font: 500 15px/1 var(--text); color: var(--ink-2); text-decoration: none; padding: 8px 0; }
.nav nav a:hover, .lang:hover { color: var(--ink); }
.nav nav a[aria-current="step"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--royal); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 20px; }

/* ---------- the held stage (desktop) ---------- */
.stage { position: relative; height: 100svh; }
.rig {
  position: absolute; z-index: 2; right: var(--gutter); top: var(--stage-top); width: var(--screen-w);
  display: grid; gap: 22px; animation-name: rig-rise;
}
.screen { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 40px 80px -40px rgb(14 27 64 / 0.45), 0 0 0 1px var(--line); }
.chrome { display: flex; gap: 7px; align-items: center; height: 28px; padding: 0 14px; background: #f5f8fd; border-bottom: 1px solid var(--line); }
.chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.shots { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ice); }
.shot { position: absolute; inset: 0; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.pan { width: 100%; height: 100%; }
/* the booking card is the right 44% of its screenshot: show the card, not the dimmed page behind it */
.shot-booking img, .ch-booking img { width: 225%; max-width: none; height: auto; margin-left: -125%; }
.shot:not(.shot-today) { opacity: 0; transition: opacity 380ms var(--ease); }
.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; }
.shot-booking .pan { transform-origin: 50% 0%; animation-name: push-soft; }
.shot-floor .pan { transform-origin: 38% 48%; animation-name: push-floor; }
.shot-pos .pan { transform-origin: 70% 82%; animation-name: push-pos; }
.shot-ads .pan { transform-origin: 32% 64%; animation-name: push-ads; }

.phone { overflow: hidden; border-radius: 28px; background: var(--white); border: 6px solid var(--ink); box-shadow: 0 30px 60px -28px rgb(14 27 64 / 0.6); }
.phone img { width: 100%; height: auto; }
.phone-widget {
  position: absolute; z-index: 3; left: 4%; bottom: 6%; width: 21%;
  opacity: 0; translate: 0 24px; transition: opacity 300ms var(--ease), translate 520ms var(--ease);
}
.run:has(#c-click[data-state="active"]) .phone-widget { opacity: 1; translate: 0 0; }

/* the evening line */
.evening { display: grid; gap: 14px; --fill: 0; --tl-line: var(--line); --tl-dot: var(--ice); --tl-on: var(--royal); --tl-ink: var(--ink); --tl-muted: var(--ink-2); }
.evening-title { font-size: var(--t-small); color: var(--tl-muted); text-wrap: balance; }
.evening-track { position: relative; }
.evening-line { position: absolute; left: 7px; right: calc(20% - 7px); top: 6px; height: 2px; background: var(--tl-line); }
.evening-line i { display: block; height: 100%; background: var(--tl-on); transform-origin: 0 50%; transform: scaleX(var(--fill)); transition: transform 700ms var(--ease); }
.evening-stops { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.evening-stops li { position: relative; display: grid; gap: 2px; align-content: start; padding: 26px 14px 0 0; color: var(--tl-muted); font-size: var(--t-small); line-height: 1.35; transition: color 300ms var(--ease); }
.evening-stops li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--tl-dot); border: 2px solid var(--tl-line); transition: background-color 300ms var(--ease), border-color 300ms var(--ease);
}
.evening-stops time { font-weight: 600; font-variant-numeric: tabular-nums; }
.evening-stops .is-on, .evening-done .evening-stops li { color: var(--tl-ink); }
.evening-stops .is-on::before, .evening-done .evening-stops li::before { background: var(--tl-on); border-color: var(--tl-on); }
.evening-done { --fill: 1; }
.run:has(#c-click:not([data-state="before"])) .evening { --fill: 0.25; }
.run:has(#c-host:not([data-state="before"])) .evening { --fill: 0.375; }
.run:has(#c-floor:not([data-state="before"])) .evening { --fill: 0.5; }
.run:has(#c-bill:not([data-state="before"])) .evening { --fill: 0.75; }
.run:has(#c-ads:not([data-state="before"])) .evening { --fill: 1; }
.run:has(#c-click:not([data-state="before"])) :is(.s-click, .s-book),
.run:has(#c-floor:not([data-state="before"])) .s-seat,
.run:has(#c-bill:not([data-state="before"])) .s-bill,
.run:has(#c-ads:not([data-state="before"])) .s-meta { color: var(--tl-ink); }
.run:has(#c-click:not([data-state="before"])) :is(.s-click, .s-book)::before,
.run:has(#c-floor:not([data-state="before"])) .s-seat::before,
.run:has(#c-bill:not([data-state="before"])) .s-bill::before,
.run:has(#c-ads:not([data-state="before"])) .s-meta::before { background: var(--tl-on); border-color: var(--tl-on); }

/* chapters: plain copy beside the screen */
.chapter { position: relative; }
.ch-shot { display: none; }
.hero.chapter { padding: calc(var(--nav-h) + 9svh) var(--gutter) 0; }
.hero h1 { max-width: 22ch; margin-bottom: 36px; }
.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); }
.hero-foot { display: grid; gap: 28px; max-width: min(28rem, calc(100vw - 2 * var(--gutter) - var(--screen-w) - 56px)); opacity: calc(1 - var(--p, 0) * 1.8); }
.cta-row { display: grid; gap: 14px; justify-items: start; }

.chapter:not(.hero) { padding: 0 var(--gutter); }
.ch-copy { width: var(--copy-w); display: grid; gap: 16px; }
[data-story="live"] .ch-copy { position: sticky; top: calc(var(--stage-top) + 3svh); margin-top: 18svh; opacity: clamp(0, min(var(--enter, 1) * 1.6, 1) - var(--leave, 0) * 2.4, 1); }
.ch-time { font-weight: 600; color: var(--royal); font-variant-numeric: tabular-nums; }
.ch-copy p:not(.ch-time):not(.note) { color: var(--ink-2); }
.ch-copy .figure { margin-top: 8px; }

/* ---------- product screens, one per row ---------- */
.service { background: var(--white); padding: var(--section-in) var(--gutter) var(--section-out); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: end; margin-bottom: 56px; }
.section-head h2 { max-width: 16ch; }
.rows { display: grid; }
.row { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 64px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line); }
.row-copy { display: grid; gap: 12px; max-width: 26rem; }
.row-copy p { color: var(--ink-2); }
.shot-frame { overflow: hidden; border-radius: var(--radius); background: var(--ice); box-shadow: var(--shadow); }
.shot-frame img { width: 100%; height: auto; }

/* ---------- guests ---------- */
.guests { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; padding: var(--section-in) var(--gutter) var(--section-out); }
.guests-copy { display: grid; gap: 18px; max-width: 30rem; }
.guests-copy h2 { margin-bottom: 4px; }
.guests-copy h3 { margin-top: 24px; padding-top: 28px; border-top: 1px solid var(--line); }
.guests-copy p:not(.figure) { color: var(--ink-2); }
.guests-copy .figure { margin-top: 6px; }
.guests-art { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.g1 { grid-column: 1 / -1; }

/* ---------- phones ---------- */
.phones { background: var(--deep); color: var(--on-deep); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; padding: var(--section-in) var(--gutter) var(--section-out); }
.phones .phone { border-color: #050d3d; box-shadow: 0 40px 70px -30px rgb(0 0 0 / 0.6); }
.phones-art { display: flex; gap: 28px; justify-content: center; align-items: flex-start; }
.phones-art .phone { width: min(17vw, 250px); }
.p2 { margin-top: 96px; }
.phones-copy { display: grid; gap: 22px; max-width: 32rem; }
.phones .lede { color: var(--on-deep); }
.phones .note { color: var(--on-deep-2); }

/* ---------- setup ---------- */
.setup { background: var(--white); padding: var(--section-in) var(--gutter) var(--section-out); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.steps li { display: grid; gap: 12px; align-content: start; padding-top: 24px; border-top: 1px solid var(--line); }
.step-n { font: 300 clamp(2.5rem, 2rem + 2vw, 3.75rem)/1 var(--display); color: var(--royal); letter-spacing: -0.05em; }
.steps p { color: var(--ink-2); }

/* ---------- questions ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; padding: var(--section-in) var(--gutter) var(--section-out); }
.faq h2 { max-width: 14ch; }
details { border-top: 1px solid var(--line); padding: 24px 0; }
details:last-child { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; font: 600 var(--t-heading)/1.3 var(--text); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; font: 300 1.75rem/1 var(--display); color: var(--royal); transition: rotate 240ms var(--ease); }
details[open] summary::after { rotate: 45deg; }
details p { margin-top: 12px; color: var(--ink-2); max-width: 40rem; }

/* ---------- close: the evening, finished ---------- */
.close { background: var(--deep); color: var(--on-deep); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; padding: var(--section-in) var(--gutter) var(--section-in); }
.close-copy { display: grid; gap: 28px; justify-items: start; }
.close-copy h2 { max-width: 17ch; }
.close .note { color: var(--on-deep-2); }
.close .evening { --tl-line: rgb(255 255 255 / 0.22); --tl-dot: var(--deep); --tl-on: var(--white); --tl-ink: var(--on-deep); --tl-muted: var(--on-deep-2); }

.foot { background: var(--deep-2); color: var(--on-deep-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-deep); margin-bottom: 10px; }
.foot a { color: var(--on-deep); }
.foot-end { display: flex; gap: 24px; }

/* ---------- keyframes scrubbed by story.js ---------- */
@keyframes rig-rise { from { transform: translate3d(0, 44svh, 0); } to { transform: none; } }
@keyframes push-soft { from { transform: none; } to { transform: scale(1.1); } }
@keyframes push-floor { from { transform: none; } to { transform: scale(1.28); } }
@keyframes push-pos { from { transform: none; } to { transform: scale(1.42); } }
@keyframes push-ads { 0%, 15% { transform: none; } to { transform: scale(1.2); } }

@media (prefers-reduced-motion: reduce) {
  *:not([data-track]), *:not([data-track])::before, *:not([data-track])::after { transition: none !important; }
}

/* without the story runtime (no JS, reduced motion) the stage is a picture above the chapters */
[data-story="static"] .stage { height: auto; padding: calc(var(--nav-h) + 24px) var(--gutter) 0; }
[data-story="static"] .rig { position: relative; right: auto; top: auto; margin-left: auto; }
[data-story="static"] .shot:not(.shot-today), [data-story="static"] .phone-widget { display: none; }
[data-story="static"] .evening { --fill: 1; }
[data-story="static"] .evening-stops li { color: var(--ink); }
[data-story="static"] .evening-stops li::before { background: var(--royal); border-color: var(--royal); }

@media (max-width: 1100px) {
  :root { --copy-w: min(38vw, 24rem); }
}

/* ---------- tablet and phone: one screen under each chapter ---------- */
@media (max-width: 900px) {
  :root { --nav-h: 62px; }
  .nav { gap: 16px; }
  .nav nav { display: none; }
  .nav-end { gap: 14px; }
  .btn-pill { min-height: 40px; padding: 0 14px; font-size: 14px; }

  .stage { display: none; }
  [data-story="live"] .stage + * { margin-top: 0; }
  [data-story="live"] .run [data-scene] { min-height: 0; }
  [data-story="live"] .ch-copy { position: static; margin-top: 0; opacity: 1; }
  .hero.chapter { padding: calc(var(--nav-h) + 40px) var(--gutter) 64px; }
  .hero h1 .line, .hero h1 .line > span { display: inline; }
  .hero h1 .line > span { transform: none !important; }
  .hero-foot { opacity: 1; max-width: none; }
  .chapter:not(.hero) { padding: 0 var(--gutter) 72px; }
  .ch-copy { width: auto; }

  .ch-shot { display: block; margin-top: 24px; overflow: hidden; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
  .ch-shot img { width: 100%; height: auto; }
  .ch-phone { width: min(62vw, 300px); margin-inline: auto; border-radius: 28px; border: 6px solid var(--ink); box-shadow: 0 30px 60px -28px rgb(14 27 64 / 0.6); }
  .ch-booking { aspect-ratio: 4 / 3; }
  .ch-shot.ch-booking img { width: 225%; margin-left: -125%; }

  .section-head, .row, .guests, .phones, .faq, .close { grid-template-columns: minmax(0, 1fr); }
  .section-head { gap: 20px; margin-bottom: 32px; }
  .row { gap: 24px; padding: 40px 0; }
  .guests, .phones, .faq, .close { gap: 44px; }
  .guests-art { grid-template-columns: minmax(0, 1fr); }
  .phones-art { order: 2; }
  .phones-art .phone { width: 42vw; }
  .p2 { margin-top: 56px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  .evening-line { left: 6px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .evening-line i { transform-origin: 50% 0; transform: scaleY(var(--fill)); }
  .evening-stops { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .evening-stops li { grid-template-columns: 4.5em 1fr; padding: 0 0 0 30px; }
}