/*
    exemplarhba.com — design system.

    The tokens are section 4.5 of the approved plan, and are the same values the eligibility tool
    already ships (eligibility.css consumes them from here rather than redeclaring them).

    Type note: section 4.5 specifies self-hosted Sora and Inter. Until those files are licensed and
    subset, the stack below is a system fallback of similar proportion. Swapping them in is a
    @font-face block and one variable — nothing else in this file changes.
*/

:root {
    /* brand */
    --ehba-brand-900: #1b1e5c;
    --ehba-brand-700: #2e3192; /* the logo indigo */
    --ehba-brand-600: #495197; /* the colour the WordPress site already used */
    --ehba-brand-400: #6595bf;
    --ehba-brand-50:  #eef1fb;

    --ehba-accent-600: #0f7674;
    --ehba-accent-50:  #e6f4f3;

    /* ink and surface */
    --ehba-ink-900:  #1f232e;
    --ehba-ink-500:  #5b6273;
    --ehba-ink-200:  #d6dae8;
    --ehba-surface:  #ffffff;
    --ehba-surface-alt: #f7f8fc;

    /* semantic */
    --ehba-success: #157f3d;
    --ehba-warning: #b45309;
    --ehba-danger:  #b42318;

    /* geometry */
    --ehba-radius:    8px;
    --ehba-radius-lg: 12px;
    --ehba-gutter:    clamp(1.25rem, 0.5rem + 3vw, 4rem);
    --ehba-container: 1200px;

    --ehba-font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --ehba-font-display: 'Segoe UI', system-ui, -apple-system, sans-serif;

    /*
        Role tokens. Everything above is a fixed value - the brand colours are the logo's and do
        not move - and everything here is a job that a colour does, which is what the dark theme
        redefines. Rules should reach for these, not for a brand number, or they cannot follow the
        theme.
    */
    --ehba-heading:      var(--ehba-brand-700);
    --ehba-link:         var(--ehba-brand-700);
    --ehba-link-hover:   var(--ehba-brand-900);
    --ehba-primary:      var(--ehba-brand-700);
    --ehba-primary-hover: var(--ehba-brand-900);
    --ehba-accent:       var(--ehba-accent-600);
    --ehba-accent-hover: #0b5c5a;
    --ehba-on-primary:   #ffffff;

    /* Tinted panels behind semantic messages. */
    --ehba-danger-50:  #fdecea;
    --ehba-warning-50: #fff6e8;
    --ehba-success-50: #e7f4ec;
    --ehba-danger-ring: rgba(180, 35, 24, 0.12);
    --ehba-on-danger:  #ffffff;

    /* Driven from the palette so the rules that use them are written once, not once per theme. */
    --ehba-logo-on-light: block;
    --ehba-logo-on-dark:  none;
    --ehba-icon-sun:   none;
    --ehba-icon-moon:  block;

    color-scheme: light;
}

/*
    The dark theme.

    Written twice on purpose, and the two must stay in sync. The first block is for a visitor who
    has asked their system for dark and never touched the toggle - it must work with no JavaScript,
    so it cannot depend on an attribute a script sets. The second is for a visitor who chose dark
    explicitly, which has to win even on a system set to light. The :not() in the first is what
    lets an explicit choice of *light* beat a system set to dark.

    Only role tokens and surfaces move. The brand numbers stay exactly where they are.
*/
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ehba-ink-900: #e6e9f5;
        --ehba-ink-500: #a2aac2;
        --ehba-ink-200: #363c50;
        --ehba-surface: #14161e;
        --ehba-surface-alt: #1b1f2a;
        --ehba-brand-50: #1e2340;
        --ehba-accent-50: #10302f;

        --ehba-heading: #b7c1ff;
        --ehba-link: #9fb0ff;
        --ehba-link-hover: #d2daff;
        /* Lightened so the button edge clears 3:1 against the page, which #2e3192 does not. */
        --ehba-primary: #5560d4;
        --ehba-primary-hover: #6f79e6;
        --ehba-accent: #2f9b98;
        --ehba-accent-hover: #3fb3b0;

        --ehba-success: #5ac98c;
        --ehba-warning: #e0a74a;
        --ehba-danger: #ff9d92;
        --ehba-danger-50: #3a1c19;
        --ehba-warning-50: #382a13;
        --ehba-success-50: #16311f;
        --ehba-danger-ring: rgba(255, 157, 146, 0.18);
        --ehba-on-danger: #3a1c19;

    --ehba-logo-on-light: none;
    --ehba-logo-on-dark:  block;
    --ehba-icon-sun:   block;
    --ehba-icon-moon:  none;

        /* The client's own dark-background lockup, not a recolour of the light one. */
        --ehba-logo-on-light: none;
        --ehba-logo-on-dark:  block;
        --ehba-icon-sun:   block;
        --ehba-icon-moon:  none;

        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --ehba-ink-900: #e6e9f5;
    --ehba-ink-500: #a2aac2;
    --ehba-ink-200: #363c50;
    --ehba-surface: #14161e;
    --ehba-surface-alt: #1b1f2a;
    --ehba-brand-50: #1e2340;
    --ehba-accent-50: #10302f;

    --ehba-heading: #b7c1ff;
    --ehba-link: #9fb0ff;
    --ehba-link-hover: #d2daff;
    --ehba-primary: #5560d4;
    --ehba-primary-hover: #6f79e6;
    --ehba-accent: #2f9b98;
    --ehba-accent-hover: #3fb3b0;

    --ehba-success: #5ac98c;
    --ehba-warning: #e0a74a;
    --ehba-danger: #ff9d92;
    --ehba-danger-50: #3a1c19;
    --ehba-warning-50: #382a13;
    --ehba-success-50: #16311f;
    --ehba-danger-ring: rgba(255, 157, 146, 0.18);
    --ehba-on-danger: #3a1c19;

    color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--ehba-surface);
    color: var(--ehba-ink-900);
    font-family: var(--ehba-font-body);
    font-size: 17px;
    line-height: 1.6;
}

@media (max-width: 48rem) { body { font-size: 16px; } }

/*
    A short page - a 404, a thank-you - left the footer halfway up the window with bare surface
    below it. The body is a column at least a window tall and main takes up the slack, so the
    footer sits on the bottom edge. Screen only: paper has its own page box, and eligibility.css
    lays out html and body for print.
*/
@media screen {
    body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
    #main { flex: 1 0 auto; }
}

h1, h2, h3, h4 {
    font-family: var(--ehba-font-display);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
    color: var(--ehba-heading);
}

p { margin: 0; }
img { max-width: 100%; height: auto; }

a { color: var(--ehba-link); text-decoration: none; }
a:hover { color: var(--ehba-link-hover); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--ehba-primary); outline-offset: 2px; border-radius: 4px; }

/* Keyboard users land here first; it is the first thing in the tab order on every page. */
.ehba-skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--ehba-primary); color: var(--ehba-on-primary);
    padding: 12px 20px; border-radius: 0 0 var(--ehba-radius) 0; font-weight: 600;
}
.ehba-skip:focus { left: 0; text-decoration: none; }

.ehba-container { max-width: var(--ehba-container); margin: 0 auto; padding-inline: var(--ehba-gutter); }

.ehba-section { padding-block: clamp(1.75rem, 1.25rem + 2.25vw, 3rem); }
.ehba-section-alt { background: var(--ehba-surface-alt); }

.ehba-lede { color: var(--ehba-ink-500); font-size: 1.0625rem; }
.ehba-measure { max-width: 68ch; }
.ehba-eyebrow {
    font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ehba-accent);
}

/* ---------- buttons ---------- */

.ehba-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 2.75rem; padding-inline: 1.25rem;
    border: 1px solid transparent; border-radius: var(--ehba-radius);
    font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.ehba-btn:hover { text-decoration: none; }
.ehba-btn-lg { min-height: 3.25rem; padding-inline: 1.625rem; font-size: 1rem; }

.ehba-btn-primary { background: var(--ehba-primary); color: var(--ehba-on-primary); }
.ehba-btn-primary:hover { background: var(--ehba-primary-hover); color: var(--ehba-on-primary); }
.ehba-btn-accent { background: var(--ehba-accent); color: var(--ehba-on-primary); }
.ehba-btn-accent:hover { background: var(--ehba-accent-hover); color: var(--ehba-on-primary); }
.ehba-btn-ghost { background: var(--ehba-surface); color: var(--ehba-link); border-color: var(--ehba-ink-200); }
.ehba-btn-ghost:hover { border-color: var(--ehba-brand-400); color: var(--ehba-link-hover); }
/*
    The two dark-background variants had no :hover of their own, so the global
    a:hover { color: brand-900 } took over - navy text on a navy panel. "Become an advisor"
    went unreadable on hover for exactly that reason. Every variant now states its own
    hover colour rather than inheriting one.
*/
.ehba-btn-onDark { background: #fff; color: var(--ehba-brand-900); }
/*
    A literal, not --ehba-brand-50. The footer is navy in both themes, so this button is white with
    navy text in both - and brand-50 flips to a dark indigo in the dark theme, which would put navy
    text on a dark hover state and blank the button out.
*/
.ehba-btn-onDark:hover { background: #eef1fb; color: var(--ehba-brand-900); }
.ehba-btn-onDark-ghost { background: transparent; border-color: rgba(255,255,255,0.45); color: #fff; }
.ehba-btn-onDark-ghost:hover { background: rgba(255,255,255,0.14); border-color: #fff; color: #fff; }

/* ---------- cards ---------- */

.ehba-card {
    background: var(--ehba-surface);
    border: 1px solid var(--ehba-ink-200);
    border-radius: var(--ehba-radius-lg);
    padding: 1.5rem;
    display: flex; flex-direction: column; gap: 0.625rem;
}
.ehba-card h3 { font-size: 1.0625rem; }
.ehba-card p { font-size: 0.875rem; line-height: 1.55; color: var(--ehba-ink-500); }
a.ehba-card:hover { border-color: var(--ehba-brand-400); text-decoration: none; }

.ehba-grid { display: grid; gap: 1.25rem; }
.ehba-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ehba-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ehba-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 64rem) {
    .ehba-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ehba-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
    .ehba-grid-2, .ehba-grid-3, .ehba-grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* An external system with its own sign-in. Marked so nobody is surprised by a login screen. */
.ehba-external {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.75rem; font-weight: 600;
    background: var(--ehba-brand-50); color: var(--ehba-ink-500);
    border-radius: 999px; padding: 4px 12px;
}

.ehba-prose { display: flex; flex-direction: column; gap: 1.25rem; max-width: 68ch; }
.ehba-prose p { font-size: 1.0625rem; line-height: 1.75; }
.ehba-prose h2 { font-size: 1.5rem; margin-top: 1rem; }
.ehba-prose ul { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ehba-prose li { font-size: 1.0625rem; line-height: 1.7; color: var(--ehba-ink-500); }

.ehba-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 0.8125rem; color: var(--ehba-ink-500);
}
.ehba-crumbs a { color: var(--ehba-ink-500); }
.ehba-crumbs [aria-current] { color: var(--ehba-ink-900); }

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

/* ---------- header ---------- */

.ehba-header { border-bottom: 1px solid var(--ehba-ink-200); background: var(--ehba-surface); }
.ehba-header .ehba-container {
    min-height: 88px; display: flex; align-items: center;
    justify-content: space-between; gap: 1.5rem;
}
.ehba-logo img { width: 316px; max-width: 60vw; display: block; }

/* ---------- footer ---------- */

.ehba-footer { background: var(--ehba-brand-900); color: rgba(255,255,255,0.78); font-size: 0.875rem; }
/*
    :not(.ehba-btn) matters. Without it this rule outranks the button colours - it is one class
    more specific - and painted "Read the FAQ" white-on-white, an entirely blank button.
*/
.ehba-footer a:not(.ehba-btn) { color: rgba(255,255,255,0.78); }
.ehba-footer a:not(.ehba-btn):hover { color: #fff; }
.ehba-footer h2 { color: #fff; font-size: 1rem; }
/* The former help band, folded in: contact on the left, the three destinations on the right. */
.ehba-footer-top {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 1.25rem 3rem;
    padding-block: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}
.ehba-footer-contact { display: flex; flex-direction: column; gap: 0.375rem; }
.ehba-footer-contact h2 { font-size: 1.125rem; color: #fff; }
.ehba-footer-reach { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.9375rem; }
.ehba-footer-reach a { color: #fff; }
.ehba-footer-contact address {
    font-style: normal; line-height: 1.5;
    display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.ehba-footer .ehba-sep { opacity: 0.5; }
.ehba-footer-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.ehba-footer-legal {
    border-top: 1px solid rgba(255,255,255,0.18);
    padding-block: 0.875rem; display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: 0.5rem 1.25rem; font-size: 0.8125rem;
}
.ehba-footer-legal nav { display: flex; flex-wrap: wrap; gap: 1rem; }

@media (max-width: 48rem) {
    .ehba-footer-top { flex-direction: column; align-items: stretch; gap: 1.25rem; }
    /*
        Stacked, with the separators hidden. Laid out inline they were flex items in their own
        right, so a wrap could leave a middot stranded at the end of a line with nothing after it.
    */
    .ehba-footer-reach,
    .ehba-footer-contact address { flex-direction: column; gap: 0.125rem; }
    .ehba-footer .ehba-sep { display: none; }
    /*
        Buttons size to their content and pack left. Growing them to fill the row made three
        buttons wrap two-then-one, and the odd one out sat centred under the pair.
    */
    .ehba-footer-actions { gap: 0.5rem; }
}

@media print {
    .ehba-header, .ehba-footer, .ehba-skip { display: none !important; }

    /*
        Paper is white whatever the screen is. Forced rather than restated as a third copy of the
        palette: a visitor reading in dark mode who prints an eligibility record would otherwise
        send a near-black page to the printer.
    */
    :root { color-scheme: light; }
    body { background: #fff !important; color: #000 !important; }
    h1, h2, h3, h4, a, .ehba-lede, .ehba-hint { color: #000 !important; }
}

/* ---------- home ---------- */

.ehba-section-head {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 1rem; margin-bottom: 2rem;
}
.ehba-section-head h2 { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem); }

.ehba-tile {
    display: flex; flex-direction: column;
    background: var(--ehba-surface); border: 1px solid var(--ehba-ink-200);
    border-radius: var(--ehba-radius-lg); overflow: hidden; color: inherit;
}
.ehba-tile:hover { border-color: var(--ehba-brand-400); text-decoration: none; }
.ehba-tile-body { padding: 1.375rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ehba-tile-title { font-size: 1.1875rem; font-weight: 600; color: var(--ehba-heading); }
.ehba-tile-blurb { font-size: 0.875rem; line-height: 1.6; color: var(--ehba-ink-500); }

.ehba-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; align-items: center; }
@media (max-width: 64rem) { .ehba-split { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } }

.ehba-stat {
    background: var(--ehba-brand-50); border-radius: var(--ehba-radius-lg);
    padding: 1.625rem 1.25rem; display: flex; flex-direction: column; gap: 0.375rem;
}
.ehba-stat-value { font-size: 2.375rem; font-weight: 700; color: var(--ehba-heading); line-height: 1; }
.ehba-stat-label { font-size: 0.8125rem; line-height: 1.45; color: var(--ehba-ink-500); }

.ehba-banner {
    background: var(--ehba-brand-900); border-radius: var(--ehba-radius-lg);
    padding: clamp(2rem, 1.25rem + 3vw, 3.5rem);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; align-items: center;
}
.ehba-banner-copy { display: flex; flex-direction: column; gap: 1.125rem; }
.ehba-banner-copy p { color: rgba(255,255,255,0.82); line-height: 1.7; }
.ehba-banner-points {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem;
}
.ehba-banner-points li {
    border: 1px solid rgba(255,255,255,0.22); border-radius: var(--ehba-radius);
    padding: 1rem 1.125rem; color: #fff; font-size: 0.875rem;
}
@media (max-width: 64rem) { .ehba-banner { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

/* ---------- service detail ---------- */

.ehba-detail {
    display: grid; grid-template-columns: 15rem minmax(0, 1fr);
    gap: 4rem; align-items: start; padding-block: 1.5rem 1rem;
}
@media (max-width: 64rem) { .ehba-detail { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

.ehba-sibling-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 1.5rem; }
.ehba-sibling-head {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--ehba-ink-500); padding: 0 0.75rem 0.625rem;
}
.ehba-sibling-nav a {
    font-size: 0.875rem; padding: 0.5rem 0.75rem;
    border-radius: 6px; color: var(--ehba-ink-500);
}
.ehba-sibling-nav a:hover { background: var(--ehba-surface-alt); text-decoration: none; }
.ehba-sibling-nav a.is-current {
    background: var(--ehba-brand-50); color: var(--ehba-heading); font-weight: 600;
}
@media (max-width: 64rem) { .ehba-sibling-nav { position: static; } }

.ehba-points {
    list-style: none; margin: 0; padding: 0.25rem 0 0.25rem 1.5rem;
    border-left: 3px solid var(--ehba-accent-600);
    display: flex; flex-direction: column; gap: 0.75rem;
}

.ehba-inline-cta {
    background: var(--ehba-surface-alt); border-radius: var(--ehba-radius-lg);
    padding: 1.75rem; margin-top: 0.5rem;
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 1.5rem;
}

/* The one action an audience most likely came for. */
.ehba-card.is-primary { border-color: var(--ehba-accent-600); background: var(--ehba-accent-50); }
.ehba-card.is-primary h3 { color: var(--ehba-accent-600); }
.ehba-card.is-primary p { color: var(--ehba-ink-900); }

/* ---------- header ---------- */

.ehba-header { border-bottom: 1px solid var(--ehba-ink-200); background: var(--ehba-surface); }
.ehba-header .ehba-container {
    min-height: 88px; display: flex; align-items: center;
    justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.ehba-logo img { width: 316px; max-width: 62vw; display: block; }
.ehba-header-actions { display: flex; gap: 0.75rem; align-items: center; }
.ehba-logo .ehba-logo-light { display: var(--ehba-logo-on-light); }
.ehba-logo .ehba-logo-dark  { display: var(--ehba-logo-on-dark); }

/*
    Hidden until theme.js unhides it. A control that cannot work without JavaScript should not be
    offered - and it is not needed for dark mode itself, which follows prefers-color-scheme on its
    own. This button only exists to override that.
*/
.ehba-theme[hidden] { display: none; }
.ehba-theme {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; flex: none;
    border: 1px solid var(--ehba-ink-200); border-radius: var(--ehba-radius);
    background: var(--ehba-surface); color: var(--ehba-ink-500);
    cursor: pointer; padding: 0;
}
.ehba-theme:hover { border-color: var(--ehba-primary); color: var(--ehba-primary); }
.ehba-theme .ehba-icon-sun  { display: var(--ehba-icon-sun); }
.ehba-theme .ehba-icon-moon { display: var(--ehba-icon-moon); }

@media (max-width: 30rem) {
    .ehba-header .ehba-container { padding-block: 1rem; }
    .ehba-header-actions { width: 100%; }
    .ehba-header-actions .ehba-btn { flex: 1 1 0; padding-inline: 0.75rem; }
}

/* ---------- hero, without an image ---------- */

/* Generous, because there is nothing beside it to fill the space. */
.ehba-hero-plain { padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem) clamp(2.25rem, 1.5rem + 2vw, 3.5rem); }
.ehba-hero-plain .ehba-container {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 2rem; max-width: 56rem;
}
.ehba-hero-plain .ehba-eyebrow { margin-bottom: -0.5rem; }
.ehba-hero-plain h1 {
    font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
    max-width: 20ch;
}
.ehba-hero-sub {
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    line-height: 1.7; color: var(--ehba-ink-500); max-width: 56ch;
    text-wrap: pretty;
}
.ehba-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* ---------- audience tiles, without photographs ---------- */

.ehba-tile {
    display: flex; flex-direction: column;
    background: var(--ehba-surface); border: 1px solid var(--ehba-ink-200);
    border-radius: var(--ehba-radius-lg); overflow: hidden; color: inherit;
}
.ehba-tile-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ehba-tile-body {
    padding: 1.5rem; display: flex; flex-direction: column;
    gap: 0.625rem; flex-grow: 1;
}
.ehba-tile:hover { border-color: var(--ehba-brand-400); text-decoration: none; }
.ehba-tile-title { font-size: 1.25rem; font-weight: 600; color: var(--ehba-heading); }
.ehba-tile-blurb { font-size: 0.875rem; line-height: 1.6; color: var(--ehba-ink-500); flex-grow: 1; }
.ehba-tile-more {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.875rem; font-weight: 600; color: var(--ehba-accent-600);
    margin-top: 0.25rem;
}

.ehba-page-head {
    padding-block: 1.5rem 2.5rem;
    display: flex; flex-direction: column; gap: 0.875rem;
}
.ehba-page-head h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.875rem); }
/*
    Half the usual gap when a block that carries its own separation follows - the FAQ's bordered
    question boxes, the contact page's two-column grid with its own heading, or the eligibility
    step indicator with its own rule beneath it. In each the standard gap under the standfirst
    opened a hole between the introduction and the first thing it introduces.

    The number is small because it is not the whole gap: the standfirst's own line box and the
    column gap above it contribute 32px on their own, so 4px of padding is what brings the measured
    72px down to 36px. Setting this to "half of 2.5rem" would only have reached 52px.
*/
.ehba-page-head:has(+ .ehba-faq),
.ehba-page-head:has(+ .ehba-contact),
.ehba-page-head:has(+ .ehba-steps) { padding-bottom: 0.25rem; }

/*
    The contact standfirst is one sentence and reads as one line. PageShell gives every standfirst
    the 68ch measure that keeps body copy readable, which caps it at 660px when the sentence needs
    696 - so it broke across two lines with most of the row empty. Widened just enough for it, and
    only here; it still wraps below about 1024px, where there is no room either way.
*/
.ehba-page-head:has(+ .ehba-contact) .ehba-lede { max-width: 44rem; }

/* ---------- content pages ---------- */

.ehba-plainlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ehba-plainlist li {
    font-size: 0.9375rem; line-height: 1.55; color: var(--ehba-ink-500);
    padding-left: 1.125rem; position: relative;
}
.ehba-plainlist li::before {
    content: ''; position: absolute; left: 0; top: 0.6em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--ehba-accent-600);
}

.ehba-steps-list { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.625rem; }
.ehba-steps-list li { font-size: 1.0625rem; line-height: 1.6; }

.ehba-callout {
    background: var(--ehba-brand-50); border-radius: var(--ehba-radius-lg);
    padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}
.ehba-callout h2 { font-size: 1.375rem; margin-bottom: 1rem; }

/* ---------- external hand-off ---------- */

.ehba-handoff {
    border: 1px solid var(--ehba-ink-200); border-radius: var(--ehba-radius-lg);
    padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 2rem;
}
.ehba-handoff-body { display: flex; flex-direction: column; gap: 0.75rem; flex: 1 1 22rem; }
.ehba-handoff-body h2 { font-size: 1.375rem; }
.ehba-handoff-body > p { color: var(--ehba-ink-500); line-height: 1.65; }
.ehba-handoff-ready { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.25rem; }
.ehba-handoff-ready > span {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--ehba-ink-500);
}
.ehba-handoff-ready ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.ehba-handoff-ready li {
    font-size: 0.9375rem; line-height: 1.5; color: var(--ehba-ink-900);
    padding-left: 1.125rem; position: relative;
}
.ehba-handoff-ready li::before {
    content: ''; position: absolute; left: 0; top: 0.55em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--ehba-accent-600);
}
.ehba-handoff-action { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; }

/* ---------- FAQ ---------- */

.ehba-faq { display: flex; flex-direction: column; gap: 0.75rem; max-width: 60rem; }
.ehba-faq-item { border: 1px solid var(--ehba-ink-200); border-radius: var(--ehba-radius-lg); background: var(--ehba-surface); }
.ehba-faq-item summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: 1.125rem 1.375rem; font-weight: 600; font-size: 1.0625rem; color: var(--ehba-heading);
}
.ehba-faq-item summary::-webkit-details-marker { display: none; }
.ehba-faq-item summary:hover { background: var(--ehba-brand-50); border-radius: var(--ehba-radius-lg); }
.ehba-faq-item summary svg { flex-shrink: 0; transition: transform 140ms ease; color: var(--ehba-accent-600); }
.ehba-faq-item[open] summary svg { transform: rotate(45deg); }
.ehba-faq-item[open] summary { border-radius: var(--ehba-radius-lg) var(--ehba-radius-lg) 0 0; }
.ehba-faq-answer { padding: 0 1.375rem 1.375rem; display: flex; flex-direction: column; gap: 0.875rem; }
.ehba-faq-answer p,
.ehba-faq-answer li { color: var(--ehba-ink-500); line-height: 1.7; }
.ehba-faq-answer ul { padding-left: 1.25rem; list-style: disc; display: flex; flex-direction: column; gap: 0.375rem; }
/* The formulary address is one long unbroken word; let it wrap on a phone. */
.ehba-faq-answer a { overflow-wrap: anywhere; }
/* The closing prompt, set off from the last question by a rule so it does not read as one. */
.ehba-faq-more {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    max-width: 60rem; margin-top: 2.25rem;
    padding-top: 1.75rem; border-top: 1px solid var(--ehba-ink-200);
}
.ehba-faq-more p { color: var(--ehba-ink-500); }

/* ---------- contact form ---------- */

/* Honeypot: off-screen rather than display:none, which some bots skip. Never focusable. */
.ehba-trap {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}

.ehba-alert-ok { background: var(--ehba-accent-50); border-color: var(--ehba-accent); }
.ehba-alert-ok p:first-child { color: var(--ehba-accent); }

.ehba-field textarea {
    padding: 0.75rem; border: 1px solid var(--ehba-ink-200);
    border-radius: var(--ehba-radius); font: inherit; font-size: 1rem;
    background: var(--ehba-surface); color: inherit; resize: vertical; min-height: 9rem;
}
.ehba-field textarea:focus-visible {
    outline: 2px solid var(--ehba-brand-600); outline-offset: 1px;
    border-color: var(--ehba-primary);
}

.ehba-contact { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3.5rem; align-items: start; }
.ehba-contact h2 { font-size: 1.375rem; margin-bottom: 1.25rem; }
.ehba-contact-aside {
    background: var(--ehba-surface-alt); border-radius: var(--ehba-radius-lg);
    padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem;
}
.ehba-contact-detail { display: flex; flex-direction: column; gap: 0.25rem; }
.ehba-contact-detail > span:first-child {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--ehba-ink-500);
}
.ehba-contact-detail p { font-size: 0.9375rem; line-height: 1.6; color: var(--ehba-ink-500); }

@media (max-width: 64rem) { .ehba-contact { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } }