/* Hiring pages: small additions on top of delivery-job.css (same design tokens). */

.hp-hero-intro {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-slate, #1e293b);
    margin: 0;
    max-width: 640px;
}

/* Intro card above the details grid */
.hp-intro-card {
    background: #ffffff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--card-radius-lg, 20px);
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: var(--card-shadow, 0 1px 3px rgba(1, 38, 65, 0.06));
}

.hp-intro-card p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--text-slate, #1e293b);
}

/* Steps: 4 or 5 items without leaving an orphan column */
.hp-steps-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.hp-apply-again {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.hp-apply-link {
    width: auto;
    padding-left: 28px;
    padding-right: 28px;
    text-decoration: none;
}

/* Apply card in brand navy so the form stands out from the light hero (Hiring Pages only;
   the delivery landing page keeps the white card). Inputs stay white. */
.hp-page .ar-apply-card {
    background: linear-gradient(160deg, #023a5f 0%, #012641 55%, #011a2e 100%);
    border-color: rgba(10, 236, 51, 0.35);
    box-shadow: 0 24px 60px -18px rgba(1, 38, 65, 0.55);
}

.hp-page .ar-apply-card:hover {
    box-shadow: 0 30px 70px -15px rgba(1, 38, 65, 0.6), 0 0 0 1px rgba(10, 236, 51, 0.45);
}

.hp-page .ar-apply-card .ar-card-badge {
    background: rgba(10, 236, 51, 0.14);
    color: #6ef08a;
    border-color: rgba(10, 236, 51, 0.35);
}

.hp-page .ar-apply-card .ar-card-title {
    color: #ffffff;
}

.hp-page .ar-apply-card .ar-card-subtitle,
.hp-page .ar-apply-card .ar-form-footer {
    color: #b6c6d6;
}

.hp-page .ar-apply-card .ar-form-footer i {
    color: #0aec33;
}

.hp-page .ar-apply-card .ar-form-label {
    color: #e2e8f0;
}

.hp-page .ar-apply-card .ar-form-input {
    background-color: #ffffff;
    border-color: transparent;
}

.hp-page .ar-apply-card .ar-form-input:focus {
    border-color: #0aec33;
    box-shadow: 0 0 0 4px rgba(10, 236, 51, 0.25);
}

.hp-page .ar-apply-card .ar-error-message {
    color: #fca5a5;
}

/* Location group (partials/lead-location*) on the navy card */
.hp-page .ar-apply-card .lead-loc-edit {
    color: #ffffff;
}

.hp-page .ar-apply-card .lead-gps-btn {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
}

.hp-page .ar-apply-card .lead-gps-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #ffffff;
}

.hp-page .ar-apply-card .lead-gps-btn[aria-busy="true"] {
    color: #cbd5e1;
}

.hp-page .ar-apply-card [data-gps-state="granted"] .lead-gps-btn {
    color: #6ef08a;
    background: rgba(10, 236, 51, 0.15);
    border-color: #0aec33;
}

.hp-page .ar-apply-card [data-gps-state="loading"] .lead-gps-spin {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
}

.hp-page .ar-apply-card .lead-loc-suggest {
    color: #b6c6d6;
}

.hp-page .ar-apply-card .lead-loc-suggest strong {
    color: #ffffff;
}

.hp-page .ar-apply-card .lead-loc-use {
    color: #6ef08a;
}

.hp-page .ar-apply-card .lead-gps-note {
    color: #fcd34d;
}

/* "Trusted by" line under the apply card (above the hero glow behind the card) */
.hp-social-proof {
    position: relative;
    z-index: 1;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 18px;
    padding-top: 0;
    text-align: center;
}

/* Sticky "Apply Now" bar, shown by hiring-page.js while the apply form is off screen */
.hp-sticky-apply {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}

.hp-sticky-apply.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s;
}

.hp-sticky-apply[hidden] {
    display: none;
}

.hp-sticky-apply .ar-submit-btn {
    max-width: 480px;
    margin: 0 auto;
    text-decoration: none;
}

/* Keep the footer's last lines clear of the bar. */
body.hp-has-sticky-apply {
    padding-bottom: 76px;
}

@media (prefers-reduced-motion: reduce) {
    .hp-sticky-apply,
    .hp-sticky-apply.is-visible {
        transition: none;
    }
}

/* Live jobs block */
.hp-live-section {
    padding: 50px 0;
    background: #ffffff;
}

.hp-live-prominent {
    background: var(--light-gray, #f8fafc);
    border-bottom: 1px solid var(--border-subtle, #edf2f7);
}

.hp-live-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 860px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hp-live-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #ffffff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--card-radius, 14px);
    padding: 16px 20px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hp-live-item:hover {
    border-color: var(--primary-border, rgba(10, 236, 51, 0.35));
    box-shadow: 0 6px 18px rgba(1, 38, 65, 0.06);
}

.hp-live-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    text-decoration: none;
}

.hp-live-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark-blue, #012641);
}

.hp-live-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 13px;
    color: var(--text-muted, #64748b);
}

.hp-live-meta i {
    color: var(--primary-dark, #059b20);
    margin-right: 4px;
}

.hp-live-cta {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-dark, #059b20);
    text-decoration: none;
    white-space: nowrap;
}

.hp-live-all {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.hp-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: 1.5px solid var(--dark-blue, #012641);
    border-radius: var(--badge-radius, 999px);
    color: var(--dark-blue, #012641);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hp-btn-outline:hover {
    background: var(--dark-blue, #012641);
    color: #ffffff;
}

/* Link groups (nearby localities, roles, brands, hub lists) */
.hp-links-section {
    background: var(--light-gray, #f8fafc);
}

.hp-link-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.hp-link-group {
    background: #ffffff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--card-radius-lg, 20px);
    padding: 24px;
    box-shadow: var(--card-shadow, 0 1px 3px rgba(1, 38, 65, 0.06));
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hp-link-group .ar-local-col-title {
    font-size: 17px;
}

/* Hub: key facts strip. */
.hp-facts-section {
    padding: 28px 0 8px;
    background: #ffffff;
}

.hp-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-fact {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: var(--light-gray);
    border: 1px solid var(--border-color);
    border-radius: var(--input-radius);
}

.hp-fact i {
    grid-row: span 2;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-dark);
    background: var(--primary-light);
    border-radius: 10px;
}

.hp-fact-value {
    font-size: 17px;
    font-weight: 700;
    color: var(--dark-blue);
    line-height: 1.2;
}

.hp-fact-label {
    font-size: 13px;
    color: var(--text-muted);
}

/* Hub: companies as logo cards. */
.hp-brands-section {
    padding: 50px 0;
    background: var(--light-gray);
}

.hp-brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.hp-brand-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    color: var(--text-slate);
    text-decoration: none;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.hp-brand-card:hover,
.hp-brand-card:focus-visible {
    color: var(--text-slate);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}

.hp-brand-logo {
    flex: 0 0 72px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: var(--light-gray);
    border-radius: 10px;
}

.hp-brand-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.hp-brand-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hp-brand-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark-blue);
}

.hp-brand-meta {
    font-size: 13px;
    color: var(--text-muted);
}

.hp-brand-pay {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-dark);
}

.hp-brand-arrow {
    color: var(--text-light);
}

/* Hub: searchable locality list (filtered in place by hiring-page.js). */
.hp-loc-section {
    padding: 50px 0;
    background: #ffffff;
}

.hp-loc-picker {
    max-width: 880px;
    margin: 0 auto;
    padding: 18px;
    background: var(--light-gray);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
}

.hp-loc-search {
    position: relative;
    display: block;
    margin: 0;
}

.hp-loc-search i {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: var(--text-light);
}

.hp-loc-search input {
    width: 100%;
    height: 50px;
    padding: 12px 16px 12px 44px;
    font-family: var(--font-family);
    font-size: 15px;
    color: var(--text-black);
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: var(--input-radius);
    outline: none;
}

.hp-loc-search input:focus {
    border-color: var(--primary-border);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.hp-loc-count {
    margin: 10px 2px;
    font-size: 13px;
    color: var(--text-muted);
}

.hp-loc-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px;
    max-height: 340px;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--input-radius);
}

.hp-loc-list-short {
    max-height: none;
}

.hp-loc-list li[hidden] {
    display: none;
}

.hp-loc-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--text-slate);
    text-decoration: none;
    border-radius: 8px;
}

.hp-loc-list a i {
    font-size: 12px;
    color: var(--text-light);
}

.hp-loc-list a:hover,
.hp-loc-list a:focus-visible {
    color: var(--dark-blue);
    background: var(--primary-light);
}

.hp-loc-list a:hover i,
.hp-loc-list a:focus-visible i {
    color: var(--primary-dark);
}

.hp-loc-empty {
    margin: 12px 2px 0;
    font-size: 14px;
    color: var(--text-muted);
}

.hp-loc-empty[hidden] {
    display: none;
}

/* Benefits & Perks: "as per brand" note + disclaimer. */
.hp-col-title-note {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.hp-benefits-note {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .hp-intro-card {
        padding: 18px;
    }

    .hp-live-section {
        padding: 36px 0;
    }

    .hp-live-item {
        padding: 14px 16px;
    }

    .hp-link-groups {
        grid-template-columns: 1fr;
    }

    .hp-link-group {
        padding: 18px;
    }

    .hp-brands-section,
    .hp-loc-section {
        padding: 36px 0;
    }

    .hp-facts {
        grid-template-columns: 1fr 1fr;
    }

    .hp-loc-picker {
        padding: 12px;
    }

    .hp-loc-list {
        grid-template-columns: 1fr 1fr;
        max-height: 300px;
    }
}

@media (max-width: 380px) {
    .hp-facts,
    .hp-loc-list {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Card styling (Hiring Pages only): every card gets a colour accent, a soft
   tint and a deeper shadow so the sections stop reading as one flat list of
   grey-bordered boxes. Accent / tint per card via --hp-accent / --hp-tint.
   ========================================================================== */
.hp-page {
    --hp-card-shadow: 0 14px 34px -20px rgba(1, 38, 65, 0.35), 0 2px 6px rgba(1, 38, 65, 0.04);
    --hp-card-shadow-hover: 0 22px 44px -18px rgba(1, 38, 65, 0.42), 0 2px 6px rgba(1, 38, 65, 0.05);
}

/* Hero: badge chips wrap, and neither column may grow wider than a phone screen. */
.hp-page .ar-trust-chips {
    flex-wrap: wrap;
}

.hp-page .ar-hero-grid > * {
    min-width: 0;
}

/* Hero illustration on its own layer so it can be tinted to the page's brand
   (--hp-hero-filter, set per brand below; green = AlphaReach for role-only pages and any
   brand without a tint). The white wash on the left keeps the title and pay readable over
   the coloured route line and map pins; hue-rotate leaves the white wash and the grey
   skyline as they are. */
.hp-page .ar-hero-section {
    background: #ffffff;
    isolation: isolate;
}

.hp-page .ar-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.55) 40%, rgba(255, 255, 255, 0) 56%),
        linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, #ffffff 100%),
        url('/assets/images/delivery-job-landing-hero-bg.png.webp') center center / cover no-repeat;
    filter: var(--hp-hero-filter, none);
}

.hp-page .ar-hero-section[data-hero-brand="zomato"] { --hp-hero-filter: hue-rotate(215deg) saturate(1.9); }
.hp-page .ar-hero-section[data-hero-brand="swiggy"] { --hp-hero-filter: hue-rotate(245deg) saturate(1.8); }
.hp-page .ar-hero-section[data-hero-brand="swiggy-instamart"] { --hp-hero-filter: hue-rotate(170deg) saturate(1.3); }
.hp-page .ar-hero-section[data-hero-brand="zepto"] { --hp-hero-filter: hue-rotate(130deg) saturate(1.3); }
.hp-page .ar-hero-section[data-hero-brand="blinkit"] { --hp-hero-filter: hue-rotate(-85deg) saturate(1.6) brightness(1.03); }
.hp-page .ar-hero-section[data-hero-brand="uber"] { --hp-hero-filter: grayscale(1) contrast(1.15); }

/* Phones: the hero is tall and narrow, so "cover" blew the wide illustration up and showed
   only empty sky. The text height differs per page, so a fixed-position rider would land on
   the title or pay on some pages. Instead: a faint skyline + route band at the top (rider
   cropped off), and the rider itself drawn at the right end of the brand logo row, which is
   always empty there. Both use the brand tint. */
@media (max-width: 768px) {
    .hp-page .ar-hero-section::before {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 230px, #ffffff 320px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.7) 100%),
            url('/assets/images/delivery-job-landing-hero-bg.png.webp') left top 20px / auto 300px no-repeat;
    }

    .hp-page .ar-hero-brand-logo-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    /* The rider + scooter, cropped from the same illustration (1774 x 887). */
    .hp-page .ar-hero-brand-logo-wrap::after {
        content: '';
        flex: 0 0 112px;
        width: 112px;
        height: 92px;
        background: url('/assets/images/delivery-job-landing-hero-bg.png.webp') -322px -98px / 457px 228px no-repeat;
        filter: var(--hp-hero-filter, none);
        /* Feather the crop so it blends into the page instead of reading as a box. */
        -webkit-mask-image: radial-gradient(ellipse 50% 50% at 55% 52%, #000 62%, transparent 100%);
        mask-image: radial-gradient(ellipse 50% 50% at 55% 52%, #000 62%, transparent 100%);
    }
}

/* Four selling points: one tinted card each instead of a single white strip. */
.hp-page .ar-benefits-strip {
    gap: 16px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.hp-page .ar-benefit-item {
    --hp-accent: #059b20;
    --hp-tint: #effdf2;
    padding: 18px;
    background: linear-gradient(180deg, var(--hp-tint) 0%, #ffffff 75%);
    border: 1px solid #e2e8f0;
    border-top: 4px solid var(--hp-accent);
    border-radius: 16px;
    box-shadow: var(--hp-card-shadow);
}

.hp-page .ar-benefit-item:nth-child(2) { --hp-accent: #0284c7; --hp-tint: #eff8ff; }
.hp-page .ar-benefit-item:nth-child(3) { --hp-accent: #7c3aed; --hp-tint: #f5f0ff; }
.hp-page .ar-benefit-item:nth-child(4) { --hp-accent: #d97706; --hp-tint: #fff8eb; }

.hp-page .ar-benefit-item::after {
    display: none;
}

.hp-page .ar-benefit-item:hover {
    background: linear-gradient(180deg, var(--hp-tint) 0%, #ffffff 75%);
    box-shadow: var(--hp-card-shadow-hover);
    transform: translateY(-3px);
}

/* Intro: green accent bar and tint. */
.hp-page .hp-intro-card {
    padding: 24px 28px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 65%);
    border: 1px solid #c7eed2;
    border-left: 5px solid #0aec33;
    box-shadow: var(--hp-card-shadow);
}

/* Responsibilities / requirements / benefits: three separate cards with a tinted header. */
.hp-page .ar-details-card {
    gap: 20px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.hp-page .ar-details-col {
    --hp-accent: #059b20;
    --hp-tint: #effdf2;
    padding: 0 24px 24px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 4px solid var(--hp-accent);
    border-radius: 18px;
    box-shadow: var(--hp-card-shadow);
}

.hp-page .ar-details-col:nth-child(2) { --hp-accent: #0284c7; --hp-tint: #eff8ff; }
.hp-page .ar-details-col:nth-child(3) { --hp-accent: #d97706; --hp-tint: #fff8eb; }

.hp-page .ar-details-col .ar-col-header {
    margin: 0 -24px;
    padding: 16px 24px;
    background: var(--hp-tint);
    border-bottom: 1px solid #e2e8f0;
    border-radius: 14px 14px 0 0;
}

.hp-page .ar-details-col .ar-col-icon {
    color: #ffffff;
    background: var(--hp-accent);
    box-shadow: 0 6px 14px -6px var(--hp-accent);
}

/* How it works: tinted step cards in each step's colour. */
.hp-page .ar-step-card {
    --hp-accent: #0284c7;
    --hp-tint: #eff8ff;
    padding: 26px 18px;
    background: linear-gradient(180deg, var(--hp-tint) 0%, #ffffff 70%);
    border: 1px solid #e2e8f0;
    border-bottom: 4px solid var(--hp-accent);
    border-radius: 18px;
    box-shadow: var(--hp-card-shadow);
}

.hp-page .ar-step-2 { --hp-accent: #059b20; --hp-tint: #effdf2; }
.hp-page .ar-step-3 { --hp-accent: #7c3aed; --hp-tint: #f5f0ff; }
.hp-page .ar-step-4 { --hp-accent: #ea580c; --hp-tint: #fff4ed; }

.hp-page .ar-step-card:hover {
    box-shadow: var(--hp-card-shadow-hover);
}

.hp-page .ar-step-desc {
    color: #334155;
    font-weight: 500;
}

/* FAQ: lifted items, green bar on the open one. */
.hp-page .ar-faq-item {
    border-left: 4px solid transparent;
    border-radius: 14px;
    box-shadow: var(--hp-card-shadow);
}

.hp-page .ar-faq-item.active {
    border-left-color: #0aec33;
}

/* Link groups ("More jobs near …"): tinted title bar, colour accent per group. */
.hp-page .hp-link-group {
    --hp-accent: #059b20;
    --hp-tint: #effdf2;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-top: 4px solid var(--hp-accent);
    box-shadow: var(--hp-card-shadow);
}

.hp-page .hp-link-group:nth-child(4n + 2) { --hp-accent: #0284c7; --hp-tint: #eff8ff; }
.hp-page .hp-link-group:nth-child(4n + 3) { --hp-accent: #7c3aed; --hp-tint: #f5f0ff; }
.hp-page .hp-link-group:nth-child(4n + 4) { --hp-accent: #d97706; --hp-tint: #fff8eb; }

.hp-page .hp-link-group .ar-local-col-title {
    padding: 16px 20px;
    background: var(--hp-tint);
    border-bottom: 1px solid #e2e8f0;
}

.hp-page .hp-link-group .ar-local-col-title i {
    color: var(--hp-accent);
}

.hp-page .hp-link-group .ar-area-pills {
    padding: 18px 20px 20px;
}

/* Company links in a link group: logo chip instead of the group icon. */
.hp-page .hp-logo-pill {
    gap: 8px;
    padding: 5px 14px 5px 5px;
    font-size: 13.5px;
}

.hp-pill-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
}

.hp-pill-logo img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* Hub key facts: a colour per fact. */
.hp-page .hp-fact {
    --hp-accent: #059b20;
    --hp-tint: #effdf2;
    background: linear-gradient(135deg, var(--hp-tint) 0%, #ffffff 80%);
    border-color: #e2e8f0;
    border-radius: 14px;
    box-shadow: var(--hp-card-shadow);
}

.hp-page .hp-fact:nth-child(4n + 2) { --hp-accent: #0284c7; --hp-tint: #eff8ff; }
.hp-page .hp-fact:nth-child(4n + 3) { --hp-accent: #7c3aed; --hp-tint: #f5f0ff; }
.hp-page .hp-fact:nth-child(4n + 4) { --hp-accent: #d97706; --hp-tint: #fff8eb; }

.hp-page .hp-fact i {
    color: #ffffff;
    background: var(--hp-accent);
}

/* Hub locality search: same accent and shadow as the other cards. */
.hp-page .hp-loc-picker {
    border-top: 4px solid #0aec33;
    box-shadow: var(--hp-card-shadow);
}

/* Hub company cards: green edge and arrow on hover. */
.hp-page .hp-brand-card {
    border-radius: 16px;
    box-shadow: var(--hp-card-shadow);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.hp-page .hp-brand-card:hover,
.hp-page .hp-brand-card:focus-visible {
    border-color: #0aec33;
    box-shadow: var(--hp-card-shadow-hover);
}

.hp-page .hp-brand-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    color: #047a19;
    background: #effdf2;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.hp-page .hp-brand-card:hover .hp-brand-arrow,
.hp-page .hp-brand-card:focus-visible .hp-brand-arrow {
    color: #012641;
    background: #0aec33;
}

@media (prefers-reduced-motion: reduce) {
    .hp-page .ar-benefit-item:hover {
        transform: none;
    }
}