/*
Theme Name: Finnita
Theme URI: https://finnita.com
Description: Custom child theme for the Finnita marketing site. Built on GeneratePress. Student loans, handled.
Author: Finnita
Author URI: https://finnita.com
Template: generatepress
Version: 0.8.0
Requires at least: 6.0
Requires PHP: 8.1
License: Proprietary — all rights reserved
Text Domain: finnita
*/

/* =============================================================================
   FINNITA DESIGN SYSTEM
   Section order:
     1. Design tokens (handoff §6.4 verbatim + Finnita extensions)
     2. Reset + base
     3. Typography
     4. Layout + containers
     5. Buttons
     6. Cards
     7. Form elements
     8. FAQ accordion
     9. Header
    10. Footer
    11. Template parts
    12. Utilities

   Rules of the road:
     - All colors, spacing, radius, z-index, transitions via CSS custom properties.
     - Mobile-first. Media queries live inside each component block.
     - BEM-ish naming: .finnita-{component}, __element, --modifier.
     - Compose via classes (.card.card--elevated.finnita-testimonial).
============================================================================= */


/* =============================================================================
   1. DESIGN TOKENS
============================================================================= */

/* --- Finnita design system — verbatim from handoff §6.4 --- */
:root {
  /* --- Colors: Primary (Indigo) --- */
  --color-primary-50: #ECEEF5;
  --color-primary-100: #C8CCE0;
  --color-primary-200: #9BA2C4;
  --color-primary-300: #6E78A8;
  --color-primary-400: #4A5589;
  --color-primary-500: #354170;   /* Primary brand color */
  --color-primary-600: #2C3660;
  --color-primary-700: #232D52;
  --color-primary-800: #1A2140;   /* Hero overlays */
  --color-primary-900: #111630;

  /* --- Colors: Accent (Coral) --- */
  --color-accent-50: #FDF0EC;
  --color-accent-100: #F9CFC2;
  --color-accent-200: #F4A991;
  --color-accent-300: #EE8261;
  --color-accent-400: #E85D3A;   /* Primary accent — CTAs */
  --color-accent-500: #D14A28;   /* Hover state on accent */
  --color-accent-600: #B03D20;
  --color-accent-700: #8E3119;
  --color-accent-800: #7A2E1C;
  --color-accent-900: #4E1A0E;

  /* --- Colors: Teal (Supporting) --- */
  --color-teal-50: #E6F5F3;
  --color-teal-100: #B3E0DA;
  --color-teal-200: #7FCBBF;
  --color-teal-300: #4DB6A5;
  --color-teal-400: #2A9D8F;   /* Primary teal */
  --color-teal-500: #1F8478;
  --color-teal-600: #196C63;
  --color-teal-700: #155650;
  --color-teal-800: #0F3F3B;
  --color-teal-900: #092B28;

  /* --- Colors: Amber (Warm) --- */
  --color-amber-50: #FEF6E8;
  --color-amber-100: #FBEABF;
  --color-amber-200: #F8D88F;
  --color-amber-300: #F5C45F;
  --color-amber-400: #F5A623;   /* Primary amber */
  --color-amber-500: #D8901A;
  --color-amber-600: #B37614;
  --color-amber-700: #8C5C0E;
  --color-amber-800: #6B4107;
  --color-amber-900: #452A04;

  /* --- Colors: Neutrals (Indigo-tinted) --- */
  --color-neutral-50: #F6F7FA;   /* Page background */
  --color-neutral-100: #EAECF2;
  --color-neutral-200: #D1D4DE;  /* Borders */
  --color-neutral-300: #A9AEBB;
  --color-neutral-400: #7E8494;
  --color-neutral-500: #5C6175;  /* Muted text */
  --color-neutral-600: #4A4F62;
  --color-neutral-700: #3A3E50;  /* Body text */
  --color-neutral-800: #282C3A;
  --color-neutral-900: #181B25;

  /* --- Colors: Semantic --- */
  --color-success: #16A34A;
  --color-success-bg: #DCFCE7;
  --color-success-text: #166534;
  --color-warning: #D97706;
  --color-warning-bg: #FEF3C7;
  --color-warning-text: #92400E;
  --color-error: #DC2626;
  --color-error-bg: #FEE2E2;
  --color-error-text: #991B1B;
  --color-info: #354170;
  --color-info-bg: #ECEEF5;
  --color-info-text: #232D52;

  /* --- Typography --- */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Type scale */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.875rem;  /* 14px */
  --text-md: 1rem;        /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */

  /* Line heights */
  --leading-tight: 1.2;    /* Headlines */
  --leading-snug: 1.3;     /* Subheadlines */
  --leading-normal: 1.6;   /* Body — minimum per D-99 */
  --leading-relaxed: 1.75; /* Body — preferred per D-99 */

  /* --- Spacing (8px base grid) --- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* --- Border Radius --- */
  --radius-sm: 6px;    /* Small buttons, tags */
  --radius-default: 8px;  /* Inputs, buttons */
  --radius-lg: 12px;   /* Cards, hero sections */

  /* --- Layout --- */
  --content-width: 1200px;
  --content-narrow: 800px;

  /* --- Section Spacing (D-99: generous whitespace) --- */
  --section-padding-y: var(--space-16);        /* 64px between sections — desktop */
  --section-padding-y-mobile: var(--space-12); /* 48px between sections — mobile */
}

/* --- Finnita extensions — tokens not in handoff §6.4 --- */
:root {
  --transition-fast: 150ms ease;
  --transition-default: 200ms ease;
  --shadow-sm: 0 1px 2px 0 rgba(24, 27, 37, 0.05);
  --shadow-md: 0 4px 8px -2px rgba(24, 27, 37, 0.08), 0 2px 4px -1px rgba(24, 27, 37, 0.05);
  --shadow-lg: 0 10px 25px -5px rgba(24, 27, 37, 0.10), 0 4px 6px -2px rgba(24, 27, 37, 0.05);
  --radius-md: 10px;    /* Large button radius (sits between default 8px and lg 12px) per handoff §6.5 */
  --z-header: 100;
  --z-drawer: 90;
  --header-height: 96px;
  --header-height-mobile: 72px;
}


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

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--color-neutral-700);
  background-color: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video,
picture {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-400);
}

:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip link — revealed only on keyboard focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary-800);
  color: #FFFFFF;
  padding: var(--space-3) var(--space-5);
  z-index: 999;
  border-radius: 0 0 var(--radius-default) 0;
  font-weight: 500;
}

.skip-link:focus {
  left: 0;
  color: #FFFFFF;
}


/* =============================================================================
   3. TYPOGRAPHY
============================================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-neutral-900);
  margin: 0 0 var(--space-4);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); font-weight: 600; }
h3 { font-size: var(--text-xl); font-weight: 600; }
h4 { font-size: var(--text-lg); font-weight: 600; }
h5 { font-size: var(--text-md); font-weight: 600; }
h6 {
  font-size: var(--text-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

p {
  margin: 0 0 var(--space-4);
  line-height: var(--leading-relaxed);
}

p:last-child {
  margin-bottom: 0;
}

ul, ol {
  line-height: var(--leading-relaxed);
}

strong, b {
  font-weight: 600;
  color: var(--color-neutral-900);
}

@media (min-width: 768px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
}

@media (min-width: 1024px) {
  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-4xl); }
}


/* =============================================================================
   4. LAYOUT & CONTAINERS
============================================================================= */

.finnita-container {
  width: 100%;
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.finnita-container--narrow {
  max-width: var(--content-narrow);
}

.finnita-section {
  padding-top: var(--section-padding-y-mobile);
  padding-bottom: var(--section-padding-y-mobile);
}

.finnita-section--white {
  background-color: #FFFFFF;
}

.finnita-section--alt {
  background-color: var(--color-primary-50);
}

.finnita-section--dark {
  background-color: var(--color-primary-800);
  color: #FFFFFF;
}

.finnita-section--dark h1,
.finnita-section--dark h2,
.finnita-section--dark h3,
.finnita-section--dark h4 {
  color: #FFFFFF;
}

@media (min-width: 768px) {
  .finnita-container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }

  .finnita-section {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
  }
}


/* =============================================================================
   5. BUTTONS
============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 500;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius-default);
  cursor: pointer;
  transition: background-color var(--transition-default),
              color var(--transition-default),
              border-color var(--transition-default),
              transform var(--transition-fast);
  white-space: nowrap;
  line-height: 1.2;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* --- Sizes --- */

.btn--md {
  padding: 10px 20px;
  font-size: var(--text-base);
}

.btn--lg {
  padding: 13px 28px;
  font-size: var(--text-md);
  border-radius: var(--radius-md);
}

/* --- Tiers (on light backgrounds) --- */
.btn--primary {
  background-color: var(--color-accent-400);
  color: #FFFFFF;
  border-color: var(--color-accent-400);
}

.btn--primary:hover {
  background-color: var(--color-accent-500);
  border-color: var(--color-accent-500);
  color: #FFFFFF;
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-primary-500);
  border-color: transparent;
}

.btn--ghost:hover {
  color: var(--color-accent-400);
  text-decoration: underline;
}

/* --- Variants for use on dark backgrounds --- */
.btn--ghost-on-dark {
  background-color: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.35);
}

.btn--ghost-on-dark:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #FFFFFF;
  color: #FFFFFF;
}


/* =============================================================================
   6. CARDS
============================================================================= */

.card {
  background-color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.card--elevated {
  background-color: #FFFFFF;
  border: 0.5px solid var(--color-neutral-200);
}

/* Media-first card: drops .card's padding and sets up a column flex for
   cards with a full-bleed image/thumbnail above a padded body (sector
   card, content-hub card, case-study card). */
.card--media {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Interactive card: anchor-wrapped card with hover lift. Compose with
   .card.card--elevated.card--media.card--interactive for a clickable,
   animated card. Keeps text color inherited so the whole card reads as
   one link without recoloring child text on hover. */
.card--interactive {
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-default), box-shadow var(--transition-default);
}

.card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: inherit;
}


/* =============================================================================
   7. FAQ ACCORDION
============================================================================= */

.finnita-faq {
  display: flex;
  flex-direction: column;
}

/* Section label rendered when faq-accordion.php is called with a */
/* `section_label` arg (used 4x on the FAQ page to group audience  */
/* sections: Borrowers / Employers / Brokers / About).             */
.finnita-faq__section-label {
  text-align: center;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--color-neutral-900);
  margin: 0 0 var(--space-8);
}

.finnita-faq__item {
  border-bottom: 1px solid var(--color-neutral-200);
}

.finnita-faq__item:last-child {
  border-bottom: none;
}

.finnita-faq__item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-md);
  color: var(--color-neutral-900);
}

.finnita-faq__item summary::-webkit-details-marker {
  display: none;
}

.finnita-faq__item summary:hover {
  color: var(--color-primary-500);
}

.finnita-faq__chevron {
  flex-shrink: 0;
  color: var(--color-primary-500);
  transition: transform var(--transition-default);
}

.finnita-faq__item[open] .finnita-faq__chevron {
  transform: rotate(180deg);
}

.finnita-faq__answer {
  padding: 0 0 var(--space-5);
  color: var(--color-neutral-600);
  line-height: var(--leading-relaxed);
}

@media (min-width: 768px) {
  .finnita-faq__item summary {
    font-size: var(--text-lg);
  }
  .finnita-faq__section-label {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-10);
  }
}


/* =============================================================================
   9. HEADER
============================================================================= */

.finnita-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--color-neutral-200);
}

.finnita-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height-mobile);
}

.finnita-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.finnita-header__logo img {
  height: 60px;
  width: auto;
}

.finnita-header__nav {
  display: none;
}

.finnita-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Primary nav menu — desktop styles first; drawer overrides at mobile */
.finnita-nav__menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-8);
}

.finnita-nav__menu > li {
  position: relative;
}

.finnita-nav__menu a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  color: var(--color-primary-500);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-base);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.finnita-nav__menu a:hover,
.finnita-nav__menu a:focus-visible {
  color: var(--color-accent-400);
}

/* Parent-with-children chevron — uses currentColor via SVG data URI */
.finnita-nav__menu .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  transition: transform var(--transition-fast);
}

.finnita-nav__menu .sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

/* Mobile hamburger */
.finnita-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: var(--color-primary-500);
  cursor: pointer;
  padding: 0;
}

.finnita-hamburger__icon--close {
  display: none;
}

.finnita-hamburger[aria-expanded="true"] .finnita-hamburger__icon--open {
  display: none;
}

.finnita-hamburger[aria-expanded="true"] .finnita-hamburger__icon--close {
  display: block;
}

/* Mobile drawer state (<1024px) — activated by body.is-nav-open.
   (Nav is hidden by default via .finnita-header__nav { display: none }
   in the base rule above; this block only overrides that when the drawer
   is open.) */
@media (max-width: 1023px) {
  body.is-nav-open {
    overflow: hidden;
  }

  body.is-nav-open .finnita-header__nav {
    display: block;
    position: fixed;
    top: var(--header-height-mobile);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFFFFF;
    z-index: var(--z-drawer);
    overflow-y: auto;
    padding: var(--space-4) 0;
  }

  body.is-nav-open .finnita-nav__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--space-6);
  }

  body.is-nav-open .finnita-nav__menu a {
    padding: var(--space-4) 0;
    font-size: var(--text-lg);
    border-bottom: 1px solid var(--color-neutral-100);
    justify-content: space-between;
  }

  body.is-nav-open .finnita-nav__menu .sub-menu {
    display: none;
    padding: 0 0 var(--space-2) var(--space-6);
  }

  body.is-nav-open .finnita-nav__menu li.is-submenu-open > .sub-menu {
    display: block;
  }

  body.is-nav-open .finnita-nav__menu .sub-menu a {
    font-size: var(--text-md);
    border-bottom: none;
    padding: var(--space-3) 0;
  }

  body.is-nav-open .finnita-nav__menu li.is-submenu-open > a::after {
    transform: rotate(180deg);
  }
}

/* Desktop layout (≥1024px) */
@media (min-width: 1024px) {
  .finnita-header__inner {
    min-height: var(--header-height);
  }

  .finnita-header__logo img {
    height: 72px;
  }

  .finnita-header__nav {
    display: block;
    flex: 1;
  }

  .finnita-nav__menu {
    justify-content: center;
  }

  .finnita-nav__menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    background-color: #FFFFFF;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-default);
    box-shadow: var(--shadow-md);
    padding: var(--space-3);
  }

  .finnita-nav__menu .menu-item-has-children:hover > .sub-menu,
  .finnita-nav__menu .menu-item-has-children:focus-within > .sub-menu {
    display: block;
  }

  .finnita-nav__menu .sub-menu a {
    display: block;
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
    border-radius: var(--radius-sm);
  }

  .finnita-nav__menu .sub-menu a:hover {
    background-color: var(--color-primary-50);
  }

  .finnita-hamburger {
    display: none;
  }
}


/* =============================================================================
   10. FOOTER
============================================================================= */

.finnita-footer {
  background-color: var(--color-primary-800);
  color: #FFFFFF;
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
}

.finnita-footer__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.finnita-footer__column-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0 0 var(--space-4);
}

.finnita-footer__column ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.finnita-footer__column a {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--text-base);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.finnita-footer__column a:hover {
  color: #FFFFFF;
}

.finnita-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.finnita-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.finnita-footer__brand img {
  height: 32px;
  width: auto;
}

.finnita-footer__brand-tagline {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.finnita-footer__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
}

.finnita-footer__meta p {
  margin: 0;
}

.finnita-footer__domain a {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--text-sm);
}

@media (min-width: 768px) {
  .finnita-footer__columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .finnita-footer__columns {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }

  .finnita-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
  }

  .finnita-footer__domain {
    margin-left: auto;
  }
}


/* =============================================================================
   11. TEMPLATE PARTS
============================================================================= */

/* --- Hero --- */

.finnita-hero {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #FFFFFF;
  overflow: hidden;
}

.finnita-hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.finnita-hero__content {
  position: relative;
  text-align: center;
  padding: var(--space-16) var(--space-6);
  max-width: var(--content-narrow);
  z-index: 1;
}

.finnita-hero__headline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: #FFFFFF;
  margin-bottom: var(--space-5);
}

.finnita-hero__subheadline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: var(--space-8);
}

.finnita-hero__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
  justify-content: center;
}

.finnita-hero__secondary-link {
  color: #FFFFFF;
  font-weight: 500;
  font-size: var(--text-base);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
}

.finnita-hero__secondary-link:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

@media (min-width: 768px) {
  .finnita-hero__headline {
    font-size: var(--text-4xl);
  }
  .finnita-hero__ctas {
    flex-direction: row;
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .finnita-hero {
    min-height: calc(100svh - var(--header-height));
  }
  .finnita-hero__headline {
    font-size: var(--text-5xl);
  }
}

/* --- Trust bar --- */

.finnita-trust-bar__metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-10) var(--space-6);
  text-align: center;
}

.finnita-trust-bar__metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}

.finnita-trust-bar__value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--color-primary-500);
  /* Multi-word values like "1.5 pages" should stay on one line. 5-metric */
  /* desktop shrinks the font size (see the 1024+ media query below) so  */
  /* the no-wrap value still fits inside its narrower grid column.       */
  white-space: nowrap;
}

.finnita-trust-bar__label {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  line-height: var(--leading-snug);
  max-width: 18ch;
}

/* Client logo bar scaffold (D-101) — empty until populated */
.finnita-client-logo-bar {
  margin-top: var(--space-10);
}

.finnita-client-logo-bar:empty {
  display: none;
}

/* Optional per-metric context sub-line (Results Block 2 uses this to add */
/* "how we count it" copy under each metric). Rendered as a third span   */
/* only when the metric's `context` key is set.                          */
.finnita-trust-bar__context {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
  line-height: var(--leading-snug);
  max-width: 22ch;
  margin-top: var(--space-1);
}

@media (min-width: 768px) {
  .finnita-trust-bar__metrics {
    grid-template-columns: repeat(4, 1fr);
  }
  /* 5-metric layout: tablet shows 3 + 2 (not a perfect grid but balanced  */
  /* since CSS grid wraps the 4th and 5th to row 2 automatically).         */
  .finnita-trust-bar__metrics--5 {
    grid-template-columns: repeat(3, 1fr);
  }
  .finnita-trust-bar__value {
    font-size: var(--text-4xl);
  }
}

@media (min-width: 1024px) {
  /* 5-metric on desktop: all 5 in a single row. */
  .finnita-trust-bar__metrics--5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .finnita-trust-bar__value {
    font-size: var(--text-5xl);
  }
  /* On 5-metric desktop, columns are narrower (~208px) than 4-metric    */
  /* (~272px), so text-5xl (48px) values like "1.5 pages" overflow. Drop */
  /* 5-metric values to text-4xl (36px) so they fit with no-wrap.        */
  .finnita-trust-bar__metrics--5 .finnita-trust-bar__value {
    font-size: var(--text-4xl);
  }
}

/* --- Testimonial card --- */
/* Composes .card.card--elevated */

.finnita-testimonial {
  position: relative;
  padding-top: var(--space-10);
}

.finnita-testimonial::before {
  content: '\201C';
  position: absolute;
  top: -0.25em;
  left: var(--space-5);
  font-family: var(--font-heading);
  font-size: 5rem;
  line-height: 1;
  color: var(--color-accent-400);
}

.finnita-testimonial__sector-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal-400);
  margin-bottom: var(--space-3);
}

.finnita-testimonial__body {
  margin: 0;
}

.finnita-testimonial__quote {
  margin: 0 0 var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-neutral-800);
  font-style: normal;
  quotes: none;
}

.finnita-testimonial__quote::before,
.finnita-testimonial__quote::after {
  content: none;
}

.finnita-testimonial__attribution {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
}

.finnita-testimonial__author {
  font-weight: 600;
  color: var(--color-neutral-900);
}

/* --- Case study card --- */
/* Composes .card.card--elevated.card--media */

.finnita-case-study__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background-color: var(--color-neutral-100);
}

.finnita-case-study__body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.finnita-case-study__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.finnita-case-study__stat-value {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--color-primary-500);
}

.finnita-case-study__stat-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.finnita-case-study__quote {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-neutral-800);
  margin: 0;
}

.finnita-case-study__attribution {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
}

/* --- CTA section (dual borrower/employer) --- */

.finnita-cta-block__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

.finnita-cta-block__column h2 {
  color: #FFFFFF;
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
}

.finnita-cta-block__column p {
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .finnita-cta-block__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
  .finnita-cta-block__column h2 {
    font-size: var(--text-3xl);
  }
}

/* --- Content hub (blog posts) --- */

.finnita-content-hub__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

/* Each content-hub card composes .card.card--elevated.card--media.card--interactive */

.finnita-content-hub__thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: var(--color-neutral-100);
}

.finnita-content-hub__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.finnita-content-hub__category {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-teal-400);
}

.finnita-content-hub__title {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-neutral-900);
  margin: 0;
}

.finnita-content-hub__more {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary-500);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.finnita-content-hub--empty {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  color: var(--color-neutral-500);
  border: 1px dashed var(--color-neutral-200);
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  .finnita-content-hub__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Sector card --- */
/* Composes .card.card--elevated.card--media.card--interactive */

.finnita-sector-card__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background-color: var(--color-neutral-100);
}

.finnita-sector-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.finnita-sector-card__headline {
  font-size: var(--text-2xl);
  color: var(--color-neutral-900);
  margin: 0;
}

.finnita-sector-card__body p {
  margin: 0;
  color: var(--color-neutral-600);
  line-height: var(--leading-relaxed);
}

.finnita-sector-card__cta {
  margin-top: auto;
  padding-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary-500);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.finnita-sector-card:hover .finnita-sector-card__cta {
  color: var(--color-accent-400);
}

/* --- Shared grid patterns --- */

.finnita-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .finnita-cards-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .finnita-cards-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Step card (used in Home "How It Works Preview") --- */
/* Composes .card.card--elevated */

.finnita-step-card__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-400);
  margin-bottom: var(--space-2);
}

.finnita-step-card__icon {
  color: var(--color-primary-500);
  margin-bottom: var(--space-4);
}

.finnita-step-card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.finnita-step-card p {
  margin: 0;
  color: var(--color-neutral-600);
  line-height: var(--leading-relaxed);
}

/* --- Icon list (used in Home "Trust & Differentiation") --- */

.finnita-icon-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.finnita-icon-list li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.finnita-icon-list__icon {
  flex-shrink: 0;
  color: var(--color-primary-500);
  margin-top: 2px;
}

.finnita-icon-list strong {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-neutral-900);
  margin-bottom: var(--space-1);
}

.finnita-icon-list__body {
  color: var(--color-neutral-600);
  line-height: var(--leading-relaxed);
}

/* --- Home-specific inline 2-col layouts (What We Do, Trust & Differentiation) --- */

.finnita-home-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}

.finnita-home-2col__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.finnita-home-2col__headline {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-6);
}

.finnita-home-2col__body p {
  color: var(--color-neutral-600);
  line-height: var(--leading-relaxed);
}

.finnita-home-trust {
  border-top: 1px solid var(--color-neutral-100);
}

/* Section headlines that center */
.finnita-section__headline {
  text-align: center;
  font-size: var(--text-3xl);
  margin-bottom: var(--space-10);
}

.finnita-section__footer-link {
  display: block;
  text-align: center;
  margin-top: var(--space-8);
}

@media (min-width: 768px) {
  .finnita-home-2col {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-12);
  }
}

@media (min-width: 1024px) {
  .finnita-home-2col__headline,
  .finnita-section__headline {
    font-size: var(--text-4xl);
  }
}

/* --- Text-forward hero (HIW, About, FAQ) --- */
/* Used when a page needs a light, centered, no-CTA informational hero. */
/* Do NOT use for employer-targeted landing heroes — use hero.php for those. */

.finnita-text-hero {
  padding-top: var(--space-16);
  padding-bottom: var(--space-12);
  text-align: center;
}

.finnita-text-hero__headline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--color-primary-800);
  margin-bottom: var(--space-5);
}

.finnita-text-hero__subheadline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-neutral-700);
  max-width: 65ch;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .finnita-text-hero {
    padding-top: var(--space-20);
    padding-bottom: var(--space-16);
  }
  .finnita-text-hero__headline {
    font-size: var(--text-4xl);
  }
}

@media (min-width: 1024px) {
  .finnita-text-hero__headline {
    font-size: var(--text-5xl);
  }
}

/* --- HIW stage block (alternating 2-col layout with screenshot + body) --- */
/* .finnita-stage-block--reverse flips the column order at 768px+ so Stage 2 */
/* renders screenshot-left/body-right between Stage 1 and Stage 3. Mobile    */
/* stacks in source order (body above visual) regardless of modifier.       */

.finnita-stage-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  /* start-alignment handles mixed-aspect screenshots without floating  */
  /* shorter text in the center of a taller image column.               */
  align-items: start;
}

/* Reduce the default section top padding on the merged stages section */
/* so the "How it works" headline sits closer to the Problem section    */
/* above it — staging review flagged the default gap as too airy.       */
/* Default --section-padding-y is 48/64 px (mobile/desktop); we cut the */
/* top to 16/32 so the total Problem->heading gap drops from ~96/128    */
/* to ~64/96 (33%/25% reduction).                                      */
.finnita-hiw-stages {
  padding-top: var(--space-4);
}

/* Inter-stage spacing inside the merged .finnita-hiw-stages section.  */
/* Previously each stage was its own .finnita-section; merging them    */
/* removed that padding, so we add it back as sibling margin.          */
.finnita-hiw-stages .finnita-stage-block + .finnita-stage-block {
  margin-top: var(--space-16);
}

@media (min-width: 768px) {
  .finnita-hiw-stages {
    padding-top: var(--space-8);
  }
  .finnita-hiw-stages .finnita-stage-block + .finnita-stage-block {
    margin-top: var(--space-20);
  }
}

.finnita-stage-block__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-400);
  margin-bottom: var(--space-3);
}

.finnita-stage-block__headline {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-5);
}

.finnita-stage-block__body p {
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.finnita-stage-block__visual {
  margin: 0;
}

.finnita-stage-block__screenshot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
  .finnita-stage-block {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
  .finnita-stage-block--reverse .finnita-stage-block__body {
    order: 2;
  }
  .finnita-stage-block--reverse .finnita-stage-block__visual {
    order: 1;
  }
  .finnita-stage-block__headline {
    font-size: var(--text-4xl);
  }
}

/* --- HIW "You vs. Finnita" comparison table --- */
/* Used inside stage blocks on Stages 1 + 2 to contrast borrower effort with */
/* Finnita's handling of each step. Stage 3 has no table.                   */

.finnita-comparison-table {
  width: 100%;
  margin-top: var(--space-5);
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.finnita-comparison-table th,
.finnita-comparison-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
}

.finnita-comparison-table thead th {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-neutral-900);
  border-bottom: 1.5px solid var(--color-neutral-200);
}

.finnita-comparison-table tbody td {
  color: var(--color-neutral-700);
  border-bottom: 1px solid var(--color-neutral-100);
}

.finnita-comparison-table tbody tr:last-child td {
  border-bottom: none;
}

.finnita-comparison-table tbody tr:nth-child(even) td {
  background-color: var(--color-primary-50);
}

/* --- HIW-specific page sections (Blocks 2, 6, 7) --- */

/* Problem section padding-bottom override (HIW only) — pulls the        */
/* "How it works" heading in the next section closer to "Finnita exists  */
/* to close that gap." Erik flagged the original 64/96 px combined gap   */
/* as still airy after the first reduction; this drops it to 40/56 px    */
/* (~37% / 42% reduction, targeting his 40% request).                    */
.finnita-hiw-problem {
  padding-bottom: var(--space-6);
}

.finnita-hiw-problem__body {
  text-align: center;
}

.finnita-hiw-problem__body h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-6);
}

.finnita-hiw-problem__body p {
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.finnita-hiw-problem__stat-callout {
  margin: var(--space-10) 0;
  padding: var(--space-8) var(--space-6);
  background-color: var(--color-primary-50);
  border-radius: var(--radius-lg);
}

.finnita-hiw-problem__stat-callout p {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-neutral-800);
}

.finnita-hiw-problem__stat {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-4xl);
  color: var(--color-accent-400);
  line-height: 1;
}

.finnita-hiw-problem__closing {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-primary-800);
}

.finnita-hiw-net-positive {
  text-align: center;
}

.finnita-hiw-net-positive h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-5);
}

.finnita-hiw-net-positive p {
  font-size: var(--text-lg);
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.finnita-hiw-net-positive .btn {
  margin-top: var(--space-4);
}

.finnita-hiw-employers__lead {
  text-align: center;
  font-size: var(--text-md);
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  max-width: 65ch;
  margin: 0 auto var(--space-5);
}

.finnita-hiw-employers__lead--spacer {
  margin-bottom: var(--space-10);
}

.finnita-hiw-employers .card h3 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
  color: var(--color-neutral-900);
}

.finnita-hiw-employers .card p {
  margin: 0;
  color: var(--color-neutral-600);
  line-height: var(--leading-relaxed);
}

@media (min-width: 768px) {
  .finnita-hiw-problem__body h2 {
    font-size: var(--text-4xl);
  }
  .finnita-hiw-problem__stat-callout {
    padding: var(--space-10) var(--space-12);
  }
  .finnita-hiw-problem__stat-callout p {
    font-size: var(--text-2xl);
  }
  .finnita-hiw-problem__stat {
    font-size: var(--text-5xl);
  }
  .finnita-hiw-net-positive h2 {
    font-size: var(--text-4xl);
  }
}

/* --- Education spoke page-specific sections (Blocks 2, 3, 4, 6) --- */

/* Block 2: Education Problem — centered copy + 3-stat row. */

.finnita-edu-problem__body {
  text-align: center;
}

.finnita-edu-problem__body h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-6);
}

.finnita-edu-problem__body p {
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.finnita-edu-problem__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.finnita-edu-problem__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}

.finnita-edu-problem__stat-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-4xl);
  color: var(--color-accent-400);
  line-height: 1;
}

.finnita-edu-problem__stat-label {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  line-height: var(--leading-snug);
  max-width: 22ch;
}

/* Block 3: PSLF Retroactive Credit — centered callout on alt bg. */

.finnita-edu-pslf {
  text-align: center;
}

.finnita-edu-pslf h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-6);
  max-width: 26ch;
  margin-left: auto;
  margin-right: auto;
}

.finnita-edu-pslf p {
  font-size: var(--text-lg);
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  max-width: 65ch;
  margin: 0 auto var(--space-5);
}

/* Block 4: Districts comparison — 2-col cards (district vs. Finnita). */

.finnita-edu-districts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.finnita-edu-districts__col h3 {
  font-size: var(--text-xl);
  color: var(--color-primary-800);
  margin-bottom: var(--space-4);
}

.finnita-edu-districts__col ol {
  padding-left: var(--space-6);
  margin: 0;
}

.finnita-edu-districts__col ol li {
  margin-bottom: var(--space-4);
  padding-left: var(--space-2);
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
}

.finnita-edu-districts__col ol li:last-child {
  margin-bottom: 0;
}

.finnita-edu-districts__col ol li strong {
  color: var(--color-neutral-900);
}

/* Block 6: Cynthia case study — featured card with Coral 400 accent. */
/* Photo-left / content-right on tablet+, stacked on mobile.           */

.finnita-edu-cynthia {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding: var(--space-6);
  background-color: #FFFFFF;
  border-left: 4px solid var(--color-accent-400);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.finnita-edu-cynthia__media {
  margin: 0;
}

.finnita-edu-cynthia__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.finnita-edu-cynthia__headline {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

.finnita-edu-cynthia__body p {
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.finnita-edu-cynthia .finnita-comparison-table {
  margin-top: 0;
}

@media (min-width: 768px) {
  .finnita-edu-problem__body h2 {
    font-size: var(--text-4xl);
  }
  .finnita-edu-problem__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-10);
  }
  .finnita-edu-problem__stat-value {
    font-size: var(--text-5xl);
  }
  .finnita-edu-pslf h2 {
    font-size: var(--text-4xl);
  }
  .finnita-edu-districts__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  .finnita-edu-cynthia {
    grid-template-columns: 2fr 3fr;
    gap: var(--space-8);
    padding: var(--space-8);
    align-items: start;
  }
  .finnita-edu-cynthia__headline {
    font-size: var(--text-3xl);
  }
}

/* --- Results page-specific sections (Blocks 1, 3, 4) --- */

/* Block 1: dark text hero with no CTAs. Built inline instead of hero.php */
/* because hero.php's 600px+ min-height is too tall for a text-only hero. */

.finnita-results-hero {
  text-align: center;
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.finnita-results-hero__headline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  color: #FFFFFF;
  margin-bottom: var(--space-5);
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
}

.finnita-results-hero__subheadline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.9);
  max-width: 65ch;
  margin: 0 auto;
}

/* Block 3: How We Measure — visible copy + <details> expandable methodology. */

.finnita-results-methodology h2 {
  text-align: center;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-6);
}

.finnita-results-methodology > .finnita-container > p {
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.finnita-results-methodology__link {
  display: inline-flex;
  margin-bottom: var(--space-8);
}

.finnita-results-methodology__details {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-neutral-200);
}

.finnita-results-methodology__summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-md);
  color: var(--color-primary-500);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--transition-fast);
}

.finnita-results-methodology__summary::-webkit-details-marker {
  display: none;
}

.finnita-results-methodology__summary::before {
  content: '+';
  display: inline-block;
  width: 1em;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--color-accent-400);
}

.finnita-results-methodology__details[open] .finnita-results-methodology__summary::before {
  content: '−';
}

.finnita-results-methodology__summary:hover {
  color: var(--color-accent-400);
}

.finnita-results-methodology__content {
  margin-top: var(--space-5);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-primary-100);
}

.finnita-results-methodology__content p {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.finnita-results-methodology__content p:last-child {
  margin-bottom: 0;
}

/* Block 4: Case study cards — composes .card.card--elevated.card--media. */
/* Each card has a photo, name + role + intro, savings callout, and a     */
/* 2-col Before/After comparison table (reuses .finnita-comparison-table).*/

.finnita-results-cs {
  display: flex;
  flex-direction: column;
}

.finnita-results-cs__media {
  margin: 0;
}

.finnita-results-cs__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* Anchor to top so portrait-cropped photos (e.g. Kendra's 918x1024)  */
  /* keep faces visible — default center-crop lops off heads. Landscape */
  /* 3:2 photos (Cynthia, Jon) are unaffected since no vertical crop.   */
  object-position: center top;
  background-color: var(--color-neutral-100);
  display: block;
}

.finnita-results-cs__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.finnita-results-cs__name {
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--color-neutral-900);
  margin: 0;
}

.finnita-results-cs__role {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-400);
  margin: 0;
}

.finnita-results-cs__intro {
  font-size: var(--text-sm);
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.finnita-results-cs__savings {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-4);
  background-color: var(--color-primary-50);
  border-radius: var(--radius-md);
  text-align: center;
  margin-top: var(--space-2);
}

.finnita-results-cs__savings-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--color-accent-400);
}

.finnita-results-cs__savings-label {
  font-size: var(--text-xs);
  color: var(--color-neutral-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Tighten comparison-table padding inside the narrow card columns so the */
/* row content doesn't get cramped. Scoped to .finnita-results-cs only.   */
.finnita-results-cs .finnita-comparison-table {
  font-size: var(--text-xs);
  margin-top: auto;
}

.finnita-results-cs .finnita-comparison-table th,
.finnita-results-cs .finnita-comparison-table td {
  padding: var(--space-2) var(--space-3);
}

@media (min-width: 768px) {
  .finnita-results-hero {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }
  .finnita-results-hero__headline {
    font-size: var(--text-5xl);
  }
  .finnita-results-methodology h2 {
    font-size: var(--text-4xl);
  }
}

/* --- About page-specific sections (Blocks 3, 4, 5) --- */

/* Block 3: .finnita-value-block — reusable 3px Indigo 500 left-accent block */
/* First used for the 4 "What drives us" cards on About Block 3.           */
/* Promotable to Brokers / Partners / future trust pages without changes.  */

.finnita-value-block {
  border-left: 3px solid var(--color-primary-500);
  padding: var(--space-2) var(--space-6);
  margin: 0;
}

.finnita-value-block h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-3);
}

.finnita-value-block p {
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.finnita-about-beliefs__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-4);
}

/* Block 4: PBC Status — centered single-column callout on alt bg. */

.finnita-about-pbc {
  text-align: center;
}

.finnita-about-pbc h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-5);
}

.finnita-about-pbc p {
  font-size: var(--text-lg);
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  max-width: 65ch;
  margin: 0 auto var(--space-6);
}

/* Block 5: Team — centered paragraph, minimal treatment. */

.finnita-about-team p {
  text-align: center;
  font-size: var(--text-lg);
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  max-width: 65ch;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .finnita-value-block {
    padding-left: var(--space-8);
  }
  .finnita-value-block h3 {
    font-size: var(--text-2xl);
  }
  .finnita-about-beliefs__list {
    gap: var(--space-10);
  }
  .finnita-about-pbc h2 {
    font-size: var(--text-4xl);
  }
}

/* --- FAQ page Block 6: single centered Contact Us callout --- */
/* Structurally different from cta-section.php (not dual, not dark) —    */
/* the FAQ page closes with a soft "still have questions?" prompt, not   */
/* a conversion block. White bg, centered, primary button + text link.  */

.finnita-faq-cta {
  text-align: center;
}

.finnita-faq-cta h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-5);
}

.finnita-faq-cta__lead {
  font-size: var(--text-lg);
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  max-width: 50ch;
  margin: 0 auto var(--space-8);
}

.finnita-faq-cta__secondary {
  margin-top: var(--space-6);
  font-size: var(--text-md);
}

.finnita-faq-cta__secondary a {
  color: var(--color-primary-500);
  font-weight: 500;
}

.finnita-faq-cta__secondary a:hover {
  color: var(--color-accent-400);
}

@media (min-width: 768px) {
  .finnita-faq-cta h2 {
    font-size: var(--text-4xl);
  }
}

/* --- Healthcare sector spoke (Blocks 2, 3, 4, 5, 7) ------------------- */
/* Mirrors the Phase 3 Education spoke page-scoped class patterns.       */
/* Intentional duplication over cross-page selector grouping so Phase 3  */
/* pages stay untouched; a future consolidation pass can extract shared  */
/* sector-spoke primitives when that refactor covers all sector pages.   */

/* Block 2: Healthcare Problem — centered copy + 3-stat row. */

.finnita-healthcare-problem__body {
  text-align: center;
}

.finnita-healthcare-problem__body h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-6);
}

.finnita-healthcare-problem__body p {
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.finnita-healthcare-problem__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.finnita-healthcare-problem__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}

.finnita-healthcare-problem__stat-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-4xl);
  color: var(--color-accent-400);
  line-height: 1;
}

.finnita-healthcare-problem__stat-label {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  line-height: var(--leading-snug);
  max-width: 22ch;
  text-align: center;
}

/* Block 3: PSLF Retroactive Credit — centered callout on alt bg. */

.finnita-healthcare-pslf {
  text-align: center;
}

.finnita-healthcare-pslf h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-6);
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
}

.finnita-healthcare-pslf p {
  font-size: var(--text-lg);
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  max-width: 65ch;
  margin: 0 auto var(--space-5);
}

/* Block 4: Not Just Clinical Staff — dark Indigo 800 tile on alt bg. */
/* v2 layout after Erik flagged the original plain-paragraph section  */
/* as indistinguishable from the PSLF block above. Tile pops against  */
/* the alt Indigo 50 section bg and reinforces "every employee" with  */
/* a users icon in Coral 400.                                          */

.finnita-healthcare-not-clinical__tile {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  background-color: var(--color-primary-800);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.finnita-healthcare-not-clinical__icon {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-5);
  color: var(--color-accent-400);
}

.finnita-healthcare-not-clinical__icon svg {
  width: 48px;
  height: 48px;
}

.finnita-healthcare-not-clinical__headline {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: #FFFFFF;
  margin-bottom: var(--space-5);
  max-width: 30ch;
  margin-left: auto;
  margin-right: auto;
}

.finnita-healthcare-not-clinical__body {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.85);
  line-height: var(--leading-relaxed);
  max-width: 58ch;
  margin: 0 auto;
}

/* Block 5: Hospitals comparison — 2-col cards (hospital vs. Finnita). */

.finnita-healthcare-hospitals__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.finnita-healthcare-hospitals__col h3 {
  font-size: var(--text-xl);
  color: var(--color-primary-800);
  margin-bottom: var(--space-4);
}

.finnita-healthcare-hospitals__col ol {
  padding-left: var(--space-6);
  margin: 0;
}

.finnita-healthcare-hospitals__col ol li {
  margin-bottom: var(--space-4);
  padding-left: var(--space-2);
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
}

.finnita-healthcare-hospitals__col ol li:last-child {
  margin-bottom: 0;
}

.finnita-healthcare-hospitals__col ol li strong {
  color: var(--color-neutral-900);
}

/* Block 7: Jon case study — featured card with Coral 400 accent.      */
/* Photo-left / content-right on tablet+, stacked on mobile.           */

.finnita-healthcare-jon {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding: var(--space-6);
  background-color: #FFFFFF;
  border-left: 4px solid var(--color-accent-400);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.finnita-healthcare-jon__media {
  margin: 0;
}

.finnita-healthcare-jon__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.finnita-healthcare-jon__headline {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

.finnita-healthcare-jon__body p {
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.finnita-healthcare-jon .finnita-comparison-table {
  margin-top: 0;
}

@media (min-width: 768px) {
  .finnita-healthcare-problem__body h2 {
    font-size: var(--text-4xl);
  }
  .finnita-healthcare-problem__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-10);
  }
  .finnita-healthcare-problem__stat-value {
    font-size: var(--text-5xl);
  }
  .finnita-healthcare-pslf h2 {
    font-size: var(--text-4xl);
  }
  .finnita-healthcare-not-clinical__tile {
    padding: var(--space-10) var(--space-10);
  }
  .finnita-healthcare-not-clinical__headline {
    font-size: var(--text-3xl);
  }
  .finnita-healthcare-hospitals__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  .finnita-healthcare-jon {
    grid-template-columns: 2fr 3fr;
    gap: var(--space-8);
    padding: var(--space-8);
    align-items: start;
  }
  .finnita-healthcare-jon__headline {
    font-size: var(--text-3xl);
  }
}

/* --- Government sector spoke (Blocks 2, 3, 4, 6) ---------------------- */
/* Mirrors the Phase 3 Education + Phase 4 Healthcare page-scoped class  */
/* patterns. Kendra's case-study image uses object-position: center top  */
/* because her source photo is 918x1024 portrait — without it, the      */
/* 3:2 crop would cut off her head.                                      */

/* Block 2: Government Problem — centered copy + 3-stat row. */

.finnita-government-problem__body {
  text-align: center;
}

.finnita-government-problem__body h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-6);
}

.finnita-government-problem__body p {
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.finnita-government-problem__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.finnita-government-problem__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}

.finnita-government-problem__stat-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-4xl);
  color: var(--color-accent-400);
  line-height: 1;
}

.finnita-government-problem__stat-label {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  line-height: var(--leading-snug);
  max-width: 24ch;
  text-align: center;
}

/* Block 3: PSLF Retroactive Credit — centered callout on alt bg. */

.finnita-government-pslf {
  text-align: center;
}

.finnita-government-pslf h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-6);
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
}

.finnita-government-pslf p {
  font-size: var(--text-lg);
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  max-width: 65ch;
  margin: 0 auto var(--space-5);
}

/* Block 4: Agency comparison — 2-col cards (your agency vs. Finnita). */

.finnita-government-agency__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.finnita-government-agency__col h3 {
  font-size: var(--text-xl);
  color: var(--color-primary-800);
  margin-bottom: var(--space-4);
}

.finnita-government-agency__col ol {
  padding-left: var(--space-6);
  margin: 0;
}

.finnita-government-agency__col ol li {
  margin-bottom: var(--space-4);
  padding-left: var(--space-2);
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
}

.finnita-government-agency__col ol li:last-child {
  margin-bottom: 0;
}

.finnita-government-agency__col ol li strong {
  color: var(--color-neutral-900);
}

/* Block 6: Kendra case study — featured card with Coral 400 accent.   */
/* Photo-left / content-right on tablet+, stacked on mobile. Kendra's   */
/* source photo is 918x1024 portrait, so object-position: center top    */
/* keeps her head in frame when the 3:2 aspect-ratio crop is applied.   */

.finnita-government-kendra {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding: var(--space-6);
  background-color: #FFFFFF;
  border-left: 4px solid var(--color-accent-400);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.finnita-government-kendra__media {
  margin: 0;
}

.finnita-government-kendra__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-md);
}

.finnita-government-kendra__headline {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

.finnita-government-kendra__body p {
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.finnita-government-kendra .finnita-comparison-table {
  margin-top: 0;
}

@media (min-width: 768px) {
  .finnita-government-problem__body h2 {
    font-size: var(--text-4xl);
  }
  .finnita-government-problem__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-10);
  }
  .finnita-government-problem__stat-value {
    font-size: var(--text-5xl);
  }
  .finnita-government-pslf h2 {
    font-size: var(--text-4xl);
  }
  .finnita-government-agency__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  .finnita-government-kendra {
    grid-template-columns: 2fr 3fr;
    gap: var(--space-8);
    padding: var(--space-8);
    align-items: start;
  }
  .finnita-government-kendra__headline {
    font-size: var(--text-3xl);
  }
}

/* --- Contact page (Blocks 1-4) ---------------------------------------- */
/* HubSpot v2 embeds handle form rendering. The wrapper/card/heading CSS  */
/* below styles the surrounding layout. HubSpot overrides after the       */
/* responsive block brand-align the form inputs and submit button.        */

/* Block 2: Primary inquiry form — centered card wrapper */

.finnita-contact-primary__wrapper {
  max-width: 640px;
  margin: 0 auto;
}

.finnita-contact-primary__heading {
  text-align: center;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
}

.finnita-contact-primary__subheading {
  text-align: center;
  color: var(--color-neutral-700);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  max-width: 52ch;
  margin: 0 auto var(--space-8);
}

.finnita-contact-primary__card {
  padding: var(--space-6);
}

/* Block 3: General inquiry form — lighter treatment, no card wrapper */

.finnita-contact-general__wrapper {
  max-width: 560px;
  margin: 0 auto;
}

.finnita-contact-general__heading {
  text-align: center;
  font-size: var(--text-xl);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-2);
}

.finnita-contact-general__subheading {
  text-align: center;
  color: var(--color-neutral-600);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

/* Block 4: Direct contact — minimal single-line mailto */

.finnita-contact-direct {
  text-align: center;
}

.finnita-contact-direct p {
  font-size: var(--text-lg);
  color: var(--color-neutral-700);
  margin: 0;
}

.finnita-contact-direct a {
  color: var(--color-primary-500);
  font-weight: 500;
}

.finnita-contact-direct a:hover {
  color: var(--color-accent-400);
}

@media (min-width: 768px) {
  .finnita-contact-primary__heading {
    font-size: var(--text-3xl);
  }
  .finnita-contact-primary__card {
    padding: var(--space-8);
  }
  .finnita-contact-general__heading {
    font-size: var(--text-2xl);
  }
}

/* HubSpot form overrides — brand-align inputs + submit button.          */
/* These target HubSpot's inline DOM classes. If HubSpot renders via      */
/* shadow DOM, these rules are inert and HubSpot's defaults apply.       */

.finnita-contact-primary__card .hs-form .hs-input,
.finnita-contact-general__wrapper .hs-form .hs-input {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-neutral-900);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.finnita-contact-primary__card .hs-form .hs-input:focus,
.finnita-contact-general__wrapper .hs-form .hs-input:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 1px;
  border-color: var(--color-primary-500);
}

.finnita-contact-primary__card .hs-form .hs-button,
.finnita-contact-general__wrapper .hs-form .hs-button {
  background-color: var(--color-primary-600);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-md);
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.finnita-contact-primary__card .hs-form .hs-button:hover,
.finnita-contact-general__wrapper .hs-form .hs-button:hover {
  background-color: var(--color-primary-700);
}

/* --- Phase 4 utility extensions -------------------------------------- */
/* Two small additions driven by Phase 4's trust pages (Brokers +       */
/* Partners). Both meet the 2+ use rule for promotion to a utility.     */

/* .finnita-text-hero__cta — CTA slot for the Phase 3 text-hero.        */
/* Phase 3 .finnita-text-hero was explicitly CTA-less because HIW /     */
/* About / FAQ / Results had no hero CTAs. Phase 4 trust pages          */
/* (Brokers + Partners) need a text-forward hero with an inline primary */
/* CTA, so add an optional __cta element slot. Backwards-compatible —   */
/* Phase 3 callers + Phase 4 Contact + Careers omit the slot and render */
/* unchanged.                                                            */

.finnita-text-hero__cta {
  margin-top: var(--space-8);
  display: flex;
  justify-content: center;
}

/* .finnita-centered-cta + --dark — single centered CTA block.          */
/* Used by Brokers Block 5 + Partners Block 6 (2+ use rule). The base  */
/* variant composes on any section bg; the --dark modifier layers      */
/* Indigo 800 white-on-dark text styling for use with .finnita-section */
/* --dark.                                                              */

.finnita-centered-cta {
  text-align: center;
}

.finnita-centered-cta__headline {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-5);
  max-width: 26ch;
  margin-left: auto;
  margin-right: auto;
}

.finnita-centered-cta__body {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  max-width: 56ch;
  margin: 0 auto var(--space-8);
}

.finnita-centered-cta__secondary {
  display: inline-block;
  margin-top: var(--space-5);
  font-size: var(--text-md);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.finnita-centered-cta--dark .finnita-centered-cta__headline {
  color: #FFFFFF;
}

.finnita-centered-cta--dark .finnita-centered-cta__body {
  color: rgba(255, 255, 255, 0.85);
}

.finnita-centered-cta--dark .finnita-centered-cta__secondary {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.finnita-centered-cta--dark .finnita-centered-cta__secondary:hover {
  color: var(--color-accent-200);
}

@media (min-width: 768px) {
  .finnita-centered-cta__headline {
    font-size: var(--text-4xl);
  }
}

/* --- Brokers page + shared numbered-steps utility -------------------- */
/* The 3-card triple-win grid is page-scoped to Brokers (Block 2). The  */
/* .finnita-numbered-steps__* rules below were originally page-scoped   */
/* to Brokers Block 3 but got promoted to a shared utility when         */
/* Partners Block 4 appeared with the same pattern (per the Phase 4    */
/* plan's "merge if duplicated" rule). Partners Block 4 now reuses      */
/* these classes without duplication.                                    */

/* Block 2: Triple Win — 3 cards grid. Icon + heading + body per card.  */

.finnita-brokers-triple__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.finnita-brokers-triple__icon {
  color: var(--color-primary-500);
  margin-bottom: var(--space-2);
}

.finnita-brokers-triple__icon svg {
  width: 32px;
  height: 32px;
}

.finnita-brokers-triple__card h3 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-primary-800);
}

.finnita-brokers-triple__card p {
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  font-size: var(--text-md);
}

/* Shared numbered steps list — single column, large Coral number +   */
/* bold step title + body text. Used on Brokers Block 3 (4 steps) and  */
/* Partners Block 4 (5 steps). Clean vertical sequence for "zero       */
/* operational burden" or "simple partnership flow" patterns.         */

.finnita-numbered-steps__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.finnita-numbered-steps__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
}

.finnita-numbered-steps__number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-4xl);
  color: var(--color-accent-400);
  line-height: 1;
  min-width: 2ch;
  text-align: center;
}

.finnita-numbered-steps__title {
  font-size: var(--text-lg);
  color: var(--color-primary-800);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

.finnita-numbered-steps__body p {
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Block 4: Proof Points — combined metrics + body in a single section. */
/* Inlines the .finnita-trust-bar__metrics grid (trust-bar.php was      */
/* switched out after Erik flagged that the template-part's section    */
/* padding created a visible break between its metrics and the         */
/* explainer body below). The body paragraph sits directly below the   */
/* metrics with a simple margin-top for the separation.                */

.finnita-brokers-proof__body {
  font-size: var(--text-md);
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  max-width: 62ch;
  margin: var(--space-8) auto 0;
  text-align: center;
}

@media (min-width: 768px) {
  .finnita-numbered-steps__number {
    font-size: var(--text-5xl);
    min-width: 3ch;
  }
  .finnita-numbered-steps__title {
    font-size: var(--text-xl);
  }
}

/* --- Partners page (Blocks 2, 3, 5) ---------------------------------- */
/* Blocks 1 (hero), 4 (steps), 6 (CTA) all reuse shared utilities.      */
/* .finnita-partners-value__* is intentionally page-scoped (not merged  */
/* with Brokers Triple Win) to keep Brokers CSS untouched post-approval.*/

/* Block 2: Partner Value Proposition — 3 cards grid, same shape as    */
/* Brokers Triple Win. Icon + heading + body per card.                 */

.finnita-partners-value__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.finnita-partners-value__icon {
  color: var(--color-primary-500);
  margin-bottom: var(--space-2);
}

.finnita-partners-value__icon svg {
  width: 32px;
  height: 32px;
}

.finnita-partners-value__card h3 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-primary-800);
}

.finnita-partners-value__card p {
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  font-size: var(--text-md);
}

/* Block 3: Addressable Market — centered stat + prose.                */
/* The "20-30%" highlight paragraph renders as slightly larger type    */
/* than body copy with the stat itself in Coral 400 bold. Opening      */
/* sentence reads naturally; the 20-30% is visually emphasized inline  */
/* rather than pulled out as a standalone stat callout.                */

.finnita-partners-market {
  text-align: center;
}

.finnita-partners-market__highlight {
  font-size: var(--text-xl);
  color: var(--color-primary-800);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-6);
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
}

.finnita-partners-market__highlight strong {
  color: var(--color-accent-400);
  font-weight: 700;
}

.finnita-partners-market p:not(.finnita-partners-market__highlight) {
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  font-size: var(--text-lg);
  max-width: 62ch;
  margin: 0 auto var(--space-5);
}

.finnita-partners-market p:last-child {
  margin-bottom: 0;
}

/* Block 5: Trust Signals — brief centered prose on alt bg. */

.finnita-partners-trust {
  text-align: center;
}

.finnita-partners-trust h2 {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--color-primary-800);
  margin-bottom: var(--space-5);
  max-width: 30ch;
  margin-left: auto;
  margin-right: auto;
}

.finnita-partners-trust p {
  font-size: var(--text-md);
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  max-width: 68ch;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .finnita-partners-market__highlight {
    font-size: var(--text-2xl);
  }
  .finnita-partners-trust h2 {
    font-size: var(--text-3xl);
  }
}

/* --- Careers page (Blocks 2, 3, 4) ------------------------------------ */
/* Shortest page in the project — 3 tiny centered sections plus hero.    */
/* No individual bios/headshots per SP-8.                                */

.finnita-careers-about,
.finnita-careers-openings {
  text-align: center;
}

.finnita-careers-about h2,
.finnita-careers-openings h2 {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--color-primary-800);
  margin-bottom: var(--space-6);
}

.finnita-careers-about p,
.finnita-careers-openings p {
  font-size: var(--text-lg);
  color: var(--color-neutral-700);
  line-height: var(--leading-relaxed);
  max-width: 65ch;
  margin: 0 auto var(--space-5);
}

.finnita-careers-about p:last-child,
.finnita-careers-openings p:last-child {
  margin-bottom: 0;
}

.finnita-careers-openings a[href^="mailto:"] {
  color: var(--color-primary-500);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.finnita-careers-openings a[href^="mailto:"]:hover {
  color: var(--color-accent-400);
}

/* Block 4: minimal centered text link to /about. */

.finnita-careers-cta {
  text-align: center;
}

.finnita-careers-cta a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-primary-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.finnita-careers-cta a:hover {
  color: var(--color-accent-400);
}

.finnita-careers-cta a svg {
  transition: transform var(--transition-fast);
}

.finnita-careers-cta a:hover svg {
  transform: translateX(2px);
}

@media (min-width: 768px) {
  .finnita-careers-about h2,
  .finnita-careers-openings h2 {
    font-size: var(--text-3xl);
  }
}