/* Guided walkthrough shared responsive model.
   Owner intent:
   - fine-pointer desktop stays split while the right-side visual can keep its approved rhythm
   - narrow fine-pointer desktop intentionally stacks before the visual gets squeezed
   - touch/mobile intentionally stack
   - Review/Confirm visuals scale from one component size variable
   - Compare may scroll and is not fit-forced here */

#edu-modal:not(.compare-mode) {
    --stack-lead-sublead-gap: 2px;
    --edu-fit-gap: clamp(8px, 1.2vh, 12px);
    --edu-fit-card-row-h: 74px;
    --edu-fit-card-pad-y: clamp(8px, 1.35vh, 14px);
    --edu-fit-card-pad-x: 12px;
    --edu-fit-title: clamp(11px, 1.45vh, 13px);
    --edu-fit-text: clamp(9.5px, 1.28vh, 12px);
    --edu-fit-index: clamp(18px, 2.65vh, 22px);
    --review-size: clamp(170px, min(31vh, 25vw), 244px);
    --review-ring: calc(var(--review-size) * 0.94);
    --review-inner-ring: calc(var(--review-size) * 0.52);
    --review-node: clamp(4px, calc(var(--review-size) * 0.028), 7px);
    --review-node-radius: calc(var(--review-size) * 0.47);
    --review-core: clamp(10px, calc(var(--review-size) * 0.054), 15px);
    --review-glow: calc(var(--review-size) * 0.70);
}

/* Desktop 1-5 walkthrough rhythm: Enroll is the visual baseline.
   The card stack stays compact; the right-side photo/visual spans that same stack. */
@media (pointer: fine) and (min-width: 641px) {
    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode {
        grid-template-rows: repeat(5, var(--edu-fit-card-row-h)) !important;
        grid-auto-rows: var(--edu-fit-card-row-h) !important;
        align-content: start !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode li:not(.edu-detail-card-link) {
        min-height: 0 !important;
        height: var(--edu-fit-card-row-h) !important;
        padding: var(--edu-fit-card-pad-y) var(--edu-fit-card-pad-x) !important;
        justify-content: center !important;
    }

    #edu-modal[data-step="1"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-team-panel,
    #edu-modal[data-step="5"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-team-panel,
    #edu-modal[data-step="3"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-visual-panel,
    #edu-modal[data-step="4"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-visual-panel {
        grid-row: 1 / span 5 !important;
        align-self: stretch !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    #edu-modal[data-step="1"] .consult-team-panel .cv-team-frame,
    #edu-modal[data-step="5"] .consult-team-panel .cv-team-frame,
    #edu-modal[data-step="1"] .consult-team-panel .cv-team-img,
    #edu-modal[data-step="5"] .consult-team-panel .cv-team-img {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
    }
}

#edu-modal:not(.compare-mode) .path-modal-body {
    overflow: hidden !important;
}

#edu-modal:not(.compare-mode) .edu-modal-body {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#edu-modal:not(.compare-mode) .modal-lead,
#edu-modal:not(.compare-mode) .edu-modal-sublead,
#edu-modal:not(.compare-mode) .modal-takeaway {
    margin: 0 !important;
}

#edu-modal:not(.compare-mode) .edu-modal-sublead:not([hidden]) {
    margin-top: var(--stack-lead-sublead-gap) !important;
    font-size: 10px !important;
    line-height: 15px !important;
}

#edu-modal:not(.compare-mode) .edu-modal-sublead:not([hidden]) + .path-modal-points {
    margin-top: var(--stack-sublead-content-gap) !important;
}

#edu-modal:not(.compare-mode) .modal-takeaway {
    margin-top: clamp(2px, 0.55vh, 6px) !important;
    padding-top: 4px !important;
    font-size: 10px !important;
    transform: none !important;
}

#edu-modal.compare-mode .modal-takeaway {
    font-size: 10px !important;
}

#edu-modal.compare-mode .edu-compliance-note {
    font-size: 10px !important;
}

#edu-modal[data-step="3"] .cv-scene,
#edu-modal[data-step="4"] .cv-shield-scene {
    width: min(var(--review-size), 100%) !important;
    height: min(var(--review-size), 100%) !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: auto !important;
    transform: none !important;
    transform-origin: center !important;
    overflow: visible !important;
}

#edu-modal[data-step="3"] .cv-glow {
    width: var(--review-glow) !important;
    height: var(--review-glow) !important;
}

#edu-modal[data-step="3"] .cv-ring-outer {
    width: var(--review-ring) !important;
    height: var(--review-ring) !important;
}

#edu-modal[data-step="3"] .cv-ring-inner {
    width: var(--review-inner-ring) !important;
    height: var(--review-inner-ring) !important;
}

#edu-modal[data-step="3"] .cv-node {
    width: var(--review-node) !important;
    height: var(--review-node) !important;
}

#edu-modal[data-step="3"] .cv-node:nth-child(1) { transform: translate(-50%,-50%) rotate(0deg) translateY(calc(var(--review-node-radius) * -1)) !important; }
#edu-modal[data-step="3"] .cv-node:nth-child(2) { transform: translate(-50%,-50%) rotate(72deg) translateY(calc(var(--review-node-radius) * -1)) !important; }
#edu-modal[data-step="3"] .cv-node:nth-child(3) { transform: translate(-50%,-50%) rotate(144deg) translateY(calc(var(--review-node-radius) * -1)) !important; }
#edu-modal[data-step="3"] .cv-node:nth-child(4) { transform: translate(-50%,-50%) rotate(216deg) translateY(calc(var(--review-node-radius) * -1)) !important; }
#edu-modal[data-step="3"] .cv-node:nth-child(5) { transform: translate(-50%,-50%) rotate(288deg) translateY(calc(var(--review-node-radius) * -1)) !important; }

#edu-modal[data-step="3"] .cv-core {
    width: var(--review-core) !important;
    height: var(--review-core) !important;
}

#edu-modal[data-step="4"] .cv-shield-scene {
    --confirm-shield-w: calc(var(--review-size) * 0.60);
    --confirm-shield-glow: calc(var(--review-size) * 0.92);
}

#edu-modal[data-step="4"] .cv-shield-svg {
    width: var(--confirm-shield-w) !important;
    height: auto !important;
}

#edu-modal[data-step="4"] .cv-shield-glow {
    width: var(--confirm-shield-glow) !important;
    height: var(--confirm-shield-glow) !important;
}

/* Fine-pointer desktop and split-window desktop:
   one split layout, no accidental stack until the mobile cutoff. */
@media (pointer: fine) and (min-width: 900px) and (max-width: 1366px) {
    #edu-modal:not(.compare-mode) {
        --edu-shell-pad-x: clamp(8px, 2.6vw, 36px);
        --edu-shell-pad-y: clamp(8px, 1.8vh, 18px);
        --edu-body-gutter: clamp(12px, 2vw, 22px);
        --edu-body-pad-top: clamp(7px, 1vh, 12px);
        --edu-body-pad-bottom: clamp(5px, 0.8vh, 10px);
        --edu-fit-gap: clamp(7px, 1.05vh, 12px);
        --edu-fit-card-row-h: clamp(58px, 7.8vh, 74px);
        --edu-fit-card-pad-y: clamp(7px, 1.15vh, 12px);
        --edu-fit-card-pad-x: clamp(9px, 1.2vw, 12px);
        --edu-fit-title: clamp(10px, 1.35vh, 13px);
        --edu-fit-text: clamp(8.8px, 1.18vh, 12px);
        --edu-fit-index: clamp(17px, 2.45vh, 22px);
        --review-size: clamp(126px, min(31vh, 27vw), 244px);
        align-items: center !important;
        justify-content: center !important;
        padding:
            var(--edu-shell-pad-y)
            var(--edu-shell-pad-x)
            calc(var(--edu-shell-pad-y) + env(safe-area-inset-bottom, 0px)) !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-box {
        width: min(1240px, calc(100vw - (var(--edu-shell-pad-x) * 2))) !important;
        height: min(860px, calc(100vh - (var(--edu-shell-pad-y) * 2) - env(safe-area-inset-bottom, 0px))) !important;
        max-height: calc(100vh - (var(--edu-shell-pad-y) * 2) - env(safe-area-inset-bottom, 0px)) !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-body {
        padding: 0 var(--edu-body-gutter) !important;
    }

    #edu-modal:not(.compare-mode) .edu-modal-body {
        padding: var(--edu-body-pad-top) 0 var(--edu-body-pad-bottom) !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode {
        display: grid !important;
        grid-template-columns: minmax(0, 1.42fr) minmax(clamp(150px, 27vw, 260px), 0.82fr) !important;
        grid-template-rows: repeat(5, var(--edu-fit-card-row-h)) !important;
        grid-auto-rows: var(--edu-fit-card-row-h) !important;
        column-gap: clamp(8px, 1.4vw, 12px) !important;
        row-gap: var(--edu-fit-gap) !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode li:not(.edu-detail-card-link) {
        grid-column: 1 !important;
        min-height: 0 !important;
        height: var(--edu-fit-card-row-h) !important;
        padding: var(--edu-fit-card-pad-y) var(--edu-fit-card-pad-x) !important;
        justify-content: center !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-head {
        gap: 6px !important;
        align-items: flex-start !important;
        font-size: var(--edu-fit-title) !important;
        line-height: 1.14 !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-title {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-index {
        min-width: calc(var(--edu-fit-index) + 10px) !important;
        width: calc(var(--edu-fit-index) + 10px) !important;
        height: var(--edu-fit-index) !important;
        font-size: var(--edu-fit-index) !important;
        line-height: var(--edu-fit-index) !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-text {
        padding-left: calc(var(--edu-fit-index) + 16px) !important;
        font-size: var(--edu-fit-text) !important;
        line-height: 1.18 !important;
    }

    #edu-modal[data-step="1"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-team-panel,
    #edu-modal[data-step="5"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-team-panel,
    #edu-modal[data-step="3"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-visual-panel,
    #edu-modal[data-step="4"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-visual-panel {
        grid-column: 2 !important;
        grid-row: 1 / span 5 !important;
        align-self: stretch !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    #edu-modal[data-step="1"] .consult-team-panel .cv-team-frame,
    #edu-modal[data-step="5"] .consult-team-panel .cv-team-frame,
    #edu-modal[data-step="1"] .consult-team-panel .cv-team-img,
    #edu-modal[data-step="5"] .consult-team-panel .cv-team-img {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
    }

    #edu-modal[data-step="3"] .consult-visual-panel,
    #edu-modal[data-step="4"] .consult-visual-panel {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }
}

@media (pointer: fine) and (min-width: 641px) and (max-width: 899px) {
    #edu-modal:not(.compare-mode) {
        --edu-header-h: 82px;
        --edu-footer-h: 70px;
        --stack-lead-sublead-gap: 2px;
        --stack-sublead-content-gap: 8px;
        --edu-fit-gap: clamp(6px, 0.9vh, 9px);
        --edu-fit-card-row-h: clamp(48px, 6.2vh, 58px);
        --edu-fit-title: clamp(9.5px, 1.22vh, 11px);
        --edu-fit-text: clamp(8.2px, 1.05vh, 9.8px);
        --edu-fit-index: clamp(16px, 2vh, 18px);
        --review-size: clamp(150px, min(22vh, 30vw), 188px);
        --edu-shell-pad-x: clamp(8px, 2vw, 18px);
        --edu-shell-pad-y: clamp(8px, 1.8vh, 18px);
        --edu-body-gutter: clamp(12px, 2vw, 18px);
        --edu-body-pad-top: clamp(7px, 1vh, 10px);
        --edu-body-pad-bottom: clamp(5px, 0.8vh, 8px);
        align-items: center !important;
        justify-content: center !important;
        padding:
            var(--edu-shell-pad-y)
            var(--edu-shell-pad-x)
            calc(var(--edu-shell-pad-y) + env(safe-area-inset-bottom, 0px)) !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-box {
        width: min(860px, calc(100vw - (var(--edu-shell-pad-x) * 2))) !important;
        height: min(860px, calc(100vh - (var(--edu-shell-pad-y) * 2) - env(safe-area-inset-bottom, 0px))) !important;
        max-height: calc(100vh - (var(--edu-shell-pad-y) * 2) - env(safe-area-inset-bottom, 0px)) !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-header {
        min-height: var(--edu-header-h) !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-footer {
        min-height: var(--edu-footer-h) !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-body {
        padding: 0 var(--edu-body-gutter) !important;
    }

    #edu-modal:not(.compare-mode) .edu-modal-body {
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
        padding: var(--edu-body-pad-top) 0 var(--edu-body-pad-bottom) !important;
    }

    #edu-modal:not(.compare-mode) .modal-lead {
        font-size: 12px !important;
        line-height: 1.24 !important;
    }

    #edu-modal:not(.compare-mode) .edu-modal-sublead:not([hidden]) {
        font-size: 7.5px !important;
        line-height: 11.21px !important;
    }

    #edu-modal:not(.compare-mode) .modal-takeaway {
        font-size: 7.5px !important;
        line-height: 1.22 !important;
        margin-top: 2px !important;
        padding-top: 3px !important;
    }

    #edu-modal.compare-mode .modal-takeaway {
        font-size: 7.5px !important;
    }

    #edu-modal.compare-mode .edu-compliance-note {
        font-size: 7.5px !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--edu-fit-gap) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        align-self: stretch !important;
        overflow: hidden !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode li:not(.edu-detail-card-link) {
        flex: 0 0 var(--edu-fit-card-row-h) !important;
        width: 100% !important;
        min-height: 0 !important;
        height: var(--edu-fit-card-row-h) !important;
        padding: clamp(4px, 0.7vh, 7px) 10px !important;
    }

    #edu-modal[data-step="1"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-team-panel,
    #edu-modal[data-step="5"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-team-panel,
    #edu-modal[data-step="3"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-visual-panel,
    #edu-modal[data-step="4"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-visual-panel {
        flex: 1 1 0 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        align-self: stretch !important;
        min-height: clamp(150px, 20vh, 188px) !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    #edu-modal[data-step="1"] .consult-team-panel .cv-team-frame,
    #edu-modal[data-step="5"] .consult-team-panel .cv-team-frame,
    #edu-modal[data-step="1"] .consult-team-panel .cv-team-img,
    #edu-modal[data-step="5"] .consult-team-panel .cv-team-img {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
    }

    #edu-modal[data-step="3"] .consult-visual-panel,
    #edu-modal[data-step="4"] .consult-visual-panel {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: clamp(150px, 20vh, 188px) !important;
        height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* Ultra-narrow desktop split:
   Chrome/Edge can bottom out below 641px wide on Windows. Keep this as a
   compact desktop modal, not the taller phone shell. */
@media (pointer: fine) and (max-width: 640px) {
    #edu-modal.path-modal {
        --edu-shell-pad-x: 8px;
        --edu-shell-pad-y: 18px;
        --edu-header-h: 66px;
        --edu-footer-h: 58px;
        --edu-body-gutter: 12px;
        --edu-body-pad-top: 6px;
        --edu-body-pad-bottom: 6px;
        --stack-lead-sublead-gap: 2px;
        --stack-sublead-content-gap: 7px;
        align-items: center !important;
        justify-content: center !important;
        padding:
            var(--edu-shell-pad-y)
            var(--edu-shell-pad-x)
            calc(var(--edu-shell-pad-y) + env(safe-area-inset-bottom, 0px)) !important;
    }

    #edu-modal:not(.compare-mode) {
        --edu-fit-gap: 6px;
        --edu-fit-card-row-h: clamp(46px, 6vh, 54px);
        --edu-fit-index-w: 28px;
        --edu-fit-index: clamp(16px, 2vh, 18px);
        --edu-fit-title: clamp(9px, 1.2vh, 10px);
        --edu-fit-text: clamp(8px, 1vh, 9px);
        --review-size: clamp(132px, 17vh, 154px);
    }

    #edu-modal .path-modal-box {
        width: min(620px, calc(100vw - (var(--edu-shell-pad-x) * 2))) !important;
        height: min(720px, calc(100vh - (var(--edu-shell-pad-y) * 2) - env(safe-area-inset-bottom, 0px))) !important;
        max-height: min(720px, calc(100vh - (var(--edu-shell-pad-y) * 2) - env(safe-area-inset-bottom, 0px))) !important;
        border-radius: 20px !important;
    }

    #edu-modal .path-modal-header,
    #edu-modal.compare-mode .path-modal-header {
        min-height: var(--edu-header-h) !important;
        height: var(--edu-header-h) !important;
        padding: 0 50px !important;
    }

    #edu-modal .path-modal-footer {
        min-height: var(--edu-footer-h) !important;
        height: var(--edu-footer-h) !important;
        padding: 8px var(--edu-body-gutter) !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-body {
        padding: 0 var(--edu-body-gutter) !important;
        overflow: hidden !important;
    }

    #edu-modal:not(.compare-mode) .edu-modal-body {
        display: grid !important;
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
        gap: 0 !important;
        padding: var(--edu-body-pad-top) 0 var(--edu-body-pad-bottom) !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #edu-modal:not(.compare-mode) .modal-lead {
        font-size: 11px !important;
        line-height: 1.18 !important;
    }

    #edu-modal:not(.compare-mode) .edu-modal-sublead:not([hidden]) {
        font-size: 6.8px !important;
        line-height: 9.86px !important;
    }

    #edu-modal:not(.compare-mode) .modal-takeaway {
        margin-top: 2px !important;
        padding-top: 3px !important;
        font-size: 6.8px !important;
        line-height: 1.16 !important;
    }

    #edu-modal.compare-mode .modal-takeaway {
        font-size: 6.8px !important;
    }

    #edu-modal.compare-mode .edu-compliance-note {
        font-size: 6.8px !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--edu-fit-gap) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        align-self: stretch !important;
        overflow: hidden !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode li:not(.edu-detail-card-link) {
        flex: 0 0 var(--edu-fit-card-row-h) !important;
        width: 100% !important;
        min-height: 0 !important;
        height: var(--edu-fit-card-row-h) !important;
        padding: 4px 10px !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-head {
        gap: 6px !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-index {
        min-width: var(--edu-fit-index-w) !important;
        width: var(--edu-fit-index-w) !important;
        height: var(--edu-fit-index) !important;
        font-size: var(--edu-fit-index) !important;
        line-height: var(--edu-fit-index) !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-title {
        font-size: var(--edu-fit-title) !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-text {
        padding-left: calc(var(--edu-fit-index-w) + 6px) !important;
        font-size: var(--edu-fit-text) !important;
        line-height: 1.12 !important;
    }

    #edu-modal[data-step="1"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-team-panel,
    #edu-modal[data-step="5"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-team-panel,
    #edu-modal[data-step="3"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-visual-panel,
    #edu-modal[data-step="4"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-visual-panel {
        flex: 1 1 0 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        align-self: stretch !important;
        min-height: clamp(116px, 16vh, 150px) !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    #edu-modal[data-step="1"] .consult-team-panel .cv-team-frame,
    #edu-modal[data-step="5"] .consult-team-panel .cv-team-frame,
    #edu-modal[data-step="1"] .consult-team-panel .cv-team-img,
    #edu-modal[data-step="5"] .consult-team-panel .cv-team-img {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
    }

    #edu-modal[data-step="3"] .consult-visual-panel,
    #edu-modal[data-step="4"] .consult-visual-panel {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: clamp(116px, 16vh, 150px) !important;
        height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

@media (pointer: fine) and (min-width: 641px) and (max-height: 820px) {
    #edu-modal:not(.compare-mode) {
        --edu-header-h: clamp(72px, 11vh, 90px);
        --edu-footer-h: clamp(62px, 9.5vh, 78px);
        --stack-lead-sublead-gap: clamp(2px, 0.35vh, 3px);
        --stack-sublead-content-gap: clamp(7px, 1vh, 12px);
        --edu-fit-gap: clamp(5px, 0.9vh, 9px);
        --edu-fit-card-pad-y: clamp(5px, 0.9vh, 9px);
        --edu-fit-title: clamp(9.6px, 1.35vh, 12px);
        --edu-fit-text: clamp(8.4px, 1.15vh, 10.8px);
        --edu-fit-index: clamp(16px, 2.35vh, 20px);
        --review-size: clamp(112px, min(29vh, 25vw), 210px);
    }

    #edu-modal:not(.compare-mode) .path-modal-header {
        min-height: var(--edu-header-h) !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-footer {
        min-height: var(--edu-footer-h) !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    #edu-modal:not(.compare-mode) .modal-takeaway {
        margin-top: 2px !important;
        padding-top: 3px !important;
    }
}

/* Touch tablet + phone: one intentional stack model. */
@media (max-width: 640px) and (pointer: coarse),
       (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) and (pointer: coarse),
       (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) and (pointer: coarse) {
    #edu-modal:not(.compare-mode) {
        --edu-fit-body-pad-x: clamp(14px, 2vw, 18px);
        --edu-fit-body-pad-y: clamp(10px, 1.3dvh, 16px);
        --stack-lead-sublead-gap: clamp(2px, 0.38dvh, 4px);
        --stack-sublead-content-gap: clamp(7px, 0.85dvh, 9px);
        --edu-fit-gap: clamp(6px, 0.8dvh, 9px);
        --edu-fit-card-h: clamp(50px, 6.7dvh, 56px);
        --edu-fit-card-pad-y: clamp(6px, 0.78dvh, 8px);
        --edu-fit-card-pad-x: clamp(10px, 1.45vw, 12px);
        --edu-fit-index-w: 28px;
        --edu-fit-index: clamp(16px, 2.05dvh, 18px);
        --edu-fit-title: clamp(10.25px, 1.3dvh, 11px);
        --edu-fit-text: clamp(9.1px, 1.16dvh, 9.8px);
        --review-size: clamp(148px, 20dvh, 232px);
    }

    #edu-modal.compare-mode {
        --edu-fit-body-pad-y: clamp(10px, 1.3dvh, 16px);
    }

    #edu-modal:not(.compare-mode) .path-modal-body {
        display: flex !important;
        flex-direction: column !important;
        padding: var(--edu-fit-body-pad-y) var(--edu-fit-body-pad-x) 3px !important;
        overflow: hidden !important;
    }

    #edu-modal.compare-mode .path-modal-body {
        padding-top: var(--edu-fit-body-pad-y) !important;
    }

    #edu-modal:not(.compare-mode) .edu-modal-body {
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        gap: 0 !important;
        flex: 1 1 auto !important;
        height: auto !important;
        padding-bottom: 4px !important;
    }

    #edu-modal:not(.compare-mode) .modal-lead {
        font-size: 12px !important;
        line-height: 1.28 !important;
    }

    #edu-modal:not(.compare-mode) .edu-modal-sublead:not([hidden]) {
        margin-top: var(--stack-lead-sublead-gap) !important;
        font-size: 8px !important;
        line-height: 12.2px !important;
    }

    #edu-modal:not(.compare-mode) .edu-modal-sublead:not([hidden]) + .path-modal-points {
        margin-top: var(--stack-sublead-content-gap) !important;
    }

    #edu-modal:not(.compare-mode) .modal-takeaway {
        margin-top: 0 !important;
        padding-top: 7px !important;
        font-size: 8px !important;
        line-height: 1.24 !important;
    }

    #edu-modal.compare-mode .modal-takeaway {
        font-size: 8px !important;
    }

    #edu-modal.compare-mode .edu-compliance-note {
        font-size: 8px !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--edu-fit-gap) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        align-self: stretch !important;
        overflow: hidden !important;
    }

    #edu-modal:not(.compare-mode) .edu-modal-sublead:not([hidden]) + .path-modal-points.detail-card-mode.consult-split-mode {
        margin-top: var(--stack-sublead-content-gap) !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode li:not(.edu-detail-card-link) {
        flex: 0 0 var(--edu-fit-card-h) !important;
        min-height: 0 !important;
        height: var(--edu-fit-card-h) !important;
        padding: var(--edu-fit-card-pad-y) var(--edu-fit-card-pad-x) !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-head {
        gap: 6px !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-index {
        min-width: var(--edu-fit-index-w) !important;
        width: var(--edu-fit-index-w) !important;
        height: var(--edu-fit-index) !important;
        font-size: var(--edu-fit-index) !important;
        line-height: var(--edu-fit-index) !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-title {
        font-size: var(--edu-fit-title) !important;
        line-height: 1.15 !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-text {
        padding-left: calc(var(--edu-fit-index-w) + 6px) !important;
        font-size: var(--edu-fit-text) !important;
        line-height: 1.18 !important;
    }

    #edu-modal[data-step="1"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-team-panel,
    #edu-modal[data-step="5"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-team-panel,
    #edu-modal[data-step="3"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-visual-panel,
    #edu-modal[data-step="4"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-visual-panel {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        grid-column: auto !important;
        grid-row: auto !important;
        align-self: stretch !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    #edu-modal[data-step="1"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-team-panel,
    #edu-modal[data-step="5"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-team-panel {
        margin: 0 0 clamp(6px, 0.75dvh, 8px) !important;
    }

    #edu-modal[data-step="3"] .consult-visual-panel,
    #edu-modal[data-step="4"] .consult-visual-panel {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
    }

    #edu-modal[data-step="1"] .consult-team-panel .cv-team-frame,
    #edu-modal[data-step="5"] .consult-team-panel .cv-team-frame,
    #edu-modal[data-step="1"] .consult-team-panel .cv-team-img,
    #edu-modal[data-step="5"] .consult-team-panel .cv-team-img {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
    }
}

@media (max-width: 640px) and (orientation: portrait) and (pointer: coarse) {
    #edu-modal:not(.compare-mode) {
        --edu-fit-card-h: clamp(48px, 6.15dvh, 52px);
        --edu-fit-gap: clamp(7px, 0.9dvh, 9px);
        --review-size: clamp(108px, 14dvh, 128px);
    }

    #edu-modal[data-step="3"]:not(.compare-mode) {
        --edu-fit-card-h: clamp(48px, 6.15dvh, 52px);
        --edu-fit-card-pad-y: clamp(6px, 0.78dvh, 8px);
        --edu-fit-gap: clamp(7px, 0.9dvh, 9px);
        --edu-fit-title: clamp(10.25px, 1.3dvh, 11px);
        --edu-fit-text: clamp(9.1px, 1.16dvh, 9.8px);
        --review-size: clamp(144px, 17.5dvh, 154px);
    }

    #edu-modal[data-step="4"]:not(.compare-mode) {
        --edu-fit-card-h: clamp(48px, 6.15dvh, 52px);
        --edu-fit-card-pad-y: clamp(6px, 0.78dvh, 8px);
        --edu-fit-gap: clamp(7px, 0.9dvh, 9px);
        --edu-fit-title: clamp(10.25px, 1.3dvh, 11px);
        --edu-fit-text: clamp(9.1px, 1.16dvh, 9.8px);
        --review-size: clamp(144px, 17.5dvh, 154px);
    }
}

@media (min-width: 1000px) and (max-width: 1366px) and (orientation: portrait) and (pointer: coarse) {
    #edu-modal.path-modal {
        align-items: center !important;
        padding-block: 18px !important;
    }

    #edu-modal .path-modal-box {
        height: min(1020px, calc(100dvh - 36px)) !important;
        max-height: min(1020px, calc(100dvh - 36px)) !important;
    }
}

/* Final sideways touch system: one landscape rule for phone + tablet.
   Desktop/fine-pointer modal geometry remains untouched. */
@media (orientation: landscape) and (pointer: coarse) {
    #edu-modal.path-modal {
        --edu-landscape-inset-x: clamp(44px, 6vw, 112px);
        --edu-landscape-inset-y: clamp(18px, 4dvh, 80px);
        --edu-landscape-box-w: min(1180px, calc(100vw - (var(--edu-landscape-inset-x) * 2)));
        --edu-landscape-box-h: min(780px, calc(100dvh - (var(--edu-landscape-inset-y) * 2)));
        --edu-landscape-header-h: clamp(54px, 8dvh, 74px);
        --edu-landscape-footer-h: clamp(60px, 8dvh, 66px);
        --edu-fit-body-pad-y: clamp(6px, 1.2dvh, 10px);
        --edu-fit-body-pad-x: clamp(16px, 2vw, 20px);
        --stack-lead-sublead-gap: clamp(2px, 0.45dvh, 4px);
        --stack-sublead-content-gap: clamp(5px, 0.9dvh, 7px);
        --edu-fit-gap: clamp(2px, 0.5dvh, 6px);
        --edu-fit-card-h: clamp(36px, 6.9dvh, 56px);
        --edu-fit-card-pad-y: clamp(5px, 0.75dvh, 7px);
        --edu-fit-card-pad-x: clamp(9px, 1.1vw, 12px);
        --edu-fit-index-w: clamp(24px, 3.1vw, 34px);
        --edu-fit-index: clamp(14px, 2.1dvh, 18px);
        --edu-fit-title: clamp(8.8px, 1.35dvh, 11px);
        --edu-fit-text: clamp(7.8px, 1.12dvh, 9.8px);
        --edu-landscape-card-col-gap: clamp(8px, 1.2vw, 14px);
        --review-size: clamp(74px, 18dvh, 188px);
        padding: var(--edu-landscape-inset-y) var(--edu-landscape-inset-x) !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #edu-modal .path-modal-box {
        width: var(--edu-landscape-box-w) !important;
        height: var(--edu-landscape-box-h) !important;
        max-height: var(--edu-landscape-box-h) !important;
        border-radius: clamp(18px, 2.1vw, 22px) !important;
    }

    #edu-modal .path-modal-header,
    #edu-modal.compare-mode .path-modal-header {
        min-height: var(--edu-landscape-header-h) !important;
        height: var(--edu-landscape-header-h) !important;
        padding: 0 clamp(54px, 6vw, 70px) !important;
    }

    #edu-modal .path-modal-footer {
        min-height: var(--edu-landscape-footer-h) !important;
        height: var(--edu-landscape-footer-h) !important;
        padding: clamp(8px, 1.2dvh, 12px) clamp(18px, 2.2vw, 28px) !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-body {
        padding: var(--edu-fit-body-pad-y) var(--edu-fit-body-pad-x) 4px !important;
        overflow: hidden !important;
    }

    #edu-modal:not(.compare-mode) .edu-modal-body {
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
        padding: 0 !important;
    }

    #edu-modal:not(.compare-mode) .modal-lead {
        font-size: clamp(9.8px, 1.4dvh, 12px) !important;
        line-height: 1.14 !important;
    }

    #edu-modal:not(.compare-mode) .edu-modal-sublead:not([hidden]) {
        font-size: clamp(6.3px, calc(1.16dvh - 2px), 8px) !important;
        line-height: clamp(9.13px, 1.276dvh, 11px) !important;
    }

    #edu-modal:not(.compare-mode) .modal-takeaway {
        padding-top: clamp(4px, 0.8dvh, 7px) !important;
        font-size: clamp(6.3px, calc(1.16dvh - 2px), 8px) !important;
        line-height: 1.14 !important;
    }

    #edu-modal.compare-mode .modal-takeaway {
        font-size: clamp(6.3px, calc(1.16dvh - 2px), 8px) !important;
    }

    #edu-modal.compare-mode .edu-compliance-note {
        font-size: clamp(6.3px, calc(1.16dvh - 2px), 8px) !important;
    }

    #edu-modal[data-step="2"] .path-modal-points.compare-grid-mode {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: clamp(6px, 0.95vw, 11px) !important;
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
        overflow: visible !important;
    }

    #edu-modal[data-step="2"] .path-modal-points.compare-grid-mode li {
        min-width: 0 !important;
        padding: clamp(5px, 0.9dvh, 10px) clamp(6px, 0.95vw, 11px) !important;
        border-radius: clamp(11px, 1.4vw, 14px) !important;
    }

    #edu-modal[data-step="2"] .path-modal-points.compare-grid-mode li.is-featured {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
        column-gap: clamp(5px, 0.9vw, 8px) !important;
        align-content: start !important;
    }

    #edu-modal[data-step="2"] .edu-compare-plan {
        min-width: 0 !important;
        font-size: clamp(12.2px, 1.25vw, 16px) !important;
        line-height: 1.12 !important;
        letter-spacing: 0.01em !important;
        white-space: nowrap !important;
    }

    #edu-modal[data-step="2"] .path-modal-points.compare-grid-mode li.is-featured .edu-compare-plan {
        grid-column: 1 !important;
        grid-row: 1 !important;
        padding-right: 0 !important;
    }

    #edu-modal[data-step="2"] .edu-compare-ribbon {
        position: static !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        align-self: center !important;
        margin: 0 !important;
        padding: clamp(2px, 0.4dvh, 3px) clamp(5px, 0.75vw, 8px) !important;
        font-size: clamp(5.7px, 0.68vw, 7.4px) !important;
        line-height: 1.05 !important;
        letter-spacing: 0.08em !important;
        white-space: nowrap !important;
    }

    #edu-modal[data-step="2"] .edu-compare-sub {
        margin: clamp(2px, 0.4dvh, 4px) 0 clamp(3px, 0.65dvh, 7px) !important;
        padding-bottom: clamp(3px, 0.65dvh, 6px) !important;
        font-size: clamp(7.4px, 0.88vw, 10px) !important;
        line-height: 1.22 !important;
    }

    #edu-modal[data-step="2"] .path-modal-points.compare-grid-mode li.is-featured .edu-compare-sub,
    #edu-modal[data-step="2"] .path-modal-points.compare-grid-mode li.is-featured .edu-compare-rows,
    #edu-modal[data-step="2"] .path-modal-points.compare-grid-mode li.is-featured .edu-compare-bestfor {
        grid-column: 1 / -1 !important;
        padding-right: 0 !important;
    }

    #edu-modal[data-step="2"] .edu-compare-row {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
        column-gap: clamp(6px, 1vw, 12px) !important;
        min-height: clamp(17px, 3.55dvh, 31px) !important;
        padding: clamp(2px, 0.5dvh, 5px) 0 !important;
    }

    #edu-modal[data-step="2"] .edu-compare-key,
    #edu-modal[data-step="2"] .edu-compare-value {
        font-size: clamp(6.8px, 0.82vw, 9.4px) !important;
        line-height: 1.16 !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
    }

    #edu-modal[data-step="2"] .edu-compare-bestfor {
        margin-top: clamp(2px, 0.55dvh, 5px) !important;
        padding-top: clamp(2px, 0.55dvh, 5px) !important;
        font-size: clamp(7px, 0.85vw, 9.6px) !important;
        line-height: 1.18 !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode {
        display: grid !important;
        grid-template-columns: minmax(0, 1.16fr) minmax(clamp(220px, 34vw, 420px), 0.84fr) !important;
        grid-template-rows: repeat(5, var(--edu-fit-card-h)) !important;
        grid-auto-rows: var(--edu-fit-card-h) !important;
        column-gap: clamp(10px, 1.6vw, 18px) !important;
        row-gap: var(--edu-fit-gap) !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        align-self: stretch !important;
        align-content: start !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode li:not(.edu-detail-card-link) {
        display: grid !important;
        grid-template-rows: auto auto !important;
        align-content: center !important;
        grid-column: 1 !important;
        flex: initial !important;
        min-height: 0 !important;
        height: var(--edu-fit-card-h) !important;
        padding: var(--edu-fit-card-pad-y) var(--edu-fit-card-pad-x) !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-head {
        display: grid !important;
        grid-template-columns: var(--edu-fit-index-w) minmax(0, 1fr) !important;
        column-gap: var(--edu-landscape-card-col-gap) !important;
        align-items: center !important;
        margin: 0 !important;
        line-height: 1.05 !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-index {
        grid-column: 1 !important;
        min-width: var(--edu-fit-index-w) !important;
        width: var(--edu-fit-index-w) !important;
        height: var(--edu-fit-index) !important;
        font-size: var(--edu-fit-index) !important;
        line-height: var(--edu-fit-index) !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-title {
        grid-column: 2 !important;
        min-width: 0 !important;
        font-size: var(--edu-fit-title) !important;
        line-height: 1.1 !important;
    }

    #edu-modal:not(.compare-mode) .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-text {
        margin: clamp(0px, 0.15dvh, 2px) 0 0 !important;
        padding-left: calc(var(--edu-fit-index-w) + var(--edu-landscape-card-col-gap)) !important;
        font-size: var(--edu-fit-text) !important;
        line-height: 1.12 !important;
    }

    #edu-modal[data-step="1"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-team-panel,
    #edu-modal[data-step="5"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-team-panel,
    #edu-modal[data-step="3"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-visual-panel,
    #edu-modal[data-step="4"] .path-modal-points.detail-card-mode.consult-split-mode .edu-detail-card-link.consult-visual-panel {
        display: flex !important;
        grid-column: 2 !important;
        grid-row: 1 / span 5 !important;
        flex: initial !important;
        align-self: stretch !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    #edu-modal[data-step="1"] .consult-team-panel .cv-team-frame,
    #edu-modal[data-step="5"] .consult-team-panel .cv-team-frame,
    #edu-modal[data-step="1"] .consult-team-panel .cv-team-img,
    #edu-modal[data-step="5"] .consult-team-panel .cv-team-img {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        object-fit: cover !important;
    }
}

/* DevTools iPad Air reports a fine pointer; keep the same landscape Compare rhythm there. */
@media (orientation: landscape) and (min-width: 1101px) and (max-width: 1180px) and (max-height: 900px) {
    #edu-modal[data-step="2"] .path-modal-points.compare-grid-mode {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: clamp(6px, 0.95vw, 11px) !important;
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
        overflow: visible !important;
    }

    #edu-modal[data-step="2"] .path-modal-points.compare-grid-mode li {
        min-width: 0 !important;
        padding: clamp(5px, 0.9dvh, 10px) clamp(6px, 0.95vw, 11px) !important;
        border-radius: clamp(11px, 1.4vw, 14px) !important;
    }

    #edu-modal[data-step="2"] .path-modal-points.compare-grid-mode li.is-featured {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
        column-gap: clamp(5px, 0.9vw, 8px) !important;
        align-content: start !important;
    }

    #edu-modal[data-step="2"] .edu-compare-plan {
        min-width: 0 !important;
        font-size: clamp(12.2px, 1.25vw, 16px) !important;
        line-height: 1.12 !important;
        letter-spacing: 0.01em !important;
        white-space: nowrap !important;
    }

    #edu-modal[data-step="2"] .path-modal-points.compare-grid-mode li.is-featured .edu-compare-plan,
    #edu-modal[data-step="2"] .path-modal-points.compare-grid-mode li.is-featured .edu-compare-sub {
        padding-right: 0 !important;
    }

    #edu-modal[data-step="2"] .path-modal-points.compare-grid-mode li.is-featured .edu-compare-plan {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    #edu-modal[data-step="2"] .edu-compare-ribbon {
        position: static !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        align-self: center !important;
        margin: 0 !important;
        padding: clamp(2px, 0.4dvh, 3px) clamp(5px, 0.75vw, 8px) !important;
        font-size: clamp(5.7px, 0.68vw, 7.4px) !important;
        line-height: 1.05 !important;
        letter-spacing: 0.08em !important;
        white-space: nowrap !important;
    }

    #edu-modal[data-step="2"] .edu-compare-sub {
        margin: clamp(2px, 0.4dvh, 4px) 0 clamp(3px, 0.65dvh, 7px) !important;
        padding-bottom: clamp(3px, 0.65dvh, 6px) !important;
        font-size: clamp(7.4px, 0.88vw, 10px) !important;
        line-height: 1.22 !important;
    }

    #edu-modal[data-step="2"] .path-modal-points.compare-grid-mode li.is-featured .edu-compare-sub,
    #edu-modal[data-step="2"] .path-modal-points.compare-grid-mode li.is-featured .edu-compare-rows,
    #edu-modal[data-step="2"] .path-modal-points.compare-grid-mode li.is-featured .edu-compare-bestfor {
        grid-column: 1 / -1 !important;
    }

    #edu-modal[data-step="2"] .edu-compare-row {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
        column-gap: clamp(6px, 1vw, 12px) !important;
        min-height: clamp(17px, 3.55dvh, 31px) !important;
        padding: clamp(2px, 0.5dvh, 5px) 0 !important;
    }

    #edu-modal[data-step="2"] .edu-compare-key,
    #edu-modal[data-step="2"] .edu-compare-value {
        font-size: clamp(6.8px, 0.82vw, 9.4px) !important;
        line-height: 1.16 !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
    }

    #edu-modal[data-step="2"] .edu-compare-bestfor {
        margin-top: clamp(2px, 0.55dvh, 5px) !important;
        padding-top: clamp(2px, 0.55dvh, 5px) !important;
        font-size: clamp(7px, 0.85vw, 9.6px) !important;
        line-height: 1.18 !important;
    }
}

/* Touch modal shell: keep the black popup separated from the dark page. */
@media (pointer: coarse),
       (max-width: 640px) and (orientation: portrait),
       (min-width: 641px) and (max-width: 1024px) and (orientation: portrait),
       (max-width: 1366px) and (orientation: landscape) and (max-height: 900px),
       (min-width: 1101px) and (max-width: 1180px) and (orientation: landscape) and (max-height: 900px) {
    #edu-modal .path-modal-box {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.012) 34%, rgba(0,0,0,0) 68%),
            linear-gradient(180deg, rgba(7,8,11,0.98) 0%, rgba(3,4,7,0.985) 100%) !important;
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.08),
            0 0 0 2px rgba(111,80,220,0.07),
            0 30px 76px rgba(0,0,0,0.78),
            0 0 64px rgba(102,76,210,0.23),
            0 0 34px rgba(201,160,80,0.10),
            inset 0 1px 0 rgba(255,255,255,0.08) !important;
    }

    #edu-modal .path-modal-header,
    #edu-modal.compare-mode .path-modal-header {
        background:
            linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.028) 26%, rgba(0,0,0,0) 66%),
            linear-gradient(180deg, rgba(7,8,11,0.985) 0%, rgba(0,0,0,0.97) 100%),
            #000 !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    #edu-modal .path-modal-footer {
        background:
            linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.028) 24%, rgba(0,0,0,0) 68%),
            linear-gradient(180deg, rgba(10,10,13,0.985) 0%, rgba(0,0,0,0.97) 100%),
            #000 !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* Desktop preview: mirror the mobile/tablet popup glow for owner review. */
@media (pointer: fine) and (min-width: 1001px) {
    #edu-modal .path-modal-box {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.012) 34%, rgba(0,0,0,0) 68%),
            linear-gradient(180deg, rgba(7,8,11,0.98) 0%, rgba(3,4,7,0.985) 100%) !important;
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.08),
            0 0 0 2px rgba(111,80,220,0.07),
            0 30px 76px rgba(0,0,0,0.78),
            0 0 64px rgba(102,76,210,0.23),
            0 0 34px rgba(201,160,80,0.10),
            inset 0 1px 0 rgba(255,255,255,0.08) !important;
    }
}

/* Sideways touch chrome must be fully opaque; the modal body art should not show through it. */
@media (orientation: landscape) and (pointer: coarse),
       (max-width: 1366px) and (orientation: landscape) and (max-height: 900px),
       (min-width: 1101px) and (max-width: 1180px) and (orientation: landscape) and (max-height: 900px) {
    #edu-modal .path-modal-box {
        overflow: hidden !important;
        isolation: isolate !important;
    }

    #edu-modal .path-modal-header,
    #edu-modal.compare-mode .path-modal-header {
        background:
            linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.028) 26%, rgba(0,0,0,0) 66%),
            linear-gradient(180deg, rgba(7,8,11,0.985) 0%, rgba(0,0,0,0.97) 100%),
            #000 !important;
        background-color: rgb(0,0,0) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    #edu-modal .path-modal-footer {
        background:
            linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.028) 24%, rgba(0,0,0,0) 68%),
            linear-gradient(180deg, rgba(10,10,13,0.985) 0%, rgba(0,0,0,0.97) 100%),
            #000 !important;
        background-color: rgb(0,0,0) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}