/* v246 — Family visual / UX pass. One override, loaded last on the Family pages that carry
   main[data-family-ux]. No brand change, no global typography change. */

/* ============ 1. five-level type scale ============ */
/* L1 page hero — strong, but it no longer fills the viewport, and it never splits a word */
main[data-family-ux] .family-hero h1,
main[data-family-ux] .fip-hero h1 {
  font-size: clamp(2rem, 4.1vw, 3.85rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
  max-width: 18ch;
  text-wrap: balance;
}
/* display headings elsewhere must not auto-hyphenate either */
main[data-family-ux] .family-membership-value__head h3,
main[data-family-ux] .family-membership-value h4 { hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal; }

/* L2 section heading */
main[data-family-ux] h2,
main[data-family-ux] .family-membership-value__head h3,
main[data-family-ux] .family-academy-value h3 {
  font-size: clamp(1.55rem, 2.55vw, 2.3rem);
  line-height: 1.14;
  letter-spacing: -.01em;
  text-wrap: balance;
}
/* L3 card / subsection heading */
main[data-family-ux] .family-membership-value h4,
main[data-family-ux] .family-free-v218__workspace h3,
main[data-family-ux] .container > h3 {
  font-size: clamp(1.18rem, 1.7vw, 1.5rem);
  line-height: 1.2;
}
/* compact components keep their own label size (the v238.3/v239 card title was being
   overridden to 64px by a section rule) */
main[data-family-ux] .fsp2383__title,
main[data-family-ux] .fihub239-proof__body h2 { font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.3; letter-spacing: 0; }

/* L4 body — readable measure and visible paragraph rhythm */
main[data-family-ux] .family-copy,
main[data-family-ux] .family-topic-lede,
main[data-family-ux] .family-topic-reference,
main[data-family-ux] section > .container > p { max-width: 68ch; }
main[data-family-ux] .family-topic-references p + p { margin-top: .95rem; }
main[data-family-ux] .family-topic-references { margin-top: clamp(20px, 2.6vw, 30px); padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(20, 32, 28, .12); }

/* ============ 2. purple membership section: context-correct contrast ============ */
#family-subscription .eyebrow { color: rgba(255, 255, 255, .78); }
#family-subscription .lede,
#family-subscription .fc245-system { color: rgba(255, 255, 255, .92); }
/* Pricing & Membership Terms: a light, neutral surface right under the purple offer, so the
   legal detail is readable without competing with the offer itself */
#family-subscription .fc245-terms {
  max-width: 1240px; margin: clamp(22px, 3vw, 34px) auto 0; padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 28px);
  background: #faf8f3; color: #23271f; border-radius: 16px; box-shadow: 0 2px 10px rgba(12, 6, 20, .18);
}
#family-subscription .fc245-terms h3 { color: #1b2320; font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
#family-subscription .fc245-terms__date { color: #5b6560; }
#family-subscription .fc245-table { color: #23271f; }
#family-subscription .fc245-table thead th { color: #4f5a55; }
#family-subscription .fc245-table th,
#family-subscription .fc245-table td { border-bottom-color: rgba(20, 32, 28, .14); }
#family-subscription .fc245-table tbody tr { background: #fff; }
#family-subscription .fc245-terms__note { color: #4a5551; font-size: .86rem; }
#family-subscription .fc245-founding { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3);
  border-left-color: #b8d8cc; color: #fff; }

/* ============ 3. one CTA grammar on the hub's four cards ============ */
.fihub239__card .btn {
  background: transparent;
  color: #1b2320;
  border: 1px solid rgba(20, 32, 28, .55);
  margin-top: auto;
}
.fihub239__card .btn:hover { background: #1b2320; color: #fff; }
.fihub239__card .btn:focus-visible { outline: 2px solid #c96f50; outline-offset: 2px; }
.fihub239__card p { flex: 1 1 auto; }

/* ============ 4. six practice cards: all real navigation, one affordance ============ */
.fip-choice--link { display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.fip-choice--link:hover { border-color: rgba(20, 32, 28, .35); box-shadow: 0 6px 18px rgba(20, 32, 28, .08); }
.fip-choice--link:focus-visible { outline: 2px solid #c96f50; outline-offset: 3px; }
.fip-choice__go { margin-top: auto; padding-top: .7rem; font-size: .92rem; font-weight: 600; color: #2f5d50; }
.fip-choice__go::after { content: " \2192"; }
/* one arrow per card: the v237 heading arrow would double the CTA arrow */
.fip-choice--link h3::after { content: none; }

/* ============ 5. deep-link notice for visitors who are not members ============ */
.fx246-notice { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1.1rem;
  padding: .75rem 1rem; border: 1px solid rgba(74, 124, 111, .4); border-left: 3px solid #4a7c6f;
  border-radius: 10px; background: rgba(74, 124, 111, .07); font-size: .95rem; }
.fx246-notice[hidden] { display: none; }
/* the hero container is a two-column grid: the notice spans it as its own first row */
.fx246-notice { grid-column: 1 / -1; }
.fx246-notice p { margin: 0; max-width: 60ch; }


/* the floating CTA stays out of the way where the page already shows its own offer */
/* the value proposition on purple reads as the reason to join, not a footnote */
#family-subscription .fc245-system { font-size: clamp(1.02rem, 1.35vw, 1.16rem); line-height: 1.6; max-width: 58ch; margin-top: .9rem; }

/* ============ 7. overflow found by the browser sweep ============ */
/* research hero was outside the L1 rule and split a long Russian word off-screen at 320 */
main[data-family-ux] .fir-hero h1 {
  font-size: clamp(2rem, 4.4vw, 4rem);
  line-height: 1.04;
  max-width: 16ch;
  hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal;
  text-wrap: balance;
}
/* the Body → Breath → … path kept a fixed column count on tablets and ran off the page */
main[data-family-ux] .family-path { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
main[data-family-ux] .family-path .family-step { min-width: 0; }
main[data-family-ux] .family-path .family-step h3 { hyphens: none; overflow-wrap: normal; word-break: normal; }

/* on phones the terms table stacks: one row = one membership, each value under its localized
   label. Nothing scrolls sideways and no word is squeezed into a broken column. */
@media (max-width: 640px) {
  #family-subscription .fc245-table { min-width: 0; }
  #family-subscription .fc245-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #family-subscription .fc245-table,
  #family-subscription .fc245-table tbody,
  #family-subscription .fc245-table tr,
  #family-subscription .fc245-table th,
  #family-subscription .fc245-table td { display: block; width: 100%; }
  #family-subscription .fc245-table tr { padding: .75rem .85rem; border: 1px solid rgba(20, 32, 28, .14); border-radius: 10px; margin-bottom: .6rem; }
  #family-subscription .fc245-table th,
  #family-subscription .fc245-table td { padding: .2rem 0; border: 0; }
  #family-subscription .fc245-table tbody th { font-size: 1rem; padding-bottom: .45rem; }
  #family-subscription .fc245-table td::before { content: attr(data-label); display: block; font-size: .7rem;
    letter-spacing: .06em; text-transform: uppercase; color: #5b6560; font-weight: 600; }
  #family-subscription .fc245-terms { padding: 16px 14px; }
}

/* the Practice Portal headline is a long sentence; 18ch made it five lines — give it room for 3–4 */
main[data-family-ux] .fip-hero h1 { max-width: 24ch; font-size: clamp(2rem, 3.6vw, 3.1rem); }