/* ── Tokens ──
   Base palette is the same as static/index.html (clay/cream/dark-warm-grey
   family). "marketing mode v2" (docs/project_state.md, "Homepage copy
   (locked 8 July 2026)") specifies three explicit zones on top of that base
   palette — this supersedes the earlier, more provisional "placeholder
   colours close to the app palette" note from the 1 July entry:
     - dark homepage zone: --homepage-bg / --homepage-text (new below)
     - Hiro product page: unchanged cream app palette (--canvas etc.)
     - light editorial zone (articles hub/article/contact): --editorial-bg
       (new below), body/heading colours reuse --body/--card exactly as
       locked, cluster accents reuse --primary (divorce/clay), --sage
       (children), --muted (finance/muted rose) — already in this file. */
:root {
  --canvas:         #EEE0CB;
  --surface:        #ffffff;
  --surface-soft:   #f5f0e8;
  --surface-card:   #efe9de;
  --primary:        #C2847A;
  --primary-active: #a9583e;
  --ink:            #141413;
  --body:           #5A5353;
  --body-strong:    #3d3938;
  --muted:          #A07178;
  --muted-soft:     #C4B5B0;
  --hairline:       #D4C4BC;
  --card:           #2E2825;
  --sage:           #8A9B7A;
  --red:            #c0392b;
  --homepage-bg:    #1C1815;
  --homepage-text:  #F5EFE8;
  --editorial-bg:   #FAF9F7;
  --price-card:     #DBBBA9;
  /* Hiro page tokens (16 July 2026), pulled directly from the design
     source's colors-marketing.css — new colour roles not used anywhere
     else on the site, so added rather than mapped onto an existing token. */
  --user-bubble:          #E8D8C8;
  --surface-dark-soft:    #352E2B;
  --surface-dark-elevated:#3d3330;
  --chip-border:          #BAA898;
  --on-dark:              #faf9f5;
  --on-dark-soft:         #a09d96;
  --clay-active:          #9c5a3e;
  --clay-disabled:        #e9e1d8;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--canvas);
  color: var(--body);
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea { font-family: inherit; outline: none; }
img { max-width: 100%; display: block; }

h1, h2, h3 { font-family: 'Source Serif 4', serif; font-weight: 400; color: var(--ink); }

/* Material Icons glyphs were rendering as literal ligature text (e.g.
   "description") because only the Google Fonts stylesheet <link> was
   present — that alone doesn't apply the font, this rule is the missing
   piece (16 July 2026, matches the design source's own inline icon
   styling, which applies font-family + font-feature-settings:'liga'
   directly to each icon span). */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
}

/* ── Nav ── */
/* 56px fixed height, 16px horizontal padding at mobile (17 July 2026,
   matches the design source's mobile artboards exactly, same values
   already used for .mobile-menu-header below) — was 20px vertical
   padding with no fixed height, so the bar's own size visibly changed
   between the closed and open states, not just the wordmark inside it.
   20px/24px padding is desktop-only now (in the existing
   @media(min-width:768px) block). */
.site-nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
.site-nav.on-dark { background: var(--homepage-bg); border-bottom-color: rgba(255,255,255,0.1); }
/* Nav size/hover/active treatment is now the same on every page (16 July
   2026) — previously only the homepage and familycourt.html had this larger
   24px/15px/32px-gap sizing and the underlined active state (via scoped
   .on-dark/.on-familycourt modifiers), while contact.html and every article page
   were still on the old 18px/13px/24px-gap base with no active-underline.
   Promoted to the shared base rule so every page matches exactly;
   .on-dark now only overrides colour for the dark background, not size. */
/* 20px at mobile (17 July 2026, matches the design source's mobile
   artboards exactly — both m0 "Mobile · Menu" and m1 "Mobile ·
   Homepage" use 20px for this wordmark). 24px is desktop-only (below,
   in the existing @media (min-width:768px) block) — previously this was
   24px unconditionally, so the open (mobile-menu, correctly 20px) and
   closed (this rule, wrongly still 24px) states didn't match. */
.nav-wordmark { font-family: 'Source Serif 4', serif; font-size: 20px; letter-spacing: -0.5px; color: var(--ink); }
.site-nav.on-dark .nav-wordmark { color: #fff; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: var(--body);
  transition: color 120ms;
}
.site-nav.on-dark .nav-links a { color: rgba(255,255,255,0.5); }
.nav-links a:hover { color: var(--primary); }
.nav-links a.active {
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--primary);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.site-nav.on-dark .nav-links a.active { color: #fff; }

/* ── Mobile menu (16 July 2026, matches the design source's "Mobile ·
   Menu" artboard exactly) — below 768px the desktop .nav-links row is
   replaced with a hamburger button that opens a full-screen dark
   overlay, regardless of which page/theme triggered it (the design
   source's own menu artboard is a single fixed-dark treatment, not a
   light/dark variant per page). ── */
.nav-links { display: none; }
.nav-hamburger {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; background: none; border: none; cursor: pointer;
  color: var(--ink);
}
.site-nav.on-dark .nav-hamburger { color: #fff; }
.nav-hamburger .material-icons { font-size: 24px; }

.mobile-menu-overlay {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: var(--homepage-bg); flex-direction: column;
}
.mobile-menu-overlay.open { display: flex; }
.mobile-menu-header {
  flex: 0 0 auto; height: 56px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-menu-wordmark { font-family: 'Source Serif 4', serif; font-size: 20px; letter-spacing: -0.5px; color: var(--homepage-text); }
.mobile-menu-close {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; background: none; border: none; cursor: pointer; color: var(--homepage-text);
}
.mobile-menu-close .material-icons { font-size: 24px; }
.mobile-menu-links { flex: 1; display: flex; flex-direction: column; padding: 32px 24px; }
.mobile-menu-links a {
  font-family: 'Source Serif 4', serif; font-size: 34px; font-weight: 300; letter-spacing: -0.5px;
  color: var(--homepage-text); text-decoration: none;
  padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mobile-menu-links a:last-child { border-bottom: none; }
.mobile-menu-cta { flex: 0 0 auto; padding: 0 24px 40px; }
.mobile-menu-cta .btn-primary { display: block; width: 100%; text-align: center; }

/* ── Footer ── */
/* Centered, 29 Aug 2026 — was left/default-aligned; site-wide request to
   center all three footer rows. Only text-align on the container:
   .site-footer-wordmark/-links/-copy are full-width block divs with no
   display/flex of their own, so this alone centers each one's content —
   no other markup or CSS change needed. */
.site-footer { background: var(--surface); padding: 32px 24px; text-align: center; }
.site-footer-wordmark {
  /* 29 Aug 2026: 16px -> 20px (+25%), site-wide request. */
  font-family: 'Source Serif 4', serif; font-size: 20px; color: var(--ink);
  padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--hairline);
}
.site-footer-copy { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--muted); }
/* Terms/Privacy footer links (29 Aug 2026, LAUNCH-PATH.md §6.1) — same row
   as the copyright line, same muted styling, just a link colour on hover
   so they read as links without competing with the wordmark above. */
.site-footer-links {
  /* 29 Aug 2026: 12px -> 9px (-25%), site-wide request. */
  font-family: 'Inter', sans-serif; font-size: 9px; color: var(--muted); margin-bottom: 8px;
}
.site-footer-links a { color: var(--muted); text-decoration: underline; }
.site-footer-links a:hover { color: var(--primary-active); }

/* ── Sections ── */
.section { padding: 48px 24px; }
/* Homepage + Hiro panels get 60% more vertical padding (16 July 2026) —
   scoped to these two pages via a body class rather than editing the
   shared .section rule, since contact.html and the articles hub/pages
   also use .section and must stay untouched. Left/right padding
   unchanged. Sections with their own inline padding-top:0 (for visual
   continuity between adjacent dark sections) keep that zero — inline
   styles always win over this class rule, so only their bottom padding
   picks up the increase. 48px * 1.6 = 76.8px, rounded to 77px. */
body.page-home .section, body.page-familycourt .section { padding-top: 77px; padding-bottom: 77px; }
.section-dark { background: var(--homepage-bg); color: var(--homepage-text); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--homepage-text); }
.section-cream { background: var(--canvas); }
.section-white { background: var(--surface); }
.section-emphasis { background: var(--surface-card); }
.section-editorial { background: var(--editorial-bg); }
.section-editorial h1, .section-editorial h2, .section-editorial h3 { color: var(--card); }
/* Homepage section 2's own background (16 July 2026, design source uses
   var(--ink) here specifically, not the shared --homepage-bg every other
   dark homepage section uses). */
.section-ink { background: var(--ink); color: var(--homepage-text); }
.section-ink h1, .section-ink h2, .section-ink h3 { color: var(--homepage-text); }
/* Homepage section 7's own background (16 July 2026, design source's
   explicit value for the closing manifesto, distinct from --homepage-bg). */
.section-manifesto { background: var(--card); color: var(--homepage-text); }
.section-inner { max-width: 1040px; margin: 0 auto; }
.section-inner-narrow { max-width: 720px; margin: 0 auto; }

/* ── Buttons ── */
.btn-primary {
  display: inline-block; padding: 12px 22px; border-radius: 8px;
  background: var(--primary); color: #fff;
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500;
  cursor: pointer; transition: background 150ms;
}
.btn-primary:hover { background: var(--primary-active); }
.btn-secondary {
  display: inline-block; padding: 12px 22px; border-radius: 8px;
  background: transparent; color: var(--ink); border: 1px solid var(--hairline);
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500;
  cursor: pointer; transition: background 150ms;
}
.btn-secondary:hover { background: var(--surface-soft); }
.section-dark .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.25); }
.section-dark .btn-secondary:hover { background: rgba(255,255,255,0.08); }

/* ── Hero ── */
.hero-eyebrow {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary);
  margin-bottom: 12px;
}
.hero-headline { font-size: 34px; line-height: 1.25; margin-bottom: 20px; }
.hero-headline .accent { color: var(--primary); }
/* hero-sub is familycourt.html-only (confirmed via grep), so edited directly
   rather than via a scoped modifier (16 July 2026, matches the design
   source: serif, 20px, 520px max-width, not the old sans-serif 16px). */
.hero-sub {
  font-family: 'Source Serif 4', serif; font-weight: 300; color: var(--ink);
  font-size: 20px; line-height: 1.55; margin-bottom: 24px; max-width: 520px;
}
/* familycourt.html's real hero banner photo (16 July 2026, matches the design
   source's 366x490 image-slot exactly). */
/* Fluid, uncropped (16 July 2026) — was a fixed 366x490 box with
   object-fit:cover, which cut into the photo's own baked-in caption
   bubble at some viewport widths on resize. height:auto preserves the
   image's real aspect ratio and scales proportionally with its column. */
/* 32px gap above the image at mobile (16 July 2026, matches the design
   source's mobile artboard exactly) — .two-col only becomes a grid at the
   768px desktop breakpoint, so below that the text and image just stacked
   directly with no gap, and the image touched the CTA button above it.
   Desktop is untouched: .two-col's own align-items:center handles
   vertical centring there, this margin only needs to exist below 768px. */
.familycourt-hero-photo { width: 100%; height: auto; border-radius: 24px; display: block; margin-top: 32px; }
/* Homepage-only opening-statement modifier (16 July 2026, matches the
   design source exactly) — centred, wider max-width than the shared
   .hero-headline's own 760px desktop cap (familycourt.html's H1 keeps that base
   sizing untouched, confirmed via grep before adding this). */
.hero-headline-home { text-align: center; max-width: 1000px; margin: 0 auto 20px; }

/* Section 2: three real case-photo images, captions already baked in.
   auto-fit/minmax (16 July 2026) instead of a fixed 3-column + breakpoint
   pair — reflows to fewer columns naturally as the viewport narrows,
   rather than needing a separate mobile override. 260px keeps these
   portrait photo cards comfortably readable. */
.case-image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 48px; }
/* Fluid, uncropped (16 July 2026) — same reasoning as .familycourt-hero-photo:
   a fixed height + cover was cropping into these photos' own baked-in
   caption bubbles on resize. All three images share the same native
   aspect ratio, so height:auto keeps the grid perfectly even. */
.case-image-grid img { width: 100%; height: auto; border-radius: 24px; display: block; }

/* Section 3: persistence statement, now a <p> not an <h2> (16 July 2026).
   Mobile text size 30% smaller (17 July 2026) — 38px desktop value moved
   into the existing @media(min-width:768px) block below; 27px here is
   the mobile default (38 * 0.7 = 26.6, rounded to 27). */
.persistence-statement {
  font-family: 'Source Serif 4', serif; font-weight: 400; color: var(--ink);
  font-size: 27px; line-height: 1.4; letter-spacing: -0.6px;
}

/* Section 4: "No more..." negation lines, full display-text treatment
   (16 July 2026) — was a small 16px sans-serif bulleted list, this is the
   largest visual gap on the page, needs the full display-text treatment
   at the design source's exact size, not a font-size tweak. Mobile text
   size 30% smaller (17 July 2026), same pattern as .persistence-statement
   above — 44 * 0.7 = 30.8, rounded to 31. */
.negation-list { display: flex; flex-direction: column; }
.negation-line {
  font-family: 'Source Serif 4', serif; font-weight: 300;
  font-size: 31px; line-height: 1.25; letter-spacing: -0.5px;
  padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,0.1);
  color: var(--price-card);
}
.negation-heading { color: var(--homepage-text); }
.negation-line-last { border-bottom: none; }

/* Section 5 heading and section 7 manifesto text, mobile 30% smaller
   (17 July 2026) — previously inline-styled at their desktop sizes
   unconditionally (40px / 29px); moved into these classes so a mobile
   default + desktop override is possible (inline styles can't be
   overridden by a media query, regardless of specificity tricks). */
.capability-heading { font-size: 28px; letter-spacing: -0.8px; }
.manifesto-text {
  font-family: 'Source Serif 4', Georgia, serif; font-weight: 300; color: var(--homepage-text);
  font-size: 20px; line-height: 1.7; letter-spacing: -0.3px;
}

/* ── Hiro page (16 July 2026, matches the design source exactly) ── */
.section-familycourt-intro { background: var(--user-bubble); }
.familycourt-intro-inner { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.familycourt-intro-statement {
  font-family: 'Source Serif 4', serif; font-weight: 300; color: var(--ink);
  font-size: 27px; line-height: 1.4; letter-spacing: -0.4px;
}
.familycourt-facet-label {
  border-top: 2px solid var(--primary); padding-top: 16px;
  font-family: 'Source Serif 4', serif; font-size: 22px; font-weight: 300; color: var(--ink);
}
.familycourt-intro-body {
  font-family: 'Source Serif 4', serif; font-weight: 300;
  font-size: 19px; line-height: 1.7; color: var(--surface-dark-soft);
}

.familycourt-case-heading {
  font-family: 'Source Serif 4', serif; font-weight: 300; color: var(--ink);
  font-size: 44px; line-height: 1.1; letter-spacing: -1px;
  margin-bottom: 64px; max-width: 640px;
}
.familycourt-case-caption { font-family: 'Source Serif 4', serif; font-weight: 300; font-size: 20px; line-height: 1.5; color: var(--body); }
.familycourt-case-caption-strong { font-family: 'Source Serif 4', serif; font-weight: 300; font-size: 20px; line-height: 1.45; color: var(--ink); margin-top: 4px; }
/* Fluid, uncropped (16 July 2026) — same reasoning as the other Hiro
   images above; all three share the same native aspect ratio. */
.familycourt-case-photo { width: 100%; height: auto; border-radius: 24px; margin-top: 24px; display: block; }
.familycourt-case-closing {
  font-family: 'Source Serif 4', serif; font-weight: 300; color: var(--ink);
  font-size: 22px; line-height: 1.6; max-width: 560px; margin-top: 64px;
}

.familycourt-testimonial-divider { width: 44px; height: 2px; background: var(--primary); margin: 0 0 56px; }
/* 1 column at mobile (16 July 2026, matches the design source's mobile
   artboard exactly — confirmed via the Design MCP, not guessed), 2 at the
   medium/"minimum width" range once the 768px breakpoint hits (before
   that, 3 columns of a 1040px-max container get too tight to read), 3 at
   full desktop width. CSS columns (masonry) has no auto-fit equivalent,
   so this genuinely needs explicit breakpoints, unlike the card grids. */
.familycourt-testimonial-grid { column-count: 1; column-gap: 24px; }
.familycourt-testimonial { margin: 0 0 24px; break-inside: avoid; border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.familycourt-testimonial blockquote { margin: 0; font-family: 'Source Serif 4', serif; font-weight: 300; font-size: 18px; line-height: 1.6; }
.familycourt-testimonial figcaption { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; }
.familycourt-testimonial-1 { background: var(--primary); }
.familycourt-testimonial-1 blockquote { color: #fff; }
.familycourt-testimonial-1 figcaption { color: var(--card); }
.familycourt-testimonial-2 { background: var(--body-strong); }
.familycourt-testimonial-2 blockquote { color: #fff; }
.familycourt-testimonial-2 figcaption { color: var(--chip-border); }
.familycourt-testimonial-3 { background: var(--card); padding: 32px; gap: 22px; }
.familycourt-testimonial-3 blockquote { font-size: 26px; line-height: 1.35; letter-spacing: -0.4px; color: var(--on-dark); }
.familycourt-testimonial-3 figcaption { color: var(--on-dark-soft); }
.familycourt-testimonial-4 { background: #fff; }
.familycourt-testimonial-4 blockquote { color: var(--body-strong); }
.familycourt-testimonial-4 figcaption { color: var(--muted); }
.familycourt-testimonial-5 { background: var(--clay-active); padding: 32px; gap: 8px; }
.familycourt-testimonial-5 blockquote { font-size: 22px; line-height: 1.45; letter-spacing: -0.3px; color: #fff; }
.familycourt-testimonial-5 figcaption { color: var(--card); margin-top: 12px; }
.familycourt-testimonial-6 { background: var(--on-dark-soft); }
.familycourt-testimonial-6 blockquote { color: #fff; }
.familycourt-testimonial-6 figcaption { color: var(--surface-dark-soft); }

/* "See Hiro in action" bento grid (16 July 2026, matches the design
   source exactly) — 5 concrete UI-mockup cards. */
.familycourt-bento { background: var(--chip-border); }
/* auto-fit/minmax (16 July 2026) — a plain fixed repeat(3,1fr) was
   completely illegible at real mobile widths (checked directly: cards
   cut off at the viewport edge at 375px). auto-fit alone handles that
   fine (collapses to 1 column once 260px won't fit twice). The one
   remaining imperfection: the first card's grid-row:span 2 leaves a
   small empty gap specifically at 2-column intermediate widths
   (grid-auto-flow:dense tried, didn't close it — implicit row-track
   heights are driven by unrelated cards, not just cell placement).
   Accepted as a minor cosmetic gap at one width range rather than
   reintroducing a hardcoded breakpoint for it. */
.familycourt-bento-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: start; }
.familycourt-bento-card { border-radius: 12px; padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.familycourt-bento-card-1 { grid-row: span 2; padding: 28px; gap: 16px; background: var(--clay-disabled); }
.familycourt-bento-card-3 { gap: 24px; background: var(--clay-disabled); }
.familycourt-bento-card-dark { background: var(--card); }
.familycourt-bento-eyebrow { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.familycourt-bento-bubble-file {
  display: inline-flex; align-items: center; gap: 9px; align-self: flex-end;
  padding: 9px 12px; border-radius: 8px; background: var(--card);
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; color: var(--surface-card);
}
.familycourt-bento-bubble-user {
  align-self: flex-end; max-width: 88%;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; line-height: 1.45;
  color: var(--body-strong); padding: 10px 14px; border-radius: 16px 16px 3px 16px; background: #fff;
}
.familycourt-bento-familycourt-tag {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--primary);
}
.familycourt-bento-familycourt-tag::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--primary); }
.familycourt-bento-reply { font-family: 'Source Serif 4', serif; font-weight: 300; font-size: 19px; line-height: 1.55; color: var(--surface-dark-soft); }
.familycourt-bento-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--primary); }

.familycourt-timeline { display: flex; flex-direction: column; }
.familycourt-timeline-item { display: flex; gap: 14px; }
.familycourt-timeline-rail { display: flex; flex-direction: column; align-items: center; }
.familycourt-timeline-dot { width: 12px; height: 12px; border-radius: 999px; }
.familycourt-timeline-dot-done { background: rgba(250,249,245,0.4); }
.familycourt-timeline-dot-current { background: var(--primary); box-shadow: 0 0 0 4px rgba(207,118,74,0.25); }
.familycourt-timeline-dot-upcoming { background: transparent; border: 2px solid rgba(250,249,245,0.25); }
.familycourt-timeline-line { flex: 1; width: 2px; background: rgba(250,249,245,0.15); margin-bottom: -22px; }
.familycourt-timeline-item > div:last-child { padding-bottom: 22px; }
.familycourt-timeline-label { font-family: 'Source Serif 4', serif; font-size: 17px; line-height: 1.4; font-weight: 300; }
.familycourt-timeline-label-done { color: rgba(250,249,245,0.55); }
.familycourt-timeline-label-current { color: var(--on-dark); }
.familycourt-timeline-label-upcoming { color: rgba(250,249,245,0.4); }
.familycourt-timeline-date { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(250,249,245,0.4); margin-top: 3px; }
.familycourt-timeline-date-current { color: var(--primary); }
.familycourt-timeline-date-upcoming { color: rgba(250,249,245,0.32); }

.familycourt-deadline-date { font-family: 'Source Serif 4', serif; font-size: 44px; font-weight: 300; letter-spacing: -1px; color: var(--ink); line-height: 1; }
.familycourt-deadline-sub { font-family: 'Source Serif 4', serif; font-size: 18px; font-weight: 300; color: var(--surface-dark-soft); margin-top: 8px; }

.familycourt-form-box { border-radius: 8px; padding: 16px; background: var(--hairline); }
.familycourt-form-item { display: flex; gap: 10px; align-items: flex-start; font-family: 'Source Serif 4', serif; font-size: 15px; line-height: 1.45; font-weight: 300; color: var(--surface-dark-soft); }
.familycourt-form-radio { width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--primary); flex: 0 0 auto; margin-top: 2px; }

.familycourt-checklist-item { display: flex; gap: 12px; align-items: center; }
.familycourt-checklist-check { width: 18px; height: 18px; border-radius: 999px; border: 2px solid rgba(250,249,245,0.3); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.familycourt-checklist-check-done { border: none; background: var(--sage); }
.familycourt-checklist-label { font-family: 'Source Serif 4', serif; font-size: 15px; font-weight: 300; color: var(--on-dark); }
.familycourt-checklist-label-done { color: rgba(250,249,245,0.55); }

.section-familycourt-closing { background: var(--surface-dark-elevated); }
.familycourt-closing-heading {
  font-family: 'Source Serif 4', serif; font-weight: 300; color: var(--canvas);
  font-size: 48px; line-height: 1.1; letter-spacing: -1px;
}
.familycourt-closing-sub {
  font-family: 'Source Serif 4', serif; font-weight: 300; color: #fff;
  font-size: 20px; line-height: 1.65; margin-top: 28px;
}
.familycourt-closing-feature { display: flex; flex-direction: column; gap: 10px; }
.familycourt-closing-feature .material-icons { font-size: 22px; color: var(--primary); }
.familycourt-closing-feature h4 { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; color: var(--on-dark); margin: 0; }
.familycourt-closing-feature p { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--canvas); margin: 0; }

/* .three-col (familycourt.html-only, confirmed via grep) — auto-fit/minmax
   (16 July 2026) instead of a desktop-only 3-column rule with no mobile
   grid at all (it just stacked as plain blocks below 768px). Now a single
   rule that reflows at any width. 180px suits its default use (short
   facet-label text); the two other usages need more room for photos or
   paragraph text, so they override minmax inline, same pattern already
   used for their gap values. */
.three-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }

/* ── Feature / dark cards ── */
/* auto-fit/minmax (16 July 2026) instead of 1-column mobile + 4-column
   desktop breakpoint — reflows to however many 240px+ columns fit at any
   width, no separate mobile rule needed. 240px fits this card's icon +
   serif title + paragraph comfortably at its 32px/28px padding. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 32px; }
.dark-feature-card {
  background: var(--card); border-radius: 12px; padding: 32px 28px;
  color: rgba(255,255,255,0.85);
  display: flex; flex-direction: column; gap: 24px;
}
.dark-feature-card .material-icons { color: var(--primary); font-size: 34px; }
.dark-feature-card h3 { color: #fff; font-family: 'Source Serif 4', serif; font-size: 22px; font-weight: 300; }
.dark-feature-card p { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.6); }

.image-placeholder {
  background: var(--surface-card); border-radius: 12px;
  aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px; text-align: center; padding: 16px;
}

/* ── CTA callout card ── */
.cta-card {
  background: var(--surface-card); border-radius: 16px; padding: 32px 24px; text-align: center;
}
.cta-card.on-dark-section { background: rgba(255,255,255,0.06); }
.cta-card-eyebrow {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted);
}
.cta-card h3 { font-size: 24px; margin: 8px 0 12px; }
.cta-card p { font-size: 14px; line-height: 1.6; margin-bottom: 20px; }

/* ── Product teaser panels (section 6) — redesigned 3 Sept 2026 ──
   Was one full-bleed photo panel (dark overlay, white-on-photo text) for
   Family Court Assistant alone. Replaced with two matching white cards —
   Family Court Assistant + SEND Assistant — no background photo/overlay,
   text colours switched to the on-white palette (--ink/--body/--primary).
   .cta-panel-row stacks the two cards on mobile (each full width) and
   sits them side by side from 768px (see the desktop @media block below),
   each then roughly half the width the single photo panel used to occupy.
   Title 25% smaller than the old panel's 65px (65 * 0.75 = 48.75, rounded
   to 49px) — reads against a plain white card now, not a full-bleed photo. */
.cta-panel-row {
  display: flex; flex-direction: column; gap: 24px;
}
.cta-panel {
  flex: 1; background: var(--surface); border-radius: 40px;
  display: flex; align-items: center; justify-content: center;
  padding: 48px 24px;
}
.cta-panel-content {
  text-align: center; max-width: 420px;
}
.cta-panel-content h3 { color: var(--ink); font-size: 49px; margin-bottom: 12px; }
.cta-panel-content .cta-card-eyebrow { color: var(--primary); font-size: 15px; }
.cta-panel-content p { color: var(--body); font-size: 15px; line-height: 1.6; margin: 12px 0 24px; }

/* Dark inline CTA card used at the end of article pages */
.article-cta {
  background: var(--card); border-radius: 12px; padding: 24px; margin: 32px 0;
}
.article-cta-eyebrow {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--primary); margin-bottom: 10px;
}
.article-cta p { color: rgba(255,255,255,0.85); font-size: 15px; line-height: 1.55; margin-bottom: 16px; }
/* Two-button row (17 July 2026) — "Meet Hiro" (primary) + "Start your
   free trial" (secondary/outline, reusing the existing .btn-secondary
   style rather than inventing a new one). .article-cta isn't wrapped in
   .section-dark, so .btn-secondary's default dark ink text would be
   illegible on this card's own dark background — same colour/border
   override .section-dark already applies elsewhere, scoped here instead. */
.article-cta-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
/* text-decoration:none needed here too (17 July 2026) — .article-prose a's
   underline (meant for genuine inline prose links) was still winning on
   this button same as .btn-primary's earlier fix; color/border alone
   don't override it. */
.article-cta .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.25); text-decoration: none; }
.article-cta .btn-secondary:hover { background: rgba(255,255,255,0.08); }

/* ── Chips (familycourt.html-only, confirmed via grep) ──
   Resized to the design source's exact values (16 July 2026) — was 13px
   text/15px icon/6px padding, a much smaller treatment than the source's
   19px text/26px icon/14px-24px padding. */
.chip-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 64px; }
.chip-static {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--surface-card); border-radius: 999px;
  padding: 14px 24px; font-family: 'Inter', sans-serif; font-size: 19px; font-weight: 500; color: var(--body);
}
.chip-static .material-icons { font-size: 26px; color: var(--primary); }

/* ── Practice-area tabs (Articles hub) ── */
.tab-row { display: flex; gap: 24px; border-bottom: 1px solid var(--hairline); margin: 24px 0 16px; }
.tab-item {
  padding: 0 0 10px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  color: var(--body); border-bottom: 2px solid transparent; cursor: pointer;
}
.tab-item.active { color: var(--ink); border-bottom-color: var(--primary); }
.tab-item.disabled { color: var(--muted-soft); cursor: default; }

/* ── Cluster filter chips ── */
.filter-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filter-chip {
  padding: 8px 18px; border-radius: 999px; border: 1px solid var(--hairline);
  background: var(--surface); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  color: var(--body); cursor: pointer; transition: background 120ms, color 120ms;
}
.filter-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── Article cards ── */
/* auto-fit/minmax (16 July 2026) instead of 1-column mobile + 3-column
   desktop breakpoint. 280px because article titles run long (e.g. "What
   is a clean break and how is it different from a consent order?"). */
.article-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.article-card {
  background: var(--surface); border-radius: 16px; padding: 32px;
  min-height: 320px;
  border: 1px solid transparent;
  --card-accent: transparent;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 150ms;
}
.article-card:hover { border-color: var(--card-accent); }
.article-card:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.article-card[hidden] { display: none; }
/* --card-accent per cluster, set via :has() against the cluster-tag the
   existing hub JS already renders inside each card — no JS/class-name
   changes needed, the card wrapper itself carries no cluster class today. */
.article-card:has(.cluster-tag.divorce)  { --card-accent: var(--primary); }
.article-card:has(.cluster-tag.children) { --card-accent: var(--sage); }
.article-card:has(.cluster-tag.finance)  { --card-accent: var(--muted); }
.cluster-tag {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600;
}
/* Cluster accents per docs/project_state.md "marketing mode v2": divorce/clay, children/sage, finance/muted rose */
.cluster-tag.divorce { background: var(--surface-card); color: var(--primary-active); }
.cluster-tag.children { background: var(--surface-card); color: var(--sage); }
.cluster-tag.finance { background: var(--surface-card); color: var(--muted); }
/* Icon before the cluster label — scoped to the hub grid only, since the
   generated article-page template (scripts/build_website_articles.py)
   already renders its own explicit icon span for this same class and must
   not end up with a duplicate. */
#article-grid .cluster-tag::before { font-family: 'Material Icons'; font-size: 18px; line-height: 1; }
#article-grid .cluster-tag.divorce::before  { content: "call_split"; }
#article-grid .cluster-tag.children::before { content: "family_restroom"; }
#article-grid .cluster-tag.finance::before  { content: "payments"; }
.article-card h3 { font-size: 19px; line-height: 1.35; }
.article-card p { font-size: 13px; line-height: 1.5; color: var(--body); }
.article-card .read-time { font-size: 12px; color: var(--muted-soft); margin-top: 4px; }
.hub-empty {
  font-family: 'Inter', sans-serif; font-size: 14px; font-style: italic; color: var(--muted);
  padding: 24px 0; grid-column: 1 / -1;
}
.hub-empty[hidden] { display: none; }

/* ── Article hub pagination (16 July 2026) — page-number scroller with
   prev/next arrows, current page marked with an underscore rather than a
   filled background. With today's 9 reviewed articles this renders as a
   single page 1 with both arrows disabled; it activates automatically
   once more articles are reviewed and the build script re-run. */
.page-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 48px; }
.page-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--hairline);
  background: var(--surface); color: var(--ink); transition: background 120ms;
}
.page-arrow .material-icons { font-size: 20px; }
.page-arrow:hover:not(:disabled) { background: var(--surface-soft); }
.page-arrow:disabled { opacity: 0.3; cursor: default; }
.page-numbers { display: flex; align-items: center; gap: 20px; }
.page-number {
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: var(--muted-soft);
  padding-bottom: 4px; border-bottom: 2px solid transparent;
}
.page-number:hover { color: var(--body); }
.page-number.active { color: var(--ink); border-bottom-color: var(--primary); }

/* ── Article page prose ── */
.article-header { max-width: 680px; margin: 0 auto; }
/* Breadcrumb trail (2 Sept 2026) — first element in .article-header, above
   the cluster pill. Same 12px Inter/muted treatment as .article-byline and
   the footer links; generated by the build scripts from each article's
   cluster + title, mirrored by BreadcrumbList JSON-LD. */
.breadcrumb {
  font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.5;
  color: var(--muted); margin-bottom: 18px;
}
.breadcrumb a { color: var(--muted); text-decoration: underline; }
.breadcrumb a:hover { color: var(--primary-active); }
.breadcrumb [aria-current="page"] { color: var(--body); }
.breadcrumb-sep { margin: 0 8px; color: var(--muted-soft); }
.article-byline {
  font-family: 'Inter', sans-serif; font-size: 12px; color: var(--muted);
  padding: 16px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  margin: 20px 0 32px;
}
.article-prose { max-width: 680px; margin: 0 auto; font-size: 16px; line-height: 1.7; }
.article-prose h2 { font-size: 24px; margin: 36px 0 14px; }
.article-prose p { margin-bottom: 16px; }
.article-prose ul, .article-prose ol { margin: 0 0 16px 22px; }
.article-prose li { margin-bottom: 10px; }
.article-prose a { color: var(--primary-active); text-decoration: underline; }
/* .article-prose a's higher specificity (one class + one tag) was beating
   .btn-primary's own colour/underline on the CTA button nested inside it
   (16 July 2026) — button box/padding still rendered, but the text came
   out dark and underlined instead of solid white, so it read as a broken
   link rather than the same CTA button used on every other page. Restores
   the intended look without touching genuine inline prose links. */
.article-prose a.btn-primary { color: #fff; text-decoration: none; }
.article-prose hr { border: none; border-top: 1px solid var(--hairline); margin: 28px 0; }
.article-prose .faq-q { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.article-disclaimer {
  font-family: 'Inter', sans-serif; font-size: 12px; font-style: italic; color: var(--muted);
  line-height: 1.6; margin-top: 32px;
}
/* End-of-article "Related articles" block (finding T2, 2 Sept 2026) — a
   mechanical internal-link stopgap generated by build_website_articles.py
   (curated `related:` list, or the next few same-cluster articles). Inline
   contextual links per CONTENT_SPEC.md Step 7 remain the real target; this
   only guarantees every article carries some sibling links. Sits between the
   prose and the .article-cta card. */
.article-prose .related-articles {
  margin: 40px 0 8px; padding-top: 24px; border-top: 1px solid var(--hairline);
}
.article-prose .related-articles h2 { font-size: 18px; margin: 0 0 14px; }
.article-prose .related-articles ul { margin: 0 0 0 22px; }
.article-prose .related-articles li { margin-bottom: 8px; }

/* Retention table, Privacy Policy §9 (29 Aug 2026) — first table anywhere
   in .article-prose; no existing page used one, so this is purely
   additive and doesn't affect any other page's rendering. */
.article-prose table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 15px; }
.article-prose th, .article-prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline); }
.article-prose th { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--muted); font-weight: 600; }

/* ── Contact form ── */
.contact-form { display: flex; flex-direction: column; gap: 14px; max-width: 440px; }
/* Same reasoning as .form-message[hidden] below — an author rule setting
   display always beats the UA stylesheet's [hidden]{display:none}, so the
   form stayed visible after submission despite the JS setting hidden=true
   (caught via a real screenshot, not assumed). */
.contact-form[hidden] { display: none; }
/* Same bug, same fix, on the "Send another message" button: .btn-primary
   sets display:inline-block, which beats the UA [hidden]{display:none}
   rule, so this button was visible on page load instead of only
   appearing after a successful submit. */
#contact-form-reset[hidden] { display: none; }
.form-input {
  width: 100%; background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px;
  padding: 12px 14px; font-family: 'Inter', sans-serif; font-size: 15px; color: var(--ink);
  transition: border-color 120ms;
}
.form-input::placeholder { color: var(--muted); }
.form-input:focus { border-color: var(--primary); }
textarea.form-input { resize: vertical; min-height: 120px; }
.form-message {
  font-family: 'Inter', sans-serif; font-size: 13px; color: var(--red); line-height: 1.4;
}
.form-message[hidden] { display: none; }

/* ── Desktop ── */
@media (min-width: 768px) {
  .site-nav { height: auto; padding: 20px 48px; }
  .nav-links { display: flex; }
  .nav-hamburger { display: none; }
  .nav-wordmark { font-size: 24px; }
  /* Desktop values for the 4 mobile-reduced text blocks above. */
  .persistence-statement { font-size: 38px; }
  .negation-line { font-size: 44px; }
  .capability-heading { font-size: 40px; }
  .manifesto-text { font-size: 29px; }
  .section { padding: 72px 48px; }
  /* 72px * 1.6 = 115.2px, rounded to 115px — see base-rule comment above. */
  body.page-home .section, body.page-familycourt .section { padding-top: 115px; padding-bottom: 115px; }
  .hero-headline { font-size: 48px; max-width: 760px; }
  /* Homepage-only override (16 July 2026, matches the design source's
     1280px artboard exactly) — the shared .hero-headline desktop rule
     above stays untouched for familycourt.html's own H1. */
  .hero-headline-home { font-size: 58px; line-height: 1.14; letter-spacing: -1.5px; max-width: 1000px; }
  /* Hiro-only H1 override (16 July 2026, matches the design source) —
     added alongside the shared .hero-headline rule above, same pattern
     as .hero-headline-home, so familycourt.html's own H1 gets its exact size
     without touching what homepage's H1 inherits from the shared rule. */
  .hero-headline-familycourt { font-size: 50px; line-height: 1.07; letter-spacing: -1.5px; }
  /* .two-col is familycourt.html-only (confirmed via grep), edited directly:
     design's asymmetric 1.05fr/0.95fr ratio, 64px gap, 1120px cap — was
     an even 1fr/1fr split, 48px gap, uncapped width. */
  .two-col { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; max-width: 1120px; margin: 0 auto; }
  /* Only needed below 768px (see base-rule comment) — .two-col's own
     align-items:center handles vertical centring once it's a real grid. */
  .familycourt-hero-photo { margin-top: 0; }
  .familycourt-testimonial-grid { column-count: 2; }
  /* Product teaser panels (section 6, homepage) — side by side from
     768px; stacked below that (base rule above). */
  .cta-panel-row { flex-direction: row; }
}

/* Third testimonial tier: full 3 columns once there's enough room in the
   1040px-max container for them to stay readable (see base-rule comment
   on .familycourt-testimonial-grid above). */
@media (min-width: 1024px) {
  .familycourt-testimonial-grid { column-count: 3; }
}

/* ── Scroll fade-in (1 Sep 2026; progressive-enhancement rework 3 Sep 2026) ──
   .fade-in is VISIBLE BY DEFAULT and depends on no JavaScript at all. The
   hidden-then-reveal starting state is opt-in: nav.js adds .js-ready to
   <html> only once it has confirmed IntersectionObserver exists and the
   observer was constructed. So blocked / failed / slow JS, or a fast mobile
   scroll that outruns the observer, simply leaves every block on screen.
   When .js-ready is present the element starts invisible and nudged 18px
   down; nav.js's observer adds .is-visible the first time it scrolls into
   view and it eases up over ~0.55s, then unobserves so it never replays.
   Under prefers-reduced-motion nav.js never adds .js-ready, so the base
   (visible, no transition) rule is what applies. */
.fade-in {
  opacity: 1;
  transform: none;
}
.js-ready .fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.js-ready .fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js-ready .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}