/*
 * fr-landing.css
 *
 * Shared stylesheet for the unified landing-page.php template and all
 * section partials in /template-parts/landing/.
 *
 * Organisation:
 *   1. Design tokens (CSS custom properties)
 *   2. Reset & base typography
 *   3. Layout primitives (containers, sections)
 *   4. Section background variants (the hierarchical contrast system)
 *   5. Reusable component primitives (eyebrows, headings, body text,
 *      links, buttons, icons, cards)
 *   6. Section-specific styles (added as each partial is built; Phase 3a
 *      includes hero only)
 *   7. Utility classes (fade-in observer, accessibility helpers)
 *   8. Responsive breakpoints
 *
 * Contrast hierarchy:
 *   Every reusable component declares default colours appropriate for
 *   light backgrounds (.fr-section, .fr-section-alt) then is overridden
 *   inside .fr-hero (navy bg) and .fr-section-navy (dark bg) where
 *   needed. This keeps the cascade predictable - a new section dropped
 *   into the page inherits the right colours without per-section CSS.
 */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Navy palette - hero, navy section variant */
  --navy:           #111d3a;
  --navy-mid:       #1a2e5a;
  --navy-light:     #253d6b;

  /* Gold palette - accents, eyebrows, CTAs */
  --gold:           #b8993e;
  --gold-light:     #d4b864;
  --gold-muted:     #9a8237;
  --gold-pale:      rgba(184, 153, 62, 0.08);

  /* Surfaces */
  --warm-white:     #faf9f6;     /* fr-section background */
  --warm-gray:      #f4f2ed;     /* fr-section-alt background */
  --card-bg:        #ffffff;     /* default card surface on light bg */

  /* Text */
  --text-dark:      #1c2437;     /* headings on light bg */
  --text-body:      #3d4556;     /* body text on light bg */
  --text-muted:     #6b7280;     /* secondary text */
  --text-on-navy:   rgba(255, 255, 255, 0.85);
  --text-on-navy-muted: rgba(255, 255, 255, 0.65);

  /* Borders */
  --border-soft:    #e5e2db;
  --border-strong:  #cfc8b8;
  --border-on-navy: rgba(212, 184, 100, 0.25);

  /* Status / semantic */
  --med-teal:       #1a6b5a;
  --med-teal-light: #238c76;

  /* Typography */
  --font-serif:     'Crimson Pro', Georgia, serif;
  --font-sans:      'Work Sans', 'Segoe UI', sans-serif;

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  14px;
  --space-4:  22px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  72px;
  --space-8:  100px;

  /* Layout */
  --container-narrow: 760px;
  --container:        960px;   /* audit canonical - was 1140 */
  --container-wide:   1120px;  /* audit canonical - was 1280 */

  /* Effects */
  --radius:         4px;
  --radius-lg:      8px;
  --shadow-card:    0 2px 8px rgba(17, 29, 58, 0.04),
                    0 8px 24px rgba(17, 29, 58, 0.06);
  --shadow-lifted:  0 4px 16px rgba(17, 29, 58, 0.08),
                    0 16px 48px rgba(17, 29, 58, 0.10);

  /* Motion */
  --ease-out:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   2. RESET & BASE TYPOGRAPHY
   ============================================================ */

.fr-landing {
  /* Body font is sans-serif (Work Sans). Headings, FAQ questions,
   * and a small number of other elements explicitly set serif via
   * their own font-family declarations. Everything else - paragraph
   * body text, FAQ answers, lead paragraphs - inherits sans from
   * here. Matches the legacy templates which had body sans-serif
   * with serif applied per-element for headings. */
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-body);
  background: var(--warm-white);
}

.fr-landing * {
  box-sizing: border-box;
}

.fr-landing img,
.fr-landing svg {
  max-width: 100%;
  height: auto;
}


/* ============================================================
   3. LAYOUT PRIMITIVES
   ============================================================ */

/* Body sections - consistent vertical rhythm */
.fr-section,
.fr-section-alt,
.fr-section-navy {
  padding: var(--space-8) 0;
}

.fr-cta-section {
  padding: var(--space-8) 0 calc(var(--space-8) + 20px);
  position: relative;
}

.fr-cta-section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-soft), transparent);
}

/* Container variants */
.fr-container,
.fr-container-narrow,
.fr-container-wide {
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
}

.fr-container        { max-width: var(--container); }
.fr-container-narrow { max-width: var(--container-narrow); }
.fr-container-wide   { max-width: var(--container-wide); }


/* ============================================================
   4. SECTION BACKGROUND VARIANTS
   ============================================================ */

.fr-section     { background: var(--warm-white); }
.fr-section-alt { background: var(--warm-gray); }
.fr-cta-section { background: var(--warm-gray); }

.fr-section-navy {
  background: var(--navy);
  color: var(--text-on-navy);
}


/* ============================================================
   5. REUSABLE COMPONENT PRIMITIVES
   ============================================================ */

/* ---- Eyebrow ----
 * Audit canonical: B2B partnership variant - 13px + 0.16em tracking.
 * Tim's decision: single canonical for all audiences (was 14px). */
.fr-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

/* On navy backgrounds, lift the eyebrow colour for better contrast */
.fr-section-navy .fr-eyebrow,
.fr-hero        .fr-eyebrow,
.fr-hero        .fr-hero-eyebrow {
  color: var(--gold-light);
}


/* ---- Headings ---- */
.fr-landing h1,
.fr-landing h2,
.fr-landing h3,
.fr-landing h4 {
  font-family: var(--font-serif);
  color: var(--text-dark);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 var(--space-4);
}

.fr-landing h1 { font-size: 48px; letter-spacing: -0.01em; }
.fr-landing h2 { font-size: 38px; letter-spacing: -0.01em; }
.fr-landing h3 { font-size: 24px; font-family: var(--font-sans); font-weight: 600; }
.fr-landing h4 { font-size: 18px; font-family: var(--font-sans); font-weight: 600; }

/* Italic emphasis inside headings - always gold-tinted */
.fr-landing h1 em,
.fr-landing h2 em,
.fr-landing h3 em {
  font-style: italic;
  color: var(--gold);
}

/* On navy backgrounds: white headings, gold-light emphasis */
.fr-section-navy h1,
.fr-section-navy h2,
.fr-section-navy h3,
.fr-section-navy h4,
.fr-hero h1, .fr-hero h2, .fr-hero h3, .fr-hero h4 {
  color: #ffffff;
}

.fr-section-navy h1 em,
.fr-section-navy h2 em,
.fr-section-navy h3 em,
.fr-hero h1 em,
.fr-hero h2 em,
.fr-hero h3 em {
  color: var(--gold-light);
}


/* ---- Body text ----
 *
 * font-family on text-bearing selectors uses !important to lock the
 * unified template's typography against the parent lawsuit-results
 * theme cascade. Plain class-level rules at the same specificity were
 * being overridden by parent-theme selectors (likely a higher-
 * specificity .entry-content rule, or an !important declaration on a
 * paragraph rule). The unified template asserts its typography
 * deliberately and doesn't want to be reshaped by surrounding theme
 * styles.
 *
 * Scope is limited to the .fr-landing subtree, so this !important
 * does not bleed beyond unified landing pages.
 */
.fr-landing p {
  font-family: var(--font-sans) !important;
  /* Default body paragraph weight is 400 (browser default - matches
   * the legacy templates which set no font-weight on bare <p>). Lighter
   * elements (lead, hero sub, FAQ answer, CTA header, CTA reassure)
   * declare their own font-weight: 300 explicitly. */
  font-weight: 400;
  margin: 0 0 var(--space-4);
  color: var(--text-body);
}

.fr-section-navy p,
.fr-hero p { color: var(--text-on-navy); }

.fr-landing p.fr-lead {
  font-family: var(--font-sans) !important;
  font-weight: 300;
  font-size: 21px;
  line-height: 1.5;
  color: var(--text-dark);
}

.fr-section-navy p.fr-lead,
.fr-hero p.fr-lead { color: #ffffff; }


/* ---- Links ---- */
.fr-landing a {
  color: var(--gold-muted);
  text-decoration: none;
  transition: color 0.18s var(--ease-out);
}

.fr-landing a:hover,
.fr-landing a:focus-visible {
  color: var(--navy);
}

.fr-section-navy a,
.fr-hero a {
  color: var(--gold-light);
}

.fr-section-navy a:hover,
.fr-hero a:hover {
  color: #ffffff;
}


/* ---- Section header block ---- */
.fr-section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-7);
}

.fr-section-header h2 {
  margin-bottom: var(--space-3);
}


/* ---- Button primitive ---- */
.fr-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}

/* Icons inside any button variant inherit the button text colour.
 * Prevents the section-context icon defaults (gold/gold-light) from
 * bleeding into buttons where they should follow the button's own
 * colour scheme. */
.fr-landing .fr-btn i,
.fr-landing .fr-btn svg {
  color: inherit;
}

.fr-btn-primary {
  background: var(--gold);
  color: #ffffff;
  border-color: var(--gold);
}

.fr-btn-primary:hover {
  background: var(--gold-muted);
  border-color: var(--gold-muted);
  color: #ffffff;
}

.fr-btn-outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}

.fr-btn-outline:hover {
  background: var(--navy);
  color: #ffffff;
}

/* On navy: button colours invert */
.fr-section-navy .fr-btn-outline,
.fr-hero .fr-btn-outline {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

.fr-section-navy .fr-btn-outline:hover,
.fr-hero .fr-btn-outline:hover {
  background: #ffffff;
  color: var(--navy);
  border-color: #ffffff;
}


/* ---- Card primitive (used by info-cards, case-study, etc.) ---- */
.fr-card {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.fr-card:hover {
  box-shadow: var(--shadow-lifted);
}

.fr-section-alt .fr-card {
  border-color: var(--border-strong);
}


/* ---- Icons ---- */
.fr-landing i.fas,
.fr-landing i.far,
.fr-landing svg.fr-icon {
  color: var(--gold);
}

.fr-section-navy i.fas,
.fr-section-navy i.far,
.fr-section-navy svg.fr-icon,
.fr-hero i.fas,
.fr-hero i.far,
.fr-hero svg.fr-icon {
  color: var(--gold-light);
}


/* ============================================================
   6. SECTION-SPECIFIC STYLES
   ============================================================ */

/* ---- Hero section ---- *
 *
 * Hero component selectors use ANCESTOR PREFIX to bump specificity
 * to 0,0,2,0 (e.g. .fr-hero .fr-hero-sub) or 0,0,2,1 (e.g.
 * .fr-hero a.fr-hero-cta). This is required because:
 *   (a) Within this file, .fr-hero a (link colour on navy) wins
 *       over plain .fr-hero-cta on specificity, painting the CTA
 *       text gold-light instead of navy.
 *   (b) fr-overrides.css (loaded before fr-landing.css) contains
 *       paragraph rules with specificity 11+ (e.g. .entry-content p)
 *       that override plain .fr-hero-sub.
 * Ancestor-prefixed selectors clear both hurdles cleanly without
 * resorting to !important.
 *
 * Same pattern should apply to every section partial's bespoke
 * component selectors going forward.
 */
.fr-hero {
  position: relative;
  padding: 180px 0 120px;
  background: var(--navy);
  overflow: hidden;
}

.fr-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(26, 46, 90, 0.6) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(184, 153, 62, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.fr-hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 153, 62, 0.3), transparent);
}

.fr-hero-inner {
  position: relative; z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 28px;
  text-align: center;
}

.fr-hero .fr-hero-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
  padding: 6px 20px;
  border: 1px solid var(--border-on-navy);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.fr-hero .fr-hero-eyebrow::after {
  content: '';
  position: absolute; top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  animation: fr-shimmer-pass 1.8s var(--ease-out) 0.6s 1 forwards;
  pointer-events: none;
}

@keyframes fr-shimmer-pass {
  to { left: 130%; }
}

.fr-hero h1 {
  /* Audit canonical: 52px (matches B2B/corporate templates, 5/9).
   * Tim's decision: unified at 52px (doctor variants used 48px). */
  font-family: var(--font-serif);
  font-size: 52px;
  font-weight: 400;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: var(--space-5);
  letter-spacing: -0.01em;
}

.fr-hero h1 em {
  font-style: italic;
  color: var(--gold-light);
}

.fr-hero .fr-hero-sub {
  /* Sans-serif at light weight is the canonical hero-sub treatment
   * established by the legacy landing templates - serif is reserved
   * for headlines, sans for body copy. Looser line-height (1.7) and
   * more-muted alpha (0.65) keep the sub visually subordinate to the
   * H1 above. */
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  max-width: 640px;
  margin: 0 auto 44px;
}

.fr-hero a.fr-hero-cta {
  /* Sans-serif uppercase with tight tracking - the canonical hero CTA
   * treatment from the legacy templates. The 14px size paired with
   * 0.04em letter-spacing reads larger than the same character body
   * would suggest because of the uppercase rendering. */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  transition: all 0.2s var(--ease-out);
}

.fr-hero a.fr-hero-cta:hover {
  background: var(--gold-light);
  color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(184, 153, 62, 0.35);
}

.fr-hero a.fr-hero-cta i {
  /* color: inherit defeats the .fr-hero i.fas default (gold-light)
   * so the arrow takes the button's navy text colour. Same convention
   * applies to icons inside .fr-btn primitives further down. */
  color: inherit;
  font-size: 13px;
  transition: transform 0.2s var(--ease-out);
}

.fr-hero a.fr-hero-cta:hover i { transform: translateX(3px); }

/* Optional hero stats (3-column) - included for future audiences that
   want them; doctor / advisor canonicals don't currently use them, but
   the trust/short variants do, so the styling is ready. */
.fr-hero .fr-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-on-navy);
}

.fr-hero .fr-hero-stat-item { text-align: center; }
.fr-hero .fr-hero-stat-number {
  font-family: var(--font-serif);
  font-size: 36px;
  color: var(--gold-light);
  margin-bottom: 4px;
}
.fr-hero .fr-hero-stat-label {
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.04em;
}


/* ============================================================
   7. UTILITY CLASSES
   ============================================================ */

.fr-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.fr-fade-in.visible {
  /* Class name aligned with audit canonical (was .is-visible).
   * fr-landing.js below patched to add 'visible' on intersection. */
  opacity: 1;
  transform: translateY(0);
}

.fr-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   8. RESPONSIVE BREAKPOINTS
   ============================================================ */


/* ====================================================================
 * EYEBROW: navy-section colour override
 * ==================================================================== */
/* Eyebrow gold is too low-contrast on navy; use gold-light to match the
 * hero eyebrow treatment. Per audit, this override applies in all 9
 * source templates for body-section eyebrows on navy backgrounds. */
.fr-section-navy .fr-eyebrow {
  color: var(--gold-light);
}

/* ====================================================================
 * UNIVERSAL PRIMITIVES (per audit, used across multiple section partials)
 * ==================================================================== */

/* ---- Lead paragraph (sits below H2 in .fr-section-header) ---- */
.fr-lead {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-muted);
}
.fr-section-navy .fr-lead,
.fr-hero .fr-lead {
  color: rgba(255, 255, 255, 0.75);
}

/* ---- Decorative divider (small gold bar under a heading) ---- */
.fr-divider {
  width: 48px;
  height: 2px;
  background: var(--gold);
  margin: 24px auto 0;
  border: none;
}
.fr-section-navy .fr-divider {
  background: var(--gold-light);
}

/* ---- Two-column grid (the-problem, the-solution, etc.) ---- */
.fr-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.fr-two-col p { margin-bottom: 18px; }
.fr-two-col p:last-child { margin-bottom: 0; }

/* ---- Inline CTA (sits inside a section to drive to eligibility) ---- */
.fr-inline-cta {
  text-align: center;
  margin-top: 48px;
  padding: 36px 28px;
  background: var(--warm-white);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
.fr-inline-cta p {
  font-size: 17px;
  color: var(--text-body);
  margin-bottom: 18px;
}
.fr-section-navy .fr-inline-cta {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.fr-section-navy .fr-inline-cta p {
  color: rgba(255, 255, 255, 0.65);
}

/* ---- Stat row (how-it-works, proof, partner-benefits) ---- */
.fr-stat-row {
  display: flex;
  gap: 40px;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--border-soft);
}
.fr-stat { flex: 1; }
.fr-stat-number {
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 8px;
}
.fr-stat-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.5;
}
.fr-landing .fr-stat-source {
  margin: 20px auto 0;
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  max-width: 600px;
}
.fr-section-navy .fr-stat-number { color: var(--gold-light); }
.fr-section-navy .fr-stat-label  { color: rgba(255, 255, 255, 0.65); }
.fr-section-navy .fr-stat-source { color: rgba(255, 255, 255, 0.45); }
.fr-section-navy .fr-stat-row    { border-top-color: rgba(255, 255, 255, 0.1); }

/* ---- Hero stat short-name variants (.fr-hero-stat-num / -lbl / -source) ----
 * Legacy templates used both .fr-hero-stat-number/-label/-source and the
 * shorter -num/-lbl/-source. Supporting both means existing hero markup
 * doesn't need renaming when migrating. */
.fr-hero .fr-hero-stat-num {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--gold-light);
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}
.fr-hero .fr-hero-stat-lbl {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.4;
  display: block;
}
.fr-hero .fr-hero-stat-source {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.28);
  font-style: italic;
  margin: 0 auto 28px;
  max-width: 580px;
  text-align: center;
  line-height: 1.5;
}


/* ====================================================================
 * SECTION: FAQ accordion
 *
 * Renders the accordion built by fr_render_faq_from_content(). The
 * answer container uses max-height: 0 + transition; fr-landing.js
 * sets inline max-height to the natural scrollHeight on click to
 * animate open. Closing clears the inline style.
 *
 * Legacy parity note: the legacy templates always rendered the FAQ
 * on warm-white regardless of section sequence. The data-section
 * override below preserves that.
 * ==================================================================== */

/* Force FAQ background to warm-white. Without this, auto-alternation
 * in landing-page.php would land FAQ on warm-grey for some audiences
 * (e.g. PR, insurer) where it falls at an odd body position. */
.fr-landing [data-section="faq"] {
  background: var(--warm-white);
}

/* FAQ list container */
.fr-landing .fr-faq-list {
  max-width: 780px;
  margin: 0 auto;
}

/* Individual FAQ item with top + between borders */
.fr-landing .fr-faq-item {
  border-bottom: 1px solid var(--border-soft);
}
.fr-landing .fr-faq-item:first-child {
  border-top: 1px solid var(--border-soft);
}

/* Question button (clickable header row) */
.fr-landing .fr-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 26px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.35;
  transition: color 0.2s;
}
.fr-landing .fr-faq-question:hover,
.fr-landing .fr-faq-question.open {
  color: var(--navy);
}

/* Plus/cross icon on the right of each question */
.fr-landing .fr-faq-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--border-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 12px;
  transition: transform 0.3s ease, border-color 0.2s, background 0.2s;
}
.fr-landing .fr-faq-question.open .fr-faq-icon {
  transform: rotate(45deg);
  border-color: var(--gold);
  background: rgba(184, 153, 62, 0.08);
}

/* Answer container - height transitions from 0 to scrollHeight (set by JS) */
.fr-landing .fr-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
.fr-landing .fr-faq-answer-inner {
  font-family: var(--font-sans) !important;
  font-weight: 300;
  padding: 0 48px 28px 0;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--text-muted);
}
.fr-landing .fr-faq-answer-inner p {
  margin-bottom: 14px;
}
.fr-landing .fr-faq-answer-inner p:last-child {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .fr-section, .fr-section-alt, .fr-section-navy { padding: var(--space-7) 0; }
  .fr-cta-section { padding: var(--space-7) 0 calc(var(--space-7) + 12px); }

  .fr-landing h1 { font-size: 40px; }
  .fr-landing h2 { font-size: 32px; }
  .fr-landing h3 { font-size: 22px; }

  .fr-hero { padding: 140px 0 90px; }
  .fr-hero h1 { font-size: 40px; }
}

@media (max-width: 768px) {
  .fr-landing { font-size: 16px; }
  .fr-section, .fr-section-alt, .fr-section-navy { padding: var(--space-6) 0; }
  .fr-cta-section { padding: var(--space-6) 0 var(--space-6); }

  .fr-landing h1 { font-size: 32px; line-height: 1.25; }
  .fr-landing h2 { font-size: 26px; line-height: 1.25; }
  .fr-landing h3 { font-size: 20px; }

  .fr-hero { padding: 100px 0 64px; }
  .fr-hero h1 { font-size: 32px; }
  .fr-hero .fr-hero-sub { font-size: 17px; }
  .fr-hero a.fr-hero-cta { padding: 14px 28px; font-size: 13px; }
  .fr-hero .fr-hero-stats { grid-template-columns: 1fr; gap: var(--space-3); }

  .fr-container, .fr-container-narrow, .fr-container-wide {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* =========================================================================
   CTA / Eligibility section  (check-eligibility)
   -------------------------------------------------------------------------
   The unified template's landing-page.php auto-assigns the section the
   class 'fr-cta-section' and id 'check-eligibility'. The CET shortcode
   itself is self-styling - these rules only cover the wrappers around it.

   Every text-bearing selector explicitly sets font-family + font-weight +
   color (the 'lock body typography' pattern established in Phase 3a after
   the parent-theme cascade fight on FAQ). Inheritance from .fr-landing is
   not trusted across surfaces the parent theme might style.
   ========================================================================= */

.fr-landing .fr-cta-section {
  padding: 100px 0 120px;
  background: var(--warm-gray);
  position: relative;
}

.fr-landing .fr-cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-soft), transparent);
}

.fr-landing .fr-cta-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px;
}

.fr-landing .fr-cta-header h2 {
  margin-bottom: 16px;
}

.fr-landing .fr-cta-header p {
  font-family: var(--font-sans) !important;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-muted);
}

.fr-landing .fr-cta-embed {
  max-width: 760px;
  margin: 0 auto;
}

.fr-landing .fr-cta-reassure {
  text-align: center;
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--font-sans) !important;
  font-weight: 300;
  font-size: 13.5px;
  color: var(--text-muted);
}

.fr-landing .fr-cta-reassure span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fr-landing .fr-cta-reassure i {
  color: var(--gold);
  font-size: 13px;
}

/* Fallback shown when the CET shortcode is unavailable */
.fr-landing .fr-cta-fallback {
  text-align: center;
  padding: 48px 28px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
}

.fr-landing .fr-cta-fallback p {
  font-family: var(--font-sans) !important;
  font-weight: 300;
  font-size: 18px;
  color: var(--text-body);
  margin-bottom: 24px;
}

/* =========================================================================
   The Problem section  (two-column grid + optional callouts)
   -------------------------------------------------------------------------
   Used by the-problem.php partial. Pairs with existing .fr-stat-row /
   .fr-stat / .fr-stat-number / .fr-stat-label / .fr-inline-cta primitives
   from the Phase 3a foundation.
   ========================================================================= */

.fr-landing .fr-problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.fr-landing .fr-problem-col p {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  margin-bottom: 20px;
  color: var(--text-body);
}

.fr-landing .fr-problem-col p:last-child {
  margin-bottom: 0;
}

/* Truth-principle callout - italic serif, gold left border. Used above
   the problem grid by audiences that lead with the 'does not erase' frame
   (financial-advisor primarily). */
.fr-landing .fr-truth-callout {
  max-width: 760px;
  margin: 0 auto 64px;
  padding: 36px 52px;
  border-left: 3px solid var(--gold);
  background: var(--warm-white);
  border-radius: 0 6px 6px 0;
  position: relative;
}

.fr-landing .fr-truth-callout::before {
  content: '';
  position: absolute;
  top: 0;
  left: -3px;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-muted));
  border-radius: 2px;
}

.fr-landing .fr-truth-callout p {
  font-family: var(--font-serif) !important;
  font-weight: 400;
  font-size: 22px;
  font-style: italic;
  line-height: 1.6;
  color: var(--text-dark);
  margin: 0;
}

.fr-landing .fr-truth-callout p strong {
  font-style: normal;
  font-weight: 600;
  color: var(--navy);
}

/* Noise-dilemma callout - below the problem grid. Used by
   lawyer-partnership to land the strategic argument before the
   stat row. */
.fr-landing .fr-noise-callout {
  max-width: 780px;
  margin: 52px auto 0;
  padding: 36px 52px;
  background: var(--warm-white);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  position: relative;
}

.fr-landing .fr-noise-callout p {
  font-family: var(--font-serif) !important;
  font-weight: 400;
  font-size: 21px;
  font-style: italic;
  line-height: 1.65;
  color: var(--text-dark);
  margin: 0;
}

.fr-landing .fr-noise-callout p strong {
  font-style: normal;
  font-weight: 600;
  color: var(--navy);
}

/* Responsive: collapse to single column below ~860px */
@media (max-width: 860px) {
  .fr-landing .fr-problem-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .fr-landing .fr-truth-callout,
  .fr-landing .fr-noise-callout {
    padding: 28px 28px;
  }
}

/* =========================================================================
   How It Works section  (timeline layout, theme v1.1.53+)
   -------------------------------------------------------------------------
   Used by how-it-works.php partial. 4-card row connected by a horizontal
   gold timeline track. Icon nodes sit ON the track, anchoring cards to
   a consistent vertical position regardless of body-text length. Each
   card is a flex column; body uses flex:1 so cards always end in line
   at the bottom even when body texts vary in length.
   On mobile (<=1024px) the row becomes a vertical timeline with the
   track on the left edge and nodes on the left of stacked cards.

   Replaces the legacy connector-dot animation and per-step trust block.
   .fr-process-step-foot is the new universal bottom-anchor element,
   populated from a $step_footers array defined in the PHP partial.
   ========================================================================= */

.fr-landing .fr-process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
  padding-top: 32px;
}

.fr-landing .fr-process-track {
  position: absolute;
  top: 64px;
  /* Span centre-of-card-1 to centre-of-card-4 exactly.
     1.5rem MUST match the grid gap above. */
  left: calc((100% - 3 * 1.5rem) / 8);
  right: calc((100% - 3 * 1.5rem) / 8);
  height: 1px;
  background: var(--gold);
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}

.fr-landing .fr-process-step {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 56px 24px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  text-align: center;
}

.fr-landing .fr-process-step-node {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--warm-white);
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Explicit colour on the FontAwesome <i> so it doesn't rely on
   inheriting from .fr-process-step-node - some FA builds or parent
   theme rules target <i> directly and would otherwise win the cascade. */
.fr-landing .fr-process-step-node i {
  font-size: 22px;
  color: var(--navy);
}

.fr-landing .fr-step-num {
  font-family: var(--font-sans) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
}

.fr-landing .fr-process-step h3 {
  font-family: var(--font-serif) !important;
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 12px;
  line-height: 1.3;
  color: var(--text-dark);
}

.fr-landing .fr-process-step p {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-muted);
  flex: 1;
  margin: 0 0 16px;
}

.fr-landing .fr-process-step-foot {
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
  margin-top: auto;
  font-family: var(--font-sans) !important;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  line-height: 1.4;
}

.fr-landing .fr-process-step-foot i {
  color: var(--gold-muted);
  font-size: 13px;
  flex-shrink: 0;
}

/* Mobile / tablet: vertical timeline (<=1024px)
   Track runs down the left edge, nodes on left of stacked cards. */
@media (max-width: 1024px) {
  .fr-landing .fr-process-steps {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 0;
    padding-left: 64px;
  }

  .fr-landing .fr-process-track {
    top: 32px;
    bottom: 32px;
    left: 32px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .fr-landing .fr-process-step {
    padding: 24px;
    text-align: left;
  }

  .fr-landing .fr-process-step-node {
    top: 50%;
    left: -56px;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
  }

  .fr-landing .fr-process-step-node i {
    font-size: 18px;
  }

  .fr-landing .fr-step-num,
  .fr-landing .fr-process-step h3,
  .fr-landing .fr-process-step p {
    text-align: left;
  }

  .fr-landing .fr-process-step-foot {
    justify-content: flex-start;
    text-align: left;
  }
}

/* Phone: tighter padding and smaller node (<=600px) */
@media (max-width: 600px) {
  .fr-landing .fr-process-steps {
    padding-left: 56px;
  }

  .fr-landing .fr-process-track {
    left: 28px;
  }

  .fr-landing .fr-process-step-node {
    left: -48px;
    width: 42px;
    height: 42px;
  }

  .fr-landing .fr-process-step-node i {
    font-size: 16px;
  }

  .fr-landing .fr-process-step h3 {
    font-size: 17px;
  }
}

/* =========================================================================
   The Solution section  (Record of Truth visual + content)
   -------------------------------------------------------------------------
   Two layout variants share the same 2-column grid:
     .fr-rot-layout      - simple check-list items, white text on navy
     .fr-solution-layout - structured icon + title + desc items

   Visual panel uses navy background with decorative gold-tinted circle.
   Right-column content is regular prose paragraphs on the section bg.

   White-tint text colours inside the navy panel are declared explicitly
   so the parent theme's body colour rules don't bleed in (lock-typography
   pattern applied throughout).
   ========================================================================= */

/* Shared 2-column grid */
.fr-landing .fr-rot-layout,
.fr-landing .fr-solution-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: flex-start;
}

/* Visual panel - navy background with decorative circle */
.fr-landing .fr-rot-visual,
.fr-landing .fr-solution-visual {
  background: var(--navy);
  border-radius: 8px;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
}

.fr-landing .fr-rot-visual::before,
.fr-landing .fr-solution-visual::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(184, 153, 62, 0.08);
  pointer-events: none;
}

/* --- rot layout: simple check-list items --- */
.fr-landing .fr-rot-visual-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 12px;
  margin: 0 -12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  transition: background 0.2s;
}

.fr-landing .fr-rot-visual-item:last-child {
  border-bottom: none;
}

.fr-landing .fr-rot-visual-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.fr-landing .fr-rot-visual-item i {
  color: var(--gold);
  font-size: 16px;
  margin-top: 3px;
  flex-shrink: 0;
}

.fr-landing .fr-rot-visual-item span {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

/* --- solution layout: structured icon + title + desc items --- */
.fr-landing .fr-solution-visual-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-sans) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-muted);
  margin-bottom: 28px;
}

.fr-landing .fr-solution-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 12px;
  margin: 0 -12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  transition: background 0.2s;
}

.fr-landing .fr-solution-item:last-child {
  border-bottom: none;
}

.fr-landing .fr-solution-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.fr-landing .fr-solution-item i {
  color: var(--gold);
  font-size: 14px;
  margin-top: 4px;
  flex-shrink: 0;
}

.fr-landing .fr-solution-item-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fr-landing .fr-solution-item-title {
  font-family: var(--font-sans) !important;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
}

.fr-landing .fr-solution-item-desc {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

/* --- right column prose --- */
.fr-landing .fr-rot-content p,
.fr-landing .fr-solution-content p {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  margin-bottom: 22px;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--text-body);
}

.fr-landing .fr-rot-content p:last-child,
.fr-landing .fr-solution-content p:last-child {
  margin-bottom: 0;
}

.fr-landing .fr-rot-content strong,
.fr-landing .fr-solution-content strong {
  color: var(--text-dark);
  font-weight: 600;
}

/* Responsive: stack at 900px, collapse padding at 600px */
@media (max-width: 900px) {
  .fr-landing .fr-rot-layout,
  .fr-landing .fr-solution-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 600px) {
  .fr-landing .fr-rot-visual,
  .fr-landing .fr-solution-visual {
    padding: 28px 24px;
  }
}

/* =========================================================================
   Partner Benefits section  (B2B, 2-col grid of benefit cards)
   -------------------------------------------------------------------------
   Used by partner-benefits.php partial. Each card is white-bg, gold-on-
   hover border + soft shadow. Icon circle sits on the card itself so
   the section background colour doesn't need a contrast flip like
   how-it-works needed.
   ========================================================================= */

.fr-landing .fr-benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.fr-landing .fr-benefit-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 36px 32px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.fr-landing .fr-benefit-card:hover {
  border-color: rgba(184, 153, 62, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.fr-landing .fr-benefit-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--warm-gray);
  border-radius: 50%;
  color: var(--navy-mid);
  font-size: 18px;
  border: 1px solid var(--border-soft);
}

/* Defensive: lock icon glyph colour on the <i> (lock-typography pattern -
   same reason fr-step-icon i needed explicit navy). */
.fr-landing .fr-benefit-icon i {
  color: var(--navy-mid);
}

.fr-landing .fr-benefit-text h3 {
  font-family: var(--font-serif) !important;
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--text-dark);
}

.fr-landing .fr-benefit-text p {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
}

/* Responsive: stack to 1 col below 900px */
@media (max-width: 900px) {
  .fr-landing .fr-benefits-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .fr-landing .fr-benefit-card {
    padding: 28px 24px;
  }
}

/* =========================================================================
   Partner Rate section  (B2B Professional Rate highlight block)
   -------------------------------------------------------------------------
   A single navy-panel highlight with the percentage stat on the left and
   the headline + body paragraph + four label/value rows on the right.
   The decorative radial-gradient overlay tints the left edge gold-warm.

   All text on the navy panel uses explicit white-tint colours and the
   gold-light tone for the percentage and row values - lock-typography
   applied to every text-bearing selector to defeat the parent theme's
   body colour rules.
   ========================================================================= */

.fr-landing .fr-rate-highlight {
  display: flex;
  align-items: center;
  gap: 52px;
  max-width: 860px;
  margin: 0 auto;
  background: var(--navy);
  border-radius: 8px;
  padding: 52px 56px;
  position: relative;
  overflow: hidden;
}

.fr-landing .fr-rate-highlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 0% 50%, rgba(184, 153, 62, 0.10) 0%, transparent 60%);
  pointer-events: none;
}

.fr-landing .fr-rate-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.fr-landing .fr-rate-number {
  font-family: var(--font-serif) !important;
  font-size: 88px;
  font-weight: 600;
  color: var(--gold-light);
  line-height: 1;
  letter-spacing: -0.02em;
}

.fr-landing .fr-rate-number-label {
  font-family: var(--font-sans) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-muted);
  margin-top: 6px;
}

.fr-landing .fr-rate-content {
  position: relative;
  z-index: 1;
}

.fr-landing .fr-rate-headline {
  font-family: var(--font-serif) !important;
  font-size: 26px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.35;
}

.fr-landing .fr-rate-body {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.58);
  margin: 0 0 20px;
}

.fr-landing .fr-rate-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fr-landing .fr-rate-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 14.5px;
}

.fr-landing .fr-rate-row:last-child {
  border-bottom: none;
}

.fr-landing .fr-rate-row-label {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}

.fr-landing .fr-rate-row-value {
  font-family: var(--font-sans) !important;
  font-weight: 600;
  color: var(--gold-light);
  text-align: right;
}

/* Responsive: stack the stat above the content at narrower widths,
   reduce padding and number size on small screens. */
@media (max-width: 700px) {
  .fr-landing .fr-rate-highlight {
    flex-direction: column;
    gap: 32px;
    padding: 40px 32px;
  }
  .fr-landing .fr-rate-number {
    font-size: 64px;
  }
}

@media (max-width: 500px) {
  .fr-landing .fr-rate-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 0;
  }
  .fr-landing .fr-rate-row-value {
    text-align: left;
  }
}

/* =========================================================================
   The Gap section  (numbered factor-item list on navy background)
   -------------------------------------------------------------------------
   Used by the-gap.php partial. The section wrapper itself gets
   .fr-section-navy from landing-page.php (slug-keyed branch), and the
   foundation CSS already handles white headings, gold-light eyebrow,
   white-tinted paragraphs and inline-cta dark-context override. The
   selectors here only cover the gap-specific layout primitives -
   the items list, individual item flex layout, the serif gold number
   and an explicit muted-white tone on item paragraphs (legacy used
   rgba(255,255,255,0.55), a touch dimmer than the default text-on-navy).
   ========================================================================= */

.fr-landing .fr-gap-items {
  max-width: 700px;
  margin: 0 auto;
}

.fr-landing .fr-gap-item {
  display: flex;
  gap: 28px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fr-landing .fr-gap-item:last-child {
  border-bottom: none;
}

.fr-landing .fr-gap-num {
  font-family: var(--font-serif) !important;
  font-size: 32px;
  font-weight: 300;
  color: var(--gold-light);
  flex-shrink: 0;
  width: 40px;
  line-height: 1;
  padding-top: 4px;
}

.fr-landing .fr-gap-item h3 {
  font-family: var(--font-serif) !important;
  font-size: 21px;
  margin-bottom: 10px;
  color: #fff;
}

/* Dimmer than the default text-on-navy so the heading stands out. */
.fr-landing .fr-gap-item p {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
}

/* Responsive: at narrow widths the gold number stacks above the text
   rather than sitting beside it, which would crowd the heading. */
@media (max-width: 600px) {
  .fr-landing .fr-gap-item {
    flex-direction: column;
    gap: 8px;
    padding: 24px 0;
  }
  .fr-landing .fr-gap-num {
    width: auto;
    padding-top: 0;
  }
}

/* =========================================================================
   Case Study section  (In Practice - anonymized scenario + result stat)
   -------------------------------------------------------------------------
   Used by case-study.php partial. Two visual parts:
     .fr-case-study           - warm-white card with gold left-border,
                                serif italic narrative, meta-row of 4
                                key facts and a gold-tinted outcome
                                callout. Decorative quote-mark glyph in
                                the top-left corner.
     .fr-result-highlight     - navy panel with the 88px gold-light '23'
                                stat and headline + body text on the
                                right. Same visual pattern as
                                .fr-rate-highlight but with subtly
                                different proportions (max-width 800px
                                vs 860, padding 48x52 vs 52x56). Could
                                be deduped with rate-highlight in a
                                future refactor; kept distinct here for
                                legacy fidelity.
   ========================================================================= */

/* ---- Case study card ---- */
.fr-landing .fr-case-study {
  background: var(--warm-white);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  padding: 52px 60px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.fr-landing .fr-case-study::before {
  content: '\201C';
  font-family: var(--font-serif);
  font-size: 140px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.1;
  position: absolute;
  top: 8px;
  left: 24px;
  pointer-events: none;
}

.fr-landing .fr-case-study-text {
  font-family: var(--font-serif) !important;
  font-size: 22px;
  line-height: 1.65;
  color: var(--text-dark);
  font-style: italic;
  margin-bottom: 36px;
  position: relative;
}

.fr-landing .fr-case-study-meta {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--border-soft);
}

.fr-landing .fr-case-meta-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.fr-landing .fr-case-meta-label {
  font-family: var(--font-sans) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-muted);
}

.fr-landing .fr-case-meta-value {
  font-family: var(--font-sans) !important;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-body);
}

.fr-landing .fr-case-outcome {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 28px;
  padding: 14px 20px;
  background: rgba(184, 153, 62, 0.07);
  border: 1px solid rgba(184, 153, 62, 0.22);
  border-radius: 4px;
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-dark);
}

.fr-landing .fr-case-outcome i {
  color: var(--gold);
  font-size: 14px;
  margin-top: 3px;
  flex-shrink: 0;
}

.fr-landing .fr-case-confidentiality {
  font-family: var(--font-sans) !important;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
}

/* ---- Result highlight (navy stat panel below the case card) ---- */
.fr-landing .fr-result-highlight {
  display: flex;
  align-items: center;
  gap: 52px;
  max-width: 800px;
  margin: 40px auto 0;
  background: var(--navy);
  border-radius: 8px;
  padding: 48px 52px;
  position: relative;
  overflow: hidden;
}

.fr-landing .fr-result-highlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 0% 50%, rgba(184, 153, 62, 0.10) 0%, transparent 60%);
  pointer-events: none;
}

.fr-landing .fr-result-highlight-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.fr-landing .fr-result-highlight-content {
  position: relative;
  z-index: 1;
}

.fr-landing .fr-result-days {
  font-family: var(--font-serif) !important;
  font-size: 88px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold-light);
}

.fr-landing .fr-result-days-label {
  font-family: var(--font-sans) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-muted);
  margin-top: 6px;
}

.fr-landing .fr-result-headline {
  font-family: var(--font-serif) !important;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
  color: #fff;
  margin-bottom: 14px;
}

.fr-landing .fr-result-body {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.58);
  margin: 0;
}

/* Responsive: shrink card padding, stack the result-highlight, reduce
   the giant stat. At narrow widths the meta-row flows to single column. */
@media (max-width: 700px) {
  .fr-landing .fr-case-study {
    padding: 36px 28px;
  }
  .fr-landing .fr-case-study-text {
    font-size: 19px;
  }
  .fr-landing .fr-case-study-meta {
    gap: 24px;
  }
  .fr-landing .fr-result-highlight {
    flex-direction: column;
    gap: 28px;
    padding: 36px 28px;
  }
  .fr-landing .fr-result-days {
    font-size: 64px;
  }
}

/* =========================================================================
   PR Toolkit section  (3-card info grid + pull-quote)
   -------------------------------------------------------------------------
   Used by pr-toolkit.php partial (pr-agency only).

   The .fr-info-card primitive is similar to .fr-benefit-card from
   partner-benefits but with subtly different proportions (3-col grid
   vs 2-col, slightly tighter padding, icon above title rather than
   beside) - kept distinct for legacy fidelity.

   The .fr-pull-quote primitive is reusable for any future block-quote
   context - gold left-border, warm-white background, serif italic
   text with a decorative quote-mark glyph in the top-left corner.
   ========================================================================= */

/* ---- Info cards grid (3-col) ---- */
.fr-landing .fr-info-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
}

.fr-landing .fr-info-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 36px 30px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.fr-landing .fr-info-card:hover {
  border-color: rgba(184, 153, 62, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.fr-landing .fr-info-card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--warm-gray);
  border-radius: 50%;
  margin-bottom: 20px;
  color: var(--navy-mid);
  font-size: 18px;
}

/* Defensive: lock the glyph colour on the <i> (same reason as
   fr-step-icon i and fr-benefit-icon i). */
.fr-landing .fr-info-card-icon i {
  color: var(--navy-mid);
}

.fr-landing .fr-info-card h3 {
  font-family: var(--font-serif) !important;
  font-size: 20px;
  margin-bottom: 12px;
  color: var(--text-dark);
}

.fr-landing .fr-info-card p {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-muted);
}

.fr-landing .fr-info-card p + p {
  margin-top: 14px;
}

/* ---- Pull-quote block ---- */
.fr-landing .fr-pull-quote {
  max-width: 760px;
  margin: 64px auto 0;
  padding: 44px 52px;
  border-left: 4px solid var(--gold);
  background: var(--warm-white);
  border-radius: 0 6px 6px 0;
  position: relative;
}

.fr-landing .fr-pull-quote::before {
  content: '\201C';
  font-family: var(--font-serif);
  font-size: 120px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.1;
  position: absolute;
  top: 4px;
  left: 20px;
  pointer-events: none;
}

.fr-landing .fr-pull-quote p {
  font-family: var(--font-serif) !important;
  font-size: 22px;
  font-style: italic;
  line-height: 1.65;
  color: var(--text-dark);
  position: relative;
  margin: 0;
}

/* Responsive: collapse cards to 1-col below 900px, reduce pull-quote
   padding below 600px. */
@media (max-width: 900px) {
  .fr-landing .fr-info-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .fr-landing .fr-pull-quote {
    padding: 32px 28px;
  }
  .fr-landing .fr-pull-quote p {
    font-size: 19px;
  }
}

/* =========================================================================
   Bespoke callout block  (lawyers-role and any future objection-rebuttal
                            section)
   -------------------------------------------------------------------------
   A horizontal callout designed to address a specific objection or claim
   the audience might raise. Used by lawyers-role.php to rebut the
   'just automate it cheaply' objection. Visual structure: small navy
   circle on the left with a gold icon, h4 title + two paragraphs of
   body text on the right. Sits inside a warm-white card with a soft
   border.

   Reusable: any future audience-specific section that needs an
   inline objection rebuttal can drop this in without new CSS.
   ========================================================================= */

.fr-landing .fr-bespoke-callout {
  max-width: 860px;
  margin: 48px auto 0;
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 36px 40px;
  background: var(--warm-white);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
}

.fr-landing .fr-bespoke-callout-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  border-radius: 50%;
  color: var(--gold);
  font-size: 20px;
}

/* Defensive: lock the glyph colour on the <i> - same pattern as the
   other icon primitives. The icon here sits on a dark navy background
   so we want gold, not the default body colour the cascade might
   otherwise apply. */
.fr-landing .fr-bespoke-callout-icon i {
  color: var(--gold);
}

.fr-landing .fr-bespoke-callout-text h4 {
  font-family: var(--font-serif) !important;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.fr-landing .fr-bespoke-callout-text p {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.fr-landing .fr-bespoke-callout-text p:last-child {
  margin-bottom: 0;
}

/* Responsive: stack icon above text below 600px, tighten padding. */
@media (max-width: 600px) {
  .fr-landing .fr-bespoke-callout {
    flex-direction: column;
    gap: 18px;
    padding: 28px 24px;
  }
}

/* =========================================================================
   Distinction section  (2-col comparison: theirs vs ours)
   -------------------------------------------------------------------------
   Used by distinction.php partial. The legacy used a bespoke
   .fr-distinction-section wrapper with fixed warm-grey bg - in the
   unified template the wrapper class is the standard .fr-section-alt,
   forced by landing-page.php so distinction never lands on cream.

   Visual structure: a centred outlined-gold eyebrow pill, then a
   3-column grid (1fr auto 1fr): left 'theirs' card (white, circle
   bullets, muted text), centre '+' bridge with 'works alongside'
   micro-label, right 'ours' card (warm-white, gold check bullets,
   navy heading). Below: an italic serif summary, then a navy grade-
   note callout linking to the eligibility checker.
   ========================================================================= */

/* Subtle bottom-border decoration for the distinction section. Targets
   the section by id so it only applies when the slug is distinction,
   not to every fr-section-alt site-wide. */
.fr-landing #distinction.fr-section-alt::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-soft), transparent);
}

.fr-landing #distinction.fr-section-alt {
  position: relative;
  overflow: hidden;
}

.fr-landing .fr-distinction-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}

/* Centring wrapper for the outlined-gold eyebrow pill. */
.fr-landing .fr-distinction-eyebrow-wrap {
  text-align: center;
}

.fr-landing .fr-distinction-eyebrow {
  display: inline-block;
  font-family: var(--font-sans) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-muted);
  margin-bottom: 36px;
  padding: 5px 16px;
  border: 1px solid rgba(184, 153, 62, 0.3);
  border-radius: 2px;
}

/* ---- 3-column comparison row (theirs | bridge | ours) ---- */
.fr-landing .fr-distinction-cols {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 44px;
}

.fr-landing .fr-distinction-col {
  padding: 28px 32px;
  border-radius: 6px;
}

.fr-landing .fr-distinction-col h3 {
  font-family: var(--font-serif) !important;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
  margin-bottom: 14px;
}

.fr-landing .fr-distinction-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fr-landing .fr-distinction-col ul li {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.55;
}

.fr-landing .fr-distinction-col ul li i {
  font-size: 11px;
  margin-top: 5px;
  flex-shrink: 0;
}

.fr-landing .fr-distinction-col-heading {
  font-family: var(--font-sans) !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ---- Theirs (left) column ---- */
.fr-landing .fr-distinction-col-theirs {
  background: #fff;
  border: 1px solid var(--border-soft);
}

.fr-landing .fr-distinction-col-theirs .fr-distinction-col-heading {
  color: var(--text-muted);
}

.fr-landing .fr-distinction-col-theirs h3 {
  color: var(--text-dark);
}

.fr-landing .fr-distinction-col-theirs ul li {
  color: var(--text-muted);
}

.fr-landing .fr-distinction-col-theirs ul li i {
  color: var(--border-soft);
}

/* ---- Ours (right) column ---- */
.fr-landing .fr-distinction-col-ours {
  background: var(--warm-white);
  border: 1px solid rgba(184, 153, 62, 0.25);
}

.fr-landing .fr-distinction-col-ours .fr-distinction-col-heading {
  color: var(--gold-muted);
}

.fr-landing .fr-distinction-col-ours h3 {
  color: var(--navy);
}

.fr-landing .fr-distinction-col-ours ul li {
  color: var(--text-body);
}

.fr-landing .fr-distinction-col-ours ul li i {
  color: var(--gold);
}

/* ---- Bridge column (+ and 'works alongside' label) ---- */
.fr-landing .fr-distinction-bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.fr-landing .fr-distinction-bridge-plus {
  font-family: var(--font-serif) !important;
  font-size: 40px;
  line-height: 1;
  color: var(--gold);
  display: block;
}

.fr-landing .fr-distinction-bridge-label {
  font-family: var(--font-sans) !important;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

/* ---- Summary line below the columns ---- */
.fr-landing .fr-distinction-summary {
  font-family: var(--font-serif) !important;
  font-size: 21px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-body);
  text-align: center;
  max-width: 680px;
  margin: 0 auto 36px;
}

.fr-landing .fr-distinction-summary strong {
  font-style: normal;
  color: var(--navy);
  font-weight: 600;
}

/* ---- Grade-note callout (navy box with eligibility link) ---- */
.fr-landing .fr-grade-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--navy);
  border-radius: 6px;
  padding: 20px 28px;
  max-width: 680px;
  margin: 0 auto;
}

.fr-landing .fr-grade-note i {
  color: var(--gold);
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 3px;
}

.fr-landing .fr-grade-note p {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.fr-landing .fr-grade-note p strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

.fr-landing .fr-grade-note p a {
  color: var(--gold-light);
}

.fr-landing .fr-grade-note p a:hover {
  opacity: 0.8;
}

/* Responsive: collapse to single-column stack below 760px. The
   bridge becomes a horizontal '+' between the cards rather than
   being absorbed - using row direction with both cards full-width. */
@media (max-width: 760px) {
  .fr-landing .fr-distinction-cols {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .fr-landing .fr-distinction-bridge {
    flex-direction: row;
    gap: 14px;
    padding: 6px 0;
  }
  .fr-landing .fr-distinction-bridge-plus {
    font-size: 28px;
  }
  .fr-landing .fr-distinction-bridge-label br {
    display: none;
  }
}

/* =========================================================================
   In-Practice Anchor section  (B2B variant of case-study)
   -------------------------------------------------------------------------
   Used by in-practice-anchor.php partial. Reuses .fr-case-study and
   .fr-case-meta-* primitives from case-study; adds a new
   .fr-anchor-result-* namespace for the structured navy 'The Result'
   panel that sits inside the case-study card.

   The .fr-anchor-result-* prefix avoids collision with the existing
   .fr-case-outcome single-line gold callout used by the simpler
   case-study partial (doctor/onboarding/corporate). Both can coexist.
   ========================================================================= */

.fr-landing .fr-anchor-result {
  display: block;
  width: 100%;
  margin-top: 32px;
  padding: 36px 40px;
  background: var(--navy);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.fr-landing .fr-anchor-result::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 100% 0%, rgba(184, 153, 62, 0.10) 0%, transparent 60%);
  pointer-events: none;
}

.fr-landing .fr-anchor-result-label {
  font-family: var(--font-sans) !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-muted);
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.fr-landing .fr-anchor-result-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.fr-landing .fr-anchor-result-stat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.fr-landing .fr-anchor-result-stat i {
  color: var(--gold);
  font-size: 16px;
  margin-top: 3px;
  flex-shrink: 0;
}

.fr-landing .fr-anchor-result-stat-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fr-landing .fr-anchor-result-stat-value {
  font-family: var(--font-serif) !important;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

.fr-landing .fr-anchor-result-stat-desc {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}

.fr-landing .fr-anchor-result-note {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  position: relative;
  z-index: 1;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Responsive: collapse stats grid to 1-col below 700px, tighten padding. */
@media (max-width: 700px) {
  .fr-landing .fr-anchor-result {
    padding: 28px 24px;
  }
  .fr-landing .fr-anchor-result-stats {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* =========================================================================
   Sector card grid  (where-this-matters + who-we-work-with)
   -------------------------------------------------------------------------
   Shared CSS primitives that power two distinct sections:

   - where-this-matters (onboarding): non-linked div cards listing
     transaction contexts where adverse-media screening creates friction.
   - who-we-work-with (corporate): linked <a> cards routing to the
     partnership audience pages.

   Hover transforms (the navy overlay + colour flip + lift) are scoped
   to 'a.fr-sector-card:hover' only, so the non-link div cards in
   where-this-matters do not appear clickable. The two sections share
   layout and visual language but communicate different things on
   interaction.
   ========================================================================= */

/* ---- Grid container (3-col on desktop, collapses on smaller screens) ---- */
.fr-landing .fr-sector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 32px;
}

/* ---- Base card ---- */
.fr-landing .fr-sector-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 40px 32px;
  text-decoration: none;
  background: #fff;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

/* Navy overlay primed for the anchor-card hover state. The div cards
   in where-this-matters never trigger this because the :hover rules
   are scoped to 'a.fr-sector-card' below. */
.fr-landing .fr-sector-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--navy);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

/* Lift content above the overlay. */
.fr-landing .fr-sector-card > * {
  position: relative;
  z-index: 1;
}

/* ---- Icon (small navy circle on warm-gray bg, glyph defensively locked) ---- */
.fr-landing .fr-sector-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--warm-gray);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 24px;
  flex-shrink: 0;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

/* Defensive: lock the glyph colour on the <i>, same pattern as the
   other icon primitives. */
.fr-landing .fr-sector-icon i {
  color: var(--navy);
}

/* ---- Role micro-label (above heading) ---- */
.fr-landing .fr-sector-role {
  font-family: var(--font-sans) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-muted);
  margin-bottom: 10px;
  transition: color 0.25s;
}

.fr-landing .fr-sector-card h3 {
  font-family: var(--font-serif) !important;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 12px;
  color: var(--text-dark);
  transition: color 0.25s;
}

.fr-landing .fr-sector-card p {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 28px;
  flex: 1;
  transition: color 0.25s;
}

/* ---- Bottom-of-card link (linked cards only) ---- */
.fr-landing .fr-sector-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans) !important;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: gap 0.2s, color 0.2s;
}

/* ---- Anchor-card hover (lift, navy overlay, colour flip) ---- */
/* Scoped to anchor cards only - div cards in where-this-matters do
   not respond to hover so they do not appear clickable. */
.fr-landing a.fr-sector-card:hover {
  border-color: var(--navy);
  box-shadow: 0 8px 32px rgba(17, 29, 58, 0.12);
  transform: translateY(-3px);
}

.fr-landing a.fr-sector-card:hover::before {
  opacity: 1;
}

.fr-landing a.fr-sector-card:hover .fr-sector-icon {
  background: rgba(184, 153, 62, 0.12);
  border-color: var(--gold);
  color: var(--gold-light);
}

.fr-landing a.fr-sector-card:hover .fr-sector-icon i {
  color: var(--gold-light);
}

.fr-landing a.fr-sector-card:hover .fr-sector-role {
  color: var(--gold);
}

.fr-landing a.fr-sector-card:hover h3 {
  color: #fff;
}

.fr-landing a.fr-sector-card:hover p {
  color: rgba(255, 255, 255, 0.65);
}

.fr-landing a.fr-sector-card:hover .fr-sector-link {
  color: var(--gold-light);
  gap: 12px;
}

/* ---- Personal CTA strip below the grid ---- */
.fr-landing .fr-sector-personal {
  text-align: center;
  padding: 24px 32px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  background: var(--warm-white);
}

.fr-landing .fr-sector-personal p {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}

.fr-landing .fr-sector-personal a {
  color: var(--gold);
  font-weight: 500;
  text-decoration: none;
}

.fr-landing .fr-sector-personal a:hover {
  color: var(--gold-light);
}

/* Responsive: collapse to 2-col below 1024px, 1-col below 640px. */
@media (max-width: 1024px) {
  .fr-landing .fr-sector-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .fr-landing .fr-sector-grid {
    grid-template-columns: 1fr;
  }
  .fr-landing .fr-sector-card {
    padding: 32px 24px;
  }
}

/* =========================================================================
   Coverage gap table  (insurer 'what's covered / what's not' grid)
   -------------------------------------------------------------------------
   Used by coverage-gap.php partial. A bordered max-820px-wide card
   containing a navy header row + 6 white data rows. Each data row is
   a 3-column grid (label + current-policy + with-record-of-truth)
   with one of three status types per cell:

     yes  (green #2d7a4f, fa-check)  : already covered
     no   (red #c0392b,  fa-times)   : not addressed by policy
     new  (gold,         fa-plus)    : new dimension Record of Truth adds

   Greens / reds are hardcoded hex values since they are status
   semantics, not theme accent colours - changing them would change
   meaning. Gold uses theme tokens as normal.

   The pull-quote below the table reuses the .fr-pull-quote primitive
   already defined for pr-toolkit; no new pull-quote CSS needed.
   ========================================================================= */

.fr-landing .fr-coverage-table {
  max-width: 820px;
  margin: 0 auto;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  overflow: hidden;
}

/* ---- Header row (navy bg with uppercase gold-tinted labels) ---- */
.fr-landing .fr-coverage-table-header {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr;
  background: var(--navy);
  padding: 0;
}

.fr-landing .fr-coverage-table-header span {
  font-family: var(--font-sans) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-muted);
  padding: 18px 24px;
}

/* Subtle column separators in the header row only - keeps the
   grid visually structured against the dark navy bg. */
.fr-landing .fr-coverage-table-header span:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

/* ---- Data rows ---- */
.fr-landing .fr-coverage-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr;
  border-top: 1px solid var(--border-soft);
  background: #fff;
  transition: background 0.15s;
}

.fr-landing .fr-coverage-row:hover {
  background: var(--warm-white);
}

.fr-landing .fr-coverage-cell {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  padding: 18px 24px;
  font-size: 14.5px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fr-landing .fr-coverage-cell:not(:last-child) {
  border-right: 1px solid var(--border-soft);
}

/* ---- Cell variants ---- */
.fr-landing .fr-coverage-cell-label {
  font-weight: 500;
  color: var(--text-dark);
}

/* yes: green check, slightly heavier weight */
.fr-landing .fr-coverage-cell-yes {
  color: #2d7a4f;
  font-weight: 600;
  gap: 8px;
}

.fr-landing .fr-coverage-cell-yes i {
  color: #2d7a4f;
  font-size: 13px;
}

/* no: red X with muted text */
.fr-landing .fr-coverage-cell-no {
  color: var(--text-muted);
  font-size: 14px;
}

.fr-landing .fr-coverage-cell-no i {
  color: #c0392b;
  font-size: 13px;
}

/* new: gold plus, gold-tinted text */
.fr-landing .fr-coverage-cell-new {
  color: var(--gold-muted);
  font-weight: 600;
  font-size: 14px;
}

.fr-landing .fr-coverage-cell-new i {
  color: var(--gold);
  font-size: 13px;
}

/* ---- Note below the table (italic centred) ---- */
.fr-landing .fr-coverage-note {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  text-align: center;
  margin-top: 20px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
  font-style: italic;
}

/* Responsive: stack cells vertically below 720px. Each row becomes a
   small card with the label on top followed by the two status cells
   beneath. The header row hides on mobile since context is implicit
   in the cell colour-coding. */
@media (max-width: 720px) {
  .fr-landing .fr-coverage-table-header {
    display: none;
  }
  .fr-landing .fr-coverage-row {
    grid-template-columns: 1fr;
  }
  .fr-landing .fr-coverage-cell {
    padding: 14px 20px;
  }
  .fr-landing .fr-coverage-cell:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
  }
  .fr-landing .fr-coverage-cell-label {
    background: var(--warm-gray);
    font-size: 13px;
  }
}

/* =========================================================================
   The Method section  (doctor canonical - Before/After search-results)
   -------------------------------------------------------------------------
   Used by the-method.php partial. Sits on fr-section-navy (forced via
   landing-page.php slug-keyed branch). Centred 920px-wide nested card
   with two side-by-side panels: dark-navy 'Before' showing the
   allegation-dominated search landscape, white 'After' showing the
   same query reshaped post-publication.

   Status colours (red for allegation-state, green for outcome-state,
   gold for verified, neutral grey for unknown) are hardcoded hex
   values - they carry semantic meaning, not visual styling, and
   should not move with the palette.
   ========================================================================= */

/* ---- Intro paragraphs (white-tinted, on navy bg) ---- */
.fr-landing .fr-method-intro {
  max-width: 780px;
  margin: 0 auto 56px;
}

.fr-landing .fr-method-intro p {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.78);
}

.fr-landing .fr-method-intro p:last-child {
  margin-bottom: 0;
}

/* ---- Comparison container (2-col card with drop shadow) ---- */
.fr-landing .fr-method-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 920px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
}

.fr-landing .fr-method-panel {
  padding: 40px 36px;
}

/* ---- Before panel (dark-navy bg, red accent) ---- */
.fr-landing .fr-method-panel-before {
  background: #1e2a42;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---- After panel (white bg, green accent) ---- */
.fr-landing .fr-method-panel-after {
  background: #fff;
  color: var(--text-body);
}

/* ---- Panel label (small pill at top, status-coloured) ---- */
.fr-landing .fr-method-panel-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 3px;
  margin-bottom: 20px;
}

.fr-landing .fr-method-panel-label i {
  font-size: 10px;
}

.fr-landing .fr-method-panel-before .fr-method-panel-label {
  background: rgba(180, 60, 60, 0.15);
  color: #e87070;
  border: 1px solid rgba(180, 60, 60, 0.25);
}

.fr-landing .fr-method-panel-before .fr-method-panel-label i {
  color: #e87070;
}

.fr-landing .fr-method-panel-after .fr-method-panel-label {
  background: rgba(26, 107, 90, 0.08);
  color: #1a6b5a;
  border: 1px solid rgba(26, 107, 90, 0.2);
}

.fr-landing .fr-method-panel-after .fr-method-panel-label i {
  color: #1a6b5a;
}

/* ---- Search-query line (above results) ---- */
.fr-landing .fr-method-query {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 24px;
  padding-bottom: 20px;
}

.fr-landing .fr-method-query span {
  font-weight: 600;
}

.fr-landing .fr-method-panel-before .fr-method-query {
  color: rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fr-landing .fr-method-panel-before .fr-method-query span {
  color: rgba(255, 255, 255, 0.7);
}

.fr-landing .fr-method-panel-after .fr-method-query {
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft);
}

.fr-landing .fr-method-panel-after .fr-method-query span {
  color: var(--text-dark);
}

/* ---- Result row (icon-number + content) ---- */
.fr-landing .fr-method-result {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
}

.fr-landing .fr-method-panel-before .fr-method-result {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fr-landing .fr-method-panel-after .fr-method-result {
  border-bottom: 1px solid var(--border-soft);
}

.fr-landing .fr-method-result:last-child {
  border-bottom: none !important;
}

.fr-landing .fr-method-result-num {
  font-family: var(--font-serif) !important;
  font-size: 20px;
  font-weight: 600;
  flex-shrink: 0;
  width: 28px;
  line-height: 1.3;
}

.fr-landing .fr-method-panel-before .fr-method-result-num {
  color: rgba(255, 255, 255, 0.25);
}

.fr-landing .fr-method-panel-after .fr-method-result-num {
  color: var(--gold);
}

.fr-landing .fr-method-result-content {
  flex: 1;
}

.fr-landing .fr-method-result-type {
  font-family: var(--font-sans) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.fr-landing .fr-method-panel-before .fr-method-result-type {
  color: #e87070;
}

.fr-landing .fr-method-panel-after .fr-method-result-type {
  color: #1a6b5a;
}

.fr-landing .fr-method-result-title {
  font-family: var(--font-serif) !important;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 4px;
}

.fr-landing .fr-method-panel-before .fr-method-result-title {
  color: rgba(255, 255, 255, 0.72);
}

.fr-landing .fr-method-panel-after .fr-method-result-title {
  color: var(--text-dark);
}

.fr-landing .fr-method-result-desc {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.55;
}

.fr-landing .fr-method-panel-before .fr-method-result-desc {
  color: rgba(255, 255, 255, 0.38);
}

.fr-landing .fr-method-panel-after .fr-method-result-desc {
  color: var(--text-muted);
}

/* ---- Result tag (small pill at bottom of each result) ---- */
.fr-landing .fr-method-result-tag {
  display: inline-block;
  font-family: var(--font-sans) !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  margin-top: 6px;
}

/* Tag variants - scoped to panel so the same class can colour
   differently depending on whether it's Before or After. */
.fr-landing .fr-method-panel-before .fr-method-tag-negative {
  background: rgba(180, 60, 60, 0.2);
  color: #e87070;
  border: 1px solid rgba(180, 60, 60, 0.3);
}

.fr-landing .fr-method-panel-before .fr-method-tag-neutral {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.fr-landing .fr-method-panel-after .fr-method-tag-positive {
  background: rgba(26, 107, 90, 0.08);
  color: #1a6b5a;
  border: 1px solid rgba(26, 107, 90, 0.2);
}

.fr-landing .fr-method-panel-after .fr-method-tag-verified {
  background: rgba(184, 153, 62, 0.08);
  color: var(--gold-muted);
  border: 1px solid rgba(184, 153, 62, 0.2);
}

.fr-landing .fr-method-panel-after .fr-method-tag-neutral {
  background: rgba(100, 100, 100, 0.06);
  color: #888;
  border: 1px solid rgba(100, 100, 100, 0.1);
}

/* ---- Docs grid (below the comparison) ---- */
.fr-landing .fr-method-docs {
  max-width: 780px;
  margin: 56px auto 0;
}

.fr-landing .fr-method-docs h3 {
  font-family: var(--font-serif) !important;
  font-weight: 400;
  text-align: center;
  margin-bottom: 12px;
  color: #fff;
}

.fr-landing .fr-method-docs > p {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  text-align: center;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 32px;
}

.fr-landing .fr-method-docs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.fr-landing .fr-method-doc-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

.fr-landing .fr-method-doc-item i {
  color: var(--gold);
  font-size: 14px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* Override: the inline-cta block needs extra top space when it sits
   below the docs grid (the docs grid itself takes more vertical room
   than typical content). */
.fr-landing .fr-method-cta {
  margin-top: 56px;
}

/* Responsive: stack Before/After vertically below 820px (the comparison
   does not work as side-by-side once the panels get too narrow); shift
   docs grid to 1-col below 640px. The border-right between panels
   becomes a border-bottom on stack so the divider remains visible. */
@media (max-width: 820px) {
  .fr-landing .fr-method-comparison {
    grid-template-columns: 1fr;
  }
  .fr-landing .fr-method-panel-before {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
}

@media (max-width: 640px) {
  .fr-landing .fr-method-panel {
    padding: 32px 24px;
  }
  .fr-landing .fr-method-docs-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   Proof section  (financial-advisor canonical)
   -------------------------------------------------------------------------
   Used by proof.php partial. Two distinct visual blocks:

   1. .fr-proof-block: navy callout with a giant '23 days' stat on
      the left, headline + body paragraph on the right. Reusable in
      principle but only the proof partial currently uses it.

   2. .fr-proof-card: white card with navy header strip (label +
      meta-items), 2-column Before/After body (4 fact rows each),
      gold-tinted outcome strip, warm-gray footer. The card class
      names use .fr-proof-* to avoid colliding with the consumer
      case-study partial's .fr-case-study-meta primitive.

   Status colours (green #1a6b5a for outcome) hardcoded as semantic
   meaning, consistent with the-method's tag palette.
   ========================================================================= */

/* ---- Proof block (navy callout with 23-day stat) ---- */
.fr-landing .fr-proof-block {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 860px;
  margin: 0 auto;
  padding: 44px 48px;
  background: var(--navy);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.fr-landing .fr-proof-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 0% 50%, rgba(184, 153, 62, 0.10) 0%, transparent 60%);
  pointer-events: none;
}

.fr-landing .fr-proof-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.fr-landing .fr-proof-days {
  font-family: var(--font-serif) !important;
  font-size: 80px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold-light);
}

.fr-landing .fr-proof-days-lbl {
  font-family: var(--font-sans) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-muted);
  margin-top: 4px;
}

.fr-landing .fr-proof-content {
  position: relative;
  z-index: 1;
}

.fr-landing .fr-proof-headline {
  font-family: var(--font-serif) !important;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;
  margin: 0 0 12px;
  color: #fff;
}

.fr-landing .fr-proof-body {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
}

/* ---- Proof card (illustrative engagement profile) ---- */
.fr-landing .fr-proof-card {
  max-width: 860px;
  margin: 40px auto 0;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Header strip - navy bg with gold-tinted label and meta-items. */
.fr-landing .fr-proof-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  background: var(--navy);
  padding: 22px 36px;
}

.fr-landing .fr-proof-card-label {
  font-family: var(--font-sans) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.fr-landing .fr-proof-card-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.fr-landing .fr-proof-card-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

.fr-landing .fr-proof-card-meta-item i {
  color: rgba(184, 153, 62, 0.6);
  font-size: 10px;
}

/* Body - 2-column Before/After grid. */
.fr-landing .fr-proof-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.fr-landing .fr-proof-col {
  padding: 32px 36px;
}

.fr-landing .fr-proof-col:first-child {
  border-right: 1px solid var(--border-soft);
}

.fr-landing .fr-proof-col-label {
  font-family: var(--font-sans) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* Each fact: label (fixed-width left) + value (flexible right). */
.fr-landing .fr-proof-fact {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 14.5px;
}

.fr-landing .fr-proof-fact:last-child {
  border-bottom: none;
}

.fr-landing .fr-proof-fact-lbl {
  flex: 0 0 130px;
  color: var(--text-muted);
}

.fr-landing .fr-proof-fact-val {
  color: var(--text-dark);
  font-weight: 500;
  line-height: 1.55;
}

/* Outcome strip - gold-tinted band at the bottom of the body. */
.fr-landing .fr-proof-card-outcome {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px 36px;
  background: rgba(26, 107, 90, 0.04);
  border-top: 1px solid rgba(26, 107, 90, 0.12);
}

.fr-landing .fr-proof-card-outcome-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(26, 107, 90, 0.1);
  color: #1a6b5a;
  font-size: 15px;
}

.fr-landing .fr-proof-card-outcome-icon i {
  color: #1a6b5a;
}

.fr-landing .fr-proof-card-outcome-text {
  flex: 1;
  margin: 0;
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
}

.fr-landing .fr-proof-card-outcome-text strong {
  color: #1a6b5a;
  font-weight: 600;
}

/* Footer - small italic warm-gray strip with confidentiality note. */
.fr-landing .fr-proof-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  background: var(--warm-gray);
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  font-style: italic;
}

.fr-landing .fr-proof-card-footer i {
  color: var(--gold-muted);
  font-size: 11px;
}

/* Responsive: stack proof-block columns below 700px; collapse card
   body 2-col -> 1-col below 760px and convert the column separator
   border-right into a border-bottom so the divider remains visible. */
@media (max-width: 760px) {
  .fr-landing .fr-proof-card-body {
    grid-template-columns: 1fr;
  }
  .fr-landing .fr-proof-col:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
  }
}

@media (max-width: 700px) {
  .fr-landing .fr-proof-block {
    flex-direction: column;
    gap: 24px;
    padding: 36px 32px;
    text-align: center;
  }
  .fr-landing .fr-proof-card-header {
    padding: 20px 24px;
  }
  .fr-landing .fr-proof-col {
    padding: 24px 24px;
  }
  .fr-landing .fr-proof-card-outcome {
    padding: 18px 24px;
  }
  .fr-landing .fr-proof-card-footer {
    padding: 12px 24px;
  }
  .fr-landing .fr-proof-fact {
    flex-direction: column;
    gap: 4px;
  }
  .fr-landing .fr-proof-fact-lbl {
    flex-basis: auto;
  }
}

/* =========================================================================
   Hero stats panel  (in-hero credibility numbers, ads-landing variants)
   -------------------------------------------------------------------------
   Rendered by hero.php between the hero-sub paragraph and the hero-cta
   button when both the audience config has hero_stats data AND the
   page's _fr_landing_show_hero_stats meta is set. Three big gold serif
   numbers with white-translucent sans-serif labels beneath; a centred
   italic citation paragraph below.
   ========================================================================= */

.fr-landing .fr-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 56px;
  margin: 36px auto 18px;
  max-width: 720px;
}

.fr-landing .fr-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.fr-landing .fr-hero-stat-value {
  font-family: var(--font-serif) !important;
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--gold-light);
}

.fr-landing .fr-hero-stat-label {
  font-family: var(--font-sans) !important;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
  max-width: 180px;
}

.fr-landing .fr-hero-stats-note {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.55;
  text-align: center;
  color: rgba(255, 255, 255, 0.35);
  max-width: 640px;
  margin: 0 auto 32px;
}

@media (max-width: 600px) {
  .fr-landing .fr-hero-stats {
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 28px auto 14px;
  }
  .fr-landing .fr-hero-stat-value {
    font-size: 32px;
  }
}

/* =========================================================================
   Trust strip section  (5-card credibility row, ads-landing variants)
   -------------------------------------------------------------------------
   Rendered by trust-strip.php when the audience has items configured
   and the page's _fr_landing_show_trust_strip meta is set. Section
   wrapper is fr-section-navy (forced via landing-page.php) but with
   a bg override below: trust-strip uses var(--navy-mid) so it reads
   as visually distinct from the var(--navy) hero immediately above
   it, plus reduced top/bottom padding for a tighter integration.

   Card layout: icon-above-text. The icon-circle is a credibility
   anchor at the top of each card; title and body stack below in
   a left-aligned column with the full card width available for the
   text. No section header - this is a low-key credibility row.
   ========================================================================= */

/* Section-id-scoped override: only this specific section gets the
   navy-mid bg, leaving the-gap and the-method (also fr-section-navy)
   on the standard navy. */
.fr-landing #trust-strip.fr-section-navy {
  background: var(--navy-mid);
  /* Section spacing reduced by ~1/3 vs other navy sections - the
     trust strip should read as a continuation of the hero, not a
     full-height standalone section. */
  padding-top: calc(var(--space-8) * 2 / 3);
  padding-bottom: calc(var(--space-8) * 2 / 3);
}

.fr-landing .fr-trust-strip-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
}

.fr-landing .fr-trust-strip-item {
  /* Column layout: icon sits above the text, both left-aligned.
     Text gets the full card width since it is no longer constrained
     by an inline icon. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.fr-landing .fr-trust-strip-icon {
  /* Larger circle to anchor each card now that the icon is the
     visual entry-point rather than a side-decoration. */
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--gold-light);
  font-size: 22px;
}

.fr-landing .fr-trust-strip-icon i {
  color: var(--gold-light);
}

.fr-landing .fr-trust-strip-text {
  flex: 1;
  min-width: 0;
}

.fr-landing .fr-trust-strip-title {
  font-family: var(--font-serif) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 6px;
  color: #fff;
}

.fr-landing .fr-trust-strip-body {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 1100px) {
  .fr-landing .fr-trust-strip-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .fr-landing .fr-trust-strip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .fr-landing .fr-trust-strip-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* =========================================================================
   Your Investment section  (per-audience pricing)
   -------------------------------------------------------------------------
   Used by your-investment.php partial. 2-column body below the
   standard section header: prose on the left, a warm-white card
   on the right containing the 'What determines your investment'
   factors list and the 'Payment structure' label/value rows. A
   gold-tinted CTA callout sits below the body, linking to
   #check-eligibility.

   Factor icons are gold, decorative-only (the text already carries
   the meaning). The card itself is the primary trust-signal element
   on the page - structured, scannable, no ambiguity.
   ========================================================================= */

/* ---- 2-column layout (prose | card) ---- */
.fr-landing .fr-investment-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

/* ---- Prose column ---- */
.fr-landing .fr-investment-prose p {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-body);
  margin-bottom: 20px;
}

.fr-landing .fr-investment-prose p:last-child {
  margin-bottom: 0;
}

/* ---- Card column ---- */
.fr-landing .fr-investment-card {
  background: var(--warm-white);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 36px 36px;
}

.fr-landing .fr-investment-card-section + .fr-investment-card-section {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--border-soft);
}

.fr-landing .fr-investment-card-heading {
  font-family: var(--font-serif) !important;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 18px;
}

/* ---- Factors list (5 icon + text rows) ---- */
.fr-landing .fr-investment-factors {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fr-landing .fr-investment-factor {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
}

.fr-landing .fr-investment-factor:last-child {
  border-bottom: 0;
}

.fr-landing .fr-investment-factor i {
  color: var(--gold);
  font-size: 16px;
  margin-top: 3px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.fr-landing .fr-investment-factor span {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-body);
}

/* ---- Payment structure (label / value rows) ---- */
.fr-landing .fr-investment-payment {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fr-landing .fr-investment-payment-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0;
}

.fr-landing .fr-investment-payment-label {
  font-family: var(--font-sans) !important;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text-dark);
  flex-shrink: 0;
}

.fr-landing .fr-investment-payment-value {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 14.5px;
  color: var(--text-muted);
  text-align: right;
}

/* ---- CTA callout (gold-tinted strip below the body) ---- */
.fr-landing .fr-investment-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1100px;
  margin: 56px auto 0;
  padding: 32px 40px;
  background: rgba(184, 153, 62, 0.06);
  border: 1px solid rgba(184, 153, 62, 0.25);
  border-radius: 8px;
}

.fr-landing .fr-investment-cta-text {
  flex: 1;
  min-width: 0;
}

.fr-landing .fr-investment-cta-title {
  font-family: var(--font-serif) !important;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 4px;
}

.fr-landing .fr-investment-cta-body {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.fr-landing .fr-investment-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-family: var(--font-sans) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  padding: 14px 24px;
  border: 1px solid var(--gold);
  border-radius: 4px;
  background: transparent;
  transition: background 0.2s, color 0.2s;
}

.fr-landing .fr-investment-cta-link:hover {
  background: var(--gold);
  color: var(--navy);
}

/* Responsive:
   - Below 900px: stack the 2-col body to 1-col, card sits beneath prose.
   - Below 640px: CTA callout stacks vertically with the button below text. */
@media (max-width: 900px) {
  .fr-landing .fr-investment-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 640px) {
  .fr-landing .fr-investment-card {
    padding: 28px 24px;
  }
  .fr-landing .fr-investment-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 24px;
    gap: 20px;
  }
  .fr-landing .fr-investment-payment-row {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }
  .fr-landing .fr-investment-payment-value {
    text-align: left;
  }
}

/* =========================================================================
   Monitoring & Maintenance section  (single shared block)
   -------------------------------------------------------------------------
   Used by monitoring-maintenance.php. Same content all audiences,
   with one B2B-conditional footnote between the 3-card grid and
   the closing panel (lawyer/insurer/pr-agency only).

   Visual structure:
     - Blue 'Included as standard' callout (left-icon + text)
     - 3-card grid:
         No maintenance     (default style, light border)
         Annual Maintenance (navy border, price in navy)
         Lifetime Maintenance (gold border + cream tint, gold price,
                                'Best Value' badge top-right)
     - Optional footnote (B2B only)
     - Dark navy closing panel with the 'Why maintain your Record
       of Truth?' heading

   Bullet icons: fa-check (gold) for included, fa-times (muted) for
   excluded - drives the 'No maintenance' card's three excluded
   feature rows.
   ========================================================================= */

/* ---- 'Included as standard' callout (blue tinted left-border bar) ---- */
.fr-landing .fr-mm-callout {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto 48px;
  padding: 24px 32px;
  background: rgba(28, 50, 110, 0.04);
  border-left: 4px solid var(--navy);
  border-radius: 4px;
}

.fr-landing .fr-mm-callout-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 16px;
}

.fr-landing .fr-mm-callout-icon i {
  color: #fff;
}

.fr-landing .fr-mm-callout-title {
  font-family: var(--font-serif) !important;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 8px;
}

.fr-landing .fr-mm-callout-body {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-body);
  margin: 0;
}

/* ---- 3-card grid ---- */
.fr-landing .fr-mm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---- Card base (No maintenance default) ---- */
.fr-landing .fr-mm-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}

/* ---- Annual variant (highlighted: gold border + warm tint) ---- */
.fr-landing .fr-mm-card-annual {
  background: rgba(184, 153, 62, 0.04);
  border: 2px solid var(--gold);
  padding: 31px 27px;  /* compensate 1px for thicker border */
}

/* ---- Lifetime variant (quiet: navy border + white background) ---- */
.fr-landing .fr-mm-card-lifetime {
  border: 2px solid var(--navy);
  padding: 31px 27px;
}

/* ---- No-maintenance variant (highlighted: gold border + warm tint) ---- */
.fr-landing .fr-mm-card-none {
  background: rgba(184, 153, 62, 0.04);
  border: 2px solid var(--gold);
  padding: 31px 27px;
}

/* Best Value badge (only on lifetime card). The badge re-anchors
   the Lifetime card as the focal point of the row despite the
   quieter navy + white treatment from 1.1.48. */
.fr-landing .fr-mm-card-badge {
  position: absolute;
  top: 0;
  right: 24px;
  transform: translateY(-50%);
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-sans) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 4px;
}

/* Card content */
.fr-landing .fr-mm-card-title {
  font-family: var(--font-serif) !important;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-dark);
  margin: 0 0 10px;
}

.fr-landing .fr-mm-card-price {
  font-family: var(--font-sans) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-dark);
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-soft);
}

.fr-landing .fr-mm-card-annual .fr-mm-card-price {
  color: var(--gold);
}

.fr-landing .fr-mm-card-lifetime .fr-mm-card-price {
  color: var(--navy);
}

.fr-landing .fr-mm-card-none .fr-mm-card-price {
  color: var(--gold);
}

.fr-landing .fr-mm-card-body p {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0 0 14px;
}

.fr-landing .fr-mm-card-body p:last-child {
  margin-bottom: 0;
}

/* Bullet list with ?/? icons */
.fr-landing .fr-mm-card-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--border-soft);
  flex: 1;
}

.fr-landing .fr-mm-card-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
}

.fr-landing .fr-mm-card-list-item i {
  flex-shrink: 0;
  width: 16px;
  margin-top: 3px;
  text-align: center;
  font-size: 13px;
}

.fr-landing .fr-mm-included {
  color: var(--text-body);
}

.fr-landing .fr-mm-included i {
  color: var(--gold);
}

.fr-landing .fr-mm-excluded {
  color: var(--text-muted);
}

.fr-landing .fr-mm-excluded i {
  color: var(--text-muted);
  opacity: 0.5;
}

/* Card footer line */
.fr-landing .fr-mm-card-footer {
  font-family: var(--font-sans) !important;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
  color: var(--text-muted);
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}

/* ---- B2B-conditional footnote (between grid and closing panel) ---- */
.fr-landing .fr-mm-footnote {
  max-width: 1100px;
  margin: 28px auto 0;
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
}

/* ---- Closing dark navy panel ---- */
.fr-landing .fr-mm-closing {
  max-width: 1100px;
  margin: 56px auto 0;
  padding: 40px 48px;
  background: var(--navy);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.fr-landing .fr-mm-closing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 0% 0%, rgba(184, 153, 62, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.fr-landing .fr-mm-closing-heading {
  font-family: var(--font-serif) !important;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gold-light);
  margin: 0 0 14px;
  position: relative;
  z-index: 1;
}

.fr-landing .fr-mm-closing-body {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Desktop visual order: No Maintenance | Lifetime | Annual.
   Lifetime sits in the middle as the focal point (BEST VALUE
   badge anchored to its top edge). DOM order in the PHP partial
   is unchanged - we use CSS order on the grid items so the
   markup stays semantically natural (cheapest -> middle ->
   recurring) while the visual layout puts the headline option
   in the centre.

   The @media (max-width: 1024px) block below overrides these
   for the stacked mobile view, where Annual leads the column.
   Lifetime stays at order: 2 in both views. */
.fr-landing .fr-mm-card-none     { order: 1; }
.fr-landing .fr-mm-card-lifetime { order: 2; }
.fr-landing .fr-mm-card-annual   { order: 3; }

/* Responsive:
   - Below 1024px: 3-col -> 1-col stack, with Annual card moved
     visually first via order property (highlighted choice first on
     narrow viewports), then Lifetime, then No maintenance.
   - Below 640px: reduce padding, reposition Best Value badge. */
@media (max-width: 1024px) {
  .fr-landing .fr-mm-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 560px;
  }
  .fr-landing .fr-mm-card-annual   { order: 1; }
  .fr-landing .fr-mm-card-lifetime { order: 2; }
  .fr-landing .fr-mm-card-none     { order: 3; }
}

@media (max-width: 640px) {
  .fr-landing .fr-mm-callout {
    flex-direction: column;
    padding: 22px 22px;
    gap: 14px;
  }
  .fr-landing .fr-mm-card {
    padding: 28px 22px;
  }
  .fr-landing .fr-mm-card-annual,
  .fr-landing .fr-mm-card-lifetime,
  .fr-landing .fr-mm-card-none {
    padding: 27px 21px;
  }
  .fr-landing .fr-mm-closing {
    padding: 32px 28px;
  }
  .fr-landing .fr-mm-card-badge {
    right: 18px;
    font-size: 10.5px;
    padding: 5px 12px;
  }
}

/* =========================================================================
   Landing-page header  (logo + dynamic page-section menu)
   -------------------------------------------------------------------------
   Sticky top bar rendered by header-landing.php. Layout:
     [ FAMORENOVO wordmark ]  ----------  [ menu items | Login | CTA ]
     [ reputation restored ]

   Sticky positioning (top: 0) so the bar lifts as the user scrolls
   past it but stays available for navigation. No padding-top hack
   on the page body needed.

   Active-section underline driven by IntersectionObserver in the
   inline script inside header-landing.php. The is-active class on
   a nav link lifts the gold underline to indicate the section
   currently in view.
   ========================================================================= */

.fr-landing .fr-landing-header,
body .fr-landing-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy-deep, #0a1733);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 18px 0;
}

.fr-landing-header-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}


/* ---- Admin-bar offset ---- */
/* When WordPress's #wpadminbar is showing (body.admin-bar) the
   admin bar is fixed at top:0 with z-index 99999, which would
   cover the top of our sticky header (z-index 100) - including
   the progress bar at the top of it. Shift the sticky offset
   down by the admin bar's height so our header (and progress)
   sit cleanly below it. WP's own breakpoint for admin-bar height
   change is max-width: 782px (32px desktop, 46px mobile). */
body.admin-bar .fr-landing-header {
  top: 32px;
}

@media screen and ( max-width: 782px ) {
  body.admin-bar .fr-landing-header {
    top: 46px;
  }
}

/* ---- Logo (FAMORENOVO wordmark + tagline) ---- */
.fr-landing-header .fr-logo {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1;
}

.fr-landing-header .fr-wm {
  font-family: var(--font-serif) !important;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  line-height: 1.1;
}

.fr-landing-header .fr-wm span {
  color: var(--gold);
}

.fr-landing-header .fr-header-tagline {
  font-family: var(--font-sans) !important;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
}

/* ---- Nav ---- */
.fr-landing-nav {
  display: flex;
  align-items: center;
}

.fr-landing-nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fr-landing-nav-item {
  margin: 0;
}

.fr-landing-nav-link {
  display: inline-block;
  position: relative;
  padding: 10px 16px;
  font-family: var(--font-sans) !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.18s;
}

/* Animated underline that slides in from the left when the link is
   hovered, focused or active. transform-origin: left causes the
   line to grow from the left edge when scaleX goes 0 -> 1, and to
   shrink back toward the left when it returns to 0. */
.fr-landing-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
  pointer-events: none;
}

.fr-landing-nav-link:hover,
.fr-landing-nav-link:focus,
.fr-landing-nav-link.is-active {
  color: #fff;
}

.fr-landing-nav-link:hover::after,
.fr-landing-nav-link:focus::after,
.fr-landing-nav-link.is-active::after {
  transform: scaleX(1);
}

/* ---- Check Eligibility CTA (outlined-gold) ---- */
.fr-landing-nav-cta {
  display: inline-block;
  margin-left: 14px;
  padding: 11px 22px;
  font-family: var(--font-sans) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 3px;
  transition: background 0.18s, color 0.18s;
}

.fr-landing-nav-cta:hover,
.fr-landing-nav-cta:focus {
  background: var(--gold);
  color: var(--navy);
}


/* ---- Reading-progress indicator ---- */
/* Thin gold line at the top of the sticky header, growing
   horizontally as the user scrolls down the page. Driven by a
   requestAnimationFrame loop in the wp_footer-emitted JS that
   updates the scaleX transform. The bar sits inside .fr-landing-
   header (which is position: sticky), so it stays at the top of
   the viewport for the duration of the scroll. */
.fr-landing-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 101;
  will-change: transform;
  pointer-events: none;
}

/* ---- Mobile hamburger toggle (hidden on desktop) ---- */
.fr-landing-nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}

.fr-landing-nav-toggle .fr-hamburger-bar {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}

/* ---- Responsive: collapse to hamburger below 860px ---- */
@media (max-width: 860px) {
  .fr-landing-header-inner {
    padding: 0 22px;
    gap: 16px;
  }
  .fr-landing-nav-toggle {
    display: flex;
    order: 2;
  }
  .fr-landing-nav-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy-deep, #0a1733);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
  }
  .fr-landing-nav-list.fr-landing-nav-list--open {
    max-height: 600px;
  }
  .fr-landing-nav-list .fr-landing-nav-item {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  .fr-landing-nav-list .fr-landing-nav-link {
    display: block;
    padding: 16px 22px;
  }
  /* Stacked mobile menu uses a background-tint hover state
     instead of the desktop underline. Hide the ::after entirely. */
  .fr-landing-nav-list .fr-landing-nav-link::after {
    display: none;
  }
  .fr-landing-nav-list .fr-landing-nav-link:hover,
  .fr-landing-nav-list .fr-landing-nav-link.is-active {
    background: rgba(255, 255, 255, 0.03);
    color: var(--gold);
  }
  .fr-landing-nav-list .fr-landing-nav-cta {
    display: block;
    margin: 14px 22px 18px;
    text-align: center;
  }
  /* The nav wrapper needs relative positioning so the absolute
     positioned mobile menu list anchors correctly. The header also
     needs relative positioning so the menu list aligns to it on
     mobile viewports. */
  .fr-landing-header {
    position: sticky;
  }
  .fr-landing-nav {
    position: static;
  }
  .fr-landing-header-inner {
    position: relative;
  }
  .fr-landing-header .fr-wm {
    font-size: 18px;
  }
  .fr-landing-header .fr-header-tagline {
    font-size: 9px;
    letter-spacing: 0.18em;
  }
}

/* ---- Small screens: reduce header padding further ---- */
@media (max-width: 480px) {
  .fr-landing-header {
    padding: 14px 0;
  }
  .fr-landing-header-inner {
    padding: 0 18px;
  }
}

/* =========================================================================
   Fixed footer CTA bar
   -------------------------------------------------------------------------
   Slim navy bar fixed to the bottom of the viewport carrying an
   audience-tailored question line and a gold 'Run the eligibility
   check' button. Hidden by default (translateY(100%) + opacity 0).
   The wp_footer-emitted JS adds .is-visible to bring it into view
   based on which section is in the viewport (hidden during hero and
   during check-eligibility; visible otherwise).

   Rise-and-recede effect comes from the transform + opacity
   transitions; cubic-bezier curve gives a slight ease-out so the
   bar settles rather than slamming in.
   ========================================================================= */

.fr-landing-footer-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background: var(--navy-deep, #0a1733);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.4s ease;
  pointer-events: none;
  padding-bottom: env(safe-area-inset-bottom);
}

.fr-landing-footer-cta.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.fr-landing-footer-cta-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.fr-landing-footer-cta-message {
  flex: 1 1 auto;
  font-family: var(--font-sans) !important;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

.fr-landing-footer-cta-message strong {
  color: #fff;
  font-weight: 600;
  margin-right: 8px;
}

.fr-landing-footer-cta-message-sub {
  color: rgba(255, 255, 255, 0.6);
}

.fr-landing-footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  font-family: var(--font-sans) !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  background: var(--gold);
  border: 0;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.18s;
}

.fr-landing-footer-cta-btn:hover,
.fr-landing-footer-cta-btn:focus {
  background: #dab86a;
  color: var(--navy);
  text-decoration: none;
}

.fr-landing-footer-cta-btn i {
  font-size: 12px;
  transition: transform 0.18s ease;
}

.fr-landing-footer-cta-btn:hover i,
.fr-landing-footer-cta-btn:focus i {
  transform: translateX(4px);
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .fr-landing-footer-cta-inner {
    padding: 14px 22px;
    gap: 18px;
  }
  .fr-landing-footer-cta-message {
    font-size: 14px;
  }
  /* Hide the sub-message on narrow viewports - the bold question
     line carries the message; the supporting clause crowds the
     button below this width. */
  .fr-landing-footer-cta-message-sub {
    display: none;
  }
  .fr-landing-footer-cta-btn {
    padding: 12px 20px;
  }
}

@media (max-width: 600px) {
  .fr-landing-footer-cta-inner {
    padding: 12px 16px;
    gap: 12px;
  }
  .fr-landing-footer-cta-message {
    font-size: 13px;
  }
  .fr-landing-footer-cta-btn {
    padding: 11px 16px;
    font-size: 12px;
    letter-spacing: 0.06em;
  }
}

/* =========================================================================
   Famorenovo chat launcher: ride on top of footer CTA bar  (theme v1.1.55+)
   -------------------------------------------------------------------------
   The footer CTA bar (.fr-landing-footer-cta) slides up and down based on
   scroll position - hidden on the hero, hidden again over the eligibility
   check section, visible in between. The bar manages its own state via
   the .is-visible class (transform: translateY toggling between 0 and
   100%, transitioned over 0.4s with cubic-bezier easing).

   We anchor the chat launcher (.frc-launcher) and its floating panel
   (.frc-panel-floating) to the top of the bar visually: the launcher's
   bottom position keys off body:has(.fr-landing-footer-cta.is-visible),
   which is true only while the bar is actually showing. When the bar
   slides up, the launcher rides up with it; when the bar slides down,
   the launcher follows back to its default low position. The bottom
   transition timing matches the bar's exactly, so the two move as if
   physically linked.

   --fr-footer-cta-height tracks the bar's responsive height per
   breakpoint. The variable is scoped to bodies that have the bar in
   the DOM at all (regardless of is-visible state), so the transition
   rule is applied even on first paint without flicker.

   The :has() selector is widely supported as of 2024+. Browsers
   without it ignore the rule and exhibit the previous static
   overlap behaviour - no regression for that audience.
   ========================================================================= */

/* Scope the variable to bodies that have the bar in DOM. Per-breakpoint
   overrides below match the bar's own responsive padding/font sizing. */
body:has(.fr-landing-footer-cta) {
  --fr-footer-cta-height: 84px;
}

/* Add a bottom transition to the launcher and floating panel whenever
   the bar is present, so the ride animation is smooth even on the very
   first appearance of the bar. The chat plugin's default transition
   doesn't include bottom - this re-declares the full list including the
   plugin's original transforms/shadow/opacity, with bottom timing
   matched to .fr-landing-footer-cta (0.4s cubic-bezier(0.22, 0.61,
   0.36, 1)). */
body:has(.fr-landing-footer-cta) .frc-launcher,
body:has(.fr-landing-footer-cta) .frc-panel-floating {
  transition: bottom 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.15s ease,
              box-shadow 0.15s ease,
              opacity 0.2s ease;
}

/* Lift the launcher only when the bar is actually visible (.is-visible
   class present). When the bar slides down, this rule no longer applies
   and the launcher returns to its plugin-default bottom position. */
body:has(.fr-landing-footer-cta.is-visible) .frc-launcher,
body:has(.fr-landing-footer-cta.is-visible) .frc-panel-floating {
  bottom: calc(var(--fr-footer-cta-height, 84px) + 16px);
}

@media (max-width: 860px) {
  body:has(.fr-landing-footer-cta) {
    --fr-footer-cta-height: 72px;
  }
}

@media (max-width: 600px) {
  body:has(.fr-landing-footer-cta) {
    --fr-footer-cta-height: 66px;
  }
}

@media (max-width: 480px) {
  /* The chat plugin converts the floating panel to full-screen at
     <=480px, so panel positioning is moot below this width. The
     launcher (icon-only at this width) still gets the ride animation. */
  body:has(.fr-landing-footer-cta.is-visible) .frc-launcher {
    bottom: calc(var(--fr-footer-cta-height, 66px) + 12px);
  }
}