/* ============================================================
   Family Edition · structural refinement layer
   ------------------------------------------------------------
   Loaded after family.css and pick-one-ds.css.

   family.css built every section the same way: a centred eyebrow,
   a centred title, a centred lede, then a row of white cards on
   cream. Nine times in a row. That sameness, not any single
   element, is what made the page read as generated.

   This layer does four things:
     1 · gives the hero a real focal point and a 2-line headline
     2 · rebuilds "The Daily Disconnect" around the client's own
         dinner photography instead of a 30-line text transcript
     3 · breaks the centred-header monotony (alternating alignment)
     4 · fixes the mechanical craft: card heights, chip contrast,
         grid gutters, tap targets
   ============================================================ */

/* ---------- 1 · Hero ----------------------------------------- */
/* Bottom padding is modest because .hero-fe__visual-wrap already
   reserves 4.25rem for the glass card to hang into. Stacking the two
   left a dead band of cream under the hero. */
.hero-fe {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 3.5vw, 3rem);
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(252, 189, 76, 0.18) 0%, rgba(252, 189, 76, 0) 55%),
    radial-gradient(100% 80% at 0% 100%, rgba(240, 104, 88, 0.12) 0%, rgba(240, 104, 88, 0) 60%),
    linear-gradient(180deg, #fffdf8 0%, var(--cream, #fef8ec) 100%);
}

/* Text column narrower than the media column: the eye lands on the
   photograph first, then reads. Equal halves make neither win. */
.hero-fe .grid-2 {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .hero-fe .grid-2 { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
}

.hero-fe__badge {
  background: var(--brand-turquoise);
  color: #14403e;
  font-size: 0.8125rem;
  padding: 0.4rem 0.9rem 0.4rem 0.7rem;
}

/* The client's headline is one long sentence plus a payoff. Setting
   the setup smaller than the payoff gives the hero two clear tiers
   and keeps the big line to two lines at desktop. */
.hero-fe__title {
  display: grid;
  gap: 0.5rem;
  font-size: inherit;
  margin-bottom: 1.5rem;
}
.hero-fe__kicker {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--muted, #6e6b67);
  max-width: 30ch;
}
.hero-fe__title .highlight {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.2vw, 3.375rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink, #1a1a1a);
  /* 22ch lands "This one game / changed everything." on two lines at
     every desktop width; 15ch pushed it to three. */
  max-width: 22ch;
  text-wrap: balance;
}

.hero-fe__subtitle {
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* Both CTAs on one row at desktop: two stacked full-width buttons
   read as a form, not as a primary plus a secondary. */
.hero-fe__actions {
  gap: 0.75rem;
  margin-bottom: 1.75rem;
  flex-wrap: nowrap;
}
.hero-fe__actions .btn {
  /* Padding only. The font size is the canonical one from
     pick-one.css; shrinking it here put the hero CTA under the
     contrast floor for white-on-coral. */
  padding-inline: clamp(1rem, 1.8vw, 1.5rem);
}
@media (max-width: 34rem) {
  .hero-fe__actions { flex-wrap: wrap; }
  .hero-fe__actions .btn { flex: 1 1 100%; }
}

/* The separator dots used to be their own flex children, so any wrap
   left a dangling dot at the end of a line. They are gone from the
   markup now; the rule below draws them between items instead, and a
   generated separator cannot survive a line break on its own. */
.hero-fe__trust {
  gap: 0.4rem 0.9rem;
  font-size: 0.8125rem;
  color: var(--muted, #6e6b67);
}
.hero-fe__trust-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.hero-fe__trust-item + .hero-fe__trust-item::before {
  content: "\00b7";
  margin-right: 0.9rem;
  color: var(--line, rgba(26, 26, 26, 0.3));
}
/* Below the width where the three items fit on one line they wrap,
   and a leading separator ends up hanging at the start of line two.
   Narrow viewports drop the separators and use the gap instead. */
@media (max-width: 40rem) {
  .hero-fe__trust { gap: 0.35rem 1rem; }
  .hero-fe__trust-item + .hero-fe__trust-item::before { content: none; }
}

/* Media column: photo carries the section, glass card overlaps the
   lower-left corner so it never covers a face. */
/* Padding-bottom reserves the strip the glass card hangs into, so the
   card overlaps only the lower edge of the frame and never the faces
   or the phone, which is the product. */
.hero-fe__visual-wrap { position: relative; padding-bottom: 4.25rem; }
.hero-fe .photo-frame {
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 6px rgba(26, 26, 26, 0.05),
              0 34px 70px -28px rgba(26, 26, 26, 0.34);
  border: 0;
}
.hero-fe__main-photo { aspect-ratio: 4 / 3; object-fit: cover; }

.hero-fe__floating-card {
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  width: min(21rem, 78%);
  padding: 1rem 1.125rem;
  border-radius: var(--radius-md);
}
@media (min-width: 62rem) {
  /* Hangs a little off the left edge of the frame, so the card reads
     as a layer above the photograph rather than a caption inside it. */
  .hero-fe__floating-card { left: -1.75rem; }
}
.hero-fe__card-tag {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--coral-ink, #b8402d);
  margin-bottom: 0.5rem;
}
.hero-fe__pulse-dot { background: var(--coral, #f06858); }
.hero-fe__card-question {
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--ink, #1a1a1a);
  margin: 0 0 0.75rem;
  text-align: start;
}
.hero-fe__card-footer { gap: 0.75rem; font-size: 0.75rem; }
.badge-pill--teal {
  background: var(--brand-turquoise);
  color: #14403e;
}
.card-hint { color: var(--muted, #6e6b67); white-space: nowrap; }

@media (max-width: 62rem) {
  .hero-fe__title .highlight { max-width: none; }
  .hero-fe__floating-card { position: static; width: 100%; margin-top: 1rem; }
  .hero-fe__visual-wrap { padding-bottom: 0; }
}

/* ---------- 2 · The Daily Disconnect ------------------------- */
/* Two frames of the client's own photography: the questions she
   asked, and the answers that came back. */
.disconnect-diptych {
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  grid-template-columns: 1fr;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
@media (min-width: 48rem) {
  .disconnect-diptych { grid-template-columns: 1fr 1fr; }
}
.disconnect-diptych__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04),
              0 20px 44px -24px rgba(26, 26, 26, 0.26);
}
.disconnect-diptych__frame img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.disconnect-diptych__cap {
  position: absolute;
  left: 0.875rem;
  bottom: 0.875rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.8);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink, #1a1a1a);
}

/* The payoff line is the emotional turn of the section, so it gets
   display type and a measure, not body-copy treatment. */
.disconnect-payoff {
  max-width: 42ch;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, 1.625rem);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.015em;
  color: var(--ink, #1a1a1a);
  text-align: center;
  text-wrap: balance;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* Asymmetric: the number is the smaller column, the argument the
   larger one. Two equal columns would make them compete. */
.disconnect-insight {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 56rem) {
  .disconnect-insight { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }
}
.disconnect-insight__stat {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border-radius: var(--radius-lg);
  background: var(--coral, #f06858);
  color: #ffffff;
}
.disconnect-insight__number {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.25rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: #ffffff;
}
.disconnect-insight__label {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.94);
  text-align: start;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.disconnect-insight__title {
  margin: 0 0 1rem;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.disconnect-insight__desc {
  margin: 0 0 1.75rem;
  max-width: 58ch;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--body, #302f2e);
}

/* Key/value rows, not bullet points: the label carries the meaning
   so it gets its own column rather than a decorative icon. */
.beneath-list { display: grid; gap: 0; }
.beneath-list__row {
  display: grid;
  gap: 0.15rem 1.5rem;
  grid-template-columns: 1fr;
  padding-block: 0.875rem;
  border-top: 1px solid var(--border-card);
}
.beneath-list__row:last-child { border-bottom: 1px solid var(--border-card); }
@media (min-width: 40rem) {
  .beneath-list__row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
}
.beneath-list__key {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}
.beneath-list__val {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--body, #302f2e);
}

/* ---------- 3 · Section header rhythm ------------------------ */
/* Default stays centred, but alternating sections go left-aligned
   so the page has more than one shape. */
.family-page .section-header {
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.family-page .section-title {
  font-size: clamp(1.75rem, 3.3vw, 2.625rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.028em;
}
.family-page .section-subtitle {
  margin: 0.875rem auto 0;
  max-width: 56ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--muted, #6e6b67);
}
.family-page .section-eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-full);
  background: var(--surface-peach, #fcece5);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral-ink, #b8402d);
}

/* Centered section headers design standard */
.family-page .section-header--start,
.family-page .section-header {
  margin-inline: auto !important;
  text-align: center !important;
  max-width: 48rem !important;
}
.family-page .section-header--start .section-subtitle,
.family-page .section-header .section-subtitle {
  margin-inline: auto !important;
  text-align: center !important;
}

/* ---------- 4 · Craft fixes ---------------------------------- */
/* Section ledes are short centred sentences. These read ragged-right instead. */
.family-page :is(.section-subtitle, .tier-intro, .tier-desc, .disconnect-payoff) {
  text-align: center;
  text-align-last: auto;
  -webkit-hyphens: manual;
  hyphens: manual;
  text-wrap: pretty;
}
.family-page .section-header--start .section-subtitle { text-align: center !important; }

/* Five equal columns put 2 or 3 words on a line and gave every card a
   different height. Auto-fit at a readable minimum wraps to 3 + 2,
   which is both legible and deliberate-looking. */
.family-page .pillars-grid {
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  align-items: stretch;
}
.family-page .pillar-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
  text-align: start;
  padding: clamp(1.1rem, 1.8vw, 1.4rem);
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-subtle);
}
.family-page .pillar-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: var(--coral, #f06858);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
}
.family-page .pillar-item h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: start;
}
.family-page .pillar-item p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--body, #302f2e);
  text-align: start;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* The stat block and the argument beside it start on the same line
   rather than the stat floating in a tall empty column. */
.disconnect-insight__stat { align-self: start; }

/* Tap targets clear 44px on touch. */
.family-page :is(.tier-nav__btn, .faq-question, .btn) { min-height: 2.75rem; }

/* Age-tier tabs. These are two-line buttons (age range above, tier
   name below), and each line sets its own colour. An earlier pass
   made the active tab a solid dark pill, which the child spans then
   overrode back to dark text — the tier name vanished into the
   background. The active state is a light coral wash instead, so
   both lines stay legible, and the three buttons share a width so
   the group reads as one control. */
.family-page .tier-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0.625rem;
  max-width: 40rem;
  margin-inline: auto;
}
.family-page .tier-nav__btn {
  gap: 0.15rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-card);
  border: 2px solid var(--border-card);
  background: #ffffff;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease),
              background-color 0.2s var(--ease);
}
.family-page .tier-nav__btn:hover {
  border-color: var(--coral, #f06858);
  transform: translateY(-2px);
}
.family-page .tier-nav__btn.is-active {
  border-color: var(--coral, #f06858);
  background: var(--terracotta-light, #fdeeeb);
}
.family-page .tier-nav__btn.is-active .tier-nav__tag {
  color: var(--coral-ink, #b8402d);
}
.family-page .tier-nav__tag {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}
.family-page .tier-nav__name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
}

/* Flip cards. The fixed 320px height was set for the BACK face, which
   carries three blocks of copy; the front carries a tag, a question
   and a hint, so it left a dead band of white in the middle of every
   card. Height comes down, and the question centres in the space it
   has left rather than being pushed to the top. */
.family-page .card-3d { height: 17rem; }
.family-page .card-3d__face {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: flex-start;
}
.family-page .card-3d__face--front .card-3d__q {
  margin: 0;
  display: flex;
  align-items: center;
  flex: 1;
}
.family-page .card-3d__hint { margin-top: auto; }
.family-page .card-3d__q { margin: 0; }

@media (max-width: 48rem) {
  .family-page .card-3d { height: 15.5rem; }
}

/* Timeline story cards: dialogue lines are short, so flush text
   stretches them. Ragged-right, and the outcome pins to the bottom. */
.family-page .timeline-card { display: flex; flex-direction: column; }
.family-page .timeline-card :is(p, li, span, div) {
  text-align: start;
  text-align-last: auto;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.family-page .timeline-card > :last-child { margin-top: auto; }

/* ==========================================================================
   Family Edition Refinements (Images 1–5 References Standard)
   ========================================================================== */

/* App Store & Google Play Badges */
.family-page .store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 32rem) {
  .family-page .store-badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
}
.family-page .store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 1.15rem;
  background: #14221a;
  color: #ffffff !important;
  border-radius: 12px;
  text-decoration: none;
  font-family: var(--font-body, 'Figtree', sans-serif);
  transition: transform 0.2s ease, background-color 0.2s ease;
  box-shadow: 0 4px 12px rgba(20, 34, 26, 0.15);
}
@media (max-width: 32rem) {
  .family-page .store-badge {
    padding: 0.5rem 0.65rem;
    justify-content: center;
    gap: 0.45rem;
  }
  .family-page .store-badge svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .family-page .store-badge__sub {
    font-size: 0.58rem;
  }
  .family-page .store-badge__name {
    font-size: 0.82rem;
  }
}
.family-page .store-badge:hover {
  transform: translateY(-2px);
  background: #000000;
  color: #ffffff !important;
}
.family-page .store-badge:hover {
  transform: translateY(-2px);
  background: #000000;
  color: #ffffff !important;
}
.family-page .store-badge svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: #ffffff;
  flex-shrink: 0;
}
.family-page .store-badge__sub {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
  line-height: 1.1;
}
.family-page .store-badge__name {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
}

/* 3.2 Million Stat Block (Image 3 Reference Standard) */
.stat-32m-section {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  background: var(--warm-sand, #faf6ee);
}
.stat-32m-card {
  background: #ffffff;
  border-radius: 28px;
  padding: clamp(2rem, 4vw, 3.5rem);
  box-shadow: 0 10px 40px rgba(26, 46, 34, 0.06);
  border: 1px solid rgba(26, 46, 34, 0.08);
}
.stat-32m-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 58rem) {
  .stat-32m-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}
.stat-32m-left {
  display: flex;
  flex-direction: column;
}
.stat-32m-number-wrap {
  display: flex;
  flex-direction: column;
  line-height: 0.9;
}
.stat-32m-huge {
  font-family: var(--font-display, 'Gabarito', sans-serif);
  font-size: clamp(5.5rem, 11vw, 8.5rem);
  font-weight: 800;
  color: var(--terracotta, #f06858);
  line-height: 0.85;
  letter-spacing: -0.04em;
}
.stat-32m-unit {
  font-family: var(--font-display, 'Gabarito', sans-serif);
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 800;
  color: var(--terracotta, #f06858);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-top: -0.2rem;
}
.stat-32m-desc {
  font-family: var(--font-body, 'Figtree', sans-serif);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 700;
  color: var(--forest-ink, #1a2e22);
  line-height: 1.35;
  margin-top: 1.5rem;
  text-wrap: balance;
  text-align: start !important;
}
.stat-32m-right {
  display: flex;
  flex-direction: column;
}
.stat-32m-heading {
  font-family: var(--font-body, 'Figtree', sans-serif);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 700;
  color: var(--forest-ink, #1a2e22);
  margin-bottom: 1.25rem;
  text-align: start !important;
}
.stat-32m-bubbles {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.stat-bubble {
  background: #faf6ee;
  border-radius: 20px;
  padding: 1.15rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  border: 1px solid rgba(26, 46, 34, 0.08);
  box-shadow: 0 2px 8px rgba(26, 46, 34, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
@media (min-width: 58rem) {
  .stat-bubble::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #faf6ee;
  }
}
.stat-bubble:hover {
  transform: translateX(4px);
  background: #fdfaf4;
}
.stat-bubble__icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: #fcece5;
  color: #f06858;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-bubble__text {
  font-family: var(--font-body, 'Figtree', sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--forest-ink, #1a2e22);
  line-height: 1.45;
  margin: 0;
  text-align: start !important;
}

/* Psychology Product Bridge (Image 5 & Product Enhancement Standard) */
.psychology-product-bridge {
  background: #ffffff;
  border-radius: 24px;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-block: clamp(2rem, 4vw, 3.25rem);
  box-shadow: 0 8px 30px rgba(26, 46, 34, 0.06);
  border: 1px solid rgba(26, 46, 34, 0.08);
}
.product-bridge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
@media (min-width: 54rem) {
  .product-bridge-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}
.product-bridge-packshot {
  width: 100%;
  max-height: 380px;
  object-fit: contain;
  border-radius: 18px;
  filter: drop-shadow(0 12px 24px rgba(26, 46, 34, 0.12));
}
.product-bridge-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.product-bridge-title {
  font-family: var(--font-display, 'Gabarito', sans-serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  color: var(--forest-ink, #1a2e22);
  margin: 0.75rem 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: start !important;
}
.product-bridge-desc {
  font-size: 1.05rem;
  color: var(--charcoal-body, #302f2e);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  text-align: start !important;
}
.product-bridge-features {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.product-bridge-feat {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--forest-ink, #1a2e22);
}
.icon-teal {
  color: #205e58;
}

/* 5 Pillars Numbering */
.family-page .pillar-num {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--terracotta, #f06858);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 1rem;
}


/* ============================================================
   5 · Viewport + anti-slop pass (2026-08-31)
   ------------------------------------------------------------
   Every block must fit one desktop viewport (900px at 1440), and
   the generic-AI patterns go: the red/green "authority vs bridge"
   cards (Bootstrap red #d9534f, Material green #2e7d32, neither in
   the brand), the numbered 1-5 pillar strip, the six identical icon
   boxes, the dark "three months later" banner, uppercase eyebrows,
   and the hero's trust micro-strip. Replacement layouts follow the
   client's own deck (slide 16 comparison, slide 13 check rows) and
   the Family LP mockup (copy beside one photo). Brand tokens only.
   ============================================================ */

/* Hero: badge + trust strip removed in markup; the CTA row is the
   last element now, so it carries the bottom spacing. */
.family-page .hero-fe__actions { margin-bottom: 0.25rem; }

/* The Daily Disconnect: photo two-thirds on the left, copy one-third on
   the right. The questions float over the wall as white cards, the same
   bubble as the homepage hero (.float--q): white, r-md, shadow-float,
   centred body text. They scale with the photo through container units. */
.disconnect-split {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 56rem) {
  .disconnect-split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.family-page .disconnect-split__copy .disconnect-payoff {
  margin: 0;
  max-width: 34ch;
  text-align: start;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.55;
  text-wrap: pretty;
}
.disconnect-split__media {
  position: relative;
  container-type: inline-size;
  margin: 0;
  border-radius: var(--r-lg, 1.75rem);
  overflow: hidden;
  background: #f1ebe4;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04),
              0 20px 44px -24px rgba(26, 26, 26, 0.26);
}
.disconnect-split__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1800 / 1344;
  object-fit: cover;
  display: block;
}
.dinner-bubbles {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dinner-bubble {
  position: absolute;
  z-index: 2;
  margin: 0;
  background: #fff;
  border-radius: clamp(0.75rem, 2.2cqw, 1.25rem);
  box-shadow: var(--shadow-float, 0 2px 6px rgba(26, 26, 26, 0.06), 0 22px 48px -18px rgba(26, 26, 26, 0.22));
  padding: 0.8em 1.1em;
  font-family: var(--text, "Figtree", system-ui, sans-serif);
  font-size: clamp(0.8125rem, 2cqw, 1.0625rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--body, #302f2e);
  text-align: center;
  text-wrap: balance;
  max-width: 15.5em;
}
/* Staggered around the mother's head, clear of every face. Tops are in em
   of the bubble's own text, so the gap between stacked bubbles is always
   exactly 1em: one-line bubble = 2.95em tall, two-line = 4.3em. */
.dinner-bubble--1 { top: 1.5em;  left: 50%; transform: translateX(-50%); }
.dinner-bubble--2 { top: 5em;    left: 5%; }
.dinner-bubble--4 { top: 8.95em; left: 19%; }   /* 5 + 2.95 + 1 */
.dinner-bubble--3 { top: 3.2em;  right: 5%; max-width: 12em; }
.dinner-bubble--5 { top: 8.5em;  right: 13%; max-width: 13.5em; } /* 3.2 + 4.3 + 1 */

/* The questions land one after another as the photo scrolls in,
   the way they pile up at the table. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dinner-bubble {
      animation: dinnerBubbleIn linear both;
      animation-timeline: view();
    }
    .dinner-bubble--1 { animation-range: entry 20% cover 30%; }
    .dinner-bubble--2 { animation-range: entry 35% cover 34%; }
    .dinner-bubble--3 { animation-range: entry 50% cover 38%; }
    .dinner-bubble--4 { animation-range: entry 65% cover 42%; }
    .dinner-bubble--5 { animation-range: entry 80% cover 46%; }
  }
}
@keyframes dinnerBubbleIn {
  from { opacity: 0; translate: 0 0.75rem; scale: 0.96; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}

/* Phones: five cards cannot fit over a 340px photo without covering the
   family, so they leave the photo and stack under it as a chat thread. */
@media (max-width: 40rem) {
  .disconnect-split__media { overflow: visible; background: none; box-shadow: none; }
  .disconnect-split__media img {
    border-radius: var(--r-md, 1.25rem);
    box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04),
                0 20px 44px -24px rgba(26, 26, 26, 0.26);
  }
  .dinner-bubbles {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    margin-top: 1.25rem;
  }
  .dinner-bubble,
  .dinner-bubble--1, .dinner-bubble--2, .dinner-bubble--3,
  .dinner-bubble--4, .dinner-bubble--5 {
    position: static;
    transform: none;
    animation: none;
    max-width: 85%;
    font-size: 0.9375rem;
    border-radius: var(--r-md, 1.25rem);
    text-align: start;
  }
}

/* Emma's story: depth chips instead of "SPIN 1 · WARM UP" step labels
   (green fun / yellow heart / pink real-talk, the deck's own ladder),
   and a light outcome card instead of a dark banner mid-page. */
.timeline-card__chip {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.85rem;
}
.timeline-card__chip--green { background: var(--sage-tint); color: var(--sage-dark); }
.timeline-card__chip--yellow { background: var(--tier-elementary-bg); color: var(--tier-elementary-text); }
.timeline-card__chip--pink { background: var(--tier-teen-bg); color: var(--tier-teen-text); }
.family-page .timeline-story-grid { margin-bottom: 1.5rem; }
.family-page .timeline-card { padding: clamp(1.25rem, 2vw, 1.5rem); }
.family-page .timeline-card__q { font-size: 1.05rem; margin-bottom: 0.75rem; }
.family-page .timeline-card__body { margin-bottom: 1rem; }
.family-page .outcome-banner {
  background: #ffffff;
  color: var(--body, #302f2e);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-subtle);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.family-page .outcome-banner__badge {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9375rem;
  color: var(--coral-deep, #d9503f);
  margin-bottom: 0.5rem;
}
.family-page .outcome-banner__title {
  color: var(--ink, #1a1a1a);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  margin-bottom: 0.75rem;
}
.family-page .outcome-banner__text { color: var(--body, #302f2e); font-size: 1rem; }

/* Pricing: no card images (the deck's pricing table has none), tighter
   internals, plain-case badges. */
.family-page .pricing-tiers-grid { gap: 1.25rem; margin-bottom: 1.5rem; }
.family-page .pricing-card { padding: clamp(1.25rem, 2vw, 1.6rem); }
.family-page .pricing-card__badge { text-transform: none; letter-spacing: 0; font-size: 0.8125rem; margin-bottom: 0.5rem; }
.family-page .pricing-card__desc { margin-bottom: 1rem; }
.family-page .pricing-card__price { margin-bottom: 1rem; }
.family-page .pricing-card__num { font-size: 2.5rem; }
.family-page .pricing-features-list { margin-bottom: 1.25rem; gap: 0.5rem; }
.family-page .guarantee-seal-box { padding: 1.1rem 1.5rem; gap: 1.1rem; }
.family-page .guarantee-seal-text h4 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.family-page .guarantee-seal-text p { font-size: 0.875rem; }

/* Age tiers: the tier intro lost its uppercase badge; keep the text tight. */
.family-page .tier-intro { margin-bottom: 1.5rem; }
.family-page .tier-intro__text { margin: 0; }

/* Hero CTA row: two buttons did not fit the 0.92fr column at 1440 and
   the second one slid under the photo. Let the row wrap. */
.family-page .hero-fe__actions { flex-wrap: wrap; }
/* Two plans from her deck, eight and six bullets: tighter list so the block fits one screen. */
.family-page .pricing-tiers-grid--two { max-width: 58rem; margin-inline: auto; grid-template-columns: 1fr 1fr; }
.family-page .pricing-features-list { font-size: 0.9rem; gap: 0.35rem; line-height: 1.35; margin-bottom: 1rem; }
.family-page .pricing-tiers-grid--two .pricing-card { padding: 1.25rem 1.4rem; }
.family-page .pricing-tiers-grid--two .pricing-card__desc { margin-bottom: 0.6rem; }
.family-page .pricing-tiers-grid--two .pricing-card__price { margin-bottom: 0.6rem; }
.family-page .guarantee-seal-box { padding: 0.9rem 1.25rem; }
@media (max-width: 48rem) { .family-page .pricing-tiers-grid--two { grid-template-columns: 1fr; } }
/* Pricing measured 949px with her two plans. */
.family-page #pricing.section { padding-block: clamp(2.5rem, 4vw, 3.5rem) !important; }
.family-page .pricing-features-list { font-size: 0.875rem; gap: 0.3rem; line-height: 1.3; }
.family-page .pricing-tiers-grid--two .pricing-card__title { font-size: 1.25rem; }
.family-page .pricing-tiers-grid--two .pricing-card__num { font-size: 2.25rem; }

/* The psychology block measured 948px with her comparison; same rhythm as the 365 page. */
.family-page #psychology.section { padding-block: clamp(2.5rem, 4vw, 3.25rem) !important; }

/* Iteration 171: one balanced, tighter rhythm across the Family page.
   Scoped here so the homepage and other product pages stay unchanged.
   The specificity also replaces the older per-section important overrides. */
.family-page #main-content > section {
  padding-block: var(--s-7, 3rem) !important;
}
.family-page #main-content > section.section {
  padding-block: var(--s-7, 3rem) !important;
}
@media (max-width: 48rem) {
  .family-page #main-content > section,
  .family-page #main-content > section.section {
    padding-block: var(--s-6, 2rem) !important;
  }
}

/* Do not stack the shared bridge list's trailing margin onto section padding. */
.family-page #psychology .bridge-points { margin-bottom: 0; }

/* The age-tier introduction shares the full card-grid width, not a
   narrow 640px column. Natural wrapping is retained on small screens. */
.family-page .tier-intro__text {
  width: 100%;
  max-width: none;
  text-align: center;
  text-wrap: pretty;
}