/* ==========================================================================
   Insurance partners section
   Static detail cards + one-line brand-coloured logo strip (circular loop).
   Replaces the previous auto-sliding partner carousel.
   Loaded last so it settles the older #partners rules in desktop.css/styles.css.
   ========================================================================== */

/* Brand accents, matching the values used on the partner cards. */

/* ---------- one big rounded container, in deep brown so the page does not
   carry another full band of the same green ---------- */

#partners {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #2a1810 0%, #43291a 48%, #5e3c23 100%);
    padding: 5rem 0 4.5rem;
}

#partners::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.09), transparent 28%),
        radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.07), transparent 24%);
    pointer-events: none;
}

#partners .container {
    position: relative;
    z-index: 1;
}

/* ===== wide-bands-alignment =====
   The partners band, the Pay to Insurer band and the Get Started band sit in
   the same outer measure and the same gutter as the Medical Provider
   Directory's outer container, so all four edges line up at every width.
   1136px minus the 18px gutters is that band's 1100px of content. */
#partners > .container,
#payment > .container,
#trust > .container {
    max-width: 1136px;
    padding-left: 18px;
    padding-right: 18px;
}

/* the mobile layout tightens the provider band to a 10px gutter under 580px */
@media (max-width: 580px) {
    body[data-mobile="true"] #partners > .container,
    body[data-mobile="true"] #payment > .container,
    body[data-mobile="true"] #trust > .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.partner-shell {
    /* The same measure as the Medical Provider Directory's outer container, so
       the wide bands on the page line up; flexible below that on a phone. */
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 2.1rem 1.9rem 2.3rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

#partners .section-title {
    color: #fff;
    margin-bottom: 1.4rem;
}

#partners .section-title span {
    color: #ecc27a;
}

/* the container's side padding would push the cards past the viewport on a
   phone, so it tightens up there */
@media (max-width: 1024px) {
    .partner-shell {
        padding: 1.2rem 0.9rem 1.4rem;
        border-radius: 18px;
    }
}

/* ---------- closing call to action: compare all, or one insurer ---------- */

/* the band is dark purple, so the gold button and the white copy carry it */
.pre-footer-cta {
    background: linear-gradient(135deg, #241338 0%, #3a1a5c 52%, #4b2173 100%) !important;
}

/* the footer's own top margin left a strip of page background between it and
   this band, so the two sit flush */
.pre-footer-cta + footer,
/* the same strip appears when the contact band closes the page */
#contact + footer {
    margin-top: 0 !important;
}

.pre-footer-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* three cover-type containers side by side, each headed by its own button */
.pre-footer-cta-covers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    width: 100%;
}

/* ===== cta-band-alignment =====
   The three cover-type containers ("Compare SME / Individual / Children Only")
   take the same outer measure and gutter as the Medical Provider Directory's
   container, so the whole row lines up with the other wide bands. */
.pre-footer-cta > .container {
    max-width: 1136px;
    padding-left: 18px;
    padding-right: 18px;
}

@media (max-width: 580px) {
    .pre-footer-cta > .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ===== hero-journey-single =====
   "How It Works" is now one line of steps rather than a five-step list plus a
   separate "Get Covered" note, so the badge takes the whole hero column. */
#hero .hero-text .hero-journey-single {
    grid-template-columns: minmax(0, 1fr);
}

#hero .hero-text .hero-journey-single .hero-journey-steps {
    display: block;
    max-width: 100% !important;
    font-size: 0.95rem !important;
}

#hero .hero-text .hero-journey-single .hero-journey-line {
    display: block;
}

#hero .hero-text .hero-journey-single .hero-journey-steps i {
    font-size: 0.7rem;
    color: var(--accent-gold) !important;
    margin: 0 0.42rem;
    vertical-align: middle;
}

/* the hero column narrows here, so the steps step down a notch to keep each of
   the two lines on one row */
@media (max-width: 1150px) {
    #hero .hero-text .hero-journey-single .hero-journey-steps {
        font-size: 0.88rem !important;
    }
}

@media (max-width: 1060px) {
    #hero .hero-text .hero-journey-single .hero-journey-steps {
        font-size: 0.8rem !important;
    }
}

/* the kicker badge reads larger than the small caption size it used to carry */
#hero .hero-text .hero-buy-line {
    font-size: 1.05rem !important;
    letter-spacing: 0.06em !important;
}

/* ===== copay-block =====
   "No Copayment" reads in the site green, and the "Remove Copayment" control
   sits as a subheader under the Outpatient Co-payment heading. */
.provider-card .copay-main-container .copay-none {
    margin: 0;
    color: #016f6d !important;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.provider-card .copay-main-container .copay-detail {
    margin: 0.35rem 0 0;
    color: #5b6b7c;
    font-size: 0.74rem;
    line-height: 1.5;
}

.provider-card .copay-main-container .copay-waiver {
    margin-top: 0.7rem;
    padding-top: 0.65rem;
    border-top: 1px dashed #e2e8f0;
}

/* The scale, one clause to a line: the tiers the insurer publishes and the
   line that releases the rest of the panel, each ruled off from the next so
   the figures read down rather than through a run-on sentence. */
/* The scale is not indented: the tiers start at the block's own edge, in line
   with the heading above them and the offer below. */
.provider-card .copay-main-container .terms-copay,
.provider-card .copay-main-container .copay-detail {
    padding-left: 0;
}

.provider-card .copay-main-container .terms-copay .copay-line,
.provider-card .copay-main-container .copay-detail .copay-line {
    margin: 0;
}

/* The line that releases the rest of the panel - "No outpatient co-payment at
   other hospitals.", "All other providers: No Copayment." - states that there
   is nothing to pay there. It is a note rather than a charge, so it is set in
   plain ink instead of the red the tier figures above it wear. */
.provider-card .copay-main-container .terms-copay .copay-line.is-rest,
.provider-card .copay-main-container .copay-detail .copay-line.is-rest {
    color: #111827;
}

.provider-card .copay-main-container .terms-copay .copay-line + .copay-line,
.provider-card .copay-main-container .copay-detail .copay-line + .copay-line {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #e2e8f0;
}

.provider-card .copay-main-container .copay-waiver-head {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: #013947;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.provider-card .copay-main-container .copay-waiver-head input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #016f6d;
    cursor: pointer;
}

/* The waiver's handshake sits in the same rounded icon tile the other card
   headings use, with the question after it and the checkbox last. */
.provider-card .copay-main-container .copay-waiver-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #e6fbf9;
    color: #016f6d;
    font-size: 0.85rem;
}

.provider-card .copay-main-container .copay-waiver-text {
    color: #013947;
    font-size: 0.86rem;
    font-weight: 800;
}

/* ===== the co-payment offer and its two answers, on the card =====
   The price of buying the co-payment off sits in a pill, with Yes and No
   beside it, exactly as the at-a-glance row states it. The answer colours the
   pill: the co-payment's dark red while it stands, the house green once it has
   been bought off. */
.provider-card .copay-main-container .copay-waiver-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.8rem;
}

.provider-card .copay-main-container .copay-waiver-pill {
    padding: 0.18rem 0.6rem;
    border: 1px solid #86c4c7;
    border-radius: 999px;
    background: #f4fafa;
    color: #016f6d;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.35;
    /* The pill answers the question as well as stating it: a tap turns the
       co-payment off, the next tap puts it back. */
    cursor: pointer;
    user-select: none;
    transition: box-shadow 0.16s ease, transform 0.16s ease;
}

.provider-card .copay-main-container .copay-waiver-pill:hover {
    box-shadow: 0 2px 8px rgba(1,57,71, 0.14);
}

.provider-card .copay-main-container .copay-waiver-pill:focus-visible {
    outline: 2px solid #016f6d;
    outline-offset: 2px;
}

.provider-card .copay-main-container .copay-waiver-pill:active {
    transform: translateY(1px);
}

.provider-card .copay-main-container .copay-waiver.is-applies .copay-waiver-pill {
    border-color: #d9a89e;
    background: #fbf2ef;
    color: #9b3528;
}

.provider-card .copay-main-container .copay-waiver-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.provider-card .copay-main-container .copay-waiver-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.provider-card .copay-main-container .copay-waiver-radio input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #016f6d;
    cursor: pointer;
}

.provider-card .copay-main-container .copay-waiver.is-applies .copay-waiver-radio input[value="no"] {
    accent-color: #9b3528;
}

.provider-card .copay-main-container .copay-waiver.is-applies .copay-waiver-radio:has(input[value="no"]:checked) {
    color: #9b3528;
    font-weight: 800;
}

.provider-card .copay-main-container .copay-waiver.is-waived .copay-waiver-radio:has(input[value="yes"]:checked) {
    color: #016f6d;
    font-weight: 800;
}

/* What the waiver costs, written with the box it belongs to: the figure the
   client is agreeing to sits on the same green line as the tick, so the offer
   and the answer to it are read as one. */
.provider-card .copay-main-container .copay-waiver-state {
    margin: 0 0 0.4rem;
    color: #9b3528;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.35;
}

.provider-card .copay-main-container .copay-waiver-state.is-waived {
    color: #016f6d;
}

.provider-card .copay-main-container .copay-waiver-cost {
    color: #016f6d;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.4;
}

/* The co-pay wording stays visible but struck through once it is waived. */
.provider-card .copay-main-container .terms-copay.copay-struck {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    color: #94a3b8;
}

/* ===== the instalment option on the card =====
   The same reading as the at-a-glance row, so one offer is described one way:
   the option's name, then a small ledger - what the four payments come to,
   what the financing costs, and the total - label left, figure right. */
.provider-card .payment-method-ipf .ipf-heading {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
    color: #013947;
    font-size: 0.8rem;
    font-weight: 800;
}

/* An insurer with no logo file still gets a chip: its initials, in the same
   mark the banks use. */
.pay-insurer-initials {
    color: #013947;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* ===== the co-payment choice in the application summary =====
   The offer in a pill and the two answers beside it, next to the premium they
   change: the same control the card and the at-a-glance row carry. */
.modal-summary .modal-copay-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.modal-summary .modal-copay-offer {
    padding: 0.12rem 0.5rem;
    border: 1px solid #86c4c7;
    border-radius: 999px;
    background: #f4fafa;
    color: #016f6d;
    font-size: 0.72rem;
    font-weight: 800;
}

.modal-summary .modal-copay-offer.is-applies {
    border-color: #d9a89e;
    background: #fbf2ef;
    color: #9b3528;
}

.modal-summary .modal-copay-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.modal-summary .modal-copay-choice label {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.modal-summary .modal-copay-choice input {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: #016f6d;
    cursor: pointer;
}

.provider-card .payment-method-ipf .ipf-lines {
    display: grid;
    gap: 0.2rem;
    margin: 0;
}

/* Each figure is one line, whatever width the card is given: the label and the
   amount are read together, and a wrapped label reads as a second row. */
.provider-card .payment-method-ipf .ipf-lines > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    white-space: nowrap;
}

.provider-card .payment-method-ipf .ipf-lines dt {
    color: #016f6d;
    font-weight: 600;
    white-space: nowrap;
}

.provider-card .payment-method-ipf .ipf-lines dd {
    margin: 0;
    color: #016f6d;
    font-weight: 800;
    white-space: nowrap;
}

/* The four payments are the offer, so they lead in green. What the financing
   costs and the total it adds up to are the small print beside it: the same
   figures, in the muted grey the card uses for everything it is not selling. */
.provider-card .payment-method-ipf .ipf-lines > div:not(:first-child) dt,
.provider-card .payment-method-ipf .ipf-lines > div:not(:first-child) dd {
    color: #64748b;
}

/* The waiver line inside Premium Composition reads as an addition to the total. */
.provider-card .premium-breakdown .breakdown-row.waiver .value {
    color: #016f6d !important;
    font-weight: 700 !important;
}

.provider-card .premium-breakdown .breakdown-row.waiver {
    border-top: 1px dashed #d7e2e3;
}

/* ===== medical-exam-left =====
   The Medical Examination panel reads left-aligned like every other card
   section, instead of centring its heading and detail line. */
.provider-card .medical-exam-main-container {
    text-align: left !important;
}

.provider-card .medical-exam-main-container .inner-section-heading {
    justify-content: flex-start !important;
}

/* ===== apply-button-flat =====
   The Apply button on the quote card is a flat green rather than a gradient. */
#resultsContainer .provider-card .quote-card-primary-actions .get-cover-btn,
#cardsContainer .provider-card .quote-card-primary-actions .get-cover-btn {
    background: #1c757a !important;
    background-image: none !important;
}

/* ===== quotecard-figure-two-lines =====
   The quote card's top-right figure runs as two lines: the annual premium, then
   the headcount and the quote number together ("555 Families · 1110 Members ·
   Q1"). It used to sit on three separate lines. */
#resultsContainer .provider-card .quotecard-figure,
#cardsContainer .provider-card .quotecard-figure {
    display: grid !important;
    grid-template-columns: auto auto;
    justify-content: end !important;
    align-items: baseline !important;
    column-gap: 0.25rem;
    row-gap: 0.1rem;
}

#resultsContainer .provider-card .quotecard-figure .price,
#cardsContainer .provider-card .quotecard-figure .price {
    grid-column: 1 / -1;
    justify-self: end;
}

#resultsContainer .provider-card .quotecard-figure .quote-sequence,
#cardsContainer .provider-card .quotecard-figure .quote-sequence {
    justify-self: end;
}

/* the premium reads at the same size as the insurer name, not bigger than it */
#resultsContainer .provider-card .quotecard-figure .price,
#cardsContainer .provider-card .quotecard-figure .price {
    font-size: 1.06rem !important;
    line-height: 1.25 !important;
}

/* the dot that joins the headcount to the quote number */
#resultsContainer .provider-card .quotecard-figure .quote-sequence::before,
#cardsContainer .provider-card .quotecard-figure .quote-sequence::before {
    content: "\00b7";
    margin-right: 0.25rem;
    color: #94a3b8;
}

.pre-footer-cta-cover {
    padding: 1rem 0.9rem 1.1rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    text-align: center;
}

.pre-footer-cover-btn {
    font: inherit;
    display: block;
    width: 100%;
    margin-bottom: 0.85rem;
    padding: 0.7rem 0.9rem;
    border-radius: 999px;
    border: 0;
    background: var(--accent-gold);
    color: #013947;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.25;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.pre-footer-cover-btn:hover {
    background: #d4af37;
    transform: translateY(-1px);
}

.pre-footer-cover-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.65);
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .pre-footer-cta-covers {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pre-footer-cta-or {
    display: block;
    margin-bottom: 0.7rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.85rem;
    font-weight: 600;
}

.pre-footer-insurer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
}

.cta-insurer {
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.95rem 0.45rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.94);
    color: #013947;
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.cta-insurer:hover {
    background: #fff;
    transform: translateY(-1px);
}

.cta-insurer:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

.cta-insurer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 26px;
    flex: 0 0 auto;
}

.cta-insurer-logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.cta-insurer-initial {
    font-size: 0.6rem;
    font-weight: 900;
    color: #013947;
}

@media (max-width: 900px) {
    .pre-footer-cta-actions {
        align-items: stretch;
        width: 100%;
    }

    .pre-footer-cta-single {
        text-align: center;
    }

    .pre-footer-insurer-row {
        justify-content: center;
    }
}

.partner-logo.heritage            { --partner-color: #0d2440; }

/* ---------- the one-line logo strip ---------- */

/* the brand colour runs down the leading edge of every chip */

/* ---------- the detail cards, now static ---------- */

#partners .partner-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.15rem !important;
    align-items: stretch !important;
    margin-top: 1.7rem !important;
}

/* the stray centring rule from desktop.css made every card read as a centred
   block; the card is a left-aligned column with the quote link pinned bottom */
#partners .partner-logo {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 0.6rem !important;
}

#partners .partner-logo .partner-brand {
    margin-bottom: 0.25rem;
}

#partners .partner-logo p,
#partners .partner-logo .partner-action {
    text-align: left;
}

#partners .partner-action {
    margin-top: auto !important;
}

/* ---------- narrower screens ---------- */

@media (max-width: 900px) {

}

/* tablet: two cards per line */
@media (max-width: 1024px) {
    #partners .partner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* mobile: two cards per line, squeezed so both fit a phone
   At ~175px a card the type steps down, the logo shrinks and the padding
   tightens - the paragraphs stay readable rather than being cropped. */
@media (max-width: 640px) {
    #partners .partner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.6rem !important;
        margin-top: 1.1rem !important;
    }

    #partners .partner-logo {
        padding: 0.7rem 0.6rem 0.75rem !important;
        border-radius: 14px !important;
        gap: 0.4rem !important;
    }

    #partners .partner-brand {
        min-height: 0 !important;
        margin-bottom: 0.25rem !important;
        gap: 0.25rem !important;
    }

    #partners .partner-brand .partner-insurer-logo,
    #partners .partner-brand .partner-static-logo {
        width: 42px !important;
        max-width: 46px !important;
        height: 42px !important;
        padding: 3px !important;
        border-radius: 9px !important;
    }

    #partners .partner-logo .partner-icon.partner-logo-image img {
        max-height: 42px !important;
        width: auto !important;
    }

    #partners .partner-logo p,
    #partners .partner-logo .partner-history,
    #partners .partner-logo .partner-why {
        font-size: 0.6rem !important;
        line-height: 1.35 !important;
    }

    #partners .partner-logo .partner-action {
        font-size: 0.62rem !important;
        padding: 0.4rem 0.5rem !important;
    }

    #partners .section-title {
        font-size: 1.7rem !important;
    }
}

/* ===== providers-title-flat =====
   The Hospitals band keeps its title block - the "Medical Provider Network"
   badge, the heading, the copy and the provider-type chips - but it sits
   straight on the band instead of inside its own card. Only the sub-container
   chrome is switched off; the block's own typography is untouched. */
#providers .directory-hero {
    margin: 0 auto 1.75rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* ===== trust-band-photo =====
   The "Trusted by thousands of Kenyan families" band sits on the family photo
   itself: the photo fills the band, a light white wash lifts it, and the text
   areas sit on frosted white so every word stays readable over the picture. */
#trust {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* the container is left unpositioned so the photo and the wash behind it
   measure against the band itself, not against the 1300px column */
#trust .container {
    position: static;
}

#trust .trust-photo {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #dfe8e9;
    box-shadow: none;
}

#trust .trust-photo img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center 22%;
}

/* the light wash the band is read through */
#trust::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(255, 255, 255, 0.55);
    pointer-events: none;
}

#trust .trust-layout {
    display: block;
}

#trust .trust-copy {
    position: relative;
    z-index: 2;
    /* the same measure as the partners container, so the two bands line up */
    max-width: 100%;
    margin: 0 auto;
    padding: 2.4rem 2.2rem 2.2rem;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 22px 50px rgba(1,57,71, 0.18);
    backdrop-filter: blur(3px);
}

/* the picture is generated, so the band says so, quietly, in the corner */
#trust .trust-photo-credit {
    position: absolute;
    right: 14px;
    bottom: 12px;
    z-index: 3;
    padding: 0.32rem 0.72rem;
    border-radius: 999px;
    background: rgba(1,57,71, 0.5);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

#trust .trust-copy .section-title,
#trust .trust-copy .section-desc {
    text-align: center;
}

#trust .trust-copy .section-desc {
    margin-left: auto;
    margin-right: auto;
}

/* each trust point sits in its own lightly whitened area */
#trust .trust-grid {
    gap: 1.15rem;
}

#trust .trust-item {
    padding: 1.15rem 1rem 1.05rem;
    border-radius: 18px;
    border: 1px solid rgba(1,57,71, 0.06);
    background: rgba(255, 255, 255, 0.66);
}

@media (max-width: 900px) {
    #trust::after {
        background: rgba(255, 255, 255, 0.62);
    }

    #trust .trust-copy {
        padding: 1.5rem 1rem 1.4rem;
        border-radius: 20px;
    }

    #trust .trust-item {
        padding: 0.9rem 0.7rem 0.85rem;
        border-radius: 14px;
    }

    #trust .trust-photo-credit {
        right: 10px;
        bottom: 10px;
        font-size: 0.66rem;
    }
}

/* ===== contact-band-stacked =====
   "Talk to Our Principal Officer" and "Send Us a Message" take a row each
   instead of sharing one band side by side, and both take the same measure and
   the same gutter as the Medical Provider Directory's container, so the wide
   bands on the page line up. */
#contact.personal-assistance-band {
    display: block;
    padding: 56px 18px;
}

/* the vertical rule that divided the two columns has nothing left to divide */
#contact.personal-assistance-band .personal-contact-divider {
    display: none;
}

#contact.personal-assistance-band .personal-assistance-intro {
    /* the agent card is pinned to full width further up the stylesheets */
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#contact.personal-assistance-band .personal-message-card {
    max-width: 1100px !important;
    margin: 1.4rem auto 0 !important;
}

/* the Email / WhatsApp pair was capped tighter than its own labels need, so the
   second line of each was being clipped with an ellipsis */
#contact .personal-contact-actions {
    max-width: 560px;
}

/* on a phone the two buttons are narrow, so their second line wraps instead of
   being cut off with an ellipsis */
@media (max-width: 1024px) {
    #contact .personal-contact-btn small {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* ===== principal-officer-panels =====
   The officer card holds two sub-containers: the message in one, and the photo,
   name, title, phone and the two buttons in the other. The badges run as one
   centred line underneath both. */
#contact.personal-assistance-band .personal-assistance-intro {
    display: grid !important;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: clamp(1.1rem, 2.4vw, 2rem);
    row-gap: 1.2rem;
    align-items: stretch !important;
}

#contact.personal-assistance-band .personal-assistance-intro .personal-agent-head,
#contact.personal-assistance-band .personal-assistance-intro .personal-agent-rule {
    grid-column: 1 / -1;
}

#contact.personal-assistance-band .personal-assistance-intro .personal-agent-head {
    grid-row: 1;
    justify-content: flex-start !important;
}

#contact.personal-assistance-band .personal-assistance-intro .personal-agent-head-text {
    text-align: left;
}

#contact.personal-assistance-band .personal-assistance-intro .personal-agent-rule {
    grid-row: 2;
}

/* the two sub-containers */
#contact.personal-assistance-band .personal-assistance-intro .officer-panel {
    padding: 1.15rem 1.15rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#contact.personal-assistance-band .personal-assistance-intro .officer-panel-message {
    grid-column: 1;
    grid-row: 3;
}

#contact.personal-assistance-band .personal-assistance-intro .officer-panel-id {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    flex-direction: column;
}

/* the two buttons sit in the second sub-container, under the photo and title */
#contact.personal-assistance-band .personal-assistance-intro .personal-agent-cta {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: auto 0 0 !important;
}

/* the five badges run as one centred line under both sub-containers */
#contact.personal-assistance-band .personal-assistance-intro .personal-assistance-trust {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.2rem auto 0 !important;
    grid-column: 1 / -1;
    grid-row: 4;
}

@media (max-width: 900px) {
    #contact.personal-assistance-band .personal-assistance-intro {
        grid-template-columns: minmax(0, 1fr);
    }

    #contact.personal-assistance-band .personal-assistance-intro .officer-panel,
    #contact.personal-assistance-band .personal-assistance-intro .personal-assistance-trust {
        grid-column: 1;
        grid-row: auto;
    }

    /* five badges cannot hold one line on a phone, so they pair up there */
    #contact.personal-assistance-band .personal-assistance-intro .personal-assistance-trust {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 580px) {
    #contact.personal-assistance-band {
        padding-left: 10px;
        padding-right: 10px;
    }

    #contact.personal-assistance-band .personal-message-card {
        margin-top: 1rem !important;
    }
}

/* ===== trusted-insurers-columns =====
   Four on a desktop, three on a tablet, two on a phone. */
body #partners .partner-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 1024px) {
    body #partners .partner-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    body #partners .partner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ===== trusted-insurers-last-card =====
   Seven insurers over an even number of columns leaves the seventh - Jubilee,
   the last one alphabetically - alone on a row of its own with an empty spot
   beside it. Whatever the sheet's column count, a lone last card fills the
   row instead: two spots on a phone, three on a tablet. The :nth-child(odd)
   test is what makes it conditional - if the count ever becomes even, the rule
   simply stops applying. */
@media (max-width: 1024px) {
    body #partners .partner-grid > :last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
    }
}