/* ==========================================================================
   LIGHT BANDS
   The front page's dark panels - the hero, "How It Works", the insurers band,
   the closing call to action and the contact band - are re-tinted light here.

   Loaded last on purpose: the dark versions live in payment-methods.css,
   partner-showcase.css, personal-agent.css and desktop.css, and those set
   their colours with !important, so this sheet answers in the same currency
   rather than by rewriting the sheets underneath it.
   ========================================================================== */

:root {
    --band-ink: #0d3441;
    --band-body: #4a6169;
    --band-gold: #a9761a;
    --band-line: rgba(1, 57, 71, 0.12);
    --band-panel: #ffffff;
    --band-tint: #f2f8f7;
}

/* ---------------------------------------------------------------- hero ---
   The hero keeps its colour. It is the one screen on the page where the drama
   earns its keep - the white quote card needs something to sit against - so
   this sits deliberately between the old deep teal and the pale band below:
   a mid teal with the gold glow softened to a corner. Every other band on the
   page is light; this one carries the brand. */
#hero,
#hero#hero {
    background:
        radial-gradient(circle at 92% 28%, rgba(212, 175, 55, 0.34), transparent 56%),
        linear-gradient(135deg, #0d606b 0%, #0b4b57 52%, #0a3a46 100%) !important;
    background-image:
        radial-gradient(circle at 92% 28%, rgba(212, 175, 55, 0.34), transparent 56%),
        linear-gradient(135deg, #0d606b 0%, #0b4b57 52%, #0a3a46 100%) !important;
    color: #f4fafa !important;
}

#hero .hero-text h1 {
    color: #ffffff !important;
}

/* The kicker pill, the headline and the hero paragraph are one measure.
   The desktop sheet already ties the paragraph and the pill to
   `min(384px, 40vw - 4.5rem)` ("hero-copy-fits-band" and
   "hero-message-fits-band"), but a later override had stretched the pill back
   to the full column, so on a wide screen its outline ran past the first line
   of the paragraph - and the headline had been sized up to match the pill
   rather than the paragraph. Both are brought back onto that same measure
   here: the pill takes the paragraph's cap, and the headline is sized so its
   longest line ("Matters Most") lands on the very same edge. The multiplier is
   just that line's measured width per pixel of font size - 422px of text per
   64px of font - so the two stay locked together at every desktop width
   instead of only at the widest ones. The headline keeps the desktop sheet's
   own 40vw - 3.5rem box, which is wide enough that the two lines never wrap. */
@media (min-width: 1025px) {
    #hero#hero .hero-text .hero-buy-line {
        max-width: min(384px, calc(40vw - 4.5rem)) !important;
    }

    #hero#hero .hero-text h1 {
        font-size: calc(min(384px, 40vw - 4.5rem) * 0.1513) !important;
        max-width: calc(40vw - 3.5rem) !important;
        white-space: normal !important;
    }

    /* The four stat cards and the step panel were still running out to the full
       column - 428px against the copy's 384px on a wide screen - so the left
       half of the hero ended on two different edges. They take the copy's
       measure as well: one block, one right edge, from the pill down to the
       last step line. */
    #hero#hero .hero-text .hero-stats,
    #hero#hero .hero-text .hero-journey,
    #hero#hero .hero-text .hero-journey-badge {
        max-width: min(384px, calc(40vw - 4.5rem)) !important;
    }
}

#hero .hero-text h1 span {
    color: #e8c163 !important;
}

#hero .hero-text p {
    color: rgba(255, 255, 255, 0.88) !important;
    opacity: 1 !important;
}

#hero .hero-buy-line,
#hero .hero-buy-line-white {
    color: rgba(255, 255, 255, 0.92) !important;
}

#hero .hero-buy-line-gold {
    color: #e8c163 !important;
}

/* the stat cards go back to glass on the darker ground */
#hero .stat-card {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: none;
}

#hero .stat-card .num {
    color: #e8c163 !important;
}

#hero .stat-card .label {
    color: rgba(255, 255, 255, 0.86) !important;
    opacity: 1 !important;
}

/* The step panel now wears exactly what the stat cards wear - same glass, same
   border, same 14px corners - so it reads as one more tile in that row rather
   than a panel of its own. The outer wrapper was drawing a second, square-sided
   box behind the rounded one; it gives up its box so only one shows. */
#hero .hero-journey,
#hero .hero-journey-single {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

#hero .hero-text .hero-journey-badge {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

/* The heading reads gold, the way the figures on the stat cards do; the step
   lines stay white so they read as the detail beneath it. */
#hero .hero-text .hero-journey-label {
    color: var(--accent-gold) !important;
}

#hero .hero-journey-steps,
#hero .hero-journey-steps span,
#hero .hero-journey-line {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* The steps read a size up. The dark sheet set them at 0.95rem and stepped
   them down twice as the hero column narrows (1150px, then 1060px); each of
   those three sizes moves up together so the strip stays proportioned rather
   than snapping back to the old size on a smaller laptop. */
#hero .hero-text .hero-journey-single .hero-journey-steps {
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

#hero .hero-text .hero-journey-single .hero-journey-steps i {
    font-size: 0.78rem !important;
}

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

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

/* -------------------------------------------------- the quote card CTA ---
   "Get My Quotes" is the one button the whole hero exists to get pressed, so
   its label carries a size up on the rest of the card. The mobile sheet pins
   the same button at 0.92rem, so it steps with it. */
#getQuotesBtn,
#quote-form .actions-quote > #getQuotesBtn {
    font-size: 1.06rem !important;
}

body[data-mobile="true"] #quote-form #getQuotesBtn {
    font-size: 1.05rem !important;
}


/* --------------------------------------------------- how it works band ---
   Was a deep green band carrying a darker green panel and a purple one. */
.payment-section,
#payment.payment-section {
    background: linear-gradient(180deg, #eef6f6 0%, #f6fafa 55%, #fbf7f1 100%) !important;
}

.payment-block {
    background: var(--band-panel) !important;
    border: 1px solid var(--band-line) !important;
    box-shadow: 0 12px 30px rgba(13, 52, 65, 0.07) !important;
}

.payment-block + .payment-block {
    background: #faf7fd !important;
    border-color: rgba(90, 60, 140, 0.16) !important;
}

.payment-block-copy h3,
.payment-block-copy h1 {
    color: var(--band-ink) !important;
}

.payment-block-copy p {
    color: var(--band-body) !important;
}

.payment-block-copy p strong,
.payment-block-copy h3 span {
    color: var(--band-gold) !important;
}

.payment-section .payment-note {
    background: #f4f8f8 !important;
    border: 1px solid var(--band-line) !important;
    color: var(--band-body) !important;
}

.payment-section .payment-note strong {
    color: var(--band-ink) !important;
}

.payment-section .pm-note,
.payment-section .payment-methods-note {
    color: var(--band-body) !important;
}

/* ------------------------------------------------------ insurers band ---
   Was deep brown; now the same warm tone, light. */
#partners {
    background: linear-gradient(135deg, #fbf6ef 0%, #f7f1e7 48%, #f3ece0 100%) !important;
}

#partners::before {
    background:
        radial-gradient(circle at 12% 20%, rgba(169, 118, 26, 0.07), transparent 28%),
        radial-gradient(circle at 88% 8%, rgba(1, 57, 71, 0.05), transparent 24%) !important;
}

.partner-shell {
    background: var(--band-panel) !important;
    border: 1px solid var(--band-line) !important;
    box-shadow: 0 12px 30px rgba(13, 52, 65, 0.06) !important;
}

#partners .section-title {
    color: var(--band-ink) !important;
}

#partners .section-title span {
    color: var(--band-gold) !important;
}

#partners .partner-history,
#partners .partner-why {
    color: var(--band-body) !important;
}

#partners .partner-history strong,
#partners .partner-why strong {
    color: var(--band-ink) !important;
}

#partners .partner-insurer-name {
    color: var(--band-ink) !important;
}

#partners .partner-quote-link,
#partners .partner-action a {
    color: var(--band-gold) !important;
}

/* ------------------------------------------------- closing call to act ---
   Was deep purple. */
.pre-footer-cta {
    background: linear-gradient(135deg, #f3f0fa 0%, #f7f4fb 52%, #fbf9fd 100%) !important;
    color: var(--band-ink) !important;
}

.pre-footer-cta .pre-footer-cta-text,
.pre-footer-cta h2,
.pre-footer-cta h3,
.pre-footer-cta p,
.pre-footer-cta strong {
    color: var(--band-ink) !important;
}

.pre-footer-cta .pre-footer-kicker {
    color: var(--band-gold) !important;
}

.pre-footer-cta .pre-footer-cta-cover {
    background: var(--band-panel) !important;
    border: 1px solid var(--band-line) !important;
}

/* The insurer chips in those three cards were outlined in a hairline of white,
   which was an edge on the old deep purple band and nothing at all on a white
   card. They take the same brand gold the message form now uses, so every
   clickable thing in this band is drawn in one colour. */
.pre-footer-cta .cta-insurer {
    border: 1.5px solid #d4af37 !important;
    background: #ffffff !important;
}

.pre-footer-cta .cta-insurer:hover {
    background: #fffdf5 !important;
}

.pre-footer-cta .pre-footer-cta-or {
    color: var(--band-body) !important;
}

/* ------------------------------------------------------ contact band ---
   Was deep blue into deep green. */
#contact.personal-assistance-band,
.personal-officer-band.personal-assistance-band {
    background: linear-gradient(135deg, #eef5f8 0%, #f3f8f7 55%, #f7fbfa 100%) !important;
    border-top: 1px solid var(--band-line) !important;
    border-bottom: 1px solid var(--band-line) !important;
}

#contact .personal-message-head,
#contact .personal-message-head h2,
#contact .personal-message-head h3,
#contact .personal-message-head strong,
#contact .personal-assistance-intro strong {
    color: var(--band-ink) !important;
}

#contact .personal-message-head p,
#contact .personal-message-head small,
#contact .personal-assistance-intro p,
#contact .personal-assistance-intro small {
    color: var(--band-body) !important;
}

#contact .personal-message-icon {
    background: rgba(169, 118, 26, 0.12) !important;
    color: var(--band-gold) !important;
}

#contact .personal-message-card {
    background: var(--band-panel) !important;
    border: 1px solid var(--band-line) !important;
    box-shadow: 0 12px 30px rgba(13, 52, 65, 0.07) !important;
}

#contact .personal-contact-footnote {
    color: var(--band-body) !important;
}

#contact .personal-contact-footnote i {
    color: var(--band-gold) !important;
}

/* The two buttons in that card were white-on-glass for the dark band; on the
   light card the email one would vanish, so it takes a tinted panel instead. */
#contact .personal-email-btn {
    border: 1px solid var(--band-line) !important;
    background: #eef6f6 !important;
    color: var(--band-ink) !important;
}

#contact .personal-email-btn:hover {
    background: #e2efef !important;
}

#contact .personal-contact-btn > i {
    background: rgba(1, 57, 71, 0.08) !important;
    color: var(--band-ink) !important;
}

#contact .personal-contact-btn strong {
    color: var(--band-ink) !important;
}

#contact .personal-contact-btn small {
    color: var(--band-body) !important;
    opacity: 1 !important;
}

/* The form's own labels were written for the dark band. */
#contact .personal-message-card label,
#contact .personal-message-card .form-group label,
#contact .personal-message-card .personal-attach-note {
    color: var(--band-body) !important;
}

/* The fields carried a hairline of white - an outline that reads on the dark
   band and disappears completely on the white card. They take the brand gold
   instead, which is the colour these same fields already flashed on focus, so
   the resting and focused states now belong to the same family. Focus keeps a
   deeper gold and a soft ring so it still says "you are here". */
#contact .personal-message-card input,
#contact .personal-message-card select,
#contact .personal-message-card textarea {
    border: 1.5px solid #d4af37 !important;
    background: #ffffff !important;
}

#contact .personal-message-card input:focus,
#contact .personal-message-card select:focus,
#contact .personal-message-card textarea:focus {
    border-color: #a9761a !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.22) !important;
}

#contact .personal-message-card .personal-attach-control {
    background: #f6fafa !important;
    border: 1px dashed var(--band-line) !important;
    color: var(--band-ink) !important;
}

#contact .personal-message-card .personal-attach-control small {
    color: var(--band-body) !important;
}

/* ------------------------------------------------------------- footer ---
   The footer wears the hero's own ground - the same mid teal, the same sweep
   from the top-left corner down to the deeper green, the same softened gold
   glow in the right-hand third - so the page opens and closes on one colour
   instead of a dark hero over a pale footer. Both declarations are written
   out because the sheets underneath set `background` and `background-image`
   separately and this has to answer each of them.

   The copy keeps the palette the site already wrote for a dark band: white
   headings, quiet grey body, pale links that warm to gold on hover. That is
   why the ink and body colours that were here for the pale footer are gone -
   they were the only thing turning this text dark. */
footer {
    background:
        radial-gradient(circle at 92% 28%, rgba(212, 175, 55, 0.34), transparent 56%),
        linear-gradient(135deg, #0d606b 0%, #0b4b57 52%, #0a3a46 100%) !important;
    background-image:
        radial-gradient(circle at 92% 28%, rgba(212, 175, 55, 0.34), transparent 56%),
        linear-gradient(135deg, #0d606b 0%, #0b4b57 52%, #0a3a46 100%) !important;
    color: rgba(255, 255, 255, 0.82) !important;
}