/* The home page's own sections, as docs/redesign/prototype/Main.dc.html
 * draws them at 1440 wide, with the phone layout worked out from the same
 * pieces. Tokens and the shared components are in site.css.
 */

.home-section { padding-block: clamp(72px, 9vw, 130px); }
.home-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) {
  .home-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 26px; }
}

.photo {
  overflow: hidden;
  border-radius: var(--radius-photo);
  outline: 1px solid var(--imgline);
  outline-offset: -1px;
  background: var(--bg2);
}
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease-photo); }
@media (hover: hover) and (pointer: fine) {
  .photo:hover img { transform: scale(1.045); }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.home-hero {
  position: relative;
  overflow: hidden;
  color: var(--on-photo);
  background: var(--night);
  padding: calc(var(--header-h) + 28px) 0 40px;
}
/* The content hangs from the top rather than centring, because each family's
   headline wraps to a different number of lines, and centring moved the
   family tabs up and down every time one was picked. */
/* Everything down to the promise under the buttons fits one screen, so on a
   short window the spacing, the headline and the envelope all shrink with its
   height rather than pushing the promise below the fold. */
@media (min-width: 900px) {
  .home-hero { min-height: 100svh; padding: calc(var(--header-h) + clamp(14px, 5svh, 72px)) 0 clamp(20px, 4svh, 56px); display: flex; align-items: flex-start; }
}
.home-hero-photos { position: absolute; inset: 0; overflow: hidden; }
.home-hero-photos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
.home-hero-photos img.is-current { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .home-hero-photos img.is-current { animation: hero-drift 22s ease-out both; }
}
@keyframes hero-drift { from { transform: scale(1.12); } to { transform: none; } }
.home-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(var(--scrim) / .82) 0%, rgb(var(--scrim) / .55) 42%, rgb(var(--scrim) / .08) 75%),
    linear-gradient(0deg, rgb(var(--scrim) / .55), rgb(var(--scrim) / 0) 30%);
}
@media (max-width: 899px) {
  .home-hero-scrim { background: linear-gradient(180deg, rgb(var(--scrim) / .55) 0%, rgb(var(--scrim) / .72) 45%, rgb(var(--scrim) / .88) 100%); }
}
.home-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .home-hero-inner { grid-template-columns: minmax(0, 680px) minmax(360px, 520px); justify-content: space-between; }
}
.home-hero-copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
/* From 900 px the family tabs run across the whole hero, above both columns,
   so all five sit on one line even where the text column is narrow, as on a
   phone set to show the desktop site. The copy's other pieces keep column one. */
@media (min-width: 900px) {
  /* The last row takes whatever height the envelope needs beyond the text,
     so the headline's rows keep their natural spacing, and the envelope
     hangs from the same top edge for every family rather than centring on
     a column whose height changes with each headline. */
  .home-hero-inner { column-gap: 40px; row-gap: clamp(10px, 2.4svh, 28px); grid-template-rows: auto auto auto auto 1fr; }
  .home-hero-copy { display: contents; }
  .home-family { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  .home-tabs { flex-wrap: nowrap; }
  .home-hero h1 { grid-column: 1; grid-row: 2; }
  .home-hero-sub { grid-column: 1; grid-row: 3; }
  .home-hero-actions { grid-column: 1; grid-row: 4; }
  .home-hero-promise { grid-column: 1; grid-row: 5; align-self: start; }
  .home-hero-visual { grid-column: 2; grid-row: 2 / span 4; align-self: start; }
}
@media (min-width: 900px) { .home-hero-copy { gap: 28px; } }
/* On a phone the envelope comes straight after the headline, so it opens on
   the first screen rather than below it. */
@media (max-width: 899px) {
  .home-hero-inner { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
  .home-hero-copy { display: contents; }
  .home-family { order: 1; }
  .home-hero h1 { order: 2; }
  .home-hero-visual { order: 3; }
  .home-hero-sub { order: 4; }
  .home-hero-actions { order: 5; }
  .home-hero-promise { order: 6; }
}

.home-tabs {
  display: flex;
  gap: 6px;
  align-self: flex-start;
  max-width: 100%;
  padding: 5px;
  border-radius: 999px;
  background: rgb(20 14 11 / .35);
  box-shadow: inset 0 0 0 1px rgb(255 250 243 / .25);
  /* The tabs wrap whenever they do not fit, at every width, rather than scroll.
     A scrolling pill hid the first families, and a phone set to show the desktop
     site lands between the phone and desktop layouts where they did not fit. */
  flex-wrap: wrap;
  border-radius: 24px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* On a phone the wrapped rows run the full width, so the two rows read as one bar. */
@media (max-width: 899px) {
  .home-family { align-self: stretch; }
  .home-tab { flex: 1 1 auto; }
}
/* The question above the row says what the row is for, so a visitor sees a
   choice to make rather than a strip of labels. */
.home-family { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.home-family-label {
  margin: 0;
  color: var(--on-photo);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  opacity: .9;
}
.home-tab {
  flex-shrink: 0;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--on-photo);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition-property: background-color, color, transform;
  transition-duration: var(--dur-hover), var(--dur-hover), var(--dur-press);
  transition-timing-function: ease, ease, var(--ease-out);
}
.home-tab:active { transform: scale(.96); }
.home-tab[aria-selected="true"] { background: var(--on-photo); color: var(--night); }
/* Every option carries its own outline, so each one reads as something to tap
   and not only the one already chosen. */
.home-tab[aria-selected="false"] { box-shadow: inset 0 0 0 1px rgb(255 250 243 / .38); }
@media (hover: hover) and (pointer: fine) {
  .home-tab[aria-selected="false"]:hover { background: rgb(255 250 243 / .12); }
}

.home-hero h1 {
  font-size: clamp(44px, 6.7vw, 96px);
  line-height: .98;
  letter-spacing: -.025em;
  /* --reserved-h is the tallest family's headline at this width, set by
     home.js's reserveHeights, so a pick never moves what sits below. */
  min-height: var(--reserved-h, auto);
}
@media (min-width: 900px) {
  .home-hero h1 { font-size: clamp(38px, min(6.7vw, 9.5svh), 96px); min-height: max(2.94em, var(--reserved-h, 0px)); }
  /* The envelope square keeps its 520 by 560 shape and shrinks to the height
     left under the header and the family tabs. */
  .home-hero .home-hero-visual { max-width: min(520px, calc((100svh - var(--header-h) - 170px) * 520 / 560)); }
}
.home-hero-sub { font-size: 17px; line-height: 1.7; color: var(--on-photo-soft); max-width: 540px; min-height: var(--reserved-h, auto); }
@media (min-width: 900px) { .home-hero-sub { font-size: 18px; min-height: max(5.1em, var(--reserved-h, 0px)); } }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.home-hero-promise { font-size: 14px; line-height: 1.6; color: rgb(255 250 243 / .78); max-width: 560px; }
/* The copy that changes with the family fades rather than jumps. */
.home-swap { transition: opacity 180ms var(--ease-out); }
/* The widest family's label, set by home.js, so the button beside it holds
   still when a family is picked; never wider than the row on a phone. */
.home-hero-actions [data-hero-cta] { min-width: min(var(--reserved-w, 0px), 100%); }
.home-swap.is-changing { opacity: 0; }

.home-hero-visual { position: relative; width: 100%; max-width: 520px; justify-self: center; }
.home-hero-replay {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 10;
  transform: translateX(-50%);
  min-height: 40px;
  font-size: 12px;
  /* Dark glass that reads over every backdrop a design brings, white satin
     included; at 35 percent, and turned to the chip's own pale hover wash
     under a resting pointer, its words vanished there. */
  color: var(--on-photo);
  background: color-mix(in oklab, var(--night) 62%, transparent);
  --chip-line: rgb(255 250 243 / .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.home-hero-replay:active { transform: translateX(-50%) scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .home-hero-replay:hover { background: color-mix(in oklab, var(--night) 74%, transparent); }
}

/* The hero's pieces rise in on load, a tenth of a second or so apart. */
@media (prefers-reduced-motion: no-preference) {
  .home-hero .rise { animation: rise 1.2s var(--ease-photo) both; animation-delay: calc(.2s + var(--i, 0) * .25s); }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero .rise { animation: fade 600ms ease both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }

/* ── Kids worlds ───────────────────────────────────────────────────────── */

.home-kids { background: var(--bg2); }
.home-kids-copy { display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 900px) {
  .home-kids-copy { grid-column: 1 / span 6; }
  .home-kids-stage { grid-column: 8 / span 5; }
}
/* On a phone the live world follows the introduction, and the other two
   worlds to pick come after it. */
@media (max-width: 899px) {
  .home-kids .home-grid { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
  .home-kids-copy { display: contents; }
  .home-kids-stage { order: 1; margin-block: 8px; }
  .home-kids-picks, .home-kids-more, .home-kids-note { order: 2; }
}
.home-kids-picks { display: flex; flex-direction: column; gap: 4px; max-width: 460px; }
.world-pick {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px;
  border: 0;
  /* The picture's 14 pixel corner plus this 12 pixel padding, so the chosen
     row's card and the picture in its corner round together. */
  border-radius: 26px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition-property: background-color, transform, box-shadow;
  transition-duration: var(--dur-hover), var(--dur-press), var(--dur-hover);
  transition-timing-function: ease-out, var(--ease-out), ease-out;
}
.world-pick:active { transform: scale(.96); }
.world-pick[aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 12px 30px -18px rgb(0 0 0 / .25); }
@media (hover: hover) and (pointer: fine) {
  .world-pick[aria-pressed="false"]:hover { background: color-mix(in oklab, var(--surface) 55%, transparent); }
}
/* Every row's picture sits in one square frame. The dinosaur and the balloons
   are cut out characters, shown whole inside it; a tall cover crop once cut
   the dinosaur in half and its white frame vanished into the chosen row's
   white card, so the frame is the lighter cream with a hairline instead. A
   full scene, such as the storybook, fills the frame. */
.world-pick img {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  padding: 6px;
  border-radius: 14px;
  object-fit: contain;
  background: var(--bg);
  outline: 1px solid light-dark(oklch(0 0 0 / .1), oklch(1 0 0 / .1));
  outline-offset: -1px;
}
.world-pick img.world-pick-scene { padding: 0; object-fit: cover; }
.world-pick-text { display: flex; flex-direction: column; gap: 4px; }
.world-pick-name { font-family: var(--font-display); font-size: 22px; line-height: 1.15; }
.world-pick-line { font-size: 13px; color: var(--ink2); }
.home-kids-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.home-kids-more { font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
@media (hover: hover) and (pointer: fine) {
  .home-kids-more { transition: color var(--dur-hover) ease; }
  .home-kids-more:hover { color: var(--ink); }
}

.home-kids-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; }
/* The child's name, and the age the world counts to, typed in above the
   phone. The world greets whoever is named here. */
.kid-form {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  width: 340px;
  max-width: 100%;
}
.kid-field-name { grid-column: 1 / -1; }
.kid-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kid-field label { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.kid-field input {
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 20px;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow var(--dur-hover) ease;
}
.kid-field-age input { padding: 0 14px; text-align: center; }
.kid-field input::placeholder { color: var(--muted); font-family: var(--font-body); font-size: 14px; }
.kid-field input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.kid-field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.kid-show { min-height: 52px; }
.kid-field-age label { white-space: nowrap; }
.kid-message { grid-column: 1 / -1; font-size: 13px; color: var(--accent); }
.kid-message:empty { display: none; }
.kid-greeted { max-width: 340px; font-size: 15px; line-height: 1.6; color: var(--ink2); text-align: center; }
.kid-greeted:not([hidden]) { animation: rise 600ms var(--ease-out) both; }
.kid-kept { max-width: 340px; font-size: 12px; color: var(--muted); text-align: center; }
.home-kids-note { font-size: 13px; color: var(--muted); }
.home-kids-note:empty { display: none; }

.phone {
  width: 300px;
  max-width: 100%;
  padding: 10px;
  border-radius: 40px;
  background: var(--phone);
  box-shadow: 0 1px 2px rgb(0 0 0 / .2), 0 40px 80px -30px rgb(0 0 0 / .6);
}
.world-stack {
  position: relative;
  aspect-ratio: 1 / 2;
  overflow: hidden;
  border-radius: 30px;
  outline: 1px solid oklch(1 0 0 / .1);
  outline-offset: -1px;
  background: #1b1512;
  isolation: isolate;
}
.world-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
/* The world is laid out at a real phone's width and scaled into the frame,
   so it reads as it does on a guest's phone rather than squeezed. */
.world-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 390px;
  height: 780px;
  border: 0;
  transform-origin: 0 0;
  transform: scale(var(--phone-scale, .718));
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
  background: transparent;
}
.world-frame.is-shown { opacity: 1; z-index: 1; }
.world-frame.is-front { z-index: 2; }

/* ── The photos ────────────────────────────────────────────────────────── */

.home-photos-lead { aspect-ratio: 675 / 900; }
@media (min-width: 900px) {
  .home-photos-lead { grid-column: 1 / span 5; height: 100%; min-height: 640px; aspect-ratio: auto; }
  .home-photos-copy { grid-column: 6 / span 7; }
}
.home-photos .home-grid { align-items: start; }
.home-photos-copy { display: flex; flex-direction: column; gap: 26px; }
.home-photos-head { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 900px) { .home-photos-head { padding: 40px 0 20px; } }
.guest-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 18px); }
.guest-photo { position: relative; aspect-ratio: 1; }
.guest-photo .photo { position: absolute; inset: 0; }
/* The ring that finds the guest's face, placed at the face's measured
   centre as fractions of the square picture. */
.face-ring {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  box-shadow: 0 0 0 2px var(--on-photo), 0 0 0 4px var(--accent);
  pointer-events: none;
}
.face-ring span {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  translate: -50% 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-photo);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
:root[data-theme="dark"] .face-ring span { color: var(--night); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .face-ring span { color: var(--night); }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .face-ring { opacity: 0; scale: 1.6; }
  .home-photos.is-found .face-ring {
    opacity: 1;
    scale: 1;
    transition: opacity 500ms ease, scale 500ms cubic-bezier(.3, 1.5, .5, 1);
    transition-delay: calc(.35s + var(--k) * .22s);
  }
}
.guest-found { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-family: var(--font-display); font-size: 20px; line-height: 1.3; }
.guest-found-after { display: none; }
.home-photos.is-found .guest-found-before { display: none; }
.home-photos.is-found .guest-found-after { display: inline; animation: fade 500ms ease both; }
.guest-example { font-family: var(--font-body); font-size: 12px; color: var(--muted); }
.home-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .home-link { transition: text-decoration-color var(--dur-hover) ease; }
  .home-link:hover { text-decoration-color: currentColor; }
}
.faq-list .home-link { margin-top: 18px; }
.home-closing-note { font-size: 14px; color: var(--on-photo-soft); }
.promises { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
@media (min-width: 600px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.promises li { display: flex; gap: 14px; padding: 22px 22px 22px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.6; }
.promises .num { flex-shrink: 0; min-width: 1.4em; font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.2; color: var(--accent); }

/* ── Materials and the design wall ─────────────────────────────────────── */

.home-designs { display: flex; flex-direction: column; gap: 50px; overflow: hidden; background: var(--bg2); padding-block: clamp(80px, 8vw, 110px) clamp(80px, 8vw, 120px); }
.home-designs-head { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; }
.materials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; }
@media (min-width: 700px) { .materials { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.materials figure { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.materials figure:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 700px) { .materials figure:last-child:nth-child(odd) { grid-column: auto; } }
.material { position: relative; height: 200px; }
.materials figure:last-child:nth-child(odd) .material { height: 160px; }
@media (min-width: 700px) { .materials figure:last-child:nth-child(odd) .material { height: 200px; } }
/* A band of light crosses the paper under the pointer, the way a sheen
   crosses satin when it is tilted. */
.material::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgb(255 255 255 / 0) 35%, rgb(255 255 255 / .38) 50%, rgb(255 255 255 / 0) 65%);
  transform: translateX(-110%);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .material:hover::after { transform: translateX(110%); transition: transform 900ms var(--ease-in-out); }
}
.materials figcaption { font-size: 13px; letter-spacing: .08em; }

.wall { overflow: hidden; }
.wall-track { display: flex; gap: 26px; width: max-content; }
.wall-track img { height: clamp(220px, 21vw, 300px); width: auto; border-radius: 3px; box-shadow: 0 20px 40px -24px rgb(0 0 0 / .45); }
@media (prefers-reduced-motion: no-preference) {
  .wall-track { animation: drift 120s linear infinite; }
  .wall.is-paused .wall-track, .wall-track:hover { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .wall { overflow-x: auto; }
  .wall-track img[aria-hidden="true"] { display: none; }
}
@keyframes drift { to { transform: translateX(calc(-50% - 13px)); } }
.home-designs-caption { font-size: 13px; color: var(--muted); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.home-faq { padding-block: clamp(64px, 8vw, 120px) clamp(80px, 10vw, 140px); }
.home-faq h2 { font-size: clamp(36px, 3.9vw, 56px); line-height: 1.02; letter-spacing: -.02em; }
.home-faq .faq-list { border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .home-faq .home-grid { align-items: start; gap: 40px 26px; }
  .home-faq h2 { grid-column: 1 / span 4; }
  .home-faq .faq-list { grid-column: 6 / span 7; }
}

/* ── Proof ─────────────────────────────────────────────────────────────── */
/* Built by proof.js and present only once three approved testimonials exist. */

.home-proof { padding-block: clamp(64px, 8vw, 120px) 0; }
.home-proof-title { font-size: clamp(36px, 3.9vw, 56px); line-height: 1.02; letter-spacing: -.02em; }
.proof-list { display: grid; gap: 0; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.proof-card { display: flex; flex-direction: column; gap: 18px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.proof-stars { display: flex; gap: 3px; margin: 0; color: var(--accent); }
.proof-star { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.proof-star.is-filled { fill: currentColor; }
.proof-quote { margin: 0; }
.proof-words { margin: 0; max-width: 46ch; font-family: var(--font-display); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--ink); }
.proof-who { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.proof-names { font-size: 15px; font-weight: 600; color: var(--ink); }
.proof-line { font-size: 13px; color: var(--muted); }
.proof-example { margin-top: 6px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 900px) {
  .proof-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proof-card { padding: 32px 32px 32px 0; border-bottom: 0; }
  .proof-card + .proof-card { padding-left: 32px; border-left: 1px solid var(--line); }
}

/* ── Closing ───────────────────────────────────────────────────────────── */

.home-closing {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(520px, 50vw, 640px);
  overflow: hidden;
  color: var(--on-photo);
  text-align: center;
  background: var(--night);
}
.home-closing > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-closing-scrim { position: absolute; inset: 0; background: rgb(var(--scrim) / .52); }
.home-closing-body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 32px; max-width: 980px; }
.home-closing h2 { font-size: clamp(46px, 6.4vw, 92px); line-height: .98; letter-spacing: -.02em; }
.home-closing .btn { min-height: 60px; padding: 0 36px; }

/* The hero's own tabs and its replay chip are drawn smaller than their
   twins elsewhere (the film's family-tab, the chip's own 44 pixel floor)
   because they sit over the photograph rather than beside it. A phone set to
   show the desktop site is still read at arm's length and steered with a
   thumb at any width, so the 44 pixel floor follows the pointer here rather
   than the viewport alone; the narrower width below stays for every other
   phone-only adjustment. */
@media (max-width: 699px), (hover: none) and (pointer: coarse) {
  .home-tab { min-height: 44px; font-size: 14px; }
  .home-hero-replay { min-height: 44px; font-size: 14px; }
  .home-kids-more { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
}

/* ── On a phone ────────────────────────────────────────────────────────── */
/* The floor site.css sets for a phone, 14 pixel text and 44 pixel controls,
   applied to this page's own pieces. */
@media (max-width: 699px) {
  .world-pick-line { font-size: 14px; }
  /* At 14 pixels the age label is wider than the desktop form's fixed
     column, so the button keeps its own width and the label wraps. */
  .kid-form { grid-template-columns: minmax(0, 1fr) auto; }
  .kid-field-age label { white-space: normal; }
  /* The boxes and the whole phone fit on one screen under the header, so
     the world answering the name is seen while the name is still typed. */
  .home-kids .phone { width: min(300px, 100%, calc((100svh - var(--header-h) - 220px) / 2)); }
  .kid-field label { font-size: 14px; }
  .kid-message, .kid-kept, .home-kids-note, .guest-example, .home-designs-caption { font-size: 14px; }
  .materials figcaption { font-size: 14px; letter-spacing: .04em; }
  .promises li { font-size: 16px; }
  /* Three photos side by side are a thumbnail each at this width, too small
     to see a face in, so the first one runs the full width and the other
     two share the row under it. */
  .guest-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guest-photo:first-child { grid-column: 1 / -1; }
  /* The label starts at the ring's left edge rather than its centre, so a
     ring near a photo's left side never pushes its label off the screen. */
  .face-ring span { left: 0; translate: 0 0; font-size: 14px; padding: 2px 10px; }
}

/* Long sections below the fold skip rendering until they are near. */
.home-designs, .home-faq, .home-closing { content-visibility: auto; contain-intrinsic-size: auto 900px; }