/* HousingDesk: the split stage.
   A printed card and a reading column on the left, the lobby (photographs, then the live
   iPad and the front desk) fixed on the right. Brand palette: harbor blue, ink, cool paper,
   one brass dot in the logo. Gayathri for the voice, Atkinson Hyperlegible for reading. */

@font-face { font-family: "Gayathri"; src: url("/fonts/gayathri-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Gayathri"; src: url("/fonts/gayathri-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ground: #e6eded;       /* cool paper the page sits on */
  --paper: #fafbfa;        /* the card, the sheets, the field: one step lighter */
  --ink: #142a3b;
  --soft: #44586a;
  --accent: #1f5f7a;       /* harbor blue: the action, the stripe, the reports field */
  --accent-deep: #184c62;
  --accent-ink: #ffffff;
  --on-field: #f3f7f8;
  --on-field-soft: #b9d0da;
  --brass: #e2a522;

  --display: "Gayathri", "Atkinson Hyperlegible", system-ui, sans-serif;
  --text: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem);
  --step-head: clamp(2rem, 1.45rem + 1.9vw, 2.75rem);
  --step-display: clamp(2.5rem, 1.2rem + 3.4vw, 4rem);

  --gap: 12px;
  --margin: clamp(20px, 3vw, 40px);
  --radius: 12px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--step-body)/1.55 var(--text);
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.section-title {
  font: 700 var(--step-head)/1 var(--display);
  letter-spacing: -0.02em;
  padding-top: 0.12em;           /* Gayathri sits low in its box */
  text-wrap: balance;
}

/* ---------- Button: one shape, pill ---------- */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 var(--step-body)/1 var(--text);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 140ms var(--ease-out);
}
/* The stripe returns inside the button on hover. */
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8'%3E%3Crect width='14' height='8' fill='%23184c62'/%3E%3C/svg%3E") repeat;
  opacity: 0;
  transition: opacity 180ms ease;
}
.button:hover::before { opacity: 1; }
.button:active { transform: scale(0.97); }

/* ---------- The stripe ---------- */
.stripe { display: flex; height: 56px; overflow: hidden; }
.stripe i { flex: 0 0 28px; height: 100%; }
.stripe i:nth-child(odd) { background: var(--accent); }
.stripe-thin { height: 8px; margin-top: 200px; }
.sign-off {
  display: flex; align-items: center; gap: 0.18em;
  padding: 64px var(--margin) 0;
  font: 400 clamp(3.5rem, 1rem + 13vw, 14rem)/0.9 var(--display);
  letter-spacing: -0.04em; white-space: nowrap; overflow: hidden;
}
.sign-off svg { width: 0.82em; height: 0.82em; flex: none; }
.sign-off span { padding-top: 0.16em; }
.sign-off b { font-weight: 700; }

/* ---------- Split: reading column + sticky stage ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: var(--gap);
  padding: var(--gap);
  align-items: start;
}
.reading { display: grid; gap: 0; min-width: 0; }

.card {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 2 * var(--gap));
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
}
.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 56px var(--margin) 40px;
  text-align: center;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font: 400 var(--step-head)/1 var(--display);
  letter-spacing: -0.02em;
}
.wordmark svg { width: 52px; height: 52px; flex: none; }
.wordmark span { padding-top: 0.2em; }
.wordmark b { font-weight: 700; }
.hero-title {
  font: 700 var(--step-display)/0.98 var(--display);
  letter-spacing: -0.025em;
  padding-top: 0.12em;
  max-width: 12ch;
}
.hero-sub { max-width: 36ch; color: var(--ink); }
.hero-photo-m { display: none; }
.card-links { display: flex; justify-content: center; gap: 32px; padding: 0 24px 28px; font-size: var(--step-small); }
.card-links a { text-decoration: none; }
.card-links a:hover { text-decoration: underline; }

/* Intro: narrow column, no heading */
.intro {
  display: grid;
  gap: 1.5em;
  max-width: 34ch;
  margin-left: clamp(24px, 10%, 96px);
  padding: 120px 0 200px;
  color: var(--soft);
}
.intro .lede { color: var(--ink); font-weight: 700; }

/* Try: heading, then blocks half a screen apart */
.try { padding: 40px clamp(24px, 10%, 96px) 25vh; }
.try-note { margin-top: 16px; color: var(--soft); max-width: 40ch; }
.block {
  display: grid;
  gap: 18px;
  max-width: 44ch;
  min-height: 50vh;
  align-content: center;
}
.block-claim {
  font: 700 var(--step-lead)/1.1 var(--display);
  letter-spacing: -0.015em;
  padding-top: 0.15em;
}

/* Controls at interface size */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.segmented { display: inline-flex; padding: 4px; gap: 4px; background: var(--paper); border-radius: 999px; justify-self: start; }
.segmented label, .choices label { position: relative; cursor: pointer; }
.segmented input, .choices input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px;
  font-weight: 700; transition: background-color 160ms ease, color 160ms ease;
}
.segmented input:checked + span { background: var(--ink); color: var(--paper); }
.segmented input:focus-visible + span, .choices input:focus-visible + span { outline: 3px solid var(--brass); outline-offset: 2px; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--paper); font-weight: 700; font-size: var(--step-small);
  transition: background-color 160ms ease, color 160ms ease, transform 120ms var(--ease-out);
}
.choices label:active span { transform: scale(0.96); }
.choices input:checked + span { background: var(--accent); color: var(--accent-ink); }

.field-pair { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center; }
.field-pair label { font-weight: 700; font-size: var(--step-small); }
.text-input {
  min-height: 48px; padding: 0 16px; border: 0; border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: inherit; width: 100%;
}
.text-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); } /* taste-skill-ignore: focus ring */

.switch { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; cursor: pointer; justify-self: start; min-height: 44px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 52px; height: 30px; border-radius: 999px; background: #b7c3c6; transition: background-color 180ms ease; }
.switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; transition: transform 200ms var(--ease-out);
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(22px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--brass); outline-offset: 3px; }

/* ---------- The stage ---------- */
.stage {
  position: sticky;
  top: var(--gap);
  height: calc(100svh - 2 * var(--gap));
  border-radius: var(--radius);
  overflow: hidden;
  background: #11202c;
}
.layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.6s var(--ease-in-out), visibility 0s linear 1.6s;
}
.stage[data-show="line"] [data-layer="line"],
.stage[data-show="office"] [data-layer="office"],
.stage[data-show="kiosk"] [data-layer="kiosk"],
.stage[data-show="desk"] [data-layer="desk"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.6s var(--ease-in-out), visibility 0s;
}
/* Hero timelapse: sits over the photo once it can play (see js/site.js). */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #142a3b; opacity: 0; transition: opacity 600ms ease; }
/* Shown whole, never cropped: the video's own navy fills any space around it. */
.has-video img { visibility: hidden; }
.hero-video.ready { opacity: 1; }
.hero-photo-m .hero-video { height: 48svh; border-radius: var(--radius); }

/* Skip layout and paint for sections far below the screen. */
.outputs, .band, .pricing, .faq, .pilot { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 14s linear; }
.stage[data-show="line"] [data-layer="line"] img,
.stage[data-show="office"] [data-layer="office"] img { transform: scale(1); }
.photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  left: auto; right: 0; max-width: 46ch;
  padding: 10px 16px;
  background: rgb(10 18 26 / 0.82);
  border-top-left-radius: var(--radius);
  color: #fff; font-size: var(--step-small);
}

/* Kiosk screen: built at real size, cropped by the stage */
.kiosk { background: var(--paper); display: flex; flex-direction: column; font-family: var(--text); }
.k-bar { display: flex; justify-content: space-between; align-items: center; padding: 20px 32px; background: #1d2a52; color: #fff; font-weight: 700; }
.k-lang { padding: 6px 16px; border-radius: 999px; background: rgb(255 255 255 / 0.16); font-size: var(--step-small); }
.k-body { flex: 1; display: flex; flex-direction: column; gap: 22px; padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px); }
.k-hello { color: var(--soft); }
.k-title { font: 700 var(--step-lead)/1.05 var(--display); letter-spacing: -0.02em; padding-top: 0.12em; }
.k-name { display: grid; gap: 4px; padding: 12px 18px; border-radius: var(--radius); background: #fff; box-shadow: inset 0 0 0 2px #cfd8e6; } /* taste-skill-ignore: the kiosk's own field inside data-ui */
.k-name small { color: var(--soft); font-size: var(--step-small); }
.k-name strong { font-size: var(--step-lead); line-height: 1.1; }
.k-reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.k-reasons li {
  display: flex; align-items: center; min-height: 72px; padding: 12px 18px; border-radius: var(--radius);
  background: #e7ecf5; color: #1d2a52; font-weight: 700; line-height: 1.25;
  transition: background-color 240ms ease, color 240ms ease, transform 240ms var(--ease-out);
}
.k-reasons li.on { background: #1d2a52; color: #fff; transform: scale(1.02); }
.k-signout { align-self: flex-start; padding: 10px 18px; border-radius: 999px; box-shadow: inset 0 0 0 2px #cfd8e6; color: #1d2a52; font-weight: 700; } /* taste-skill-ignore: the kiosk's own outlined button inside data-ui */
.k-offline { padding: 14px 18px; border-radius: var(--radius); background: #fbf0d6; color: #5a4210; font-weight: 700; }
.k-button {
  align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 72px; margin-top: auto;
  border-radius: 999px; background: #c8962e; color: #0f1840; font-weight: 700; font-size: var(--step-lead);
}

/* Front desk dashboard */
.desk { background: #f3f5f9; display: flex; flex-direction: column; }
.d-bar { display: flex; justify-content: space-between; align-items: center; padding: 18px 28px; background: #1d2a6b; color: #fff; border-bottom: 3px solid #c8962e; font-weight: 700; }
.d-brand { display: inline-flex; align-items: center; gap: 10px; }
.d-brand svg { width: 28px; height: 28px; }
.d-count { padding: 6px 14px; border-radius: 999px; background: #c8962e; color: #0f1840; font-size: var(--step-small); }
.d-alert {
  display: grid; gap: 2px; margin: 20px 28px 0; padding: 16px 20px; border-radius: var(--radius);
  background: #1d2a6b; color: #fff; animation: drop 420ms var(--ease-out) both;
}
.d-alert span { color: #dfe5f7; }
@keyframes drop { from { opacity: 0; transform: translateY(-14px); } }
.d-day { padding: 28px 28px 10px; font: 700 var(--step-lead)/1 var(--display); }
.d-list { margin: 0 28px; background: #fff; border-radius: var(--radius); overflow: hidden; }
.d-list li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "time name state" "time why state";
  gap: 2px 14px; align-items: center; padding: 14px 18px;
}
.d-list li + li { box-shadow: inset 0 1px 0 #e3e8f1; } /* taste-skill-ignore: row divider inside the data-ui dashboard */
.d-list li.new { background: #fbf0d6; animation: drop 420ms var(--ease-out) both; }
.d-time { grid-area: time; color: #5b6072; font-variant-numeric: tabular-nums; }
.d-name { grid-area: name; font-weight: 700; }
.d-why { grid-area: why; color: #5b6072; font-size: var(--step-small); }
.d-state { grid-area: state; padding: 6px 12px; border-radius: 999px; background: #fdecea; color: #8a1c12; font-size: var(--step-small); font-weight: 700; white-space: nowrap; }
.d-state.done { background: #e6f5ee; color: #186442; }
.d-foot { margin: auto 28px 18px; padding-top: 16px; color: #5b6072; font-size: var(--step-small); }

/* ---------- Outputs: full width, harbor-blue field ---------- */
.outputs {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 24px;
  margin-top: 160px;
  padding: 0 var(--margin);
  background: var(--accent);
  color: var(--on-field);
  overflow: hidden;
}
.outputs-names { grid-column: 1 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 120px 0; }
.outputs-names button {
  padding: 0.12em 0 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 700 var(--step-display)/1.1 var(--display); letter-spacing: -0.025em;
  color: var(--on-field-soft);
  transition: color 200ms ease, transform 200ms var(--ease-out);
}
.outputs-names button:hover { color: var(--on-field); transform: translateX(6px); }
.outputs-names button[aria-selected="true"] { color: var(--on-field); }
.outputs-note { margin-top: 32px; max-width: 38ch; color: var(--on-field); }
.outputs-stage { grid-column: 7 / span 6; position: relative; min-height: 88svh; background: var(--accent-deep); padding: 72px 0 0 64px; }
.sheet {
  width: 560px; max-width: calc(100% - 32px);
  background: var(--paper); color: var(--ink);
  padding: 36px 40px 64px;
  border-radius: var(--radius) var(--radius) 0 0;
  min-height: calc(88svh - 72px);
  animation: sheet-in 200ms ease both;
}
@keyframes sheet-in { from { opacity: 0; } }
.mail-head { display: grid; gap: 6px; padding-bottom: 20px; margin-bottom: 24px; box-shadow: 0 1px 0 #dfe6e8; font-size: var(--step-small); } /* taste-skill-ignore: email header rule inside the data-ui sheet */
.mail-head div { display: grid; grid-template-columns: 72px 1fr; }
.mail-head dt { color: var(--soft); }
.mail-head dd { font-weight: 700; }
.mail-big { font: 700 var(--step-lead)/1.15 var(--display); letter-spacing: -0.015em; padding-top: 0.1em; margin-bottom: 24px; }
.mail-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.mail-table caption { text-align: left; font-weight: 700; padding-bottom: 8px; }
.mail-table th { text-align: left; font-weight: 400; padding: 6px 0; }
.mail-table td { text-align: right; font-variant-numeric: tabular-nums; padding: 6px 0; }
.mail-table tr + tr th, .mail-table tr + tr td { border-top: 1px solid #e3e9ea; }
.mail-table .total th, .mail-table .total td { font-weight: 700; border-top: 2px solid var(--ink); }
.mail-facts { display: grid; gap: 6px; margin-bottom: 24px; }
.mail-attach { color: var(--soft); font-size: var(--step-small); }
.sheet-sample { margin-top: 28px; color: var(--soft); font-size: var(--step-small); }
.q-range { color: var(--soft); margin-bottom: 12px; }
.q-bars { display: grid; gap: 14px; margin-bottom: 28px; }
.q-bars li { display: grid; grid-template-columns: 84px minmax(0, 1fr) 48px; gap: 12px; align-items: center; }
.q-bar { height: 28px; border-radius: 6px; background: var(--accent); width: calc(var(--v) / 414 * 100%); transform-origin: left; animation: grow 700ms var(--ease-out) both; }
@keyframes grow { from { transform: scaleX(0); } }
.q-bars .num { text-align: right; font-weight: 700; }
.sheet.csv { width: 640px; }
.csv-scroll { overflow-x: auto; margin: 0 -8px 24px; }
.csv-table { border-collapse: collapse; font-size: var(--step-small); white-space: nowrap; }
.csv-table th, .csv-table td { padding: 8px; border: 1px solid #d9e2e4; text-align: left; }
.csv-table th { background: #eef3f3; }

/* ---------- Band photograph ---------- */
.band { position: relative; margin: 0; }
.band img { width: 100%; height: min(72svh, 760px); object-fit: cover; }
.band figcaption { padding: 12px var(--margin) 0; color: var(--soft); font-size: var(--step-small); }

/* ---------- Pricing, like a menu ---------- */
.pricing {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 24px;
  padding: 180px var(--margin) 0;
}
.pricing-side { grid-column: 1 / span 3; display: grid; gap: 20px; align-content: start; }
.pricing-side p { color: var(--soft); }
.pricing-photo img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; border-radius: var(--radius); }
.pricing-photo figcaption { margin-top: 8px; color: var(--soft); font-size: var(--step-small); }
.menu { grid-column: 5 / span 8; columns: 2; column-gap: 64px; }
.menu-group { break-inside: avoid; padding-top: 48px; }
.menu-group:first-child { padding-top: 0; }
.menu-group h3 { font: 700 var(--step-lead)/1.1 var(--display); letter-spacing: -0.01em; padding-top: 0.12em; margin-bottom: 20px; }
.item + .item { margin-top: 22px; }
.item-row { display: flex; justify-content: space-between; gap: 16px; font-size: var(--step-body); font-weight: 700; }
.item-note { color: var(--soft); font-size: var(--step-small); max-width: 36ch; margin-top: 2px; }

/* ---------- Questions as reading text ---------- */
.faq {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 24px;
  padding: 200px var(--margin) 0;
}
.faq .section-title { grid-column: 1 / span 3; align-self: start; }
.faq-text { grid-column: 5 / span 8; columns: 2; column-gap: 56px; line-height: 1.55; }
.faq-text p { break-inside: avoid; margin-bottom: 20px; }
.faq-text b { font-weight: 700; }

/* ---------- One field ---------- */
.pilot { width: min(560px, calc(100% - 2 * var(--margin))); margin: 220px 0 0 calc(var(--margin) + (100% - 2 * var(--margin) + 24px) / 12 * 4); }
.pilot-prompt { font: 700 var(--step-lead)/1.2 var(--display); letter-spacing: -0.015em; padding-top: 0.12em; }
.pilot-prompt span { display: block; color: var(--soft); }
.pilot-form { position: relative; margin-top: 28px; }
.pilot-form input[type="email"] {
  width: 100%; height: 64px; padding: 0 72px 0 22px; border: 0; border-radius: var(--radius);
  background: #fff; color: var(--ink); font: inherit;
}
.pilot-form input[type="email"]:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); } /* taste-skill-ignore: focus ring */
.pilot-send {
  position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: #fff; cursor: pointer;
  transition: transform 140ms var(--ease-out);
}
.pilot-send svg { width: 22px; height: 22px; transition: transform 180ms var(--ease-out); }
.pilot-send:hover svg { transform: translateX(3px); }
.pilot-send:active { transform: scale(0.94); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* taste-skill-ignore: hidden spam trap */
.pilot-next { margin-top: 16px; font-size: var(--step-small); color: var(--soft); }
.pilot-next.is-error { color: #9c1c12; }
.pilot-next.is-done { color: var(--ink); font-weight: 700; }
.pilot-facts { display: grid; gap: 10px; margin-top: 72px; font-size: var(--step-small); }
.pilot-facts div { display: grid; grid-template-columns: 140px 1fr; }
.pilot-facts dt { color: var(--soft); }

/* ---------- Close ---------- */
.credits { max-width: 58ch; padding: 40px var(--margin) 0; color: var(--soft); font-size: var(--step-small); }
.foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 56px var(--margin) 30px;
  font-size: var(--step-small);
  color: var(--soft);
}
.foot nav { display: flex; gap: 24px; }
.foot nav a, .foot-end a { color: var(--ink); text-decoration: none; }
.foot nav a:hover, .foot-end a:hover { text-decoration: underline; }
.foot-end { justify-self: end; display: flex; gap: 24px; }

/* ---------- Entrances (only with script, never for reduced motion) ---------- */
.js [data-rise] { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 75ms); }
.js [data-rise].in { opacity: 1; transform: none; }
.js .card .wordmark, .js .card .hero-title, .js .card .hero-sub, .js .card .button, .js .card .stripe i {
  animation: rise 900ms var(--ease-out) both;
}
.js .card .hero-title { animation-delay: 120ms; }
.js .card .hero-sub { animation-delay: 240ms; }
.js .card .button { animation-delay: 360ms; }
.js .card .stripe i { animation: stripe 700ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 22ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes stripe { from { transform: scaleY(0); transform-origin: top; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-rise] { opacity: 1; transform: none; transition: none; }
  .js .card *, .d-alert, .d-list li.new, .q-bar, .sheet { animation: none !important; }
  .layer, .photo img, .hero-video { transition: none; }
  .photo img { transform: none; }
}

/* ---------- Tablet and phone ---------- */
@media (max-width: 1023px) {
  .split { display: block; padding: var(--gap) var(--gap) 0; }
  .hero-photo-m { display: block; position: relative; margin: 0; }
  .hero-photo-m img { width: 100%; height: 48svh; object-fit: cover; border-radius: var(--radius); }
  .hero-photo-m figcaption { position: absolute; right: 0; bottom: 24px; max-width: 34ch; padding: 8px 12px; background: rgb(10 18 26 / 0.82); color: #fff; font-size: var(--step-small); border-top-left-radius: var(--radius); }
  .card { position: relative; min-height: 0; margin-top: -24px; }
  /* On a phone the stage lives inside "Try the lobby iPad", pinned above the controls. */
  .stage { position: sticky; top: 0; z-index: 3; height: 44svh; margin: 20px calc(-1 * var(--gap)) 0; border-radius: 0; }
  .split > .stage { display: none; }
  .stripe { height: 40px; }
  .card-body { padding: 40px 20px 28px; gap: 22px; }
  .hero-title { font-size: clamp(2.25rem, 8.6vw, 3.5rem); }
  .card-links { flex-wrap: wrap; gap: 12px 28px; }
  .intro, .try { margin: 0 calc(-1 * var(--gap)); padding-left: 20px; padding-right: 20px; }
  .try .stage { margin: 24px -20px 0; }
  .intro { max-width: none; padding-top: 72px; padding-bottom: 96px; }
  .intro p { max-width: 34ch; }
  .block { min-height: 0; padding: 56px 0; }
  .k-reasons li { min-height: 56px; font-size: var(--step-small); }
  .k-body { gap: 14px; }
  .k-button { min-height: 56px; }

  .outputs { display: block; margin-top: 0; padding: 0; }
  .outputs-names {
    flex-direction: row; flex-wrap: wrap; gap: 8px 24px;
    padding: 72px 20px 24px;
  }
  .outputs-names button { font-size: var(--step-lead); }
  .outputs-note { display: none; }
  .outputs-stage { min-height: 70svh; padding: 16px 0 0 16px; }
  .sheet, .sheet.csv { width: auto; max-width: none; margin-right: 16px; padding: 28px 22px 48px; min-height: calc(70svh - 16px); }
  .outputs-stage { overflow: hidden; }

  .pricing, .faq { display: block; padding: 120px 20px 0; }
  .pricing-photo { width: 60%; }
  .menu, .faq-text { columns: 1; margin-top: 32px; }
  .pilot { width: auto; margin: 160px 20px 0; }
  .pilot-form input[type="email"] { height: 60px; }
  .pilot-send { top: 8px; }
  .pilot-facts div { grid-template-columns: 1fr; }
  .stripe-thin { margin-top: 120px; }
  .sign-off { padding: 40px 20px 0; }
  .credits { padding: 32px 20px 0; }
  .foot { display: flex; flex-direction: column; gap: 8px; padding: 32px 20px 24px; }
  .foot nav { flex-wrap: wrap; gap: 8px 20px; }
  .foot-end { justify-self: start; }
}
@media (max-width: 520px) {
  .k-bar { padding: 14px 18px; font-size: var(--step-small); }
  .k-reasons { gap: 8px; }
  .k-reasons li { min-height: 48px; padding: 8px 12px; font-size: var(--step-small); }
  .k-hello, .k-signout { display: none; }
  .d-list li { padding: 10px 12px; }
  .field-pair { grid-template-columns: 1fr; }
}

/* ---------- Plain pages (privacy, 404) ---------- */
.doc { max-width: 62ch; margin: 0 auto; padding: 64px 20px 120px; display: grid; gap: 20px; }
.doc .wordmark { justify-self: start; margin-bottom: 48px; }
.doc h2 { font: 700 var(--step-lead)/1.15 var(--display); padding-top: 0.12em; margin-top: 24px; }
.doc .button { margin-top: 12px; }
.doc-date { color: var(--soft); font-size: var(--step-small); }