:root {
  --midnight: #14162b;
  --midnight-2: #1d2040;
  --paper: #f3f0fa;
  --ink: #1b1d36;
  --iris: #8e7cff;
  --sky: #6ea8fe;
  --mint: #4fd6b0;
  --amber: #ffc56b;
  --rule: rgba(27, 29, 54, 0.14);
  --soft: rgba(27, 29, 54, 0.66);
  --display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --measure: 62ch;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1.0625rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(1120px, 100% - 3rem); margin-inline: auto; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; margin: 0; }
h1 { font-size: clamp(2.5rem, 5.1vw, 4rem); font-variation-settings: "wdth" 88; }
h1 span { display: block; }
h2 { font-size: clamp(2rem, 4vw, 3.05rem); font-variation-settings: "wdth" 90; }
h3 { font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
h1, h2, h3, .intro, blockquote p { text-wrap: balance; }

/* ---------- buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.25rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font: 700 1rem/1 var(--text);
  text-decoration: none;
  transition: transform 0.12s ease, background 0.12s ease;
}
.button:active { transform: translateY(1px); }
.button.solid { background: var(--paper); color: var(--midnight); }
.button.solid:hover { background: #fff; }
.button.outline { border-color: rgba(243, 240, 250, 0.45); color: var(--paper); }
.button.outline:hover { background: rgba(243, 240, 250, 0.1); }
.button.dark { background: var(--midnight); color: var(--paper); }
.button.dark:hover { background: var(--midnight-2); }
.button.small { padding: 0.55rem 1rem; font-size: 0.95rem; }
.button svg { width: 1.1em; height: 1.1em; fill: currentColor; }

/* ---------- the stage: header and hero ---------- */

.stage {
  position: relative;
  background:
    radial-gradient(60rem 30rem at 85% 0%, rgba(142, 124, 255, 0.28), transparent 60%),
    radial-gradient(40rem 26rem at 0% 100%, rgba(110, 168, 254, 0.18), transparent 60%),
    var(--midnight);
  color: var(--paper);
  padding: 0.6rem 0 clamp(3rem, 8vw, 6rem);
  overflow: clip;
}
/* Two soft lights that drift slowly behind the hero. */
.stage::before, .stage::after { content: ""; position: absolute; z-index: 0; width: 42rem; aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: 0.5; pointer-events: none; }
.stage::before { top: -18rem; right: -8rem; background: var(--iris); animation: float-a 18s ease-in-out infinite alternate; }
.stage::after { bottom: -26rem; left: -14rem; background: var(--sky); opacity: 0.3; animation: float-b 22s ease-in-out infinite alternate; }
@keyframes float-a { to { transform: translate(-9rem, 5rem) scale(1.15); } }
@keyframes float-b { to { transform: translate(8rem, -4rem) scale(0.9); } }
.stage > * { position: relative; z-index: 1; }

.site-head { display: flex; align-items: center; gap: 1.5rem; padding: 1.25rem 0; }
.stage > .site-head { position: sticky; top: 0.6rem; z-index: 20; padding: 0.75rem 1rem; border-radius: 999px; border: 1px solid transparent; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; }
.stage > .site-head.scrolled { background: rgba(20, 22, 43, 0.78); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-color: rgba(243, 240, 250, 0.14); box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.7); }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font: 700 1.2rem/1 var(--display); text-decoration: none; }
.brand img { width: 34px; height: 34px; }
.site-head nav { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.site-head nav a { text-decoration: none; opacity: 0.82; }
.site-head nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 0.3em; }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-top: clamp(2rem, 6vw, 4.5rem); }
.hero-copy p { font-size: 1.2rem; line-height: 1.5; margin-top: 1.4rem; max-width: 34ch; color: rgba(243, 240, 250, 0.86); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero-note { margin-top: 1rem; font-size: 0.95rem; color: rgba(243, 240, 250, 0.7); }
.proof { list-style: none; display: grid; gap: 0.5rem; margin: 2.25rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid rgba(243, 240, 250, 0.16); color: rgba(243, 240, 250, 0.72); }
.proof strong { color: var(--paper); }
.hero-copy > * { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: 0.08s; }
.hero-copy > :nth-child(3) { animation-delay: 0.16s; }
.hero-copy > :nth-child(4) { animation-delay: 0.24s; }
.hero-copy > :nth-child(5) { animation-delay: 0.32s; }
.scene { animation: rise 1.1s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }

/* The scene: a video call with the overlay floating over it. */
.scene { position: relative; padding: 0 0 5.5rem 0; }
.call { background: #e9e6f4; border-radius: 16px; padding: 0.8rem; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55); }
.call-bar { display: flex; gap: 0.4rem; padding: 0.15rem 0.2rem 0.7rem; }
.call-bar i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #c9c4dc; }
.tiles { display: grid; grid-template-columns: 1.6fr 1fr; gap: 0.6rem; }
.tile { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; background: linear-gradient(160deg, #cfd6f6, #b9b2e6); overflow: hidden; }
.tile.you { background: linear-gradient(160deg, #c8eee2, #a9d9d6); }
.tile::before { content: ""; position: absolute; left: 50%; bottom: -18%; width: 54%; aspect-ratio: 1; border-radius: 50% 50% 12% 12%; background: rgba(27, 29, 54, 0.2); transform: translateX(-50%); }
.tile::after { content: ""; position: absolute; left: 50%; top: 24%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: rgba(27, 29, 54, 0.26); transform: translateX(-50%); }
.tile span { position: absolute; left: 0.5rem; bottom: 0.45rem; z-index: 1; padding: 0.1rem 0.5rem; border-radius: 6px; background: rgba(27, 29, 54, 0.7); color: #fff; font-size: 0.78rem; }
.tile { transition: outline-color 0.3s; outline: 3px solid transparent; }
.tile.talking { outline-color: var(--iris); }
/* A small level meter that moves while the interviewer is speaking. */
.bars { position: absolute; right: 0.55rem; bottom: 0.5rem; z-index: 1; display: flex; align-items: flex-end; gap: 3px; height: 1rem; opacity: 0; transition: opacity 0.3s; }
.tile.talking .bars { opacity: 1; }
.bars i { width: 3px; height: 100%; border-radius: 2px; background: var(--midnight); transform-origin: bottom; animation: level 0.9s ease-in-out infinite; }
.bars i:nth-child(2) { animation-delay: -0.3s; }
.bars i:nth-child(3) { animation-delay: -0.6s; }
.bars i:nth-child(4) { animation-delay: -0.15s; }
.bars i:nth-child(5) { animation-delay: -0.45s; }
@keyframes level { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }

.overlay {
  position: absolute;
  right: -0.75rem;
  bottom: 0;
  z-index: 2;
  width: min(27rem, 92%);
  border-radius: 14px;
  background: #14162b;
  border: 1px solid rgba(243, 240, 250, 0.16);
  box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #eceef2;
  font-size: 0.92rem;
  line-height: 1.45;
  transform: translate(var(--drift-x, 0), var(--drift-y, 0));
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.overlay-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid rgba(243, 240, 250, 0.12); font-weight: 700; }
.overlay-bar img { width: 20px; height: 20px; }
.live { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.1rem 0.6rem; border: 1px solid rgba(126, 231, 135, 0.45); border-radius: 999px; color: #7ee787; font-size: 0.78rem; font-weight: 400; }
.live::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; }
.overlay-body { padding: 0.75rem; min-height: 13.2rem; }
.heard { margin: 0 0 0.6rem; padding: 0.5rem 0.7rem; border-left: 3px solid var(--iris); border-radius: 8px; background: rgba(142, 124, 255, 0.14); max-width: none; }
.heard.listening { color: #b7a9ff; font-size: 0.86rem; background: none; border-color: transparent; padding-left: 0; }
.answer { margin: 0; padding-left: 0.75rem; border-left: 3px solid var(--amber); max-width: none; }
.answer strong { color: var(--amber); }
.answer .lead { font-weight: 700; font-size: 1.02rem; display: block; margin-bottom: 0.35rem; }
.answer ul { margin: 0; padding-left: 1.1rem; }
.answer li::marker { color: var(--amber); }
.caret { display: inline-block; width: 0.5em; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: var(--amber); animation: blink 0.9s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- the questions it hears ---------- */

.heard-everywhere { margin-top: clamp(3.5rem, 8vw, 6rem); overflow: hidden; }
.heard-everywhere > p { font: 700 clamp(1.5rem, 3vw, 2.2rem)/1.15 var(--display); letter-spacing: -0.015em; max-width: none; padding-bottom: 2rem; }
.marquee { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee + .marquee { margin-top: 0.8rem; }
.track { display: flex; gap: 0.8rem; padding-right: 0.8rem; flex: none; animation: slide 46s linear infinite; }
.marquee.reverse .track { animation-direction: reverse; animation-duration: 54s; }
.marquee:hover .track { animation-play-state: paused; }
.track span { flex: none; padding: 0.65rem 1.1rem; border-radius: 999px; border: 1px solid rgba(243, 240, 250, 0.2); background: rgba(243, 240, 250, 0.05); font-size: 1.05rem; white-space: nowrap; }
.marquee.reverse .track span { border-color: rgba(142, 124, 255, 0.5); color: #cfc6ff; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- the pull quote ---------- */

.pull { background: var(--midnight); color: var(--paper); padding: clamp(4rem, 9vw, 7rem) 0; position: relative; overflow: clip; }
.pull::before { content: "“"; position: absolute; top: -0.18em; left: max(1rem, calc(50% - 600px)); font: 700 clamp(14rem, 30vw, 26rem)/1 var(--display); color: rgba(142, 124, 255, 0.2); pointer-events: none; }
.pull blockquote { margin-block: 0; position: relative; }
.pull blockquote p { font: 700 clamp(1.8rem, 4vw, 3.1rem)/1.12 var(--display); letter-spacing: -0.02em; max-width: 22ch; font-variation-settings: "wdth" 90; }
.pull blockquote footer { margin-top: 1.5rem; color: rgba(243, 240, 250, 0.65); }

/* ---------- things that settle into place when scrolled to ---------- */

.will-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--order, 0) * 90ms); }
.will-reveal.in { opacity: 1; transform: none; }
.tier.featured.will-reveal.in { transform: translateY(-14px); }

/* The screenshot grows to full size as it comes up the screen. */
@supports (animation-timeline: view()) {
  .zoom .frames { animation: grow linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
  @keyframes grow { from { transform: translateY(40px) scale(0.86); opacity: 0.35; } }
}

/* ---------- sections on paper ---------- */

.band { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.band + .band { border-top: 1px solid var(--rule); }
.band > .wrap > h2 { max-width: 18ch; }
.band .intro { margin-top: 1rem; font-size: 1.15rem; color: var(--soft); }

.steps { list-style: none; margin: 2.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; counter-reset: step; }
.steps li { counter-increment: step; padding-top: 1.1rem; border-top: 3px solid var(--ink); }
.steps li::before { content: counter(step); display: block; font: 700 3.2rem/1 var(--display); color: var(--iris); margin-bottom: 0.8rem; font-variation-settings: "wdth" 80; }
.steps p { margin-top: 0.5rem; color: var(--soft); }

.facts { margin: 2.5rem 0 0; }
.facts div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2rem; padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.facts div:last-child { border-bottom: 1px solid var(--rule); }
.facts dt { font: 700 1.5rem/1.15 var(--display); letter-spacing: -0.015em; }
.facts dd { margin: 0; color: var(--soft); }

/* A tour of the app: the pictures are stacked and cross-fade; the labels
   underneath choose one, and the current label fills as its turn runs out. */
.tour { margin: 3.5rem 0 0; }
.frames { position: relative; aspect-ratio: 2240 / 1400; border-radius: 16px; background: var(--midnight); box-shadow: 0 40px 80px -36px rgba(27, 29, 54, 0.7), 0 0 0 1px rgba(27, 29, 54, 0.12); overflow: hidden; }
.frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.035); transition: opacity 0.7s ease, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.frames img.on { opacity: 1; transform: none; }
.tour figcaption { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.tour button { position: relative; display: grid; gap: 0.2rem; padding: 1rem 0 0; border: none; border-top: 3px solid var(--rule); background: none; color: var(--soft); font: inherit; text-align: left; cursor: pointer; transition: color 0.2s; }
.tour button strong { font: 700 1.15rem/1.2 var(--display); color: var(--ink); opacity: 0.55; transition: opacity 0.2s; }
.tour button span { font-size: 0.95rem; line-height: 1.4; }
.tour button:hover strong, .tour button.on strong { opacity: 1; }
.tour button::before { content: ""; position: absolute; top: -3px; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--sky), var(--iris)); }
.tour button.on::before { width: 100%; }
.tour.playing button.on::before { animation: fill var(--turn-length, 5.5s) linear both; }
.tour.playing:hover button.on::before, .tour.playing:focus-within button.on::before { animation-play-state: paused; }
@keyframes fill { from { width: 0; } to { width: 100%; } }

/* ---------- pricing ---------- */

.pricing { background: linear-gradient(180deg, var(--paper), #e9e4f8); }
.pricing > .wrap > h2 { max-width: 16ch; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; margin-top: 3rem; }
.tier { position: relative; display: flex; flex-direction: column; padding: 1.75rem 1.6rem 1.6rem; border-radius: 22px; background: #fff; border: 1px solid var(--rule); transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s; }
.tier:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(27, 29, 54, 0.45); }
.tier h3 { font-size: 1.5rem; }
.tier .cost { margin-top: 0.9rem; color: var(--soft); }
.tier .cost span { font: 700 3.6rem/1 var(--display); font-variation-settings: "wdth" 82; letter-spacing: -0.03em; color: var(--ink); margin-right: 0.2rem; }
.tier .per { margin-top: 0.5rem; font-weight: 700; color: var(--iris); }
.tier ul { list-style: none; margin: 1.4rem 0 1.75rem; padding: 1.3rem 0 0; border-top: 1px solid var(--rule); display: grid; gap: 0.7rem; flex: 1; align-content: start; }
.tier li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.6rem; line-height: 1.4; }
.tier li svg { width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; fill: none; stroke: var(--iris); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tier .button { justify-content: center; }
.button.line { border-color: var(--ink); color: var(--ink); }
.button.line:hover { background: var(--ink); color: var(--paper); }

/* Pro is the one on the dark stage, lifted above the others, with a slowly turning edge of light. */
.tier.featured { background: var(--midnight); color: var(--paper); border-color: transparent; transform: translateY(-14px); box-shadow: 0 34px 60px -28px rgba(20, 22, 43, 0.8); isolation: isolate; }
.tier.featured:hover { transform: translateY(-18px); }
.tier.featured::before { content: ""; position: absolute; inset: -2px; z-index: -2; border-radius: 24px; background: conic-gradient(from var(--turn, 0deg), var(--iris), var(--sky), var(--mint), var(--amber), var(--iris)); animation: turn 7s linear infinite; }
.tier.featured::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 22px; background: radial-gradient(22rem 14rem at 80% 0%, rgba(142, 124, 255, 0.35), transparent 65%), var(--midnight); }
@property --turn { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes turn { to { --turn: 360deg; } }
.tier.featured .cost { color: rgba(243, 240, 250, 0.7); }
.tier.featured .cost span { color: #fff; }
.tier.featured .per { color: var(--amber); }
.tier.featured ul { border-color: rgba(243, 240, 250, 0.18); }
.tier.featured li svg { stroke: var(--mint); }
.flag { position: absolute; top: 1.5rem; right: 1.4rem; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--amber); color: var(--midnight); font-size: 0.82rem; font-weight: 700; }
.button.glow { background: linear-gradient(120deg, var(--sky), var(--iris)); color: var(--midnight); box-shadow: 0 10px 30px -8px rgba(142, 124, 255, 0.9); }
.button.glow:hover { box-shadow: 0 14px 36px -6px rgba(142, 124, 255, 1); transform: translateY(-1px); }
.plans-note { margin-top: 2.25rem; color: var(--soft); }

/* ---------- download and questions ---------- */

.get { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 2rem; }
.get small { flex-basis: 100%; color: var(--soft); font-size: 0.95rem; }

.questions { margin-top: 2.25rem; max-width: 46rem; }
.questions details { border-top: 1px solid var(--rule); }
.questions details:last-child { border-bottom: 1px solid var(--rule); }
.questions summary { cursor: pointer; padding: 1.15rem 2.25rem 1.15rem 0; font: 700 1.2rem/1.25 var(--display); list-style: none; position: relative; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0.9rem; font: 400 1.6rem/1 var(--text); color: var(--iris); }
.questions details[open] summary::after { content: "–"; }
.questions p { padding: 0 0 1.3rem; color: var(--soft); }
.questions summary { transition: color 0.2s; }
.questions summary:hover { color: var(--iris); }
/* Answers ease open where the browser supports it. */
@supports (interpolate-size: allow-keywords) {
  .questions { interpolate-size: allow-keywords; }
  .questions details::details-content { height: 0; overflow: clip; transition: height 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), content-visibility 0.35s allow-discrete; }
  .questions details[open]::details-content { height: auto; }
}

/* ---------- footer ---------- */

.site-foot { background: var(--midnight); color: rgba(243, 240, 250, 0.78); padding: 2.5rem 0; font-size: 0.95rem; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center; }
.site-foot .brand { color: var(--paper); margin-right: auto; }
.site-foot a:not(.brand) { text-underline-offset: 0.3em; }
.site-foot .rights { flex-basis: 100%; max-width: none; margin-top: 0.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(243, 240, 250, 0.14); font-size: 0.88rem; color: rgba(243, 240, 250, 0.55); }

/* ---------- plain pages: privacy, terms, after payment ---------- */

.page-head { background: var(--midnight); color: var(--paper); }
.page-head .title { padding: clamp(2rem, 6vw, 4rem) 0 clamp(2.5rem, 6vw, 4rem); }
.page-head .title p { margin-top: 1rem; color: rgba(243, 240, 250, 0.75); }
.prose { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.prose h2 { font-size: 1.7rem; margin: 2.75rem 0 0.75rem; line-height: 1.1; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { max-width: var(--measure); margin: 0 0 1rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.4rem; }
.draft { max-width: var(--measure); margin-bottom: 2.5rem; padding: 1rem 1.2rem; border-left: 4px solid var(--amber); background: rgba(255, 197, 107, 0.2); border-radius: 0 10px 10px 0; }

.done { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(50rem 30rem at 50% 0%, rgba(142, 124, 255, 0.3), transparent 60%), var(--midnight); color: var(--paper); text-align: left; padding: 2rem; }
.done div { max-width: 30rem; }
.done img { width: 64px; height: 64px; margin-bottom: 1.5rem; }
.done p { margin-top: 1rem; font-size: 1.15rem; color: rgba(243, 240, 250, 0.82); }

/* ---------- smaller screens ---------- */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .tier.featured, .tier.featured:hover, .tier.featured.will-reveal.in { transform: none; }
  .pull blockquote p { font-size: 1.7rem; }
  .tour figcaption { grid-template-columns: 1fr; gap: 0.25rem; }
  .tour button span { display: none; }
  .tour button { padding: 0.7rem 0; }
  .hero-copy p { max-width: 40ch; }
  /* On a narrow screen the overlay sits below the call, overlapping its lower edge. */
  .scene { padding-bottom: 0; }
  .overlay { position: relative; right: auto; width: auto; margin: -4.5rem 0 0 1.5rem; }
  .steps { grid-template-columns: 1fr; gap: 1.75rem; }
  .facts div { grid-template-columns: 1fr; gap: 0.5rem; }
  .site-head nav a:not(.button) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage::before, .stage::after, .track, .tier.featured::before, .bars i, .hero-copy > *, .scene, .zoom .frames { animation: none; }
  .frames img { transition: none; transform: none; }
  .marquee { overflow-x: auto; }
  .overlay { transform: none; }
  .caret { display: none; }
  .button { transition: none; }
}