/* ============================================================
   Family Edition · copy-doc pass (2026-10-19)
   ------------------------------------------------------------
   Loaded last. Styles for the sections the client's copy doc
   adds, plus small extensions to existing sections that now
   carry more copy. Brand tokens only (pick-one.css :root and
   family.css :root). Sentence-case kickers, never uppercase
   eyebrows; pick-one.css justifies p/li, so every new block
   resets to start alignment.
   ============================================================ */

/* Her standing rule: wide running copy stays flush (justified) on both
   edges. Lists, chips and the narrow columns below cannot justify without
   rivers, so they go ragged. :where() keeps this at one class of specificity, so
   every centred line further down still wins. */
.family-page :where(
    #the-disconnect, #sound-familiar, #want-tried, #you-are-not-alone, #really-happening,
    #psychology, #story, #features, #questions, #never-gets-old,
    #faq-objections, #worth, #guarantee, #growing-up, #pricing,
    #three-months, .trust-strip
  ) :where(li, li *),
.family-page :where(
    .emma-reflection__lead, .familiar-copy, .advice-banner, .rh-chat,
    .qa-card, .want-tried, .stat-32m-card, .ngo-card, .worth-receipt, .worth-priceless,
    .guarantee-proof, .tm-col, .story-unlock__grid, .features-offer,
    .depth-copy, .dinner-script
  ) :where(p) {
  text-align: start;
  text-align-last: auto;
  -webkit-hyphens: manual;
  hyphens: manual;
}

.family-page .fe-kicker {
  display: block;
  margin: 0 0 0.6rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--coral-ink, #b8402d);
}
.family-page .section-header .fe-kicker {
  text-align: center;
}

/* ---------- Opening story: the dialogue ------------------- */
.dinner-script {
  display: grid;
  gap: 1.1rem;
}
.dinner-script__beat {
  display: grid;
  gap: 0.35rem;
  padding-left: 1rem;
  border-left: 2px solid var(--line, rgba(26, 26, 26, 0.1));
}
.family-page .dinner-script__aside {
  margin: 0 0 0.15rem;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--muted, #6e6b67);
}
.family-page .dinner-script__line {
  margin: 0;
  display: grid;
  grid-template-columns: 6.25rem 1fr;
  gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--body, #302f2e);
}
.dinner-script__who {
  font-weight: 700;
  font-size: 0.875rem;
  padding-top: 0.1rem;
  color: var(--muted, #6e6b67);
}
.dinner-script__line--parent .dinner-script__who {
  color: var(--coral-ink, #b8402d);
}
.dinner-script__line--parent .dinner-script__said {
  font-weight: 600;
  color: var(--ink, #1a1a1a);
}
@media (min-width: 56rem) {
  #the-disconnect .disconnect-split {
    align-items: start;
  }
  #the-disconnect .disconnect-split__media {
    position: sticky;
    top: calc(var(--nav-h, 5.25rem) + 1.5rem);
  }
}

.emma-reflection {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: 1.5rem 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
  .emma-reflection {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
  }
}
.family-page .emma-reflection__time {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink, #1a1a1a);
}
.family-page .emma-reflection__text {
  margin: 0 0 0.4rem;
  font-size: 1.0625rem;
  color: var(--body, #302f2e);
}
.emma-reflection__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.family-page .emma-reflection__list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.2rem;
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: 18px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink, #1a1a1a);
}
.emma-reflection__list .stat-bubble__icon {
  width: 2.75rem;
  height: 2.75rem;
}
.emma-reflection__close {
  grid-column: 1 / -1;
  text-align: center;
  padding-top: clamp(1rem, 2vw, 1.5rem);
}
.family-page .emma-reflection__surface {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}
.family-page .emma-reflection__quote {
  margin: 0.4rem 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  color: var(--coral-deep, #d9503f);
}

/* ---------- Sound familiar? ------------------------------- */
.familiar-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 58rem) {
  .familiar-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.family-page .familiar-title {
  text-align: start;
  max-width: 18ch;
  text-wrap: balance;
}
.family-page .familiar-lede {
  margin: 0 0 1.75rem;
  max-width: 40ch;
  font-size: 1.125rem;
  color: var(--body, #302f2e);
}
.familiar-lede em {
  font-style: normal;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}
.surface-loop {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.family-page .surface-loop li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.25rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
.surface-loop__ask {
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}
.surface-loop__arrow {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--coral, #f06858);
}
.surface-loop__answer {
  color: var(--muted, #6e6b67);
}

/* ---------- 3.2M card: "You're not alone." kicker ----------- */
.family-page .stat-32m-kicker {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}

/* ---------- Here's what's really happening ---------------- */
.rh-head {
  display: grid;
  gap: 1.5rem 4rem;
  grid-template-columns: 1fr;
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 58rem) {
  .rh-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.family-page .rh-head .section-title {
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}

.rh-row {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 58rem) {
  .rh-row {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
  .rh-row--flip {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
  .rh-row--flip .rh-row__copy {
    order: 2;
  }
  .rh-row--stack {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }
  .rh-row--stack .rh-row__after {
    grid-column: 1 / -1;
  }
}
.family-page .rh-row__copy p {
  margin: 0 0 0.85rem;
  max-width: 52ch;
  font-size: 1.0625rem;
  color: var(--body, #302f2e);
}
.family-page .rh-row__num {
  margin: 0 0 0.25rem !important;
  font-family: var(--font-display);
  font-size: 1rem !important;
  font-weight: 800;
  color: var(--coral, #f06858) !important;
}
.family-page .rh-row__kicker {
  margin: 0 !important;
  font-size: 0.9375rem !important;
  font-weight: 700;
  color: var(--muted, #6e6b67) !important;
}
.rh-row__title {
  margin: 0.15rem 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.125rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink, #1a1a1a);
}
.rh-x-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.family-page .rh-x-list li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-weight: 600;
  color: var(--ink, #1a1a1a);
}
.rh-x-list svg {
  width: 1rem;
  height: 1rem;
  margin-top: 0.3rem;
  color: var(--coral-deep, #d9503f);
}
.rh-safe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.rh-safe span {
  padding: 0.5rem 1rem;
  border-radius: 18px 18px 18px 4px;
  background: #fff;
  border: 1px solid var(--border-card);
  box-shadow: 0 2px 8px rgba(26, 26, 26, 0.05);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}
.family-page .rh-row__payoff {
  font-family: var(--font-display);
  font-size: 1.25rem !important;
  font-weight: 600;
  color: var(--ink, #1a1a1a) !important;
}
.rh-row__payoff em {
  font-style: normal;
  color: var(--coral-deep, #d9503f);
}
.rh-row__media {
  margin: 0;
  border-radius: var(--radius-lg, 24px);
  overflow: hidden;
  box-shadow: 0 20px 44px -24px rgba(26, 26, 26, 0.26);
}
.rh-row__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* 02: the conversation that ends after one word. */
.rh-chat {
  max-width: 26rem;
  justify-self: center;
  width: 100%;
  padding: 1.75rem;
  background: #fff;
  border-radius: var(--radius-lg, 24px);
  border: 1px solid var(--border-card);
  box-shadow: 0 20px 44px -28px rgba(26, 26, 26, 0.3);
  display: grid;
  gap: 0.6rem;
}
.family-page .rh-chat__count {
  margin: 0 0 0.25rem;
  text-align: center !important;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--muted, #6e6b67);
}
.family-page .rh-chat__bubble {
  margin: 0;
  max-width: 80%;
  padding: 0.7rem 1.05rem;
  font-weight: 600;
  line-height: 1.35;
}
.rh-chat__bubble--parent {
  justify-self: end;
  background: var(--coral, #f06858);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
}
.rh-chat__bubble--kid {
  justify-self: start;
  background: var(--chip, #e9ecef);
  color: var(--ink, #1a1a1a);
  border-radius: 18px 18px 18px 4px;
}
.family-page .rh-chat__end {
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--line);
  text-align: center !important;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--muted, #6e6b67);
}

/* 03: what each child is carrying. */
.rh-hidden {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.family-page .rh-hidden li {
  padding: 1rem 1.25rem;
  border-radius: 18px;
  background: var(--cream, #fef8ec);
  border: 1px solid var(--border-card);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--body, #302f2e);
}
.rh-hidden li:nth-child(1) {
  border-left: 4px solid var(--pink, #faaab1);
}
.rh-hidden li:nth-child(2) {
  border-left: 4px solid var(--amber, #ffbd48);
}
.rh-hidden li:nth-child(3) {
  border-left: 4px solid var(--teal, #96ccca);
}
.rh-hidden strong {
  color: var(--ink, #1a1a1a);
}
.family-page .rh-row__after p {
  margin: 0 0 0.6rem;
  max-width: 62ch;
  font-size: 1.0625rem;
  color: var(--body, #302f2e);
}
.family-page .rh-row__after p:first-child {
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}

/* The turn: one ink band, the only dark surface on the page. */
.rh-pattern {
  margin-top: clamp(1rem, 2vw, 2rem);
  margin-bottom: calc(var(--section-padding) * -1);
  padding-block: clamp(3.5rem, 6vw, 5rem);
  background: var(--ink, #1a1a1a);
  color: #f2efe9;
  text-align: center;
}
.family-page .rh-pattern p {
  text-align: center !important;
  margin: 0 auto;
}
.family-page .rh-pattern__kicker {
  font-size: 1rem;
  font-style: italic;
  color: rgba(242, 239, 233, 0.7);
}
.family-page .rh-pattern__title {
  margin-top: 0.4rem !important;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.rh-pattern__eq {
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem !important;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
}
.rh-pattern__eq span {
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(242, 239, 233, 0.25);
}
.rh-pattern__eq svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--coral-lift, #f58274);
}
.family-page .rh-pattern__text {
  margin-top: 1.25rem !important;
  font-size: 1.0625rem;
  color: rgba(242, 239, 233, 0.8);
}
.family-page .rh-pattern__turn {
  margin-top: 1.75rem !important;
  max-width: 28ch;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--coral-lift, #f58274);
  text-wrap: balance;
}

/* ---------- Psychology: five reasons + note --------------- */
.family-page .bridge-why {
  margin: clamp(2.25rem, 4vw, 3rem) auto 0;
  text-align: center !important;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}
.family-page .bridge-points--five {
  margin-top: 1rem;
  max-width: 72rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.bridge-points--five .bridge-point {
  flex: 1 1 calc(33.333% - 1rem);
  max-width: calc(33.333% - 0.67rem);
}
@media (max-width: 58rem) {
  .bridge-points--five .bridge-point {
    flex-basis: 100%;
    max-width: 100%;
  }
}
.family-page .bridge-same {
  margin: clamp(2rem, 4vw, 2.75rem) auto 0;
  text-align: center !important;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}
.bridge-same span {
  color: var(--coral-deep, #d9503f);
}
.bridge-psych {
  margin: clamp(2rem, 4vw, 2.75rem) auto 0;
  max-width: 46rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: #fff;
  border-radius: var(--radius-lg, 24px);
  border: 1px solid var(--border-card);
}
.family-page .bridge-psych p {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  color: var(--body, #302f2e);
}
.family-page .bridge-psych p:last-child {
  margin: 0;
}
.family-page .bridge-psych__title {
  font-family: var(--font-display);
  font-size: 1.375rem !important;
  font-weight: 700;
  color: var(--ink, #1a1a1a) !important;
}
.bridge-psych strong {
  color: var(--ink, #1a1a1a);
}

/* ---------- Emma's story ---------------------------------- */
.story-setup {
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
}
.family-page .story-setup p {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  color: var(--body, #302f2e);
}
.story-setup q {
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}
.story-setup em {
  color: var(--muted, #6e6b67);
}
.family-page .timeline-card__lead {
  margin: 0 0 0.4rem;
  font-size: 0.875rem;
  color: var(--muted, #6e6b67);
}
.story-unlock {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border-radius: var(--radius-lg, 24px);
  background: #fff;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-subtle);
}
.family-page .story-unlock__setup {
  margin: 0;
  text-align: center !important;
  font-style: italic;
  color: var(--muted, #6e6b67);
}
.family-page .story-unlock__quote {
  margin: 0.5rem auto 0;
  max-width: 30ch;
  text-align: center !important;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--coral-deep, #d9503f);
  text-wrap: balance;
}
.story-unlock__grid {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1.5rem 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
  .story-unlock__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.family-page .story-unlock__grid p {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  color: var(--body, #302f2e);
}
.family-page .story-unlock__title {
  font-family: var(--font-display);
  font-size: 1.25rem !important;
  font-weight: 700;
  color: var(--ink, #1a1a1a) !important;
}
.outcome-list {
  list-style: none;
  margin: 0.5rem 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.6rem 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .outcome-list {
    grid-template-columns: 1fr 1fr;
  }
}
.family-page .outcome-list li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-weight: 600;
  color: var(--ink, #1a1a1a);
}
.outcome-list svg {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.25rem;
  color: var(--sage-dark, #225c38);
}
.family-page #story .outcome-banner__title {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.outcome-banner__title span {
  color: var(--coral-deep, #d9503f);
}

/* ---------- Reviews: six --------------------------------- */
@media (min-width: 900px) {
  .family-page .reviews-3-grid--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Bundle (features split) ----------------------- */
.family-page .features-offer__app {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: 16px;
  background: var(--surface-peach, #fcece5);
  color: var(--body, #302f2e);
}
.features-offer__app svg {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--coral-deep, #d9503f);
}
.features-offer__app strong {
  color: var(--ink, #1a1a1a);
}
.family-page .features-offer__label {
  margin: 0 0 0.6rem;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}
.family-page .features-list--single {
  grid-template-columns: 1fr !important;
  gap: 0.55rem !important;
}
.features-list--single strong {
  font-weight: 600 !important;
}
.features-offer__buy {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}
.family-page .features-offer__tag {
  flex-basis: 100%;
  margin: 0;
  font-weight: 600;
  color: var(--muted, #6e6b67);
}
.family-page .features-offer__price {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink, #1a1a1a);
}
.features-offer__price span {
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted, #6e6b67);
}

/* ---------- 1600+ questions ------------------------------- */
.depth-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
  max-width: 64rem;
  margin-inline: auto;
}
@media (min-width: 52rem) {
  .depth-grid {
    grid-template-columns: 18rem 1fr;
  }
}
.depth-badge {
  width: min(18rem, 70vw);
  height: auto;
  justify-self: center;
}
.family-page .depth-copy .section-title {
  text-align: start;
}
.family-page .depth-lede {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--body, #302f2e);
}
.depth-list {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.family-page .depth-list li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink, #1a1a1a);
}
.depth-list svg {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.3rem;
  color: var(--coral-deep, #d9503f);
}
.depth-ramp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: var(--radius-full);
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
}
.depth-ramp__step {
  padding: 0.6rem 0.5rem;
}
.depth-ramp__step--light {
  background: var(--sage-tint, #cce3d4);
  color: var(--sage-dark, #225c38);
}
.depth-ramp__step--medium {
  background: var(--tier-elementary-bg, #fef4db);
  color: var(--tier-elementary-text, #925400);
}
.depth-ramp__step--deep {
  background: var(--tier-teen-bg, #fbebed);
  color: var(--tier-teen-text, #a8323e);
}

/* ---------- Age tiers: the doc's sample question ---------- */
.family-page .tier-intro__text {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}
.tier-intro__label {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--coral-ink, #b8402d);
}

/* ---------- Never gets old + Bonus ----------------------- */
.ngo-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .ngo-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.ngo-card {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--radius-lg, 24px);
  background: #fff;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-subtle);
}
.ngo-card--bonus {
  background: var(--tier-elementary-bg, #fef4db);
  border-color: var(--tier-elementary-border, #f6d898);
}
.ngo-card__icon {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--surface-peach, #fcece5);
  color: var(--coral-deep, #d9503f);
  margin-bottom: 1rem;
}
.ngo-card--bonus .ngo-card__icon {
  background: #fff;
  color: var(--tier-elementary-text, #925400);
}
.ngo-card__icon svg {
  width: 1.4rem;
  height: 1.4rem;
}
.ngo-card__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink, #1a1a1a);
}
.family-page .ngo-card p {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem;
  color: var(--body, #302f2e);
}
.family-page .ngo-card__kicker {
  margin: 0 0 0.25rem !important;
  font-size: 0.9375rem !important;
  font-weight: 700;
  color: var(--tier-elementary-text, #925400) !important;
}
.ngo-ages {
  margin: 1rem 0;
  padding: 1.25rem;
  border-radius: 18px;
  background: var(--cream, #fef8ec);
}
.family-page .ngo-ages__q {
  font-family: var(--font-display);
  font-size: 1.2rem !important;
  font-weight: 700;
  color: var(--ink, #1a1a1a) !important;
}
.ngo-ages__line {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ngo-ages__line::after {
  content: none;
}
.family-page .ngo-ages__line li {
  display: grid;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--coral, #f06858);
}
.ngo-ages__line li + li::before {
  content: "";
}
.ngo-ages__line li span {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--muted, #6e6b67);
  margin-bottom: 0.2rem;
}
.ngo-ages__line li:first-child {
  padding-right: 1.25rem;
  margin-right: 0.5rem;
  border-right: 2px dashed rgba(240, 104, 88, 0.4);
}
.family-page .ngo-ages__result {
  margin: 0 !important;
  font-weight: 700;
  color: var(--ink, #1a1a1a) !important;
}
.family-page .ngo-card__close {
  font-weight: 700;
  color: var(--ink, #1a1a1a) !important;
}
.ngo-occasions {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.family-page .ngo-occasions li {
  padding: 0.85rem 1.1rem;
  border-radius: 14px;
  background: #fff;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}

/* ---------- Objections: inner blocks ---------------------- */
.family-page .objection-body ul {
  margin: 0 0 0.85rem;
  padding-left: 1.2rem;
}
.family-page .objection-body li {
  margin-bottom: 0.3rem;
}
.objection-ages {
  list-style: none;
  padding: 0 !important;
  display: grid;
  gap: 0.4rem;
}
.objection-ages span {
  display: inline-block;
  min-width: 4.25rem;
  font-weight: 700;
  color: var(--coral-ink, #b8402d);
}
.objection-compare {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
}
.family-page .objection-compare p {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: var(--cream, #fef8ec);
}
.objection-compare p:last-child {
  background: var(--sage-tint, #cce3d4);
}
.objection-compare span {
  display: block;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}

/* ---------- What's one real conversation worth? ----------- */
.worth-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 58rem) {
  .worth-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
/* A receipt: the one 120% detail of the closing stretch. */
.worth-receipt {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 20px 44px -28px rgba(26, 26, 26, 0.3);
}
.worth-receipt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 12px;
  background:
    linear-gradient(-45deg, transparent 8px, #fff 0) 0 0 / 16px 12px repeat-x,
    linear-gradient(45deg, transparent 8px, #fff 0) 0 0 / 16px 12px repeat-x;
}
.worth-receipt__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.family-page .worth-receipt__rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px dashed rgba(26, 26, 26, 0.18);
}
.worth-receipt__name {
  display: grid;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}
.worth-receipt__name small {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted, #6e6b67);
}
.worth-receipt__total {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--muted, #6e6b67);
  text-decoration: line-through;
  text-decoration-color: rgba(217, 80, 63, 0.6);
  white-space: nowrap;
}
.worth-receipt__pick {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 16px;
  background: var(--surface-peach, #fcece5);
}
.worth-receipt__pick .worth-receipt__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
}
.worth-receipt__price {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--coral-deep, #d9503f);
}
.worth-receipt__price small {
  font-size: 1rem;
  font-weight: 600;
}
.family-page .worth-receipt__note {
  margin: 1rem 0 0;
  color: var(--body, #302f2e);
}
.worth-priceless {
  padding: clamp(1.75rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg, 24px);
  background: var(--cream, #fef8ec);
}
.worth-priceless__title {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink, #1a1a1a);
}
.worth-priceless__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.family-page .worth-priceless__list li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink, #1a1a1a);
}
.worth-priceless__list svg {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.3rem;
  color: var(--sage-dark, #225c38);
}
.family-page .worth-priceless__ask {
  margin: 1.5rem 0 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--coral-deep, #d9503f);
}

/* ---------- Guarantee ------------------------------------- */
.guarantee-card {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
  max-width: 60rem;
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3.25rem);
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--border-card);
  box-shadow: 0 10px 40px rgba(26, 46, 34, 0.06);
}
@media (min-width: 52rem) {
  .guarantee-card {
    grid-template-columns: 13rem 1fr;
  }
}
.guarantee-seal {
  justify-self: center;
  width: 13rem;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--coral, #f06858);
  color: #fff;
  box-shadow:
    0 0 0 8px #fff,
    0 0 0 10px rgba(240, 104, 88, 0.35);
}
.guarantee-seal__num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
}
.guarantee-seal__txt {
  margin-top: 0.4rem;
  padding-inline: 1.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}
.family-page .guarantee-copy .section-title {
  text-align: start;
}
.family-page .guarantee-promise {
  margin: 0 0 1.25rem;
  font-size: 1.125rem;
  color: var(--body, #302f2e);
}
.guarantee-promise strong {
  color: var(--ink, #1a1a1a);
}
.guarantee-proof {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border-radius: 16px;
  background: var(--sage-tint, #cce3d4);
}
.family-page .guarantee-proof p {
  margin: 0;
  color: #12331f;
  font-weight: 500;
}
.family-page .guarantee-proof__num {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--sage-dark, #225c38) !important;
}
.family-page .guarantee-close {
  margin: 1.25rem 0 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}
.guarantee-close span {
  color: var(--coral-deep, #d9503f);
}

/* ---------- Growing up ------------------------------------ */
.growing-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 58rem) {
  .growing-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}
.growing-media {
  margin: 0;
  border-radius: var(--radius-lg, 24px);
  overflow: hidden;
  box-shadow: 0 20px 44px -24px rgba(26, 26, 26, 0.26);
}
.growing-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.family-page .growing-copy .section-title {
  text-align: start;
  max-width: 16ch;
}
.family-page .growing-copy p {
  margin: 0 0 0.85rem;
  font-size: 1.0625rem;
  color: var(--body, #302f2e);
}
.family-page .growing-pause {
  font-family: var(--font-display);
  font-size: 1.5rem !important;
  font-weight: 700;
  color: var(--coral-deep, #d9503f) !important;
}
.growing-can {
  list-style: none;
  margin: 1.25rem 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.5rem;
}
.family-page .growing-can li {
  font-size: 1.0625rem;
  color: var(--body, #302f2e);
}
.growing-can strong {
  color: var(--coral-deep, #d9503f);
}
.family-page .growing-tonight {
  font-family: var(--font-display);
  font-size: 1.35rem !important;
  font-weight: 700;
  color: var(--ink, #1a1a1a) !important;
  margin-bottom: 1.25rem !important;
}

/* ---------- Pricing additions ----------------------------- */
.family-page .pricing-card__risk {
  margin: 0.75rem 0 0;
  text-align: center !important;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sage-dark, #225c38);
}
.after-order {
  max-width: 58rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}
.after-order__title {
  margin: 0 0 1.25rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}
.after-order__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  counter-reset: none;
}
@media (min-width: 48rem) {
  .after-order__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.family-page .after-order__steps li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.25rem;
  padding: 1.25rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--border-card);
}
.after-order__n {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.5rem;
  border-radius: 50%;
  background: var(--coral, #f06858);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
}
.after-order__steps strong {
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink, #1a1a1a);
}
.after-order__steps li > span:not(.after-order__n) {
  font-size: 0.875rem;
  color: var(--muted, #6e6b67);
}

/* ---------- Three months ago ------------------------------ */
.family-page .tm-title {
  text-align: center;
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  text-wrap: balance;
}
.tm-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  max-width: 64rem;
  margin-inline: auto;
}
@media (min-width: 52rem) {
  .tm-grid {
    grid-template-columns: 1fr 1.15fr;
  }
}
.tm-col {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg, 24px);
}
.tm-col--before {
  background: var(--chip, #e9ecef);
}
.tm-col--today {
  background: #fff;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-card);
}
.family-page .tm-col__label {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink, #1a1a1a);
}
.family-page .tm-col--before .tm-col__label {
  color: var(--muted, #6e6b67);
}
.family-page .tm-col--before p {
  margin: 0 0 0.5rem;
  color: #55524e;
}
.family-page .tm-exchange {
  font-weight: 700;
}
.tm-exchange span {
  color: var(--muted, #6e6b67);
  font-weight: 500;
}
.tm-col--today ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.family-page .tm-col--today li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink, #1a1a1a);
}
.tm-col--today svg {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.3rem;
  color: var(--sage-dark, #225c38);
}
.family-page .tm-col__know {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--coral-deep, #d9503f);
}
.tm-final {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}
.family-page .tm-final p {
  text-align: center !important;
  margin: 0 auto;
}
.family-page .tm-final__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink, #1a1a1a);
}
.family-page .tm-final__when {
  margin-top: 0.5rem !important;
  font-size: 1.25rem;
  color: var(--body, #302f2e);
}
.tm-final__when strong {
  color: var(--coral-deep, #d9503f);
}
.family-page .tm-final__ones {
  margin: 1.25rem auto 1.75rem !important;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tm-final__ones span {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  background: #fff;
  border: 1px solid var(--border-card);
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}

/* ---------- Trust strip ----------------------------------- */
.trust-strip {
  padding-block: clamp(2rem, 4vw, 2.75rem);
  background: #fff;
  border-top: 1px solid var(--line);
  text-align: center;
}
.trust-strip__list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.75rem;
}
.family-page .trust-strip__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink, #1a1a1a);
}
.trust-strip__list svg {
  width: 1rem;
  height: 1rem;
  color: var(--sage-dark, #225c38);
}
.family-page .trust-strip p {
  text-align: center !important;
  margin: 0 auto 0.4rem;
}
.family-page .trust-strip__join {
  max-width: 44ch;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}
.family-page .trust-strip__help {
  font-size: 0.9375rem;
  color: var(--muted, #6e6b67);
}
.trust-strip__help a {
  color: var(--coral-ink, #b8402d);
  font-weight: 700;
}

/* ---------- Review fixes ---------------------------------- */
/* The badge PNG ships on a white plate; multiply drops the plate into the
   cream instead of leaving a pasted-on square. */
.depth-badge {
  mix-blend-mode: multiply;
}
.family-page .objection-body p {
  margin: 0 0 0.75rem;
}
.family-page .objection-body p:last-child {
  margin-bottom: 0;
}
.family-page .tm-title {
  max-width: 28ch;
}
.tm-grid {
  align-items: start;
}
@media (max-width: 48rem) {
  .family-page
    :where(
      .guarantee-copy,
      .growing-copy,
      .story-setup,
      .rh-row__copy,
      .rh-row__after,
      .bridge-psych,
      .story-unlock__grid
    )
    :where(p) {
    text-align: start;
    text-align-last: auto;
  }
  .guarantee-proof {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .family-page .dinner-script__line {
    grid-template-columns: 5.25rem 1fr;
  }
}

/* ---------- Client mockups, 2026-10-19 ---------------------- */
/* Sound familiar: the question → answer card. */
.family-page .familiar-verdict {
  margin: 1.5rem 0 0;
  font-size: 1.125rem;
  color: var(--body, #302f2e);
}
.familiar-verdict strong {
  color: var(--ink, #1a1a1a);
}
.qa-card {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border-radius: var(--radius-lg, 24px);
  background: #fff;
  border: 1px solid var(--border-card);
  box-shadow: 0 20px 44px -28px rgba(26, 26, 26, 0.3);
}
.qa-card__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
.family-page .qa-card__rows li {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 1.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
}
.qa-card__q {
  color: var(--ink, #1a1a1a);
}
.qa-card__arrow,
.qa-card__a {
  color: var(--coral-deep, #d9503f);
}
.family-page .qa-card__foot {
  margin: 1.75rem 0 0;
  text-align: center !important;
  font-size: 0.9375rem;
  color: var(--body, #302f2e);
}
.qa-card__foot strong {
  color: var(--ink, #1a1a1a);
  box-shadow: inset 0 -3px 0 var(--coral, #f06858);
}

/* You want to know / You've tried. */
.want-tried {
  display: grid;
  gap: 2rem clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 52rem) {
  .want-tried {
    grid-template-columns: 1fr 1fr;
  }
}
.want-tried__title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}
.want-tried__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.family-page .want-tried__list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
  padding: 0.9rem 1.25rem;
  border-radius: 20px;
  background: var(--paper, #fff);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--body, #302f2e);
}
.want-tried__list strong {
  color: var(--ink, #1a1a1a);
}
.want-tried__box {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  color: #fff;
}
.want-tried__box svg {
  width: 1.15rem;
  height: 1.15rem;
}
.want-tried__box--yes {
  background: var(--green, #c0cb6d);
}
.want-tried__box--no {
  background: var(--coral, #f06858);
}
.family-page .want-tried__close {
  margin: 1.25rem 0 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink, #1a1a1a);
}

/* Here's what's really happening: header + the advice banner. */
.family-page .rh-head {
  display: block;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.family-page .rh-head .section-title {
  max-width: none;
}
.advice-banner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.75rem);
  border-radius: var(--radius-lg, 24px);
  background: #fff;
  border: 1px solid var(--border-card);
  box-shadow: 0 20px 44px -30px rgba(26, 26, 26, 0.3);
}
@media (min-width: 58rem) {
  .advice-banner {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 0;
  }
  .advice-banner__verdict {
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    margin-left: clamp(1.5rem, 3vw, 2.5rem);
    border-left: 1px solid rgba(26, 26, 26, 0.15);
    align-self: stretch;
  }
}
.family-page .advice-banner__label {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}
.advice-banner__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.family-page .advice-banner__items li {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding-inline: 0.75rem;
  text-align: center !important;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--body, #302f2e);
}
.advice-banner__items li + li {
  border-left: 2px dotted rgba(26, 26, 26, 0.15);
}
.advice-banner__items svg {
  width: 2.75rem;
  height: 2.75rem;
  fill: none;
  stroke: var(--coral, #f06858);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.advice-banner__items svg circle {
  fill: var(--coral, #f06858);
  stroke: none;
}
.advice-banner__verdict {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.advice-banner__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--coral, #f06858);
  color: #fff;
}
.advice-banner__x svg {
  width: 1.5rem;
  height: 1.5rem;
}
.family-page .advice-banner__verdict p {
  margin: 0;
  display: grid;
  gap: 0.2rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.2;
}
.advice-banner__verdict strong {
  font-weight: 800;
  color: var(--ink, #1a1a1a);
}
.advice-banner__verdict span {
  font-weight: 500;
  font-size: 0.85em;
  color: var(--body, #302f2e);
}
.family-page .rh-why {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}
@media (max-width: 34rem) {
  .advice-banner__items {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .advice-banner__items li + li {
    border-left: 0;
    border-top: 2px dotted rgba(26, 26, 26, 0.15);
    padding-top: 1rem;
  }
}
.advice-banner__items svg {
  width: 3.25rem;
  height: 3.25rem;
  stroke-width: 1.5;
}
.family-page .qa-card__rows li {
  grid-template-columns: minmax(0, 1.5fr) 1.5rem minmax(0, 1fr);
}
@media (max-width: 34rem) {
  .family-page .qa-card__rows li {
    font-size: 1.05rem;
    grid-template-columns: minmax(0, 1.4fr) 1rem minmax(0, 1fr);
    gap: 0.5rem;
  }
}

/* Sound familiar, trimmed (2026-10-19): copy + verdict left, the Q → A card
   right. On mobile the card sits between the problem and the verdict. */
.familiar-grid {
  grid-template-areas: "copy" "card" "verdict";
  row-gap: 1.75rem;
}
.familiar-copy {
  grid-area: copy;
}
.qa-card {
  grid-area: card;
}
.family-page .familiar-verdict {
  grid-area: verdict;
  margin: 0;
  max-width: 40ch;
  font-size: 1.1875rem;
}
@media (min-width: 58rem) {
  .familiar-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas: "copy card" "verdict card";
    grid-template-rows: auto 1fr;
    row-gap: 1.25rem;
    align-items: start;
  }
  .familiar-copy {
    align-self: end;
  }
  .qa-card {
    align-self: center;
  }
}
.family-page .familiar-copy .familiar-lede:last-child {
  margin-bottom: 0;
}
.family-page .qa-card__rows li {
  grid-template-columns: max-content 1.5rem max-content;
  justify-content: start;
  column-gap: 1rem;
}
.qa-card__q {
  min-width: 11.5em;
}
.qa-card__a {
  white-space: nowrap;
}
@media (max-width: 34rem) {
  .family-page .qa-card__rows li {
    grid-template-columns: minmax(0, 1fr) 1rem max-content;
    column-gap: 0.5rem;
  }
  .qa-card__q {
    min-width: 0;
  }
}
.qa-card__foot strong {
  white-space: nowrap;
}
.family-page .familiar-verdict {
  text-align: start;
  text-align-last: auto;
}
@media (max-width: 34rem) {
  .family-page .qa-card__rows li {
    grid-template-columns: minmax(0, 1fr) 1rem 7.75rem;
    font-size: 1rem;
  }
}

/* Want / tried as its own white band between two cream sections. */
.want-tried-section .want-tried {
  margin-top: 0;
}
.family-page .want-tried-section .want-tried__list li {
  background: var(--pill, #f7f7f7);
}
.family-page #you-are-not-alone.stat-32m-section {
  background: var(--cream, #fef8ec);
}

/* ============================================================
   Dinner table · three slides (#the-disconnect, 2026-10-19)
   ============================================================ */
.dn .section-header { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.dn-grid { display: grid; gap: clamp(1.75rem, 3.5vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 56rem) { .dn-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.dn-slider { min-width: 0; }
.dn-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--radius-lg, 24px); box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 20px 44px -24px rgba(26,26,26,.26); scrollbar-width: none; }
.dn-track::-webkit-scrollbar { display: none; }
.dn-track:focus-visible { outline: 3px solid var(--coral-deep, #d9503f); outline-offset: 3px; }
.dn-slide { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: start; aspect-ratio: 1800 / 1344; container-type: inline-size; }
.dn-slide > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dn-bubbles { list-style: none; margin: 0; padding: 0; }
.family-page .dn-b { position: absolute; z-index: 2; margin: 0; max-width: 40%; background: #fff; border-radius: clamp(.75rem, 2.2cqw, 1.25rem); box-shadow: var(--shadow-float, 0 2px 6px rgba(26,26,26,.06), 0 22px 48px -18px rgba(26,26,26,.22)); padding: .55em 1em; font-family: var(--text, "Figtree", system-ui, sans-serif); font-size: clamp(.75rem, 1.7cqw, 1rem); font-weight: 400; line-height: 1.3; color: var(--body, #302f2e); text-align: center; text-align-last: center; text-wrap: balance; }
.dn-b strong { color: var(--ink, #1a1a1a); font-weight: 700; }
.dn-L { left: 4%; }
.dn-R { right: 4%; }
.dn-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.dn-who { display: flex; flex-wrap: wrap; gap: .5rem; }
.dn-who button { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border: 0; border-radius: 999px; font: 700 .8125rem/1.2 var(--text, "Figtree", sans-serif); color: var(--muted, #6e6b67); background: #eef0f2; cursor: pointer; }
.dn-who button i { width: .5rem; height: .5rem; border-radius: 50%; }
.dn-who button[aria-current="true"] { background: var(--ink, #1a1a1a); color: #fff; }
.dn-arrows { display: flex; gap: .5rem; }
.dn-arrows button { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line, rgba(26,26,26,.1)); background: #fff; color: var(--ink, #1a1a1a); font-size: 1.15rem; cursor: pointer; box-shadow: 0 2px 8px rgba(26,26,26,.06); }
.dn-arrows button:disabled { opacity: .35; cursor: default; }
.family-page .dn-reflect p { margin: 0 0 .55rem; font-size: 1.0625rem; line-height: 1.55; text-align: start; text-align-last: auto; color: var(--body, #302f2e); }
.family-page .dn-reflect .dn-reflect__time { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -.02em; color: var(--ink, #1a1a1a); margin-bottom: 1rem; }
.family-page .dn-reflect .dn-reflect__think { font-style: italic; color: var(--muted, #6e6b67); }
.dn-reflect strong { color: var(--ink, #1a1a1a); }
.dn-reflect ul { list-style: none; margin: .75rem 0 1.1rem; padding: 0; display: grid; gap: .5rem; }
.family-page .dn-reflect li { position: relative; padding: .6rem .85rem .6rem 2.1rem; border-radius: .85rem; background: var(--cream, #fef8ec); font-size: .9375rem; line-height: 1.4; font-weight: 600; color: var(--ink, #1a1a1a); text-align: start; text-align-last: auto; }
.dn-reflect li::before { content: ""; position: absolute; left: .85rem; top: 1.05em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); }
.family-page .dn-reflect .dn-reflect__surface { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--ink, #1a1a1a); margin-top: 1rem; }
.family-page .dn-reflect .dn-reflect__quote { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.35; color: var(--coral-deep, #d9503f); }
/* Phones: six bubbles can't sit on a 340px photo without covering faces,
   so each slide's exchange stacks under its photo, chat-style. */
@media (max-width: 56rem) {
  .dn-track { box-shadow: none; border-radius: var(--radius-md, 14px); align-items: flex-start; }
  .dn-slide { aspect-ratio: auto; }
  .dn-slide > img { height: auto; aspect-ratio: 1800 / 1344; border-radius: var(--radius-md, 14px); }
  .dn-bubbles { display: flex; flex-direction: column; gap: .5rem; padding: .9rem .25rem .25rem; }
  .family-page .dn-b { position: static; top: auto !important; max-width: 85%; font-size: .9375rem; text-align: left; text-align-last: auto; box-shadow: none; border: 1px solid var(--line, rgba(26,26,26,.1)); }
  .family-page .dn-b.dn-kid { align-self: flex-end; background: #eef0f2; border-color: transparent; }
  .dn-ctrl { margin-top: .5rem; }
}

/* ============================================================
   You're not alone · stat + three framed cards (2026-10-19)
   ============================================================ */
.na-stat { display: grid; gap: 1rem 3rem; grid-template-columns: 1fr; align-items: end; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
@media (min-width: 56rem) { .na-stat { grid-template-columns: auto minmax(0, 1fr); } }
.family-page .na-stat__kicker { grid-column: 1 / -1; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--ink, #1a1a1a); text-align: start; }
.family-page .na-stat__num { margin: 0; display: flex; align-items: baseline; gap: .6rem; font-family: var(--font-display); font-weight: 800; color: var(--coral, #f06858); line-height: .85; letter-spacing: -.04em; text-align: start; }
.na-stat__num b { font-size: clamp(5rem, 10vw, 8rem); font-weight: 800; }
.na-stat__num span { font-size: clamp(2.25rem, 5vw, 3.75rem); letter-spacing: -.03em; }
.family-page .na-stat__desc { margin: 0; max-width: 26ch; padding-bottom: .4rem; font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.3; color: var(--ink, #1a1a1a); text-align: start; text-align-last: auto; }
.na-row-title { margin: 0 0 1.25rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.5rem); color: var(--ink, #1a1a1a); }
.na-frames { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .na-frames { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.family-page .na-frame { margin: 0; display: flex; flex-direction: column; padding: .75rem .75rem 1.5rem; background: #fff; border-radius: 1.75rem; border: 1px solid var(--border-card, rgba(26,46,34,.07)); box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 24px 48px -30px rgba(26,26,26,.28); text-align: start; }
.na-frame__photo { position: relative; margin: 0; border-radius: 1.2rem; overflow: hidden; aspect-ratio: 4 / 4.6; }
.na-frame__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform .6s ease; }
.na-frame:hover .na-frame__photo img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .na-frame__photo img { transition: none; } }
.na-frame__chip { position: absolute; left: .85rem; top: .85rem; display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 999px; background: rgba(255,255,255,.88); backdrop-filter: blur(8px); font-size: .8125rem; font-weight: 700; color: var(--ink, #1a1a1a); }
.na-frame__chip i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--c); }
.na-frame__body { display: flex; gap: .9rem; align-items: flex-start; padding: 1.25rem .75rem 0; }
.na-frame__icon { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface-peach, #fcece5); color: var(--coral, #f06858); }
.na-frame__icon svg { width: 1.25rem; height: 1.25rem; }
.family-page .na-frame__q { margin: 0; font-size: 1.0625rem; line-height: 1.45; font-weight: 600; color: var(--ink, #1a1a1a); text-align: start; text-align-last: auto; }

/* 03 closer, full width (2026-10-20): one statement band across the whole
   section instead of two paragraphs stopping at 62ch. Ragged, not justified. */
.family-page .rh-row--stack .rh-row__after {
  grid-column: 1 / -1;
  margin-top: clamp(.5rem, 1.5vw, 1rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.75rem);
  border-radius: var(--radius-lg, 24px);
  background: #fff;
  border: 1px solid var(--border-card, rgba(26,46,34,.07));
  box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 20px 44px -32px rgba(26,26,26,.28);
}
.family-page .rh-row__after p,
.family-page .rh-row__after p:first-child {
  max-width: none;
  text-align: start;
  text-align-last: auto;
  hyphens: manual;
}
.family-page .rh-row__after .rh-after__lead {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink, #1a1a1a);
  text-wrap: balance;
}
.rh-after__lead span { color: var(--coral-deep, #d9503f); }
.family-page .rh-row__after .rh-after__text {
  margin: 0;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--body, #302f2e);
}
/* The intro paragraphs in each numbered row sit in a ~45ch column: ragged. */
.family-page .rh-row__copy p { text-align: start; text-align-last: auto; }

/* ---------- Headlines on one line where they fit (2026-10-20) ----------
   The 48rem header cap broke every long headline into two short lines.
   On desktop the header can use the full container; titles stay balanced
   only when they genuinely need two lines. Sublines keep their 56ch. */
@media (min-width: 64rem) {
  .family-page .section-header,
  .family-page .section-header--start {
    max-width: 100% !important;
  }
  .family-page .section-title,
  .family-page .familiar-title,
  .family-page .rh-head .section-title,
  .family-page .tm-title,
  .family-page .growing-copy .section-title,
  .family-page .guarantee-copy .section-title,
  .family-page .depth-copy .section-title {
    max-width: none;
  }
  .family-page .tm-title { margin-inline: auto; }
}
/* Side-column headlines: a touch smaller so they hold one line at desktop. */
@media (min-width: 64rem) {
  .family-page :is(.depth-copy, .guarantee-copy, .growing-copy) .section-title {
    font-size: clamp(1.75rem, 2.3vw, 2.25rem);
  }
  .growing-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 64rem) {
  .family-page .rh-pattern__turn { max-width: none; }
}

/* "This isn't magic. It's psychology." in two columns (2026-10-20):
   text left, the client's mother-and-son question-card image right. */
.family-page .bridge-psych--split {
  max-width: none;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 0;
  background: none;
  border: 0;
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 56rem) {
  .family-page .bridge-psych--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.family-page .bridge-psych--split .bridge-psych__title {
  font-size: clamp(1.75rem, 2.6vw, 2.25rem) !important;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}
.family-page .bridge-psych--split p {
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.6;
  text-align: start;
  text-align-last: auto;
  hyphens: manual;
}
.bridge-psych__media { margin: 0; }
.bridge-psych__media img {
  display: block;
  width: 100%;
  height: auto;
  /* The artwork is cut out on white; multiply lets it sit on the cream. */
  mix-blend-mode: multiply;
}

/* Saturday Night. Week 1: setup copy beside the family playing (2026-10-20). */
.family-page .story-setup--split {
  max-width: none;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 56rem) {
  .family-page .story-setup--split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
.family-page .story-setup--split p {
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.6;
  text-align: start;
  text-align-last: auto;
  hyphens: manual;
}
.story-setup__media {
  margin: 0;
  border-radius: var(--radius-lg, 24px);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 20px 44px -24px rgba(26,26,26,.26);
}
.story-setup__media img { display: block; width: 100%; height: auto; aspect-ratio: 1504 / 1046; object-fit: cover; }

/* The cut-out mother and son must stand on the section's bottom edge, not
   float above it with their bodies sliced mid-air (2026-10-20). Desktop: the
   psychology section loses its bottom padding and the image is bottom-
   aligned, so the crop line IS the section edge. Phones: same, full width. */
body.family-page #psychology.section { padding-bottom: 0 !important; }
.family-page #psychology > .container > :last-child { margin-bottom: 0 !important; }
.family-page .bridge-psych--split { align-items: end; margin-bottom: 0 !important; }
.family-page .bridge-psych--split .bridge-psych__copy {
  align-self: center;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.family-page .bridge-psych__media { align-self: end; line-height: 0; }
.family-page .bridge-psych__media img { margin-bottom: -1px; }
/* Soften the two side crops (her shoulder, his sweater) into the cream so no
   straight vertical cut shows; the bottom crop is the section edge. */
.family-page .bridge-psych__media img {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 90%, transparent 100%);
}
@media (max-width: 56rem) {
  .family-page .bridge-psych--split .bridge-psych__copy { padding-bottom: 0; }
  .family-page .bridge-psych--split { gap: 1.5rem; }
}

/* One frame language across the page (2026-10-20): every photo is a single
   rounded 24px frame with the same soft shadow. The portrait cards drop the
   white mat (it read as a frame inside a frame): photo flush to the top and
   sides of the card, text below. */
.family-page .na-frame {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg, 24px);
  border: 0;
  box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 20px 44px -24px rgba(26,26,26,.26);
}
.na-frame__photo { border-radius: 0; }
.na-frame__chip { left: 1rem; top: 1rem; }
.na-frame__body { padding: 1.25rem 1.5rem 1.5rem; }

/* 02 · "How was your day?" "Good." — the cut-out mother and son in the
   page's photo frame, with the two lines as frosted question cards, the
   same treatment as the client's mother-and-son card artwork (2026-10-20). */
.rh-hwyd {
  position: relative;
  margin: 0;
  width: 100%;
  border-radius: var(--radius-lg, 24px);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 20px 44px -24px rgba(26,26,26,.26);
  container-type: inline-size;
}
.rh-hwyd img { display: block; width: 100%; height: auto; }
.family-page .rh-hwyd__card {
  position: absolute;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: .55em;
  padding: 1em 1.4em 1.15em;
  border-radius: 1.1em;
  background: rgba(238, 242, 246, .92);
  border: 1px solid rgba(200, 212, 224, .9);
  box-shadow: 0 10px 30px -18px rgba(26,26,26,.35);
  backdrop-filter: blur(6px);
  font-family: var(--text, "Figtree", sans-serif);
  font-size: clamp(.9rem, 3.4cqw, 1.5rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink, #1a1a1a);
  text-align: center;
  text-align-last: center;
}
.rh-hwyd__pill {
  padding: .3em .9em;
  border-radius: 999px;
  font-size: .62em;
  font-weight: 600;
  letter-spacing: .01em;
}
.rh-hwyd__card--parent { left: 6%; top: 9%; }
.rh-hwyd__card--parent .rh-hwyd__pill { background: #fbe3df; color: var(--coral-ink, #b8402d); }
.rh-hwyd__card--kid { right: 5%; top: 5%; min-width: 22%; }
.rh-hwyd__card--kid .rh-hwyd__pill { background: #dcefed; color: #0d736b; }

/* 03 · fewer frames (2026-10-20): the closing statement is plain text across
   the full width of the section, and the three "Your N-year-old" lines are a
   simple list with coloured markers instead of three boxed cards. */
.family-page .rh-row--stack .rh-row__after {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  margin-top: clamp(.75rem, 2vw, 1.5rem);
}
.family-page .rh-hidden { gap: .9rem; }
.family-page .rh-hidden li {
  position: relative;
  padding: 0 0 0 1.4rem;
  background: none;
  border: 0 !important;
  border-radius: 0;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
}
.family-page .rh-hidden li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--pink, #faaab1);
}
.family-page .rh-hidden li:nth-child(2)::before { background: var(--amber, #ffbd48); }
.family-page .rh-hidden li:nth-child(3)::before { background: var(--teal, #96ccca); }

/* "And with time… the pattern is set." (2026-10-20): light grey band
   (#f7f7f7, the site's pill grey) instead of black; one headline; equal
   breathing room above and below; the band meets the next section. */
body.family-page #really-happening.section { padding-bottom: 0 !important; }
.family-page .rh-pattern {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding-block: clamp(3.5rem, 6vw, 5rem);
  background: var(--pill, #f7f7f7);
  color: var(--ink, #1a1a1a);
}
.family-page .rh-pattern .rh-pattern__title {
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink, #1a1a1a);
  text-align: center;
}
.rh-pattern__title span { color: var(--ink, #1a1a1a); }
.family-page .rh-pattern .rh-pattern__eq span {
  border-color: rgba(26,26,26,.18);
  background: #fff;
  color: var(--ink, #1a1a1a);
}
.family-page .rh-pattern .rh-pattern__eq svg { color: var(--coral-deep, #d9503f); }
.family-page .rh-pattern .rh-pattern__text { color: var(--body, #302f2e); }
.family-page .rh-pattern .rh-pattern__turn { color: var(--coral-deep, #d9503f); }

/* "This isn't magic. It's psychology." is its own white section after the
   cream psychology section (2026-10-20), so the two read as separate beats.
   The cut-out image now sits on white (its own background) and stands on
   this section's bottom edge. */
body.family-page #psychology.section { padding-bottom: clamp(3rem, 5vw, 4.5rem) !important; }
body.family-page #psychology-note.section {
  padding-top: clamp(3.5rem, 6vw, 5rem) !important;
  padding-bottom: 0 !important;
  background: #fff;
}
.family-page #psychology-note > .container > :last-child { margin-bottom: 0 !important; }
.family-page #psychology-note .bridge-psych--split { margin-top: 0; }

/* Section rhythm (2026-10-20): every section after the psychology block
   alternates cream / white so no two neighbours share a background. */
body.family-page #psychology-note.section,
body.family-page #reviews.section,
body.family-page #questions.section,
body.family-page #never-gets-old.section,
body.family-page #worth.section,
body.family-page #growing-up.section,
body.family-page #three-months.section { background: #fff !important; }
body.family-page #psychology.section,
body.family-page #story.section,
body.family-page #features.section,
body.family-page #age-tiers.section,
body.family-page #faq-objections.section,
body.family-page #guarantee.section,
body.family-page #pricing.section { background: var(--cream, #fef8ec) !important; }
body.family-page .trust-strip { background: var(--cream, #fef8ec); }
/* The tier panel + "deck trio" sit in a wrapper right after #age-tiers. */
body.family-page #age-tiers + .container { background: var(--cream, #fef8ec); box-shadow: 0 0 0 100vmax var(--cream, #fef8ec); clip-path: inset(0 -100vmax); }

/* Keep both question cards whole (2026-10-20): the side fade now applies
   only to the lower part of the image (shoulders), never to the cards. */
.family-page .bridge-psych__media img {
  -webkit-mask-image:
    linear-gradient(#000, #000),
    linear-gradient(to right, transparent 0, #000 12%, #000 90%, transparent 100%);
  -webkit-mask-size: 100% 57%, 100% 46%;
  -webkit-mask-position: top, bottom;
  -webkit-mask-repeat: no-repeat;
          mask-image:
    linear-gradient(#000, #000),
    linear-gradient(to right, transparent 0, #000 12%, #000 90%, transparent 100%);
          mask-size: 100% 57%, 100% 46%;
          mask-position: top, bottom;
          mask-repeat: no-repeat;
}

/* ---------- Saturday Night · the three spins (2026-10-20) ----------
   No cards. The client's phone-and-wheel artwork on the left (transparent,
   no frame); on the right the three spins as a vertical sequence, each
   marked by a mini spin-wheel dial in the app's segment colours, joined by
   a thin line. Notes are plain coloured text, not boxes. */
.spin-story {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
  margin: clamp(2rem, 4vw, 3.5rem) 0;
}
@media (min-width: 60rem) {
  .spin-story { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .spin-story__art { position: sticky; top: calc(var(--nav-h, 5.25rem) + 2rem); align-self: start; }
}
.spin-story__art { margin: 0; }
.spin-story__art img { display: block; width: 100%; height: auto; }
.spin-story__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); position: relative; }
.spin-story__steps::before {
  content: ""; position: absolute; left: 1.6rem; top: 1.6rem; bottom: 1.6rem; width: 2px;
  background: repeating-linear-gradient(to bottom, rgba(26,26,26,.16) 0 6px, transparent 6px 12px);
}
.spin-step { position: relative; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.spin-step__dial {
  position: relative; z-index: 1; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: conic-gradient(#f06858 0 60deg, #ffbd48 60deg 120deg, #96ccca 120deg 180deg, #94b7d5 180deg 240deg, #faaab1 240deg 300deg, #c0cb6d 300deg 360deg);
  display: grid; place-items: center;
  box-shadow: 0 0 0 4px var(--cream, #fef8ec), 0 6px 16px -8px rgba(26,26,26,.35);
}
.spin-step__dial b {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #fff; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--ink, #1a1a1a);
}
.spin-step--coral .spin-step__dial { transform: rotate(-30deg); }
.spin-step--coral .spin-step__dial b { transform: rotate(30deg); }
.spin-step--amber .spin-step__dial { transform: rotate(-90deg); }
.spin-step--amber .spin-step__dial b { transform: rotate(90deg); }
.spin-step--teal .spin-step__dial { transform: rotate(-150deg); }
.spin-step--teal .spin-step__dial b { transform: rotate(150deg); }
.family-page .spin-step__copy p { margin: 0; text-align: start; text-align-last: auto; }
.family-page .spin-step__label { font-size: .8125rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .2rem !important; }
.spin-step--coral .spin-step__label { color: var(--coral-deep, #d9503f); }
.spin-step--amber .spin-step__label { color: #a46a00; }
.spin-step--teal .spin-step__label { color: #0d736b; }
.family-page .spin-step__lead { font-size: .9375rem; color: var(--muted, #6e6b67); margin-bottom: .35rem !important; }
.family-page .spin-step__q { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.25; color: var(--ink, #1a1a1a); margin-bottom: .7rem !important; }
.spin-step__answers { display: grid; gap: .3rem; margin-bottom: .7rem; }
.family-page .spin-step__answers p { font-size: 1rem; line-height: 1.45; color: var(--body, #302f2e); }
.spin-step__answers strong { color: var(--ink, #1a1a1a); }
.family-page .spin-step__note { font-weight: 700; font-size: .975rem; line-height: 1.4; }
.spin-step--coral .spin-step__note { color: var(--coral-deep, #d9503f); }
.spin-step--amber .spin-step__note { color: #a46a00; }
.spin-step--teal .spin-step__note { color: #0d736b; }
/* The artwork crops two cards at its left and right edges; fade those edges
   so nothing ends on a hard cut. */
.spin-story__art img {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
}

/* Olivia's line runs the full width of the block; no rule above
   "Emma's heart stopped." (2026-10-20). */
.family-page .story-unlock__quote { max-width: none; text-wrap: balance; }
.story-unlock__grid { border-top: 0; padding-top: 0; }
.family-page .story-unlock__quote { text-wrap: pretty; }
@media (max-width: 56rem) { .br-desk { display: none; } }

/* Three Months Later (2026-10-20): no card. Text left (headline, ticked
   rows like the client's mockup, closing line), the client's sofa-and-app
   artwork right, blended onto the section background. */
.tm3 {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 60rem) { .tm3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.tm3__title {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  letter-spacing: -.02em;
  color: var(--ink, #1a1a1a);
}
.tm3__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .65rem; }
.family-page .tm3__list li {
  display: flex; align-items: center; gap: .9rem;
  padding: .75rem 1.1rem;
  border-radius: 16px;
  background: rgba(255,255,255,.7);
  font-size: 1.0625rem; line-height: 1.4; color: var(--body, #302f2e);
  text-align: start; text-align-last: auto;
}
.tm3-check {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--green, #c0cb6d); color: #fff;
}
.tm3-check svg { width: 1rem; height: 1rem; }
.family-page .tm3__close {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink, #1a1a1a);
  text-align: start;
}
.tm3__close strong { color: var(--coral-deep, #d9503f); font-weight: 800; }
.tm3__art { margin: 0; }
.tm3__art img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

/* Reviews in one row that scrolls left/right (2026-10-20). */
.family-page .rv-track {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  padding: .5rem 0 1.25rem;
  scrollbar-width: none;
}
.family-page .rv-track::-webkit-scrollbar { display: none; }
.family-page .rv-track .review-card {
  flex: 0 0 clamp(17rem, 30%, 23rem);
  scroll-snap-align: start;
}
.rv-ctrl { display: flex; justify-content: center; gap: .6rem; margin-top: .5rem; }
.rv-ctrl button {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--line, rgba(26,26,26,.1)); background: #fff; color: var(--ink, #1a1a1a);
  font-size: 1.15rem; cursor: pointer; box-shadow: 0 2px 8px rgba(26,26,26,.06);
}
.rv-ctrl button:disabled { opacity: .35; cursor: default; }
/* The peeking next card fades out instead of ending on a hard cut. */
.family-page .rv-track {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 90%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 90%, transparent 100%);
}

/* What you get (2026-10-20): list + buy block side by side, store badges
   instead of "Download on iPhone or Android", and the client's App Features
   artwork full width at the bottom, its phones standing on the section edge. */
body.family-page #features.section { padding-bottom: 0 !important; }
.feat2 { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 60rem) { .feat2 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.family-page .feat2__list { grid-template-columns: 1fr !important; gap: .6rem !important; }
@media (min-width: 40rem) { .family-page .feat2__list { grid-template-columns: 1fr 1fr !important; column-gap: 2rem !important; } }
.feat2__list strong { font-weight: 600 !important; }
.feat2__buy { display: grid; justify-items: start; gap: .9rem; }
.family-page .feat2__buy .features-offer__tag { margin: 0; }
.family-page .feat2__buy .features-offer__price { margin: 0; }
.family-page .feat2__dl { margin: .4rem 0 0; font-size: .9375rem; color: var(--muted, #6e6b67); }
.feat2__badges { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.feat2__art { margin: clamp(2.5rem, 5vw, 4rem) 0 0; line-height: 0; }
.feat2__art img { display: block; width: 100%; height: auto; margin-bottom: -1px; }
.feat2__art { margin-top: 0 !important; }

/* 1,600+ questions (2026-10-20): the orange bubble badge was a one-off.
   Now the Pick One speech-bubble mark with the number set like the page's
   3.2 million stat (Gabarito 800, coral). */
.depth-mark { display: grid; justify-items: center; align-content: center; gap: .25rem; text-align: center; }
.depth-mark__logo { width: clamp(5rem, 8vw, 7rem); height: auto; margin-bottom: .75rem; }
.family-page .depth-mark__num {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 8vw, 6.5rem);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--coral, #f06858);
  text-align: center;
}
.family-page .depth-mark__unit {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--coral, #f06858);
  text-align: center;
}

/* ---------- More product, fewer repeated pills (2026-10-20) ----------
   1600+: the light/medium/deep bar becomes three real app screens.
   Works for every age: the tab boxes and flip cards become three phones
   (the site's own champagne device frame) showing one question per age. */
@media (min-width: 60rem) {
  .depth-grid { max-width: none; grid-template-columns: 15rem minmax(0, 1fr) minmax(0, 1.05fr); }
}
.depth-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; align-items: end; }
.depth-phone { margin: 0; display: grid; justify-items: center; gap: .6rem; }
.depth-phone img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(26,26,26,.16)); }
.depth-phone--medium { transform: translateY(-1.25rem); }
.depth-phone figcaption { font-weight: 800; font-size: .875rem; letter-spacing: .02em; }
.depth-phone--light figcaption { color: #4d6b1f; }
.depth-phone--medium figcaption { color: #a46a00; }
.depth-phone--deep figcaption { color: #a8323e; }

.age-phones { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 3rem); max-width: 60rem; margin: 0 auto; }
@media (min-width: 44rem) { .age-phones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.age-phone { margin: 0; display: grid; justify-items: center; gap: 1rem; }
.age-phone figcaption { display: grid; justify-items: center; gap: .15rem; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--ink, #1a1a1a); }
.age-phone figcaption span { font-family: var(--font-body); font-size: .8125rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.age-phone--pink figcaption span { color: var(--coral-ink, #b8402d); }
.age-phone--amber figcaption span { color: #a46a00; }
.age-phone--teal figcaption span { color: #0d736b; }
.age-phone--amber .app-phone { transform: translateY(-1.5rem); }

/* An app screen drawn in HTML behind the site's transparent phone frame. */
.app-phone { position: relative; width: min(100%, 15.5rem); aspect-ratio: 796 / 1576; container-type: inline-size; filter: drop-shadow(0 22px 30px rgba(26,26,26,.18)); }
.app-phone__frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.app-phone__screen {
  position: absolute; z-index: 1; left: 4%; right: 4%; top: 2.2%; bottom: 2.2%;
  border-radius: 13cqw;
  background: linear-gradient(180deg, #f3f7f8 0%, #e9f1f3 100%);
  display: flex; flex-direction: column; align-items: center;
  padding: 16cqw 7cqw 8cqw; gap: 4.5cqw; overflow: hidden;
  font-family: var(--font-body);
}
.family-page .app-phone__bar { margin: 0; font-weight: 700; font-size: 5cqw; color: var(--ink, #1a1a1a); text-align: center; }
.app-phone__card { width: 100%; background: #fff; border-radius: 6cqw; padding: 5cqw 5cqw 6cqw; display: grid; justify-items: center; gap: 3cqw; box-shadow: 0 2cqw 6cqw rgba(26,26,26,.06); }
.app-phone__pill { padding: 1cqw 4cqw; border-radius: 99px; font-size: 3.4cqw; background: #e2f2ee; color: #3b8a7a; }
.age-phone--amber .app-phone__pill { background: #fdf0d8; color: #a46a00; }
.family-page .app-phone__q { margin: 0; text-align: center; font-weight: 600; font-size: 6cqw; line-height: 1.25; color: var(--ink, #1a1a1a); text-wrap: balance; }
.family-page .app-phone__hint { margin: 0; font-size: 3.3cqw; color: var(--muted, #6e6b67); text-align: center; }
.app-phone__wheel { width: 34cqw; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#f06858 0 60deg, #ffbd48 60deg 120deg, #96ccca 120deg 180deg, #94b7d5 180deg 240deg, #b39ddb 240deg 300deg, #faaab1 300deg 360deg); }
.app-phone__wheel i { width: 74%; aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.app-phone__wheel i::after { content: ""; width: 34%; aspect-ratio: 1; border-radius: 50%; background: #f06858; }
.app-phone__btn { width: 100%; padding: 2.6cqw 0; border-radius: 3cqw; background: #ffbd48; color: #fff; font-size: 3.6cqw; font-weight: 600; text-align: center; }
/* Match the real app screen's proportions (device-q-*.webp). */
.app-phone__screen { padding: 17cqw 8cqw 8cqw; gap: 0; }
.family-page .app-phone__bar { position: relative; width: 100%; font-size: 5.2cqw; font-weight: 800; color: #24313a; }
.app-phone__bar span { position: absolute; left: 0; top: -.15em; font-size: 1.5em; font-weight: 400; }
.app-phone__card { margin-top: 18cqw; border-radius: 6cqw; padding: 6cqw 5cqw 7cqw; gap: 4cqw; box-shadow: 0 3cqw 8cqw rgba(36,49,58,.07); }
.app-phone__pill { font-size: 3.6cqw; padding: 1.4cqw 5cqw; }
.family-page .app-phone__q { font-weight: 500; font-size: 5.6cqw; color: #24313a; }
.family-page .app-phone__hint { margin-top: auto; font-size: 3.7cqw; font-weight: 700; color: #6b7378; }
.app-phone__wheel { width: 48cqw; margin: 3cqw 0 5cqw;
  background: conic-gradient(#ffbd48 0 36deg, #f7c886 36deg 70deg, #ec6a5a 70deg 108deg, #f1aab2 108deg 142deg, #efb9c0 142deg 178deg, #a8cfc8 178deg 216deg, #96aec6 216deg 252deg, #ae9fd6 252deg 288deg, #cf9bd8 288deg 322deg, #a8d3c9 322deg 360deg); }
.app-phone__wheel i { width: 78%; }
.app-phone__wheel i::after { content: none; }
.app-phone__wheel img { width: 46%; height: auto; }
.app-phone__btn { padding: 3.6cqw 0; font-size: 4.3cqw; border-radius: 4cqw; }
.app-phone__btn + .app-phone__btn { margin-top: 3cqw; }
.depth-phone figcaption, .age-phone figcaption { text-align: center; }
/* Two of the app screenshots carry a baked grey shadow box; clip to the phone body. */
.depth-phone img { clip-path: inset(1.3% 2.7% 1.4% 2.7% round 10% / 5%); }
/* Phones: one row you swipe on small screens, not three tall phones stacked. */
@media (max-width: 43.99rem) {
  .age-phones { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1.75rem 19% 1rem; margin-inline: calc(-1 * clamp(1.25rem, 4vw, 2.5rem)); scrollbar-width: none; }
  .age-phones::-webkit-scrollbar { display: none; }
  .age-phone { scroll-snap-align: center; }
}
/* 1600+: the client's own swipe visual instead of three phones. Same single frame as everywhere. */
.depth-shot { margin: 0; border-radius: var(--radius-lg, 24px); overflow: hidden; box-shadow: 0 24px 48px -30px rgba(26,26,26,.35); }
.depth-shot img { display: block; width: 100%; height: auto; }
@media (min-width: 60rem) {
  .depth-grid { grid-template-columns: 12rem minmax(0, .95fr) minmax(0, 1.3fr); gap: clamp(2rem, 3.5vw, 3.5rem); align-items: center; }
}
@media (max-width: 59.99rem) { .depth-shot { margin-top: 1rem; } }
@media (min-width: 60rem) {
  .depth-grid { grid-template-columns: 15rem minmax(0, 1fr) minmax(0, 1fr); }
}
.depth-shot { max-width: 30rem; justify-self: center; width: 100%; }

/* Works for every age: the app in use, one family per age group (replaces the drawn phones). */
.age-uses { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 2.5vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .age-uses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.age-use__photo { margin: 0 0 1.1rem; border-radius: var(--radius-lg, 24px); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 24px 48px -30px rgba(26,26,26,.35); }
.age-use__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.family-page .age-use__age { margin: 0; font-size: .8125rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.age-use--pink .age-use__age { color: var(--coral-ink, #b8402d); }
.age-use--amber .age-use__age { color: #a46a00; }
.age-use--teal .age-use__age { color: #0d736b; }
.family-page .age-use__grp { margin: .2rem 0 .5rem; font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; color: var(--ink, #1a1a1a); }
.family-page .age-use__q { margin: 0; font-size: 1.0625rem; line-height: 1.45; color: var(--body, #302f2e); text-wrap: pretty; }
.family-page .age-use :is(p) { text-align: left; hyphens: manual; }

/* ---------- Fewer frames (2026-10-20) ----------
   The three white trio cards become one photo + plain copy; Never Gets Old and the
   bonus lose their cards and read as type on the page. */
.anywhere { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; margin-top: clamp(4rem, 7vw, 6rem); }
@media (min-width: 56rem) { .anywhere { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.anywhere__photo { margin: 0; border-radius: var(--radius-lg, 24px); overflow: hidden; box-shadow: 0 24px 48px -30px rgba(26,26,26,.35); }
.anywhere__photo img { display: block; width: 100%; height: auto; }
.family-page .anywhere__title { margin: 0 0 1rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.1; color: var(--ink, #1a1a1a); text-align: left; }
.family-page .anywhere__title--sub { margin-top: clamp(2rem, 3.5vw, 2.75rem); font-size: clamp(1.375rem, 2vw, 1.625rem); }
.anywhere__places { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; }
.anywhere__places li { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.9vw, 1.5rem); color: var(--body, #302f2e); }
.anywhere__places li::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--c); }
.anywhere__zero { margin: 0; }

.ngo2 { display: grid; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
@media (min-width: 56rem) { .ngo2 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.family-page .ngo2 .section-title { text-align: left; margin: 0 0 .5rem; }
.family-page .ngo2__lede { margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); font-size: 1.125rem; color: var(--muted, #6e6b67); text-align: left; }
.family-page .ngo2__q { margin: 0 0 1.5rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; color: var(--ink, #1a1a1a); text-align: left; }
.ngo2__ages { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); color: var(--coral, #f06858); }
.family-page .ngo2__ages p { margin: 0; display: grid; text-align: left; }
.ngo2__ages span { font-size: .875rem; font-weight: 700; color: var(--muted, #6e6b67); }
.ngo2__ages b { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.5rem, 6vw, 5rem); line-height: .95; letter-spacing: -.03em; }
.ngo2__arrow { width: clamp(3rem, 6vw, 4.5rem); height: auto; margin-top: 1.25rem; }
.family-page .ngo2__result { margin: 1.5rem 0 0; font-size: 1.125rem; font-weight: 700; color: var(--ink, #1a1a1a); text-align: left; }
.ngo2__bonus { padding-top: .5rem; }
.family-page .ngo2__kicker { display: block; margin: 0 0 .5rem; text-align: left; }
.family-page .ngo2__btitle { margin: 0 0 1.25rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--ink, #1a1a1a); text-align: left; }
.ngo2__occ { list-style: none; margin: 0; padding: 0; }
.ngo2__occ li { display: flex; align-items: center; gap: .9rem; padding: 1rem 0; border-top: 1px solid rgba(26,26,26,.1); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.5rem); color: var(--ink, #1a1a1a); }
.ngo2__occ li:last-child { border-bottom: 1px solid rgba(26,26,26,.1); }
.ngo2__occ li::before { content: ""; flex: none; width: .75rem; height: .75rem; border-radius: 50%; background: var(--c); }
.ngo2__occ span { font-weight: 500; color: var(--muted, #6e6b67); }
.family-page .anywhere__zero li { font-size: 1.125rem; }

/* Growing up: the clean forest photo with the client's swipe-card stack
   (same cards as questions-swipe-client: white, soft shadow, tinted pill),
   instead of nine baked-in cards and sparkle trails. */
.grow-q { position: relative; container-type: inline-size; }
.grow-q__stack { position: absolute; left: 4%; top: 11%; width: 40%; aspect-ratio: 1.55; }
.family-page .grow-q__card {
  position: absolute; margin: 0; display: grid; justify-items: center; align-content: center; gap: .7em;
  padding: 1.1em 1.2em 1.25em; border-radius: 1.15em; background: #fff;
  box-shadow: 0 1.2em 2.4em -1.2em rgba(26,26,26,.45);
  font-family: var(--text, "Figtree", sans-serif); font-weight: 500; font-size: clamp(.72rem, 2.35cqw, 1.05rem); line-height: 1.3;
  color: #2b2b2b; text-align: center; text-wrap: balance;
}
.grow-q__card--front { inset: 8% 10% 8% 10%; z-index: 2; font-size: clamp(.8rem, 2.75cqw, 1.25rem) !important; }
.grow-q__card--back { width: 58%; top: 20%; bottom: 20%; color: rgba(43,43,43,.75) !important; }
.grow-q__card--l { left: -12%; }
.grow-q__card--r { right: -12%; }
.grow-q__pill { padding: .35em 1em; border-radius: 999px; font-size: .72em; font-weight: 600; background: #fbe3df; color: var(--coral-ink, #b8402d); }
.grow-q__pill--teal { background: #dcefed; color: #0d736b; }
.grow-q__pill--amber { background: #fdf0d8; color: #a46a00; }
/* Growing up, editorial layout: full-width headline, the photo as a wide banner,
   then the copy in two columns under it. */
.family-page #growing-up .section-header .section-title { max-width: none; text-align: center; }
.growing-media.grow-q { margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.growing-media.grow-q img { aspect-ratio: 2 / 1; object-position: 50% 45%; }
.grow-q__stack { left: 7%; top: 16%; width: 30%; }
.grow2 { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 56rem) { .grow2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.family-page .grow2 p, .family-page .grow2 li { text-align: left; hyphens: manual; }
.family-page .grow2__why p { margin: 0 0 1rem; font-size: 1.125rem; line-height: 1.6; color: var(--body, #302f2e); }
.family-page .grow2__why .growing-pause { margin: 1.25rem 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; color: var(--coral, #f06858); }
.family-page .grow2__can .growing-can { margin: 0 0 1.5rem; padding: 0; border: 0; }
.family-page .grow2__can .growing-can li { font-size: 1.125rem; line-height: 1.5; padding: .9rem 0; border-bottom: 1px solid rgba(26,26,26,.1); margin: 0; }
.family-page .grow2__can .growing-can li:first-child { padding-top: 0; }
.family-page .grow2__can .growing-tonight { margin: 0 0 1.5rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--ink, #1a1a1a); }
@media (max-width: 43.99rem) {
  .growing-media.grow-q img { aspect-ratio: 4 / 3; object-position: 40% 50%; }
  .grow-q__stack { left: 5%; top: 6%; width: 48%; }
}
@media (min-width: 44rem) { .grow-q__stack { left: 5%; top: 13%; width: 25%; } }
body.family-page #growing-up .grow2__why p.growing-pause { margin: 1.5rem 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.75rem) !important; line-height: 1.05; letter-spacing: -.01em; color: var(--coral, #f06858); }

/* After you order: four real app screens (the client's store shots) in a row,
   number + step as plain text under each. No white step cards. */
.after-order { max-width: none; margin-top: clamp(4rem, 7vw, 6rem); }
.family-page .after-order__title { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 800; }
.after-order__steps--shots { gap: clamp(1rem, 2vw, 1.75rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .after-order__steps--shots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.family-page .after-order__steps--shots li { padding: 0; border: 0; border-radius: 0; background: none; gap: 1rem; }
.after-order__shot { margin: 0; border-radius: var(--radius-lg, 24px); overflow: hidden; aspect-ratio: 560 / 640; box-shadow: 0 24px 48px -30px rgba(26,26,26,.35); }
.after-order__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .5s ease; }
.after-order__steps--shots li:hover .after-order__shot img { transform: translateY(-3%); }
.after-order__txt { display: flex; gap: .75rem; align-items: flex-start; }
.after-order__txt .after-order__n { flex: none; margin: 0; }
.family-page .after-order__t { margin: .2rem 0 0; display: grid; gap: .15rem; text-align: left; }
.family-page .after-order__t strong { font-family: var(--font-display); font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.25; }
.after-order__sub { font-size: .9375rem; color: var(--muted, #6e6b67); }

/* You Can Have This Too: the 365 page's "Just one question." layout
   (phone + two white bubbles beside it, big headline, store badges). */
#have-this-too.just-one-q { background: #fff; padding-block: clamp(4.5rem, 8vw, 7rem); }
.family-page .fe-have .just-one-q__content h2 { text-align: left; font-size: clamp(2.4rem, 4.2vw, 3.6rem); }
.family-page .fe-have .just-one-q__content p { text-align: left; font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin: 0 0 2rem; }
.fe-have__tonight { color: var(--coral-ink, #b8402d); font-weight: 800; }
.fe-have .store-badges { margin-top: 1.5rem; }
.family-page .fe-have .just-one-q__bubble { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; text-align: left; }
@media (max-width: 59.99rem) { .family-page .fe-have .just-one-q__content { text-align: center; } .family-page .fe-have .just-one-q__content :is(h2, p) { text-align: center; } .fe-have .store-badges { justify-content: center; } }
@media (min-width: 48.01rem) {
  .fe-have .just-one-q__bubble { white-space: nowrap; max-width: none; }
  .fe-have .just-one-q__bubble--top { top: 9%; right: auto; left: 80%; }
  .fe-have .just-one-q__bubble--bottom { bottom: 7%; left: auto; right: 82%; }
}
@media (max-width: 48rem) { .fe-have .just-one-q__stage { max-width: 20rem; } .fe-have .just-one-q__device { max-width: 15rem; margin-inline: auto; } }

/* Questions for kids coming out of the phone: the homepage's phone-in-the-middle
   stream, split in two so every card slides out from behind the phone, left
   cards travelling left and right cards travelling right. Grey band (the
   approved #f7f7f7) between the white 1600+ section and the cream ages. */
body.family-page #kid-questions.section { background: #f7f7f7; padding-bottom: clamp(3.5rem, 6vw, 5rem); }
.kidq__stage { position: relative; height: clamp(26rem, 40vw, 34rem); margin-top: clamp(1rem, 2vw, 2rem); }
.kidq__half { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; display: flex; align-items: center; }
.kidq__half--l { left: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%); mask-image: linear-gradient(90deg, transparent 0, #000 12%); }
.kidq__half--r { right: 0; -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 12%); mask-image: linear-gradient(270deg, transparent 0, #000 12%); }
.kidq__track { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; width: max-content; will-change: transform; }
.kidq__half--l .kidq__track { animation: kidq-left 60s linear infinite; }
.kidq__half--r .kidq__track { animation: kidq-right 60s linear infinite; }
.kidq__stage:hover .kidq__track { animation-play-state: paused; }
@keyframes kidq-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes kidq-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.kidq__card { flex: none; width: 17rem; margin-right: 1.25rem; padding: 1.4rem 1.4rem 1.6rem; display: grid; justify-items: center; gap: .85rem; background: #fff; border-radius: 1.25rem; box-shadow: 0 18px 36px -22px rgba(26,26,26,.32); transform: translateY(-2.25rem); }
.kidq__card--low { transform: translateY(2.25rem); }
.family-page .kidq__card p { margin: 0; font-family: var(--text, "Figtree", sans-serif); font-weight: 500; font-size: 1.0625rem; line-height: 1.4; color: #2b2b2b; text-align: center; text-wrap: balance; }
.kidq__pill { padding: .3em 1em; border-radius: 999px; font-size: .8125rem; font-weight: 600; }
.kidq__pill--teal { background: #dcefed; color: #0d736b; }
.kidq__pill--blue { background: #e1ebf7; color: #2f5f96; }
.kidq__pill--amber { background: #fdf0d8; color: #a46a00; }
.kidq__pill--coral { background: #fbe3df; color: var(--coral-ink, #b8402d); }
.kidq__pill--pink { background: #fbe6ea; color: #a8323e; }
.kidq__pill--grey { background: #e6ecf2; color: #4a6077; }
.kidq__pill--purple { background: #efe7f8; color: #6b4a9a; }
.kidq__phone { position: absolute; left: 50%; top: 50%; height: 100%; width: auto; transform: translate(-50%, -50%); z-index: 3; filter: drop-shadow(0 30px 50px rgba(26,26,26,.22)); pointer-events: none; }
@media (max-width: 48rem) {
  .kidq__stage { height: 24rem; }
  .kidq__card { width: 13rem; padding: 1.1rem 1.1rem 1.25rem; }
  .family-page .kidq__card p { font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) { .kidq__track { animation: none !important; } }
/* Keep the cream/white alternation: Three Months (white) → You Can Have This Too (cream, as on the 365 page) → trust strip (white). */
#have-this-too.just-one-q { background: var(--cream, #fef8ec); }
body.family-page .trust-strip { background: #fff; }
/* Phone width: no room beside the phone, so the phone sits on top and the two
   streams run full width underneath it, one each way. */
@media (max-width: 48rem) {
  .kidq__stage { height: auto; display: grid; gap: 1rem; }
  .kidq__phone { position: relative; left: auto; top: auto; transform: none; height: 22rem; justify-self: center; margin-bottom: -5rem; z-index: 3; }
  .kidq__half { position: relative; width: 100%; padding-block: .75rem; }
  .kidq__half--l { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
  .kidq__half--r { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
  .kidq__card, .kidq__card--low { transform: none; }
}
@media (max-width: 48rem) { .kidq__phone { order: -1; height: 20rem; margin-bottom: -3.5rem; } }
@media (max-width: 48rem) { .kidq__half { z-index: 1; } .kidq__phone { z-index: 5; } }

/* ---------- Headline rule (2026-10-20, all sections) ----------
   Headlines, pre-headlines, sub-headlines and ledes fill the width of their
   section or column. No narrow max-width caps, and no `balance` wrapping
   (it halves a two-line headline and leaves the right side empty). */
.family-page :is(h1, h2, h3, .section-title, .section-subtitle, .fe-kicker,
  .hero-fe__kicker, .hero-fe__title, .hero-fe__subtitle, .familiar-lede) {
  text-wrap: pretty;
}
.family-page :is(.section-subtitle, .hero-fe__kicker, .hero-fe__subtitle, .familiar-lede, .section-header .section-title) {
  max-width: none !important;
}
.family-page .hero-fe__kicker { display: block; }

/* 1600+: the headline spans the copy and the image, one line. */
@media (min-width: 60rem) {
  .depth-grid { grid-template-columns: 15rem minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: 1.25rem; }
  .depth-mark { grid-row: 1 / span 2; }
  .family-page .depth-title { grid-column: 2 / 4; grid-row: 1; margin: 0; text-align: left; max-width: none; white-space: nowrap; }
  .depth-copy { grid-column: 2; grid-row: 2; }
  .depth-shot { grid-column: 3; grid-row: 2; }
}
@media (max-width: 59.99rem) { .family-page .depth-title { text-align: center; } }

/* You Can Have This Too: wider text column so the headline holds one line. */
@media (min-width: 60rem) {
  .fe-have .just-one-q__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .family-page .fe-have .just-one-q__content h2 { font-size: clamp(2.25rem, 3.4vw, 3rem); white-space: nowrap; }
}
body.family-page section .section-header p.section-subtitle.section-subtitle { max-width: none !important; }
.family-page :is(.hero-fe__subtitle, .guarantee-promise) { text-align: left !important; hyphens: manual; }
.family-page :is(.familiar-verdict, .trust-strip__join) { max-width: none !important; text-wrap: pretty; }
/* "How was your day?" uses the same white conversation bubbles as the dinner
   slides (one bubble style across the page). */
.rh-hwyd .dn-b { white-space: nowrap; max-width: none; }
/* Same beige ground as the dinner photos so the white bubbles read the same way. */
.family-page .rh-hwyd { background: #f3ebdc; }
.rh-hwyd img { mix-blend-mode: multiply; }

/* Row 01 crosses: the same coral square X as "You've tried". */
.family-page .rh-x-list { gap: .6rem; }
.family-page .rh-x-list li { align-items: center; gap: .85rem; }
.rh-x-list .want-tried__box svg { width: 1.15rem; height: 1.15rem; margin: 0; color: #fff; }

/* Row 03 follows rows 01 and 02: copy on one side, photo on the other
   (01 text|photo, 02 photo|text, 03 text|photo). The closing statement
   stays full width underneath. */
@media (min-width: 58rem) {
  .rh-row--stack.rh-row--m3 { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
}
.family-page .rh-row--m3 .rh-hidden { margin: 1.25rem 0 0; }

/* Pattern band in Pick One Coral (#F06858, brand palette), all type centred.
   White headline and statements at large sizes/weights so they clear the
   3:1 large-text contrast floor on coral; pills stay white with ink text. */
body.family-page .rh-pattern { background: #f06858; padding-block: clamp(3.5rem, 6vw, 5rem); text-align: center; }
body.family-page .rh-pattern .container > * { margin-inline: auto; text-align: center; max-width: none; }
body.family-page .rh-pattern__title,
body.family-page .rh-pattern__title span { color: #fff !important; }
body.family-page .rh-pattern__eq { justify-content: center; }
body.family-page .rh-pattern__eq span { background: #fff; border: 0; color: var(--ink, #1a1a1a); box-shadow: 0 10px 24px -14px rgba(120, 30, 20, .45); }
body.family-page .rh-pattern__eq svg { color: #fff; }
body.family-page .rh-pattern__text { color: #fff !important; font-size: 1.25rem !important; font-weight: 700; }
body.family-page .rh-pattern__turn { color: #fff !important; }
body.family-page .rh-pattern__eq svg { color: #fff !important; stroke: #fff; opacity: 1; width: 1.5rem; height: 1.5rem; }

/* All red/coral text on the page uses Pick One Coral #F06858 (brand palette),
   replacing the darker coral-deep #D9503F and coral-ink #B8402D (2026-10-20). */
body.family-page :is(#site-nav a.active, .hero-fe__card-tag, .dn-reflect__quote, .qa-card__arrow, .qa-card__a,
  .fe-kicker, .rh-row__payoff em, .rh-after__lead span, .bridge-chip--ask, .bridge-result--down, .bridge-result i,
  .bridge-same span, .spin-step--coral .spin-step__label, .spin-step--coral .spin-step__note, .story-unlock__quote, .tm3__close strong,
  .kidq__pill--coral, .age-use--pink .age-use__age, .objection-ages span, .worth-receipt__price, .worth-receipt__price small,
  .worth-priceless__ask, .guarantee-close span, .grow-q__pill:not(.grow-q__pill--teal):not(.grow-q__pill--amber), .growing-pause, .growing-can strong,
  .tm-col__know, .fe-have__tonight, .trust-strip__help a, .footer__head, .rh-row__num, .depth-mark__num, .depth-mark__unit,
  .na-stat__num) {
  color: #f06858 !important;
}
body.family-page .kidq__pill--pink { color: #f06858 !important; }

/* Saturday night spins: the clean spin-wheel phone, 25% larger than the old
   artwork (it bleeds 25% into the left gutter), with the three questions as
   live question cards in the swipe-card style (white card, tinted pill). */
.spin-art { position: relative; aspect-ratio: 4 / 3; }
.spin-story__art.spin-art img { -webkit-mask-image: none; mask-image: none; }
.spin-art__phone { position: absolute; left: 50%; top: 0; height: 100%; width: auto !important; transform: translateX(-50%); filter: drop-shadow(0 30px 40px rgba(26,26,26,.18)); }
@media (min-width: 60rem) {
  .spin-story__art.spin-art { width: 125%; margin-left: -25%; }
}
.family-page .spin-art__card {
  position: absolute; z-index: 2; margin: 0; width: min(15.5rem, 36%);
  display: grid; justify-items: center; gap: .6rem; padding: 1.1rem 1.15rem 1.25rem;
  background: #fff; border-radius: 1.15rem; box-shadow: 0 22px 40px -22px rgba(26,26,26,.4);
  font-family: var(--text, "Figtree", sans-serif); font-weight: 500; font-size: 1rem; line-height: 1.35;
  color: #2b2b2b; text-align: center; text-wrap: balance;
}
.spin-art__card--1 { left: 2%; top: 12%; transform: rotate(-5deg); }
.spin-art__card--2 { right: 0; top: 34%; transform: rotate(4deg); }
.spin-art__card--3 { left: 6%; bottom: 8%; transform: rotate(3deg); }
.spin-art__pill { padding: .28em .95em; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.spin-art__pill--purple { background: #efe7f8; color: #6b4a9a; }
.spin-art__pill--teal { background: #dcefed; color: #0d736b; }
.spin-art__pill--amber { background: #fdf0d8; color: #a46a00; }
@media (max-width: 59.99rem) {
  .spin-art { aspect-ratio: 1 / 1; }
  .family-page .spin-art__card { width: 44%; font-size: .875rem; padding: .85rem .9rem 1rem; }
}
.spin-story__art.spin-art img.spin-art__phone { position: absolute; left: 50%; top: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); }
@media (min-width: 60rem) {
  .spin-story__art.spin-art { width: calc(100% + 9rem); margin-left: -6rem; }
}
@media (max-width: 59.99rem) {
  .spin-art { aspect-ratio: 4 / 5; }
  .spin-story__art.spin-art img.spin-art__phone { height: 78%; top: 11%; }
  .family-page .spin-art__card { width: 46%; font-size: .8125rem; padding: .7rem .75rem .8rem; gap: .4rem; }
  .spin-art__card--1 { left: 0; top: 0; }
  .spin-art__card--2 { right: 0; top: 40%; }
  .spin-art__card--3 { left: 2%; bottom: 0; }
}
/* "Emma got her kids back…" runs on one line across the whole block. */
.family-page .tm3 > .tm3__close { grid-column: 1 / -1; text-align: center; max-width: none; font-size: clamp(1.4rem, 2.3vw, 2rem); white-space: nowrap; }
@media (max-width: 47.99rem) { .family-page .tm3 > .tm3__close { white-space: normal; } }

/* Reviews: a small round face next to each name. */
.family-page .review-author { display: flex; align-items: center; gap: .75rem; }
.review-face { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 4px 10px -4px rgba(26,26,26,.3); }

/* Here's what you get: the 365 page's four-phone app overview (create your
   own deck, My Diary, spin the wheel, 10 categories) carries the section,
   then one buy row. The checklist is not repeated here; it lives in the
   pricing cards. */
body.family-page #features.section { padding-bottom: clamp(3.5rem, 6vw, 5rem); }
.feat3__art { margin: clamp(1.5rem, 3vw, 2.5rem) auto 0 !important; max-width: 86rem; }
.feat3__art img { display: block; width: 100%; height: auto; }
.feat3__buy { display: grid; justify-items: center; gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
.family-page .feat3__buy .features-offer__tag { margin: 0; font-size: 1.125rem; color: var(--muted, #6e6b67); }
.feat3__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; }
.family-page .feat3__row .features-offer__price { margin: 0; }
.feat3__row .store-badges { margin: 0; }
/* The phones rise from the bottom edge of the section, as on the 365 page. */
body.family-page #features.section { padding-bottom: 0; }
.feat3__buy { margin-top: 0; }
.feat3__art { margin-top: clamp(.5rem, 2vw, 1.5rem) !important; }

/* "The questions we really want to ask": no white card around the portrait.
   Same frame as every other photo on the page (24px radius + soft shadow),
   the question sits under it as plain text (like Works for Every Age). */
body.family-page .na-frame { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
body.family-page .na-frame__photo { border-radius: var(--radius-lg, 24px); overflow: hidden; box-shadow: 0 24px 48px -30px rgba(26,26,26,.35); }
body.family-page .na-frame__body { padding: 1.1rem 0 0; }
/* Hero pre-headline: always one line on desktop/tablet. The size steps down
   with the column instead of wrapping (≈27 font-sizes wide). */
@media (min-width: 48rem) {
  body.family-page .hero-fe__kicker { white-space: nowrap; font-size: min(1.1875rem, calc((min(100vw, 75rem) - 6rem) / 2 / 29)); }
}

/* Psychology photo: the two baked-in grey-blue cards are gone; the questions
   are live cards in the page's one question-card style. */
.family-page .psych-q-wrap { position: relative; }
.family-page .spin-art__card.psych-q { transform: none; width: min(16rem, 40%); }
.psych-q--mom { left: 8%; top: 6%; }
.psych-q--kid { right: 3%; top: 22%; }
.psych-q__pill--blue { background: #e1ebf7; color: #2f5f96; }
@media (max-width: 47.99rem) { .family-page .spin-art__card.psych-q { width: 46%; font-size: .8125rem; padding: .7rem .75rem .8rem; } }

/* "Twenty minutes later, dinner was over." holds one line in its column. */
@media (min-width: 60rem) {
  .family-page .dn-reflect__time { white-space: nowrap; font-size: min(1.75rem, calc((min(100vw, 75rem) - 6rem) * .37 / 21)) !important; }
}

/* Three months ago / Today: plain text on the page, no boxes. A thin rule
   between the two columns; Today keeps the checks. */
body.family-page .tm-col { padding: 0; border-radius: 0; background: none; border: 0; box-shadow: none; }
@media (min-width: 52rem) {
  .tm-grid { gap: clamp(2.5rem, 5vw, 5rem); }
  body.family-page .tm-col--today { padding-left: clamp(2.5rem, 5vw, 5rem); border-left: 1px solid rgba(26,26,26,.12); }
}
.family-page .spin-art__card.psych-q { width: min(13.5rem, 36%); font-size: .9rem; padding: .8rem .9rem .95rem; gap: .45rem; text-align: center !important; text-align-last: center; }
.psych-q--mom { left: 10%; top: 3%; }
.psych-q--kid { right: 2%; top: 20%; }

/* Fewer frames, applied to the last three text boxes (2026-10-20):
   - "But she still had no idea" list: coloured dots, no cream pills
   - "Why? Because when the card asks" five points: plain text, no white cards
   - Olivia's moment: plain text on the page, no white card */
body.family-page .dn-reflect li { background: none; padding: .15rem 0 .15rem 1.35rem; border-radius: 0; }
body.family-page .dn-reflect li::before { left: 0; top: .6em; }
body.family-page .story-unlock { background: none; border: 0; box-shadow: none; padding: clamp(1rem, 2vw, 1.5rem) 0; }
/* Give the reflection column more room so its heading stays one line at a
   headline size (was 2fr / 1fr). */
@media (min-width: 60rem) {
  .dn-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  body.family-page .dn-reflect .dn-reflect__time { font-size: min(1.75rem, calc((min(100vw, 75rem) - 7rem) * .39 / 19.8)) !important; }
}
body.family-page .dn-reflect :is(p, .dn-reflect__quote, .dn-reflect__surface) { max-width: none !important; text-wrap: wrap; }

/* Here's what you get: the client's four-phone setup image straight under
   the headline, then the buy row. The phones are cropped by the artwork's
   bottom edge, so that edge fades into the section instead of cutting. */
body.family-page #features.section { padding-bottom: clamp(3.5rem, 6vw, 5rem); }
.feat3__art--setup { margin: clamp(1.5rem, 3vw, 2.5rem) auto 0 !important; max-width: 75rem; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.feat3__art--setup img { display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); }
.feat3__buy { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
body.family-page #features.section { padding-bottom: clamp(3.5rem, 6vw, 5rem) !important; }

/* Works for every age: three question categories, each a question card
   (white card, tinted category pill, as everywhere else) with the reviews'
   round arrow buttons to step through more questions. */
.qdeck { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; margin-top: clamp(3rem, 5vw, 4rem); }
@media (min-width: 52rem) { .qdeck { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qdeck__card { display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(1.4rem, 2.5vw, 1.9rem); background: #fff; border-radius: var(--radius-lg, 24px); box-shadow: 0 22px 44px -28px rgba(26,26,26,.32); min-height: 17rem; }
.qdeck__pill { align-self: flex-start; padding: .35em 1em; border-radius: 999px; font-size: .8125rem; font-weight: 700; letter-spacing: .02em; }
.qdeck__card--amber .qdeck__pill { background: #fdf0d8; color: #a46a00; }
.qdeck__card--teal .qdeck__pill { background: #dcefed; color: #0d736b; }
.qdeck__card--purple .qdeck__pill { background: #efe7f8; color: #6b4a9a; }
.qdeck__list { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; align-items: center; }
.family-page .qdeck__q { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.3; color: var(--ink, #1a1a1a); text-wrap: pretty; animation: qdeck-in .35s ease; }
.qdeck__q[hidden] { display: none; }
@keyframes qdeck-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .family-page .qdeck__q { animation: none; } }
.qdeck__nav { display: flex; align-items: center; justify-content: space-between; }
.qdeck__count { font-size: .875rem; color: var(--muted, #6e6b67); }
.qdeck__count b { color: var(--ink, #1a1a1a); }
.qdeck__ctrl.rv-ctrl { margin: 0; }
body.family-page .qdeck__q { text-align: left !important; text-align-last: auto; hyphens: manual; }

/* Never Gets Old + bonus removed (2026-10-20). Works for Every Age turns white
   so the order stays grey (kids' questions) / white / cream (FAQ). */
body.family-page #age-tiers.section { background: #fff !important; }

/* Guarantee section removed (2026-10-20). Backgrounds re-alternate from here:
   worth white, growing up cream, pricing white, three months cream,
   you can have this too white, trust strip cream. */
body.family-page #growing-up.section { background: var(--cream, #fef8ec) !important; }
body.family-page #pricing.section { background: #fff !important; }
body.family-page #three-months.section { background: var(--cream, #fef8ec) !important; }
body.family-page #have-this-too.just-one-q { background: #fff !important; }
body.family-page .trust-strip { background: var(--cream, #fef8ec) !important; }

/* Choose Your Plan: 1 game ($39 Family Edition) vs 2 games ($69 Family
   Edition + 365 Ritual). The game covers on top make the difference visible
   at a glance: one cover on the left, two on the right. */
.price2__covers { display: flex; align-items: center; gap: .6rem; height: 7.5rem; margin-bottom: 1.25rem; }
.price2__covers img { height: 100%; width: auto; border-radius: 8px; box-shadow: 0 12px 24px -14px rgba(26,26,26,.4); }
.price2__plus { font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; color: var(--coral, #f06858); }
body.family-page .price2 .pricing-card__badge { font-size: .8125rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
body.family-page .price2--one .pricing-card__badge { color: var(--muted, #6e6b67); }
body.family-page .price2 .pricing-card__title { font-size: clamp(1.5rem, 2.2vw, 1.875rem); }
body.family-page .price2--two { border: 2px solid var(--coral, #f06858); }
body.family-page .price2 .pricing-features-list strong { margin-right: .25em; }
body.family-page .price2 { justify-content: flex-start !important; gap: 0; }
body.family-page .price2 .btn { margin-top: auto; }
body.family-page .price2 .pricing-features-list { margin-bottom: 1.5rem; }
body.family-page .price2 .price2__sub { padding-left: 1.6rem; color: var(--muted, #6e6b67); }

/* Your Kids Are Growing Up: the client's two-hands-one-phone photo on the left,
   copy on the right. The arms come in from the page edge and the photo sits
   on the section's bottom edge (cut-outs always sit on an edge). White photo
   ground multiplies into the cream section. */
body.family-page #growing-up.grow3-section { position: relative; overflow: hidden; }
.grow3__art { margin: 0; }
.grow3__art img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.grow3 { display: grid; }
.family-page .grow3__copy .section-title { text-align: left !important; margin: 0 0 1rem; }
.family-page .grow3__copy p, .family-page .grow3__copy li { text-align: left !important; hyphens: manual; }
.family-page .grow3__copy > p { margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.6; color: var(--body, #302f2e); }
body.family-page #growing-up .grow3__copy p.growing-pause { margin: 1.25rem 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 2.8vw, 2.25rem) !important; line-height: 1.1; color: #f06858; }
.family-page .grow3__copy .growing-can { margin: 1.25rem 0; padding: 0; border: 0; }
.family-page .grow3__copy .growing-can li { font-size: 1.0625rem; line-height: 1.5; padding: .7rem 0; border-top: 1px solid rgba(26,26,26,.1); margin: 0; }
.family-page .grow3__copy .growing-tonight { margin: 0 0 1.5rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.5rem); color: var(--ink, #1a1a1a); }
@media (min-width: 60rem) {
  .grow3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grow3__copy { grid-column: 2; }
  .grow3__art { position: absolute; left: 0; bottom: 0; width: 50%; }
}
@media (max-width: 59.99rem) {
  .grow3__art { order: 2; }
  body.family-page #growing-up.grow3-section { display: flex; flex-direction: column; padding-bottom: 0; }
  .grow3__art { margin-top: 2rem; }
}
@media (min-width: 60rem) {
  .grow3__art { width: 52%; }
  .grow3__art img { -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 100%); mask-image: linear-gradient(to right, #000 80%, transparent 100%); }
  body.family-page #growing-up .grow3__copy .section-title { white-space: nowrap; font-size: min(2.5rem, calc((min(100vw, 75rem) - 7rem) / 2 / 17)) !important; }
}

/* What happens after you order: option A, a timeline with the spin-wheel
   dials on one dashed line. Plain text, no boxes. */
.after-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; grid-template-columns: 1fr; position: relative; }
@media (min-width: 48rem) {
  .after-tl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .after-tl::before { content: ""; position: absolute; left: 1.6rem; right: 10%; top: 1.6rem; height: 2px; background: repeating-linear-gradient(90deg, rgba(26,26,26,.18) 0 8px, transparent 8px 16px); }
}
.after-tl li { display: grid; gap: 1rem; align-content: start; justify-items: start; }
.after-tl__dial { transform: none !important; }
.after-tl__dial b { transform: none !important; }
.family-page .after-tl__t { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.25; color: var(--ink, #1a1a1a); text-align: left; }
.family-page .after-tl__sub { margin: .3rem 0 0; font-size: .95rem; color: var(--muted, #6e6b67); text-align: left; }
.after-tl__badges { margin-top: .9rem !important; flex-wrap: wrap; gap: .5rem; }
.after-tl__badges .store-badge { transform: scale(.85); transform-origin: left center; }
.after-tl .spin-step__dial { box-shadow: 0 0 0 5px #fff, 0 6px 16px -8px rgba(26,26,26,.35); }
.after-tl__badges { display: flex; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; }
.family-page .after-tl__store { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: .55rem; background: #111; color: #fff; font-size: .8125rem; font-weight: 700; text-decoration: none; }
.after-tl__store img { width: .9rem; height: .9rem; }
/* Hero pre-headline on one line on phones too (scaled to the screen). */
@media (max-width: 47.99rem) {
  body.family-page .hero-fe__kicker { white-space: nowrap; font-size: min(1rem, calc((100vw - 2.75rem) / 28.5)); letter-spacing: -.005em; }
}
/* "How was your day?" sits right by Emma's face, "Mason: Good." by Mason's. */
.rh-hwyd .rh-hwyd__b--mom { top: 30% !important; left: 30% !important; }
.rh-hwyd .rh-hwyd__b--kid { top: 33% !important; right: 3% !important; left: auto !important; }
.rh-hwyd .rh-hwyd__b--mom { top: 27% !important; left: 30% !important; }
.rh-hwyd .rh-hwyd__b--kid { top: 25% !important; right: 6% !important; }
/* Bully photo: kids on a clean white cut-out, set on the same beige ground
   as the "How was your day?" photo above it. */
.family-page .rh-cutout { background: #f3ebdc; }
.rh-cutout img { mix-blend-mode: multiply; }

/* ---------- Brand colours only (2026-10-20) ----------
   Text is ink, white or Pick One Coral #F06858. Category pills sit on the
   solid palette colours (Coral #F06858, Yellow #FFBD48, Pink #FAAAB1,
   Blue #94B7D5, Turquoise #96CCCA, Green #C0CB6D) with ink text; coral pills
   get white text. No darker or tinted off-palette shades. */
body.family-page :is(.spin-step__label, .spin-step__note) { color: #f06858 !important; }
body.family-page .age-use__age { color: #f06858 !important; }
body.family-page .pricing-card__risk { color: var(--ink, #1a1a1a) !important; }
body.family-page :is(.bridge-chip--card, .bridge-result--up) { color: var(--ink, #1a1a1a) !important; }
body.family-page .bridge-chip--card { background: #c0cb6d !important; }

body.family-page :is(.kidq__pill, .spin-art__pill, .grow-q__pill, .qdeck__pill, .badge-pill, .psych-q__pill--blue) { color: var(--ink, #1a1a1a) !important; }
body.family-page :is(.kidq__pill--teal, .spin-art__pill--teal, .grow-q__pill--teal, .badge-pill--teal, .qdeck__card--teal .qdeck__pill) { background: #96ccca !important; }
body.family-page :is(.kidq__pill--amber, .spin-art__pill--amber, .grow-q__pill--amber, .qdeck__card--amber .qdeck__pill) { background: #ffbd48 !important; }
body.family-page :is(.kidq__pill--blue, .psych-q__pill--blue, .kidq__pill--grey) { background: #94b7d5 !important; }
body.family-page :is(.kidq__pill--purple, .spin-art__pill--purple, .qdeck__card--purple .qdeck__pill) { background: #faaab1 !important; }
body.family-page :is(.kidq__pill--pink) { background: #faaab1 !important; }
body.family-page :is(.kidq__pill--coral, .grow-q__pill:not(.grow-q__pill--teal):not(.grow-q__pill--amber)) { background: #f06858 !important; color: #fff !important; }
/* Palette variables and the last off-palette tints. */
body.family-page { --pink: #faaab1; --teal: #96ccca; --amber: #ffbd48; --green: #c0cb6d; --blue: #94b7d5; --coral: #f06858; }
body.family-page .store-badge { background: #1a1a1a !important; }
body.family-page .na-frame__icon { background: #f06858 !important; color: #fff !important; }
body.family-page .worth-receipt__pick { background: var(--cream, #fef8ec) !important; box-shadow: inset 0 0 0 2px #f06858; }
body.family-page .bridge-chip--ask { background: #faaab1 !important; color: var(--ink, #1a1a1a) !important; }
body.family-page #psychology svg[style*="background"], body.family-page #psychology .bridge-result svg { background: none !important; }
body.family-page .objection-compare p { background: var(--cream, #fef8ec) !important; } body.family-page .objection-compare p:last-child { box-shadow: inset 0 0 0 2px #c0cb6d; }

/* ---------- Colour meaning (2026-10-20) ----------
   Coral #F06858 = the problem (negative lines: "Fine.", "Resistance",
   "You can't pause childhood.", the 3.2 million…).
   Pick One Blue #94B7D5 = the change (positive lines). Set bold so the light
   blue still reads on cream and white. */
body.family-page :is(
  .spin-step__label, .spin-step__note,
  .bridge-same span, .bridge-result--up, .bridge-result--up i,
  .tm3__close strong, .tm-col__know,
  .growing-can strong, .fe-have__tonight,
  .worth-receipt__price, .worth-receipt__price small, .worth-priceless__ask
) { color: #94b7d5 !important; font-weight: 800; }
html body.family-page .spin-story .spin-step .spin-step__label,
html body.family-page .spin-story .spin-step .spin-step__note,
html body.family-page .tm3 > .tm3__close strong,
html body.family-page .tm-col .tm-col__know,
html body.family-page .bridge-same span,
html body.family-page .growing-can li strong,
html body.family-page .fe-have .fe-have__tonight,
html body.family-page .worth-receipt__price,
html body.family-page .worth-receipt__price small,
html body.family-page .worth-priceless__ask { color: #94b7d5 !important; }
/* (the coral list above carries an id in its :is(), so this one needs one too) */
html body.family-page :is(#__blue#__b2, .spin-step__label, .spin-step__note, .tm3__close strong, .tm-col__know,
  .bridge-same span, .bridge-result--up, .bridge-result--up i, .growing-can strong, .fe-have__tonight,
  .worth-receipt__price, .worth-receipt__price small, .worth-priceless__ask) { color: #94b7d5 !important; }

/* Why "just ask better questions" doesn't work: rows 01–03 alternate
   text | photo, every photo the same size (5:4), text vertically centred
   against it. The closing statement belongs to all three rows, so it sits
   after them, centred across the full width. */
@media (min-width: 58rem) {
  body.family-page #really-happening .rh-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: center !important; }
}
body.family-page #really-happening .rh-row__media,
body.family-page #really-happening .rh-hwyd { width: 100%; aspect-ratio: 5 / 4; height: auto; }
body.family-page #really-happening .rh-row__media img,
body.family-page #really-happening .rh-hwyd img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
body.family-page #really-happening .rh-hwyd img { object-position: 50% 100%; }
body.family-page .rh-close { margin: clamp(2.5rem, 5vw, 4rem) 0 0 !important; padding: clamp(2rem, 4vw, 3rem) 0 0 !important; border-top: 1px solid rgba(26,26,26,.1); text-align: center; }
body.family-page .rh-close p { max-width: none !important; margin-inline: auto; text-align: center !important; }
/* Bubbles clear of the heads (5:4 frame): above and beside, never touching. */
body.family-page .rh-hwyd .rh-hwyd__b--mom { top: 14% !important; left: 24% !important; }
body.family-page .rh-hwyd .rh-hwyd__b--kid { top: 12% !important; right: 4% !important; left: auto !important; }
body.family-page .rh-close { border-top: 0 !important; padding-top: 0 !important; }
html body.family-page :is(#__w#__w2, .kidq__pill--coral, .grow-q__pill:not(.grow-q__pill--teal):not(.grow-q__pill--amber)) { color: #fff !important; }

/* 1600+ (2026-10-20): no coral image background, no big number on the left.
   Copy on the left, the app on cream on the right, and "1,600+ questions"
   as a coral badge on the image. */
body.family-page #questions .depth-mark { display: none !important; }
@media (min-width: 60rem) {
  body.family-page #questions .depth-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important; grid-template-rows: auto auto; align-items: center; }
  body.family-page #questions .depth-title { grid-column: 1 / -1 !important; grid-row: 1; text-align: center !important; }
  body.family-page #questions .depth-copy { grid-column: 1 !important; grid-row: 2 !important; }
  body.family-page #questions .depth-shot { grid-column: 2 !important; grid-row: 2 !important; }
}
body.family-page .depth-shot--clean { position: relative; max-width: none; border-radius: 0; overflow: visible; box-shadow: none; background: none; }
body.family-page .depth-shot--clean img:first-child { mix-blend-mode: multiply; }
.depth-badge { position: absolute; left: 2%; top: 4%; width: 9.5rem; aspect-ratio: 1; border-radius: 50%; background: #f06858; color: #fff; display: grid; place-content: center; justify-items: center; text-align: center; transform: rotate(-8deg); box-shadow: 0 18px 30px -16px rgba(240,104,88,.7); }
.depth-badge img { width: 2rem; height: auto; margin-bottom: .2rem; mix-blend-mode: normal !important; }
.depth-badge__num { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; line-height: .95; letter-spacing: -.02em; }
.depth-badge__unit { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
@media (max-width: 40rem) { .depth-badge { width: 7.5rem; } .depth-badge__num { font-size: 1.6rem; } .depth-badge img { width: 1.5rem; } }
body.family-page #questions .depth-copy .depth-lede { font-size: 1.25rem; }
body.family-page .depth-shot--clean img:first-child { mix-blend-mode: normal; display: block; width: 100%; height: auto; }
body.family-page #questions .depth-list li { font-size: 1.125rem; }
body.family-page .depth-shot--clean .depth-badge img { width: 2rem !important; height: auto; display: block; margin: 0 auto .2rem; }

/* Questions Kids Actually Want to Answer: one straight row of equal cards
   gliding left behind the phone, the same movement as the homepage deck
   stream. Edges fade into the grey. */
.kidq__stage--row { position: relative; height: clamp(28rem, 38vw, 34rem); display: flex; align-items: center; margin-top: clamp(1rem, 2vw, 2rem); }
.kidq__row { position: relative; width: 100%; overflow: hidden; padding-block: 2rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.kidq__stage--row .kidq__track { display: flex; align-items: stretch; width: max-content; animation: kidq-row 70s linear infinite; }
.kidq__stage--row:hover .kidq__track { animation-play-state: paused; }
@keyframes kidq-row { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.kidq__stage--row .kidq__card, .kidq__stage--row .kidq__card--low { transform: none !important; width: 17.5rem; min-height: 12rem; margin-right: 1.25rem; align-content: center; }
.kidq__stage--row .kidq__phone { position: absolute; left: 50%; top: 50%; height: 100%; width: auto; transform: translate(-50%, -50%); z-index: 3; }
@media (max-width: 48rem) {
  .kidq__stage--row { height: auto; display: grid; }
  .kidq__stage--row .kidq__phone { position: relative; left: auto; top: auto; transform: none; height: 20rem; justify-self: center; order: -1; margin-bottom: -3rem; z-index: 5; }
  .kidq__stage--row .kidq__card { width: 14rem; min-height: 10rem; }
}
@media (prefers-reduced-motion: reduce) { .kidq__stage--row .kidq__track { animation: none; } .kidq__row { overflow-x: auto; } }

/* What Happens After You Order (2026-10-20, the user's reference): headline
   on the left, four steps on the right, each with a solid brand-colour
   circle icon and the verb in bold. */
.aoi { display: grid; gap: 2rem 4rem; align-items: center; max-width: 64rem; margin-inline: auto; }
@media (min-width: 52rem) { .aoi { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
body.family-page .aoi__title { margin: 0 !important; text-align: left !important; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.25rem, 4vw, 3.25rem) !important; line-height: 1.05; white-space: normal !important; color: var(--ink, #1a1a1a); }
.aoi__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.aoi__step { display: flex; align-items: center; gap: 1.1rem; }
.aoi__icon { flex: none; width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 10px 20px -12px rgba(26,26,26,.35); }
.aoi__icon svg { width: 1.75rem; height: 1.75rem; }
.aoi__step--coral .aoi__icon { background: #f06858; }
.aoi__step--yellow .aoi__icon { background: #ffbd48; }
.aoi__step--blue .aoi__icon { background: #94b7d5; }
.aoi__step--teal .aoi__icon { background: #96ccca; }
body.family-page .aoi__step p { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.3; color: var(--ink, #1a1a1a); text-align: left !important; }
.aoi__step strong { font-weight: 800; }
/* Sound familiar: the verdict wraps inside its own column, never under the card. */
body.family-page .familiar-verdict { white-space: normal !important; max-width: 100% !important; }
/* Psychology photo: question cards sit clearly above the heads, never touching. */
body.family-page .psych-q--mom { top: -4% !important; left: 6% !important; }
body.family-page .psych-q--kid { top: 8% !important; right: 2% !important; }
body.family-page .psych-q-wrap { margin-top: 2.5rem; }
body.family-page .psych-q--mom { top: -9% !important; left: 4% !important; } body.family-page .psych-q-wrap { margin-top: 3.5rem; }

/* 15 reviews: the 6 from the client's copy doc + 9 clearly marked samples
   until real reviews arrive. */
.review-card--sample { position: relative; }
.review-sample-tag { display: inline-block; margin-bottom: .6rem; padding: .2rem .55rem; border-radius: 6px; background: #ffbd48; color: #1a1a1a; font-size: .6875rem; font-weight: 700; }
.review-face--initial { display: grid; place-items: center; background: #96ccca; color: #1a1a1a; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
.review-sample-tag { align-self: flex-start; justify-self: start; width: max-content; }
/* Works for every age: photos + age labels only; the category cards follow straight after. */
.qdeck { margin-top: clamp(1.75rem, 3vw, 2.5rem) !important; }
.family-page .age-use__grp { margin-bottom: 0; }

/* Last section: "You Can Have This Too." combined with "What happens after you
   order" — the four coloured steps sit between the promise and the button. */
.family-page .have-steps__title { margin: .25rem 0 1rem !important; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem !important; color: var(--ink, #1a1a1a); text-align: left !important; }
.fe-have .have-steps { gap: .9rem; margin: 0 0 2rem; }
.fe-have .have-steps .aoi__icon { width: 3rem; height: 3rem; }
.fe-have .have-steps .aoi__icon svg { width: 1.35rem; height: 1.35rem; }
body.family-page .fe-have .have-steps p { font-size: 1.125rem !important; margin: 0 !important; }
body.family-page .fe-have .just-one-q__content p.have-steps__title + .have-steps { margin-top: 0; }
@media (min-width: 48.01rem) { body.family-page .fe-have .just-one-q__bubble--top { left: 58% !important; top: 3% !important; } }

/* You Can Have This Too: the four order steps live inside the phone, styled
   like the app's own "Pick a category" list (colour bar, label, round icon). */
.ophone { position: relative; width: 100%; max-width: 380px; aspect-ratio: 796 / 1576; container-type: inline-size; filter: drop-shadow(0 20px 36px rgba(26,26,26,.14)); }
.ophone__frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.ophone__screen { position: absolute; z-index: 1; left: 4%; right: 4%; top: 2.2%; bottom: 2.2%; border-radius: 12cqw; overflow: hidden; background: #f6f8fa; display: flex; flex-direction: column; padding: 17cqw 5.5cqw 0; }
.family-page .ophone__title { margin: 0 0 6cqw !important; text-align: center !important; font-family: var(--font-display); font-weight: 700; font-size: 6.2cqw !important; line-height: 1.2; color: #2b2f33; }
.ophone__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4.5cqw; }
.ophone__row { --c: #f06858; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 3cqw; min-height: 27cqw; padding: 0 4cqw 0 9cqw; background: #fff; border-radius: 4cqw; overflow: hidden; box-shadow: 0 1.5cqw 5cqw rgba(26,26,26,.06); }
.ophone__row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4.5cqw; background: var(--c); }
.ophone__row--yellow { --c: #ffbd48; } .ophone__row--blue { --c: #94b7d5; } .ophone__row--teal { --c: #96ccca; }
.family-page .ophone__row p { margin: 0 !important; font-size: 4.6cqw !important; line-height: 1.25 !important; color: #2b2f33 !important; text-align: left !important; }
.ophone__row strong { font-weight: 800; }
.ophone__ic { flex: none; width: 13cqw; height: 13cqw; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; }
.ophone__ic svg { width: 6.5cqw; height: 6.5cqw; }
.ophone__tabbar { margin-top: auto; height: 15cqw; display: flex; align-items: center; justify-content: space-around; border-top: 1px solid #e8ecef; background: #fff; margin-inline: -5.5cqw; padding-inline: 8cqw; }
.ophone__tabbar i { width: 6cqw; height: 6cqw; border-radius: 2cqw; border: .6cqw solid #c9ced3; }
.ophone__tabbar i.on { width: 20cqw; border: 0; background: #fff3dc; }
/* The stage is a shrink-to-fit flex box; give it and the phone a real width. */
body.family-page .fe-have .just-one-q__stage { width: 100%; max-width: 440px; min-height: 0; }
body.family-page .fe-have .ophone { flex: none; width: min(100%, 340px); }
@media (max-width: 48rem) { body.family-page .fe-have .ophone { width: 15rem; } }
@media (min-width: 48.01rem) { body.family-page .fe-have .just-one-q__bubble--top { left: 52% !important; top: -6% !important; } body.family-page .fe-have .just-one-q__bubble--bottom { bottom: 4% !important; } body.family-page #have-this-too.just-one-q { padding-top: clamp(5.5rem, 9vw, 8rem); } }
/* Last section copy is now the homepage's "Just one question." text: let the paragraph wrap normally. */
@media (min-width: 60rem) { body.family-page .fe-have .just-one-q__content h2 { white-space: normal !important; } }
body.family-page .fe-have .just-one-q__content p { max-width: 32rem; line-height: 1.55; }
.ophone__title--logo { display: flex; justify-content: center; }
.ophone__title--logo img { width: 34cqw; height: auto; display: block; }

/* iteration 259 · edges on tablets and small phones */
@media (min-width: 60rem) and (max-width: 80rem) {
  .spin-story__art.spin-art { width: calc(100% + 2rem); margin-left: 0; }
}
@media (min-width: 48.01rem) and (max-width: 90rem) {
  .fe-have .just-one-q__bubble--bottom { right: auto; left: -1rem; }
}
@media (max-width: 22.5rem) {
  body.family-page .nav__cta { font-size: 0.875rem; padding: 0.55rem 0.8rem; }
  body.family-page .nav__logo { flex-shrink: 0; }
  body.family-page .nav__inner { gap: 0.5rem; }
}
@media (max-width: 30rem) {
  body.family-page .nav__burger { flex-shrink: 0; min-width: 2.75rem; min-height: 2.75rem; }
}