/* ============================================================
   ESP 2026 — Responsive media queries
   Targets the .ew-* class layer that lives in stylesheet2026.css.
   All px units. No duplication with Landing.css.
   ============================================================ */

/* ===== LANDING-SHARED BREAKPOINTS (mirrors Landing.css inline @media rules) ===== */

@media (max-width: 991px) {
    section[class*="ew-"][class*="-section"],
    .ew-section,
    .ew-intro-section,
    .ew-final-cta {
        padding-top: var(--ew-section-py-md);
        padding-bottom: var(--ew-section-py-md);
    }

    .ew-section-head h2 {
        font-size: 34px;
    }

    .ew-intro-heading {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .ew-pillar-panel {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .ew-pillar-copy h3 {
        font-size: 28px;
    }

    .ew-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ew-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ew-stat-cell:nth-child(2) {
        border-right: none;
    }

    .ew-stat-cell:nth-child(3) {
        border-top: 1px solid var(--ew-line);
    }

    .ew-stat-cell:nth-child(4) {
        border-top: 1px solid var(--ew-line);
        border-right: none;
    }

    /* Case study horizontal cards stack at tablet/mobile (logo on top, body below) */
    .ew-case-card-h,
    .ew-case-row > .ew-case-card-h:nth-child(even) {
        grid-template-columns: 1fr;
    }
    .ew-case-row > .ew-case-card-h:nth-child(even) .ew-case-card-h-figure { order: 0; }
    .ew-case-row > .ew-case-card-h:nth-child(even) .ew-case-card-h-body { order: 0; }
    .ew-case-card-h-figure { padding: 28px 22px; min-height: 140px; }
    .ew-case-card-h-figure img { max-height: 90px; }
    .ew-case-card-h-body { padding: 24px 22px 22px; }
    .ew-case-card-h-stats { gap: 6px 12px; }
    .ew-case-card-h-stats li + li { padding-left: 12px; }

    /* Bento hero card scales down at lg/md/sm */
    .ew-case-hero-card { padding: 32px 28px 28px; }
    .ew-case-hero-card h3 { font-size: 24px; }
    .ew-case-hero-num { font-size: 30px; }
    .ew-case-hero-stats { gap: 18px 24px; }

    /* 5-up stat grid collapses to 2 cols on md and below */
    .ew-stat-grid.ew-stat-grid--five {
        grid-template-columns: repeat(2, 1fr);
    }
    .ew-stat-grid.ew-stat-grid--five .ew-stat-cell:nth-child(2) { border-right: none; }
    .ew-stat-grid.ew-stat-grid--five .ew-stat-cell:nth-child(n+3) { border-top: 1px solid var(--ew-line); }
    .ew-stat-grid.ew-stat-grid--five .ew-stat-cell:nth-child(4) { border-right: none; }
    .ew-stat-grid.ew-stat-grid--five .ew-stat-cell:nth-child(5) { grid-column: span 2; border-right: none; }

    /* 5-step flow collapses to 2 cols, hide connector */
    .ew-step-flow.ew-step-flow--five {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 20px;
    }
    .ew-step-flow.ew-step-flow--five::before {
        display: none;
    }
}

@media (max-width: 767px) {
    .ew-hero-caption h1 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .ew-hero-caption .BannerTxt {
        font-size: 34px;s
        letter-spacing: -1px;
    }

    .ew-hero-caption .ew-hero-sub {
        font-size: 15px;
    }

    #ewHeroCarousel .carousel-item {
        min-height: 420px;
    }

    .ew-final-cta h2 {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .ew-hide-mobile {
        display: none !important;
    }

    section[class*="ew-"][class*="-section"],
    .ew-section,
    .ew-intro-section,
    .ew-final-cta {
        padding-top: var(--ew-section-py-sm);
        padding-bottom: var(--ew-section-py-sm);
    }
}

@media (max-width: 575px) {
    section[class*="ew-"][class*="-section"],
    .ew-section,
    .ew-intro-section,
    .ew-final-cta {
        padding-top: var(--ew-section-py-xs);
        padding-bottom: var(--ew-section-py-xs);
    }

    .ew-section-head h2 {
        font-size: 28px;
    }

    .ew-section-head {
        margin-bottom: 40px;
    }

    .ew-intro-heading {
        font-size: 30px;
        letter-spacing: -.8px;
    }

    .ew-why-grid {
        grid-template-columns: 1fr;
    }

    .ew-stat-grid {
        grid-template-columns: 1fr;
    }

    /* 5-up stat grid stacks to single column at xs */
    .ew-stat-grid.ew-stat-grid--five {
        grid-template-columns: 1fr;
    }
    .ew-stat-grid.ew-stat-grid--five .ew-stat-cell {
        border-right: none;
        border-top: 1px solid var(--ew-line);
    }
    .ew-stat-grid.ew-stat-grid--five .ew-stat-cell:first-child { border-top: 0; }
    .ew-stat-grid.ew-stat-grid--five .ew-stat-cell:nth-child(5) { grid-column: auto; }

    /* 5-step flow stacks to single column at xs */
    .ew-step-flow.ew-step-flow--five {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ew-stat-cell {
        border-right: none;
        border-bottom: 1px solid var(--ew-line);
    }

        .ew-stat-cell:last-child {
            border-bottom: none;
        }

    .ew-stat-num {
        font-size: 42px;
        letter-spacing: -1.4px;
    }

    .ew-steps-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PAGE EXTENSION BREAKPOINTS (SalaryPackaging.cshtml only)
   ============================================================ */

/* ----- Pre-tax category icons ----- */
@media (max-width: 767px) {
    .ew-cat-row {
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
    }

    .ew-cat {
        padding: 12px 6px;
    }

    .ew-cat-ic {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .ew-cat-name {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .ew-cat-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ----- Video card ----- */
@media (max-width: 767px) {
    .ew-video-caption {
        padding: 14px 18px;
        font-size: 12px;
    }
}

/* ----- NFP comparison cards ----- */
@media (max-width: 991px) {
    .ew-compare-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

@media (max-width: 575px) {
    .ew-compare-card {
        padding: 26px 22px 22px;
    }

    .ew-cc-head h3 {
        font-size: 18px;
    }

    .ew-cc-tval {
        font-size: 26px;
    }

    .ew-cc-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .ew-cc-val {
        text-align: left;
        font-size: 16px;
    }
}

/* ----- Image hero card ----- */
@media (max-width: 991px) {
    .ew-hero-card {
        grid-template-columns: 1fr;
    }

    .ew-hc-img {
        min-height: 240px;
    }

    .ew-hc-body {
        padding: 32px 28px;
    }

        .ew-hc-body h3 {
            font-size: 26px;
            letter-spacing: -.6px;
        }
}

@media (max-width: 575px) {
    .ew-hc-img {
        min-height: 200px;
    }

    .ew-hc-body {
        padding: 24px 20px;
    }

        .ew-hc-body h3 {
            font-size: 22px;
        }
}

/* ----- Industries grid ----- */
@media (max-width: 991px) {
    .ew-ind-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .ew-ind-card {
        padding: 22px 20px;
    }
}

@media (max-width: 540px) {
    .ew-ind-grid {
        grid-template-columns: 1fr;
    }

    .ew-ind-card {
        padding: 20px 18px;
    }

    .ew-ind-ttl {
        font-size: 16px;
    }
}

/* ----- FAQ accordion ----- */
@media (max-width: 991px) {
    .ew-faq-item > summary {
        padding: 18px 20px;
        font-size: 15px;
    }

    .ew-faq-body {
        padding: 0 20px 20px;
        font-size: 14px;
    }
}

@media (max-width: 540px) {
    .ew-faq-item > summary {
        padding: 16px 16px;
        font-size: 14px;
        gap: 12px;
    }

        .ew-faq-item > summary::after {
            width: 26px;
            height: 26px;
            font-size: 18px;
        }

    .ew-faq-body {
        padding: 0 16px 18px;
        font-size: 14px;
    }
}

/* ----- Slick subscription box ----- */
@media (max-width: 767px) {
    .ew-sub-box {
        width: 340px;
    }

    .ew-sub-head-inner {
        padding: 14px 18px;
        min-height: 52px;
        gap: 10px;
    }

    .ew-sub-title {
        font-size: 13px;
        gap: 10px;
    }

        .ew-sub-title .ew-sub-subtitle {
            font-size: 11px;
        }

    .ew-sub-box .ew-phone-pill {
        padding: 6px 10px;
        font-size: 11px;
        gap: 6px;
    }
}

@media (max-width: 540px) {
    .ew-sub-box {
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0 !important;
    }

    .ew-sub-head-inner {
        padding: 12px 16px;
        min-height: 48px;
    }

    .ew-sub-title .ew-sub-subtitle {
        display: none;
    }

    .ew-sub-box .ew-phone-pill span {
        display: none;
    }

    .ew-sub-box .ew-phone-pill {
        padding: 8px 10px;
        gap: 0;
    }

    .ew-sub-area-inner {
        padding: 4px 12px 10px;
    }
}

/* ----- Modal restyle ----- */
@media (max-width: 767px) {
    .ew-modal .modal-body {
        padding: 16px;
    }

    .ew-modal .ew-modal-close {
        width: 32px;
        height: 32px;
        font-size: 16px;
        top: 12px;
        right: 12px;
    }
}

/* ============================================================
   GLOBAL HEADER + FOOTER (ctrlHeader.ascx / ctrlFooter.ascx)
   ============================================================ */

/* ----- Utility bar ----- */
@media (max-width: 991px) {
    .ew-util-bar .ew-util-row { gap: 6px; padding: 7px 0; }
    .ew-util-bar .ew-util-left,
    .ew-util-bar .ew-util-right { gap: 14px; }
}
@media (max-width: 767px) {
    .ew-util-bar .ew-live-pill { font-size: 11px; padding: 3px 8px; }
    .ew-util-bar .ew-util-login { padding: 3px 10px; font-size: 12px; }
    .ew-util-bar { font-size: 12px; }
}
@media (max-width: 540px) {
    .ew-util-bar .ew-util-row { justify-content: center; text-align: center; }
    .ew-util-bar .ew-util-left,
    .ew-util-bar .ew-util-right { justify-content: center; width: 100%; gap: 12px; }
    .ew-util-bar .ew-live-pill { display: none; }
}

/* ============================================================
   INDUSTRY SPECIALISTS — page-specific responsive rules
   ============================================================ */

/* ----- Feature row (Beyond a service) ----- */
@media (max-width: 991px) {
    .ew-feature-row { grid-template-columns: 1fr 1fr; gap: 16px; }
    .ew-feature-card { padding: 28px 24px 24px; }
    .ew-feature-card h3 { font-size: 20px; }
    /* prob-card variant — 2-up at tablet, basis matches the new gap. */
    .ew-feature-row.prob-card > .ew-feature-card {
        flex-basis: calc((100% - 16px) / 2);
    }
}
@media (max-width: 575px) {
    .ew-feature-row { grid-template-columns: 1fr; gap: 14px; }
    .ew-feature-card { padding: 24px 20px; }
    .ew-feature-card h3 { font-size: 18px; }
    .ew-feature-ic { width: 46px; height: 46px; font-size: 19px; margin-bottom: 18px; }
    /* prob-card variant — single column on phones. */
    .ew-feature-row.prob-card > .ew-feature-card {
        flex-basis: 100%;
    }
}

/* ----- Image card ----- */
@media (max-width: 767px) {
    .ew-image-section { padding: 36px 0; }
    .ew-image-card { border-radius: var(--ew-radius); }
}

/* ----- Pillars tab bar ----- */
@media (max-width: 991px) {
    .ew-pillars-section .tabs li { padding: 14px 18px; font-size: 13px; }
    .ew-pillars-section .tab_container { padding: 30px 28px; }
    .ew-pillars-section .tab_content h3 { font-size: 24px; }
}
@media (max-width: 575px) {
    .ew-pillars-section .tabs { gap: 8px; margin-bottom: 24px; }
    .ew-pillars-section .tabs li { padding: 12px 14px; font-size: 12.5px; }
    .ew-pillars-section .tabs li .sa,
    .ew-pillars-section .tabs li > div { font-size: 20px; }
    .ew-pillars-section .tab_container { padding: 24px 20px; }
    .ew-pillars-section .tab_content h3 { font-size: 20px; }
    .ew-pillars-section .tab_content .BodyText { font-size: 14px; }
}

/* ----- Testimonials ----- */
@media (max-width: 767px) {
    .ew-testimonials-section .youtube-icon { width: 44px; }
}

/* ----- Partner grid ----- */
@media (max-width: 1199px) {
    .ew-partners-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 991px) {
    .ew-partners-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .ew-partners-cell { min-height: 96px; padding: 16px 12px; }
    .ew-partners-cell img { max-height: 60px; }
}
@media (max-width: 767px) {
    .ew-partners-grid { grid-template-columns: repeat(3, 1fr); }
    .ew-partners-filter { gap: 6px; margin-bottom: 28px; }
    .ew-partners-filter-btn { padding: 7px 14px; font-size: 12.5px; }
}
@media (max-width: 480px) {
    .ew-partners-grid { grid-template-columns: repeat(2, 1fr); }
    .ew-partners-cell { min-height: 84px; padding: 14px 10px; }
    .ew-partners-cell img { max-height: 50px; }
}

/* ----- Tight-top stats spacing ----- */
@media (max-width: 767px) {
    .ew-tight-top { padding-top: 40px; }
}

/* ============================================================
   LET'S GET STARTED — page-specific responsive rules
   ============================================================ */

/* ----- Step flow ----- */
@media (max-width: 991px) {
    .ew-step-flow { grid-template-columns: 1fr; gap: 28px; }
    .ew-step-flow::before { display: none; }
    .ew-step { display: grid; grid-template-columns: 76px 1fr; gap: 20px; text-align: left; padding: 0; align-items: start; }
/*    .ew-step-num { margin: 0; }
*/}
@media (max-width: 575px) {
    .ew-step-num { width: 60px; height: 60px; font-size: 24px; }
    .ew-step { grid-template-columns: 60px 1fr; gap: 16px; }
    .ew-step-body h3 { font-size: 19px; }
    .ew-step-body p { font-size: 14px; }
}

/* ----- Channel cards ----- */
@media (max-width: 991px) {
    .ew-channel-grid { grid-template-columns: 1fr; gap: 16px; }
    .ew-channel-card { padding: 28px 24px 24px; }
    .ew-channel-card h3 { font-size: 20px; }
}
@media (max-width: 575px) {
    .ew-channel-card { padding: 24px 20px 22px; }
    .ew-channel-ic { width: 46px; height: 46px; font-size: 20px; margin-bottom: 16px; }
}

/* ----- App / Web showcase ----- */
@media (max-width: 991px) {
    .ew-app-frame { padding: 18px; }
    .ew-showcase-reverse { flex-direction: row; }
}

/* ----- Phone CTA card ----- */
@media (max-width: 991px) {
    .ew-phone-card { grid-template-columns: 1fr; }
    .ew-phone-card-figure { padding: 28px 28px 0; }
    .ew-phone-card-figure img { max-height: 220px; width: auto; }
    .ew-phone-card-body { padding: 24px 28px 32px; text-align: center; }
    .ew-phone-card-body .ew-pill { margin-bottom: 14px; }
    .ew-phone-card-ctas { justify-content: center; }
}
@media (max-width: 575px) {
    .ew-phone-card-figure img { max-height: 180px; }
    .ew-phone-card-body { padding: 20px 22px 28px; }
    .ew-btn-phone { padding: 10px 16px 10px 12px; gap: 10px; }
    .ew-btn-phone i { width: 30px; height: 30px; font-size: 12px; }
    .ew-btn-phone strong { font-size: 15px; }
    .ew-phone-card-ctas { gap: 10px; flex-direction: column; align-items: stretch; }
    .ew-phone-card-ctas .ew-btn { justify-content: center; }
}

/* Subscription box responsive rules are owned by the legacy
   media_queries_new.css — no 2026 overrides here. */

/* ============================================================
   WHAT CAN I PACKAGE — page-specific responsive rules
   ============================================================ */

/* ----- 3-up benefit explainers ----- */
@media (max-width: 991px) {
    .ew-benefit-explainers { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 575px) {
    .ew-benefit-explainers { grid-template-columns: 1fr; gap: 14px; }
    .ew-benefit-play { width: 54px; height: 54px; font-size: 19px; }
    .ew-benefit-title { font-size: 16px; padding: 16px 18px 4px; }
    .ew-benefit-meta { padding: 0 18px 16px; }
}

/* ----- Package grid ----- */
@media (max-width: 1199px) {
    .ew-pkg-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
    .ew-pkg-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .ew-pkg-filter { gap: 6px; margin-bottom: 28px; }
    .ew-pkg-filter-btn { padding: 8px 14px; font-size: 12.5px; }
}
@media (max-width: 540px) {
    .ew-pkg-grid { grid-template-columns: 1fr; }
    .ew-pkg-card-body { padding: 16px 18px 20px; }
    .ew-pkg-card-body h3 { font-size: 16px; }
    .ew-pkg-card-body p { font-size: 13.5px; }
}

/* ============================================================
   CARD DETAILS — page-specific responsive rules
   ============================================================ */

/* ----- Card hero ----- */
@media (max-width: 991px) {
    .ew-card-hero-image { max-width: 360px; }
}

/* ----- PDS alert callout ----- */
@media (max-width: 767px) {
    .ew-pds-alert-head { padding: 20px 22px 18px; gap: 14px; }
    .ew-pds-icon { width: 38px; height: 38px; font-size: 17px; border-radius: 10px; }
    .ew-pds-alert-head h3 { font-size: 17px; }
    .ew-pds-alert-body { padding: 18px 22px 22px; }
    .ew-pds-alert-body p { font-size: 14px; }
    .ew-pds-clause { padding: 16px 16px 12px; }
    .ew-pds-clause p { font-size: 13.5px; }
}

/* ----- 4-card feature grid ----- */
@media (max-width: 1199px) {
    .ew-card-feature { grid-template-columns: 180px 1fr; }
}
@media (max-width: 991px) {
    .ew-card-features-grid { grid-template-columns: 1fr; gap: 16px; }
    .ew-card-feature { grid-template-columns: 200px 1fr; }
}
@media (max-width: 575px) {
    .ew-card-feature { grid-template-columns: 1fr; }
    .ew-card-feature-figure { padding: 22px 18px; min-height: 180px; }
    .ew-card-feature-figure img { max-height: 130px; }
    .ew-card-feature-body { padding: 22px 22px 24px; }
    .ew-card-feature-body h3 { font-size: 18px; }
    .ew-card-feature-body > p,
    .ew-card-feature-body .ew-feature-list li { font-size: 14px; }
}

/* ----- Resource cards ----- */
@media (max-width: 1199px) {
    .ew-resource-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .ew-resource-grid { grid-template-columns: 1fr; gap: 12px; }
    .ew-resource-card { padding: 18px 20px; gap: 14px; }
    .ew-resource-ic { width: 40px; height: 40px; font-size: 17px; }
    .ew-resource-body h3 { font-size: 14.5px; }
    .ew-resource-body p { font-size: 12.5px; }
}

/* ----- App download card ----- */
@media (max-width: 991px) {
    .ew-app-download { grid-template-columns: 1fr; }
    .ew-app-download-figure { padding: 28px 24px; min-height: 0; }
    .ew-app-download-figure img { max-height: 80px; }
    .ew-app-download-body { padding: 28px 28px 32px; text-align: center; }
    .ew-app-download-ctas { justify-content: center; }
}
@media (max-width: 575px) {
    .ew-app-download-body { padding: 22px 22px 26px; }
    .ew-app-download-ctas { gap: 10px; flex-direction: column; align-items: stretch; }
    .ew-app-download-ctas .ew-btn { justify-content: center; }
}

/* ============================================================
   NFP page — page-specific responsive rules
   ============================================================ */

/* ----- NFP advantage explainer card ----- */
@media (max-width: 991px) {
    .ew-nfp-explainer { grid-template-columns: 1fr; }
    .ew-nfp-explainer-figure { padding: var(--ew-space-6) var(--ew-space-5); }
    .ew-nfp-explainer-figure img { max-height: 220px; width: auto; }
    .ew-nfp-explainer-body { padding: var(--ew-space-6); gap: var(--ew-space-5); }
}
@media (max-width: 575px) {
    .ew-nfp-explainer-body { padding: var(--ew-space-5); gap: var(--ew-space-5); }
    .ew-nfp-cap-row { grid-template-columns: 1fr; gap: var(--ew-space-3); }
    .ew-nfp-cap { padding: var(--ew-space-3) var(--ew-space-4); }
    .ew-nfp-cap-num { font-size: var(--ew-text-xl); }
    .ew-nfp-orgs-list li { grid-template-columns: 36px 1fr; gap: var(--ew-space-3); }
    .ew-nfp-orgs-ic { width: 34px; height: 34px; font-size: 14px; }
}

/* ----- Tax-compare wrapper ----- */
@media (max-width: 767px) {
    .ew-tax-compare-section .album.Enquiry-box,
    .ew-tax-compare-section .album.Enquiry-box.py-5 {
        padding: var(--ew-space-5) 0;
    }
}

/* ----- NFP compare cards -----
   Two-column desktop → single-column at md → stacked figure-over-body at xs.
   Figure column shrinks gracefully so the character illustration always
   fits without horizontal clipping. */
@media (max-width: 1199px) {
    .ew-nfp-compare-card { grid-template-columns: 200px 1fr; }
    .ew-nfp-compare-figure { min-height: 200px; }
    .ew-nfp-compare-figure img { max-height: 160px; }
}
@media (max-width: 991px) {
    .ew-nfp-compare-grid { grid-template-columns: 1fr; gap: var(--ew-space-5); }
    .ew-nfp-compare-card { grid-template-columns: 240px 1fr; }
    .ew-nfp-compare-figure { min-height: 220px; }
    .ew-nfp-compare-figure img { max-height: 180px; }
}
@media (max-width: 575px) {
    .ew-nfp-compare-card { grid-template-columns: 1fr; }
    .ew-nfp-compare-figure { padding: var(--ew-space-5) var(--ew-space-4); min-height: 180px; }
    .ew-nfp-compare-figure img { max-height: 140px; }
    .ew-nfp-compare-body { padding: var(--ew-space-5); }
    .ew-nfp-compare-body h3 { font-size: var(--ew-text-md); }
    .ew-nfp-compare-table td { font-size: var(--ew-text-sm); padding: var(--ew-space-2) 0; }
}

/* ============================================================
   EZIWAY CAR SEARCH — responsive overrides
   Companions to the rules in stylesheet2026.css.
   Scoped where needed under [data-ng-controller="searchCarController"].
   Scoped where needed under [data-ng-controller="PublicCalculatorController"].
   ============================================================ */

/* Shell collapses to single column on tablet & below */
@media (max-width: 991.98px) {
    .ew-shell { grid-template-columns: 1fr; border-radius: 22px; }
}
@media (max-width: 575.98px) {
    .ew-shell-left { padding: 38px 26px; }
    .ew-shell-right { padding: 34px 24px; }
}

/* Mobile: prevent the italic "salary packaging" phrase in the shell
   h2 from overflowing the panel (Instrument Serif italic renders
   wider than the sans-serif, and the parent has overflow:hidden
   for the radial-gradient effect). */
@media (max-width: 767.98px) {
    .ew-shell-left h2 {
        font-size: clamp(22px, 5.4vw, 30px);
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
    }
    .ew-shell-left h2 em {
        font-size: 1em;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .ew-shell-left p {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    /* Segmented radio toggle: allow long labels ("I am an existing
       employer") to wrap onto two lines rather than overflow the pill. */
    .ew-seg-toggle button,
    .ew-seg-toggle .ew-seg-toggle-item {
        white-space: normal;
        font-size: 12.5px;
        padding: 8px 10px;
        line-height: 1.25;
        min-width: 0;
    }
}

@media (max-width: 420px) {
    .ew-shell-left h2 { font-size: 20px; }
    .ew-seg-toggle button,
    .ew-seg-toggle .ew-seg-toggle-item {
        font-size: 12px;
        padding: 8px 6px;
    }
}

/* Field row stacks on small screens */
@media (max-width: 767.98px) {
    .ew-shell-field-row { grid-template-columns: 1fr; }
}

/* Slider card stacks (label / rail / numeric input) on mobile */
@media (max-width: 575.98px) {
    [data-ng-controller="specialOfferController"] .ew-slider-card,
    [data-ng-controller="searchCarController"] .ew-slider-card,
    [data-ng-controller="PublicCalculatorController"] .ew-slider-card {
        grid-template-columns: 1fr;
        grid-template-areas: "label" "slider" "input";
    }
    [data-ng-controller="specialOfferController"] .ew-slider-card .ew-slider-input { justify-self: stretch; width: 100%; }
    [data-ng-controller="searchCarController"] .ew-slider-card .ew-slider-input { justify-self: stretch; width: 100%; }
    [data-ng-controller="PublicCalculatorController"] .ew-slider-card .ew-slider-input { justify-self: stretch; width: 100%; }
}

/* Key/value list — tighter label column on mobile */
@media (max-width: 767.98px) {
    [data-ng-controller="specialOfferController"] dl.ew-kv,
    [data-ng-controller="searchCarController"] dl.ew-kv,
    [data-ng-controller="PublicCalculatorController"] dl.ew-kv {
        grid-template-columns: minmax(140px, auto) 1fr;
    }
}

/* Album wrapper padding on small screens */
@media (max-width: 575.98px) {
    [data-ng-controller="specialOfferController"] section.album-box { padding: 22px; }
    [data-ng-controller="searchCarController"] section.album-box { padding: 22px; }
    [data-ng-controller="PublicCalculatorController"] section.album-box { padding: 22px; }
    [data-ng-controller="specialOfferController"] #CarSearechTabs { padding: 22px; }
    [data-ng-controller="searchCarController"] #CarSearechTabs { padding: 22px; }
    [data-ng-controller="PublicCalculatorController"] #CarSearechTabs { padding: 22px; }
    [data-ng-controller="specialOfferController"] .contact-form-box { padding: 22px; }
    [data-ng-controller="searchCarController"] .contact-form-box { padding: 22px; }
    [data-ng-controller="PublicCalculatorController"] .contact-form-box { padding: 22px; }
}

/* Tabs collapse to drawer on mobile */
@media (max-width: 768px) {
    [data-ng-controller="specialOfferController"] ul.tabs { display: none; }
    [data-ng-controller="searchCarController"] ul.tabs { display: none; }
    [data-ng-controller="PublicCalculatorController"] ul.tabs { display: none; }
    [data-ng-controller="specialOfferController"] .tab_drawer_heading,
    [data-ng-controller="searchCarController"] .tab_drawer_heading,
    [data-ng-controller="PublicCalculatorController"] .tab_drawer_heading {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 22px;
        border-radius: var(--ew-radius-pill);
        border: 1.5px solid var(--ew-line);
        background: var(--ew-white);
        color: var(--ew-muted);
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        margin: 0 0 10px;
        cursor: pointer;
    }
    [data-ng-controller="specialOfferController"] .tab_drawer_heading.d_active,
    [data-ng-controller="searchCarController"] .tab_drawer_heading.d_active,
    [data-ng-controller="PublicCalculatorController"] .tab_drawer_heading.d_active {
        background: var(--ew-green);
        border-color: var(--ew-green);
        color: var(--ew-white);
    }
}

/* Calculator summary — savings card and vehicle card stack on
   tablet & below (the dark .ew-calc-sum card itself inherits the
   public calculator's 560px shrink rules further down) */
@media (max-width: 900px) {
    .ew-car-summary { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .ew-car-summary { gap: 16px; }
    .ew-car-sum-vehicle { padding: 20px 16px; }
    .ew-car-sum-actions .ew-btn { flex: 1 1 auto; justify-content: center; }
}

/* Enquiry form — slider cards and choice toggles stack on smaller
   screens (the .ew-calc-save-fields grid already collapses via the
   public calculator rules further down: 3→2 cols at 860px, 1 col
   at 640px; same for .ew-calc-save-actions and .ew-calc-panel) */
@media (max-width: 860px) {
    .ew-car-enquiry-sliders { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .ew-car-enquiry-choices,
    .ew-car-enquiry-office { grid-template-columns: 1fr; }
}

/* Detailed report — statement tables shrink like the public
   calculator's .ew-calc-stmt-table rules (see 560px block below) */
@media (max-width: 560px) {
    .ew-car-report { gap: 14px; }
    /* Release the fixed label column so the three columns share
       the narrow viewport naturally */
    .ew-car-report .ew-calc-stmt-table th:first-child { width: auto; }
    .ew-car-report .ew-calc-stmt-table th,
    .ew-car-report .ew-calc-stmt-table td {
        padding: 11px 12px;
        font-size: 13px;
    }
    .ew-car-report .ew-calc-disclaim { padding: 20px 18px; }
}

/* Legacy small-screen rule (preserved from old style block) */
@media only screen and (max-width: 600px) {
    .heading01 { color: #333333; text-shadow: none; }
}

/* ============================================================
   SoftwareAsAService — SaaS landing page responsive rules
   (originals live in stylesheet2026.css ".ew-saas-*" block)
============================================================ */
@media (max-width: 920px) {
    .ew-saas-float-tag { right: 8px; }
    .ew-saas-mock { margin-top: 16px; }
}
@media (max-width: 820px) {
    .ew-saas-page .ew-section--ink .ew-feature-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   AboutUs — responsive rules
   (originals live in stylesheet2026.css ".ew-about-page" block)
============================================================ */
/* Team grid — tighten card size & gap on smaller screens. Grid is now
   a flex container (see stylesheet2026.css), so we override the card
   flex-basis + max-width per breakpoint rather than grid-template-columns. */
@media (max-width: 767.98px) {
    .ew-about-page .ew-team-grid { gap: 16px; }
    .ew-about-page .ew-team-card { flex: 0 1 170px; min-width: 160px; max-width: 210px; }
}

@media (max-width: 560px) {
    .ew-about-page .ew-team-grid { gap: 14px; }
    .ew-about-page .ew-team-card { flex: 0 1 150px; min-width: 145px; max-width: 190px; }
    .ew-about-page .ew-team-info { padding: 12px 13px 14px; }
    .ew-about-page .ew-team-tabs { gap: 6px; }
    .ew-about-page .ew-team-tab { font-size: 13.5px; padding: 7px 13px; }
}

@media (max-width: 380px) {
    /* On very narrow phones, two cards per row still work but need a smaller basis. */
    .ew-about-page .ew-team-card { flex: 0 1 calc(50% - 7px); min-width: 0; max-width: none; }
}

/* ============================================================
   Enquiry forms — responsive rules
   (originals live in stylesheet2026.css ".ew-enquiry-shell" block)
============================================================ */
@media (max-width: 767.98px) {
    /* Enquiry tabs on tablet & below: distribute both tabs equally
       across the full row, tighten the outer ul padding, and drop the
       between-tab spacing so they read as a balanced 2-up switcher
       instead of a left-clumped auto-width list. */
    body #MakeAnEnquiry ul.tabs.ew-enquiry-tabs,
    #MakeAnEnquiry ul.tabs.ew-enquiry-tabs {
        padding: 8px 0 0 !important;
        justify-content: stretch !important;
        gap: 4px !important;
    }
    body #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li,
    #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 12px 8px !important;
        font-size: 14px !important;
        gap: 6px !important;
        margin: 0 !important;
        text-align: center;
    }
}

@media (max-width: 580px) {
    /* Option cards: tighten padding */
    .ew-enquiry-shell .plans {
        gap: 10px !important;
    }
    .ew-enquiry-shell .plans .plan .plan-content {
        padding: 8px 40px 8px 14px !important;
    }
    .ew-enquiry-shell .plans .plan .plan-details > div {
        font-size: 14px !important;
    }
    /* Option cards: tighten padding */
    .ew-enquiry-shell .plans {
        gap: 10px !important;
    }
    .ew-enquiry-shell .plans .plan .plan-content {
        padding: 8px 40px 8px 14px !important;
    }
    .ew-enquiry-shell .plans .plan .plan-details > div {
        font-size: 14px !important;
    }
}
@media (max-width: 420px) {
    /* On very narrow phones, stack the two cards so labels stay readable */
    .ew-enquiry-shell .plans {
        flex-direction: column !important;
    }
    .ew-enquiry-shell .plans .plan {
        flex: 0 0 auto !important;
    }
}

/* ============================================================
   SalaryPackaging.cshtml — responsive
   ============================================================ */
@media (max-width: 991px) {
    /* 4-item grid: drop straight to 2-col at tablet so 4 items lay out as 2+2
       (was 3-col, which produced an awkward 3+1 orphan row). */
    .ew-ind-grid.ew-ind-grid--4col { grid-template-columns: repeat(2, 1fr); }
    .ew-tax-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
    .ew-tax-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
    .ew-ind-grid.ew-ind-grid--4col { grid-template-columns: 1fr; }
}
@media (max-width: 991px) {
    /* Keep `safe center` from the base rule — the pill row stays
       centred when items fit, and safely falls back to flex-start
       when they overflow (so nothing gets clipped past scroll-left:0). */
    .ew-subnav-inner {
        padding: 10px 14px;
    }
    .ew-subnav a {
        font-size: 13px;
        padding: 6px 12px;
    }
    /* Arrows now appear ONLY when the pill row actually overflows,
       driven by data-scrollable="1" set by ew-subnav-arrows.js.
       No unconditional reveal here. */
}
@media (max-width: 680px) {
    .ew-subnav-lead { display: none; }
    /* Mobile main header (.ew-h) is 64px tall — keep subnav docked
       right under it, not behind it. */
    .ew-subnav { top: 64px; }
    .ew-subnav-inner {
        gap: 4px;
        padding: 8px 32px;
        /* Softer mask + shorter scroll-padding on mobile so first/last
           pill text isn't chewed by the fade. */
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
        scroll-padding-inline: 32px;
    }
    .ew-subnav a {
        font-size: 12.5px;
        padding: 6px 11px;
    }
    .ew-subnav-arrow {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
    .ew-subnav-arrow--prev { left: 2px; }
    .ew-subnav-arrow--next { right: 2px; }
    .ew-paycard-tag { right: 8px; }
}
@media (max-width: 420px) {
    .ew-subnav-inner {
        padding: 7px 28px;
    }
    .ew-subnav a {
        font-size: 12px;
        padding: 5px 10px;
    }
    .ew-subnav-arrow {
        width: 26px;
        height: 26px;
    }
}
@media (max-width: 540px) {
    .ew-ind-grid.ew-ind-grid--4col { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .ew-seg-toggle button {
        font-size: 12.5px;
        padding: 9px 10px;
    }
}

/* ============================================================
   ctrlFooter.ascx — responsive
   ============================================================ */
@media (max-width: 991px) {
    .ew-footer { padding: 44px 0 22px; margin-top: 72px; }
    .ew-foot { gap: 32px; }
    .ew-foot-cols { gap: 40px; }
    .ew-foot-brand { max-width: 100%; flex: 1 1 100%; }
}
@media (max-width: 640px) {
    .ew-foot-cols { gap: 28px; width: 100%; }
    .ew-foot-col { flex: 1 1 calc(50% - 14px); }
    .ew-foot-bottom { flex-direction: column; align-items: flex-start; }
    .ew-foot-legal { gap: 6px; }
    .ew-foot-ack { margin-top: 32px; }
}
@media (max-width: 420px) {
    .ew-foot-col { flex: 1 1 100%; }
    .ew-foot-legal { font-size: 12px; }
    .ew-foot-legal small, .ew-foot-legal a { font-size: 12px; }
    .ew-foot-social a { width: 32px; height: 32px; font-size: 13px; }
}

/* ============================================================
   NEW HEADER NAVBAR (ctrlHeader.ascx) — responsive
   Desktop: hover dropdowns + inline nav.
   ≤980 px : burger replaces the centre nav and CTA collapses.
   ============================================================ */
@media (max-width: 1199px) {
    .ew-h-inner { gap: 16px; }
    .ew-h-link { padding: 9px 11px; font-size: 14px; }
    .ew-h-links { gap: 0; }
    header.ew-h .ew-h-demo { padding: 9px 16px; font-size: 13.5px; }
    .ew-h-signin { padding: 9px 16px; font-size: 13.5px; }
}

@media (max-width: 980px) {
    /* Scroll container padding tracks the smaller header height */
    .ScrollSnapContainer {
/*        padding-top: 64px;
        scroll-padding-top: 64px;
*/    }
    .ew-h-inner { height: 64px; }
    .ew-h-links {
        display: none;
    }
    /* Both Login + Book a demo stay visible alongside the hamburger. */
    .ew-h-cta { gap: 8px; }
    .ew-h-burger { display: inline-flex; }
    .ew-h-signin { padding: 9px 14px; font-size: 13.5px; }
    header.ew-h .ew-h-demo { padding: 9px 14px; font-size: 13.5px; }
}

@media (max-width: 575px) {
    .ew-h-logo img { height: 30px; }
    header.ew-h .ew-h-demo { padding: 8px 12px; font-size: 12.5px; }
    .ew-h-signin { padding: 8px 12px; font-size: 12.5px; }
    .ew-h-cta { gap: 6px; }
    /* Drop the arrow glyph early so the label alone stays legible. */
    header.ew-h .ew-h-demo .arr { display: none; }
}

@media (max-width: 420px) {
    /* Very tight — trim padding, keep both buttons legible next to the
       burger. Anything below this is effectively iPhone SE territory. */
    header.ew-h .ew-h-demo { padding: 7px 10px; font-size: 12px; }
    .ew-h-signin { padding: 7px 10px; font-size: 12px; }
    .ew-h-cta { gap: 4px; }
    .ew-h-logo img { height: 26px; }
}

/* ============================================================
   PUBLIC CALCULATOR (PublicCalculator/Index.cshtml) — responsive
   ============================================================ */
@media (max-width: 1199px) {
    /* Slightly tighter sticky-summary column on smaller desktops */
    .ew-calc-grid {
        grid-template-columns: 1fr 360px;
        gap: 22px;
    }
}

@media (max-width: 980px) {
    /* Single column: panels first, summary stacks below */
    .ew-calc-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .ew-calc-summary { position: static; }
}

@media (max-width: 700px) {
    /* Benefit row: stack title above the field, field left-aligned */
    .ew-calc-benefit-field {
        flex: 1 1 100%;
        text-align: left;
    }
    .ew-calc-benefit-field .ew-calc-money input {
        text-align: left;
    }
    .ew-calc-cap-hint { text-align: left; }
}

@media (max-width: 560px) {
    .ew-calc-panel { padding: 22px 18px; }
    .ew-calc-sectors { grid-template-columns: 1fr; }
    .ew-calc-panel-head { gap: 12px; }
    .ew-calc-panel-num { font-size: 24px; }
    .ew-calc-panel-head h2 { font-size: 18px; }
    .ew-calc-stmt-toggle { padding: 16px 18px; }
    .ew-calc-stmt-toggle b { font-size: 14.5px; gap: 9px; }
    .ew-calc-stmt-table th,
    .ew-calc-stmt-table td {
        padding: 11px 12px;
        font-size: 13px;
    }
    /* Stack toggle row label + switch tightly */
    .ew-calc-tog-row {
        gap: 12px;
    }
    .ew-calc-sum { padding: 26px 22px; }
    .ew-calc-sum-big { font-size: 42px; }
}

@media (max-width: 480px) {
    /* "Add a car" card: stack image + body + link */
    .ew-calc-car-card {
        flex-wrap: wrap;
    }
    .ew-calc-car-card > div {
        flex: 1 1 calc(100% - 60px);
        min-width: 0;
    }
    .ew-calc-car-card a {
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
    }
    .ew-calc-disclaim { padding: 22px 20px; }
}

@media (max-width: 420px) {
    .ew-calc-benefit { padding: 16px; }
    .ew-calc-switch {
        width: 100%;
        justify-content: center;
    }
    .ew-calc-switch a,
    .ew-calc-switch button {
        padding: 9px 14px;
        font-size: 13.5px;
    }
}

@media (max-width: 980px) {
    html { scroll-padding-top: 76px; }
}

@media (max-width: 980px) {
    body { padding-top: 64px; }
}

@media (max-width: 1199px) {
    h1, .Title-H1 {
        font-size: 52px;
        letter-spacing: -1.8px;
        line-height: 1.02;
    }
}

@media (max-width: 991px) {
    h1, .Title-H1 {
        font-size: 44px;
        letter-spacing: -1.5px;
        line-height: 1.06;
    }
}

@media (max-width: 767px) {
    h1, .Title-H1 {
        font-size: 36px;
        letter-spacing: -1.2px;
        line-height: 1.1;
        margin: 0 0 16px;
    }
}

@media (max-width: 479px) {
    h1, .Title-H1 {
        font-size: 30px;
        letter-spacing: -1px;
        line-height: 1.14;
    }
}

@media (min-width: 768px) {
    .ew-cars-grid.is-collapsed > .col:nth-child(-n+3) { display: block; }
    .ew-cars-grid.is-collapsed > .col:nth-child(n+4) { display: none; }
}

@media (min-width: 992px) {
    .ew-cars-grid.is-collapsed > .col:nth-child(-n+5) { display: block; }
    .ew-cars-grid.is-collapsed > .col:nth-child(n+6) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ew-cars-toggle { animation: none; }
    .ew-cars-toggle .chev { transition: none; }
}

@media (max-width: 575.98px) {
    .ew-modal.ew-modal--video .ew-modal-close,
    .ew-modal.watch-video-box .ew-modal-close {
        top: 8px;
        right: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ew-modal.fade .modal-dialog { transition: none; transform: none; }
}

@media (max-width: 991px) {
    [data-ng-controller="specialOfferController"] .summary-box-in,
    [data-ng-controller="searchCarController"] .summary-box-in,
    [data-ng-controller="PublicCalculatorController"] .summary-box-in {
        flex: 1 1 100%;
        border-right: none !important;
        border-bottom: 1px solid #d0d0d0;
    }
    [data-ng-controller="specialOfferController"] .summary-box-in:last-child,
    [data-ng-controller="searchCarController"] .summary-box-in:last-child,
    [data-ng-controller="PublicCalculatorController"] .summary-box-in:last-child {
        border-bottom: none;
    }
}

@media (max-width: 991px) {
    [data-ng-controller="specialOfferController"] .ew-summary-section .summary-box,
    [data-ng-controller="searchCarController"] .ew-summary-section .summary-box,
    [data-ng-controller="PublicCalculatorController"] .ew-summary-section .summary-box {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }
    [data-ng-controller="specialOfferController"] .ew-summary-section .summary-box-in,
    [data-ng-controller="searchCarController"] .ew-summary-section .summary-box-in,
    [data-ng-controller="PublicCalculatorController"] .ew-summary-section .summary-box-in {
        flex: 0 0 100% !important;
    }
}

@media (min-width: 576px) {
    .ew-showcase-grid > .wrapper_box,
    .ew-showcase-grid > .col {
        width: 50%;
        max-width: 50%;
        flex: 0 0 50%;
    }
}

@media (max-width: 820px) {
    .ew-steps-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .ew-steps-grid--3 { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
    .ew-sitemap-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .ew-sitemap-grid { grid-template-columns: 1fr; gap: 14px; }
    .ew-sitemap-card--hero { padding: 24px 22px 20px; }
    .ew-sitemap-card--hero .ew-sitemap-card-ttl { font-size: 22px; }
}

@media (max-width: 980px) {
    .ew-sp-anchor { scroll-margin-top: 116px; }
}
@media (max-width: 680px) {
    .ew-sp-anchor { scroll-margin-top: 108px; }
}

@media (max-width: 1199.98px) {
    .ew-hero-slide { min-height: 500px; }
}

@media (max-width: 991.98px) {
    .ew-hero-slide { min-height: 440px; }
}

@media (max-width: 767.98px) {
    .ew-hero-slide { min-height: 380px; }
}

@media (max-width: 575.98px) {
    .ew-hero-slide { min-height: 320px; }
}

@media (max-width: 400px) {
    .ew-hero-slide { min-height: 280px; }
}

@media (max-width: 991.98px) {
    .ew-steps-grid.ew-steps-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .ew-video-frame--link .youtube-icon {
        width: 52px;
    }

    .ew-applepay-legal {
        padding: 16px 18px;
        font-size: 12px;
    }
}

@media (max-width: 575.98px) {
    .ew-steps-grid.ew-steps-grid--three {
        grid-template-columns: 1fr;
    }

    .ew-applepay-contactless {
        padding: 6px 12px;
    }

        .ew-applepay-contactless img {
            height: 20px;
        }

    .ew-applepay-legal {
        padding: 14px 16px;
        font-size: 11.5px;
        gap: 10px;
    }
}

/* ============================================================
   The Eziway Difference — responsive
   ============================================================ */
@media (max-width: 860px) {
    .ew-diff-grid {
        grid-template-columns: 1fr;
    }

    .ew-diff-hero {
        grid-row: auto;
        min-height: 420px;
        padding: 40px 32px;
    }
}

@media (max-width: 540px) {
    .ew-diff-hero {
        padding: 36px 26px;
        min-height: 380px;
    }

    .ew-diff-card {
        padding: 26px 24px 28px;
    }

    .ew-diff-section .ew-section-head {
        margin-bottom: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ew-diff-steam .s1,
    .ew-diff-steam .s2,
    .ew-diff-steam .s3 {
        animation: none;
    }
}

/* ============================================================
   Community Sponsorships — responsive rules
   ============================================================ */
@media (max-width: 991.98px) {
    .ew-sponsor-grid { grid-template-columns: repeat(4, 1fr); }
    .ew-sponsor-grid.ew-sponsor-grid--conf { grid-template-columns: repeat(3, 1fr); }
    .ew-sponsor-form { padding: 30px 26px; }
    .ew-sponsor-form-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
    .ew-sponsor-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .ew-sponsor-grid.ew-sponsor-grid--conf { grid-template-columns: repeat(3, 1fr); }
    .ew-sponsor-card { padding: 20px 12px; gap: 10px; }
    .ew-sponsor-logo { width: 48px; height: 48px; font-size: 12.5px; }
    .ew-sponsor-name { font-size: 12.5px; }
    .ew-sponsor-form { padding: 26px 20px; border-radius: 18px; }
    .ew-sponsor-form-grid { grid-template-columns: 1fr; gap: 14px; }
    .ew-sponsor-form-actions { justify-content: stretch; }
    .ew-sponsor-form-actions .ew-btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 480px) {
    .ew-sponsor-grid { grid-template-columns: repeat(2, 1fr); }
    .ew-sponsor-grid.ew-sponsor-grid--conf { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .ew-calc-save-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639.98px) {
    .ew-calc-save-fields {
        grid-template-columns: 1fr;
    }

    .ew-calc-save-actions {
        justify-content: stretch;
    }

    .ew-calc-captcha {
        margin-right: 0;
        flex: 1 1 100%;
    }

    .ew-calc-save-actions .ew-btn {
        flex: 1 1 calc(50% - 6px);
        text-align: center;
        justify-content: center;
    }

    .ew-calc-alert {
        padding-right: 40px;
    }
}

@media (max-width: 479.98px) {
    .ew-calc-save-actions .ew-btn {
        flex: 1 1 100%;
    }
}

/* ============================================================
   ThankYou page — responsive rules
   Base rules live in stylesheet2026.css.
   ============================================================ */
@media (max-width: 767.98px) {
    .ew-thankyou-medal {
        width: 92px;
        height: 92px;
    }
    .ew-thankyou-medal i { font-size: 36px; }

    .ew-thankyou-ctas .ew-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .ew-thankyou-social a {
        width: 46px;
        height: 46px;
        font-size: 18px;
    }
}

@media (max-width: 419.98px) {
    .ew-thankyou-social {
        gap: 10px;
    }
    .ew-thankyou-social a {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
}