.mph-quiz {
    --mph-color: #0b3d63;
    --mph-radius-sm: 10px;
    --mph-radius-md: 16px;
    --mph-radius-lg: 20px;
    max-width: 640px;
    margin: 0 auto;
    box-sizing: border-box;
    font-size: 16px;
}
.mph-quiz * {
    box-sizing: border-box;
}

/* Density: every size/spacing value below that meaningfully affects vertical
   height reads through a var() with an inline fallback — the fallback IS the
   compact (default) value, so it works with no class needed anywhere in the
   tree. .mph-density-comfortable (applied to whichever element is the actual
   mount — the shortcode root inline, or the popup's own mount in popup mode,
   since .mph-quiz itself is display:none and disconnected from that tree)
   redefines the same custom properties to looser values. */
.mph-density-comfortable {
    --mph-card-padding: 40px;
    --mph-question-gap: 32px;
    --mph-question-text-margin: 14px;
    --mph-scale-min-height: 46px;
    --mph-scale-padding: 10px 8px;
    --mph-field-margin: 20px;
    --mph-btn-padding-y: 14px;
    --mph-nav-margin-top: 32px;
    --mph-progress-margin: 32px;
    --mph-contact-ask-margin: 32px;
    --mph-contact-ask-padding: 24px;
}

.mph-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: var(--mph-radius-lg);
    padding: var(--mph-card-padding, 28px);
    box-shadow: 0 4px 24px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
}
.mph-card h2 {
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--mph-color);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.mph-card > p {
    color: #55606c;
    font-size: 15.5px;
    line-height: 1.6;
    margin: 0 0 16px;
}
.mph-card > p:last-of-type {
    margin-bottom: 24px;
}
.mph-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mph-color);
    opacity: .7;
    margin-bottom: 8px;
}
.mph-page-indicator {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #8a94a1;
    text-align: right;
    margin-bottom: 4px;
}
.mph-progress {
    height: 5px;
    background: #eef0f3;
    border-radius: 999px;
    margin-bottom: var(--mph-progress-margin, 20px);
    overflow: hidden;
}
.mph-progress-bar {
    height: 100%;
    background: var(--mph-color);
    border-radius: 999px;
    transition: width .3s ease;
}
.mph-question {
    margin-bottom: var(--mph-question-gap, 20px);
    border-radius: var(--mph-radius-sm);
    transition: background-color .15s ease, box-shadow .15s ease;
}
.mph-question:last-of-type {
    margin-bottom: 8px;
}
.mph-question.mph-question-invalid {
    /* box-shadow + negative margins, not a real border/padding — keeps the
       highlighted question's text at the exact same horizontal position as
       every unhighlighted one, instead of nudging it in by the border width. */
    background: #fdf5f4;
    box-shadow: inset 0 0 0 1px #f2b8b3;
    margin-left: -14px;
    margin-right: -14px;
    margin-top: -10px;
    padding: 10px 14px;
}
.mph-question p {
    font-size: 16.5px;
    font-weight: 600;
    color: #1c2530;
    margin-bottom: var(--mph-question-text-margin, 10px);
    line-height: 1.45;
}

/* Grid, not flex-wrap — a flex row redistributes leftover space per wrapped
   row, so a 5-item row that wraps to 3+2 stretches the last row's two items
   much wider than the first row's three. Grid computes column tracks once
   for the whole layout, so every wrapped row stays visually aligned. */
.mph-scale {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
}
.mph-scale label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--mph-scale-min-height, 38px);
    text-align: center;
    border: 1px solid #e4e7eb;
    border-radius: var(--mph-radius-sm);
    padding: var(--mph-scale-padding, 8px 6px);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.0;
    color: #4b5563;
    background: #fbfbfc;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.mph-scale label:hover {
    border-color: var(--mph-color);
    color: var(--mph-color);
    background: #fff;
}
.mph-scale input {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.mph-scale label:focus-within {
    outline: 2px solid var(--mph-color);
    outline-offset: 1px;
}
.mph-scale label.mph-selected {
    background: var(--mph-color);
    color: #fff;
    border-color: var(--mph-color);
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(11, 61, 99, .28);
    transform: translateY(-1px);
}
.mph-field {
    margin-bottom: var(--mph-field-margin, 14px);
}
.mph-field label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #1c2530;
    margin-bottom: 6px;
}
.mph-field input[type=email],
.mph-field input[type=tel] {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #dde1e6;
    border-radius: var(--mph-radius-sm);
    font-size: 15.5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mph-field input[type=email]:focus,
.mph-field input[type=tel]:focus {
    outline: none;
    border-color: var(--mph-color);
    box-shadow: 0 0 0 3px rgba(11, 61, 99, .12);
}
.mph-btn {
    background: var(--mph-color);
    color: #fff;
    border: none;
    padding: var(--mph-btn-padding-y, 11px) 28px;
    border-radius: var(--mph-radius-sm);
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(11, 61, 99, .22);
    transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease;
}
.mph-btn:hover {
    box-shadow: 0 4px 16px rgba(11, 61, 99, .32);
    transform: translateY(-1px);
}
.mph-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.mph-btn-secondary {
    background: transparent;
    color: var(--mph-color);
    border: 1px solid #dde1e6;
    box-shadow: none;
}
.mph-btn-secondary:hover {
    border-color: var(--mph-color);
    box-shadow: none;
}
.mph-error {
    color: #b32d2e;
    font-size: 13.5px;
    margin-top: 8px;
    min-height: 1em;
}
.mph-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.mph-result p {
    color: #3d4650;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}
.mph-result h2 {
    font-size: 28px;
}
.mph-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--mph-nav-margin-top, 22px);
    gap: 12px;
}

/* Popup mode — overlay is appended to document.body, independent of where
   the shortcode sits in the page, so placement no longer matters. */
.mph-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 20, .6);
    display: flex; /* always laid out — visibility below controls whether it's shown,
                       which is what makes an exit transition possible at all */
    align-items: center;
    justify-content: center;
    z-index: 999999;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease, background .28s ease;
}
.mph-overlay.mph-overlay-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.mph-modal {
    position: relative;
    max-width: 640px;
    width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    /* Clips to the rounded corners below and keeps the close button (positioned
       inside this box, not outside it) from ever creating scrollable overflow —
       that negative-offset-outside-the-box approach is what caused the stray
       horizontal/vertical scrollbars and the clipped close icon. */
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--mph-radius-lg);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
    transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .28s ease;
}

/* Entry/exit animation variants, selected per quiz — the overlay's own opacity
   fade (above) always plays; these add a matching transform on the modal itself.
   "fade" and "none" need no extra rules: fade is the base transition, and "none"
   just switches transitions off entirely. */
.mph-anim-none,
.mph-anim-none .mph-modal {
    transition: none !important;
}
.mph-anim-slide-up .mph-modal {
    transform: translateY(32px);
    opacity: 0;
}
.mph-anim-slide-up.mph-overlay-visible .mph-modal {
    transform: translateY(0);
    opacity: 1;
}
.mph-anim-zoom .mph-modal {
    transform: scale(.92);
    opacity: 0;
}
.mph-anim-zoom.mph-overlay-visible .mph-modal {
    transform: scale(1);
    opacity: 1;
}

/* Closing (✕ / outside click / Esc) mid-quiz shrinks the modal toward the
   corner instead of just vanishing, handing off to the resume tile once it
   finishes — !important because this transient state has to win over
   whichever .mph-anim-* variant is active, which it otherwise ties with on
   specificity (both are two classes on/around .mph-modal). */
.mph-overlay .mph-modal.mph-modal-minimizing {
    transform: scale(.05) !important;
    opacity: 0 !important;
    transform-origin: bottom right !important;
    transition: transform .38s cubic-bezier(.4, 0, .2, 1), opacity .38s ease !important;
}

.mph-popup-mount {
    flex: 1 1 auto;
    min-height: 0; /* required for a flex child to actually scroll instead of overflowing */
    overflow-y: auto;
    overflow-x: hidden;
    /* Only shows up when content genuinely doesn't fit — thin and tinted with the
       accent color instead of the plain OS-default scrollbar. */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--mph-color) transparent; /* Firefox */
}
.mph-popup-mount::-webkit-scrollbar {
    width: 7px;
}
.mph-popup-mount::-webkit-scrollbar-track {
    background: transparent;
}
.mph-popup-mount::-webkit-scrollbar-thumb {
    background-color: var(--mph-color);
    opacity: .35;
    border-radius: 10px;
}
.mph-popup-mount::-webkit-scrollbar-thumb:hover {
    opacity: .6;
}
.mph-popup-mount .mph-card {
    box-shadow: none; /* the overlay + modal already provide elevation and rounding */
    border: none;
    border-radius: 0;
}
.mph-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, .06);
    color: #555;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background .15s ease;
}
.mph-popup-close:hover {
    background: rgba(0, 0, 0, .12);
}
html.mph-lock-scroll {
    overflow: hidden;
}

/* The floating "resume" tile, shown after closing the popup mid-quiz. Lives
   at document.body level (a sibling of the overlay, not inside it) so it can
   stay on screen once the overlay is fully hidden. Its own --mph-color copy
   (set in JS) is what the icon circle picks up. */
.mph-resume-tile {
    --mph-color: #0b3d63;
    --mph-tile-stack-offset: 0px;
    position: fixed;
    right: 20px;
    /* Stacks upward when more than one quiz on the page is minimized at once —
       see registerTileShown()/repositionTiles() in quiz.js. */
    bottom: calc(20px + var(--mph-tile-stack-offset));
    z-index: 999998;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 999px;
    padding: 8px 20px 8px 8px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .18), 0 2px 8px rgba(15, 23, 42, .1);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: scale(.4);
    transform-origin: bottom right;
    pointer-events: none;
    transition: transform .38s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease, visibility .38s, box-shadow .2s ease, bottom .25s ease;
}
.mph-resume-tile.mph-tile-visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
}
.mph-resume-tile:hover {
    box-shadow: 0 14px 38px rgba(15, 23, 42, .22), 0 4px 12px rgba(15, 23, 42, .12);
    transform: scale(1.03) translateY(-2px);
}
.mph-resume-tile:focus-visible {
    outline: 2px solid var(--mph-color);
    outline-offset: 2px;
}
.mph-tile-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mph-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mph-tile-icon svg {
    width: 19px;
    height: 19px;
}
.mph-tile-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    overflow: hidden;
}
.mph-tile-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #1c2530;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mph-tile-subtitle {
    font-size: 12px;
    color: #6b7480;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 480px) {
    .mph-resume-tile {
        right: 14px;
        bottom: calc(14px + var(--mph-tile-stack-offset));
        gap: 8px;
        padding: 6px 16px 6px 6px;
    }
    .mph-tile-icon {
        width: 34px;
        height: 34px;
    }
    .mph-tile-icon svg {
        width: 16px;
        height: 16px;
    }
    .mph-tile-title {
        font-size: 12.5px;
    }
    .mph-tile-subtitle {
        font-size: 11px;
    }
}

.mph-preview-banner {
    background: #fef8e6;
    border: 1px solid #f0d98c;
    color: #7a5b00;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
}

/* Distinct panel, not a hairline divider — the callback ask is a different
   "zone" from the result description (Gestalt figure-ground separation reads
   more clearly than a thin rule with matching background on both sides). */
.mph-contact-ask {
    margin-top: var(--mph-contact-ask-margin, 22px);
    padding: var(--mph-contact-ask-padding, 20px);
    background: #f6f8fa;
    border: 1px solid #e9edf1;
    border-radius: var(--mph-radius-md);
}
.mph-contact-ask h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #1c2530;
    line-height: 1.35;
}
.mph-contact-ask .mph-btn {
    width: 100%;
}
.mph-note {
    color: #5b6672;
    font-size: 14.5px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.mph-note p {
    margin: 0 0 10px;
}
.mph-note ul {
    margin: 0 0 10px;
    padding-left: 20px;
}
.mph-note li {
    margin-bottom: 4px;
    padding-left: 2px;
}
.mph-note p:last-child,
.mph-note ul:last-child {
    margin-bottom: 0;
}
.mph-note li::marker {
    color: var(--mph-color);
}
.mph-confirm {
    color: color-mix(in srgb, var(--mph-color) 85%, black 15%);
    background: color-mix(in srgb, var(--mph-color) 8%, white);
    border: 1px solid color-mix(in srgb, var(--mph-color) 25%, white);
    padding: 12px 14px;
    border-radius: var(--mph-radius-sm);
    font-size: 14.5px;
}

@media (max-width: 480px) {
    .mph-card {
        padding: 28px 20px;
    }
    .mph-card h2 {
        font-size: 22px;
    }
    .mph-scale {
        grid-template-columns: repeat(2, 1fr);
    }
    .mph-contact-ask {
        padding: 20px 16px;
    }
}