/* ==========================================================================
   Teleport for Families — splash page styles.

   Deliberately standalone: this page is a demand experiment aimed at parents,
   and it needs to be free to look and feel different from teleportme.co
   without dragging the main marketing site around with it. It shares the
   brand's two typefaces and its ink color, and nothing else.

   The palette is warmer and lighter than the main site's sunset gradients —
   cream paper, coral for anything that asks for a decision, mint for anything
   that makes a promise.
   ========================================================================== */

/* Brand faces, self-hosted. Same subset files the main splash ships (see
   web/tools/README.md); the unicode-range is copied verbatim so a character
   outside the subset falls back to a system font instead of rendering tofu. */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/baloo2-400.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A3, U+00A9, U+00AE, U+00B0, U+00B7, U+00D7, U+00E0, U+00E4, U+00E7-00EA, U+00F1, U+00F6, U+00FC, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+20AC, U+2122, U+2191, U+2193;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/baloo2-700.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A3, U+00A9, U+00AE, U+00B0, U+00B7, U+00D7, U+00E0, U+00E4, U+00E7-00EA, U+00F1, U+00F6, U+00FC, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+20AC, U+2122, U+2191, U+2193;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/lato-400.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A3, U+00A9, U+00AE, U+00B0, U+00B7, U+00D7, U+00E0, U+00E4, U+00E7-00EA, U+00F1, U+00F6, U+00FC, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+20AC, U+2122;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/lato-700.woff2) format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A3, U+00A9, U+00AE, U+00B0, U+00B7, U+00D7, U+00E0, U+00E4, U+00E7-00EA, U+00F1, U+00F6, U+00FC, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+20AC, U+2122;
}

:root {
  /* Ink */
  --ink: #2C2C54;
  --ink-soft: #5F5F80;
  --ink-faint: #8B8BA6;

  /* Paper */
  --cream: #FFF8F1;
  --cream-deep: #FDEFE2;
  --paper: #FFFFFF;

  /* Accents */
  --coral: #FF6B45;
  --coral-deep: #E24E2B;
  --coral-wash: #FFEDE7;
  --mint: #17A67F;
  --mint-wash: #E4F6F0;
  --sky: #4B8DF8;
  --sky-wash: #E8F0FE;
  --sun: #FFC24B;
  --sun-wash: #FFF4DE;
  --lilac: #8E7DFF;
  --lilac-wash: #EFECFF;

  --line: rgba(44, 44, 84, 0.10);
  --line-strong: rgba(44, 44, 84, 0.18);

  --font-heading: 'Baloo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(44, 44, 84, 0.06);
  --shadow: 0 10px 30px rgba(44, 44, 84, 0.08), 0 2px 8px rgba(44, 44, 84, 0.04);
  --shadow-lg: 0 24px 60px rgba(44, 44, 84, 0.12), 0 4px 12px rgba(44, 44, 84, 0.06);

  --wrap: 1080px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display { font-family: var(--font-heading); line-height: 1.15; letter-spacing: -0.01em; }

a { color: var(--coral-deep); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; margin-inline: auto; }

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 248, 241, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.85rem;
}
.brand { display: flex; align-items: baseline; gap: 0.5rem; text-decoration: none; color: var(--ink); }
.brand-mark { font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; }
.brand-sub {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--coral-deep); background: var(--coral-wash);
  padding: 0.15rem 0.55rem; border-radius: var(--r-pill);
  white-space: nowrap;
}
.header-nav { display: flex; align-items: center; gap: 1.5rem; }
.header-nav a { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; font-weight: 700; }
.header-nav a:hover { color: var(--coral-deep); }
@media (max-width: 720px) { .header-nav .nav-hide-sm { display: none; } }

/* Below ~520px the wordmark, the badge and the one remaining nav link stop
   fitting on a line together, so the badge shrinks and the nav link swaps to
   its short label (see .label-long / .label-short in the markup). */
.label-short { display: none; }
@media (max-width: 520px) {
  .brand-mark { font-size: 1.2rem; }
  .brand-sub { font-size: 0.62rem; padding: 0.12rem 0.45rem; }
  .header-nav a { font-size: 0.88rem; white-space: nowrap; }
  .label-long { display: none; }
  .label-short { display: inline; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  padding: 0.85rem 1.6rem; border-radius: var(--r-pill);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primary { background: var(--coral); color: #fff; box-shadow: 0 8px 20px rgba(255, 107, 69, 0.28); }
.btn-primary:hover { background: var(--coral-deep); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(255,255,255,0.6); }
.btn-sm { font-size: 0.9rem; padding: 0.5rem 1rem; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Sections ---------- */
section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section-eyebrow {
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--coral-deep); margin-bottom: 0.6rem;
}
.section-title { font-size: clamp(1.85rem, 4.2vw, 2.6rem); font-weight: 700; }
.section-lede { font-size: clamp(1.02rem, 2vw, 1.15rem); color: var(--ink-soft); margin-top: 0.9rem; }
.section-head { margin-bottom: clamp(2rem, 5vw, 3rem); }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1100px 520px at 78% -8%, var(--sun-wash) 0%, transparent 62%),
    radial-gradient(900px 460px at 6% 8%, var(--coral-wash) 0%, transparent 58%),
    var(--cream);
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem);
}
.hero .wrap { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }

/* Phones: the illustration moves up between the subhead and the CTAs.
   It was rendering last — below three stacked buttons and the checked list —
   which on a 360x740 screen left it sitting off the bottom edge.

   The copy wrapper becomes display:contents so its children join the hero
   grid directly and can be ordered against .hero-art. No duplicated SVG, no
   DOM change, and the two-column desktop layout above 767px is untouched.

   Row gap goes to zero here because the elements already carry their own
   margins, and five grid items at the inherited 2rem gap would push the
   first CTA off screen on its own. */
@media (max-width: 767px) {
  .hero .wrap { gap: 0; }
  .hero .wrap > div:first-child { display: contents; }

  .hero h1 { order: 1; }
  .hero-lede { order: 2; }
  .hero-art { order: 3; }
  .hero-actions { order: 4; }
  .hero-badges { order: 5; }

  /* Capped by width so the height follows the viewBox ratio predictably. */
  .hero-art { max-width: min(320px, 76vw); margin: 1.5rem auto 0; }
}

.hero h1 { font-size: clamp(1.8rem, 5.2vw, 3.4rem); font-weight: 700; }
.nowrap { white-space: nowrap; }
.hero h1 .accent { color: var(--coral-deep); }
.hero-lede { font-size: clamp(1.05rem, 2.2vw, 1.28rem); color: var(--ink-soft); margin-top: 1.25rem; max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

/* The "suitcase" illustration is pure CSS/SVG — no image assets to build. */
.hero-art { position: relative; }
.hero-art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 40px rgba(44,44,84,0.12)); }

/* Ticked reassurances, not controls. These were pills — rounded, bordered,
   with a shadow — which read as tappable chips next to the two real buttons
   directly above them. A plain checked list cannot be mistaken for one. */
.hero-badges { list-style: none; display: grid; gap: 0.5rem; margin-top: 1.75rem; }
.badge {
  display: flex; align-items: flex-start; gap: 0.55rem;
  font-size: 0.95rem; color: var(--ink-soft);
}
.badge .icon { flex: 0 0 auto; font-size: 1.15rem; color: var(--mint); margin-top: 0.12em; }

/* ---------- Reality check (the interactive estimator) ---------- */
.reality { background: var(--paper); border-block: 1px solid var(--line); }
.calc {
  display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

.calc-panel {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.25rem, 3vw, 2rem);
}
.calc-step + .calc-step { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px dashed var(--line-strong); }
.calc-label { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; display: block; margin-bottom: 0.15rem; }
.calc-hint { font-size: 0.88rem; color: var(--ink-faint); margin-bottom: 0.9rem; }

.kid-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.kid-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--paper); border: 2px solid var(--line-strong);
  border-radius: var(--r-pill); padding: 0.35rem 0.4rem 0.35rem 0.9rem; font-weight: 700; font-size: 0.95rem;
}
.kid-chip select {
  font: inherit; font-size: 0.9rem; border: 0; background: transparent; color: var(--ink);
  padding: 0.1rem 0.2rem; cursor: pointer;
}
.kid-chip .kid-remove {
  border: 0; background: var(--coral-wash); color: var(--coral-deep);
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  font-size: 1rem; line-height: 1; display: grid; place-items: center;
}
.kid-chip .kid-remove:hover { background: var(--coral); color: #fff; }
.kid-add {
  border: 2px dashed var(--line-strong); background: transparent; color: var(--ink-soft);
  border-radius: var(--r-pill); padding: 0.45rem 1.1rem; font: inherit; font-weight: 700; cursor: pointer;
}
.kid-add:hover { border-color: var(--coral); color: var(--coral-deep); }

.slider-row { display: flex; align-items: center; gap: 1rem; }
.slider-row input[type=range] { flex: 1; accent-color: var(--coral); height: 28px; }
.slider-value {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem;
  min-width: 5.5ch; text-align: right; color: var(--coral-deep);
}

.option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 0.6rem; }
/* A 2-up grid for the four trip types (auto-fit left them 3 + an orphan in the
   panel's ~400px of inner width) and 3-up for the three laundry answers.
   `display: grid` on the label, not `block`, so the card inside stretches to
   the row height and a two-line answer doesn't sit taller than its neighbours. */
.option-grid--2 { grid-template-columns: repeat(2, 1fr); }
.option-grid--3 { grid-template-columns: repeat(3, 1fr); }

.option {
  position: relative; display: grid; cursor: pointer;
}
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option span {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center;
  border: 2px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--paper); padding: 0.8rem 0.5rem; font-weight: 700; font-size: 0.92rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.option span .option-icon { font-size: 1.5rem; line-height: 1; color: var(--ink-soft); }
.option input:checked + span .option-icon { color: var(--coral); }
.option input:checked + span { border-color: var(--coral); background: var(--coral-wash); color: var(--coral-deep); }
.option input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 3px; }

/* Result card */
.calc-results { display: grid; gap: 1rem; align-content: start; position: sticky; top: 84px; }
.result-card {
  background: linear-gradient(165deg, #2C2C54 0%, #3C3566 100%);
  color: #fff; border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 900px) { .calc-results { position: static; } }
.result-card h3 { font-size: 1.3rem; margin-bottom: 0.25rem; }
.result-card .result-sub { color: rgba(255,255,255,0.68); font-size: 0.9rem; margin-bottom: 1.4rem; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.stat {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-md); padding: 0.85rem 0.9rem;
}
.stat-value { font-family: var(--font-heading); font-weight: 700; font-size: 1.55rem; line-height: 1.1; color: var(--sun); }
.stat-label { font-size: 0.8rem; color: rgba(255,255,255,0.72); margin-top: 0.15rem; }

/* The offer is its own card on paper, against the dark card above it. The
   colour flip is the point: a reader should not have to parse a heading to
   know the subject changed from what this costs you to what we would charge. */
.offer-card {
  background: var(--paper); border: 2px solid var(--coral); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--shadow);
}
.offer-title { font-size: 1.3rem; color: var(--ink); }
.offer-price {
  font-family: var(--font-heading); font-weight: 700; font-size: 2.8rem; line-height: 1.1;
  color: var(--coral-deep); margin-top: 0.75rem;
}
.offer-price-label { font-size: 0.92rem; font-weight: 700; color: var(--ink); margin-top: 0.2rem; }
.offer-body { font-size: 0.94rem; color: var(--ink-soft); margin-top: 0.9rem; }
.offer-compare {
  font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.9rem;
  padding-top: 0.9rem; border-top: 1px dashed var(--line-strong);
}
/* Deliberately the quietest text on the card: conditions worth stating, not
   worth reading before the price. */
.price-fineprint { font-size: 0.78rem; color: var(--ink-faint); margin-top: 0.85rem; }
.result-cta { margin-top: 1.25rem; }
.result-cta .btn { width: 100%; }

/* ---------- Icons ----------
   Inline <use> against the sprite built by tools/build-icons.js. Sized in em so
   an icon follows whatever font-size its context sets, the same way the main
   splash's .iconify rule works. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em;
  fill: currentColor; flex-shrink: 0;
}

/* ---------- Box contents ---------- */
.box-controls {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 0.7rem 1.4rem; box-shadow: var(--shadow-sm);
  max-width: 560px; margin: 0 auto 2rem;
}
.box-slider-label {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; white-space: nowrap;
}
.box-slider-label .icon { font-size: 1.2rem; color: var(--coral); }
.box-controls input[type=range] { flex: 1; min-width: 140px; accent-color: var(--coral); height: 28px; }
.box-slider-value {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem;
  color: var(--coral-deep); min-width: 7.5ch; text-align: right; white-space: nowrap;
}

.box-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.9rem; }
.box-item {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 1.1rem; box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: 0.5rem 0.75rem;
}
.box-count {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; line-height: 1.1;
  color: var(--coral-deep); min-width: 1.6ch; text-align: right;
  font-variant-numeric: tabular-nums;
}
.box-icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--sky-wash); color: #2F5FA8; font-size: 1.25rem;
}
.box-body { display: block; }
.box-name { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; }
.box-desc { display: block; font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.15rem; }
.box-total {
  text-align: center; margin-top: 1.75rem; font-size: 1.05rem; color: var(--ink-soft);
}
.box-total strong { color: var(--ink); }

/* ---------- Trust ----------
   Six proof points, one line each. The long-form versions of these live in the
   FAQ; this section exists to be scanned on the way past, not read. */
.trust { background: var(--cream-deep); }
.proof-list { list-style: none; display: grid; gap: 0.7rem; }
.proof {
  display: flex; align-items: flex-start; gap: 0.85rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 0.95rem 1.15rem; box-shadow: var(--shadow-sm);
  font-size: 0.98rem; color: var(--ink-soft);
}
.proof-icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--sky-wash); color: #2F5FA8; font-size: 1.2rem;
}

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; counter-reset: step; }
.step { position: relative; padding-top: 1rem; }
.step .num {
  font-family: var(--font-heading); font-weight: 700; font-size: 2.6rem;
  color: var(--coral); opacity: 0.35; line-height: 1;
}
.step h3 { font-size: 1.2rem; margin-top: 0.3rem; }
.step p { color: var(--ink-soft); font-size: 0.96rem; margin-top: 0.35rem; }

/* ---------- Demand ladder ---------- */
.ladder { background: var(--paper); border-block: 1px solid var(--line); }
.ladder-intro {
  background: var(--sun-wash); border: 1px solid rgba(255, 194, 75, 0.5);
  border-radius: var(--r-lg); padding: 1.4rem 1.6rem; margin-bottom: 2rem;
}
.ladder-intro p { color: var(--ink-soft); }
.ladder-intro p + p { margin-top: 0.6rem; }

.choice-list { display: grid; gap: 0.9rem; }
.choice {
  border: 2px solid var(--line-strong); border-radius: var(--r-lg);
  background: var(--paper); overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.choice:has(input[name=intent]:checked) { border-color: var(--coral); box-shadow: var(--shadow); }
.choice > label { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1.1rem 1.3rem; cursor: pointer; }
.choice input[type=radio] { margin-top: 0.35rem; width: 20px; height: 20px; accent-color: var(--coral); flex: 0 0 auto; }
.choice .choice-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; display: block; }
.choice .choice-sub { font-size: 0.92rem; color: var(--ink-soft); display: block; margin-top: 0.15rem; }

.choice-body { display: none; padding: 0 1.3rem 1.3rem; }
.choice:has(input[name=intent]:checked) .choice-body { display: block; }
.choice-body-inner {
  border-top: 1px dashed var(--line-strong); padding-top: 1.2rem;
  display: grid; gap: 1rem;
}

.field { display: grid; gap: 0.35rem; }
.field label { font-weight: 700; font-size: 0.92rem; }
.field .field-hint { font-size: 0.84rem; color: var(--ink-faint); font-weight: 400; }
.field input[type=text],
.field input[type=email],
.field input[type=date],
.field textarea {
  font: inherit; padding: 0.7rem 0.9rem; border: 2px solid var(--line-strong);
  border-radius: var(--r-sm); background: var(--cream); color: var(--ink); width: 100%;
}
.field input:focus, .field textarea:focus { border-color: var(--coral); outline: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.chip-set { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block; border: 2px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 0.35rem 0.9rem; font-size: 0.9rem; font-weight: 700; cursor: pointer; background: var(--paper);
}
.chip input:checked + span { border-color: var(--sky); background: var(--sky-wash); color: #24559E; }
.chip input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 3px; }

.deposit-box {
  background: var(--mint-wash); border: 2px solid var(--mint); border-radius: var(--r-md); padding: 1rem 1.15rem;
}
.deposit-box label { display: flex; gap: 0.7rem; align-items: flex-start; cursor: pointer; font-weight: 700; }
.deposit-box input { margin-top: 0.3rem; width: 18px; height: 18px; accent-color: var(--mint); flex: 0 0 auto; }
.deposit-box .deposit-sub { display: block; font-weight: 400; font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.2rem; }

.wtp-readout {
  display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--font-heading); font-weight: 700;
}
.wtp-readout .amount { font-size: 2rem; color: var(--coral-deep); }
.wtp-readout .vs { font-size: 0.9rem; font-family: var(--font-body); font-weight: 400; color: var(--ink-faint); }
.wtp-slider { width: 100%; accent-color: var(--coral); height: 28px; }

.ladder-submit { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.ladder-submit .privacy-note { font-size: 0.86rem; color: var(--ink-faint); max-width: 42ch; }

.thanks {
  display: none; background: var(--mint-wash); border: 2px solid var(--mint);
  border-radius: var(--r-lg); padding: 1.75rem;
}
.thanks.is-visible { display: block; }
.thanks h3 { font-size: 1.5rem; color: var(--mint); }
.thanks p { color: var(--ink-soft); margin-top: 0.6rem; }
.thanks dl { margin-top: 1.2rem; display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; font-size: 0.94rem; }
.thanks dt { font-weight: 700; color: var(--ink); }
.thanks dd { color: var(--ink-soft); }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--coral); line-height: 1;
}
.faq-item[open] summary::after { content: '\2013'; }
.faq-item .answer { padding-bottom: 1.25rem; color: var(--ink-soft); }
.faq-item .answer p + p { margin-top: 0.7rem; }

/* ---------- Closing ---------- */
.closing { background: linear-gradient(165deg, #2C2C54 0%, #4A3A6E 100%); color: #fff; text-align: center; }
.closing h2 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); }
.closing .btn { margin-top: 1.75rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--cream); padding-block: 2.5rem; border-top: 1px solid var(--line); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.site-footer p, .site-footer a { font-size: 0.88rem; color: var(--ink-faint); }
.footer-links { display: flex; gap: 1.1rem; flex-wrap: wrap; }

/* Signal inspector — a dev-only drawer for reading back what the page captured
   while there is no backend to post it to. */
.inspector {
  position: fixed; inset: auto 0 0 0; max-height: 70vh; overflow: auto;
  background: #16162A; color: #D8D8F0; z-index: 200;
  border-top: 3px solid var(--sun); padding: 1rem var(--gutter) 1.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem;
  display: none;
}
.inspector.is-open { display: block; }
.inspector header { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.75rem; }
.inspector h4 { font-family: var(--font-heading); font-size: 1rem; color: var(--sun); flex: 1; }
.inspector pre { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.inspector button {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff;
  border-radius: var(--r-pill); font-family: var(--font-body); font-size: 0.78rem; font-weight: 700;
  padding: 0.25rem 0.8rem; cursor: pointer;
}
.inspector button:hover { background: rgba(255,255,255,0.2); }

/* ---------- Mobile: estimate and answer on one screen ----------
   This page exists to connect a price to an answer, and on a phone the only
   thing between them is padding. These rules close the gap between the bottom
   of the estimate card and the four options so a cold visitor sees both
   without hunting. Measured at 390x844: 1.54 viewports before, ~1.0 after. */
@media (max-width: 640px) {
  .reality { padding-bottom: 1.5rem; }
  #tell-us { padding-top: 1.5rem; }
  #tell-us .section-head { margin-bottom: 1rem; }
  #tell-us .section-title { font-size: 1.6rem; }

  .ladder-intro { padding: 0.9rem 1.05rem; margin-bottom: 1.1rem; font-size: 0.92rem; }

  .result-cta { margin-top: 1rem; }
  .result-cta .btn { padding-block: 0.6rem; }

  .choice > label { padding: 0.8rem 1rem; gap: 0.7rem; }
  .choice .choice-title { font-size: 1.02rem; }
  .choice .choice-sub { font-size: 0.85rem; margin-top: 0.1rem; }
  .choice-list { gap: 0.6rem; }
}