@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url("https://fonts.gstatic.com/s/fraunces/v38/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeP2Xz5c.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url("https://fonts.gstatic.com/s/fraunces/v38/6NUs8FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChJdt9hFwpX9W37ll9_mv0iQublWII.woff2") format("woff2");
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("https://fonts.gstatic.com/s/hankengrotesk/v12/ieVn2YZDLWuGJpnzaiwFXS9tYtpd59CxCis4.woff2") format("woff2");
}

/* ------------------------------------------------------------
   Type scale, 2026-08-01. The page was rendering 25 distinct type
   styles, including six Hanken sizes between 12px and 17px that no
   reader can tell apart and no one can maintain. Four steps now, plus
   the clamped display sizes.
       micro  0.78rem   captions, legal, footer
       small  0.88rem   labels, attributions, sub-lines
       body   1.02rem   paragraphs
       lead   1.20rem   section intros
   ------------------------------------------------------------ */
:root {
  color-scheme: light;
  --paper: #fff8f1;
  --paper-deep: #f6e1d4;
  --paper-warm: #efc8b3;
  --ink: #1b3156;
  --ink-deep: #10213d;
  --ink-soft: #38465c;
  --gutter: 20px;
  --index-quiet: #6b5f52;
  --hero-still: url('img/hero-loop-poster.jpg?v=49');
  --terra: #c54f2f;
  --terra-deep: #96361f;
  --terra-soft: #e88361;
  --terra-panel: #bd482b;
  --gold: #d49a26;
  --gold-soft: #f1d28c;
  --gold-text: #9a6410;
  --focus: #9a6410;
  --button-text: #fff8f1;
  --line: rgba(27, 49, 86, 0.19);
  --line-strong: rgba(27, 49, 86, 0.38);
  --surface: rgba(255, 248, 241, 0.86);
  --proof-bg: #10213d;
  --proof-text: #fff8f1;
  --proof-accent: #e88361;
  --shadow: 0 30px 80px rgba(113, 55, 32, 0.14);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Hanken Grotesk", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Radius rule: buttons are pills, fields are 14px, and large media surfaces are 20-28px. */

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #14233e;
  --paper-deep: #1a2b49;
  --paper-warm: #3d2930;
  --ink: #f6e7da;
  --ink-deep: #fff7ef;
  --ink-soft: #d4c8bd;
  --index-quiet: #bcae9f;
  --hero-still: url('img/hero-loop-poster.jpg?v=49');
  --terra: #ee7652;
  --terra-deep: #ff9a78;
  --terra-soft: #c85e43;
  --terra-panel: #9e3b25;
  --gold: #e4b54c;
  --gold-soft: #7d6332;
  --gold-text: #e4b54c;
  --focus: #f0c864;
  --button-text: #10213d;
  --line: rgba(246, 231, 218, 0.17);
  --line-strong: rgba(246, 231, 218, 0.36);
  --surface: rgba(20, 35, 62, 0.86);
  --proof-bg: #0b172a;
  --proof-text: #fff7ef;
  --proof-accent: #ff9a78;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 10% 10%, rgba(197, 79, 47, 0.09), transparent 28rem),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  content: "";
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

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

::selection {
  background: var(--gold-soft);
  color: var(--ink-deep);
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 200;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: var(--ink-deep);
  color: var(--paper);
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(100% - 48px, 1400px);
  height: 76px;
  border-bottom: 1px solid rgba(27, 49, 86, 0.18);
  transform: translateX(-50%);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  width: fit-content;
  color: var(--ink-deep);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.brand-figures {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: 34px;
  height: 30px;
}

.brand-figure {
  position: absolute;
  bottom: 5px;
  width: 13px;
  height: 18px;
  border-radius: 8px 8px 5px 5px;
}

.brand-figure::before {
  position: absolute;
  top: -6px;
  left: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: inherit;
  content: "";
}

.brand-figure-ink {
  left: 4px;
  background: var(--ink);
  transform: rotate(-5deg);
}

.brand-figure-terra {
  right: 4px;
  background: var(--terra);
  transform: rotate(5deg);
}

.brand-path {
  position: absolute;
  bottom: 0;
  width: 32px;
  height: 10px;
  border-bottom: 2px solid var(--gold);
  border-radius: 0 0 50% 50%;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 0.88rem;
  font-weight: 600;
}

.desktop-nav a {
  position: relative;
  text-decoration: none;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: -0.4rem;
  left: 0;
  height: 2px;
  background: var(--terra);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms var(--ease);
}

.desktop-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  padding: 0.58rem 0.7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
}

.theme-toggle:hover {
  background: rgba(27, 49, 86, 0.07);
}

.theme-dot {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: inset -4px -2px 0 var(--ink-soft);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 52px;
  padding: 0.82rem 1.25rem;
  border: 2px solid var(--ink-deep);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-deep);
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), background 300ms var(--ease), color 300ms var(--ease);
}

.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(24, 34, 53, 0.16);
}

.button:active {
  transform: translateY(-1px) scale(0.99);
}

.button-small {
  min-height: 42px;
  padding: 0.65rem 1rem;
  border-width: 1px;
  font-size: 0.88rem;
}

.button-primary {
  border-color: var(--ink-deep);
  background: var(--ink-deep);
  color: var(--button-text);
}

.button-primary:hover {
  border-color: var(--terra-deep);
  background: var(--terra-deep);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(560px, 1.08fr);
  align-items: stretch;
  min-height: min(920px, 100dvh);
  padding: 76px 0 0 max(5vw, calc((100vw - 1400px) / 2));
  background: linear-gradient(120deg, var(--paper-deep) 0%, var(--paper-deep) 48%, var(--paper-warm) 48%);
}

.hero-copy {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 670px;
  padding: 3rem 2rem 4rem 0;
}

/* Labels are set in the book serif, at reading size. The uppercase
   letterspaced mono they used to wear read as a developer tool sitting on
   top of a storybook. */
.hero-mark,
.eyebrow {
  margin: 0 0 1.25rem;
  color: var(--terra-deep);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.hero-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.hero-mark::before {
  width: 38px;
  height: 1px;
  background: var(--gold);
  content: "";
}

.hero h1 {
  max-width: 680px;
  margin: 0;
  color: var(--ink-deep);
  font-family: var(--font-display);
  font-size: clamp(3.7rem, 5vw, 6.2rem);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.88;
}

.hero h1 em {
  display: block;
  padding-bottom: 0.1em;
  color: var(--terra-deep);
  font-weight: 400;
  line-height: 1.1;
}

.hero-lede {
  max-width: 510px;
  margin: 1.8rem 0 2rem;
  color: var(--ink-soft);
  font-size: clamp(1.04rem, 1.5vw, 1.26rem);
  line-height: 1.55;
}

.hero-art {
  position: relative;
  min-height: 600px;
  margin: 0;
  overflow: hidden;
  background: #f2c8b0;
}

.hero-art::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--paper-deep) 0%, transparent 16%);
  content: "";
  pointer-events: none;
}

.hero-art picture,
.hero-art img {
  width: 100%;
  height: 100%;
}

.hero-art picture {
  display: block;
}

.hero-art img {
  object-fit: cover;
  object-position: 84% center;
}

.section {
  width: min(100% - 48px, 1280px);
  margin: 0 auto;
  padding: clamp(6rem, 10vw, 10rem) 0;
}

.section-heading {
  max-width: 740px;
  margin-bottom: 3.5rem;
}

.section-heading-wide {
  max-width: 930px;
}

.section-heading h2,
.keepsake h2,
.limits h2,
.reserve h2,
.faq h2 {
  margin: 0;
  color: var(--ink-deep);
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.2vw, 6.4rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.section-heading > p:last-child,
.keepsake-copy > p,
.faq-title > p {
  max-width: 62ch;
  margin: 1.35rem 0 0;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

.sample {
  padding-bottom: clamp(5rem, 8vw, 8rem);
}

.customer-proof {
  width: 100%;
  padding: clamp(4rem, 7vw, 6.5rem) 24px;
  background: var(--proof-bg);
  text-align: center;
}

.customer-proof blockquote {
  max-width: 1040px;
  margin: 0 auto;
}

.customer-proof p {
  margin: 0;
  color: var(--proof-text);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3vw, 3.2rem);
  font-style: italic;
  line-height: 1.18;
}

.customer-proof cite {
  display: block;
  margin-top: 1.25rem;
  color: var(--proof-accent);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-style: italic;
  letter-spacing: 0.01em;
}

.film-wrap {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #0f192c;
  box-shadow: var(--shadow);
}

.film-wrap video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.media-caption {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.sample-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.sample-buttons {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.75rem;
}

.sample-buttons .button-primary {
  min-height: 46px;
  padding: 0.7rem 1rem;
  font-size: 0.88rem;
}

.sample-pdf-link {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0.7rem 1rem;
  border-width: 1px;
  font-size: 0.88rem;
}

.keepsake {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(620px, 1.2fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  padding-top: 8rem;
  border-top: 1px solid var(--line);
}

.keepsake h2 {
  font-size: clamp(3rem, 4.7vw, 5.3rem);
}

.keepsake blockquote {
  margin: 3rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 2px solid var(--gold);
}

.keepsake blockquote p {
  margin: 0;
  color: var(--terra-deep);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 3rem);
  font-style: italic;
  line-height: 1.1;
}

.keepsake cite {
  display: block;
  margin-top: 0.8rem;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* The two product facts that used to live in their own strip. */
.keepsake-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 1.6rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.keepsake-facts li {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.keepsake-facts strong {
  color: var(--ink-deep);
  font-weight: 700;
}

.page-collage {
  position: relative;
  min-height: 590px;
}

.page {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(27, 49, 86, 0.15);
  border-radius: 20px;
  background: #fbf8f1;
  box-shadow: 0 22px 60px rgba(67, 45, 30, 0.18);
}

.page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-main {
  top: 72px;
  left: 0;
  z-index: 3;
  width: 74%;
  aspect-ratio: 16 / 9;
  transform: rotate(-2deg);
}

.page-top {
  top: 0;
  right: 0;
  z-index: 2;
  width: 54%;
  aspect-ratio: 16 / 9;
  transform: rotate(4deg);
}

.page-bottom {
  right: 4%;
  bottom: 0;
  z-index: 4;
  width: 51%;
  aspect-ratio: 16 / 9;
  transform: rotate(2deg);
}

.inside {
  width: min(100% - 48px, 1400px);
}

.voice-lines {
  border-top: 1px solid var(--line-strong);
}

.voice-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: center;
  min-height: 220px;
  border-bottom: 1px solid var(--line-strong);
}

.voice-line h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.7vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.voice-line > div:first-child p {
  max-width: 54ch;
  margin: 0.8rem 0 0;
  color: var(--ink-soft);
}

.voice-ink h3 {
  color: var(--ink-deep);
}

.voice-terra h3 {
  color: var(--terra-deep);
}

.voice-gold h3 {
  color: var(--gold-text);
}

.voice-mascot,
.pair-mascot {
  position: relative;
  justify-self: end;
  width: 118px;
  height: 118px;
}

.voice-mascot {
  border-radius: 48% 48% 40% 42%;
  background: currentColor;
  transform: rotate(3deg);
}

.voice-mascot::before {
  position: absolute;
  top: -22px;
  left: 34px;
  width: 51px;
  height: 51px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.voice-mascot span {
  position: absolute;
  top: -6px;
  left: 51px;
  width: 18px;
  height: 8px;
  border-right: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
  border-radius: 0 0 8px 0;
  transform: rotate(20deg);
}

.voice-ink .voice-mascot {
  color: var(--ink);
}

.voice-terra .voice-mascot {
  color: var(--terra);
  transform: rotate(-3deg);
}

.pair-mascot i,
.pair-mascot b {
  position: absolute;
  bottom: 8px;
  width: 68px;
  height: 90px;
  border-radius: 40px 40px 26px 26px;
}

.pair-mascot i {
  left: 4px;
  background: var(--ink);
  transform: rotate(-7deg);
}

.pair-mascot b {
  right: 4px;
  background: var(--terra);
  transform: rotate(7deg);
}

.pair-mascot span {
  position: absolute;
  bottom: 0;
  left: 24px;
  z-index: -1;
  width: 72px;
  height: 32px;
  border-bottom: 5px solid var(--gold);
  border-radius: 0 0 50% 50%;
}

/* This panel is a fixed dark surface in both themes, like the "Hear it"
   pill. It used var(--ink-deep), which flips to near-white in dark mode
   while the text stayed pinned to #fff8f1, so the honest boundary rendered
   white on white and disappeared. Found 2026-08-01. */
.limits {
  width: 100%;
  padding: clamp(6rem, 10vw, 10rem) 24px;
  background: #10213d;
  color: #fff8f1;
}

.limits-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(3rem, 8vw, 9rem);
  width: min(100%, 1280px);
  margin: 0 auto;
}

.limits h2 {
  color: #fff8f1;
}

.limits .eyebrow {
  color: #ef9c7f;
}

.limits-copy {
  max-width: 660px;
  padding-top: 1rem;
  color: rgba(255, 248, 241, 0.75);
  font-size: 1.02rem;
}

.limits-copy p {
  margin: 0 0 1.3rem;
}

.limits-copy .limits-lede {
  margin-bottom: 2rem;
  color: #fff8f1;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 3.1rem);
  line-height: 1.16;
}

.process {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(3rem, 8vw, 9rem);
}

.process-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.process-list li {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 1.5rem;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--line-strong);
}

.process-list li > span {
  color: var(--terra);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 400;
  font-variant-numeric: oldstyle-nums;
}

.process-list h3 {
  margin: 0;
  color: var(--ink-deep);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.7vw, 2.7rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.process-list p {
  margin: 0.7rem 0 0;
  color: var(--ink-soft);
}

.reserve {
  display: grid;
  grid-template-columns: 0.75fr minmax(620px, 1.25fr);
  align-items: stretch;
  width: min(100% - 48px, 1400px);
  padding-top: 3rem;
}

.reserve-art {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  border-radius: 28px 0 0 28px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 248, 241, 0.5), transparent 30%),
    var(--paper-warm);
}

.reserve-art::before {
  position: absolute;
  top: 12%;
  left: 14%;
  width: 72%;
  aspect-ratio: 1;
  border: 2px solid rgba(27, 49, 86, 0.18);
  border-radius: 50%;
  content: "";
}

.reserve-figure {
  position: absolute;
  bottom: 20%;
  width: 31%;
  height: 36%;
  border-radius: 48% 48% 40% 40%;
}

.reserve-figure::before {
  position: absolute;
  top: -29%;
  left: 23%;
  width: 54%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: inherit;
  content: "";
}

.reserve-figure i {
  position: absolute;
  top: -10%;
  left: 43%;
  width: 19%;
  height: 7%;
  border-right: 3px solid #fff8f1;
  border-bottom: 3px solid #fff8f1;
  border-radius: 0 0 12px 0;
  transform: rotate(18deg);
}

.reserve-figure-ink {
  left: 16%;
  background: var(--ink);
  transform: rotate(-7deg);
}

.reserve-figure-terra {
  right: 16%;
  background: var(--terra);
  transform: rotate(7deg);
}

.reserve-line {
  position: absolute;
  right: 10%;
  bottom: 14%;
  left: 10%;
  height: 25%;
  border-bottom: 8px solid var(--gold);
  border-radius: 0 0 50% 50%;
}

.reserve-line span {
  position: absolute;
  right: 10%;
  bottom: -16px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
}

.reserve-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 650px;
  padding: clamp(2.5rem, 5vw, 5.5rem);
  border-radius: 0 28px 28px 0;
  background: var(--terra-panel);
  color: #fff8f1;
}

.reserve-panel .eyebrow {
  color: #fff1e7;
}

.reserve-panel h2 {
  color: #fff8f1;
  font-size: clamp(3rem, 5vw, 5.7rem);
}

/* Beat 3: one true, canon-backed sentence about the visitor's own pair,
   shown after both birth moments are in and before the offer. */
.intake-reveal {
  margin: 0 0 1.6rem;
  padding: 1.15rem 1.3rem;
  border-left: 3px solid var(--gold, #d9a441);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 248, 241, 0.08);
}

.intake-reveal-eyebrow {
  margin: 0 0 0.7rem;
  color: #fff1e7;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.intake-reveal-headline {
  margin: 0;
  color: #fff8f1;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.2vw, 1.8rem);
  line-height: 1.18;
}

.intake-reveal-line {
  margin: 0.7rem 0 0;
  color: #fff8f1;
  font-size: 1.02rem;
  line-height: 1.5;
}

.intake-reveal-detail {
  margin: 0.55rem 0 0;
  color: rgba(255, 248, 241, 0.78);
  font-size: 0.88rem;
  line-height: 1.5;
}

.intake-reveal-source {
  margin: 0.8rem 0 0;
  color: rgba(255, 248, 241, 0.62);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-style: italic;
  letter-spacing: 0.01em;
}

.intake-reveal[data-state="loading"] .intake-reveal-headline {
  color: rgba(255, 248, 241, 0.75);
  font-size: 1.02rem;
  font-family: var(--font-body, inherit);
}

.payment-summary {
  margin: 0.5rem 0 0;
  padding: 1rem;
  border: 1px solid rgba(255, 248, 241, 0.45);
  border-radius: 14px;
  background: rgba(255, 248, 241, 0.08);
  color: #fff8f1;
}

.payment-summary strong {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
}

.payment-summary p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.reserve-copy {
  max-width: 580px;
  margin: 1.25rem 0 2.2rem;
  color: #fff8f1;
  font-size: 1.02rem;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

.field label {
  font-size: 0.88rem;
  font-weight: 700;
}

.field input {
  width: 100%;
  min-height: 54px;
  padding: 0.8rem 0.95rem;
  border: 2px solid rgba(255, 248, 241, 0.52);
  border-radius: 14px;
  background: rgba(255, 248, 241, 0.96);
  color: #1b3156;
}

.field input[aria-invalid="true"] {
  border-color: #5e1720;
  box-shadow: 0 0 0 3px rgba(94, 23, 32, 0.18);
}

.field-help,
.field-error {
  min-height: 1.25rem;
  margin: 0;
  font-size: 0.78rem;
}

.field-help {
  color: #fff8f1;
}

.field-error {
  color: #fff;
  font-weight: 700;
}

.button-full {
  width: 100%;
  margin-top: 1.2rem;
  border-color: var(--ink-deep);
  background: var(--ink-deep);
}

.button:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.prototype-note {
  margin: 0.8rem 0 0;
  color: #fff8f1;
  font-size: 0.78rem;
  text-align: center;
}

.reservation-error {
  margin: 0.75rem 0 0;
  color: #fff8f1;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

.reserve-default,
.reserve-done {
  width: 100%;
  max-width: 680px;
}

.intake-form {
  display: grid;
  gap: 1.4rem;
}

.intake-person {
  margin: 0;
  padding: 1.25rem;
  border: 1px solid rgba(255, 248, 241, 0.36);
  border-radius: 18px;
}

.intake-person legend {
  padding: 0 0.45rem;
  color: #fff8f1;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
}

.intake-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.intake-field {
  display: grid;
  gap: 0.42rem;
}

.intake-field-wide {
  grid-column: 1 / -1;
}

.intake-field > span,
.intake-field > label {
  color: #fff8f1;
  font-size: 0.78rem;
  font-weight: 700;
}

.intake-field em {
  font-weight: 400;
}

.intake-field input,
.intake-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.78rem 0.9rem;
  border: 2px solid rgba(255, 248, 241, 0.52);
  border-radius: 14px;
  background: rgba(255, 248, 241, 0.97);
  color: #1b3156;
}

.intake-field textarea {
  min-height: 112px;
  resize: vertical;
}

.intake-field input:focus,
.intake-field textarea:focus {
  border-color: #1b3156;
  outline: 3px solid rgba(27, 49, 86, 0.22);
  outline-offset: 1px;
}

.intake-place {
  position: relative;
}

.place-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 15;
  overflow: hidden;
  border: 1px solid rgba(27, 49, 86, 0.18);
  border-radius: 14px;
  background: #fff8f1;
  box-shadow: 0 18px 42px rgba(27, 49, 86, 0.2);
}

.place-list button {
  display: block;
  width: 100%;
  padding: 0.82rem 0.9rem;
  border: 0;
  border-bottom: 1px solid rgba(27, 49, 86, 0.1);
  background: transparent;
  color: #1b3156;
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.35;
  text-align: left;
}

.place-list button:last-child {
  border-bottom: 0;
}

.place-list button:hover,
.place-list button:focus-visible {
  background: #f6e1d4;
  outline: 0;
}

.intake-consent {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.7rem;
  align-items: start;
  color: #fff8f1;
  font-size: 0.78rem;
  line-height: 1.5;
}

.intake-consent input {
  width: 18px;
  height: 18px;
  margin-top: 0.12rem;
  accent-color: #1b3156;
}

.intake-consent a {
  text-underline-offset: 3px;
}

.intake-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

.reservation-complete,
.intake-complete,
.balance-panel,
.balance-complete {
  max-width: 580px;
}

.faq {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(3rem, 9vw, 10rem);
}

.faq h2 {
  font-size: clamp(3rem, 4.7vw, 5.4rem);
}

.faq-list {
  border-top: 1px solid var(--line-strong);
}

.faq-list details {
  border-bottom: 1px solid var(--line-strong);
}

.faq-list summary {
  position: relative;
  padding: 1.6rem 3rem 1.6rem 0;
  color: var(--ink-deep);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  font-weight: 500;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  position: absolute;
  top: 50%;
  right: 0.2rem;
  width: 22px;
  height: 22px;
  color: var(--terra-deep);
  content: "+";
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 18px;
  text-align: center;
  transform: translateY(-50%);
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list details p {
  max-width: 62ch;
  margin: -0.4rem 0 1.7rem;
  color: var(--ink-soft);
}

.site-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  width: min(100% - 48px, 1400px);
  margin: 0 auto;
  padding: 3.5rem 0;
  border-top: 1px solid var(--line-strong);
}

.brand-footer {
  font-size: 1.2rem;
}

.site-footer p {
  margin: 0.7rem 0 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.footer-note {
  font-family: var(--font-display);
  font-size: 0.88rem !important;
  letter-spacing: 0.01em;
  font-variant-numeric: oldstyle-nums;
}

.footer-meta {
  display: grid;
  justify-items: end;
  gap: 0.8rem;
}

.footer-meta nav {
  display: flex;
  gap: 1.1rem;
  font-size: 0.78rem;
}

.toast {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 80;
  display: grid;
  gap: 0.18rem;
  width: min(calc(100% - 2.5rem), 390px);
  padding: 1rem 1.15rem;
  border: 1px solid rgba(255, 248, 241, 0.18);
  border-radius: 18px;
  background: var(--ink-deep);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24);
  color: #fff8f1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast strong {
  font-size: 0.88rem;
}

.toast span {
  color: rgba(255, 248, 241, 0.74);
  font-size: 0.78rem;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-copy > * {
  opacity: 0;
  transform: translateY(24px);
  animation: copyRise 850ms var(--ease) forwards;
}

.hero-copy > :nth-child(1) {
  animation-delay: 100ms;
}

.hero-copy > :nth-child(2) {
  animation-delay: 180ms;
}

.hero-copy > :nth-child(3) {
  animation-delay: 280ms;
}

.hero-copy > :nth-child(4) {
  animation-delay: 360ms;
}

@keyframes copyRise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1120px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .desktop-nav {
    display: none;
  }

  .hero {
    grid-template-columns: 0.9fr 1.1fr;
    padding-left: 32px;
  }

  .hero h1 {
    font-size: clamp(3.7rem, 6.2vw, 5rem);
  }

  .keepsake,
  .process,
  .faq {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .keepsake {
    grid-template-columns: 0.75fr 1.25fr;
  }

  .page-collage {
    min-height: 480px;
  }

  .reserve {
    grid-template-columns: 0.65fr 1.35fr;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 16px;
  }

  .site-header {
    width: calc(100% - 32px);
    height: 68px;
  }

  .brand {
    font-size: 0.88rem;
  }

  .theme-label {
    display: none;
  }

  .theme-toggle {
    width: 40px;
    height: 40px;
    justify-content: center;
    padding: 0;
  }

  .site-header .button-small {
    min-height: 38px;
    padding: 0.55rem 0.72rem;
    font-size: 0.78rem;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 68px 0 0;
    background: var(--paper-deep);
  }

  .hero-copy {
    min-height: 570px;
    padding: 5rem 20px 3.5rem;
  }

  /* Redesigned 2026-08-01. The hero was a poster: heavy weight, tracking
     pulled to -0.065em, line-height under 1, six blocks stacked with no
     air. Authority reads quieter than that. Lighter weight, tracking near
     zero, generous leading, and space instead of size. */
  .hero h1 {
    font-size: clamp(1.72rem, 7vw, 2.5rem);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -0.012em;
    text-wrap: pretty;
    max-width: 22ch;
  }

  .hero-copy {
    padding-bottom: 0;
  }

  .hero h1 em {
    margin-top: 0.12em;
  }

  .hero-lede {
    margin-top: 1.6rem;
    max-width: 26ch;
    font-size: 1.02rem;
  }

  .hero-film {
    margin-top: 2.4rem;
  }

  .hero-actions {
    margin-top: 2.2rem;
  }

  .hero-price {
    margin-top: 0.9rem;
  }

  .hero-lede {
    max-width: 32ch;
    margin-top: 1.3rem;
  }

  .hero-art {
    min-height: 480px;
  }

  .hero-art::before {
    background: linear-gradient(180deg, var(--paper-deep) 0%, transparent 15%);
  }

  .hero-art img {
    object-position: 84% center;
  }

  .section {
    width: calc(100% - 40px);
    padding: 6.5rem 0;
  }

  .section-heading {
    margin-bottom: 2.5rem;
  }

  .section-heading h2,
  .keepsake h2,
  .limits h2,
  .reserve h2,
  .faq h2 {
    font-size: clamp(3rem, 13vw, 4.6rem);
  }

  .film-wrap {
    border-radius: 20px;
  }

  .sample-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .sample-buttons {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .sample-buttons .button {
    width: 100%;
  }

  .keepsake,
  .process,
  .faq,
  .limits-inner,
  .reserve {
    grid-template-columns: 1fr;
  }

  .keepsake {
    gap: 3.5rem;
  }

  .keepsake blockquote {
    margin-top: 2rem;
  }

  .page-collage {
    min-height: 430px;
  }

  .page-main {
    top: 58px;
    width: 82%;
  }

  .page-top {
    width: 61%;
  }

  .page-bottom {
    right: 0;
    width: 62%;
  }

  .inside {
    width: calc(100% - 40px);
  }

  .voice-line {
    grid-template-columns: 1fr 76px;
    min-height: 190px;
  }

  .voice-line h3 {
    font-size: clamp(2.1rem, 8vw, 3rem);
  }

  .voice-line > div:first-child p {
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .voice-mascot,
  .pair-mascot {
    width: 60px;
    height: 60px;
  }

  .voice-mascot::before {
    top: -12px;
    left: 18px;
    width: 27px;
    height: 27px;
  }

  .voice-mascot span {
    top: -3px;
    left: 27px;
    width: 10px;
    height: 5px;
  }

  .pair-mascot i,
  .pair-mascot b {
    width: 36px;
    height: 50px;
  }

  .pair-mascot span {
    left: 9px;
    width: 45px;
  }

  .limits {
    padding: 6.5rem 20px;
  }

  .limits-inner {
    gap: 2.5rem;
  }

  .process {
    gap: 1rem;
  }

  .reserve {
    width: calc(100% - 24px);
    padding-top: 1rem;
  }

  .reserve-art {
    min-height: 390px;
    border-radius: 24px 24px 0 0;
  }

  .reserve-panel {
    min-height: 0;
    padding: 3.2rem 1.2rem;
    border-radius: 0 0 24px 24px;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .intake-grid {
    grid-template-columns: 1fr;
  }

  .intake-field-wide {
    grid-column: auto;
  }

  .faq {
    gap: 2.5rem;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
    width: calc(100% - 40px);
  }

  .footer-meta {
    justify-items: start;
  }
}

@media (max-width: 360px) {
  .site-header .brand > span:last-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .hero-copy > * {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Chapter chooser, stepped intake, sticky reserve bar.
   Added 2026-07-28 with the funnel rebuild: the offer and the
   price move into the first screenful and the proof becomes a
   choice the visitor makes rather than a video she must find.
   ============================================================ */

/* .chooser is a .section now; it must not fight .section's centering. */

.chooser-prompt {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3.4vw, 1.34rem);
  line-height: 1.28;
  color: var(--ink);
  margin: 0 0 14px;
}

/* The chapter index. Borrowed from the keepsake's own contents page: a
   terracotta chapter numeral, the title, a rule beneath, and a figure in the
   right margin. In the book that figure is a page number; here it is how long
   the chapter runs, so the margin carries information rather than a chevron.
   Nothing moves on hover: the row warms, the numeral and the time come forward,
   and a terracotta marker fades in at the edge. */
.chapter-index {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.chapter-row {
  display: grid;
  grid-template-columns: 2.1rem 1fr auto;
  align-items: baseline;
  column-gap: 4px;
  width: 100%;
  padding: 17px 14px 17px 2px;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  /* inset marker, so selecting a row never shifts the text */
  box-shadow: inset 3px 0 0 rgba(0, 0, 0, 0);
  transition: background-color .22s var(--ease), box-shadow .22s var(--ease);
}

/* Numbered the way the keepsake's own contents page numbers them: book
   serif, no leading zero, so the site and the object agree. */
.chapter-num {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 400;
  font-variant-numeric: oldstyle-nums;
  letter-spacing: 0;
  color: var(--terra);
  min-width: 1.1em;
  text-align: right;
}

.chapter-text { display: block; }

.chapter-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--ink);
}

.chapter-sub {
  display: block;
  margin-top: 4px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink-soft);
  opacity: .8;
}

.chapter-len {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-variant-numeric: oldstyle-nums;
  letter-spacing: 0;
  color: var(--index-quiet);
}

.chapter-row:hover,
.chapter-row:focus-visible {
  background-color: var(--paper);
}

.chapter-row:hover .chapter-num,
.chapter-row:focus-visible .chapter-num {
  color: var(--terra);
  opacity: 1;
}

.chapter-row:hover .chapter-len,
.chapter-row:focus-visible .chapter-len { color: var(--terra); }

.chapter-row[aria-pressed="true"] {
  background-color: var(--paper);
  box-shadow: inset 3px 0 0 var(--terra);
}

.chapter-row[aria-pressed="true"] .chapter-num {
  color: var(--terra);
  opacity: 1;
}

.chapter-row[aria-pressed="true"] .chapter-len {
  color: var(--terra);
  opacity: 1;
}

.chooser-help {
  margin: 12px 0 0;
  font-size: .88rem;
  color: var(--ink-soft);
}

.hero-price {
  margin: 18px 0 0;
  font-size: 1.02rem;
  color: var(--ink-soft);
}

.hero-price strong { color: var(--ink); }

/* The chosen chapter. */
.listen .film-wrap video {
  width: 100%;
  border-radius: 16px;
  background: var(--ink-deep);
  display: block;
}


.chooser-tile-compact {
  width: auto;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-family: var(--font-display);
  color: var(--ink);
}

/* Progressive intake. */
.intake-progress {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

/* The bar names each step now, so the reward is visible from screen one
   rather than arriving as a surprise after two screens of birth data. */
.intake-progress li {
  flex: 1;
  padding-top: 9px;
  border-top: 3px solid rgba(255, 248, 241, 0.28);
  color: rgba(255, 248, 241, 0.55);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.25;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.intake-progress li.is-current,
.intake-progress li.is-done {
  border-top-color: #fff1e7;
  color: #fff1e7;
}

.intake-why {
  margin: -4px 0 18px;
  max-width: 46ch;
  color: rgba(255, 248, 241, 0.72);
  font-size: 0.88rem;
  line-height: 1.5;
}

.intake-step[hidden] { display: none; }

.intake-next { margin-top: 20px; }

/* Keepsake proof: real pages, shown large enough to read. */
.keepsake-pages {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  margin-top: 28px;
}

@media (min-width: 760px) {
  .keepsake-pages { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; }
  .keepsake-page-lead { grid-row: span 1; }
}

.keepsake-page { margin: 0; }

.keepsake-page img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.keepsake-page figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.keepsake-note {
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* Sticky reserve bar: carries the price and opens the real step. */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  /* Paper does not blur what is behind it. */
  background: var(--paper);
  border-top: 1px solid var(--line-strong);
}

.sticky-cta[hidden] { display: none; }

.sticky-cta-price {
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.sticky-cta .button { flex: 0 0 auto; }

@media (min-width: 900px) {
  .sticky-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .chooser-tile { transition: none; }
  .chooser-tile:hover { transform: none; }
}


/* Hero: on a phone the words and the choice own the first screen; the artwork
   follows. On desktop there is room for both at once, so it returns beside the
   copy. */
/* On a phone the promise and the proof must share the first screen. The words
   come first so the page still says what it is, the film sits directly under
   them, and the price and CTA close the screen. */
@media (max-width: 899px) {
  .hero {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    /* display:contents on the copy removes its own box, so the hero owns the
       gutter and the clearance under the fixed header. */
    padding: 88px max(5vw, 20px) 32px;
    background: var(--paper-deep);
  }
  .hero-copy { order: 1; display: contents; }
  .hero-copy .hero-mark { margin-top: 0; }
  .hero-copy .hero-mark { order: 1; }
  .hero-copy h1 { order: 2; font-size: clamp(2.1rem, 9.5vw, 2.7rem); margin-bottom: 10px; }
  .hero-copy .hero-lede { order: 3; font-size: 0.88rem; margin-bottom: 12px; }
  .hero-film { order: 4; }
  .hero-actions { order: 5; margin-top: 16px; }
  .hero-film figcaption { margin-top: 9px; font-size: 0.78rem; }
}

/* Pages from a real reading, scrolled sideways. Manual scroll only: rotating
   carousels suppress what people see, but a swipeable gallery of product
   imagery is the documented exception. */
.page-gallery { margin-top: 26px; }

/* The gallery spans the keepsake grid. Auto-placement was dropping it into
   the narrow art column, where a 6x9 page track showed 1.4 pages. */
.keepsake .page-gallery { grid-column: 1 / -1; }

.page-gallery-track {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0 0 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.page-gallery-track > li {
  flex: 0 0 clamp(220px, 66vw, 320px);
  scroll-snap-align: start;
}

.page-gallery-track img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.keepsake-page-caption {
  margin: 10px 0 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.page-gallery-hint {
  margin: 4px 0 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.page-gallery-track:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

@media (min-width: 900px) {
  .page-gallery-hint { display: none; }
}

/* The stacked quote cards were retired 2026-07-28: they read as generic and
   the page already had a better language for a sentence that matters. */


@media (prefers-reduced-motion: reduce) {
  .chapter-row,
  .chapter-num,
  .chapter-len { transition: none; }
}

/* ============================================================
   Beat 1: proof that needs no interaction. The old page hid its
   sample behind a tap and 92.5% never took it. This plays on
   arrival, silent, and asks nothing.
   ============================================================ */
.hero-film { margin: 0; }

.hero-film-frame { position: relative; }

.hero-film video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  background: var(--ink-deep);
  box-shadow: var(--shadow);
}

/* The product is narrated; a visitor must be able to hear a voice without
   hunting for it. One tap swaps the silent loop for a full voiced chapter,
   in place. */
.hero-hear {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border: 0;
  border-radius: 999px;
  /* The pill sits on the film, which is dark in both themes, so its colors
     are fixed: cream ground, light-theme ink. Theme tokens would flip the
     text light-on-cream in dark mode. */
  background: rgba(255, 248, 241, 0.94);
  color: #10213d;
  font-family: var(--font-display);
  font-size: 0.88rem;
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(15, 25, 44, 0.35);
  transition: background-color 0.22s var(--ease);
}

.hero-hear:hover,
.hero-hear:focus-visible {
  background: #fff8f1;
}

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

.hero-hear svg { flex: 0 0 auto; }

/* display:inline-flex would otherwise beat the hidden attribute. */
.hero-hear[hidden] { display: none; }

.hero-film figcaption {
  margin-top: 12px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.hero-actions { margin-top: 26px; }

.hero-price {
  margin: 12px 0 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* Someone who asked for less motion gets a still frame, not a loop. The
   "Hear it" tap is their own request, so the player may appear then. */
@media (prefers-reduced-motion: reduce) {
  .hero-film video { display: none; }
  .hero-film { background-image: var(--hero-still); }
  .hero-film-frame {
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    background: var(--hero-still) center / cover no-repeat;
    box-shadow: var(--shadow);
  }
  .hero-film.is-heard video { display: block; }
  .hero-film.is-heard .hero-film-frame {
    aspect-ratio: auto;
    background: none;
    box-shadow: none;
  }
}

/* ============================================================
   Desktop composition, measured at 1440x900 on 2026-07-28. Every
   rule here corrects a shape that only exists on a wide viewport;
   the approved mobile layout is untouched.
   ============================================================ */
@media (min-width: 900px) {
  /* One sentence at display size, not a tower: the 30ch cap resolved
     against the wrapper's 16px body font and produced a 286px column.
     (Scoped selector: the base rule follows this block in source order.) */
  .recognition .recognition-inner { max-width: 880px; }

  /* The hero column stretches to the viewport; without this the film
     pins to the top and leaves a dead zone below it. */
  .hero-film {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* The Prince and Princess planning their route on the map, behind the
     first view. The gradient keeps the headline side quiet; the film
     floats over the artwork. Francesco: "I always found it pretty
     impressive." */
  .hero { position: relative; }

  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(105deg, var(--paper-deep) 34%, rgba(246, 225, 212, 0) 72%),
      linear-gradient(rgba(246, 225, 212, 0.22), rgba(246, 225, 212, 0.22)),
      url("img/hero-prince-princess.webp?v=49") 82% 38% / cover no-repeat;
    pointer-events: none;
  }

  /* In the dark theme the artwork keeps its place under a heavier veil,
     so the first view stays a night page rather than a bright poster. */
  :root[data-theme="dark"] .hero::after {
    background:
      linear-gradient(105deg, var(--paper-deep) 34%, rgba(16, 12, 10, 0) 72%),
      linear-gradient(rgba(20, 15, 13, 0.6), rgba(20, 15, 13, 0.6)),
      url("img/hero-prince-princess.webp?v=49") 82% 38% / cover no-repeat;
  }

  .hero-copy,
  .hero-film {
    position: relative;
    z-index: 1;
  }

  /* A contents page reads as a page. At full grid width the title and
     its running time sat a metre apart. */
  .chapter-index { max-width: 920px; }

  /* The chosen chapter's player: watchable, not a 720px cinema wall. */
  .listen .film-wrap { max-width: 1000px; }

  /* Reading measure for the voices. */
  .voice-line { max-width: 880px; }
}

/* ============================================================
   Beat 2: recognition, as words. One sentence from a real reading,
   set at display size, doing the work a menu cannot do.
   ============================================================ */
.recognition {
  padding: clamp(56px, 11vw, 104px) 0;
  background: var(--paper-deep);
}

/* This sat at 53px on a phone while every other section sat at 20px. A
   33px step nobody can name is what reads as "busy". It is on the line now;
   the measure is held by max-width, not by extra padding. */
.recognition-inner {
  max-width: 34ch;
  margin: 0;
  padding: 0 var(--gutter, 20px);
}

.recognition-line {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 5.4vw, 2.5rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.recognition-source {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-style: italic;
  letter-spacing: .01em;
  color: var(--index-quiet);
}

/* ------------------------------------------------------------
   Francesco caught this: the chapter titles were set in the
   display face at body size. Display faces are drawn for scale.
   Titles move to the body face; the display face is reserved for
   things that are actually large.
   ------------------------------------------------------------ */
.chapter-name {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.chooser.section .section-heading { margin-bottom: 6px; }

/* The brand characters moved out of the hero into the what-you-get section and
   arrived without a box, so the raw 1536px asset was blowing the page sideways. */
.keepsake-art {
  margin: 0 0 26px;
  max-width: 100%;
}

.keepsake-art img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

@media (min-width: 900px) {
  .keepsake-art { max-width: 520px; }
}

/* Nothing on this page may scroll sideways. */
html, body { max-width: 100%; overflow-x: hidden; }


/* ============================================================
   Alignment. The page had seven distinct left edges: 0, 16, 20,
   31, 34, 40 and 224. Everything that is a block of content now
   starts on the same line, and the chapter numerals hang inside
   that line rather than outside it.
   ============================================================ */
@media (max-width: 899px) {
  /* the header box is itself inset, so its own padding must be zero for the
     brand to land on the page's line rather than 16px inside it */
  .site-header { width: 100%; left: 0; transform: none; padding-left: var(--gutter); padding-right: var(--gutter); }

  /* the reserve section is its own grid with a 620px minimum column and a
     deeply padded panel. On a phone it becomes one column on the page's line,
     and the panel keeps only vertical padding. */
  .reserve {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - (var(--gutter) * 2));
    margin: 0 auto;
    padding-top: 2rem;
  }
  .reserve > * { min-width: 0; }
  .reserve-art { display: none; }
  /* The panel keeps its card. Rather than stripping its padding to force
     alignment, the card bleeds to the screen edge and its own padding puts the
     heading and fields on the page's line. Design survives, alignment holds. */
  .reserve {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .reserve-panel {
    min-height: 0;
    padding: 2.6rem var(--gutter) 3rem;
    border-radius: 0;
  }

  .hero { padding-left: var(--gutter); padding-right: var(--gutter); }

  .recognition-inner { padding: 0 var(--gutter); }

  /* the keepsake grid keeps a 620px minimum column, which cannot fit a phone */
  .keepsake {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-top: 4rem;
  }
  .keepsake > * { min-width: 0; }

  /* the chapter index sits flush with its own heading */
  .chapter-row { padding-left: 0; padding-right: 4px; }
}

/* Grid children default to min-width:auto, so an intrinsically wide image can
   push a track past the viewport. This is what sent the page sideways. */
.keepsake > *,
.hero > * { min-width: 0; }

/* ============================================================
   Voices. Card-stacked quotes read as generic; the page already
   has a language for a sentence that matters, so the proof uses
   it. Reading lines and customer lines alternate, distinguished
   by a rule colour rather than by a box.
   ============================================================ */
.voice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(30px, 5vw, 46px);
}

.voice {
  padding-left: 18px;
  border-left: 2px solid var(--line);
}

.voice-reading { border-left-color: var(--terra); }
.voice-customer { border-left-color: var(--gold); }

.voice-line {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3.9vw, 1.6rem);
  line-height: 1.34;
  color: var(--ink);
  text-wrap: pretty;
}

.voice-from {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: .88rem;
  font-style: italic;
  letter-spacing: .01em;
  color: var(--index-quiet);
}

.voices-note {
  margin: clamp(34px, 6vw, 52px) 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------
   Added 2026-08-01 with the copy lock: the lead-in above the
   recognition quote, what a chapter hands you, and the founder note.
   ------------------------------------------------------------ */

.recognition-lead {
  margin: 0 0 clamp(18px, 3vw, 28px);
  color: var(--terra-deep);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.1vw, 1.35rem);
  font-style: italic;
  line-height: 1.35;
}

.chapter-gives {
  margin: clamp(34px, 6vw, 54px) 0 0;
  padding-top: clamp(22px, 4vw, 30px);
  border-top: 1px solid var(--line);
}

.chapter-gives h3 {
  margin: 0 0 clamp(14px, 2.4vw, 20px);
  color: var(--ink-deep);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.chapter-gives ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  max-width: 46ch;
  list-style: none;
}

.chapter-gives li {
  position: relative;
  padding-left: 26px;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.5;
}

.chapter-gives li::before {
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 1px;
  background: var(--gold);
  content: "";
}

/* The founder note. Deliberately the least designed thing on the page:
   one drawn face, one column of text, no card, no border. */
.founder {
  padding: clamp(56px, 10vw, 108px) var(--gutter);
  background: var(--paper-deep);
}

.founder-inner {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  width: min(100%, 760px);
  margin: 0 auto;
}

.founder-mark {
  margin: 0;
  color: var(--terra);
}

.founder-mark svg {
  display: block;
}

.founder-copy h2 {
  margin: 0 0 clamp(18px, 3vw, 26px);
  color: var(--ink-deep);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
}

.founder-copy p {
  margin: 0 0 1.15em;
  max-width: 60ch;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.68;
}

.founder-sign {
  margin: clamp(20px, 3vw, 30px) 0 0 !important;
  color: var(--terra-deep);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-style: italic;
}

@media (min-width: 860px) {
  .founder-inner {
    grid-template-columns: 96px 1fr;
    align-items: start;
    gap: clamp(36px, 5vw, 64px);
  }
}

/* The illustration is brand art, not product proof, so it had no reason to
   sit inside what-you-get at screenful 6.7 where almost nobody reaches it.
   It now opens the chooser, inside the first three screenfuls that carry
   81% of viewing time. */
.story-art-wrap {
  margin: 0;
  padding: clamp(28px, 5vw, 56px) var(--gutter) 0;
}

.story-art {
  width: min(100%, 1080px);
  margin: 0 auto;
}

.story-art img {
  width: 100%;
  height: auto;
  border-radius: clamp(18px, 3vw, 28px);
}


/* The map sits behind the hero on desktop, where there is room beside the
   headline. On a phone there is not, so it runs full width just under the
   recognition line instead. Never both. */
@media (min-width: 1024px) {
  .story-art-wrap { display: none; }
}


/* ------------------------------------------------------------
   Mobile, 2026-08-01. Meta traffic is a phone feed, so the artwork
   belongs behind the first view here too, not only above 1024px.
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
  .hero {
    position: relative;
    isolation: isolate;
  }

  /* The two figures over the map, set low and right so the headline keeps
     the top-left quiet. The veil is heavy enough that 17px body copy still
     clears contrast over the busiest part of the illustration. */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(178deg, var(--paper-deep) 30%, rgba(246, 225, 212, 0.72) 62%, rgba(246, 225, 212, 0.55) 100%),
      url("img/hero-prince-princess-768.jpg?v=49") 72% 88% / 150% auto no-repeat;
    pointer-events: none;
  }

  :root[data-theme="dark"] .hero::after {
    background:
      linear-gradient(178deg, var(--paper-deep) 30%, rgba(20, 35, 62, 0.86) 62%, rgba(20, 35, 62, 0.78) 100%),
      url("img/hero-prince-princess-768.jpg?v=49") 72% 88% / 150% auto no-repeat;
  }

  /* Behind the hero and again 1.5 screenfuls later is the same picture
     twice. The backdrop wins; the standalone block goes. */
  .story-art-wrap { display: none; }
}


/* The product facts sit under the price, where they answer "what actually
   arrives" rather than competing with the headline. */
.hero-what {
  margin: 0.45rem 0 0;
  max-width: 30ch;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

.hero-film figcaption {
  font-size: 0.88rem;
}

/* ------------------------------------------------------------
   Hero headline, final word. Three earlier media blocks all set
   .hero h1, and the last one won at a size nobody chose, which is
   why the italic clause kept splitting. One rule, at the end,
   deliberately last. Francesco: "the whole hero is a bit too busy...
   we sell from authority." Authority is quieter than a poster.
   ------------------------------------------------------------ */
@media (max-width: 899px) {
  .hero h1 {
    font-size: clamp(1.62rem, 6.6vw, 2.3rem) !important;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: pretty;
    max-width: 24ch;
    white-space: normal;
  }

  .hero h1 em {
    display: block;
    margin-top: 0.14em;
    text-wrap: nowrap;
  }
}


/* ============================================================
   2026-08-01 · Readability pass. Francesco: "I have to squint and
   read carefully. We will lose most people if we're not direct."

   Headlines move to Hanken Grotesk at 700. A display serif at
   headline size on a phone asks to be read; a bold sans asks to be
   scanned, and cold traffic scans. Fraunces keeps the quotes and the
   attributions, where a serif is doing something a sans cannot.

   The palette, the illustration and the paper do not move.
   ============================================================ */

.hero h1,
.chooser-prompt,
.chapter-gives h3,
.founder-copy h2,
#limits-title,
#keepsake-title,
#faq-title,
#reserve-title,
.reserve-panel h2,
.section-heading h2 {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.14;
}

/* The serif still says the emotional half of the hero. */
.hero h1 em {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Quotes stay serif. That is the product's own voice. */
.recognition-line {
  font-family: var(--font-display);
}

@media (max-width: 899px) {
  .hero h1 {
    font-size: clamp(1.85rem, 7.4vw, 2.4rem) !important;
    letter-spacing: -0.028em;
    line-height: 1.12;
    max-width: 17ch;
  }

  .chooser-prompt,
  .founder-copy h2,
  #limits-title,
  #keepsake-title,
  #faq-title,
  .reserve-panel h2 {
    font-size: 1.62rem !important;
    line-height: 1.16;
    max-width: 18ch;
  }

  .chapter-name { font-weight: 700; }

  /* Short lines scan. Long ones get skipped. */
  .hero-lede,
  .chapter-gives li,
  .limits-copy p,
  .founder-copy p { max-width: 34ch; }
}

/* The artwork was fighting the hero copy through a heavy veil. It sits
   behind the recognition line instead, where nothing competes with it. */
@media (max-width: 1023px) {
  .hero::after { display: none; }

  .recognition {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .recognition::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.5;
    background: url("img/hero-prince-princess-768.jpg?v=49") 60% 70% / cover no-repeat;
  }
}

/* ============================================================
   2026-08-01 · Francesco: "bold colors. big fonts and sentences.
   attention is directed and orchestrated not overloaded."

   The page was one continuous paper wash, so every section competed
   with its neighbours and nothing owned the eye. It alternates now:
   paper hero, terracotta recognition, paper chooser, dark offer,
   paper founder, dark boundary. One beat at a time.
   ============================================================ */
.recognition {
  background: var(--terra-panel);
  color: #fff8f1;
  padding-top: clamp(64px, 12vw, 120px);
  padding-bottom: clamp(64px, 12vw, 120px);
}

.recognition-lead {
  color: rgba(255, 248, 241, 0.82);
  font-size: clamp(1.02rem, 3.4vw, 1.2rem);
}

.recognition-line {
  color: #fff8f1;
  font-size: clamp(1.72rem, 7vw, 2.6rem);
  line-height: 1.2;
  max-width: 19ch;
}

.recognition-source {
  color: rgba(255, 248, 241, 0.66);
}

/* The artwork sits under the colour, low enough that the type keeps its
   contrast and present enough to feel like paper rather than a swatch. */
@media (max-width: 1023px) {
  .recognition::after {
    opacity: 0.16;
    mix-blend-mode: luminosity;
  }
}

/* ============================================================
   2026-08-01 · The spine. What gets announced, how loud, and why.
   Approved by Francesco: eight beats, each announcing one idea, at
   a rhythm of long, short, two words, three words, medium. The
   announcements are Hanken 700; the serif speaks only when the
   product itself is talking.
   ============================================================ */

/* Beat 2. The announcement is ours; the quote is theirs. Two voices,
   two faces, one turn. */
.recognition-announce {
  margin: 0 0 clamp(20px, 4vw, 32px);
  color: #fff8f1;
  font-family: var(--font-body);
  font-size: clamp(2rem, 8.4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
  max-width: 13ch;
}

.recognition-line {
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 3.8vw, 1.45rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 248, 241, 0.9);
  max-width: 34ch;
}

/* The lead whispers before the announce shouts. */
.recognition-lead {
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}

/* Beat 4. The ask is the loudest thing after the hero, because it is
   the moment the page exists for. */
.reserve-panel h2 {
  font-size: clamp(2.1rem, 9vw, 4.4rem) !important;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

/* Beat 8. No headline; a quiet serif lead is all an accordion needs. */
.faq-lead {
  margin: 0 0 1.4rem;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-style: italic;
}

/* Announcements two words long can afford to be large. */
@media (max-width: 899px) {
  .chooser-prompt,
  #keepsake-title {
    font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
    letter-spacing: -0.03em;
  }
}

/* ============================================================
   2026-08-01 · Francesco's punch pass. The fight line is the
   announcement, its load words in serif italic a step larger, so
   the sentence lands at a glance instead of reading as a whisper.
   ============================================================ */
.recognition-announce em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.14em;
  color: var(--gold-soft);
  letter-spacing: -0.01em;
}

@media (max-width: 899px) {
  .recognition-announce {
    font-size: clamp(2.05rem, 9vw, 3.1rem);
    max-width: 12ch;
    line-height: 1.08;
  }
}

/* The reveal is the payoff of the whole form, so it reads as a printed
   slip of the reading itself: paper card, gold rule, ink text, on the
   terracotta panel. The translucent card read as chrome. */
.intake-reveal {
  border: 0;
  border-top: 3px solid var(--gold);
  border-radius: 10px;
  background: #fff8f1;
  padding: 20px 22px 18px;
}

.intake-reveal-eyebrow { color: var(--terra-deep); }
.intake-reveal-headline {
  color: #10213d;
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.intake-reveal-line { color: #38465c; }
.intake-reveal-detail { color: #38465c; }
.intake-reveal-source { color: rgba(56, 70, 92, 0.65); }

.intake-reveal[data-state="loading"] .intake-reveal-headline {
  color: #38465c;
  font-weight: 400;
}

/* Five choices, one tap. Her chooser tap arrives pre-selected. */
.intake-focus {
  margin: 0;
  padding: 0;
  border: 0;
}

.intake-focus legend {
  padding: 0;
  margin-bottom: 12px;
  color: #fff1e7;
  font-size: 1.02rem;
  font-weight: 700;
}

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

.focus-pills label { position: relative; }

.focus-pills input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.focus-pills span {
  display: inline-block;
  padding: 0.55rem 1rem;
  border: 1.5px solid rgba(255, 248, 241, 0.45);
  border-radius: 999px;
  color: #fff1e7;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}

.focus-pills input:checked + span {
  background: #fff8f1;
  border-color: #fff8f1;
  color: var(--terra-deep);
}

.focus-pills input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* ============================================================
   2026-08-01 · Step 3 de-cramped. Francesco, from a screenshot:
   cramped, no visual distinction, the focus question hard to see.
   One grid with real gaps, so each block owns its own air; the
   question in bold sans instead of inherited serif; pills at tap
   size; the payment box framed instead of floating.
   ============================================================ */
.intake-step[data-step="3"] {
  display: grid;
  gap: clamp(26px, 5.5vw, 38px);
}

.intake-step[data-step="3"] .intake-reveal { margin: 0; }

.intake-focus legend {
  font-family: var(--font-body);
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.focus-pills { gap: 10px; }

.focus-pills span {
  padding: 0.72rem 1.25rem;
  font-size: 0.95rem;
}

.intake-consent {
  align-items: flex-start;
  line-height: 1.55;
}

.payment-summary {
  margin: 0;
  padding: 20px 22px;
  border: 1px solid rgba(255, 248, 241, 0.38);
  border-radius: 12px;
}

.payment-summary strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.payment-summary p { margin: 0; }

/* The slip holds its height while casting, and the answer fades in rather
   than snapping, so a pill switch reads as the same object updating instead
   of the whole UI changing under her. */
.intake-reveal { min-height: 172px; }

.intake-reveal-headline,
.intake-reveal-line,
.intake-reveal-detail,
.intake-reveal-source {
  transition: opacity 320ms var(--ease);
}

.intake-reveal[data-state="loading"] .intake-reveal-line,
.intake-reveal[data-state="loading"] .intake-reveal-detail,
.intake-reveal[data-state="loading"] .intake-reveal-source { opacity: 0; }

.intake-reveal[data-state="loading"] .intake-reveal-headline {
  opacity: 0.6;
  animation: cast-breathe 1.15s var(--ease) infinite alternate;
}

@keyframes cast-breathe {
  from { opacity: 0.38; }
  to { opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
  .intake-reveal[data-state="loading"] .intake-reveal-headline { animation: none; }
}

.footer-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.privacy-choice {
  position: fixed;
  z-index: 100;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(560px, calc(100% - 32px));
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-top: 4px solid var(--gold);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow);
  color: var(--ink-soft);
}

.privacy-choice h2 {
  margin: 0;
  color: var(--ink-deep);
  font: 500 1.55rem/1.1 var(--font-display);
}
.privacy-choice p { margin: 10px 0 0; line-height: 1.55; }
.privacy-choice-status { font-weight: 700; }
.privacy-choice-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.privacy-choice-actions .button { min-height: 44px; }
.privacy-choice-close {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink-deep);
  font: 600 0.92rem/1 var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (max-width: 560px) {
  .privacy-choice { padding: 20px; }
  .privacy-choice-actions { display: grid; }
  .privacy-choice-actions .button { width: 100%; }
}