/**
 * EFTC Resource Hub — Frontend Design System
 *
 * Complete CSS design system for the EFTC advocacy platform.
 * All page template agents use these classes.  Nothing is hardcoded —
 * every color, spacing value, and font references a CSS custom property.
 *
 * Naming: all classes prefixed `eftc-` to avoid collisions with Divi.
 * Approach: mobile-first with `min-width` media queries.
 *
 * @version 1.0.0
 * @package EFTC_Resource_Hub_Child
 */

/* ==========================================================================
   0. CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
    /* Brand Colors */
    --eftc-navy: #1D3769;
    --eftc-navy-light: rgba(29, 55, 105, 0.08);
    --eftc-navy-medium: rgba(29, 55, 105, 0.25);
    --eftc-navy-dark: #152B50;
    --eftc-navy-hover: #244680;
    --eftc-gold: #D8A83B;
    --eftc-gold-light: rgba(216, 168, 59, 0.15);
    --eftc-gold-hover: #E0B84D;
    --eftc-charcoal: #262323;
    --eftc-white: #FFFFFF;

    /* Neutral Grays */
    --eftc-gray-50: #F9FAFB;
    --eftc-gray-100: #F8F9FA;
    --eftc-gray-200: #E9ECEF;
    --eftc-gray-300: #DEE2E6;
    --eftc-gray-400: #9CA3AF;
    --eftc-gray-600: #6C757D;
    --eftc-gray-800: #343A40;

    /* Status Colors */
    --eftc-status-green: #22C55E;
    --eftc-status-amber: #F59E0B;
    --eftc-status-gray: #6B7280;
    --eftc-status-red: #C05050;
    --eftc-status-teal: #2E8B8B;

    /* Semantic */
    --eftc-success: #28A745;
    --eftc-warning: #FFC107;
    --eftc-error: #DC3545;

    /* Typography */
    --eftc-font-heading: 'Gilroy', sans-serif;
    --eftc-font-body: 'Glacial Indifference', 'Poppins', sans-serif;

    /* Spacing Scale (rem-based, mobile-first) */
    --eftc-space-xs: 0.25rem;   /*  4px */
    --eftc-space-sm: 0.5rem;    /*  8px */
    --eftc-space-md: 1rem;      /* 16px */
    --eftc-space-lg: 1.5rem;    /* 24px */
    --eftc-space-xl: 2rem;      /* 32px */
    --eftc-space-2xl: 3rem;     /* 48px */
    --eftc-space-3xl: 4rem;     /* 64px */
    --eftc-space-4xl: 6rem;     /* 96px */

    /* Shadows */
    --eftc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --eftc-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --eftc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --eftc-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
    --eftc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* Border Radius */
    --eftc-radius-sm: 4px;
    --eftc-radius-md: 8px;
    --eftc-radius-lg: 12px;
    --eftc-radius-xl: 16px;

    /* Focus */
    --eftc-focus-ring: 0 0 0 3px rgba(29, 55, 105, 0.4);

    /* Transitions */
    --eftc-transition: 0.25s ease;
    --eftc-transition-fast: 150ms ease;
    --eftc-transition-normal: 250ms ease;
    --eftc-transition-slow: 0.4s ease;

    /* v2 visual-refresh tokens (additive; unused by live selectors until cutover/Workstream B) */
    --eftc-scrim: linear-gradient(to top, rgba(21,43,80,0.96) 2%, rgba(29,55,105,0.35) 40%, rgba(29,55,105,0) 68%);
    --eftc-hero-wash: linear-gradient(100deg, rgba(21,43,80,0.94) 26%, rgba(29,55,105,0.55) 62%, rgba(29,55,105,0.12) 100%);
    --eftc-st-optedin: #234C8A;   /* G3 decided: distinct blue, not brand navy #1D3769 */
    --eftc-st-announced: #D8A83B;
    --eftc-st-nodecision: #E3E8F0;
    --eftc-st-vetoed: #B5524C;
    --eftc-st-declined: #7E8794;

    /* Surface + elevated-card primitive (variant 2). */
    --eftc-surface: #EDF1F7;
    --eftc-shadow-float: 0 2px 6px rgba(29,55,105,0.08), 0 12px 28px rgba(29,55,105,0.14);
    --eftc-shadow-float-hover: 0 4px 10px rgba(29,55,105,0.10), 0 18px 36px rgba(29,55,105,0.18);
}

/* ==========================================================================
   1. @FONT-FACE DECLARATIONS
   ========================================================================== */

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Glacial Indifference';
    src: url('../fonts/GlacialIndifference-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Glacial Indifference';
    src: url('../fonts/GlacialIndifference-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   2. BASE STYLES / RESETS
   ========================================================================== */

/**
 * Reset box-sizing globally so padding doesn't break width calculations.
 * Applied inside .eftc-page to avoid interfering with Divi's box model.
 */
.eftc-page *,
.eftc-page *::before,
.eftc-page *::after {
    box-sizing: border-box;
}

/**
 * .eftc-page — wrapper for every EFTC page template.
 * Resets Divi's default padding/margins and establishes base typography.
 */
.eftc-page {
    font-family: var(--eftc-font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--eftc-charcoal);
    background-color: var(--eftc-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Override Divi's default section/row padding inside EFTC pages. */
.eftc-page .et_pb_section,
.eftc-page .et_pb_row {
    padding: 0;
    margin: 0;
}

/* Headings */
.eftc-page h1,
.eftc-page h2,
.eftc-page h3,
.eftc-page h4,
.eftc-page h5,
.eftc-page h6 {
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    color: var(--eftc-navy);
    line-height: 1.2;
    margin: 0 0 var(--eftc-space-md) 0;
}

.eftc-page h1 { font-size: 2rem; }
.eftc-page h2 { font-size: 1.75rem; }
.eftc-page h3 { font-size: 1.5rem; }
.eftc-page h4 { font-size: 1.25rem; }
.eftc-page h5 { font-size: 1.125rem; }
.eftc-page h6 { font-size: 1rem; }

@media (min-width: 1280px) {
    .eftc-page h1 { font-size: 2.75rem; }
    .eftc-page h2 { font-size: 2.25rem; }
    .eftc-page h3 { font-size: 1.75rem; }
    .eftc-page h4 { font-size: 1.5rem; }
}

/* Paragraphs */
.eftc-page p {
    margin: 0 0 var(--eftc-space-md) 0;
}

/* Links -- exclude buttons so .eftc-btn color declarations win */
.eftc-page a:not(.eftc-btn) {
    color: var(--eftc-gold);
    text-decoration: none;
    transition: color var(--eftc-transition);
}

.eftc-page a:not(.eftc-btn):hover,
.eftc-page a:not(.eftc-btn):focus {
    color: var(--eftc-gold-hover);
    text-decoration: underline;
}

/* Images */
.eftc-page img {
    max-width: 100%;
    height: auto;
}

/**
 * Global :focus-visible styles for ALL interactive elements.
 * Provides a consistent, accessible focus ring using the navy brand color.
 * Uses :focus-visible (not :focus) so mouse users don't see the ring.
 */
.eftc-page button:focus-visible,
.eftc-page a:focus-visible,
.eftc-page input:focus-visible,
.eftc-page select:focus-visible,
.eftc-page textarea:focus-visible,
.eftc-page summary:focus-visible,
.eftc-page [role="button"]:focus-visible,
.eftc-page [tabindex]:focus-visible {
    outline: 3px solid var(--eftc-navy);
    outline-offset: 2px;
    box-shadow: var(--eftc-focus-ring);
}

/**
 * Global :active state for links — subtle depress feedback.
 */
.eftc-page a:active {
    opacity: 0.85;
}

/* ==========================================================================
   3. LAYOUT COMPONENTS
   ========================================================================== */

/**
 * .eftc-container — centred content wrapper.
 * Mobile: 16px side padding.  Desktop: auto margins at max-width.
 */
.eftc-container {
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--eftc-space-md);
    padding-right: var(--eftc-space-md);
}

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

/** Narrow variant for text-heavy pages (forms, legal, articles). */
.eftc-container--narrow {
    max-width: 800px;
}

/**
 * CSS Grid system.
 * Single column on mobile, responsive columns at breakpoints.
 */
.eftc-grid {
    display: grid;
    gap: var(--eftc-space-lg);
}

.eftc-grid--2col {
    grid-template-columns: 1fr;
}

.eftc-grid--3col {
    grid-template-columns: 1fr;
}

.eftc-grid--4col {
    grid-template-columns: 1fr;
}

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

    .eftc-grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }

    .eftc-grid--4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .eftc-grid--3col {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .eftc-grid--4col {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================================================
   4. SECTION COMPONENTS
   ========================================================================== */

/**
 * .eftc-section — vertical rhythm wrapper for page sections.
 * Generous padding on mobile, more on desktop.
 */
.eftc-section {
    padding-top: var(--eftc-space-3xl);
    padding-bottom: var(--eftc-space-3xl);
}

@media (min-width: 1280px) {
    .eftc-section {
        padding-top: var(--eftc-space-4xl);
        padding-bottom: var(--eftc-space-4xl);
    }
}

/** Section color variants. */
.eftc-section--navy {
    background-color: var(--eftc-navy);
    color: var(--eftc-white);
}

.eftc-section--navy h1,
.eftc-section--navy h2,
.eftc-section--navy h3,
.eftc-section--navy h4,
.eftc-section--navy h5,
.eftc-section--navy h6 {
    color: var(--eftc-white);
}

.eftc-section--navy a {
    color: var(--eftc-gold);
}

.eftc-section--navy a:hover,
.eftc-section--navy a:focus {
    color: var(--eftc-gold-hover);
}

/**
 * Prevent gold-on-gold: buttons inside navy sections must keep their
 * declared text color, not inherit the gold link color above.
 */
.eftc-section--navy .eftc-btn--primary {
    color: var(--eftc-charcoal);
}

.eftc-section--navy .eftc-btn--primary:hover {
    color: var(--eftc-charcoal);
}

.eftc-section--navy .eftc-btn--secondary {
    color: var(--eftc-white);
    border-color: var(--eftc-white);
}

.eftc-section--navy .eftc-btn--secondary:hover {
    background-color: var(--eftc-white);
    color: var(--eftc-navy);
    border-color: var(--eftc-white);
}

.eftc-section--gray {
    background-color: var(--eftc-gray-50);
}

.eftc-section--white {
    background-color: var(--eftc-white);
}

/**
 * Diagonal dividers — the EFTC brand signature.
 *
 * Applied via clip-path.  The 8-degree angle is approximated with a
 * polygon offset of ~5vw at the edge.  Use on the section itself, not
 * on a pseudo-element, so background colour fills the clipped shape.
 */
.eftc-diagonal-top {
    clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%);
    padding-top: calc(var(--eftc-space-3xl) + 5vw);
}

.eftc-diagonal-bottom {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%);
    padding-bottom: calc(var(--eftc-space-3xl) + 5vw);
}

@media (min-width: 1280px) {
    .eftc-diagonal-top {
        padding-top: calc(var(--eftc-space-4xl) + 5vw);
    }

    .eftc-diagonal-bottom {
        padding-bottom: calc(var(--eftc-space-4xl) + 5vw);
    }
}

/* ==========================================================================
   5. CARD COMPONENTS
   ========================================================================== */

.eftc-card {
    background-color: var(--eftc-white);
    border-radius: var(--eftc-radius-lg);
    box-shadow: var(--eftc-shadow-card);
    padding: var(--eftc-space-lg);
    border-top: 3px solid var(--eftc-gold);
    transition: box-shadow var(--eftc-transition), transform var(--eftc-transition);
}

.eftc-card:hover {
    box-shadow: var(--eftc-shadow-hover);
    transform: translateY(-4px);
}

.eftc-card__title {
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    color: var(--eftc-navy);
    font-size: 1.25rem;
    margin: 0 0 var(--eftc-space-sm) 0;
}

.eftc-card__body {
    font-family: var(--eftc-font-body);
    color: var(--eftc-charcoal);
    font-size: 1rem;
    line-height: 1.6;
}

/** Highlight card: gold left border for emphasis. */
.eftc-card--highlight {
    border-left: 4px solid var(--eftc-gold);
}

/** CTA card: centered, square-proportioned layout for cross-link cards. */
.eftc-card--cta {
    padding: var(--eftc-space-2xl) var(--eftc-space-xl);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    aspect-ratio: 1 / 1;
    justify-content: center;
}

/** SVG icon container for CTA cards. */
.eftc-card__icon {
    width: 48px;
    height: 48px;
    color: var(--eftc-gold);
    margin-bottom: var(--eftc-space-md);
}

/** Navy button: solid navy bg, white text, lift on hover (SGO style). */
.eftc-btn--navy {
    background-color: var(--eftc-navy);
    color: var(--eftc-white);
    border-color: var(--eftc-navy);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: background-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.eftc-btn--navy:hover {
    background-color: var(--eftc-navy-hover);
    color: var(--eftc-white);
    border-color: var(--eftc-navy-hover);
    transform: translateY(-1px);
    box-shadow: var(--eftc-shadow-md);
}

/* ==========================================================================
   6. BUTTON COMPONENTS
   ========================================================================== */

.eftc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    padding: 0.75rem 1.5rem;
    border-radius: var(--eftc-radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background-color var(--eftc-transition),
                color var(--eftc-transition),
                border-color var(--eftc-transition),
                box-shadow var(--eftc-transition);
}

.eftc-btn:hover {
    text-decoration: none;
}

.eftc-btn:focus-visible {
    outline: 3px solid var(--eftc-navy);
    outline-offset: 2px;
    box-shadow: var(--eftc-focus-ring);
}

.eftc-btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

/** Primary — gold background, charcoal text for WCAG contrast. The main CTA. */
.eftc-btn--primary {
    background-color: var(--eftc-gold);
    color: var(--eftc-charcoal);
    border-color: var(--eftc-gold);
}

.eftc-btn--primary:hover {
    background-color: var(--eftc-gold-hover);
    border-color: var(--eftc-gold-hover);
    color: var(--eftc-charcoal);
}

/** Secondary — navy outline, transparent background. */
.eftc-btn--secondary {
    background-color: transparent;
    color: var(--eftc-navy);
    border-color: var(--eftc-navy);
}

.eftc-btn--secondary:hover {
    background-color: var(--eftc-navy);
    color: var(--eftc-white);
    border-color: var(--eftc-navy);
}

/** Size variants. */
.eftc-btn--large {
    font-size: 1.125rem;
    padding: 1rem 2rem;
}

.eftc-btn--block {
    display: flex;
    width: 100%;
}

/* ==========================================================================
   7. STATUS BADGES
   ========================================================================== */

.eftc-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.eftc-badge--opted-in {
    background-color: var(--eftc-st-optedin);
    color: var(--eftc-white);
}

.eftc-badge--announced {
    background-color: var(--eftc-st-announced);
    color: var(--eftc-charcoal);
}

.eftc-badge--no-decision {
    background-color: var(--eftc-st-nodecision);
    color: var(--eftc-charcoal);
}

.eftc-badge--vetoed {
    background-color: var(--eftc-st-vetoed);
    color: var(--eftc-white);
}

.eftc-badge--declined {
    background-color: var(--eftc-st-declined);
    color: var(--eftc-white);
}

/* Non-status amber pill. Decoupled from the state-status vocabulary: reused by
   the "PENDING" Treasury-question badges (eligible-expenses) and the wizard
   letter-type badge. Kept after the status-vocab rename to --announced so these
   non-status consumers retain their original amber fill. */
.eftc-badge--pending {
    background-color: var(--eftc-status-amber);
    color: var(--eftc-charcoal);
}

/* ==========================================================================
   8. FORM COMPONENTS
   ========================================================================== */

.eftc-form-group {
    margin-bottom: var(--eftc-space-lg);
}

.eftc-form-label {
    display: block;
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--eftc-navy);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--eftc-space-xs);
}

.eftc-form-input,
.eftc-form-select,
.eftc-form-textarea {
    display: block;
    width: 100%;
    font-family: var(--eftc-font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--eftc-charcoal);
    background-color: var(--eftc-white);
    border: 1px solid var(--eftc-gray-200);
    border-radius: var(--eftc-radius-md);
    padding: 0.625rem 0.75rem;
    transition: border-color var(--eftc-transition), box-shadow var(--eftc-transition);
}

.eftc-form-input:focus-visible,
.eftc-form-select:focus-visible,
.eftc-form-textarea:focus-visible {
    outline: 3px solid var(--eftc-navy);
    outline-offset: 2px;
    border-color: var(--eftc-gold);
    box-shadow: var(--eftc-focus-ring);
}

.eftc-form-textarea {
    min-height: 120px;
    resize: vertical;
}

.eftc-form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234B5563' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
}

.eftc-form-error {
    display: flex;
    align-items: center;
    gap: var(--eftc-space-xs);
    font-family: var(--eftc-font-body);
    font-size: 0.875rem;
    color: var(--eftc-error);
    margin-top: var(--eftc-space-xs);
}

.eftc-form-error::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23EF4444'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23EF4444' stroke-width='1.5'/%3E%3Cpath d='M8 4v5M8 11v1' stroke='%23EF4444' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain;
}

/* ==========================================================================
   9. HERO COMPONENT
   ========================================================================== */

.eftc-hero {
    background-color: var(--eftc-navy);
    color: var(--eftc-white);
    padding: var(--eftc-space-3xl) 0;
    width: 100%;
}

@media (min-width: 1280px) {
    .eftc-hero {
        padding: var(--eftc-space-4xl) 0;
    }
}

.eftc-hero__title {
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--eftc-white);
    margin: 0 0 var(--eftc-space-md) 0;
}

.eftc-hero .eftc-hero__subtitle {
    font-family: var(--eftc-font-body);
    font-size: 1.25rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 auto var(--eftc-space-xl) auto;
    max-width: 600px;
}

.eftc-hero__cta {
    display: inline-flex;
    gap: var(--eftc-space-md);
    flex-wrap: wrap;
    justify-content: center;
}

.eftc-hero__grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: var(--eftc-space-md);
    justify-content: center;
    margin-top: var(--eftc-space-lg);
}

@media (max-width: 480px) {
    .eftc-hero__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   10. BREADCRUMB
   ========================================================================== */

.eftc-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eftc-space-xs);
    list-style: none;
    padding-top: var(--eftc-space-md);
    padding-bottom: var(--eftc-space-md);
    margin: 0;
    font-family: var(--eftc-font-body);
    font-size: 0.875rem;
    color: var(--eftc-gray-600);
}

.eftc-breadcrumb li {
    display: flex;
    align-items: center;
    gap: var(--eftc-space-xs);
}

/* Separator arrow between breadcrumb items. */
.eftc-breadcrumb li + li::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 10px;
    margin-right: var(--eftc-space-xs);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' stroke='%239CA3AF' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.eftc-breadcrumb a {
    color: var(--eftc-navy);
}

.eftc-breadcrumb a:hover {
    color: var(--eftc-gold);
}

/* ==========================================================================
   11. FAQ ACCORDION
   ========================================================================== */

.eftc-accordion {
    border-top: 1px solid var(--eftc-gray-200);
}

.eftc-accordion__item {
    border-bottom: 1px solid var(--eftc-gray-200);
}

.eftc-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--eftc-space-lg) 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--eftc-navy);
    text-align: left;
    line-height: 1.3;
}

.eftc-accordion__trigger:hover {
    color: var(--eftc-navy-hover);
}

.eftc-accordion__trigger:focus-visible {
    outline: 3px solid var(--eftc-navy);
    outline-offset: 2px;
    box-shadow: var(--eftc-focus-ring);
}

/* Expand/collapse chevron indicator. */
.eftc-accordion__trigger::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    margin-left: var(--eftc-space-md);
    border-right: 2px solid var(--eftc-navy);
    border-bottom: 2px solid var(--eftc-navy);
    transform: rotate(45deg);
    transition: transform var(--eftc-transition);
}

.eftc-accordion__trigger[aria-expanded="true"]::after {
    transform: rotate(-135deg);
}

.eftc-accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--eftc-transition-slow);
}

.eftc-accordion__content[aria-hidden="false"] {
    max-height: 1000px;
}

.eftc-accordion__content-inner {
    padding: 0 0 var(--eftc-space-lg) 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--eftc-gray-600);
}

/* ==========================================================================
   12. WIZARD STEP INDICATOR
   ========================================================================== */

.eftc-wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--eftc-space-sm);
    padding: var(--eftc-space-xl) 0;
    list-style: none;
    margin: 0;
    counter-reset: wizard-step;
}

.eftc-wizard-steps__step {
    display: flex;
    align-items: center;
    gap: var(--eftc-space-sm);
    counter-increment: wizard-step;
}

/* Connector line between steps. */
.eftc-wizard-steps__step + .eftc-wizard-steps__step::before {
    content: '';
    display: block;
    width: 2rem;
    height: 2px;
    background-color: var(--eftc-gray-200);
}

@media (min-width: 768px) {
    .eftc-wizard-steps__step + .eftc-wizard-steps__step::before {
        width: 4rem;
    }
}

/* Step circle (number inside). */
.eftc-wizard-steps__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    border: 2px solid var(--eftc-gray-200);
    background-color: var(--eftc-white);
    color: var(--eftc-gray-400);
    transition: background-color var(--eftc-transition),
                border-color var(--eftc-transition),
                color var(--eftc-transition);
}

/* Active step — gold filled. */
.eftc-wizard-steps__step--active .eftc-wizard-steps__circle {
    background-color: var(--eftc-gold);
    border-color: var(--eftc-gold);
    color: var(--eftc-navy);
}

/* Completed step — green with checkmark. */
.eftc-wizard-steps__step--complete .eftc-wizard-steps__circle {
    background-color: var(--eftc-status-green);
    border-color: var(--eftc-status-green);
    color: var(--eftc-white);
}

/* Connector line turns green when previous step is complete. */
.eftc-wizard-steps__step--complete + .eftc-wizard-steps__step::before {
    background-color: var(--eftc-status-green);
}

/* Step label text. */
.eftc-wizard-steps__label {
    display: none;
    font-family: var(--eftc-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--eftc-gray-600);
}

.eftc-wizard-steps__step--active .eftc-wizard-steps__label {
    color: var(--eftc-navy);
    font-weight: 700;
}

@media (min-width: 768px) {
    .eftc-wizard-steps__label {
        display: block;
    }
}

/* Mobile-only current-step line. Below 768px the inline labels are hidden
   (a long label like "Preview & Customize" cannot fit inside the circle row),
   so the active step's name is shown here on its own full-width line instead.
   JS (goToStep) keeps the number + label in sync as the user advances. */
.eftc-wizard-steps__current {
    text-align: center;
    margin: 0;
}

.eftc-wizard-steps__current-num {
    display: block;
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--eftc-gold);
}

.eftc-wizard-steps__current-label {
    display: block;
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--eftc-navy);
}

@media (max-width: 767px) {
    /* Tuck the dots up close under the current-step line. */
    .eftc-wizard-steps {
        padding-top: var(--eftc-space-md);
    }
}

@media (min-width: 768px) {
    .eftc-wizard-steps__current {
        display: none;
    }
}

/* Pending step — default (gray outline). No extra class needed. */

/* --- Official Photo Thumbnails (Wizard Step 2 Cards) --- */

.eftc-official-photo {
    width: 48px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 20%;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.eftc-official-photo--initials {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--eftc-navy);
    color: var(--eftc-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   13. UTILITY CLASSES
   ========================================================================== */

/* --- Text Alignment --- */
.eftc-text-center { text-align: center; }
.eftc-text-left   { text-align: left; }
.eftc-text-right  { text-align: right; }

/* --- Margin Top --- */
.eftc-mt-xs  { margin-top: var(--eftc-space-xs); }
.eftc-mt-sm  { margin-top: var(--eftc-space-sm); }
.eftc-mt-md  { margin-top: var(--eftc-space-md); }
.eftc-mt-lg  { margin-top: var(--eftc-space-lg); }
.eftc-mt-xl  { margin-top: var(--eftc-space-xl); }
.eftc-mt-2xl { margin-top: var(--eftc-space-2xl); }
.eftc-mt-3xl { margin-top: var(--eftc-space-3xl); }
.eftc-mt-4xl { margin-top: var(--eftc-space-4xl); }

/* --- Margin Bottom --- */
.eftc-mb-xs  { margin-bottom: var(--eftc-space-xs); }
.eftc-mb-sm  { margin-bottom: var(--eftc-space-sm); }
.eftc-mb-md  { margin-bottom: var(--eftc-space-md); }
.eftc-mb-lg  { margin-bottom: var(--eftc-space-lg); }
.eftc-mb-xl  { margin-bottom: var(--eftc-space-xl); }
.eftc-mb-2xl { margin-bottom: var(--eftc-space-2xl); }
.eftc-mb-3xl { margin-bottom: var(--eftc-space-3xl); }
.eftc-mb-4xl { margin-bottom: var(--eftc-space-4xl); }

/* --- Visibility --- */
.eftc-hidden  { display: none !important; }
.eftc-visible { display: block !important; }

/* Screen-reader only — visually hidden but accessible to assistive tech. */
.eftc-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;
}

/* ==========================================================================
   14. ANIMATIONS
   ========================================================================== */

@keyframes eftcFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes eftcSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.eftc-fade-in {
    animation: eftcFadeIn 0.6s ease forwards;
}

.eftc-slide-up {
    animation: eftcSlideUp 0.6s ease forwards;
}

/* ==========================================================================
   15. LEAD CAPTURE LAYOUT (form + guide cover side-by-side)
   ========================================================================== */

/**
 * Side-by-side layout: form (left) + guide cover preview (right).
 * On mobile: stacks vertically with cover above form (reverse order
 * because the cover acts as a visual hook before the form).
 */
.eftc-lead-capture-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--eftc-space-xl);
    align-items: start;
}

@media (min-width: 768px) {
    .eftc-lead-capture-layout {
        grid-template-columns: 1fr 340px;
        gap: var(--eftc-space-2xl);
    }
}

@media (min-width: 1280px) {
    .eftc-lead-capture-layout {
        grid-template-columns: 1fr 400px;
    }
}

/** On mobile, show the preview first (above the form) */
.eftc-lead-capture-layout__preview {
    order: -1;
}

@media (min-width: 768px) {
    .eftc-lead-capture-layout__preview {
        order: 0;
        position: sticky;
        top: var(--eftc-space-xl);
    }
}

/** Guide cover card */
.eftc-guide-preview {
    background: var(--eftc-white);
    border-radius: var(--eftc-radius-lg);
    box-shadow: var(--eftc-shadow-card);
    padding: var(--eftc-space-lg);
    text-align: center;
}

.eftc-guide-preview__cover {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: var(--eftc-radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    margin-bottom: var(--eftc-space-md);
}

.eftc-guide-preview__caption {
    font-family: var(--eftc-font-body);
    font-size: 0.875rem;
    color: var(--eftc-gray-600);
    margin-bottom: var(--eftc-space-md);
    line-height: 1.5;
}

.eftc-guide-preview__highlights {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.eftc-guide-preview__highlights li {
    font-family: var(--eftc-font-body);
    font-size: 0.875rem;
    color: var(--eftc-charcoal);
    padding: var(--eftc-space-xs) 0;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.5;
}

.eftc-guide-preview__highlights li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--eftc-success);
    font-weight: 700;
}

/* ==========================================================================
   16. RESPONSIVE HELPERS
   ========================================================================== */

/* Hidden below 768px (tablet breakpoint). */
.eftc-hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .eftc-hide-mobile {
        display: block;
    }
}

/* Hidden at 768px and above. */
@media (min-width: 768px) {
    .eftc-hide-desktop {
        display: none;
    }
}

/**
 * Mobile centering — on viewports < 768px, hero CTA wrappers and
 * form button groups center their children so buttons don't
 * left-align awkwardly on small screens.
 */
@media (max-width: 767px) {
    .eftc-hero__cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--eftc-space-sm);
    }

    .eftc-hero__cta .eftc-btn {
        width: 100%;
        max-width: 320px;
    }

    .eftc-form-group .eftc-btn {
        width: 100%;
    }
}

/* ==========================================================================
   17. MAP
   ========================================================================== */

/* --- 17a. Map container & SVG ------------------------------------------- */

#eftc-map-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto var(--eftc-space-lg) auto;
}

#eftc-map-container svg {
    width: 100%;
    height: auto;
}

/* --- 17b. State paths --------------------------------------------------- */

#eftc-map-container .eftc-map-state {
    cursor: pointer;
    stroke: var(--eftc-white);
    stroke-width: 1;
    transition: fill 0.2s ease, stroke-width 0.2s ease;
}

#eftc-map-container .eftc-map-state:hover {
    stroke-width: 2;
}

#eftc-map-container .eftc-map-state:focus-visible {
    outline: 2px solid var(--eftc-gold);
    outline-offset: 1px;
}

/* --- 17c. Map Legend ----------------------------------------------------- */

.eftc-map-legend {
    display: flex;
    justify-content: center;
    gap: var(--eftc-space-xl);
    flex-wrap: wrap;
    margin-bottom: var(--eftc-space-xl);
}

.eftc-map-legend__item {
    display: flex;
    align-items: center;
    gap: var(--eftc-space-sm);
}

.eftc-map-legend__swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: var(--eftc-radius-sm);
    flex-shrink: 0;
}

.eftc-map-legend__label {
    font-family: var(--eftc-font-body);
    font-size: 0.875rem;
    color: var(--eftc-gray-600);
    white-space: nowrap;
}

/* --- 17d. CTA Popup ----------------------------------------------------- */

/**
 * The popup uses a full-viewport fixed overlay (transparent) with a
 * positioned card.  The overlay catches outside clicks to dismiss.
 * Card position is set via inline styles by JS.
 */
.eftc-map-cta-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10001;
}

.eftc-map-cta-popup--visible {
    display: block;
}

.eftc-map-cta-popup__card {
    position: fixed;
    width: 260px;
    background-color: var(--eftc-white);
    border-radius: var(--eftc-radius-lg);
    box-shadow: var(--eftc-shadow-lg);
    padding: var(--eftc-space-lg);
    text-align: center;
    z-index: 10002;
    animation: eftcFadeIn 0.2s ease forwards;
}

.eftc-map-cta-popup__close {
    position: absolute;
    top: var(--eftc-space-sm);
    right: var(--eftc-space-sm);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--eftc-gray-400);
    border-radius: 50%;
    transition: color var(--eftc-transition), background-color var(--eftc-transition);
}

.eftc-map-cta-popup__close:hover {
    color: var(--eftc-charcoal);
    background-color: var(--eftc-gray-100);
}

.eftc-map-cta-popup__close:focus-visible {
    outline: 2px solid var(--eftc-gold);
    outline-offset: 1px;
}

.eftc-map-cta-popup__title {
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--eftc-navy);
    margin: 0 0 var(--eftc-space-sm) 0;
}

/* Status badges within the popup. */
.eftc-map-cta-popup__badge {
    display: inline-block;
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 0.6875rem;
    line-height: 1;
    padding: 0.3125rem 0.625rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--eftc-space-md);
}

.eftc-map-cta-popup__badge--opted-in {
    background-color: var(--eftc-st-optedin);
    color: var(--eftc-white);
}

.eftc-map-cta-popup__badge--announced {
    background-color: var(--eftc-st-announced);
    color: var(--eftc-charcoal);
}

.eftc-map-cta-popup__badge--no-decision {
    background-color: var(--eftc-st-nodecision);
    color: var(--eftc-charcoal);
}

.eftc-map-cta-popup__badge--vetoed {
    background-color: var(--eftc-st-vetoed);
    color: var(--eftc-white);
}

.eftc-map-cta-popup__badge--declined {
    background-color: var(--eftc-st-declined);
    color: var(--eftc-white);
}

/* Primary CTA button inside popup. */
.eftc-map-cta-popup .eftc-map-cta-popup__action {
    display: flex;
    width: 100%;
    margin-bottom: var(--eftc-space-sm);
    font-size: 0.875rem;
    padding: 0.625rem 1rem;
    box-sizing: border-box;
}

/* Secondary detail link. */
.eftc-map-cta-popup__detail {
    display: inline-block;
    font-family: var(--eftc-font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--eftc-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--eftc-transition);
}

.eftc-map-cta-popup__detail:hover {
    color: var(--eftc-gold);
}

.eftc-map-cta-popup__detail:focus-visible {
    outline: 2px solid var(--eftc-gold);
    outline-offset: 2px;
}

/* --- 17e. Responsive adjustments ---------------------------------------- */

@media (max-width: 480px) {
    .eftc-map-cta-popup__card {
        width: calc(100vw - 2rem);
        left: 1rem !important;
        right: 1rem;
    }

    .eftc-map-legend {
        flex-direction: column;
        align-items: center;
        gap: var(--eftc-space-sm);
    }
}

/* ==========================================================================
   18. NAVIGATOR
   ========================================================================== */

/**
 * Iframe wrapper: constrains the navigator to a readable max-width.
 * The iframe itself fills the wrapper with no visible border.
 */
.eftc-navigator-iframe-wrapper {
    max-width: 1000px;
    min-height: 600px;
    margin: 0 auto;
    border-radius: var(--eftc-radius-lg);
    overflow: hidden;
    box-shadow: var(--eftc-shadow-card);
    background-color: var(--eftc-gray-50);
}

.eftc-navigator-iframe-wrapper iframe {
    display: block;
    width: 100%;
    height: 700px;
    border: none;
}

/** Fallback card: shown when iframe cannot load. */
.eftc-navigator-fallback {
    max-width: 960px;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .eftc-navigator-iframe-wrapper {
        min-height: 400px;
    }

    .eftc-navigator-iframe-wrapper iframe {
        height: 500px;
    }
}

/* ==========================================================================
   19. GOVERNOR PHOTO
   ========================================================================== */

.eftc-governor-photo {
    flex-shrink: 0;
}

.eftc-governor-photo__img {
    display: block;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.eftc-governor-photo__badge {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: var(--eftc-navy);
    color: var(--eftc-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* --- State Flag (Hero) --- */

.eftc-state-flag {
    display: block;
    width: auto;
    height: 32px;
    margin: 0 auto var(--eftc-space-sm);
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    object-fit: contain;
}

/* ==========================================================================
   20. READINESS CHECKLIST
   ========================================================================== */

.eftc-readiness-checklist {
    max-width: 720px;
    margin: 0 auto;
}

.eftc-readiness-checklist__step {
    display: flex;
    gap: var(--eftc-space-lg);
    padding: var(--eftc-space-lg) 0;
    border-bottom: 1px solid var(--eftc-gray-200);
    align-items: flex-start;
}

.eftc-readiness-checklist__step:last-child {
    border-bottom: none;
}

.eftc-readiness-checklist__number {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--eftc-gold);
    color: var(--eftc-charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1;
}

.eftc-readiness-checklist__content {
    flex: 1;
    min-width: 0;
}

/* ==========================================================================
   21. DATA CARD (HUD income table)
   ========================================================================== */

.eftc-data-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--eftc-space-md);
}

.eftc-data-table th {
    background-color: var(--eftc-navy);
    color: var(--eftc-white);
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--eftc-space-sm) var(--eftc-space-md);
    text-align: left;
    border-bottom: 2px solid var(--eftc-navy-dark);
}

.eftc-data-table td {
    padding: var(--eftc-space-sm) var(--eftc-space-md);
    border-bottom: 1px solid var(--eftc-gray-200);
    font-size: 0.9375rem;
}

.eftc-data-table__base-row td {
    font-weight: 700;
    background-color: var(--eftc-gold-light);
}

/* ==========================================================================
   22. SECTION NAVIGATION
   ========================================================================== */

/**
 * Sticky section nav bar. z-index: 100 sits below Divi header (higher z)
 * but above all page content. If Divi's header height changes, Paul may
 * need to adjust the `top` value to account for it.
 */
.eftc-section-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--eftc-white);
    border-bottom: 1px solid var(--eftc-gray-200);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/** Full-width bar — logo left, nav items right. */
.eftc-section-nav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
}

/** Logo group — left-aligned, links to fundedu.org. */
.eftc-section-nav__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.eftc-section-nav__logo a {
    display: flex;
    align-items: center;
}

.eftc-section-nav__logo img {
    height: 70px;
    width: auto;
}

/** Hamburger toggle button — mobile only. */
.eftc-section-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.eftc-section-nav__hamburger {
    display: block;
    width: 1.25rem;
    height: 2px;
    background-color: var(--eftc-navy);
    position: relative;
    transition: background-color var(--eftc-transition-fast);
}

.eftc-section-nav__hamburger::before,
.eftc-section-nav__hamburger::after {
    content: '';
    display: block;
    width: 1.25rem;
    height: 2px;
    background-color: var(--eftc-navy);
    position: absolute;
    left: 0;
    transition: transform var(--eftc-transition-fast);
}

.eftc-section-nav__hamburger::before {
    top: -6px;
}

.eftc-section-nav__hamburger::after {
    top: 6px;
}

/** Animate hamburger to X when open. */
.eftc-section-nav__toggle[aria-expanded="true"] .eftc-section-nav__hamburger {
    background-color: transparent;
}

.eftc-section-nav__toggle[aria-expanded="true"] .eftc-section-nav__hamburger::before {
    transform: translateY(6px) rotate(45deg);
}

.eftc-section-nav__toggle[aria-expanded="true"] .eftc-section-nav__hamburger::after {
    transform: translateY(-6px) rotate(-45deg);
}

/** Nav list — hidden by default on mobile, dropdown on open. */
.eftc-section-nav__list {
    display: none;
    list-style: none;
    margin: 0;
    padding: var(--eftc-space-sm) 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--eftc-white);
    border-bottom: 1px solid var(--eftc-gray-200);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 101;
}

.eftc-section-nav__list--open {
    display: block;
}

.eftc-section-nav__list a {
    display: block;
    padding: var(--eftc-space-sm) var(--eftc-space-md);
    font-family: var(--eftc-font-body);
    font-size: 0.9375rem;
    color: var(--eftc-charcoal);
    text-decoration: none;
    transition: color var(--eftc-transition-fast), background-color var(--eftc-transition-fast);
}

.eftc-section-nav__list a:hover,
.eftc-section-nav__list a:focus {
    color: var(--eftc-gold);
    background-color: var(--eftc-gray-50);
}

.eftc-section-nav__item--active a {
    color: var(--eftc-gold);
    font-weight: 700;
}

/** Horizontal nav (>=992px): no hamburger, no dropdown. Uses compact sizing
    (with tightened item padding) so all eight items fit; full sizing kicks in
    at >=1280px. The 992px floor is the width at which the eight items fit
    horizontally; below it the hamburger is used, so nav items never overflow
    the bar. (Item padding was trimmed when the 8th item, Sources, was added so
    the eight items still fit at the existing 992px and 1280px breakpoints.) */
@media (min-width: 992px) {
    .eftc-section-nav__toggle {
        display: none;
    }

    .eftc-section-nav__list,
    .eftc-section-nav__list--open {
        display: flex;
        position: static;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
        gap: 0;
    }

    .eftc-section-nav__logo img {
        height: 50px;
    }

    .eftc-section-nav__list a {
        position: relative;
        padding: 20px 8px;
        font-family: var(--eftc-font-heading);
        font-size: 0.8125rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    /** Animated gold underline — expands from center on hover. */
    .eftc-section-nav__list a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background-color: var(--eftc-gold);
        transition: width 250ms cubic-bezier(0.16, 1, 0.3, 1),
                    left 250ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .eftc-section-nav__list a:hover::after,
    .eftc-section-nav__list a:focus::after {
        width: 100%;
        left: 0;
    }

    .eftc-section-nav__list a:hover,
    .eftc-section-nav__list a:focus {
        background-color: transparent;
    }

    .eftc-section-nav__item--active a {
        color: var(--eftc-gold);
    }

    .eftc-section-nav__item--active a::after {
        width: 100%;
        left: 0;
    }
}

/** Wide screens (>=1280px): restore full-size logo, padding, and font. */
@media (min-width: 1280px) {
    .eftc-section-nav__logo img {
        height: 70px;
    }

    .eftc-section-nav__list a {
        padding: 28px 13px;
        font-size: 1rem;
    }
}

/* ==========================================================================
   23. FOOTER
   ========================================================================== */

.eftc-footer {
    background-color: var(--eftc-navy-dark);
    color: var(--eftc-white);
    font-family: var(--eftc-font-body);
    padding: 64px 0 0;
}

.eftc-footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
}

.eftc-footer__brand img {
    height: 40px;
    width: auto;
    margin-bottom: var(--eftc-space-md);
}

.eftc-footer__brand p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    line-height: 1.6;
    max-width: 32ch;
    margin: 0;
}

.eftc-footer__heading {
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--eftc-gold);
    margin: 0 0 var(--eftc-space-md) 0;
}

.eftc-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.eftc-footer__links li {
    margin-bottom: var(--eftc-space-sm);
}

.eftc-footer__links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 150ms ease;
}

.eftc-footer__links a:hover,
.eftc-footer__links a:focus {
    color: var(--eftc-white);
}

.eftc-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 48px;
    padding: var(--eftc-space-lg) 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.eftc-footer__bottom a {
    color: var(--eftc-gold);
    text-decoration: none;
    transition: color 150ms ease;
}

.eftc-footer__bottom a:hover,
.eftc-footer__bottom a:focus {
    color: var(--eftc-gold-hover);
}

@media (max-width: 1024px) {
    .eftc-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width: 767px) {
    .eftc-footer {
        padding: 48px 0 0;
    }

    .eftc-footer__inner {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }

    .eftc-footer__brand p {
        max-width: none;
    }

    .eftc-footer__bottom {
        flex-direction: column;
        gap: var(--eftc-space-sm);
        text-align: center;
    }
}

/* ==========================================================================
   25. COMPONENT UTILITY CLASSES
   ========================================================================== */

/* Map Legend */
.eftc-map-legend {
    display: flex;
    justify-content: center;
    gap: var(--eftc-space-xl);
    flex-wrap: wrap;
    margin-bottom: var(--eftc-space-xl);
}

.eftc-map-legend__item {
    display: flex;
    align-items: center;
    gap: var(--eftc-space-sm);
}

.eftc-map-legend__dot {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: var(--eftc-radius-sm);
}

.eftc-map-legend__dot--opted-in { background-color: var(--eftc-st-optedin); }
.eftc-map-legend__dot--announced { background-color: var(--eftc-st-announced); }
.eftc-map-legend__dot--declined { background-color: var(--eftc-st-declined); }
.eftc-map-legend__dot--no-decision { background-color: var(--eftc-st-nodecision); }
.eftc-map-legend__dot--vetoed { background-color: var(--eftc-st-vetoed); }

.eftc-map-legend__label {
    font-size: 0.875rem;
    color: var(--eftc-gray-600);
}

@media (max-width: 480px) {
    .eftc-map-legend {
        gap: var(--eftc-space-md);
        flex-direction: column;
        align-items: center;
    }
}

/* Stat Value (Quick Facts big numbers) */
.eftc-stat__value {
    font-family: var(--eftc-font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--eftc-navy);
    margin-bottom: var(--eftc-space-sm);
}

/* Checkbox Row */
.eftc-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: var(--eftc-space-sm);
}

.eftc-checkbox-row input[type="checkbox"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
}

.eftc-checkbox-row label {
    font-family: var(--eftc-font-body);
    font-size: 0.9375rem;
    color: var(--eftc-gray-600);
    cursor: pointer;
}

/* Prominent opt-in label -- matches .eftc-form-label field prominence so the
   newsletter sign-up does not read as an afterthought (advocacy Step 1 form). */
.eftc-checkbox-row--prominent label {
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--eftc-navy);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Success Banner */
.eftc-success-banner {
    background-color: #ecfdf5;
    border: 1px solid var(--eftc-success);
    border-radius: var(--eftc-radius-md);
    padding: var(--eftc-space-md) var(--eftc-space-lg);
    margin-bottom: var(--eftc-space-xl);
    text-align: center;
}

.eftc-success-banner p {
    font-weight: 700;
    color: var(--eftc-success);
    margin: 0;
}

/* Wizard Buttons */
.eftc-wizard-buttons {
    display: flex;
    justify-content: space-between;
    gap: var(--eftc-space-md);
    margin-top: var(--eftc-space-xl);
}

@media (max-width: 480px) {
    .eftc-wizard-buttons {
        flex-direction: column;
    }
    .eftc-wizard-buttons .eftc-btn {
        flex: none;
        min-width: 0;
        width: 100%;
    }
}

/**
 * RENDER PERFORMANCE
 *
 * content-visibility: auto tells the browser to skip layout and paint
 * for off-screen sections until the user scrolls near them. The
 * contain-intrinsic-size hint prevents layout shift.
 */
.eftc-section:not(:first-child) {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* ==========================================================================
   26. DIVI OVERRIDES
   ========================================================================== */

/**
 * Force EFTC pages to use full viewport width — Divi sometimes wraps
 * content in a constrained-width container.
 */
.eftc-page #main-content .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/**
 * Reset browser default body margin (8px) that Divi normally resets
 * but our custom page templates bypass. Also clip any residual
 * horizontal overflow from edge-to-edge hero sections.
 */
body {
    margin: 0;
    overflow-x: hidden;
}

/**
 * Ensure EFTC hero sections are truly edge-to-edge, overriding any
 * Divi row/column padding that might exist.
 */
.eftc-page .eftc-hero {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
}

/**
 * Divi parent theme sets h1 color to navy with high specificity.
 * Override it for hero titles and any heading inside the hero.
 */
.eftc-hero .eftc-hero__title,
.eftc-hero h1 {
    color: var(--eftc-white);
}

/* ==========================================================================
   27. ASSESSMENT
   ========================================================================== */

/* --- Progress Bar --- */
.eftc-assessment-progress {
    margin-bottom: var(--eftc-space-xl);
}

.eftc-assessment-progress__text {
    display: flex;
    justify-content: space-between;
    font-family: var(--eftc-font-body);
    font-size: 0.875rem;
    color: var(--eftc-gray-600);
    margin-bottom: var(--eftc-space-xs);
}

.eftc-assessment-progress__bar {
    width: 100%;
    height: 8px;
    background-color: var(--eftc-gray-200);
    border-radius: 9999px;
    overflow: hidden;
}

.eftc-assessment-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--eftc-navy), var(--eftc-gold));
    border-radius: 9999px;
    transition: width 0.4s ease;
}

/* --- Question Card --- */
.eftc-question-card {
    background-color: var(--eftc-white);
    border-radius: var(--eftc-radius-lg);
    box-shadow: var(--eftc-shadow-card);
    padding: var(--eftc-space-xl) var(--eftc-space-lg);
    border-top: 3px solid var(--eftc-gold);
}

.eftc-domain-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--eftc-navy);
    color: var(--eftc-white);
    margin-bottom: var(--eftc-space-md);
}

.eftc-question-prompt {
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--eftc-charcoal);
    margin: 0 0 var(--eftc-space-sm) 0;
    line-height: 1.4;
}

.eftc-question-help {
    font-family: var(--eftc-font-body);
    font-size: 0.875rem;
    color: var(--eftc-gray-600);
    margin: 0 0 var(--eftc-space-lg) 0;
    line-height: 1.5;
}

/* --- Likert Scale (5-point horizontal) --- */
.eftc-likert-group {
    display: flex;
    gap: var(--eftc-space-sm);
    flex-wrap: wrap;
}

.eftc-likert-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.eftc-likert-option {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--eftc-space-xs);
    padding: var(--eftc-space-md) var(--eftc-space-sm);
    border: 2px solid var(--eftc-gray-200);
    border-radius: var(--eftc-radius-md);
    background-color: var(--eftc-white);
    cursor: pointer;
    text-align: center;
    transition: background-color var(--eftc-transition-fast),
                border-color var(--eftc-transition-fast),
                color var(--eftc-transition-fast),
                transform var(--eftc-transition-fast);
}

.eftc-likert-option:hover {
    border-color: var(--eftc-navy-medium);
    background-color: var(--eftc-gray-50);
}

.eftc-likert-option--selected {
    background-color: var(--eftc-navy);
    border-color: var(--eftc-navy);
    color: var(--eftc-white);
    transform: scale(1.03);
}

.eftc-likert-option--selected:hover {
    background-color: var(--eftc-navy-hover);
    border-color: var(--eftc-navy-hover);
}

.eftc-likert-option--selected .eftc-likert-label {
    color: var(--eftc-white);
}

.eftc-likert-label {
    font-family: var(--eftc-font-body);
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--eftc-gray-600);
    transition: color var(--eftc-transition-fast);
}

.eftc-likert-option:focus-within {
    outline: 3px solid var(--eftc-navy);
    outline-offset: 2px;
    box-shadow: var(--eftc-focus-ring);
}

/* Stack vertically on small screens */
@media (max-width: 480px) {
    .eftc-likert-group {
        flex-direction: column;
    }

    .eftc-likert-option {
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--eftc-space-sm);
        text-align: left;
    }
}

/* --- Yes/No Toggle --- */
.eftc-yesno-group {
    display: flex;
    gap: var(--eftc-space-md);
}

.eftc-yesno-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.eftc-yesno-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--eftc-space-md) var(--eftc-space-lg);
    border: 2px solid var(--eftc-navy);
    border-radius: 9999px;
    background-color: var(--eftc-white);
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--eftc-navy);
    cursor: pointer;
    transition: background-color var(--eftc-transition-fast),
                color var(--eftc-transition-fast);
}

.eftc-yesno-option:hover {
    background-color: var(--eftc-navy-light);
}

.eftc-yesno-option--selected {
    background-color: var(--eftc-navy);
    color: var(--eftc-white);
}

.eftc-yesno-option--selected:hover {
    background-color: var(--eftc-navy-hover);
}

.eftc-yesno-option:focus-within {
    outline: 3px solid var(--eftc-navy);
    outline-offset: 2px;
    box-shadow: var(--eftc-focus-ring);
}

/* --- Multiple Choice --- */
.eftc-choice-group {
    display: flex;
    flex-direction: column;
    gap: var(--eftc-space-sm);
}

.eftc-choice-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.eftc-choice-option {
    display: flex;
    align-items: center;
    gap: var(--eftc-space-sm);
    padding: var(--eftc-space-md);
    border: 2px solid var(--eftc-gray-200);
    border-radius: var(--eftc-radius-md);
    background-color: var(--eftc-white);
    font-family: var(--eftc-font-body);
    font-size: 1rem;
    color: var(--eftc-charcoal);
    cursor: pointer;
    transition: background-color var(--eftc-transition-fast),
                border-color var(--eftc-transition-fast);
}

.eftc-choice-option:hover {
    background-color: var(--eftc-gray-50);
    border-color: var(--eftc-gray-300);
}

.eftc-choice-option--selected {
    background-color: var(--eftc-navy-light);
    border-color: var(--eftc-navy);
    border-left-width: 4px;
}

.eftc-choice-option:focus-within {
    outline: 3px solid var(--eftc-navy);
    outline-offset: 2px;
    box-shadow: var(--eftc-focus-ring);
}

/* --- Assessment Navigation --- */
.eftc-assessment-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--eftc-space-xl);
    gap: var(--eftc-space-md);
}

/* Push Next button to the right when Back is hidden */
.eftc-assessment-nav .eftc-btn:only-child {
    margin-left: auto;
}

/* --- Score Display (Results) --- */
.eftc-score-display {
    text-align: center;
    padding: var(--eftc-space-2xl) var(--eftc-space-lg);
    margin-bottom: var(--eftc-space-xl);
}

.eftc-score-number {
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 3rem;
    line-height: 1;
    margin-bottom: var(--eftc-space-sm);
}

.eftc-score-label {
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* --- Domain Result Cards (uses existing .eftc-grid--2col for layout) --- */
.eftc-domain-result {
    background-color: var(--eftc-white);
    border-radius: var(--eftc-radius-lg);
    box-shadow: var(--eftc-shadow-card);
    padding: var(--eftc-space-lg);
    border-top: 3px solid var(--eftc-gold);
}

.eftc-domain-result__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--eftc-space-sm);
}

.eftc-domain-result__header h3 {
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--eftc-navy);
    margin: 0;
}

.eftc-domain-result__score {
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 1.125rem;
}

.eftc-domain-result__bar {
    width: 100%;
    height: 8px;
    background-color: var(--eftc-gray-200);
    border-radius: 9999px;
    overflow: hidden;
    margin-bottom: var(--eftc-space-xs);
}

.eftc-domain-result__fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.6s ease;
}

.eftc-domain-result__label {
    font-family: var(--eftc-font-body);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.eftc-domain-result__recs {
    margin-top: var(--eftc-space-md);
    padding-top: var(--eftc-space-md);
    border-top: 1px solid var(--eftc-gray-200);
}

.eftc-domain-result__recs h4 {
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--eftc-navy);
    margin: 0 0 var(--eftc-space-sm) 0;
}

.eftc-domain-result__recs ul {
    list-style: disc;
    padding-left: var(--eftc-space-lg);
    margin: 0;
}

.eftc-domain-result__recs li {
    font-family: var(--eftc-font-body);
    font-size: 0.875rem;
    color: var(--eftc-gray-600);
    line-height: 1.5;
    margin-bottom: var(--eftc-space-xs);
}

/* --- Assessment Step Transitions --- */
.eftc-assessment-step {
    animation: eftcFadeIn 0.3s ease;
}

/* --- Consultation Request Card --- */
.eftc-consultation-card {
    margin-top: var(--eftc-space-2xl);
    padding: var(--eftc-space-xl);
    background: var(--eftc-white);
    border-radius: var(--eftc-radius-lg);
    border-left: 4px solid var(--eftc-navy);
    box-shadow: var(--eftc-shadow-sm);
}

.eftc-consultation-card h3 {
    font-family: var(--eftc-font-heading);
    font-size: 1.25rem;
    color: var(--eftc-navy);
    margin: 0 0 var(--eftc-space-sm) 0;
}

.eftc-consultation-card__desc {
    font-family: var(--eftc-font-body);
    font-size: 0.938rem;
    color: var(--eftc-gray-600);
    line-height: 1.6;
    margin: 0 0 var(--eftc-space-md) 0;
}

.eftc-consultation-card__info {
    background: var(--eftc-gray-50, #f8f9fa);
    border-radius: var(--eftc-radius-md);
    padding: var(--eftc-space-md);
    margin-bottom: var(--eftc-space-md);
}

.eftc-consultation-card__info p {
    font-family: var(--eftc-font-body);
    font-size: 0.875rem;
    color: var(--eftc-gray-700, #374151);
    margin: 0 0 var(--eftc-space-xs) 0;
    line-height: 1.5;
}

.eftc-consultation-card__info p:last-child {
    margin-bottom: 0;
}

.eftc-consultation-card__label {
    display: block;
    font-family: var(--eftc-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--eftc-gray-700, #374151);
    margin-bottom: var(--eftc-space-xs);
}

.eftc-consultation-card__textarea {
    display: block;
    width: 100%;
    font-family: var(--eftc-font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--eftc-gray-700, #374151);
    background: var(--eftc-white);
    border: 1px solid var(--eftc-gray-300, #d1d5db);
    border-radius: var(--eftc-radius-md);
    padding: var(--eftc-space-sm) var(--eftc-space-md);
    margin-bottom: var(--eftc-space-md);
    resize: vertical;
    box-sizing: border-box;
}

.eftc-consultation-card__textarea:focus {
    outline: none;
    border-color: var(--eftc-navy);
    box-shadow: 0 0 0 2px rgba(29, 55, 105, 0.15);
}

.eftc-consultation-card__submit {
    margin-top: var(--eftc-space-xs);
}

/* Phone / text input within consultation card */
.eftc-consultation-card__field-group {
    margin-bottom: var(--eftc-space-md);
}

.eftc-consultation-card__input {
    display: block;
    width: 100%;
    font-family: var(--eftc-font-body);
    font-size: 0.938rem;
    color: var(--eftc-charcoal);
    background-color: var(--eftc-white);
    border: 1px solid var(--eftc-gray-200);
    border-radius: var(--eftc-radius-md);
    padding: 0.625rem 0.75rem;
    transition: border-color var(--eftc-transition), box-shadow var(--eftc-transition);
}

.eftc-consultation-card__input:focus {
    outline: none;
    border-color: var(--eftc-navy);
    box-shadow: 0 0 0 2px rgba(29, 55, 105, 0.15);
}

/* Interest checkboxes fieldset */
.eftc-consultation-card__fieldset {
    border: none;
    margin: 0 0 var(--eftc-space-md) 0;
    padding: 0;
}

.eftc-consultation-card__legend {
    font-family: var(--eftc-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--eftc-navy);
    margin-bottom: var(--eftc-space-sm);
}

.eftc-consultation-card__check-label {
    display: flex;
    align-items: center;
    gap: var(--eftc-space-xs);
    font-family: var(--eftc-font-body);
    font-size: 0.875rem;
    color: var(--eftc-charcoal);
    padding: var(--eftc-space-xs) 0;
    cursor: pointer;
}

.eftc-consultation-card__checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--eftc-navy);
    flex-shrink: 0;
    cursor: pointer;
}

.eftc-consultation-card__error {
    font-family: var(--eftc-font-body);
    font-size: 0.875rem;
    color: #dc2626;
    margin: var(--eftc-space-sm) 0 0 0;
}

/* Success state */
.eftc-consultation-card--success {
    text-align: center;
    border-left-color: #059669;
}

.eftc-consultation-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #059669;
    color: var(--eftc-white);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--eftc-space-md);
}

/* ==========================================================================
   28. READINESS GUIDE (Assessment Results)
   ========================================================================== */

.eftc-readiness-guide-section {
    margin-top: var(--eftc-space-2xl);
    padding-top: var(--eftc-space-xl);
    border-top: 2px solid var(--eftc-gray-200);
}

.eftc-action-card {
    background: var(--eftc-white);
    border: 1px solid var(--eftc-gray-200);
    border-radius: var(--eftc-radius);
    padding: var(--eftc-space-lg);
    margin-bottom: var(--eftc-space-md);
}

.eftc-action-card--weak {
    border-left: 4px solid var(--eftc-gold);
}

.eftc-action-card__header {
    display: flex;
    align-items: center;
    gap: var(--eftc-space-sm);
    margin-bottom: var(--eftc-space-sm);
    flex-wrap: wrap;
}

.eftc-action-card__rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--eftc-navy);
    color: var(--eftc-white);
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.eftc-action-card__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1.1rem;
}

.eftc-action-card__badge {
    display: inline-block;
    color: var(--eftc-white);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.eftc-action-card__what {
    font-style: italic;
    color: var(--eftc-gray-600);
    margin-bottom: var(--eftc-space-sm);
    line-height: 1.5;
}

.eftc-action-card__actions {
    padding-left: var(--eftc-space-lg);
    margin-bottom: var(--eftc-space-sm);
    line-height: 1.6;
}

.eftc-action-card__gaps {
    background: #FFF7ED;
    border-radius: var(--eftc-radius);
    padding: var(--eftc-space-sm) var(--eftc-space-md);
    margin-top: var(--eftc-space-sm);
}

.eftc-action-card__gaps-label {
    font-weight: 700;
    color: var(--eftc-charcoal);
    margin-bottom: var(--eftc-space-xs);
    font-size: 0.875rem;
}

.eftc-action-card__gap-item {
    color: var(--eftc-gray-600);
    font-size: 0.875rem;
    line-height: 1.5;
    padding-left: var(--eftc-space-md);
    margin-bottom: 2px;
}

.eftc-action-card__gap-item::before {
    content: '!';
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
    text-align: center;
    background: #F59E0B;
    color: var(--eftc-white);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.75rem;
    margin-left: calc(-1 * var(--eftc-space-md));
    margin-right: var(--eftc-space-xs);
}

/* --- Path Choice Layout (Readiness Landing Page) --- */

.eftc-path-choice {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--eftc-space-lg);
    max-width: 900px;
    margin: 0 auto var(--eftc-space-xl);
    align-items: start;
}

.eftc-path-choice__option {
    padding: var(--eftc-space-lg);
    border-radius: var(--eftc-radius);
    border: 1px solid var(--eftc-gray-200);
    background: var(--eftc-white);
}

.eftc-path-choice__option--custom {
    border-color: var(--eftc-gold);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.eftc-path-choice__heading {
    font-size: 1.25rem;
    margin-bottom: var(--eftc-space-sm);
}

.eftc-path-choice__desc {
    color: var(--eftc-gray-600);
    line-height: 1.5;
    margin-bottom: var(--eftc-space-md);
}

.eftc-path-choice__time {
    color: var(--eftc-gray-400);
    font-size: 0.85rem;
    margin-top: var(--eftc-space-sm);
}

.eftc-path-choice__highlights {
    list-style: none;
    padding: 0;
    margin-bottom: var(--eftc-space-md);
}

.eftc-path-choice__highlights li {
    padding-left: var(--eftc-space-md);
    margin-bottom: 4px;
    font-size: 0.9rem;
    color: var(--eftc-charcoal);
}

.eftc-path-choice__highlights li::before {
    content: '\2713';
    color: var(--eftc-gold);
    font-weight: 700;
    margin-left: calc(-1 * var(--eftc-space-md));
    margin-right: var(--eftc-space-xs);
}

.eftc-path-choice__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--eftc-gray-400);
    font-size: 0.9rem;
    font-style: italic;
}

@media (max-width: 768px) {
    .eftc-path-choice {
        grid-template-columns: 1fr;
    }
    .eftc-path-choice__divider {
        padding: var(--eftc-space-sm) 0;
    }
}

/* ==========================================================================
   28. READINESS GUIDE PAGE
   ========================================================================== */

/* Main container -- narrow centered column for readability */
.eftc-guide {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--eftc-space-xl) var(--eftc-space-md);
}

/* Meta bar -- assessment date and school info */
.eftc-guide__meta {
    color: var(--eftc-gray-600);
    font-size: 0.875rem;
    font-family: var(--eftc-font-body);
    margin-bottom: var(--eftc-space-lg);
}

.eftc-guide__meta p {
    margin: 0 0 var(--eftc-space-xs) 0;
}

/* Section headings within guide */
.eftc-guide__section-heading {
    font-family: var(--eftc-font-heading);
    font-size: 1.5rem;
    color: var(--eftc-navy);
    margin: var(--eftc-space-xl) 0 var(--eftc-space-md) 0;
}

/* ---- Overall Score Card ---- */

.eftc-guide__overall {
    text-align: center;
    background: var(--eftc-gray-50);
    border-top: 4px solid var(--eftc-gold);
    border-radius: var(--eftc-radius-md);
    padding: var(--eftc-space-xl) var(--eftc-space-lg);
    margin-bottom: var(--eftc-space-xl);
    box-shadow: var(--eftc-shadow-card);
}

.eftc-guide__overall-score {
    font-family: var(--eftc-font-heading);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
}

.eftc-guide__overall-label {
    font-family: var(--eftc-font-heading);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--eftc-space-xs);
}

/* ---- Domain Results ---- */

.eftc-guide__domain {
    padding: var(--eftc-space-lg) 0;
    border-bottom: 1px solid var(--eftc-gray-200);
}

.eftc-guide__domain:last-of-type {
    border-bottom: none;
}

.eftc-guide__domain--weak {
    border-left: 4px solid var(--eftc-status-amber);
    padding-left: var(--eftc-space-md);
}

.eftc-guide__domain-title {
    font-family: var(--eftc-font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--eftc-charcoal);
    margin: 0 0 var(--eftc-space-sm) 0;
}

/* Score bar -- thin progress bar */
.eftc-guide__score-bar {
    background: var(--eftc-gray-200);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    margin-bottom: var(--eftc-space-xs);
}

.eftc-guide__score-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* Score value and label */
.eftc-guide__score-value {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--eftc-space-xs);
    font-size: 0.9rem;
    margin-bottom: var(--eftc-space-sm);
}

.eftc-guide__score-label {
    color: var(--eftc-gray-600);
    font-size: 0.8rem;
}

/* Guidance section */
.eftc-guide__guidance {
    margin-top: var(--eftc-space-sm);
}

.eftc-guide__what-it-means {
    font-style: italic;
    color: var(--eftc-gray-600);
    font-size: 0.9rem;
    margin: 0 0 var(--eftc-space-sm) 0;
}

.eftc-guide__actions-list {
    list-style: disc;
    padding-left: var(--eftc-space-lg);
    margin: 0 0 var(--eftc-space-sm) 0;
}

.eftc-guide__actions-list li {
    font-size: 0.9rem;
    color: var(--eftc-charcoal);
    margin-bottom: 4px;
}

.eftc-guide__action-single {
    font-size: 0.9rem;
    color: var(--eftc-charcoal);
    margin: 0 0 var(--eftc-space-sm) 0;
}

.eftc-guide__idea-cta {
    font-size: 0.85rem;
    color: var(--eftc-gray-600);
    margin: var(--eftc-space-sm) 0 0 0;
}

.eftc-guide__idea-cta a {
    color: var(--eftc-navy);
    text-decoration: underline;
}

/* ---- Gap Flags ---- */

.eftc-guide__gap-flags {
    margin-top: var(--eftc-space-sm);
}

.eftc-guide__gap-flag {
    display: flex;
    align-items: flex-start;
    gap: var(--eftc-space-xs);
    font-size: 0.825rem;
    color: var(--eftc-status-red);
    padding: var(--eftc-space-xs) 0;
    border-left: 3px solid var(--eftc-status-red);
    padding-left: var(--eftc-space-sm);
    margin-bottom: var(--eftc-space-xs);
}

.eftc-guide__gap-icon {
    flex-shrink: 0;
    line-height: 1;
}

/* ---- Income Eligibility Card ---- */

.eftc-guide__income {
    border-top: 4px solid var(--eftc-gold);
    background: var(--eftc-gray-50);
    border-radius: var(--eftc-radius-md);
    padding: var(--eftc-space-lg);
    margin: var(--eftc-space-xl) 0;
    text-align: center;
    box-shadow: var(--eftc-shadow-sm);
}

.eftc-guide__income h2 {
    font-family: var(--eftc-font-heading);
    font-size: 1.25rem;
    color: var(--eftc-navy);
    margin: 0 0 var(--eftc-space-sm) 0;
}

.eftc-guide__income-threshold {
    font-family: var(--eftc-font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--eftc-navy);
    margin-bottom: var(--eftc-space-sm);
}

.eftc-guide__income p {
    font-size: 0.875rem;
    color: var(--eftc-gray-600);
    margin: 0 0 var(--eftc-space-sm) 0;
}

.eftc-guide__income a {
    font-size: 0.875rem;
    color: var(--eftc-navy);
    text-decoration: underline;
}

/* ---- State CTA ---- */

.eftc-guide__state-status {
    border-radius: var(--eftc-radius-md);
    padding: var(--eftc-space-lg);
    margin: var(--eftc-space-lg) 0;
}

.eftc-guide__state-opted-in {
    border-left: 4px solid var(--eftc-status-green);
    background: rgba(34, 197, 94, 0.08);
    border-radius: var(--eftc-radius-md);
    padding: var(--eftc-space-md) var(--eftc-space-lg);
}

.eftc-guide__state-not-opted {
    border-left: 4px solid var(--eftc-gold);
    background: var(--eftc-gold-light);
    border-radius: var(--eftc-radius-md);
    padding: var(--eftc-space-md) var(--eftc-space-lg);
}

.eftc-guide__state-status p {
    font-size: 0.95rem;
    color: var(--eftc-charcoal);
    margin: 0 0 var(--eftc-space-sm) 0;
}

.eftc-guide__state-status .eftc-btn {
    margin-top: var(--eftc-space-xs);
}

/* ---- Share Section ---- */

.eftc-guide__share {
    margin: var(--eftc-space-xl) 0;
}

.eftc-guide__share h2 {
    font-family: var(--eftc-font-heading);
    font-size: 1.25rem;
    color: var(--eftc-navy);
    margin: 0 0 var(--eftc-space-xs) 0;
}

.eftc-guide__share p {
    font-size: 0.9rem;
    color: var(--eftc-gray-600);
    margin: 0 0 var(--eftc-space-sm) 0;
}

.eftc-guide__share-url {
    display: flex;
    gap: var(--eftc-space-sm);
    align-items: stretch;
}

.eftc-guide__share-url input {
    flex: 1;
    font-family: var(--eftc-font-body);
    font-size: 0.85rem;
    padding: var(--eftc-space-xs) var(--eftc-space-sm);
    border: 1px solid var(--eftc-gray-300);
    border-radius: var(--eftc-radius-sm);
    background: var(--eftc-white);
    color: var(--eftc-charcoal);
    min-width: 0;
}

.eftc-guide__share-url button {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- Action Buttons (bottom) ---- */

.eftc-guide__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eftc-space-sm);
    justify-content: center;
    margin: var(--eftc-space-xl) 0 var(--eftc-space-lg) 0;
}

/* ---- Footer ---- */

.eftc-guide__footer {
    border-top: 1px solid var(--eftc-gray-200);
    padding-top: var(--eftc-space-md);
    text-align: center;
}

.eftc-guide__footer p {
    font-size: 0.8rem;
    color: var(--eftc-gray-400);
    margin: 0;
}

/* ---- Print Styles ---- */

@media print {
    .eftc-section-nav,
    .eftc-guide__share,
    .eftc-guide__actions,
    #eftc-download-guide-pdf {
        display: none;
    }

    .eftc-guide {
        max-width: 100%;
        padding: 0;
    }

    .eftc-guide__overall {
        box-shadow: none;
        border: 1px solid var(--eftc-gray-300);
    }

    .eftc-guide__income {
        box-shadow: none;
        border: 1px solid var(--eftc-gray-300);
    }
}

/* ---- Responsive (mobile) ---- */

@media (max-width: 768px) {
    .eftc-guide {
        padding: var(--eftc-space-md) var(--eftc-space-sm);
    }

    .eftc-guide__overall-score {
        font-size: 2.25rem;
    }

    .eftc-guide__overall {
        padding: var(--eftc-space-lg) var(--eftc-space-md);
    }

    .eftc-guide__income-threshold {
        font-size: 1.75rem;
    }

    .eftc-guide__share-url {
        flex-direction: column;
    }

    .eftc-guide__share-url input {
        width: 100%;
    }

    .eftc-guide__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .eftc-guide__domain--weak {
        padding-left: var(--eftc-space-sm);
    }
}

/* ==========================================================================
   29. LEGAL PAGES
   ========================================================================== */

.eftc-legal__updated {
    color: var(--eftc-gray-600);
    font-size: 0.875rem;
    margin-bottom: var(--eftc-space-lg);
}

.eftc-container--narrow h3 {
    color: var(--eftc-navy);
    font-size: 1.15rem;
    margin-top: var(--eftc-space-lg);
    margin-bottom: var(--eftc-space-sm);
}

.eftc-container--narrow h3:first-of-type {
    margin-top: 0;
}

.eftc-container--narrow ul {
    padding-left: 1.5rem;
    margin-bottom: var(--eftc-space-md);
}

.eftc-container--narrow ul li {
    margin-bottom: 0.35rem;
    line-height: 1.6;
}


/* ========================================================================
   Social Share Kit (Section: Spread the Word)
   ======================================================================== */
.eftc-visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.eftc-share__grid {
    display: grid; grid-template-columns: 1fr; gap: var(--eftc-space-lg);
}
@media (min-width: 720px) {
    .eftc-share__grid { grid-template-columns: 1fr 1fr; }
}
.eftc-share__card { display: flex; flex-direction: column; }
.eftc-share__text { white-space: pre-wrap; color: var(--eftc-gray-800); margin: 0 0 var(--eftc-space-sm) 0; }
.eftc-share__hashtags { color: var(--eftc-gray-600); font-size: 0.9375rem; margin: 0 0 var(--eftc-space-md) 0; }
.eftc-share__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--eftc-space-sm); }

/* In-page section sub-nav: Learn / Act / Share */
.eftc-subnav { position: sticky; top: 0; z-index: 20; background: var(--eftc-white); border-bottom: 1px solid var(--eftc-gray-200); }
.eftc-subnav__list { display: flex; gap: var(--eftc-space-lg); justify-content: center; margin: 0; padding: var(--eftc-space-sm) var(--eftc-space-md); list-style: none; flex-wrap: wrap; }
.eftc-subnav__link { color: var(--eftc-navy); text-decoration: none; font-weight: 600; }
.eftc-subnav__link:hover, .eftc-subnav__link:focus { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   PA Capitol hero banner + per-post share graphic (legislative-action campaigns)
   --------------------------------------------------------------------------- */
.eftc-hero__banner {
    display: block;
    width: 100%;
    max-width: 920px;
    height: auto;
    margin: 0 auto var(--eftc-space-lg);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(29, 55, 105, 0.18);
}

.eftc-share__graphic {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 0 0 var(--eftc-space-sm);
}

/* ==========================================================================
   23. SHARE STACK + MODAL (floating share affordance)
   ========================================================================== */
.eftc-share-stack {
    position: fixed;
    right: 1rem;
    bottom: clamp(5rem, 22vh, 14rem);
    z-index: 90; /* above content, below modal overlay + section-nav (100) */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--eftc-navy);
    border-radius: var(--eftc-radius-xl);
    box-shadow: var(--eftc-shadow-lg);
    overflow: hidden;
}
.eftc-share-stack__cap {
    background: var(--eftc-gold);
    color: var(--eftc-navy-dark);
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-align: center;
    padding: 0.4rem 0;
    text-transform: uppercase;
}
.eftc-share-stack__btn {
    width: 52px;
    height: 50px;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: var(--eftc-transition);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.eftc-share-stack__btn:first-of-type { border-top: none; }
.eftc-share-stack__btn:hover { background: var(--eftc-navy-hover); color: var(--eftc-gold); }
.eftc-share-stack__btn:focus-visible { outline: 3px solid var(--eftc-gold); outline-offset: -3px; }
.eftc-share-stack__btn svg { width: 22px; height: 22px; fill: currentColor; }
@media (max-width: 640px) {
    .eftc-share-stack { right: 0.6rem; bottom: max(1rem, env(safe-area-inset-bottom)); }
    .eftc-share-stack__btn { width: 46px; height: 46px; }
}

.eftc-share-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10010; /* above the existing map-cta-popup (10001/10002) + sticky sub-nav */
    background: rgba(21, 43, 80, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.eftc-share-modal-overlay[hidden] { display: none; }
.eftc-share-modal {
    background: #fff;
    border-radius: var(--eftc-radius-xl);
    box-shadow: var(--eftc-shadow-lg);
    width: min(540px, 100%);
    max-height: 92vh;
    overflow: auto;
    border-top: 4px solid var(--eftc-gold);
}
.eftc-share-modal__head { display: flex; align-items: center; justify-content: space-between; padding: var(--eftc-space-lg) var(--eftc-space-lg) var(--eftc-space-sm); }
.eftc-share-modal__head h2 { margin: 0; font-size: 1.3rem; }
.eftc-share-modal__close { border: none; background: transparent; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--eftc-gray-600); padding: 0.2rem 0.5rem; border-radius: var(--eftc-radius-sm); }
.eftc-share-modal__close:hover { background: var(--eftc-gray-100); color: var(--eftc-navy); }
.eftc-share-modal__sub { padding: 0 var(--eftc-space-lg); color: var(--eftc-gray-600); font-size: 0.9rem; margin: 0 0 var(--eftc-space-md); }
.eftc-share-tabs { display: flex; gap: 0.25rem; padding: 0 var(--eftc-space-lg); border-bottom: 1px solid var(--eftc-gray-200); flex-wrap: wrap; }
.eftc-share-tab { display: inline-flex; align-items: center; gap: 0.4rem; border: none; background: transparent; font: inherit; font-weight: 700; font-family: var(--eftc-font-heading); color: var(--eftc-gray-600); cursor: pointer; padding: 0.6rem 0.7rem; border-bottom: 3px solid transparent; }
.eftc-share-tab svg { width: 16px; height: 16px; fill: currentColor; }
.eftc-share-tab[aria-selected="true"] { color: var(--eftc-navy); border-bottom-color: var(--eftc-gold); }
.eftc-share-tab:focus-visible { outline: 3px solid var(--eftc-navy); outline-offset: -3px; }
.eftc-share-pane { padding: var(--eftc-space-lg); }
.eftc-share-pane[hidden] { display: none; }
.eftc-share-pane__img { width: 100%; border-radius: var(--eftc-radius-md); margin-bottom: var(--eftc-space-md); display: block; border: 1px solid var(--eftc-gray-200); }
.eftc-share-pane__caption { background: var(--eftc-gray-50); border: 1px solid var(--eftc-gray-200); border-radius: var(--eftc-radius-md); padding: var(--eftc-space-md); font-size: 0.92rem; white-space: pre-wrap; color: var(--eftc-gray-800); }
.eftc-share-pane__tags { color: var(--eftc-navy); font-weight: 600; font-size: 0.88rem; margin: 0.5rem 0 0; }
.eftc-share-pane__note { font-size: 0.8rem; color: var(--eftc-gray-600); margin: 0.75rem 0 0; }
.eftc-share-pane__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: var(--eftc-space-md); }
.eftc-share-pane__actions .eftc-btn { flex: 1; min-width: 140px; }

/* ==========================================================================
   N. ICON SYSTEM (branded duotone-style inline SVG via eftc_icon())
   --------------------------------------------------------------------------
   currentColor drives the stroke (flipped per colorway); var(--eftc-gold)
   drives the custom gold fill; currentColor drives solid dots. Deliberately NO
   vector-effect:non-scaling-stroke so 1.7px scales naturally across 16-44px.
   ========================================================================== */

.eftc-ic {
    display: inline-block;
    vertical-align: middle;
    flex: none;
}

/* Custom gold fill layer (the per-glyph accent shape). */
.eftc-ic__accent {
    fill: var(--eftc-gold, #D8A83B);
    stroke: none;
}

/* Solid dots / small filled marks track the stroke color in both colorways. */
.eftc-ic__dot {
    fill: currentColor;
    stroke: none;
}

/* Colorway A: navy stroke + gold fill, for white cards and UI. */
.eftc-ic--navy-on-light {
    color: var(--eftc-navy, #1D3769);
}

/* Colorway B: white stroke + gold fill, for the solid navy header bar. */
.eftc-ic--light-on-navy {
    color: #fff;
}


/* ==========================================================================
   Source Documents (Phase 1)
   Additive, house-consistent styling for /eftc/sources/ (index) and the
   single-source detail pages. Mirrors the .eftc-card family and design
   tokens. New classes only — the templates already use these names. No
   existing selector or token above is modified, reordered, or removed.
   ========================================================================== */

/* Reusable opt-in surface ground: white cards lift off this tint.
   .eftc-page.eftc-surface (0,2,0) wins over .eftc-page background-white (0,1,0). */
.eftc-page.eftc-surface {
    background-color: var(--eftc-surface);
}

/* Page vertical rhythm (both pages share the .eftc-page base). */
.eftc-sources,
.eftc-source-detail {
    padding-top: var(--eftc-space-2xl);
    padding-bottom: var(--eftc-space-3xl);
}

/* Index intro header. */
.eftc-sources__intro {
    margin-bottom: var(--eftc-space-2xl);
}

.eftc-sources__intro h1 {
    margin: 0 0 var(--eftc-space-sm);
}

.eftc-sources__intro p {
    color: var(--eftc-gray-600);
    font-size: 1.0625rem;
    line-height: 1.7;
    max-width: 720px;
    margin: 0;
}

/* Category section: heading + responsive tile grid. */
.eftc-sources__section {
    margin-bottom: var(--eftc-space-2xl);
}

.eftc-sources__section > h2 {
    position: relative;
    font-size: 1.5rem;
    margin: 0 0 var(--eftc-space-lg);
    padding-bottom: var(--eftc-space-sm);
    border-bottom: none;
}

.eftc-sources__section > h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 3px;
    background-color: var(--eftc-gold);
}

/* Index tile grid — auto-fill, 2–3 tiles per row on desktop, 1 on mobile. */
.eftc-sources__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--eftc-space-lg);
}

/* Source card — mirrors .eftc-card chrome (white bg, radius, shadow, hover lift).
   On the index it is a compact tile: flex column so the "View document" link
   anchors to the card foot. */
.eftc-source-card {
    display: flex;
    flex-direction: column;
    background-color: var(--eftc-white);
    border-radius: var(--eftc-radius-lg);
    box-shadow: var(--eftc-shadow-float);
    border: 1px solid var(--eftc-gray-200);
    border-top: 4px solid var(--eftc-gold);
    padding: var(--eftc-space-lg);
    transition: box-shadow var(--eftc-transition), transform var(--eftc-transition);
}

.eftc-source-card:hover {
    box-shadow: var(--eftc-shadow-float-hover);
    transform: translateY(-5px);
}

.eftc-source-card > h3 {
    font-size: 1.25rem;
    margin: 0 0 var(--eftc-space-sm);
}

.eftc-source-card > h3 a {
    color: var(--eftc-navy);
    text-decoration: none;
}

.eftc-source-card > h3 a:hover,
.eftc-source-card > h3 a:focus {
    color: var(--eftc-navy-hover);
    text-decoration: underline;
}

/* Gold category badge. */
.eftc-source-card__label {
    display: inline-block;
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--eftc-white);
    background-color: var(--eftc-navy);
    border-radius: var(--eftc-radius-sm);
    padding: 0.2rem 0.55rem;
    margin-bottom: var(--eftc-space-sm);
}

/* Citation / meta line: muted. */
.eftc-source-card__cite,
.eftc-source-detail__cite {
    color: var(--eftc-gray-600);
    font-size: 0.875rem;
    margin: 0 0 var(--eftc-space-sm);
}

/* Teaser: clamp to ~3 lines on the index so tiles stay uniform and scannable. */
.eftc-source-card__summary {
    color: var(--eftc-charcoal);
    line-height: 1.6;
    margin: 0 0 var(--eftc-space-md);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* "View document" affordance — gold-to-navy link anchored to the card foot. */
.eftc-source-card__more {
    margin-top: auto;
    align-self: flex-start;
    font-family: var(--eftc-font-heading);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--eftc-navy);
    text-decoration: none;
}

.eftc-source-card__more:hover,
.eftc-source-card__more:focus {
    color: var(--eftc-navy-hover);
    text-decoration: underline;
}

.eftc-source-card__why,
.eftc-source-detail__why {
    color: var(--eftc-charcoal);
    line-height: 1.6;
    margin: 0 0 var(--eftc-space-md);
}

.eftc-source-card__why strong,
.eftc-source-detail__why strong {
    color: var(--eftc-navy);
}

.eftc-source-card .eftc-btn {
    margin-top: var(--eftc-space-xs);
}

/* Coming-soon / pending cards: quieter, no gold accent, no lift. */
.eftc-source-card--pending {
    border-top-color: var(--eftc-gray-300);
    background-color: var(--eftc-gray-50);
    box-shadow: none;
}

.eftc-source-card--pending:hover {
    transform: none;
    box-shadow: var(--eftc-shadow-sm);
}

.eftc-source-card--pending > h3 {
    color: var(--eftc-gray-800);
}

/* ----- Single-source detail page ----- */
.eftc-source-detail > h1 {
    margin: 0 0 var(--eftc-space-sm);
}

.eftc-source-detail__summary {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--eftc-charcoal);
    margin: 0 0 var(--eftc-space-md);
}

/* Embedded official-source viewer. */
.eftc-source-embed {
    margin: var(--eftc-space-xl) 0;
}

.eftc-source-embed__frame {
    width: 100%;
    height: 60vh;
    min-height: 420px;
    border: 1px solid var(--eftc-gray-300);
    border-radius: var(--eftc-radius-md);
    background-color: var(--eftc-gray-50);
}

.eftc-source-embed__link {
    margin: var(--eftc-space-md) 0 0;
}

.eftc-source-embed__link a {
    font-weight: 700;
    color: var(--eftc-navy);
}

/* Plain-English walkthrough (featured body). */
.eftc-source-detail__walkthrough {
    margin-top: var(--eftc-space-2xl);
    padding-top: var(--eftc-space-xl);
    border-top: 2px solid var(--eftc-gray-200);
}

.eftc-source-detail__walkthrough h3 {
    font-size: 1.25rem;
    color: var(--eftc-navy);
    margin: var(--eftc-space-xl) 0 var(--eftc-space-sm);
}

.eftc-source-detail__walkthrough p {
    line-height: 1.7;
    margin: 0 0 var(--eftc-space-md);
}

.eftc-source-detail__walkthrough ul,
.eftc-source-detail__walkthrough ol {
    padding-left: var(--eftc-space-lg);
    line-height: 1.8;
    margin: 0 0 var(--eftc-space-md);
}

.eftc-source-detail__walkthrough li {
    margin-bottom: var(--eftc-space-xs);
}

/* Navy links on the refreshed Sources pages (beats the global gold rules).
   Index keys off .eftc-surface (0,3,1 > global 0,2,1; hover 0,4,1 > 0,3,1). */
.eftc-page.eftc-surface a:not(.eftc-btn) {
    color: var(--eftc-navy);
}
.eftc-page.eftc-surface a:not(.eftc-btn):hover,
.eftc-page.eftc-surface a:not(.eftc-btn):focus {
    color: var(--eftc-navy-hover);
}
/* Detail page stays on white, so it scopes off .eftc-source-detail instead. */
.eftc-page.eftc-source-detail a:not(.eftc-btn) {
    color: var(--eftc-navy);
}
.eftc-page.eftc-source-detail a:not(.eftc-btn):hover,
.eftc-page.eftc-source-detail a:not(.eftc-btn):focus {
    color: var(--eftc-navy-hover);
}