/* Hodge waitlist — "The Kitchen Table" (see DESIGN.md, Web section).
   Sand surfaces, Stone for what you act on, ink for words.
   Report colours appear only inside the sample report. Light only, like the app. */

@font-face {
  font-family: "Lora";
  src: url("assets/fonts/Lora-VF-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("assets/fonts/Mulish-VF-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --sand: #F7F6EF;
  --sand-raised: #EFEDE3;
  --sand-line: #DEDBCE;
  --stone: #464E55;
  --crayon: #8EC3DB;   /* baby-blue wax, only for the hand-drawn underline after joining */
  --stone-pressed: #343B41;
  --stone-muted: #898E90;
  --ink: #2A2723;
  --ink-soft: #6B635A;
  --report-orange: #FAC4A6;
  --report-orange-tint: #F7ECE0;
  --report-yellow: #FCDF7B;
  --report-yellow-tint: #F8F2DC;
  --you: #AEDAE4;      /* breath-sky: "you" */
  --partner: #9CC1AD;  /* breath-forest: "partner", equal weight */

  --edge: 22px;
  --measure: 34rem;
  --wide: 60rem;
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* component display rules must never un-hide */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);   /* 17px reading size on web */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  caret-color: var(--stone);
}
::selection { background: var(--stone); color: var(--sand); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--stone); outline-offset: 3px; border-radius: 4px; }
p, li { text-wrap: pretty; }

.skip {
  position: absolute; left: var(--edge); top: -100px;
  background: var(--stone); color: var(--sand); padding: 10px 16px; border-radius: 999px;
  text-decoration: none; font-weight: 600; z-index: 40;
}
.skip:focus { top: 12px; }

.wrap { max-width: calc(var(--wide) + var(--edge) * 2); margin: 0 auto; padding-left: var(--edge); padding-right: var(--edge); }
.narrow { max-width: calc(var(--measure) + var(--edge) * 2); }

/* ---------- Type: Lora for titles, Mulish for everything read or pressed ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--ink); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.125rem, 1.4rem + 3.4vw, 3.25rem); line-height: 1.12; letter-spacing: -0.01em; }   /* web display */
h2 { font-size: 1.75rem; line-height: 1.25; }                 /* page title, 28 */
h3 { font-size: 1.3125rem; line-height: 1.3; }                /* section title, 21 */
p { margin: 0; }
.lede { font-size: 1.0625rem; line-height: 1.55; max-width: 34rem; }   /* 17 on phones */
@media (min-width: 880px) { .lede { font-size: 1.1875rem; } }         /* web lede, 19 */
.caption { font-size: 0.875rem; color: var(--ink-soft); }
.quote { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.5; }
.display { font-size: clamp(2.25rem, 1.1rem + 4.4vw, 4rem); line-height: 1.08; letter-spacing: -0.015em; max-width: 14ch; }

/* ---------- Floating top bar ----------
   A full-width pill that floats 8px below the top of the window. At the top of the page it's
   invisible; once you scroll it becomes a Sand pill with a hairline and a soft shadow, the one
   other place a shadow is allowed, because like the timeout bar it floats above the page. */
.topbar { position: sticky; top: 0; z-index: 30; padding: 8px 12px 0; pointer-events: none; }
.topbar-inner.wrap {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; max-width: var(--wide); padding: 6px 6px 6px 20px;
  border-radius: 999px; border: 1px solid transparent; background: transparent;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.topbar.scrolled .topbar-inner {
  background: var(--sand); border-color: var(--sand-line);
  box-shadow: 0 1px 2px rgba(42, 39, 35, 0.04), 0 6px 20px rgba(42, 39, 35, 0.07);
}
.topbar .wordmark { padding: 6px 0; }
.btn.btn-sm { min-height: 44px; padding: 0 18px; font-size: 0.875rem; }
@media (min-width: 880px) { .topbar { padding: 8px var(--edge) 0; } }
.btn[hidden] { display: none; }
/* Jump links land below the bar, not under it. */
[id] { scroll-margin-top: 84px; }

/* The logo: lowercase "hodge" in Young Serif, a 1.6KB subset with only the letters it needs. */
@font-face {
  font-family: "Young Serif Wordmark";
  src: url("assets/fonts/YoungSerif-wordmark.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}
.wordmark {
  font-family: "Young Serif Wordmark", var(--serif); font-weight: 400; font-size: 1.375rem; line-height: 1;
  letter-spacing: -0.005em; text-decoration: none; display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 0;
}
/* The hedgehog mark, from assets/branding (cropped and sized down to 4.7KB for 3x screens).
   Sits on the word's baseline, then a touch lower, so its feet land just below the letters. */
.wordmark .mark { height: 1.25em; width: auto; flex: none; position: relative; top: 0.14em; }

/* ---------- Hero: one scene ---------- */
.hero { display: flex; flex-direction: column; }
.hero-copy { padding-top: 20px; position: relative; z-index: 1; width: 100%; }
.hero h1 { margin-bottom: 18px; max-width: none; }   /* line breaks are set in the copy */
.hero .lede { margin-bottom: 28px; }

.land { position: relative; height: 236px; margin-top: 12px; pointer-events: none; }
.land .hills {
  position: absolute; left: 0; bottom: 0; width: 100%; max-width: none;
  height: clamp(72px, 20vw, 300px); object-fit: cover; object-position: center top;
}
.land-wrap { position: relative; height: 100%; max-width: calc(var(--wide) + var(--edge) * 2); margin: 0 auto; }
.land .hodge {
  position: absolute; left: 50%; bottom: 14px; width: 152px;
  transform: translateX(-50%) scaleX(-1);   /* mirrored so Hodge faces the words (owner's call) */
}

/* A conversation's waveform floating above Hodge, who's listening. Same capsules as the app's
   live waveform: Stone, 4px wide, 3px apart. 32 bars = 221px wide. Drawn by wave.js. */
.wave {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + 152px * 0.875 + 16px);
  display: flex; align-items: center; gap: 3px; height: 44px;
}
.wave span {
  flex: none; width: 4px; height: 100%; border-radius: 2px; background: var(--stone);
  transform: scaleY(0.1); transition: transform 0.11s linear;
}

@media (min-width: 880px) {
  .hero { min-height: min(calc(100svh - 64px), 1000px); }
  .hero-copy { flex: 1; padding-top: clamp(32px, 7vh, 80px); }
  .land { height: clamp(300px, 30vw, 420px); margin-top: -210px; }
  .land .hodge {
    left: auto; right: calc(var(--edge) + 2%); transform: scaleX(-1);
    width: clamp(240px, 26vw, 360px); bottom: clamp(36px, 4.5vw, 72px);
  }
  /* Centred over Hodge, a little above his head. */
  .wave {
    left: auto; transform: none; height: 56px;
    right: calc(var(--edge) + 2% + (clamp(240px, 26vw, 360px) - 221px) / 2);
    bottom: calc(clamp(36px, 4.5vw, 72px) + clamp(240px, 26vw, 360px) * 0.875 + 22px);
  }
}

/* After joining, the section they joined in does one job: the art, the waveform and the pitch
   step aside, and the next step sits centred on its own. The hills stay as the ground. */
.hero.is-joined { min-height: min(calc(100svh - 16px), 1000px); }
.hero.is-joined .hero-copy { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 96px; padding-bottom: 24px; }
.hero.is-joined .hero-copy > h1, .hero.is-joined .hero-copy > .lede, .hero.is-joined .hero-sample, .hero.is-joined .land-wrap { display: none; }
.hero.is-joined .land { height: clamp(120px, 22vw, 300px); margin-top: 0; }
.closing.is-joined figure, .closing.is-joined .closing-grid > div > .lede { display: none; }
.closing.is-joined .closing-grid { grid-template-columns: 1fr; justify-items: center; }
.is-joined .done { margin-inline: auto; text-align: center; }
.is-joined .on-list { justify-content: center; }
.is-joined .first-q:has([data-survey-start]) { justify-content: center; }

/* ---------- Form ---------- */
.signup { max-width: 30rem; }
.signup label { display: block; font-weight: 600; font-size: 0.9375rem; margin-bottom: 8px; }
.field-row { display: flex; flex-direction: column; gap: 12px; }
.signup input[type="email"] {
  width: 100%; min-height: 54px; padding: 14px 20px;
  font: 400 1.0625rem/1.2 var(--sans); color: var(--ink);
  background: var(--sand-raised); border: 1.5px solid var(--stone-muted); border-radius: 999px;
  -webkit-appearance: none; appearance: none;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.signup input[type="email"]::placeholder { color: var(--ink-soft); opacity: 1; }
.signup input[type="email"]:focus-visible { outline: none; border-color: var(--stone); box-shadow: 0 0 0 4px rgba(70, 78, 85, 0.16); }
/* Invalid reads differently from focus: heavier ink line on plain Sand, no halo. */
.signup input[aria-invalid="true"],
.signup input[aria-invalid="true"]:focus-visible { border: 2.5px solid var(--ink); background: var(--sand); box-shadow: none; padding: 13px 19px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 16px 28px; border: 0; border-radius: 999px;
  background: var(--stone); color: var(--sand); text-decoration: none;
  font: 600 1.0625rem/1 var(--sans); cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--stone-pressed); }
.btn:active { background: var(--stone-pressed); transform: scale(0.99); }
.btn[disabled] { cursor: progress; }
.btn .spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(247, 246, 239, 0.35); border-top-color: var(--sand);
  animation: spin 0.8s linear infinite; display: none;
}
.btn[aria-busy="true"] .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.text-btn {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 600;
  /* also used on <button>, so reset the browser's own button look */
  background: none; border: 0; padding: 0; font-family: inherit; font-size: inherit; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-note { margin-top: 14px; }
.form-msg { margin-top: 12px; font-size: 0.9375rem; color: var(--ink); }
.form-msg:empty { display: none; }
.form-msg::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--ink); vertical-align: middle; }
.form-msg button {
  font: inherit; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px;
}

@media (min-width: 560px) {
  .field-row { flex-direction: row; }
  .field-row input[type="email"] { flex: 1; }
}

/* Success replaces the form in place: the one authored moment on the page */
.done { max-width: 32rem; }
.done:focus, .done-title:focus { outline: none; }
.done-title { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.5rem); line-height: 1.15; margin-bottom: 14px; }
/* A hand-drawn Stone stroke under "One more click", drawn in once */
.scribble { position: relative; display: inline-block; white-space: nowrap; }
.scribble svg { position: absolute; left: -2%; bottom: -0.16em; width: 104%; height: 0.34em; overflow: visible; }
.scribble path { fill: none; stroke: var(--crayon); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 320; stroke-dashoffset: 0; }
.scribble path.pass { stroke-width: 2.6; opacity: 0.8; }   /* a second, lighter pass, as a crayon leaves */
.done-lede { font-size: 1.1875rem; line-height: 1.5; }
.done-lede strong { font-weight: 700; overflow-wrap: anywhere; }
.done-inbox { margin-top: 22px; }
.done-hint { margin-top: 16px; }
/* Once they've confirmed: a small done step, then the next one leads */
.on-list { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.0625rem; margin-bottom: 14px; }
.mini-tick { flex: none; width: 24px; height: 24px; }
.mini-tick circle { fill: var(--stone); }
.mini-tick path { fill: none; stroke: var(--sand); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 18; stroke-dashoffset: 0; }
/* Early access and the survey, under "You're on the list" */
.early { margin: 0; }
.early:focus { outline: none; }
.first-q { margin-top: 26px; }
.first-q-text { font-family: var(--serif); font-size: 1.3125rem; line-height: 1.3; margin-bottom: 14px; }
.first-q-n { display: block; font-family: var(--sans); font-size: 0.875rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.first-q .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.first-q .tile { min-height: 56px; padding: 12px 12px 12px 16px; font: inherit; color: inherit; text-align: left; width: 100%; }
.first-q:has([data-survey-start]) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.first-q:has([data-survey-start]) .first-q-n { margin: 0; }
.early-foot { margin-top: 16px; }
.early-foot .text-btn { margin-left: 6px; font-size: inherit; }
.early-title { font-family: var(--serif); font-size: 1.3125rem; line-height: 1.3; margin-bottom: 6px; }
.early-actions, .survey-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 14px; }
.survey { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--sand-line); }
.survey-count { font-size: 0.875rem; color: var(--ink-soft); margin-bottom: 6px; }
.survey-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.survey-q legend { font-family: var(--serif); font-size: 1.3125rem; line-height: 1.3; padding: 0; margin-bottom: 6px; outline: none; }
.survey-q .caption { margin-bottom: 6px; }
.survey-options { display: grid; gap: 2px; margin-top: 6px; }
.survey-options .check { align-items: center; }
.survey-options .check input { margin: 0; }
.survey-msg:not(:empty) { margin-top: 14px; font-size: 0.9375rem; }
.survey-msg.done-note { font-family: var(--serif); font-size: 1.0625rem; }
.check input[type="radio"] { border-radius: 50%; }
.check.resting { opacity: 0.5; cursor: default; }
.survey-close .early-title { margin-bottom: 6px; }
.survey-close:focus { outline: none; }
.optin { margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: var(--sand-raised); }
.optin-q { font-weight: 600; margin-bottom: 6px; }
/* Ages: one row of joined segments per person, like a segmented control */
.age { border: 0; margin: 18px 0 0; padding: 0; min-width: 0; }
.age-label { font-weight: 600; font-size: 0.9375rem; padding: 0; margin-bottom: 8px; }
.ageband {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1.5px solid var(--sand-line); border-radius: 14px; overflow: hidden; background: var(--sand);
}
.ageband-cell { position: relative; display: flex; }
.ageband-cell + .ageband-cell { border-left: 1px solid var(--sand-line); }
.ageband-cell input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ageband-cell span {
  flex: 1; display: grid; place-items: center; min-height: 52px; padding: 4px 2px; text-align: center;
  font-size: 0.9375rem; line-height: 1.15; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.ageband-cell:hover span { background: var(--sand-raised); }
.ageband-cell input:checked + span { background: var(--stone); color: var(--sand); font-weight: 600; }
.ageband-cell input:focus-visible + span { outline: 3px solid var(--stone); outline-offset: -5px; border-radius: 10px; }
.ageband-cell input:checked:focus-visible + span { outline-color: var(--sand); }
@media (max-width: 380px) { .ageband-cell span { font-size: 0.8125rem; } }
/* Searchable lists (country, more languages) */
.combo { position: relative; margin-top: 8px; }
.combo-input {
  width: 100%; min-height: 50px; padding: 12px 18px; border-radius: 999px;
  border: 1.5px solid var(--stone-muted); background: var(--sand-raised); font: 400 1rem/1.2 var(--sans); color: var(--ink);
}
.combo-input:focus-visible { outline: none; border-color: var(--stone); box-shadow: 0 0 0 4px rgba(70, 78, 85, 0.16); }
.combo-list {
  list-style: none; margin: 6px 0 0; padding: 6px; border-radius: 16px; border: 1px solid var(--sand-line);
  background: var(--sand); max-height: 264px; overflow-y: auto; position: relative; z-index: 2;
}
.combo-list li { padding: 11px 12px; border-radius: 10px; cursor: pointer; }
.combo-list li[aria-selected="true"], .combo-list li:hover { background: var(--sand-raised); }
.combo-none { color: var(--ink-soft); cursor: default; }
.lang-picked { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lang-picked:empty { display: none; }
.picked {
  display: inline-flex; align-items: center; gap: 2px; padding: 0 4px 0 14px; min-height: 40px;
  border-radius: 999px; background: var(--stone); color: var(--sand); font-weight: 600; font-size: 0.9375rem;
}
.picked-x { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--sand); cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  .done { animation: arrive 0.6s var(--ease-out) both; }
  .done .scribble path { stroke-dashoffset: 320; animation: draw 0.7s 0.35s var(--ease-out) forwards; }
  .done .scribble path.pass { animation-delay: 0.75s; animation-duration: 0.5s; }
  .is-confirmed [data-confirmed] { animation: arrive 0.5s var(--ease-out) both; }
  .is-confirmed .mini-tick circle { transform-origin: center; transform-box: fill-box; animation: pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .is-confirmed .mini-tick path { stroke-dashoffset: 18; animation: draw 0.35s 0.3s var(--ease-out) forwards; }
}
@keyframes arrive { from { opacity: 0.001; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }

.check { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; min-height: 44px; padding: 4px 0; }
.check input {
  -webkit-appearance: none; appearance: none; flex: none; margin: 2px 0 0;
  width: 24px; height: 24px; border: 1.5px solid var(--stone-muted); border-radius: 6px; background: var(--sand);
  display: grid; place-content: center; cursor: pointer;
}
.check input::after {
  content: ""; width: 12px; height: 7px; border: solid var(--sand); border-width: 0 0 2.5px 2.5px;
  transform: rotate(-45deg) translate(1px, -1px); opacity: 0;
}
.check input:checked { background: var(--stone); border-color: var(--stone); }
.check input:checked::after { opacity: 1; }
.check input:disabled { cursor: progress; opacity: 0.7; }
.check strong { font-weight: 600; display: block; }
.check .caption { display: block; line-height: 1.45; margin-top: 2px; }

/* ---------- Sections ---------- */
section { padding: 72px 0 0; }
section.hero { padding: 0; }
.section-head { margin-bottom: 28px; max-width: var(--measure); }
.section-head p { margin-top: 10px; color: var(--ink-soft); }
@media (min-width: 880px) {
  section { padding-top: 112px; }
  section.tight { padding-top: 88px; }
}

/* How it works: a real sequence, so plain ink numbers */
.how { display: grid; gap: 32px; align-items: center; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step; display: grid; grid-template-columns: 2rem 1fr; gap: 0 12px;
  padding: 20px 0; border-top: 1px solid var(--sand-line);
}
.steps li:last-child { border-bottom: 1px solid var(--sand-line); }
.steps li::before {
  content: counter(step); font-family: var(--serif); font-size: 1.3125rem; line-height: 1.3; color: var(--ink);
  grid-row: span 2;
}
.steps h3 { margin-bottom: 4px; }
.steps p { color: var(--ink-soft); }
.how figure { margin: 0; max-width: 420px; justify-self: center; }
@media (min-width: 880px) { .how { grid-template-columns: 1.1fr 0.9fr; gap: 56px; } }

/* Proof: the shared page and a slice of one personal page. Report colours live only here. */
.proof { display: grid; gap: 48px; }
.sample-label { margin-bottom: 8px; }
.finding { margin-bottom: 20px; }
.block-title { font-weight: 700; font-size: 0.9375rem; margin-bottom: 8px; }
.said { list-style: none; margin: 0 0 20px; padding: 0; }
.said li { padding: 12px 0; border-top: 1px solid var(--sand-line); }
.said li:last-child { border-bottom: 1px solid var(--sand-line); }
.who { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--ink-soft); margin-bottom: 2px; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot.you { background: var(--you); }
.dot.partner { background: var(--partner); }
.tint { border-radius: 16px; padding: 18px; }
.tint + .tint { margin-top: 12px; }
.tint.orange { background: var(--report-orange-tint); }
.tint.yellow { background: var(--report-yellow-tint); }
.hl {
  padding: 1px 8px; border-radius: 999px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hl.orange { background: var(--report-orange); }
.hl.yellow { background: var(--report-yellow); }
.tint h4 { font: 700 0.9375rem/1.4 var(--sans); margin: 0 0 8px; }
.tint .quote { margin-top: 10px; }
.sample-you { padding-top: 28px; border-top: 1px solid var(--sand-line); }
.sample-you .quote { margin-bottom: 10px; }
.sample-you .caption { margin-top: 14px; }
@media (min-width: 880px) {
  .proof { grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; }
  .sample-you { padding-top: 0; border-top: 0; padding-left: 40px; border-left: 1px solid var(--sand-line); margin-top: 4px; }
}

/* Statement: the one line the product rests on, at display scale */
.statement .display { max-width: 24ch; }
.statement .lede { max-width: none; margin-top: 18px; color: var(--ink-soft); }

/* Rows: title + detail, separated by a line, never boxed */
.rows { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.rows li { padding: 18px 0; border-top: 1px solid var(--sand-line); }
.rows li:last-child { border-bottom: 1px solid var(--sand-line); }
.rows strong { display: block; font-weight: 600; margin-bottom: 2px; }
.rows span { color: var(--ink-soft); }
.method { margin-top: 20px; max-width: var(--measure); }

.two-col { display: grid; gap: 64px; }
@media (min-width: 880px) { .two-col { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* FAQ: native disclosure */
.faq { max-width: var(--measure); }
.faq details { border-top: 1px solid var(--sand-line); }
.faq details:last-of-type { border-bottom: 1px solid var(--sand-line); }
.faq summary {
  list-style: none; cursor: pointer; min-height: 56px; padding: 16px 36px 16px 0; position: relative;
  font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
  border: solid var(--stone); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 0 18px; color: var(--ink-soft); }

/* Closing */
.closing-grid { display: grid; gap: 24px; align-items: center; }
.closing figure { margin: 0; max-width: 260px; }
/* Armchair Hodge, mirrored to face right (owner's call). `scale` leaves `transform` free for animations. */
.closing figure img { scale: -1 1; }
.closing .tagline { font-family: var(--serif); font-size: 1.0625rem; color: var(--ink-soft); margin-bottom: 8px; }
.closing h2 { margin-bottom: 22px; }
@media (min-width: 880px) { .closing-grid { grid-template-columns: 0.7fr 1.3fr; gap: 56px; } .closing figure { max-width: 340px; } }

/* Footer */
footer { margin-top: 96px; padding: 28px 0 40px; border-top: 1px solid var(--sand-line); }
.foot { display: grid; gap: 12px; }
.wordmark-foot { font-family: "Young Serif Wordmark", var(--serif); font-weight: 400; font-size: 1.375rem; }
.foot nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 20px; }
.foot nav a { display: inline-block; padding: 10px 0; font-size: 0.9375rem; }


/* Plain document pages (privacy, support) */
.doc { padding-top: 32px; padding-bottom: 0; }
.doc h1 { font-size: clamp(2rem, 1.6rem + 2vw, 2.5rem); margin: 16px 0 16px; }
.doc h2 { font-size: 1.3125rem; margin: 36px 0 10px; }
.doc p, .doc ul { margin: 0 0 14px; }
.doc ul { padding-left: 1.2rem; }
.doc li { margin-bottom: 8px; }
.doc .callout { background: var(--sand-raised); border-radius: 16px; padding: 18px 20px; margin: 20px 0; }
.back { display: inline-flex; align-items: center; min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .wave span { transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- The survey layer ----------
   A pop-up on desktop, full screen on phones. Big tiles, a progress bar, a tick that draws itself
   when an answer is chosen, and a little encouragement on the way. All motion stops for people
   who ask for reduced motion. */
html.sv-lock, html.sv-lock body { overflow: hidden; }
.sv-scrim {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px;
  background: rgba(42, 39, 35, 0.42); opacity: 0; transition: opacity 0.25s var(--ease-out);
}
.sv-scrim.in { opacity: 1; }
.sv {
  width: min(560px, 100%); max-height: min(780px, calc(100svh - 48px)); display: flex; flex-direction: column;
  position: relative; background: var(--sand); border-radius: 24px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(42, 39, 35, 0.08), 0 24px 60px rgba(42, 39, 35, 0.22);
  transform: translateY(14px) scale(0.98); transition: transform 0.35s var(--ease-out);
}
.sv-scrim.in .sv { transform: none; }
@media (max-width: 640px) {
  .sv-scrim { padding: 0; place-items: stretch; }
  .sv { width: 100%; max-height: none; height: 100%; border-radius: 0; box-shadow: none;
        padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); transform: translateY(24px); }
}

.sv-top { padding: 18px 20px 6px; }
.sv-progress { height: 6px; border-radius: 3px; background: var(--sand-line); overflow: hidden; }
.sv-progress span { display: block; height: 100%; background: var(--stone); transform-origin: left; transform: scaleX(0); transition: transform 0.45s var(--ease-out); }
.sv-meta { display: flex; align-items: center; gap: 12px; margin-top: 10px; min-height: 44px; }
.sv-count { font-size: 0.875rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sv-cheer { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.sv-cheer:not(:empty) { animation: cheer 0.5s var(--ease-out) both; }
@keyframes cheer { from { opacity: 0; transform: translateY(6px) scale(0.9); } to { opacity: 1; transform: none; } }
.sv-close {
  margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--sand-raised);
  color: var(--ink); display: grid; place-items: center; cursor: pointer;
}

.sv-body { flex: 1; overflow-y: auto; padding: 8px 20px 20px; overscroll-behavior: contain; }
.sv-q { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; line-height: 1.25; margin: 6px 0 6px; outline: none; }
.sv-hint { color: var(--ink-soft); font-size: 0.9375rem; margin-bottom: 14px; }
.sv-body .tiles { margin-top: 14px; }
.sv-body .age-label { font-size: 1rem; }
.sv-body .combo-input { min-height: 56px; font-size: 1.0625rem; }

/* Answer tiles */
.tiles { display: grid; gap: 10px; }
.tile {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 14px 16px 14px 18px;
  border: 1.5px solid var(--sand-line); border-radius: 16px; background: var(--sand); cursor: pointer;
  transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.tile:hover { border-color: var(--stone-muted); }
button.tile:focus-visible { outline: 3px solid var(--stone); outline-offset: 2px; }
.tile input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tile-text { flex: 1; font-size: 1.0625rem; line-height: 1.35; }
.tile.chosen, .tile:has(input:checked) { border-color: var(--stone); background: var(--sand-raised); animation: pop 0.28s var(--ease-out); }
.tile:has(input:focus-visible) { outline: 3px solid var(--stone); outline-offset: 2px; }
.tile.resting { opacity: 0.45; cursor: default; }
.tile.resting input { cursor: default; }
@keyframes pop { 40% { transform: scale(0.985); } 100% { transform: none; } }

.tick { flex: none; width: 28px; height: 28px; overflow: visible; }
.tick circle { fill: none; stroke: var(--stone-muted); stroke-width: 1.5; transition: fill 0.2s var(--ease-out), stroke 0.2s var(--ease-out); }
.tick path { fill: none; stroke: var(--sand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; }
.tile.chosen .tick circle, .tile:has(input:checked) .tick circle { fill: var(--stone); stroke: var(--stone); }
.tile.chosen .tick path, .tile:has(input:checked) .tick path { animation: draw 0.32s 0.08s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Footer: back, skip, next */
.sv-foot {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 12px 20px 18px; border-top: 1px solid var(--sand-line);
}
.sv-foot:empty { display: none; }
.sv-back, .sv-back-space { width: 54px; height: 54px; }
.sv-back { border-radius: 50%; border: 0; background: var(--sand-raised); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.sv-skip { justify-self: start; }
.sv-next { min-width: 140px; }

/* The end: a filled tick pops in, confetti bursts from behind it (see confetti() in signup.js) */
.sv-closing { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 8px 8px; }
.sv-closing .sv-q { font-size: clamp(1.75rem, 1.5rem + 1vw, 2rem); margin-top: 18px; }
.sv-closing p { margin-top: 6px; max-width: 26rem; font-size: 1.0625rem; color: var(--ink-soft); }
.sv-got-it { margin-top: 26px; min-width: 200px; }
.burst { position: relative; display: grid; place-items: center; }
.burst::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid var(--stone); opacity: 0; }
.big-tick { position: relative; width: 88px; height: 88px; }
.big-tick circle { fill: var(--stone); }
.big-tick path { fill: none; stroke: var(--sand); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .big-tick { animation: pop-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .big-tick path { stroke-dashoffset: 44; animation: draw 0.4s 0.3s var(--ease-out) forwards; }
  .burst::before { animation: ring 0.9s 0.15s var(--ease-out) both; }
  .sv-closing .sv-q, .sv-closing p, .sv-got-it { animation: arrive 0.5s var(--ease-out) both; }
  .sv-closing .sv-q { animation-delay: 0.25s; }
  .sv-closing p { animation-delay: 0.35s; }
  .sv-got-it { animation-delay: 0.45s; }
}
/* Full screen on phones: sit the ending in the middle instead of under the top bar */
@media (max-width: 640px) {
  .is-closing .sv-body { display: flex; flex-direction: column; }
  .is-closing .sv-body > :first-child { margin-top: auto; }
  .is-closing .sv-body > :last-child { margin-bottom: auto; padding-bottom: 48px; }
}
@keyframes ring { from { transform: scale(0.7); opacity: 0.5; } to { transform: scale(1.5); opacity: 0; } }
/* Behind the words and the button, so a piece never covers what they're reading */
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.sv-top, .sv-body, .sv-foot { position: relative; z-index: 1; }
.sv .optin { margin-top: 22px; }
.optin-saved { display: flex; align-items: center; gap: 12px; }
.optin-saved .tick circle { fill: var(--stone); stroke: var(--stone); }
.optin-saved .tick path { animation: draw 0.32s var(--ease-out) forwards; }

@media (prefers-reduced-motion: reduce) {
  .sv, .sv-scrim, .sv-progress span { transition: none; }
  .tick path, .optin-saved .tick path { animation: none; stroke-dashoffset: 0; }
  .tile:has(input:checked), .sv-cheer:not(:empty) { animation: none; }
}