/* ==========================================================================
   HealthClinicMD — Employee Benefits Page
   Same design system as about-page.css (same color values/patterns) so the
   two custom pages stay visually consistent.
   ========================================================================== */

.hcmd-eb {
    --hcmd-navy: #292f73;
    --hcmd-navy-deep: #252b69;
    --hcmd-cyan: #3fa7c2;
    --hcmd-cyan-dark: #248ca9;
    --hcmd-gold: #f5ae18;
    --hcmd-copy: #767676;
    --hcmd-light: #f3f3f3;
    --hcmd-card-head: #e7e7e7;
    --hcmd-container: 1440px;

    color: var(--hcmd-copy);
    background: #fff;
    overflow-x: hidden;
}

.hcmd-eb,
.hcmd-eb * {
    box-sizing: border-box;
}

.hcmd-eb h1,
.hcmd-eb h2,
.hcmd-eb h3,
.hcmd-eb h4,
.hcmd-eb a,
.hcmd-eb span,
.hcmd-eb button {
    font-family: "Panton", Arial, sans-serif !important;
}

.hcmd-eb p,
.hcmd-eb li {
    font-family: Arial, Helvetica, sans-serif !important;
}

.hcmd-eb .hcmd-eb-container {
    width: min(var(--hcmd-container), calc(100% - 80px));
    margin-inline: auto;
}

.hcmd-eb-gold {
    color: #F5AE18 !important;
}
.hcmd-eb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: 'Panton', sans-serif !important;
    font-weight: 700 !important;
    font-size: 25px;
    letter-spacing: 0.02em;
    padding: 15px 40px;
    border-radius: 4px;
    transition: .2s ease;
}

.hcmd-eb-btn-cyan {
    background: var(--hcmd-cyan);
    color: #fff !important;
}

.hcmd-eb-btn-cyan:hover {
    background: var(--hcmd-cyan-dark);
    color: #fff !important;
    transform: translateY(-1px);
}

.hcmd-eb-btn-navy {
    background: var(--hcmd-navy-deep);
    color: #fff !important;
}

.hcmd-eb-btn-navy:hover {
    background: #181b4d;
    color: #fff !important;
    transform: translateY(-1px);
}

.hcmd-eb-btn-gold {
    background: #F5AE18;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: 'Panton', sans-serif !important;
    font-weight: 700 !important;
    font-size: 30px;
    letter-spacing: 0.02em;
    padding: 15px 40px;
    transition: .2s ease;
}

.hcmd-eb-btn-gold:hover {
    background: #e09b0a;
    color: var(--hcmd-navy) !important;
    transform: translateY(-1px);
}

/* ---------- Shared section title ---------- */
.hcmd-eb-section {
    padding: 65px 0;
}

.hcmd-eb-section-title {
    margin: 0 0 10px;
    text-align: center;
    font-family: 'Panton', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(30px, 5.5vw, 60px);
    line-height: 1.028;
    letter-spacing: -1px;
    color: var(--hcmd-navy) !important;
}
.hcmd-eb-section-title-1 {
    margin: 0 0 10px;
    text-align: center;
    font-family: 'Panton', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(30px, 5.5vw, 60px);
    line-height: 1.028;
    letter-spacing: -1px;
    color: #40A6C1;
}
.hcmd-eb-section-subtitle {
    max-width: 1300px;
    margin: 0 auto 34px;
    text-align: center;
    color: #8E8E8E !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(16px, 1.8vw, 24px);
    line-height: 1.506;
    letter-spacing: 0.02em;
}

/* ---------- Hero ---------- */
.hcmd-eb-hero {
    background: radial-gradient(circle at 78% 22%, rgba(67, 170, 197, .22), transparent 32%), linear-gradient(135deg, #2e377c 0%, #222a67 100%);
    color: #fff;
    padding: 65px 0 65px;
    overflow: hidden;
    min-height: min(65vh, 620px);
}
.circle{
    display: flex;
    justify-content: center;
    align-items: center;
}
.hcmd-eb-hero-grid {
    display: grid;
    grid-template-columns: 3.95fr 1.92fr;
    gap: 60px;
    align-items: center;
}

.hcmd-eb-eyebrow {
    display: block;
    color: var(--hcmd-gold);
    line-height: 1;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 14px;
    font-size: 28px;
}

.hcmd-eb-hero h1 {
    margin: 0;
    font-family: 'Panton', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(52px, 5.5vw, 116px);
    line-height: 1;
    letter-spacing: -3px;
    color: #fff !important;
}

.hcmd-eb-hero p {
    margin: 40px 0 40px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(16px, 1.6vw, 26px);
    line-height: 1.387;
    color: rgba(255, 255, 255, .9);
    max-width: 874px;
}

.hcmd-eb-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.hcmd-eb-hero-panel {
    padding: 110px 105px;
    border-radius: 100px 0 0px 100px;
    background: linear-gradient(120deg, rgba(53, 174, 200, .96), rgba(31, 20, 115, .95));
    box-shadow: 0 30px 70px rgba(0, 0, 0, .16);
    margin-right: calc(-1 * max(20px, (100vw - var(--hcmd-container)) / 2));
}

.hcmd-eb-hero-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 3px;
}

.hcmd-eb-hero-panel li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 0px !important;
}

.hcmd-eb-hero-panel i {
    color: #6fd3e6;
    margin-top: 4px;
}

/* ---------- Three pricing options ---------- */
.hcmd-eb-options {
    background: #fff;
    padding: 65px 0 65px;
    margin-top: -1px;
}

.hcmd-eb-options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.hcmd-eb-option-card {
    display: flex;
    flex-direction: column;
    border-radius: 35px 35px 0px 0px;
    overflow: hidden;
    background: var(--hcmd-light);
}

.hcmd-eb-option-body {
    padding: 30px 26px;
    flex: 1;
}

.hcmd-eb-option-number {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--hcmd-cyan);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 31px;
    margin-bottom: 29px;
}

.hcmd-eb-option-body h3 {
    margin: 0 0 12px;
    font-family: 'Panton', sans-serif !important;
    font-weight: 700 !important;
    color: var(--hcmd-navy) !important;
    font-size: clamp(18px, 2.4vw, 30px);
    line-height: 0.965;
    letter-spacing: 1px;
}

.hcmd-eb-option-body > p {
    color: var(--hcmd-muted) !important;
    margin: 0 0 14px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 22px;
    line-height: 28px;
}

.hcmd-eb-option-body ul {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.hcmd-eb-option-body li {
    padding-left: 15px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 20px;
    line-height: 30px;
    color: #656b80;
    text-decoration: none !important;
}

.hcmd-eb-option-body li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--hcmd-gold);
}

.hcmd-eb-option-footer {
    background: var(--hcmd-navy-deep);
    color: #fff;
    padding: 18px 26px;
}

.hcmd-eb-option-label {
    display: block;
    color: var(--hcmd-gold);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.hcmd-eb-option-footer p {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 25px;
    color: #fff;
    line-height: 40px;
}

/* ---------- Why Employers Partner With Us ---------- */
.hcmd-eb-why {
    background: var(--hcmd-light);
}

.hcmd-eb-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.hcmd-eb-why-card {
    /* Matches .hcmd-service-card on the home page: icon banner strip
       across the top, rounded card below. */
    background: #fff;
    border-radius: 22px 22px 0 0;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(20, 31, 75, .05);
    display: flex;
    flex-direction: column;
    text-align: left;
}

.hcmd-eb-why-icon {
    background: #E6E6E6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #40A6C2 !important;
    font-size: 38px;
    height: 80px;
}

.hcmd-eb-why-content {
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.hcmd-eb-why-content h3 {
    margin: 0px 0 20px;
    font-family: 'Panton', sans-serif !important;
    font-weight: 700 !important;
    color: #292F73 !important;
    font-size: clamp(18px, 2.4vw, 30px);
    line-height: 0.965;
    letter-spacing: 1px;
}

.hcmd-eb-why-content p {
    margin: 0 0 14px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 22px;
    line-height: 28px;
    color: #6E748A ! IMPORTANT;
}

/* ---------- What Your Employees Get ---------- */
.hcmd-eb-get {
    background: #fff;
}

.hcmd-eb-get-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.hcmd-eb-get-card {
    border-radius: 35px;
    padding: 24px 26px;
    background: #F2F2F2;
    /* Grid items stretch to equal height by default, so without an
       explicit top-aligned flex layout, cards with shorter text end up
       with their content vertically centered while cards with longer
       wrapped titles (e.g. "Injury Healing + Prevention") start closer to
       the top — titles then don't line up consistently across the row. */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.hcmd-eb-get-card h3 {
    font-weight: 700 !important;
    font-size: 35px;
    margin: 0 0 10px;
    color: #40A6C1;
}

.hcmd-eb-get-card p {
    margin: 0 0 14px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 22px;
    line-height: 28px;
    color: #6E748A ! IMPORTANT;
}

/* ---------- Add Urgent Care ---------- */
.hcmd-eb-urgent {
    color: #fff;
    text-align: center;
    padding: 65px 0 0;
    background: #40A6C1;
}

.hcmd-eb-urgent-title {
    color: #fff !important;
}

.hcmd-eb-urgent-subtitle {
    color: rgba(255, 255, 255, .9) !important;
}

.hcmd-eb-urgent-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 65px;
}

.hcmd-eb-urgent-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #2889A9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    margin: 0 auto 16px;
}

.hcmd-eb-urgent-item h3 {
    font-weight: 700 !important;
    font-size: 30px;
    color: #fff !important;
    margin: 0 0 12px;
}

.hcmd-eb-urgent-item p {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 21px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .9);
    margin: 0;
}

.hcmd-eb-price-banner {
    background:#252b69;
    border-radius: 35px 35px 0px 0px;
    padding: 28px;
    max-width: 850px;
    margin: 0 auto;
}

.hcmd-eb-price-banner h3 {
    margin: 0 0 6px;
    font-weight: 700 !important;
    font-size: clamp(24px, 3vw, 60px);
    color: #fff !important;
    /* Unitless ratio, not a fixed px value — otherwise the line box stays
       60px tall even once the clamped font-size shrinks toward 24px on
       mobile, leaving an oversized gap around small text. */
    line-height: 1.15;
}

.hcmd-eb-price-banner h3 .hcmd-eb-gold {
    font-size: clamp(30px, 5vw, 64px);
}

.hcmd-eb-price-banner p {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 23px;
    color: rgba(255, 255, 255, .85);
    font-style: italic;
}

/* ---------- Simple to Launch ---------- */
.hcmd-eb-launch {
    background: var(--hcmd-light);
}

.hcmd-eb-launch-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    text-align: center;
}

.hcmd-eb-launch-number {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #B4D569;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 25px;
    margin: 0 auto 16px;
}

.hcmd-eb-launch-step h3 {
    font-weight: 700 !important;
    font-size: 35px;
    color: #292F73 !important;
    margin: 0px 0 12px;
}

.hcmd-eb-launch-step p {
    margin: 0 0 14px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 22px;
    line-height: 28px;
    color: #6E748A ! IMPORTANT;
}

/* ---------- More Than a Sign-Up ---------- */
.hcmd-eb-support {
    background: var(--hcmd-navy-deep);
    padding: 65px 0;
}

.hcmd-eb-support-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 60px;
    align-items: center;
}

.hcmd-eb-support-grid h2 {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: clamp(26px, 3.5vw, 38px);
    line-height: 1.15;
    margin: 0 0 18px;
}

.hcmd-eb-support-grid > div:first-child > p {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .85);
    max-width: 460px;
    margin: 0 0 28px;
}

.hcmd-eb-support-list {
    display: grid;
    gap: 24px;
}

.hcmd-eb-support-item {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 16px;
}

.hcmd-eb-support-item i {
    color: var(--hcmd-cyan);
    font-size: 20px;
    margin-top: 3px;
}

.hcmd-eb-support-item h3 {
    font-weight: 700 !important;
    font-size: 17px;
    color: #fff !important;
    margin: 0 0 6px;
}

.hcmd-eb-support-item p {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .78);
    margin: 0;
}

/* ---------- A Benefit Your Team Will Actually Use (ported from home page) ----------
   Uses the home page's unprefixed class names (.hcmd-container, .hcmd-btn,
   .hcmd-benefit-list, etc.) as-is, so these rules are scoped under .hcmd-eb
   rather than .hcmd-home — this page has no other use of these class names,
   so there's no collision risk. */
.hcmd-eb .hcmd-container {
    width: min(var(--hcmd-container), calc(100% - 40px));
    margin: auto;
}

.hcmd-eb .hcmd-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 13px 24px;
    font-weight: 700;
    transition: .25s ease;
    border: 0;
    cursor: pointer;
    text-decoration: none;
}

.hcmd-eb .hcmd-btn-primary {
    background-color: #161a4b !important;
    color: #fff !important;
}

.hcmd-eb .hcmd-btn-primary:hover {
    background-color: #1d245b !important;
    transform: translateY(-2px);
    color: #fff !important;
}

.hcmd-eb .hcmd-employer {
    background: #262c69;
    color: #fff;
    padding: 65px 0;
}

.hcmd-eb .hcmd-employer-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: center;
}

.hcmd-eb .hcmd-employer h2 {
    font-family: 'Panton', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(32px, 5.5vw, 62px);
    line-height: 1.06;
    margin: 0 0 18px;
    color: #fff !important;
}

.hcmd-eb .hcmd-employer h2 span {
    color: var(--hcmd-gold) !important;
}

.hcmd-eb .hcmd-employer p {
    color: rgba(255, 255, 255, .9) !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(16px, 1.9vw, 23px);
    line-height: 1.387;
    max-width: 550px;
}

.hcmd-eb .hcmd-employer .hcmd-btn-primary {
    font-family: 'Panton', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(18px, 2.4vw, 33px);
    line-height: 1.067;
}

.hcmd-eb .hcmd-benefit-list {
    display: grid;
    gap: 25px;
}

.hcmd-eb .hcmd-benefit-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 30px;
}

.hcmd-eb .hcmd-benefit-item i {
    color: var(--hcmd-cyan);
    font-size: 23px;
    margin-top: 4px;
}

.hcmd-eb .hcmd-benefit-item h3 {
    margin: 0 0 12px;
    font-family: 'Panton', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(18px, 2vw, 27px);
    line-height: 0.965;
    letter-spacing: 0.02em;
    color: #fff !important;
}

.hcmd-eb .hcmd-benefit-item p {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 23px;
    line-height: 1.325;
    color: rgba(255, 255, 255, .84) !important;
}

@media (max-width: 1024px) {
    .hcmd-eb .hcmd-employer-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Closing CTA ---------- */
.hcmd-eb-cta {
    background: var(--hcmd-light);
    padding: 65px 0;
    text-align: center;
}

.hcmd-eb-cta h2 {
    margin: 0 0 10px;
    text-align: center;
    font-family: 'Panton', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(30px, 5.5vw, 60px);
    line-height: 1.028;
    letter-spacing: -1px;
    color: #292F73 !important;
}

.hcmd-eb-cta p {
   max-width: 730px;
    margin: 0 auto 30px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 22px;
    line-height: 1.55;
    color: #767676;
}

/* ---------- Medium desktop (e.g. 1366px laptops) ----------
   The hero grid's 3.95fr/1.92fr ratio plus the panel's 105px side padding
   only leaves ~190px for checklist text at common "smaller desktop" widths
   like 1366px, forcing every line to wrap to two — but at true wide
   desktop (1920px+) that same ratio has plenty of absolute width and looks
   fine. Scoped here instead of changing the base rule, so wide desktop
   keeps its original proportions and only this in-between range gets the
   adjustment. Sits above the ≤1024px breakpoint below, where the grid
   already stacks to one column and this no longer applies. */
@media (max-width: 1400px) {
    .hcmd-eb-hero-grid {
        grid-template-columns: 1.1fr 1fr;
    }

    .hcmd-eb-hero-panel {
        padding: 64px 56px;
    }

    /* Laptop tier: headings/titles/paragraphs sized down a notch from
       desktop — desktop itself (>1400px) is untouched. */
    .hcmd-eb-eyebrow {
        font-size: 22px;
    }

    .hcmd-eb-btn {
        font-size: 19px;
        padding: 13px 32px;
    }

    .hcmd-eb-btn-gold {
        font-size: 22px;
        padding: 13px 32px;
    }

    .hcmd-eb-hero-panel li {
        font-size: 20px;
    }

    .hcmd-eb-option-body > p,
    .hcmd-eb-why-content p,
    .hcmd-eb-get-card p,
    .hcmd-eb-launch-step p {
        font-size: 18px;
        line-height: 1.5;
    }

    .hcmd-eb-option-body li {
        font-size: 17px;
        line-height: 1.5;
    }

    .hcmd-eb-get-card h3 {
        font-size: 28px;
    }

    .hcmd-eb-urgent-item h3 {
        font-size: 24px;
    }

    .hcmd-eb-urgent-item p {
        font-size: 17px;
    }

    .hcmd-eb-launch-step h3 {
        font-size: 28px;
    }

    .hcmd-eb .hcmd-benefit-item p {
        font-size: 19px;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .hcmd-eb .hcmd-eb-container {
        width: min(100% - 48px, var(--hcmd-container));
    }

    .hcmd-eb-hero-grid,
    .hcmd-eb-support-grid {
        grid-template-columns: 1fr;
    }

    .hcmd-eb-btn {
        font-size: 17px;
        padding: 12px 28px;
    }

    .hcmd-eb-btn-gold {
        font-size: 19px;
        padding: 12px 28px;
    }

    .hcmd-eb-options-grid,
    .hcmd-eb-why-grid,
    .hcmd-eb-urgent-grid,
    .hcmd-eb-launch-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hcmd-eb-get-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* The hero grid has already stacked to one column here, so the panel's
       full-bleed-to-viewport-edge margin and its huge desktop padding no
       longer make sense — previously only border-radius was reset,
       leaving the panel oversized and bleeding past the stacked layout. */
    .hcmd-eb-hero-panel {
        margin-right: 0;
        padding: 48px 40px;
        border-radius: 40px;
    }

    /* Tablet tier: a further step down from the laptop tier above (this
       block comes later in the file, so it wins at ≤1024px). */
    .hcmd-eb-section-title,
    .hcmd-eb-section-title-1,
    .hcmd-eb-cta h2 {
        font-size: clamp(26px, 4.5vw, 40px);
    }

    .hcmd-eb-section-subtitle {
        font-size: clamp(14px, 1.6vw, 18px);
    }

    .hcmd-eb-hero h1 {
        font-size: clamp(38px, 5vw, 64px);
        /* Base rule's -3px letter-spacing is tuned for the 116px desktop
           size (~2.5% tightening) — at this smaller size the same -3px is
           proportionally much more aggressive, so it's scaled down here. */
        letter-spacing: -1.5px;
    }

    .hcmd-eb-hero p {
        font-size: 16px;
    }

    .hcmd-eb-eyebrow {
        font-size: 18px;
    }

    .hcmd-eb-hero-panel li {
        font-size: 17px;
    }

    .hcmd-eb-option-body h3,
    .hcmd-eb-why-content h3 {
        font-size: 20px;
    }

    .hcmd-eb-option-body > p,
    .hcmd-eb-why-content p,
    .hcmd-eb-get-card p,
    .hcmd-eb-launch-step p,
    .hcmd-eb-cta p {
        font-size: 15px;
        line-height: 1.45;
    }

    .hcmd-eb-option-body li {
        font-size: 14px;
    }

    .hcmd-eb-get-card h3,
    .hcmd-eb-launch-step h3 {
        font-size: 20px;
    }

    .hcmd-eb-urgent-item h3 {
        font-size: 18px;
    }

    .hcmd-eb-urgent-item p {
        font-size: 14px;
    }

    .hcmd-eb-price-banner p {
        font-size: 15px;
    }

    .hcmd-eb-support-grid h2 {
        font-size: clamp(22px, 3vw, 28px);
    }

    .hcmd-eb-support-grid > div:first-child > p {
        font-size: 14px;
    }

    .hcmd-eb-support-item h3 {
        font-size: 15px;
    }

    .hcmd-eb-support-item p {
        font-size: 13px;
    }

    .hcmd-eb .hcmd-employer h2 {
        font-size: clamp(26px, 4.5vw, 38px);
    }

    .hcmd-eb .hcmd-employer p {
        font-size: 15px;
    }

    .hcmd-eb .hcmd-benefit-item h3 {
        font-size: 18px;
    }

    .hcmd-eb .hcmd-benefit-item p {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .hcmd-eb .hcmd-eb-container {
        width: min(100% - 30px, var(--hcmd-container));
    }

    .hcmd-eb-section {
        padding: 40px 0;
    }

    .hcmd-eb-btn {
        font-size: 15px;
        padding: 11px 24px;
    }

    .hcmd-eb-btn-gold {
        font-size: 16px;
        padding: 11px 24px;
    }

    .hcmd-eb-options-grid,
    .hcmd-eb-why-grid,
    .hcmd-eb-get-grid,
    .hcmd-eb-urgent-grid,
    .hcmd-eb-launch-grid {
        grid-template-columns: 1fr;
    }

    .hcmd-eb-hero-actions {
        flex-direction: column;
    }

    .hcmd-eb-hero-actions .hcmd-eb-btn {
        width: 100%;
    }

    .hcmd-eb-hero-panel {
        padding: 32px 24px;
        border-radius: 24px;
    }

    /* Mobile tier: smallest step, one more notch down from tablet. */
    .hcmd-eb-section-title,
    .hcmd-eb-section-title-1,
    .hcmd-eb-cta h2 {
        font-size: clamp(22px, 6vw, 30px);
    }

    .hcmd-eb-section-subtitle {
        font-size: 14px;
    }

    .hcmd-eb-hero h1 {
        font-size: clamp(30px, 8vw, 42px);
        letter-spacing: -0.5px;
    }

    .hcmd-eb-hero p {
        font-size: 14px;
    }

    .hcmd-eb-eyebrow {
        font-size: 15px;
    }

    .hcmd-eb-hero-panel li {
        font-size: 15px;
    }

    .hcmd-eb-option-body h3,
    .hcmd-eb-why-content h3 {
        font-size: 18px;
    }

    .hcmd-eb-option-body > p,
    .hcmd-eb-why-content p,
    .hcmd-eb-get-card p,
    .hcmd-eb-launch-step p,
    .hcmd-eb-cta p {
        font-size: 14px;
        line-height: 1.4;
    }

    .hcmd-eb-option-body li {
        font-size: 13px;
    }

    .hcmd-eb-get-card h3,
    .hcmd-eb-launch-step h3 {
        font-size: 18px;
    }

    .hcmd-eb-urgent-item h3 {
        font-size: 16px;
    }

    .hcmd-eb-urgent-item p {
        font-size: 13px;
    }

    .hcmd-eb-price-banner p {
        font-size: 13px;
    }

    .hcmd-eb-support-grid h2 {
        font-size: clamp(20px, 5vw, 24px);
    }

    .hcmd-eb-support-grid > div:first-child > p,
    .hcmd-eb-support-item p {
        font-size: 13px;
    }

    .hcmd-eb-support-item h3 {
        font-size: 14px;
    }

    .hcmd-eb .hcmd-employer h2 {
        font-size: clamp(24px, 6vw, 30px);
    }

    .hcmd-eb .hcmd-employer p {
        font-size: 14px;
    }

    .hcmd-eb .hcmd-benefit-item h3 {
        font-size: 16px;
    }

    .hcmd-eb .hcmd-benefit-item p {
        font-size: 14px;
    }
}


/* ===== Pixel-match overrides for supplied Employee Benefits reference ===== */
/* .hcmd-eb{--hcmd-container:1180px}
.hcmd-eb .hcmd-eb-container{width:min(var(--hcmd-container),calc(100% - 74px))}
.hcmd-eb-hero{padding:54px 0 50px;background:#2d3273}
.hcmd-eb-hero-grid{grid-template-columns:1.18fr .82fr;gap:55px}
.hcmd-eb-eyebrow{font-size:13px;letter-spacing:2.8px;margin-bottom:8px}
.hcmd-eb-hero h1{font-size:clamp(42px,4.2vw,61px);line-height:.98;margin-bottom:16px}
.hcmd-eb-hero p{font-size:14px;line-height:1.42;margin-bottom:24px}
.hcmd-eb-btn{min-height:42px;padding:10px 28px;border-radius:0;font-size:15px}
.hcmd-eb-hero-actions{gap:9px}
.hcmd-eb-hero-panel{padding:38px 42px;border-radius:46px 0 0 46px;background:linear-gradient(100deg,#41a9c4 0%,#258ca9 45%,#252b68 100%);box-shadow:none}
.hcmd-eb-hero-panel ul{gap:11px}
.hcmd-eb-hero-panel li{font-size:14px;gap:8px}
.hcmd-eb-options{padding:42px 0 28px}
.hcmd-eb-options-grid{gap:22px}
.hcmd-eb-option-card{border-radius:14px 14px 0 0}
.hcmd-eb-option-body{padding:26px 22px 22px}
.hcmd-eb-option-number{width:46px;height:46px;margin:0 auto 16px;font-size:23px}
.hcmd-eb-option-body h3{font-size:17px;line-height:1.1;margin-bottom:7px}
.hcmd-eb-option-body>p,.hcmd-eb-option-body li{font-size:11px;line-height:1.35}
.hcmd-eb-option-footer{padding:16px 22px 18px;background:#181d55}
.hcmd-eb-option-label{font-size:9px;letter-spacing:1.5px}
.hcmd-eb-option-footer p{font-size:13px;line-height:1.25}
.hcmd-eb-section{padding:40px 0 44px}
.hcmd-eb-section-title{font-size:32px;line-height:1.1;margin-bottom:4px;letter-spacing:0}
.hcmd-eb-section-subtitle{font-size:13px;margin-bottom:26px}
.hcmd-eb-why-grid{gap:16px}
.hcmd-eb-why-card{min-height:210px;padding:0 0 18px;border-radius:14px 14px 0 0;text-align:left}
.hcmd-eb-why-icon{width:100%;height:46px;margin:0 0 12px;border-radius:14px 14px 0 0}
.hcmd-eb-why-card h3{font-size:16px;line-height:1.06;margin:0 14px 8px}
.hcmd-eb-why-card p{font-size:11px;line-height:1.35;padding:0 14px}
.hcmd-eb-get .hcmd-eb-section-title{color:#43a9c5!important}
.hcmd-eb-get-grid{gap:16px}
.hcmd-eb-get-card{min-height:115px;padding:18px;border-radius:15px}
.hcmd-eb-get-card h3{font-size:15px;margin-bottom:8px;color:#43a9c5!important}
.hcmd-eb-get-card p{font-size:11px;line-height:1.35}
.hcmd-eb-urgent{padding:36px 0 0}
.hcmd-eb-urgent-grid{gap:22px;margin-bottom:34px}
.hcmd-eb-urgent-icon{width:42px;height:42px;margin-bottom:10px;font-size:17px}
.hcmd-eb-urgent-item h3{font-size:15px;margin-bottom:6px}
.hcmd-eb-urgent-item p{font-size:11px;line-height:1.35;max-width:205px;margin:auto}
.hcmd-eb-price-banner{max-width:610px;padding:18px 20px 16px;border-radius:30px 30px 0 0}
.hcmd-eb-price-banner h3{font-size:29px;line-height:1.1}
.hcmd-eb-price-banner h3 span{font-size:51px;vertical-align:-6px}
.hcmd-eb-price-banner p{font-size:11px;font-style:italic}
.hcmd-eb-launch-grid{gap:22px}
.hcmd-eb-launch-number{width:36px;height:36px;margin-bottom:12px;background:#a8d85c}
.hcmd-eb-launch-step h3{font-size:15px;margin-bottom:6px}
.hcmd-eb-launch-step p{font-size:11px;line-height:1.35}
.hcmd-eb-support{padding:46px 0;background:#2d3273}
.hcmd-eb-support-grid{gap:56px}
.hcmd-eb-support-grid h2{font-size:33px;line-height:1.05;margin-bottom:16px}
.hcmd-eb-support-grid>div:first-child>p{font-size:13px;line-height:1.4;margin-bottom:22px}
.hcmd-eb-support-list{gap:18px}
.hcmd-eb-support-item{grid-template-columns:22px 1fr;gap:12px}
.hcmd-eb-support-item h3{font-size:15px;margin-bottom:4px}
.hcmd-eb-support-item p{font-size:11px;line-height:1.35}
.hcmd-eb-cta{padding:38px 0 44px;background:#fff}
.hcmd-eb-cta h2{font-size:31px;margin-bottom:8px}
.hcmd-eb-cta p{font-size:12px;line-height:1.45;margin-bottom:20px} */