/**
 * Medios de Pago — ATM
 *
 * Register: product. Design serves the task ("pagar mi impuesto"), so the visual
 * system stays restrained: one neutral content surface, one alternate surface,
 * and the ATM brand reserved for the hero, headings, accents and states.
 *
 * HIERARCHY
 * The three channels are no longer peers. Online is the lead: white surface,
 * open spacing, full-size cards, first thing after the hero. Presential and cash
 * share one demoted section on the alternate surface with compact cards. The
 * weight difference comes from surface, density and card size — not from
 * shouting with type scale, which would break the heading semantics.
 *
 * SPECIFICITY NOTE
 * Divi injects aggressive styles for headings, paragraphs and lists inside
 * #main-content. Instead of blanket !important, every rule here is scoped under
 * `#main-content .mp-page`, which outranks Divi's selectors on its own.
 * !important survives only in the RESET block below, where Divi sets the same
 * property with equal specificity. Do not add it elsewhere.
 */

/* ========================================================================
   TOKENS
   ======================================================================== */
.mp-page {
    /* Brand — ATM. Kept in hex to match the rest of the theme. */
    --mp-brand-deep: #612247;
    --mp-brand: #B6264F;
    --mp-brand-violet: #632789;
    --mp-brand-crimson: #AD0038;

    /* Ink — all verified ≥4.5:1 on both surfaces */
    --mp-ink: #1F2124;
    --mp-ink-soft: #4A4D52;
    --mp-ink-muted: #6B6F76;

    /* Surfaces */
    --mp-surface: #FFFFFF;
    --mp-surface-alt: #F7F7F9;
    --mp-line: #E3E4E8;
    --mp-line-strong: #C9CBD1;

    /* Accreditation tiers — tinted background + same-hue dark text.
       Contrast measured against their own background:
       now 6.94:1 · soon 8.18:1 · later 6.80:1 · gated 6.66:1 */
    --mp-now-bg: #E7F4E9;
    --mp-now-ink: #1B5E20;
    --mp-soon-bg: #E8F0FB;
    --mp-soon-ink: #14448C;
    --mp-later-bg: #FDF3E3;
    --mp-later-ink: #7A4A06;
    --mp-gated-bg: #FDECE8;
    --mp-gated-ink: #9C2A10;

    /* Spacing — 4pt scale */
    --mp-space-2xs: 0.25rem;
    --mp-space-xs: 0.5rem;
    --mp-space-sm: 0.75rem;
    --mp-space-md: 1rem;
    --mp-space-lg: 1.5rem;
    --mp-space-xl: 2rem;
    --mp-space-2xl: 3rem;
    --mp-space-3xl: 4rem;

    /* Type — fixed rem scale, ratio ≈1.22 */
    --mp-text-xs: 0.8125rem;
    --mp-text-sm: 0.9375rem;
    --mp-text-base: 1rem;
    --mp-text-lg: 1.125rem;
    --mp-text-xl: 1.375rem;
    --mp-text-2xl: 1.75rem;
    --mp-text-3xl: 3rem;

    --mp-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --mp-radius: 12px;
    --mp-radius-sm: 8px;
    --mp-radius-pill: 999px;

    /* Clears the sticky Divi header when jumping to a section */
    --mp-scroll-offset: 110px;

    /* Motion — product register: state, not choreography */
    --mp-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --mp-duration: 180ms;
}

/* ========================================================================
   RESET — the only place !important is allowed (see header note)
   ======================================================================== */
#main-content .mp-page {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100%;
    font-family: var(--mp-font);
    color: var(--mp-ink);
    font-kerning: normal;
}

#main-content .mp-page * {
    box-sizing: border-box;
}

#main-content .mp-page h1,
#main-content .mp-page h2,
#main-content .mp-page h3,
#main-content .mp-page h4,
#main-content .mp-page p,
#main-content .mp-page ul,
#main-content .mp-page ol {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--mp-font) !important;
}

#main-content .mp-page ul {
    list-style: none !important;
}

#main-content .mp-page li::before {
    content: none !important;
}

/* ========================================================================
   HERO — states the question the page answers, not an action it cannot offer
   ======================================================================== */
#main-content .mp-page .mp-hero {
    background: linear-gradient(90deg, var(--mp-brand-crimson) 0%, var(--mp-brand-violet) 80%, #763FA4 100%);
    padding: var(--mp-space-3xl) var(--mp-space-lg);
    text-align: center;
}

#main-content .mp-page .mp-hero__inner {
    max-width: 46rem;
    margin: 0 auto;
}

#main-content .mp-page .mp-hero__title {
    font-size: var(--mp-text-3xl);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    text-wrap: balance;
}

#main-content .mp-page .mp-hero__subtitle {
    margin-top: var(--mp-space-md) !important;
    font-size: var(--mp-text-lg);
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    text-wrap: pretty;
}

/* Sets the expectation that payment happens elsewhere, and offers the branch
   for people who cannot pay online. Deliberately quiet: both are context, not
   the answer the page exists to give. */
#main-content .mp-page .mp-hero__aside {
    margin-top: var(--mp-space-lg) !important;
    font-size: var(--mp-text-sm);
    color: rgba(255, 255, 255, 0.85);
}

#main-content .mp-page .mp-hero__aside a {
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ========================================================================
   SECTIONS
   ======================================================================== */
#main-content .mp-page .mp-section {
    padding: var(--mp-space-3xl) var(--mp-space-lg);
    background: var(--mp-surface);
    scroll-margin-top: var(--mp-scroll-offset);
}

/* The lead section carries the online channel: same surface as the page but
   more air above and below than the demoted ones. */
#main-content .mp-page .mp-section--lead {
    padding-bottom: var(--mp-space-3xl);
}

/* The legend sits between the hero and the first table it explains. It is a
   key, not a chapter, so it gets just enough room to read as its own block
   without competing with the sections that carry actual content. */
#main-content .mp-page .mp-section--legend {
    padding-block: var(--mp-space-2xl) 0;
}

#main-content .mp-page .mp-section--alt {
    background: var(--mp-surface-alt);
    border-block: 1px solid var(--mp-line);
}

#main-content .mp-page .mp-section__inner {
    max-width: 76rem;
    margin: 0 auto;
}

#main-content .mp-page .mp-section__inner--narrow {
    max-width: 56rem;
}

#main-content .mp-page .mp-section__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mp-space-sm);
    font-size: var(--mp-text-2xl);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--mp-brand-deep);
    text-wrap: balance;
}

#main-content .mp-page .mp-section__title i {
    color: var(--mp-brand);
    font-size: 0.9em;
}

/* Titles with no leading icon: normal text flow so a long heading wraps
   properly and a trailing badge stays on the baseline. */
#main-content .mp-page .mp-section__title--plain {
    display: block;
}

#main-content .mp-page .mp-section__title--plain .mp-badge {
    vertical-align: middle;
    margin-left: var(--mp-space-xs);
}

/* Short paragraph under a section title. Sets expectations before the grid so
   the reader does not have to infer the rule from the cards. */
#main-content .mp-page .mp-section__lede {
    max-width: 60ch;
    margin-top: var(--mp-space-sm) !important;
    margin-bottom: var(--mp-space-xl) !important;
    font-size: var(--mp-text-base);
    line-height: 1.65;
    color: var(--mp-ink-soft);
    text-wrap: pretty;
}

/* ========================================================================
   SUBSECTION — a channel inside the demoted section, or a procedure
   ======================================================================== */
#main-content .mp-page .mp-subsection {
    scroll-margin-top: var(--mp-scroll-offset);
}

#main-content .mp-page .mp-subsection + .mp-subsection {
    margin-top: var(--mp-space-2xl);
    padding-top: var(--mp-space-2xl);
    border-top: 1px solid var(--mp-line-strong);
}

#main-content .mp-page .mp-subsection__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mp-space-sm);
    font-size: var(--mp-text-xl);
    font-weight: 600;
    line-height: 1.25;
    color: var(--mp-brand-deep);
    margin-bottom: var(--mp-space-md) !important;
    text-wrap: balance;
}

#main-content .mp-page .mp-subsection__title i {
    color: var(--mp-brand);
    font-size: 0.9em;
}

#main-content .mp-page .mp-subsection__text {
    max-width: 68ch;
    margin-bottom: var(--mp-space-lg) !important;
    font-size: var(--mp-text-sm);
    line-height: 1.65;
    color: var(--mp-ink-soft);
    text-wrap: pretty;
}

/* ========================================================================
   GRID
   ======================================================================== */
/* Items stretch by default so every card in a row shares the same height.
   Do not add `align-items: start` here — that is what made them ragged. */
#main-content .mp-page .mp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--mp-space-lg);
}

#main-content .mp-page .mp-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Lead grid: wider minimum so the online cards read as the primary object on
   the page. Below the full container width this wraps to three columns and
   leaves the fourth provider alone on a second row. */
#main-content .mp-page .mp-grid--lead {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--mp-space-xl);
}

/* The four providers are a comparison set, so they belong on one row: a 3 + 1
   wrap reads as "three options, and one other". auto-fit cannot deliver that
   here — the container tops out at 76rem (1216px) and four 300px tracks plus
   three 2rem gaps need 1296px — so once the container reaches full width the
   columns are set explicitly and the gap tightens to buy back the difference.
   1264px is 1216px of container plus the section's 2 x 1.5rem padding: the
   exact viewport at which the inner element stops growing. */
@media (min-width: 1264px) {
    #main-content .mp-page .mp-grid--lead {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--mp-space-lg);
    }
}

#main-content .mp-page .mp-grid--spaced {
    margin-top: var(--mp-space-xl);
}

/* ========================================================================
   PROVIDER CARD
   ======================================================================== */
#main-content .mp-page .mp-provider {
    display: flex;
    flex-direction: column;
    background: var(--mp-surface);
    border: 1px solid var(--mp-line-strong);
    border-radius: var(--mp-radius);
    overflow: hidden;
}

#main-content .mp-page .mp-provider__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mp-space-sm);
    padding: var(--mp-space-md) var(--mp-space-lg);
    border-bottom: 1px solid var(--mp-line);
    background: var(--mp-surface-alt);
}

/* Lead cards get a taller logo row and a larger name: the size difference is
   what tells the reader these four matter more than the ones below. */
#main-content .mp-page .mp-grid--lead .mp-provider__header {
    padding: var(--mp-space-lg);
}

#main-content .mp-page .mp-provider__logo {
    flex-shrink: 0;
    height: 32px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
    object-position: left center;
}

#main-content .mp-page .mp-grid--lead .mp-provider__logo {
    height: 40px;
    max-width: 120px;
}

#main-content .mp-page .mp-provider__logo--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    max-width: none;
    border-radius: var(--mp-radius-sm);
    background: var(--mp-brand-deep);
    color: #FFFFFF;
    font-size: var(--mp-text-sm);
}

#main-content .mp-page .mp-grid--lead .mp-provider__logo--icon {
    width: 40px;
    height: 40px;
    font-size: var(--mp-text-base);
}

#main-content .mp-page .mp-provider__name {
    flex: 1 1 8rem;
    font-size: var(--mp-text-base);
    font-weight: 600;
    line-height: 1.35;
    color: var(--mp-ink);
    text-wrap: balance;
}

#main-content .mp-page .mp-grid--lead .mp-provider__name {
    font-size: var(--mp-text-lg);
}

/* Compact card: the demoted channels. Tighter padding and a smaller name so a
   row of them reads as secondary against the lead grid, without dropping below
   the readable floor — these are the cards older users need most. */
#main-content .mp-page .mp-provider--compact .mp-provider__header {
    padding: var(--mp-space-sm) var(--mp-space-md);
}

#main-content .mp-page .mp-provider--compact .mp-provider__name {
    font-size: var(--mp-text-sm);
}

#main-content .mp-page .mp-provider--compact .mp-provider__text,
#main-content .mp-page .mp-provider--compact .mp-bullets {
    padding: var(--mp-space-sm) var(--mp-space-md) var(--mp-space-md) !important;
}

#main-content .mp-page .mp-provider--compact .mp-provider__footer {
    padding: var(--mp-space-xs) var(--mp-space-md);
}

/* Holds everything below the header so the card has exactly two rows and can
   hand them to the parent grid via subgrid (see the @supports block below). */
#main-content .mp-page .mp-provider__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Free-text card body, used by the compact cards that have no method list. */
#main-content .mp-page .mp-provider__text {
    padding: var(--mp-space-md) var(--mp-space-lg) var(--mp-space-lg) !important;
    font-size: var(--mp-text-sm);
    line-height: 1.6;
    color: var(--mp-ink-soft);
    text-wrap: pretty;
}

#main-content .mp-page .mp-provider__text strong {
    color: var(--mp-ink);
    font-weight: 600;
}

#main-content .mp-page .mp-provider__footer {
    display: flex;
    align-items: flex-start;
    gap: var(--mp-space-xs);
    margin-top: auto;
    padding: var(--mp-space-sm) var(--mp-space-lg);
    border-top: 1px solid var(--mp-line);
    background: var(--mp-surface-alt);
    font-size: var(--mp-text-sm);
    color: var(--mp-ink-soft);
    line-height: 1.5;
}

#main-content .mp-page .mp-provider__footer i {
    color: var(--mp-brand);
    margin-top: 0.2em;
    flex-shrink: 0;
}

#main-content .mp-page .mp-provider__footer a {
    color: var(--mp-brand-deep);
    text-decoration: underline;
    overflow-wrap: anywhere;
}

/* Subgrid: each card spans two rows of the parent grid, so every header in a
   row resolves to the same height and the method lists start on the same line.
   Without it the cards are still equal height (stretch) — only the internal
   alignment degrades. */
@supports (grid-template-rows: subgrid) {
    #main-content .mp-page .mp-provider {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
        /* A subgrid inherits the parent gutters, which would open a gap between
           the header and the body. Only the tracks the card spans are reset;
           the gap between card rows still comes from .mp-grid. */
        row-gap: 0;
    }
}

/* ========================================================================
   METHOD LIST — one model for accreditation time across every section
   ======================================================================== */
#main-content .mp-page .mp-methods {
    padding: var(--mp-space-xs) var(--mp-space-lg) !important;
}

#main-content .mp-page .mp-methods li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--mp-space-sm);
    padding: var(--mp-space-sm) 0;
    border-bottom: 1px solid var(--mp-line);
}

#main-content .mp-page .mp-methods li:last-child {
    border-bottom: none;
}

#main-content .mp-page .mp-methods__name {
    flex: 1 1 auto;
    font-size: var(--mp-text-sm);
    line-height: 1.55;
    color: var(--mp-ink-soft);
}

#main-content .mp-page .mp-methods__name strong {
    color: var(--mp-ink);
    font-weight: 600;
}

/* At the four-column width each lead card holds about 238px of content, and
   the badge does not shrink — side by side, the longest method names would
   squeeze into three lines. Stacking hands the name the full width, the same
   trade the narrow breakpoint already makes below 560px. Scoped to the lead
   grid: the compact cards in the other sections keep their inline row.
   Kept next to the rule it overrides so the two stay in sync. */
@media (min-width: 1264px) {
    #main-content .mp-page .mp-grid--lead .mp-methods li {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--mp-space-xs);
    }
}

/* A procedure row is a step you complete once, not a channel with its own
   accreditation time, so it carries a link where the other rows carry a badge.
   The tint is what separates the two kinds of row: a border would land on top
   of the border-bottom the previous row already draws and read as a double
   rule. Negative margins let it bleed to the card edges against the horizontal
   padding .mp-methods sets, and the padding puts the content back where the
   other rows start.
   The selector has to name the li. Written as .mp-page .mp-methods__item--guide
   it carries the same two classes as the row rule above but one type selector
   fewer, so that rule wins and the padding never lands — only the negative
   margin does, and the row hangs a full --mp-space-lg to the left of every
   other row in the card. Measured on the page: the padding computed to 0px.
   Qualifying the class with li outranks the row rule on its own; no !important
   is involved on either side. */
#main-content .mp-page .mp-methods li.mp-methods__item--guide {
    background: var(--mp-surface-alt);
    margin-left: calc(-1 * var(--mp-space-lg));
    margin-right: calc(-1 * var(--mp-space-lg));
    padding-left: var(--mp-space-lg);
    padding-right: var(--mp-space-lg);
}

/* A procedure row whose accreditation time is confirmed carries both a badge
   and its instructions link. Wrapping them keeps the row at the two children
   the space-between layout expects, so the name still takes the free space
   instead of the gap opening up between badge and link. */
#main-content .mp-page .mp-methods__meta {
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--mp-space-xs);
}

/* The row lays name and badge out edge to edge, so a procedure row has to put
   its badge on that same edge or the badges stop forming a column. Stacking the
   link under it keeps that alignment and lines the links up with each other.
   Both breakpoints below turn the row into a stack, and there the edge the rest
   of the content starts from is the left one.
   Kept next to the rule they override so the three stay in sync. */
@media (min-width: 1264px) {
    #main-content .mp-page .mp-grid--lead .mp-methods__meta {
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    #main-content .mp-page .mp-methods__meta {
        align-items: flex-start;
    }
}

#main-content .mp-page .mp-methods__link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--mp-space-2xs);
    font-size: var(--mp-text-xs);
    font-weight: 600;
    line-height: 1.4;
    color: var(--mp-brand);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s var(--mp-ease), border-color 0.2s var(--mp-ease);
}

#main-content .mp-page .mp-methods__link:hover,
#main-content .mp-page .mp-methods__link:focus-visible {
    color: var(--mp-brand-deep);
    border-bottom-color: currentColor;
}

#main-content .mp-page .mp-methods__link i {
    font-size: 0.75em;
    transition: transform 0.2s var(--mp-ease);
}

#main-content .mp-page .mp-methods__link:hover i {
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    #main-content .mp-page .mp-methods__link,
    #main-content .mp-page .mp-methods__link i {
        transition: none;
    }

    #main-content .mp-page .mp-methods__link:hover i {
        transform: none;
    }
}

/* ========================================================================
   BADGES
   ======================================================================== */
#main-content .mp-page .mp-badge {
    flex-shrink: 0;
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: var(--mp-radius-pill);
    border: 1px solid currentColor;
    font-size: var(--mp-text-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#main-content .mp-page .mp-badge--now {
    background: var(--mp-now-bg);
    color: var(--mp-now-ink);
}

#main-content .mp-page .mp-badge--soon {
    background: var(--mp-soon-bg);
    color: var(--mp-soon-ink);
}

#main-content .mp-page .mp-badge--later {
    background: var(--mp-later-bg);
    color: var(--mp-later-ink);
}

#main-content .mp-page .mp-badge--gated {
    background: var(--mp-gated-bg);
    color: var(--mp-gated-ink);
}

/* ========================================================================
   LEGEND — the badge vocabulary, explained once for the whole page
   ======================================================================== */
#main-content .mp-page .mp-legend {
    padding: var(--mp-space-lg);
    border: 1px solid var(--mp-line-strong);
    border-radius: var(--mp-radius);
    background: var(--mp-surface-alt);
}

#main-content .mp-page .mp-legend__title {
    font-size: var(--mp-text-base);
    font-weight: 600;
    color: var(--mp-ink);
    margin-bottom: var(--mp-space-md) !important;
}

/* Two columns, not four. At four the cells land near 280px and every
   definition wraps to three or four lines, which is what made a four-item key
   read as a wall. Past 480px each definition sits on a single line, so the key
   is four short statements instead of four ragged blocks. Below that the grid
   drops to one column on its own. */
#main-content .mp-page .mp-legend__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    gap: var(--mp-space-sm) var(--mp-space-2xl);
}

#main-content .mp-page .mp-legend__list li {
    display: flex;
    align-items: baseline;
    gap: var(--mp-space-sm);
    font-size: var(--mp-text-sm);
    line-height: 1.55;
    color: var(--mp-ink-soft);
}

/* ========================================================================
   BULLET / CHECK LISTS
   ======================================================================== */
#main-content .mp-page .mp-bullets {
    padding: var(--mp-space-md) var(--mp-space-lg) var(--mp-space-lg) !important;
}

#main-content .mp-page .mp-bullets li,
#main-content .mp-page .mp-checklist li {
    position: relative;
    padding: var(--mp-space-2xs) 0 var(--mp-space-2xs) var(--mp-space-lg);
    font-size: var(--mp-text-sm);
    line-height: 1.6;
    color: var(--mp-ink-soft);
}

#main-content .mp-page .mp-bullets li::after {
    content: '';
    position: absolute;
    left: var(--mp-space-xs);
    top: 0.75em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mp-brand);
}

#main-content .mp-page .mp-checklist li::after {
    content: '\f00c'; /* fa-check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.25em;
    font-size: 0.8em;
    color: var(--mp-now-ink);
}

/* ========================================================================
   PROSE / PANELS
   ======================================================================== */
#main-content .mp-page .mp-prose {
    max-width: 68ch;
    font-size: var(--mp-text-base);
    line-height: 1.7;
    color: var(--mp-ink-soft);
    margin-bottom: var(--mp-space-lg) !important;
    text-wrap: pretty;
}

#main-content .mp-page .mp-prose strong {
    color: var(--mp-ink);
    font-weight: 600;
}

#main-content .mp-page .mp-prose a,
#main-content .mp-page .mp-panel a {
    color: var(--mp-brand-deep);
    text-decoration: underline;
    overflow-wrap: anywhere;
}

#main-content .mp-page .mp-panel {
    background: var(--mp-surface);
    border: 1px solid var(--mp-line-strong);
    border-radius: var(--mp-radius);
    padding: var(--mp-space-lg);
    margin-bottom: var(--mp-space-lg);
}

#main-content .mp-page .mp-grid .mp-panel {
    margin-bottom: 0;
}

/* A panel that follows a grid closes a group, so it needs the section-level
   separation instead of sitting flush against the cards above it. */
#main-content .mp-page .mp-grid + .mp-panel {
    margin-top: var(--mp-space-xl);
}

#main-content .mp-page .mp-panel__title {
    display: flex;
    align-items: center;
    gap: var(--mp-space-xs);
    font-size: var(--mp-text-lg);
    font-weight: 600;
    line-height: 1.3;
    color: var(--mp-brand-deep);
    margin-bottom: var(--mp-space-md) !important;
    padding-bottom: var(--mp-space-sm) !important;
    border-bottom: 1px solid var(--mp-line);
}

#main-content .mp-page .mp-panel__title i {
    color: var(--mp-brand);
    font-size: 0.9em;
}

#main-content .mp-page .mp-panel__text {
    font-size: var(--mp-text-sm);
    line-height: 1.7;
    color: var(--mp-ink-soft);
    text-wrap: pretty;
}

#main-content .mp-page .mp-panel__list {
    padding-left: var(--mp-space-lg) !important;
    list-style: decimal !important;
}

#main-content .mp-page .mp-panel__list li {
    font-size: var(--mp-text-sm);
    line-height: 1.7;
    color: var(--mp-ink-soft);
    padding: var(--mp-space-2xs) 0;
}

#main-content .mp-page .mp-panel--contact {
    display: flex;
    align-items: center;
    gap: var(--mp-space-md);
}

#main-content .mp-page .mp-panel--contact i {
    font-size: var(--mp-text-xl);
    color: var(--mp-brand);
    flex-shrink: 0;
}

#main-content .mp-page .mp-panel--contact p {
    font-size: var(--mp-text-sm);
    color: var(--mp-ink-soft);
    margin-bottom: var(--mp-space-2xs) !important;
}

#main-content .mp-page .mp-panel--contact a {
    font-size: var(--mp-text-base);
    font-weight: 600;
}

/* ========================================================================
   NOTES
   ======================================================================== */
#main-content .mp-page .mp-note {
    display: flex;
    align-items: flex-start;
    gap: var(--mp-space-sm);
    margin-top: var(--mp-space-xl) !important;
    padding: var(--mp-space-md) var(--mp-space-lg) !important;
    border: 1px solid var(--mp-line-strong);
    border-radius: var(--mp-radius-sm);
    background: var(--mp-surface);
    font-size: var(--mp-text-sm);
    line-height: 1.6;
    color: var(--mp-ink-soft);
}

#main-content .mp-page .mp-note i {
    flex-shrink: 0;
    margin-top: 0.15em;
    color: var(--mp-ink-muted);
}

#main-content .mp-page .mp-note--strong {
    border-color: #E6C79A;
    background: var(--mp-later-bg);
    color: var(--mp-later-ink);
}

#main-content .mp-page .mp-note--strong i {
    color: var(--mp-later-ink);
}

/* ========================================================================
   ACCESSIBILITY
   ======================================================================== */
#main-content .mp-page .mp-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;
}

#main-content .mp-page a:focus-visible {
    outline: 3px solid var(--mp-brand-crimson);
    outline-offset: 3px;
    border-radius: var(--mp-radius-sm);
}

#main-content .mp-page .mp-hero a:focus-visible {
    outline-color: #FFFFFF;
}

/* Smooth in-page jumps without JavaScript, motion preference respected. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 900px) {
    .mp-page {
        --mp-text-3xl: 2.25rem;
        --mp-text-2xl: 1.5rem;
        --mp-text-xl: 1.25rem;
        --mp-space-3xl: 3rem;
    }
}

@media (max-width: 560px) {
    .mp-page {
        --mp-text-3xl: 1.875rem;
        --mp-space-3xl: 2.5rem;
        --mp-space-lg: 1.25rem;
    }

    #main-content .mp-page .mp-methods li {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--mp-space-xs);
    }

    #main-content .mp-page .mp-panel--contact {
        flex-direction: column;
        align-items: flex-start;
    }

    /* The lead grid keeps its extra gap on desktop only; on one column that
       much space just pushes the fourth provider off the screen. */
    #main-content .mp-page .mp-grid--lead {
        gap: var(--mp-space-lg);
    }
}

/* ========================================================================
   PRINT — matches the classes this page actually renders
   ======================================================================== */
@media print {
    #main-content .mp-page .mp-hero {
        background: none;
        padding: 0 0 1rem;
        text-align: left;
    }

    #main-content .mp-page .mp-hero__title,
    #main-content .mp-page .mp-hero__subtitle,
    #main-content .mp-page .mp-hero__aside {
        color: #000000;
    }

    #main-content .mp-page .mp-section {
        padding: 0 0 1.5rem;
        background: none;
        break-inside: avoid;
    }

    #main-content .mp-page .mp-section--alt {
        background: none;
        border-block: none;
    }

    #main-content .mp-page .mp-section__title,
    #main-content .mp-page .mp-subsection__title,
    #main-content .mp-page .mp-panel__title {
        color: #000000;
    }

    #main-content .mp-page .mp-provider,
    #main-content .mp-page .mp-panel,
    #main-content .mp-page .mp-legend {
        border: 1px solid #999999;
        break-inside: avoid;
    }

    #main-content .mp-page .mp-provider__header,
    #main-content .mp-page .mp-provider__footer,
    #main-content .mp-page .mp-legend {
        background: none;
    }

    #main-content .mp-page .mp-badge,
    #main-content .mp-page .mp-note {
        background: none;
        color: #000000;
        border-color: #999999;
    }

    #main-content .mp-page .mp-methods li.mp-methods__item--guide {
        background: none;
    }

    #main-content .mp-page .mp-methods__link {
        color: #000000;
    }
}