:root {
  color-scheme: light;
  --bg: #f7f5f0;
  --paper: #fcfbf8;
  --surface: #efede7;
  --surface-strong: #e7e4dc;
  --text: #111614;
  --muted: #58605c;
  --quiet: #747b77;
  --line: #d8d5cd;
  --line-strong: #b8b7b1;
  --blue: #4b7291;
  --blue-deep: #345a76;
  --orange: #bd5b2a;
  --orange-soft: #f2dfd2;
  --silver: #aeb7bc;
  --max: 1180px;
  --reading: 760px;
  --radius: 18px;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

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

button,
input,
select {
  font: inherit;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.72rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.65rem;
  color: var(--text);
  background: var(--paper);
  font-weight: 750;
  transform: translateY(-180%);
}

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

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

.proof-banner {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #dfc7b9;
  color: #6f3519;
  background: #f5e9e0;
  font-size: 0.78rem;
  font-weight: 720;
  letter-spacing: 0.055em;
  text-align: center;
  text-transform: uppercase;
}

.site-header {
  position: sticky;
  z-index: 10;
  top: 0;
  border-bottom: 1px solid rgba(216, 213, 205, 0.9);
  background: rgba(247, 245, 240, 0.96);
  backdrop-filter: blur(16px);
}

.header-inner,
.section,
.page-shell,
.footer-inner {
  width: min(calc(100% - 2.5rem), var(--max));
  margin-inline: auto;
}

.header-inner {
  display: flex;
  min-height: 5.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.65rem;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  text-decoration: none;
}

.brand-icon {
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(184, 183, 177, 0.72);
  border-radius: 0.72rem;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(17, 22, 20, 0.08);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.15rem;
}

.site-nav a {
  min-height: 2.75rem;
  padding: 0.62rem 0.78rem;
  border-bottom: 1px solid transparent;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 680;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--blue);
  color: var(--text);
}

.hero {
  padding-block: clamp(3.75rem, 7vw, 6.75rem);
}

.hero-copy {
  max-width: none;
}

.hero h1 {
  max-width: none;
}

.eyebrow {
  margin: 0 0 1.15rem;
  color: var(--blue-deep);
  font-size: 0.76rem;
  font-weight: 780;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin-top: 0;
  color: var(--text);
  font-family: var(--serif);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

h1 {
  max-width: 18ch;
  margin-bottom: 1.5rem;
  font-size: clamp(3.35rem, 5vw, 4.4rem);
}

h2 {
  margin-bottom: 1rem;
  font-size: clamp(2.15rem, 4.2vw, 3.55rem);
}

h3 {
  margin-bottom: 0.7rem;
  font-size: clamp(1.35rem, 2.5vw, 1.7rem);
}

.hero-lead,
.section-lead,
.page-lead {
  max-width: 48rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.7vw, 1.24rem);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2.15rem;
}

.button-link,
.button-secondary,
.button-muted {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  padding: 0.82rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  font-weight: 760;
  text-decoration: none;
}

.button-link {
  color: #fff;
  background: var(--blue-deep);
}

.button-link:hover {
  background: #26475f;
}

.button-secondary {
  border-color: var(--line-strong);
  color: var(--text);
  background: transparent;
}

.button-secondary:hover {
  background: var(--surface);
}

.button-muted {
  border-color: var(--line);
  color: var(--quiet);
  background: transparent;
}

.release-status {
  max-width: 39rem;
  margin: 1.4rem 0 0;
  padding: 0.1rem 0 0.1rem 1rem;
  border-left: 3px solid var(--blue);
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
  scroll-margin-top: 7rem;
}

.release-status strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.15rem;
  margin: 2.35rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.trust-strip li {
  position: relative;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 670;
}

.trust-strip li + li::before {
  position: absolute;
  left: -0.67rem;
  color: var(--silver);
  content: "·";
}

.product-screen-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2.2rem;
  background: var(--paper);
  box-shadow: 0 2rem 5rem rgba(55, 49, 41, 0.13);
}

.product-screen-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.product-screen-crop .product-screen-frame {
  /* The captures end above the tab bar (row 2532 of 2796); this hides
     the 171-row status bar at the top. */
  aspect-ratio: 1290 / 2361;
}

.product-screen-crop .product-screen-frame img {
  transform: translateY(-6.753%);
}

.product-shot figcaption {
  margin-top: 1rem;
  color: var(--quiet);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: center;
}

.section {
  padding-block: clamp(3.75rem, 6vw, 6.25rem);
}

.compact-section {
  padding-block: clamp(2.75rem, 4vw, 4rem);
}

.section-rule {
  border-top: 1px solid var(--line);
}

.section-heading {
  max-width: 48rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.75rem);
}

.card-grid,
.truth-grid,
.price-grid,
.proof-grid,
.story-grid,
.habit-grid {
  display: grid;
  gap: 1.5rem;
}

.habit-grid {
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.habit-card {
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-strong);
}

.habit-shot {
  width: min(100%, 14rem);
  margin: 0 0 1.5rem;
}

.habit-card h3 {
  margin-bottom: 0.55rem;
}

.habit-card > p {
  max-width: 22rem;
  margin-bottom: 0;
  color: var(--muted);
}

.plain-boundary {
  display: grid;
  max-width: 64rem;
  grid-template-columns: minmax(16rem, 0.8fr) minmax(18rem, 1.2fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 6rem);
}

.plain-boundary .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: -0.75rem;
}

.plain-boundary h2,
.plain-boundary p {
  margin-bottom: 0;
}

.plain-boundary p {
  color: var(--muted);
  font-size: 1.08rem;
}

.plain-boundary a {
  color: var(--text);
  font-weight: 720;
}

.story-grid {
  max-width: 62rem;
  gap: clamp(2.5rem, 7vw, 6rem);
}

.story-solution,
.story-outcomes {
  padding-top: 1.7rem;
  border-top: 1px solid var(--line-strong);
}

.story-solution .eyebrow,
.story-outcomes .eyebrow {
  margin-bottom: 1.35rem;
}

.story-solution h3 {
  max-width: 18ch;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}

.story-solution > p:last-child {
  max-width: 32rem;
  color: var(--muted);
  font-size: 1.05rem;
}

.story-outcomes ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.story-outcomes li {
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.3;
}

.step-card,
.card,
.truth-card {
  padding: 1.7rem 0 0;
  border-top: 1px solid var(--line-strong);
}

.step-card p,
.card p,
.truth-card p,
.price-card p,
.price-card li,
.policy-section p,
.policy-section li {
  color: var(--muted);
}

.step-card p:last-child,
.card p:last-child,
.truth-card p:last-child,
.price-card p:last-child,
.policy-section p:last-child {
  margin-bottom: 0;
}

.step-number,
.price-label {
  display: block;
  margin-bottom: 1.3rem;
  color: var(--orange);
  font-size: 0.76rem;
  font-weight: 780;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.proof-grid {
  align-items: start;
}

.product-shot {
  width: min(100%, 20rem);
  margin-inline: auto;
}

.product-shot-copy {
  width: min(100%, 20rem);
  margin-inline: auto;
  padding-top: 1rem;
}

.product-shot-copy strong,
.truth-card strong {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--text);
  font-family: var(--serif);
  font-weight: 650;
}

.product-shot-copy strong {
  font-size: 1.32rem;
  line-height: 1.2;
}

.truth-card strong {
  font-size: 1.45rem;
}

.product-shot-copy .accent,
.truth-card.warning strong {
  color: var(--orange);
}

.price-card,
.notice,
.policy-section,
.calc-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.price-card {
  padding: clamp(1.65rem, 3.5vw, 2.4rem);
}

.price-card ul {
  padding-left: 1.2rem;
}

.price-card.featured {
  border-color: #9fb0bc;
  box-shadow: inset 0 3px 0 var(--blue);
}

.price-note {
  margin-top: 1.3rem;
  color: var(--quiet);
  font-size: 0.86rem;
}

.faq-list {
  max-width: 54rem;
}

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

.faq-list details:last-child,
.fold:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-list summary,
.fold > summary {
  padding: 1.45rem 2.5rem 1.45rem 0;
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 650;
  cursor: pointer;
}

.faq-list details p,
.fold > p,
.fold > ul,
.fold > pre,
.fold > h3 {
  max-width: 48rem;
  color: var(--muted);
}

.faq-list details p {
  margin-top: 0;
  padding: 0 0 1.5rem;
}

.fold {
  margin: 0;
  padding: 0;
}

.fold > summary::marker {
  color: var(--orange);
  font-size: 0.85em;
}

.fold[open] > summary {
  margin-bottom: 0.25rem;
}

.fold[open] {
  padding-bottom: 1.5rem;
}

.notice {
  padding: 1.4rem 1.5rem;
  border-color: #dfc7b9;
  color: #673219;
  background: #f8eee7;
}

.notice strong {
  display: block;
  margin-bottom: 0.35rem;
  color: #4f2714;
}

.page-shell {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.page-header {
  max-width: 56rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.page-header h1 {
  max-width: 15ch;
  font-size: clamp(3rem, 6vw, 5.6rem);
}

.policy-stack {
  display: grid;
  width: 100%;
  max-width: var(--reading);
  min-width: 0;
  gap: 1.15rem;
}

.policy-stack > * {
  min-width: 0;
}

.policy-stack > section:not(.policy-section):not(.calc-panel) {
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
}

.policy-section,
.calc-panel {
  padding: clamp(1.45rem, 3.5vw, 2.35rem);
}

.policy-section h2,
.policy-stack > section h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.35rem);
  letter-spacing: -0.035em;
}

.policy-section h3,
.policy-stack > section h3 {
  margin-top: 1.8rem;
}

.policy-section a,
.policy-stack a {
  color: var(--blue-deep);
  text-underline-offset: 0.18em;
}

.policy-section li + li,
.policy-stack li + li {
  margin-top: 0.5rem;
}

pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  color: #26312c;
  background: var(--surface);
  font-size: 0.88rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.calc-form {
  display: grid;
  max-width: 36rem;
  gap: 1.35rem;
}

.calc-field {
  display: grid;
  gap: 0.5rem;
}

.calc-field label,
.calc-field legend {
  color: var(--text);
  font-weight: 690;
}

.calc-field input[type="number"],
.calc-field select {
  width: 100%;
  min-height: 3.15rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.55rem;
  color: var(--text);
  background: var(--paper);
}

.calc-field input[type="number"]:focus,
.calc-field select:focus {
  border-color: var(--blue);
}

.calc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.calc-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.35rem;
}

.calc-radios label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-weight: 520;
}

.calc-button {
  min-height: 3.25rem;
  padding: 0.78rem 1.25rem;
  border: 1px solid var(--blue-deep);
  border-radius: 0.65rem;
  color: #fff;
  background: var(--blue-deep);
  font-weight: 740;
  cursor: pointer;
}

.calc-button:hover {
  background: #26475f;
}

.calc-result {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.calc-range {
  margin-bottom: 0.35rem;
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(1.75rem, 5vw, 2.55rem);
  font-weight: 650;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.calc-centre {
  color: var(--muted);
}

.calc-error {
  color: #8c321d;
  font-weight: 700;
}

.calc-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1rem;
  margin-top: 1.35rem;
}

.calc-share .button-secondary {
  min-height: 3rem;
  cursor: pointer;
}

.calc-share-note,
.calc-share-status {
  margin: 0;
  color: var(--quiet);
  font-size: 0.82rem;
  line-height: 1.45;
}

.calc-share-note {
  flex-basis: 100%;
}

.calc-share-status {
  min-height: 1.2em;
  color: var(--blue-deep);
  font-weight: 700;
}

[hidden] {
  display: none !important;
}

.site-footer {
  margin-top: 3rem;
  border-top: 1px solid var(--line);
}

.footer-inner {
  display: flex;
  min-height: 10rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.footer-copy {
  color: var(--quiet);
  font-size: 0.83rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-links a {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 670;
  text-underline-offset: 0.18em;
}

/* The home and parents footers add a row of links to the four search pages
   (11 October 2026), under the copyright and the usual links. */
.footer-inner-wrap {
  flex-wrap: wrap;
  padding-block: 2rem;
}

.footer-calculators {
  flex-basis: 100%;
  align-items: baseline;
}

.footer-label {
  color: var(--quiet);
  font-size: 0.83rem;
}

@media (min-width: 760px) {
  .hero-copy {
    text-align: center;
  }

  .hero h1,
  .hero-lead,
  .release-status {
    margin-inline: auto;
  }

  .hero-actions,
  .trust-strip {
    justify-content: center;
  }

  .release-status {
    text-align: left;
  }

  .card-grid.three,
  .truth-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .card-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  }

  .habit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 20rem));
    justify-content: start;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    row-gap: clamp(2.5rem, 5vw, 4.5rem);
  }

  .product-shot,
  .product-shot-copy {
    margin-inline: 0;
  }

  .product-shot-copy strong {
    white-space: nowrap;
  }
}

@media (max-width: 759px) {
  .header-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.65rem;
    padding-block: 1rem;
  }

  .site-header {
    position: relative;
  }

  .site-nav {
    justify-content: flex-start;
  }

  .site-nav a {
    min-height: 2.4rem;
    padding: 0.48rem 0.62rem 0.48rem 0;
    margin-right: 0.7rem;
  }

  .site-nav .nav-optional {
    display: none;
  }

  .hero {
    min-height: auto;
  }

  .plain-boundary {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .plain-boundary .eyebrow {
    margin-bottom: -0.25rem;
  }

  .trust-strip li + li::before {
    content: none;
  }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding-block: 2.5rem;
  }
}

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

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

@media (prefers-contrast: more) {
  :root {
    --muted: #353a37;
    --quiet: #4e5450;
    --line: #858883;
    --line-strong: #585c58;
    --blue: #254f6c;
    --blue-deep: #173e59;
    --orange: #8b3c18;
  }
}

/* The height question and the free estimate share the first screen. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 23rem);
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
  padding-block: 3rem;
}
.hero-copy { text-align: left; }
.hero h1 { max-width: 11ch; font-size: clamp(3.4rem, 6vw, 5.5rem); }
.hero-lead { max-width: 34rem; margin-inline: 0; }
.hero-actions, .trust-strip { justify-content: flex-start; }
.proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
.product-shot-copy strong { white-space: normal; }
.habit-card { border-top: 2px solid var(--blue); padding-top: 1.25rem; }
.parent-section { max-width: var(--reading); margin-inline: auto; }
#download { scroll-margin-top: 6rem; }
.release-status { max-width: none; text-align: left; }
.release-status h2 { font-size: clamp(2rem, 4vw, 3rem); }
fieldset.calc-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.calculator-next { margin-block: 1.5rem; padding: 1.5rem; background: var(--surface); border-radius: .75rem; }
.clipboard-helper { position: fixed; opacity: 0; }
@media (max-width: 759px) {
  .header-inner { flex-direction: row; align-items: center; gap: .75rem; min-height: 4.5rem; padding-block: .75rem; }
  .brand { font-size: 1.7rem; gap: .4rem; }
  .brand-icon { width: 2.3rem; height: 2.3rem; }
  .site-nav a { padding: .5rem .3rem; margin-right: 0; font-size: .875rem; }
  .site-nav a[href$="method/"], .site-nav a[href$="support/"] { display: none; }
  .hero { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 1.5rem 2rem; }
  .hero h1 { font-size: clamp(3rem, 12vw, 4.1rem); margin: 0 0 1rem; }
  .hero .eyebrow { margin-bottom: .75rem; font-size: .875rem; letter-spacing: .08em; }
  .hero-lead { margin-bottom: 1rem; font-size: 1rem; line-height: 1.5; }
  .hero-actions { gap: .5rem; margin-block: 0; }
  .hero-actions a { padding-inline: 1rem; }
  .trust-strip { display: none; }
  .proof-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .product-shot { max-width: 22rem; }
  .product-shot-copy { max-width: 22rem; }
  .calculator-next { padding: 1rem; }
}
@media (max-width: 360px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions a { text-align: center; }
}
.header-inner { flex-wrap: wrap; }
.price-card { min-width: 0; overflow-wrap: anywhere; }
.notice a, .footer-links a { overflow-wrap: anywhere; }
@media (max-width: 759px) {
  .price-card { padding: 1rem; }
}
.plain-boundary { grid-template-columns: minmax(0, 1fr); }
.plain-boundary > * { min-width: 0; }
h1, h2, h3, summary { overflow-wrap: anywhere; hyphens: auto; }
/* Headings break at spaces only, never with an inserted hyphen. */
h1, h2 { hyphens: manual; }
.policy-stack .button-link { color: #fff; }
@media (min-width: 760px) {
  .hero { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
}

/* Landing and parents pages: the free estimate in the hero, the launch
   offer, Inside Centile Plus and the two stores (24 September 2026). */
/* Balanced, so a hero heading never leaves one word alone on its last line:
   "How tall / will you be?" on the home page, and the same on /parents/. */
.hero h1 { margin-inline: 0; max-width: 13ch; text-wrap: balance; }
.parent-link { margin: 1rem 0 0; color: var(--muted); font-size: .95rem; }
.parent-link a { font-weight: 700; }
/* Both landing pages: on phones the free-range card comes straight after the
   lead, before the offer (the parents page too, from 26 September 2026). */
@media (max-width: 759px) {
  .hero-free-first { gap: 0; }
  .hero-free-first .hero-copy { display: contents; }
  .hero-free-first .hero-copy > * { order: 1; }
  .hero-free-first .estimate-card { order: 2; margin: .5rem 0 1.5rem; }
  .hero-free-first .offer-pill,
  .hero-free-first .trust-strip,
  .hero-free-first .parent-link { order: 3; }
  .trust-strip { display: flex; }
}
.store-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1rem; }
/* The release package puts a store row under each hero lead, so on phones it
   comes before the free card (27 September 2026). */
.hero-store { margin: 1rem 0; }
.price-card .offer-label { margin-top: -.85rem; margin-bottom: .9rem; }
.price-card .offer-month { margin: -.2rem 0 .4rem; }
/* Who the launch offer is for and when it ends, as the apps say it (Release 1). */
.price-card .offer-terms { margin: 0 0 .4rem; font-size: .95rem; }
.card h3 { margin: 0 0 .5rem; font-family: var(--serif); font-size: 1.45rem; }

.plus-sub { margin-top: 3.5rem; padding-top: 2.25rem; border-top: 1px solid var(--line); }
.plus-sub > h3 { margin: 0 0 .75rem; font-family: var(--serif); font-weight: 650; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.1; }
.plus-sub > .section-lead { margin-bottom: 0; }
.plus-sub .proof-grid { margin-top: 2.25rem; }
.plus-sub .product-screen-frame { aspect-ratio: 1290 / 2625; }
.plus-sub .product-shot figcaption { min-height: 3em; }
.habits-shots { margin-top: 2.5rem; }
.product-screen-frame video { display: block; width: 100%; height: auto; }
@media (min-width: 760px) {
  .proof-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
}

.offer-pill { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; max-width: 30rem; margin: 1.6rem 0 0; padding: .75rem 1.1rem; border: 1px solid #e3c2ae; border-radius: .9rem; background: var(--orange-soft); color: var(--text); font-weight: 760; font-size: 1.05rem; line-height: 1.35; text-decoration: none; }
.offer-pill:hover { background: #edd2c1; }
.offer-tag { padding: .2rem .55rem; border-radius: .4rem; background: var(--orange); color: #fff; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.offer-price { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 650; line-height: 1.15; }
.offer-month { font-weight: 760; color: var(--orange); }
.offer-then { font-weight: 500; color: var(--muted); font-size: 1rem; }

.estimate-card { align-self: center; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid #9fb0bc; border-radius: var(--radius); background: var(--paper); box-shadow: inset 0 3px 0 var(--blue), 0 1.5rem 4rem #37312914; }
.est-title { margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; }
.est-sub { margin: .4rem 0 1.1rem; color: var(--muted); font-size: .95rem; }
#est-form fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0 0 .9rem; padding: 0; border: 0; }
#est-form legend { float: left; margin: 0 .5rem 0 0; padding: 0; font-weight: 700; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.est-row { display: grid; grid-template-columns: 8.5rem 1fr; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.est-row label { font-weight: 700; }
.est-row input { width: 100%; min-height: 2.75rem; padding: .5rem .7rem; border: 1px solid var(--line-strong); border-radius: .6rem; font: inherit; background: #fff; }
.est-row span[data-u="ft"]:not([hidden]) { display: flex; gap: .5rem; }
#est-form .button-link { width: 100%; margin-top: .3rem; border: 0; font: inherit; font-weight: 760; cursor: pointer; }
.est-error { margin: .6rem 0 0; color: var(--orange); font-size: .9rem; }
.est-result { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.est-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.est-label { margin: 0; color: var(--orange); font-size: .76rem; font-weight: 780; letter-spacing: .12em; text-transform: uppercase; }
.est-switch { display: inline-flex; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 99px; }
.est-switch button { padding: .3rem .75rem; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.est-switch button[aria-pressed="true"] { background: var(--blue-deep); color: #fff; }
.est-mid { margin: .2rem 0 0; font-family: var(--serif); font-size: 3rem; line-height: 1; }
.est-range { margin: .4rem 0 .8rem; font-weight: 700; font-size: 1.15rem; }
.est-note { margin: 0; color: var(--muted); font-size: .92rem; }
.est-note a { font-weight: 700; }
/* At large text sizes the hero column and the estimate rows must be able to
   shrink below their content's natural width, or the page scrolls sideways. */
.hero > * { min-width: 0; }
.est-row { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); }
.est-row input { min-width: 0; }
@media (max-width: 759px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
}
/* Each landing page leads to the other from the top menu ("For parents" /
   "For teens"), phones included, so .nav-audience is never hidden. To keep
   the phone menu on one line, the inner pages drop their Privacy and Terms
   menu links there (both stay in every footer), except on their own page. */
@media (max-width: 759px) {
  .site-nav a[href$="privacy/"]:not([aria-current]),
  .site-nav a[href$="terms/"]:not([aria-current]) { display: none; }
}