/* HDM Exit-Intent Survey
   Self-contained, scoped under .hdm-exit-survey to avoid theme bleed.
   Brand: primary #3367EF, accent #3FB450, neutrals 0/696969/E1E1E1, font Sen. */

.hdm-exit-survey {
    --hdm-es-primary: #3367EF;
    --hdm-es-primary-dark: #2552d4;
    --hdm-es-primary-soft: rgba(51, 103, 239, 0.08);
    --hdm-es-accent: #3FB450;
    --hdm-es-ink: #0B1220;
    --hdm-es-muted: #5B5B5B;
    --hdm-es-soft: #696969;
    --hdm-es-line: #E5E7EB;
    --hdm-es-line-strong: #D1D5DB;
    --hdm-es-bg: #FFFFFF;
    --hdm-es-radius: 18px;
    --hdm-es-radius-sm: 12px;
    --hdm-es-shadow: 0 30px 80px rgba(11, 18, 32, 0.32), 0 8px 24px rgba(11, 18, 32, 0.12);
    --hdm-es-font: 'Sen', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    /* Anchor to top, not center: when transitioning step 1 -> step 2 the
       panel shrinks vertically; centering caused the visible content to
       jump up the screen. Top-anchored keeps the position stable across
       steps (the user explicitly asked for "no jump to center"). */
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px 20px;
    font-family: var(--hdm-es-font);
    color: var(--hdm-es-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hdm-exit-survey.is-open {
    display: flex;
}

.hdm-exit-survey__backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(11, 18, 32, 0.55), rgba(11, 18, 32, 0.78));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 240ms ease;
    /* now a real <button> spanning the overlay so click-to-close is reliable */
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    appearance: none;
}

.hdm-exit-survey__backdrop:focus-visible {
    outline: none;
}

/* Wrapper that holds the close button (above) + the panel (below).
   Sits above the backdrop so the close button receives clicks first. */
.hdm-exit-survey__shell {
    position: relative;
    width: 100%;
    /* Widened from 580 so the longest reason subtitle ("I need proof
       you'll take care of me") fits on one line — keeps every card in
       the 2-column grid the same height. */
    max-width: 680px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    pointer-events: none; /* let clicks pass through gaps to the backdrop */
}

.hdm-exit-survey__shell > * {
    pointer-events: auto; /* re-enable inside actual children */
}

.hdm-exit-survey.is-open .hdm-exit-survey__backdrop {
    opacity: 1;
}

.hdm-exit-survey__panel {
    position: relative;
    width: 100%;
    background: var(--hdm-es-bg);
    border-radius: var(--hdm-es-radius);
    box-shadow: var(--hdm-es-shadow);
    overflow: hidden;
    transform: translateY(18px) scale(0.97);
    opacity: 0;
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
    max-height: calc(100vh - 140px); /* outer padding 60+20 + close button row + buffer */
    display: flex;
    flex-direction: column;
    outline: none; /* the panel is focused on open via tabindex=-1; no visible ring */
}

.hdm-exit-survey.is-open .hdm-exit-survey__panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Close button — sits OUTSIDE the panel, over the dark overlay,
   so it's unmistakable. Larger and high-contrast for older audiences. */
.hdm-exit-survey__close {
    align-self: flex-end;
    margin-bottom: 14px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    color: var(--hdm-es-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.18);
    z-index: 3;
    flex-shrink: 0;
}

.hdm-exit-survey__close:hover,
.hdm-exit-survey__close:focus-visible {
    transform: scale(1.08) rotate(90deg);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36), 0 3px 10px rgba(0, 0, 0, 0.22);
    outline: none;
    background: #fff;
}

.hdm-exit-survey__close:active {
    transform: scale(0.96) rotate(90deg);
}

.hdm-exit-survey__steps {
    position: relative;
    overflow-y: auto;
}

.hdm-exit-survey__step {
    display: none;
    padding: 0;
    position: relative; /* anchor for the absolutely-positioned banner */
    animation: hdmExitSurveyFade 320ms ease both;
}

.hdm-exit-survey__step.is-active {
    display: block;
}

/* Banner = full-width landscape illustration absolutely positioned at the
   top of the step. Content (pill/title/lede) sits ON TOP of the banner's
   left half (where a white veil makes them readable); the right half
   shows the character/graphic in full color. Reasons/form push down to
   start below the banner via a min-height on the content. */
.hdm-exit-survey__banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.hdm-exit-survey__banner-img {
    position: absolute;
    inset: 0;
    width: 60%;
    object-fit: cover;
    object-position: right top;
    transition: opacity 240ms ease;
    margin-left: auto;
}

.hdm-exit-survey__banner.is-loading .hdm-exit-survey__banner-img {
    opacity: 0;
}

/* White veil over the LEFT — opaque enough that pill/title/lede read
   crisply, but transitioning fast enough that the character on the
   right is fully visible (no wash-out across the image). */
.hdm-exit-survey__banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #fff 0%, #fff 45%, rgba(255, 255, 255, 0.55) 55%, rgba(255, 255, 255, 0) 65%);
    pointer-events: none;
    z-index: 2;
}

/* Bottom feather — only the bottom ~25% gets tinted toward white so
   the seam between banner and content disappears. Don't fade the
   whole bottom half (that's what was washing the character out). */
.hdm-exit-survey__banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 75%,
        #fff 100%
    );
    pointer-events: none;
    z-index: 3;
}

/* Skeleton shimmer for the step-2 banner while AJAX resolves. */
.hdm-exit-survey__banner-skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, #f3f4f6 8%, #e5e7eb 18%, #f3f4f6 33%);
    background-size: 200% 100%;
    animation: hdmExitSurveyShimmer 1400ms ease-in-out infinite;
    opacity: 1;
    transition: opacity 200ms ease;
    z-index: 0;
}

.hdm-exit-survey__banner:not(.is-loading) .hdm-exit-survey__banner-skeleton {
    opacity: 0;
    pointer-events: none;
}

/* Step body — content overlays the banner. Higher z so it sits on top. */
.hdm-exit-survey__layout {
    position: relative;
    z-index: 2;
}

.hdm-exit-survey__content {
    padding: 28px 36px 18px 36px;
    min-width: 0;
}

/* Title + lede stay on the LEFT (where the veil makes them readable).
   Constrain so they don't reach into the character area on the right. */
.hdm-exit-survey__title,
.hdm-exit-survey__lede {
    max-width: 56%;
}

.hdm-exit-survey__step--thanks .hdm-exit-survey__title {
    margin: 20px auto 10px;
}

/* Reasons grid (step 1) and form (step 2) start below the image so they
   go full width. The lede + content padding pushes them past 200px,
   but for short ledes we add a min-height to keep them clear. */
.hdm-exit-survey__reasons,
.hdm-exit-survey__contact {
    max-width: none;
    margin-top: 18px;
}

/* On step 1 specifically, ensure the reasons grid never overlaps the
   image area regardless of how short the lede is. */
.hdm-exit-survey__step[data-step="1"] .hdm-exit-survey__content {
    min-height: 200px;
}
.hdm-exit-survey__step[data-step="2"] .hdm-exit-survey__content {
    min-height: 192px;
}

@keyframes hdmExitSurveyShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes hdmExitSurveyFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hdm-exit-survey__eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--hdm-es-primary);
    background: var(--hdm-es-primary-soft);
    padding: 8px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
    border: 1.5px solid rgba(51, 103, 239, 0.18);
}

.hdm-exit-survey__title {
    margin: 20px 0 10px;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--hdm-es-ink);
    letter-spacing: -0.015em;
}

.hdm-exit-survey__lede {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--hdm-es-muted);
    /* The layout-aware max-width is set near the top of the file
       (so it can stay in sync with hero width). Don't add another one
       here — it would override and break the no-overlap guarantee. */
}

/* Visual gap between paragraphs inside the lede. JS inserts a span with
   this class between paragraphs (instead of bare <br><br>) so the gap
   size is one place to tweak. */
.hdm-exit-survey__lede-break {
    display: block;
    height: 0.7em;
}

.hdm-exit-survey__shield {
    flex-shrink: 0;
    color: var(--hdm-es-primary);
    margin-right: 6px;
    margin-top: -2px;
    vertical-align: middle;
}

/* ---------------------- Reason cards ---------------------- */

.hdm-exit-survey__reasons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 6px;
}

.hdm-exit-survey__reason {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    padding: 14px 14px 14px 14px;
    border: 1.5px solid var(--hdm-es-line);
    background: #fff;
    border-radius: var(--hdm-es-radius-sm);
    cursor: pointer;
    font-family: inherit;
    color: var(--hdm-es-ink);
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
    min-height: 68px;
}

.hdm-exit-survey__reason:hover {
    border-color: var(--hdm-es-line-strong);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(11, 18, 32, 0.06);
}

.hdm-exit-survey__reason:focus-visible {
    outline: none;
    border-color: var(--hdm-es-primary);
    box-shadow: 0 0 0 3px rgba(51, 103, 239, 0.18);
}

.hdm-exit-survey__reason.is-selected {
    border-color: var(--hdm-es-primary);
    background: var(--hdm-es-primary-soft);
}

.hdm-exit-survey__reason.is-selected .hdm-exit-survey__reason-icon {
    color: var(--hdm-es-primary);
}

.hdm-exit-survey__reason--full {
    grid-column: 1 / -1;
}

.hdm-exit-survey__reason-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--hdm-es-primary-soft);
    color: var(--hdm-es-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hdm-exit-survey__reason-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hdm-exit-survey__reason-title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
}

.hdm-exit-survey__reason-sub {
    font-size: 12.5px;
    color: var(--hdm-es-soft);
    line-height: 1.35;
}

/* Inline Google + Trustpilot links, shown only on step 2 when the user
   picked "Not enough reviews". Stacks vertically on mobile. */
.hdm-exit-survey__review-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0 0 14px;
}

/* `display: flex` above wins against the user-agent `[hidden]` rule, so
   we have to restore the hide behaviour explicitly. */
.hdm-exit-survey__review-links[hidden] {
    display: none;
}

.hdm-exit-survey__review-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--hdm-es-primary);
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hdm-exit-survey__review-links a:hover,
.hdm-exit-survey__review-links a:focus-visible {
    color: var(--hdm-es-primary-dark);
    text-decoration-thickness: 2px;
}

.hdm-exit-survey__review-links svg {
    flex-shrink: 0;
    opacity: 0.85;
}

/* ---------------------- "Other" textarea ---------------------- */

.hdm-exit-survey__other-wrap {
    margin-top: 14px;
    animation: hdmExitSurveyFade 240ms ease both;
}

.hdm-exit-survey__label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--hdm-es-ink);
    margin-bottom: 6px;
}

.hdm-exit-survey__textarea,
.hdm-exit-survey__input {
    width: 100%;
    border: 1.5px solid var(--hdm-es-line);
    border-radius: var(--hdm-es-radius-sm);
    padding: 12px 14px;
    font: inherit;
    font-size: 15px;
    color: var(--hdm-es-ink);
    background: #fff;
    transition: border-color 160ms ease, box-shadow 160ms ease;
    resize: vertical;
    box-sizing: border-box;
}

.hdm-exit-survey__textarea:focus,
.hdm-exit-survey__input:focus {
    outline: none;
    border-color: var(--hdm-es-primary);
    box-shadow: 0 0 0 3px rgba(51, 103, 239, 0.16);
}

.hdm-exit-survey__textarea::placeholder,
.hdm-exit-survey__input::placeholder {
    color: #9CA3AF;
}

/* ---------------------- Contact (step 2) ---------------------- */

.hdm-exit-survey__contact {
    position: relative;
}

.hdm-exit-survey__tabs {
    display: inline-flex;
    background: #F3F4F6;
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 14px;
}

/* Phone-only reasons (info/thinking/choosing) — keep the Phone tab
   visible as a clear "Phone" label with icon (so the user sees
   what we're collecting), but hide the email tab and disable the
   click affordance since there's nothing to switch to. */
.hdm-exit-survey__tabs.is-phone-only .hdm-exit-survey__tab {
    cursor: default;
}

.hdm-exit-survey__tabs.is-phone-only .hdm-exit-survey__tab:hover,
.hdm-exit-survey__tabs.is-phone-only .hdm-exit-survey__tab:focus-visible {
    box-shadow: 0 1px 3px rgba(11, 18, 32, 0.10), 0 0 0 1px rgba(11, 18, 32, 0.04);
}

.hdm-exit-survey__tab {
    border: 0;
    background: transparent;
    color: var(--hdm-es-soft);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.hdm-exit-survey__tab.is-active {
    background: #fff;
    color: var(--hdm-es-ink);
    box-shadow: 0 1px 3px rgba(11, 18, 32, 0.10), 0 0 0 1px rgba(11, 18, 32, 0.04);
}

/* `display: inline-flex` above wins against the user-agent [hidden]
   rule, so we have to restore the hide behaviour explicitly. */
.hdm-exit-survey__tab[hidden] {
    display: none;
}

.hdm-exit-survey__tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(51, 103, 239, 0.22);
}

.hdm-exit-survey__field {
    position: relative;
}

.hdm-exit-survey__error {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: #DC2626;
    font-weight: 600;
}

.hdm-exit-survey__fineprint {
    margin: 12px 0 0;
    font-size: 12.5px;
    color: var(--hdm-es-soft);
    line-height: 1.5;
}

/* ---------------------- Footer / buttons ---------------------- */

.hdm-exit-survey__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 36px 24px 36px;
    border-top: 1px solid var(--hdm-es-line);
    background: #fff;
}

/* Cluster used in step 2 to keep Back + Skip together on the left,
   with the primary action on the right via flex space-between. */
.hdm-exit-survey__footer-cluster {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* "Back" — quieter than the bordered skip button so it reads as
   navigation, not an action. Icon-led, ghost style. */
.hdm-exit-survey__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--hdm-es-soft);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 11px 12px;
    border-radius: var(--hdm-es-radius-sm);
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, transform 120ms ease;
}

.hdm-exit-survey__back:hover {
    background: #F3F4F6;
    color: var(--hdm-es-ink);
}

.hdm-exit-survey__back:focus-visible {
    outline: none;
    background: #F3F4F6;
    color: var(--hdm-es-ink);
    box-shadow: 0 0 0 3px rgba(51, 103, 239, 0.18);
}

.hdm-exit-survey__back:active {
    transform: translateX(-2px);
}

.hdm-exit-survey__footer--centered {
    justify-content: center;
    border-top: 0;
    padding: 8px 36px 28px;
}

/* Step 1 has only "No thanks, I'm good" now — the Continue button was
   removed because clicking a reason card auto-advances to step 2. Center
   the lone button so it doesn't look orphaned on the left edge. */
.hdm-exit-survey__footer--single {
    justify-content: center;
}

/* Prominent secondary "skip / close" button — bordered, easy to read. */
.hdm-exit-survey__skip {
    border: 1.5px solid var(--hdm-es-line-strong);
    background: #fff;
    color: var(--hdm-es-ink);
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    padding: 11px 18px;
    border-radius: var(--hdm-es-radius-sm);
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease;
}

.hdm-exit-survey__skip:hover {
    background: #F3F4F6;
    border-color: #9CA3AF;
    color: var(--hdm-es-ink);
    text-decoration: none;
}

.hdm-exit-survey__skip:focus-visible {
    outline: none;
    border-color: var(--hdm-es-primary);
    box-shadow: 0 0 0 3px rgba(51, 103, 239, 0.18);
}

.hdm-exit-survey__skip:active {
    transform: translateY(1px);
}

.hdm-exit-survey__primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: var(--hdm-es-primary);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: var(--hdm-es-radius-sm);
    cursor: pointer;
    transition: background 160ms ease, transform 120ms ease, box-shadow 160ms ease;
    box-shadow: 0 6px 16px rgba(51, 103, 239, 0.28);
}

.hdm-exit-survey__primary:hover:not([disabled]) {
    background: var(--hdm-es-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(51, 103, 239, 0.34);
}

.hdm-exit-survey__primary:active:not([disabled]) {
    transform: translateY(0);
}

/* No disabled state on the Continue button by design — clicking it without
   a selection now triggers an inline "please pick one" hint instead of
   leaving the user staring at a greyed-out button (older audience). */

.hdm-exit-survey__primary.is-loading {
    color: transparent;
    pointer-events: none;
    position: relative;
}

.hdm-exit-survey__primary.is-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    animation: hdmExitSurveySpin 700ms linear infinite;
}

@keyframes hdmExitSurveySpin {
    to { transform: rotate(360deg); }
}

/* ---------------------- Thank-you step ---------------------- */

.hdm-exit-survey__step--thanks {
    text-align: center;
    padding: 44px 36px 12px;
}

.hdm-exit-survey__step--thanks .hdm-exit-survey__lede {
    margin-left: auto;
    margin-right: auto;
}

.hdm-exit-survey__check {
    color: var(--hdm-es-accent);
    margin: 0 auto 14px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(63, 180, 80, 0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: hdmExitSurveyPop 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hdmExitSurveyPop {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); }
}

.hdm-exit-survey__step--thanks .hdm-exit-survey__title {
    font-size: 22px;
}

/* Body lock when modal open */

body.hdm-exit-survey-locked {
    overflow: hidden !important;
}

/* ---------------------- Responsive ---------------------- */

/* ---------------------- Mobile (stay centered with overlay all around) ---------------------- */

@media (max-width: 600px) {
    /* Top-anchor stays the same on mobile so step 1 -> step 2 doesn't jump.
       The visible black overlay is preserved on all sides via the padding. */
    .hdm-exit-survey {
        padding: 50px 16px 16px;
    }

    .hdm-exit-survey__shell {
        max-width: 100%;
        max-height: calc(100vh - 32px);
    }

    .hdm-exit-survey__close {
        width: 44px;
        height: 44px;
        margin-bottom: 8px;
    }

    .hdm-exit-survey__panel {
        max-width: 100%;
        border-radius: var(--hdm-es-radius);
        /* outer padding top (50) + close (44) + close margin (8) + bottom padding (16) ≈ 118 */
        max-height: calc(100vh - 130px);
        transform: translateY(20px) scale(0.97);
    }

    /* Banner shrinks proportionally on phones so the modal still
       leaves room for content + footer within the capped panel height. */
    .hdm-exit-survey__banner {
        height: 130px;
    }

    .hdm-exit-survey__content {
        padding: 18px 18px 10px;
    }

    .hdm-exit-survey__step[data-step="1"] .hdm-exit-survey__content,
    .hdm-exit-survey__step[data-step="2"] .hdm-exit-survey__content {
        min-height: 130px;
    }

    .hdm-exit-survey__title {
        max-width: 60%;
        font-size: 20px;
    }

    /* Fixed 150px instead of a percentage — the percentage was scaling
       up on wider phones and creeping into the banner image. A hard pixel
       cap keeps the lede inside the white-veil zone on every phone size.
       Step 2 ledes override this back to full width below. */
    .hdm-exit-survey__lede {
        max-width: 150px;
        font-size: 14px;
        margin-bottom: 14px;
    }

    /* Step 2 leeway: once the lede has cleared the banner area (130px tall
       on mobile), it can use full width. Ledes that are short enough to
       stay above the banner are still constrained by the rule above. */
    .hdm-exit-survey__step[data-step="2"] .hdm-exit-survey__lede {
        max-width: 100%;
    }

    .hdm-exit-survey__step--thanks {
        padding: 28px 20px 8px;
    }

    .hdm-exit-survey__eyebrow {
        margin-bottom: 10px;
        padding: 6px 12px;
        font-size: 11px;
    }

    /* Two-column grid on mobile so all 6 cards fit in 3 short rows
       instead of 6 tall ones. Cards are slimmed down to compensate. */
    .hdm-exit-survey__reasons {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .hdm-exit-survey__reason {
        min-height: auto;
        padding: 10px 10px 10px 10px;
        gap: 8px;
        align-items: center;
    }

    .hdm-exit-survey__reason-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    .hdm-exit-survey__reason-icon svg {
        width: 18px;
        height: 18px;
    }

    .hdm-exit-survey__reason-title {
        font-size: 13.5px;
        line-height: 1.2;
    }

    .hdm-exit-survey__reason-sub {
        font-size: 11.5px;
        line-height: 1.3;
    }

    .hdm-exit-survey__footer {
        flex-direction: row;
        gap: 10px;
        padding: 14px 20px 18px;
    }

    .hdm-exit-survey__skip,
    .hdm-exit-survey__primary {
        flex: 1 1 auto;
        padding: 11px 14px;
        font-size: 14.5px;
        justify-content: center;
    }

    /* Single-button footer on step 1: the No-thanks pill is centered,
       not stretched, so it doesn't look like a giant primary button. */
    .hdm-exit-survey__footer--single .hdm-exit-survey__skip {
        flex: 0 1 auto;
        padding: 11px 22px;
    }

    /* Make Back compact on mobile so the step-2 footer row still fits. */
    .hdm-exit-survey__footer-cluster {
        flex: 1 1 auto;
        gap: 4px;
        min-width: 0;
    }

    .hdm-exit-survey__back {
        padding: 11px 8px;
        font-size: 13.5px;
    }

    .hdm-exit-survey__review-links {
        flex-direction: column;
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hdm-exit-survey,
    .hdm-exit-survey__backdrop,
    .hdm-exit-survey__panel,
    .hdm-exit-survey__step,
    .hdm-exit-survey__primary,
    .hdm-exit-survey__close,
    .hdm-exit-survey__check {
        transition: none !important;
        animation: none !important;
    }
}