.hp-content {
    --hp-ink: #12233c;
    --hp-accent: #f28c28;
    --hp-surface: #f4f7fa;
    width: min(100% - 2rem, 72rem);
    margin: 0 auto;
    padding-block: clamp(1.25rem, 4vw, 3rem);
    color: var(--hp-ink);
    overflow-wrap: anywhere;
}
.hp-content .hp-hero {
    padding: clamp(1rem, 4vw, 2rem);
    border-block-start: .25rem solid var(--hp-accent);
    background: var(--hp-surface);
}
.hp-content .hp-hero .page-heading { text-align: start; margin: 0; }
.hp-content .hp-copy { max-width: 72ch; margin-block: 1.5rem; }
.hp-content .hp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;
}
.hp-content .hp-card {
    min-width: 0;
    padding: 1rem;
    border: 1px solid #ccd6e1;
    border-radius: .375rem;
}
.hp-content .hp-cta { padding: 1rem; background: var(--hp-surface); }
.hp-content a:not(.button) { color: #193a65; text-decoration: underline; }
.hp-content :focus-visible { outline: 3px solid #193a65; outline-offset: 3px; }
.hp-content input { max-width: 100%; }
.hp-content .button { max-width: 100%; white-space: normal; }
.hp-content .hp-primary { background: var(--hp-accent); color: var(--hp-ink); border-color: var(--hp-ink); }

/* Shared cards and assistance links for the existing approved page-body markup. */
.hp-content .hp-copy ul:has(> li > a) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: .75rem;
    margin-inline: 0;
    padding: 0;
    list-style: none;
}
.hp-content .hp-copy li > a {
    display: block;
    padding: .75rem;
    border: 1px solid #ccd6e1;
    border-radius: .375rem;
}
.hp-content .hp-copy p:has(> a:only-child) > a {
    display: inline-block;
    padding: .625rem .875rem;
    border-inline-start: .25rem solid var(--hp-accent);
    background: var(--hp-surface);
}