/* Public website phone landing: intentionally matches the native app's
   compact hero composition. This file loads after the main stylesheet so a
   stale/overly specific desktop hero rule cannot leak into phone browsers. */
.landing-live-sample-sidebar-column {
    display:contents;
}

/* Keep one install CTA per responsive layout: desktop uses the hero CTA;
   the phone website moves that single CTA beside Login in the header below. */
html:not(.tailwind-native) body #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta {
    display:none !important;
}

/* The mobile website shares the app-sized Subject/Topic header. Give its
   picker the same modal behavior as the native app; without this, the
   website header buttons can update their aria state but the sidebar remains
   hidden by the compact website layout. */
@media (max-width:720px) {
    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen).native-quiz-picker-open {
        overflow:hidden !important;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .native-quiz-picker-scrim {
        position:fixed;
        z-index:118;
        inset:calc(62px + env(safe-area-inset-top)) 0 0;
        display:none;
        padding:0;
        border:0;
        border-radius:0;
        background:rgba(2,6,14,0.56);
        backdrop-filter:blur(2px);
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen).native-quiz-picker-open .native-quiz-picker-scrim {
        display:block !important;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen).native-quiz-picker-open .answer-confirm-row {
        visibility:hidden;
        pointer-events:none;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .module-sidebar {
        box-sizing:border-box;
        position:fixed;
        z-index:120;
        top:calc(69px + env(safe-area-inset-top));
        right:10px;
        left:10px;
        width:auto;
        max-height:min(64dvh, 560px);
        display:none !important;
        overflow:auto;
        overscroll-behavior:contain;
        padding:8px;
        border:1px solid color-mix(in srgb, var(--border) 78%, var(--accent));
        border-radius:8px;
        background:var(--card);
        box-shadow:0 22px 60px rgba(0,0,0,0.4);
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen).native-quiz-picker-open .module-sidebar {
        display:flex !important;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .module-sidebar > .sidebar-toggle {
        display:none !important;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen).native-subject-picker-open #module-topic-section,
    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen).native-subject-picker-open #module-pool-section,
    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen).native-topic-picker-open #module-subject-section {
        display:none !important;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .module-sidebar-section {
        width:100%;
        gap:7px;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) #subject-sidebar-toggle,
    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) #module-topic-section > .sidebar-label {
        box-sizing:border-box;
        width:100%;
        margin:0;
        padding:9px 10px;
        border:0;
        border-bottom:1px solid var(--border);
        border-radius:0;
        background:transparent;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) #subject-sidebar-toggle {
        pointer-events:none;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) #subject-sidebar-toggle .subject-sidebar-toggle-icon {
        display:none;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .module-sidebar .sidebar-list,
    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .module-sidebar .sidebar-list.topic-list {
        gap:3px;
        padding:0;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .module-sidebar .sidebar-nav-item {
        min-height:44px;
        padding:9px 10px;
        border-radius:7px;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .native-quiz-context-btn[aria-expanded="true"] {
        background:color-mix(in srgb, var(--accent) 13%, var(--control));
        color:color-mix(in srgb, var(--text) 88%, var(--accent));
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .native-quiz-context-chevron {
        transition:transform 160ms ease;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .native-quiz-context-btn[aria-expanded="true"] .native-quiz-context-chevron {
        transform:rotate(90deg);
    }
}

/* Final mobile landing guard: keep the hero and its controls free from
   parallax transforms or viewport-height animations. The CTA wrapper is
   pinned by the final override below. */
@media (max-width:720px) {
    html:not(.tailwind-native) body.mobile-website-shell.public-screen #screen-landing > .landing-hero.landing-hero-night-trial,
    html:not(.tailwind-native) body.mobile-website-shell.public-screen #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-content,
    html:not(.tailwind-native) body.mobile-website-shell.public-screen #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-choice-actions,
    html:not(.tailwind-native) body.mobile-website-shell.public-screen #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-choice-actions > button {
        animation:none !important;
        will-change:auto !important;
    }

    html:not(.tailwind-native) body.mobile-website-shell.public-screen #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-content,
    html:not(.tailwind-native) body.mobile-website-shell.public-screen #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-choice-actions,
    html:not(.tailwind-native) body.mobile-website-shell.public-screen #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-choice-actions > button {
        transform:none !important;
        transition:none !important;
    }

    html:not(.tailwind-native) body.mobile-website-shell.public-screen #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-panel {
        transform:translateX(-50%) !important;
        transition:none !important;
        will-change:auto !important;
    }
}

/* Hide install prompts at first paint in an installed Home Screen PWA. This
   covers Safari's standalone media mode and the early document marker before
   the runtime classes are synchronised. */
@media (display-mode: standalone) {
    html.tailwind-pwa #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta,
    html.tailwind-pwa #screen-landing > .landing-hero .landing-install-strip,
    html.tailwind-native #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta,
    html.tailwind-native #screen-landing > .landing-hero .landing-install-strip {
        display:none !important;
    }
}

html.tailwind-pwa #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta,
html.tailwind-pwa #screen-landing > .landing-hero .landing-install-strip,
html.tailwind-native #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta {
    display:none !important;
}

/* An iOS Home Screen launch is the installed PWA, not the public website.
   Remove both install prompts there and lift the two course actions slightly
   so the hero does not leave an empty install-button slot at the bottom. */
@media (max-width:720px) {
    html.tailwind-mobile-web body.mobile-website-shell.is-standalone-app.public-screen #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta,
    html.tailwind-mobile-web body.mobile-website-shell.is-standalone-app.public-screen #screen-landing > .landing-hero .landing-install-strip {
        display:none !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.is-standalone-app.public-screen #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-panel {
        bottom:calc(40px + env(safe-area-inset-bottom)) !important;
    }
}

/* Keep the phone website hero at one stable scale while Safari/Chrome
   expands or collapses its address bar during scrolling.  `dvh` changes
   with that browser chrome, which makes a cover background appear to zoom.
   `svh` keeps the hero geometry fixed to the small viewport instead. */
@media (max-width: 720px) {
    html:not(.tailwind-native) body #screen-landing .landing-hero.landing-hero-night-trial,
    html:not(.tailwind-native) body #screen-landing .landing-hero.landing-hero-night-trial .landing-hero-content {
        height: 100svh !important;
        min-height: 100svh !important;
        max-height: 100svh !important;
    }

    html:not(.tailwind-native) body #screen-landing .landing-hero.landing-hero-night-trial {
        background-attachment: scroll !important;
        background-position: center 68% !important;
        background-size: cover !important;
    }

    html:not(.tailwind-native) body #screen-landing .landing-hero.landing-hero-night-trial::before {
        background-attachment: scroll !important;
        background-position: center 68% !important;
        background-size: cover !important;
        transform: none !important;
        will-change: auto !important;
    }
}

/* Match Get the app to Explore courses on the mobile website. Keep the icon
   separated from the label and prevent any inherited white button treatment. */
@media (max-width: 720px) {
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-hero .landing-install-cta,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-hero .landing-hero-choice-actions > .landing-mobile-install-cta {
        align-items:center !important;
        justify-content:center !important;
        gap:8px !important;
        border:1px solid rgba(255,255,255,.54) !important;
        background:rgba(5,17,34,.48) !important;
        color:#ffffff !important;
        box-shadow:none !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-install-cta-icon {
        margin:0 !important;
        flex:0 0 auto;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-mobile-install-cta:hover,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-mobile-install-cta:focus-visible,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-install-cta:hover,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-install-cta:focus-visible {
        background:rgba(5,17,34,.48) !important;
        border-color:rgba(255,255,255,.54) !important;
        box-shadow:none !important;
    }
}

/* Keep the mobile website course tabs flush with the dashboard content rail.
   Removing the inherited one-pixel offset and side inset makes the PPL and
   Night outer edges land on the same horizontal guides. */
@media (max-width: 720px) {
    body.is-mobile-app-shell.mobile-website-shell:not(.is-native-app):not(.public-screen) #screen-dashboard .course-access-list {
        box-sizing:border-box;
        width:100% !important;
        margin-left:0 !important;
        padding-inline:0 !important;
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    }

    body.is-mobile-app-shell.mobile-website-shell:not(.is-native-app):not(.public-screen) #screen-dashboard .course-access-pill,
    body.is-mobile-app-shell.mobile-website-shell:not(.is-native-app):not(.public-screen) #screen-dashboard .course-access-pill.active,
    body.is-mobile-app-shell.mobile-website-shell:not(.is-native-app):not(.public-screen) #screen-dashboard .course-access-pill.is-locked,
    body.is-mobile-app-shell.mobile-website-shell:not(.is-native-app):not(.public-screen) #screen-dashboard .course-access-pill.is-locked.active {
        box-sizing:border-box;
        padding-inline:0 !important;
    }
}

/* Keep the mobile-web practice question slightly closer to its tools while
   preserving a visible breathing space below the Report/More row. */
@media (max-width: 720px) {
    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .quiz-card {
        padding-top: 52px !important;
    }
}

/* The mobile website shares the app-sized Subject/Topic header. Give its
   picker the same modal behavior as the native app; without this, the
   website header buttons can update their aria state but the sidebar remains
   hidden by the compact website layout. */
@media (max-width:720px) {
    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen).native-quiz-picker-open {
        overflow:hidden !important;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .native-quiz-picker-scrim {
        position:fixed;
        z-index:118;
        inset:calc(62px + env(safe-area-inset-top)) 0 0;
        display:none;
        padding:0;
        border:0;
        border-radius:0;
        background:rgba(2,6,14,0.56);
        backdrop-filter:blur(2px);
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen).native-quiz-picker-open .native-quiz-picker-scrim {
        display:block !important;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen).native-quiz-picker-open .answer-confirm-row {
        visibility:hidden;
        pointer-events:none;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .module-sidebar {
        box-sizing:border-box;
        position:fixed;
        z-index:120;
        top:calc(69px + env(safe-area-inset-top));
        right:10px;
        left:10px;
        width:auto;
        max-height:min(64dvh, 560px);
        display:none !important;
        overflow:auto;
        overscroll-behavior:contain;
        padding:8px;
        border:1px solid color-mix(in srgb, var(--border) 78%, var(--accent));
        border-radius:8px;
        background:var(--card);
        box-shadow:0 22px 60px rgba(0,0,0,0.4);
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen).native-quiz-picker-open .module-sidebar {
        display:flex !important;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .module-sidebar > .sidebar-toggle {
        display:none !important;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen).native-subject-picker-open #module-topic-section,
    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen).native-subject-picker-open #module-pool-section,
    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen).native-topic-picker-open #module-subject-section {
        display:none !important;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .module-sidebar-section {
        width:100%;
        gap:7px;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) #subject-sidebar-toggle,
    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) #module-topic-section > .sidebar-label {
        box-sizing:border-box;
        width:100%;
        margin:0;
        padding:9px 10px;
        border:0;
        border-bottom:1px solid var(--border);
        border-radius:0;
        background:transparent;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) #subject-sidebar-toggle {
        pointer-events:none;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) #subject-sidebar-toggle .subject-sidebar-toggle-icon {
        display:none;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .module-sidebar .sidebar-list,
    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .module-sidebar .sidebar-list.topic-list {
        gap:3px;
        padding:0;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .module-sidebar .sidebar-nav-item {
        min-height:44px;
        padding:9px 10px;
        border-radius:7px;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .native-quiz-context-btn[aria-expanded="true"] {
        background:color-mix(in srgb, var(--accent) 13%, var(--control));
        color:color-mix(in srgb, var(--text) 88%, var(--accent));
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .native-quiz-context-chevron {
        transition:transform 160ms ease;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .native-quiz-context-btn[aria-expanded="true"] .native-quiz-context-chevron {
        transform:rotate(90deg);
    }
}

/* Last-cascade mobile website guard.  This stays after the legacy responsive
   rules so the compact header button and bottom CTA placement cannot be
   overwritten by older landing styles. */
@media (max-width: 720px) {
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-nav > #landing-cart-slot,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-nav > .landing-cart-slot,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-cart-slot .floating-cart {
        display: none !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta {
        width: auto !important;
        min-width: 104px !important;
        min-height: 38px !important;
        padding: 0 10px !important;
        gap: 4px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-panel {
        position: absolute !important;
        left: 50% !important;
        bottom: calc(14px + env(safe-area-inset-bottom)) !important;
        width: min(390px, calc(100vw - 28px)) !important;
        max-width: calc(100vw - 28px) !important;
        margin: 0 !important;
        transform: translateX(-50%) !important;
        z-index: 4 !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-choice-actions {
        width: 100% !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-choice-actions > button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
        margin: 0 !important;
    }
}

/* Authenticated mobile website cart: use the same compact app toolbar and cart
   sheet as the native app. The public landing cart remains hidden above. */
@media (max-width: 720px) {
    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) {
        padding-top: calc(52px + env(safe-area-inset-top)) !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-app-toolbar {
        box-sizing: border-box;
        position: fixed;
        z-index: 100;
        top: 0;
        right: 0;
        left: 0;
        min-height: calc(52px + env(safe-area-inset-top));
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: calc(6px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
        border-bottom: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
        background: color-mix(in srgb, var(--bg) 95%, transparent);
        box-shadow: 0 8px 22px rgba(0,0,0,0.12);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-toolbar-brand {
        min-width: 0;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--text);
        cursor: pointer;
        font: inherit;
        font-size: 14px;
        font-weight: 850;
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-toolbar-brand .wind-logo {
        display: none !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-toolbar-brand-copy {
        min-width: 0;
        display: block;
        line-height: 1;
        text-align: left;
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-toolbar-brand-copy > strong {
        overflow: hidden;
        font-family: "Michroma", system-ui, sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .08em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-toolbar-brand-copy > small {
        display: none !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-toolbar-actions {
        display: flex;
        align-items: center;
        gap: 7px;
        flex: 0 0 auto;
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-toolbar-tutorial,
    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-cart-header-btn {
        box-sizing: border-box;
        position: relative;
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        flex: 0 0 40px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 7px;
        background: var(--control);
        color: var(--text);
        cursor: pointer;
        box-shadow: none;
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-toolbar-tutorial-icon {
        width: 23px;
        height: 23px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-cart-header-btn.is-active {
        border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
        background: var(--active-fill);
        color: var(--active-ink);
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-cart-header-btn svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-cart-count {
        position: absolute;
        top: -4px;
        right: -4px;
        box-sizing: border-box;
        min-width: 17px;
        height: 17px;
        display: grid;
        place-items: center;
        padding: 0 4px;
        border: 2px solid var(--bg);
        border-radius: 999px;
        background: #f59e0b;
        color: #101827;
        font-size: 9px;
        font-weight: 900;
        line-height: 1;
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-cart-count[hidden],
    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-toolbar-tutorial[hidden],
    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-support-bell-btn[hidden] {
        display: none !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-cart-slot {
        position: fixed;
        z-index: 180;
        inset: 0;
        display: block !important;
        pointer-events: none;
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-cart-slot .floating-cart {
        position: static;
        z-index: auto;
        width: auto;
        pointer-events: none;
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-cart-slot .floating-cart-tab {
        display: none;
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-cart-slot .native-cart-backdrop {
        position: fixed;
        z-index: 0;
        inset: 0 0 calc(64px + env(safe-area-inset-bottom));
        display: none;
        border: 0;
        background: rgba(1, 6, 15, .68);
        cursor: pointer;
        pointer-events: auto;
        backdrop-filter: blur(2px);
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-cart-slot .floating-cart.is-open .native-cart-backdrop {
        display: block;
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-cart-slot .floating-cart-panel {
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0;
        bottom: calc(70px + env(safe-area-inset-bottom));
        left: 0;
        width: auto;
        max-height: none;
        overflow-y: auto;
        border-top: 0;
        border-right: 0;
        border-left: 0;
        border-radius: 0 0 8px 8px;
        pointer-events: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-cart-slot .floating-cart.is-open .floating-cart-panel {
        display: flex;
        flex-direction: column;
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen).native-cart-open {
        overflow: hidden;
    }
}

/* Final mobile-website landing layout: keep the cart out of the public hero,
   anchor the two course actions to the stable bottom of the hero, and keep the
   header install action compact. Native app landing is intentionally excluded. */
@media (max-width: 720px) {
    html:not(.tailwind-native) body #screen-landing > .landing-nav > #landing-cart-slot,
    html:not(.tailwind-native) body #screen-landing > .landing-nav > .landing-cart-slot,
    html:not(.tailwind-native) body #screen-landing .landing-cart-slot .floating-cart {
        display: none !important;
    }

    html:not(.tailwind-native) body #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta {
        width: auto !important;
        min-width: 104px !important;
        min-height: 38px !important;
        padding: 0 10px !important;
        gap: 4px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
    }

    html:not(.tailwind-native) body #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-panel {
        position: absolute !important;
        left: 50% !important;
        bottom: calc(14px + env(safe-area-inset-bottom)) !important;
        width: min(390px, calc(100vw - 28px)) !important;
        max-width: calc(100vw - 28px) !important;
        margin: 0 !important;
        transform: translateX(-50%) !important;
        z-index: 4 !important;
    }

    html:not(.tailwind-native) body #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-choice-actions {
        width: 100% !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    html:not(.tailwind-native) body #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-choice-actions > button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
        margin: 0 !important;
    }
}

/* Mobile website landing: the hero is deliberately static. Do not let an
   old inline parallax transform, a button animation, or a dynamic viewport
   recalculation make the CTA row drift while the page is being scrolled. */
@media (max-width: 720px) {
    html:not(.tailwind-native) body #screen-landing > .landing-hero.landing-hero-night-trial,
    html:not(.tailwind-native) body #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-content,
    html:not(.tailwind-native) body #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-choice-actions,
    html:not(.tailwind-native) body #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-choice-actions > button,
    html:not(.tailwind-native) body #screen-landing > .landing-hero.landing-hero-night-trial .landing-install-cta {
        animation: none !important;
        will-change: auto !important;
    }

    html:not(.tailwind-native) body #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-content,
    html:not(.tailwind-native) body #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-choice-actions,
    html:not(.tailwind-native) body #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-choice-actions > button,
    html:not(.tailwind-native) body #screen-landing > .landing-hero.landing-hero-night-trial .landing-install-cta {
        transform: none !important;
    }

    html:not(.tailwind-native) body #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-panel {
        transform: translateX(-50%) !important;
        transition: none !important;
        will-change: auto !important;
    }
}

/* Mobile website login: keep the card centered in the visible phone viewport
   instead of inheriting the desktop 100vh alignment and the previous screen's
   scroll position. Native app authentication keeps its own layout. */
@media (max-width: 720px) {
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-login {
        box-sizing: border-box !important;
        min-height: 100svh !important;
        width: 100% !important;
        overflow: visible !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-login .auth-shell {
        box-sizing: border-box !important;
        min-height: 100svh !important;
        height: auto !important;
        padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)) !important;
        align-items: center !important;
        justify-content: center !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-login .auth-shell .login-card {
        box-sizing: border-box !important;
        width: min(100%, 420px) !important;
        max-height: calc(100svh - max(28px, env(safe-area-inset-top) + env(safe-area-inset-bottom) + 28px)) !important;
        margin: 0 auto !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }
}

@media (max-width: 720px) {
    html:not(.tailwind-native) body #screen-landing > .landing-nav > .brand,
    html:not(.tailwind-native) body #screen-landing .landing-hero .landing-hero-plane,
    html:not(.tailwind-native) body #screen-landing .landing-hero .hero-clouds-back,
    html:not(.tailwind-native) body #screen-landing .landing-hero .hero-clouds-front,
    html:not(.tailwind-native) body #screen-landing .landing-hero .hero-foreground-clouds,
    html:not(.tailwind-native) body #screen-landing .landing-hero .hero-kicker,
    html:not(.tailwind-native) body #screen-landing .landing-hero .hero-title,
    html:not(.tailwind-native) body #screen-landing .landing-hero #landing-hero-support {
        display: none !important;
    }

    html:not(.tailwind-native) body #screen-landing .landing-hero.landing-hero-night-trial {
        min-height: 100dvh !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        overflow: hidden !important;
        background: #030811 url("assets/landing-hero-front-app.webp") center/cover no-repeat !important;
        filter: none !important;
    }

    html:not(.tailwind-native) body #screen-landing .landing-hero.landing-hero-night-trial::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        background: url("assets/landing-hero-front-app.webp") center/cover no-repeat !important;
        opacity: 1 !important;
        pointer-events: none !important;
    }

    html:not(.tailwind-native) body #screen-landing .landing-hero.landing-hero-night-trial::after {
        content: none !important;
        display: none !important;
    }

    html:not(.tailwind-native) body #screen-landing > .landing-nav {
        position: absolute !important;
        inset: 0 0 auto !important;
        z-index: 120 !important;
        justify-content: flex-end !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    html:not(.tailwind-native) body #screen-landing .landing-hero .landing-hero-content {
        position: relative !important;
        z-index: 2 !important;
        box-sizing: border-box !important;
        min-height: 100dvh !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: calc(132px + env(safe-area-inset-top)) 20px 220px !important;
        text-align: center !important;
    }

    html:not(.tailwind-native) body #screen-landing .landing-hero .mobile-landing-brand .wind-logo {
        display: none !important;
    }

    html:not(.tailwind-native) body #screen-landing .landing-hero .mobile-landing-brand {
        display: block !important;
        width: max-content !important;
        max-width: calc(100vw - 32px) !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    html:not(.tailwind-native) body #screen-landing .landing-hero .mobile-landing-brand-lockup {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    html:not(.tailwind-native) body #screen-landing .landing-hero .mobile-landing-brand-title {
        display: block !important;
        width: auto !important;
        font-size: clamp(36px, 10.5vw, 48px) !important;
        line-height: 1 !important;
        letter-spacing: .1em !important;
    }

    html:not(.tailwind-native) body #screen-landing .landing-hero .mobile-landing-brand-tagline {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
        max-width: calc(100vw - 32px) !important;
        white-space: nowrap !important;
    }

    html:not(.tailwind-native) body #screen-landing .landing-hero .landing-hero-panel {
        position: absolute !important;
        z-index: 3 !important;
        left: 50% !important;
        bottom: calc(78px + env(safe-area-inset-bottom)) !important;
        width: min(390px, calc(100vw - 28px)) !important;
        max-width: calc(100vw - 28px) !important;
        transform: translateX(-50%) !important;
    }

    html:not(.tailwind-native) body #screen-landing .landing-hero .landing-hero-choice-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    html:not(.tailwind-native) body #screen-landing .landing-hero .landing-hero-choice-actions > button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
        border-radius: 10px !important;
        box-shadow: none !important;
    }

    html:not(.tailwind-native) body #screen-landing .landing-hero .landing-install-strip {
        position: absolute !important;
        z-index: 3 !important;
        display: flex !important;
        bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        max-width: calc(100vw - 28px) !important;
    }

    html:not(.tailwind-native) body #screen-landing .landing-hero .landing-install-cta {
        min-height: 42px !important;
        border-color: rgba(255, 255, 255, .72) !important;
        border-radius: 10px !important;
        background: rgba(5, 17, 34, .52) !important;
        color: #fff !important;
        box-shadow: none !important;
    }
}

/* Mobile website landing actions: keep the install action beside Login and
   leave the bottom of the hero for the two primary course actions. Native app
   landing remains unchanged. */
@media (max-width: 720px) {
    html:not(.tailwind-native) body #screen-landing > .landing-nav > .landing-nav-actions {
        align-items: center !important;
        gap: 8px !important;
    }

    html:not(.tailwind-native) body #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        box-sizing: border-box !important;
        width: auto !important;
        min-width: 116px !important;
        min-height: 44px !important;
        padding: 0 13px !important;
        border: 1px solid rgba(255,255,255,.2) !important;
        border-radius: 10px !important;
        background: rgba(5,25,48,.86) !important;
        color: #f8fbff !important;
        box-shadow: none !important;
        font: inherit !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    html:not(.tailwind-native) body #screen-landing > .landing-nav > .landing-nav-actions > #landing-login-action,
    html:not(.tailwind-native) body #screen-landing > .landing-nav > .landing-nav-actions > #landing-nav-primary-action {
        min-width: 88px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    html:not(.tailwind-native) body #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta:hover,
    html:not(.tailwind-native) body #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta:focus-visible {
        background: rgba(8,35,64,.92) !important;
        border-color: rgba(255,255,255,.3) !important;
        box-shadow: none !important;
        outline: none !important;
    }

    html:not(.tailwind-native) body #screen-landing > .landing-hero .landing-install-strip {
        display: none !important;
    }

    html:not(.tailwind-native) body #screen-landing > .landing-hero .landing-hero-panel {
        bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }
}

/* Keep exactly one install action on the mobile website.  The older landing
   rules are more specific and can force the desktop hero action back to flex;
   this final website-only guard deliberately wins that cascade. */
@media (max-width: 720px) {
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-hero.landing-hero-night-trial .landing-install-strip {
        display: none !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta {
        display: inline-flex !important;
    }

    /* Once a user is signed in and returns to the landing screen, keep the
       install action with the course action instead of leaving it in the
       header. The auth state script moves the same button here, so there is
       still only one Get the app action in the DOM. */
    html.tailwind-mobile-web body.mobile-website-shell.public-screen.landing-user-authenticated #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta {
        display: none !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen.landing-user-authenticated #screen-landing > .landing-hero .landing-hero-choice-actions > .landing-mobile-install-cta {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        border: 1px solid rgba(255,255,255,.54) !important;
        border-radius: 10px !important;
        background: rgba(5,17,34,.62) !important;
        color: #f4fbff !important;
        box-shadow: none !important;
        font: inherit !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen.landing-user-authenticated #screen-landing > .landing-hero .landing-hero-choice-actions > .landing-mobile-install-cta:hover,
html.tailwind-mobile-web body.mobile-website-shell.public-screen.landing-user-authenticated #screen-landing > .landing-hero .landing-hero-choice-actions > .landing-mobile-install-cta:focus-visible {
        background: rgba(5,17,34,.72) !important;
        border-color: rgba(255,255,255,.7) !important;
        box-shadow: none !important;
        outline: none !important;
    }
}

/* The website reuses the compact app-sized question toolbar on phones. Its
   horizontal overflow rule was also clipping the More dropdown after the
   first item, hiding Clear and Clear all in practice mode. Let the menu
   escape the toolbar while keeping the question card itself contained. */
@media (max-width: 720px) {
    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .question-card-actions,
    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .question-card-actions .question-action-group,
    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .question-card-actions .question-action-group-tools,
    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .question-card-actions .question-action-menu {
        overflow: visible !important;
    }

    body.is-mobile-app-shell.quiz-screen-active:not(.is-native-app):not(.public-screen) .website-question-action-menu-panel {
        z-index: 220 !important;
        max-height: min(58dvh, 360px) !important;
        overflow-y: auto !important;
    }
}

/* Final mobile website landing override: older public-screen rules set the
   hero panel 78px above the bottom. Keep the two landing buttons contained by
   the hero itself so they cannot follow the viewport into the next section. */
@media (max-width:720px) {
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-hero.landing-hero-night-trial .landing-hero-panel {
        position:absolute !important;
        left:50% !important;
        right:auto !important;
        top:auto !important;
        bottom:calc(16px + env(safe-area-inset-bottom)) !important;
        transition:none !important;
        will-change:auto !important;
        transform:translateX(-50%) !important;
        z-index:120 !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-hero.landing-hero-night-trial .landing-hero-panel.is-mobile-website-landing-cta-hidden {
        visibility:hidden !important;
        opacity:0 !important;
        pointer-events:none !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-hero.landing-hero-night-trial .landing-hero-choice-actions,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-hero.landing-hero-night-trial .landing-hero-choice-actions > button {
        animation:none !important;
        transition:none !important;
        transform:none !important;
        will-change:auto !important;
    }
}

/* Keep the mobile website's Get app control visually identical before and
   after the landing header enters its scroll state. */
@media (max-width:720px) {
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-hero .landing-install-cta,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-hero .landing-hero-choice-actions > .landing-mobile-install-cta {
        border-radius:10px !important;
        transition:none !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing #landing-mobile-install-app-action,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing #landing-install-app-action {
        border-radius:10px !important;
    }
}

/* Final mobile-web override: keep the hero image scale fixed while the
   browser toolbar changes height during a scroll. */
@media (max-width: 720px) {
    html:not(.tailwind-native) body #screen-landing .landing-hero.landing-hero-night-trial,
    html:not(.tailwind-native) body #screen-landing .landing-hero.landing-hero-night-trial .landing-hero-content {
        height: 100svh !important;
        min-height: 100svh !important;
        max-height: 100svh !important;
    }

    html:not(.tailwind-native) body #screen-landing .landing-hero.landing-hero-night-trial {
        background-attachment: scroll !important;
        background-position: center 68% !important;
        background-size: cover !important;
    }

    html:not(.tailwind-native) body #screen-landing .landing-hero.landing-hero-night-trial::before {
        background-attachment: scroll !important;
        background-position: center 68% !important;
        background-size: cover !important;
        transform: none !important;
        will-change: auto !important;
    }
}

/* Keep the mobile website's toolbar brand mark visible. The native app
   intentionally uses text-only branding, but the website retains the blue
   Tailwind mark; lift it in dark mode so it is not muted by the web palette. */
@media (max-width: 720px) {
    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-toolbar-brand .wind-logo {
        box-sizing: border-box;
        width: 22px !important;
        height: 13px !important;
        min-width: 22px;
        display: block !important;
        flex: 0 0 22px;
        background: url("assets/tailwind-header-mark.webp?v=20260730-header-logo-v2") center / contain no-repeat;
        opacity: .92 !important;
        filter: saturate(1.08) brightness(1.04) !important;
        transform: none !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-toolbar-brand .wind-logo::before,
    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen) .native-toolbar-brand .wind-logo::after {
        display: none !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell:not(.public-screen):not(.light) .native-toolbar-brand .wind-logo {
        opacity: 1 !important;
        filter: saturate(1.28) brightness(1.18) contrast(1.04) drop-shadow(0 0 5px rgba(65, 190, 255, .24)) !important;
    }
}

/* Mobile website hero actions: keep Explore courses and Get the app at the
   bottom of the image, with the same quiet dark treatment and a safe gap from
   the phone's bottom edge. */
@media (max-width: 720px) {
    /* Search is useful while practising, but exam mode is intentionally a
       focused timed attempt on the mobile website as well as the native app. */
    body.is-mobile-app-shell.quiz-screen-active.native-exam-quiz:not(.is-native-app) .quiz-toolbar-right {
        display: none !important;
    }

    body.is-mobile-app-shell.quiz-screen-active.native-exam-quiz:not(.is-native-app) .progress-summary-row {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "mode"
            "summary"
            "reviews" !important;
    }

    html:not(.tailwind-native) body.mobile-website-shell.public-screen #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta {
        display: none !important;
    }

    html:not(.tailwind-native) body.mobile-website-shell.public-screen #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-panel {
        bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }

    html:not(.tailwind-native) body.mobile-website-shell.public-screen #screen-landing > .landing-hero.landing-hero-night-trial .landing-install-strip {
        display: flex !important;
        bottom: calc(14px + env(safe-area-inset-bottom)) !important;
        max-width: calc(100vw - 28px) !important;
    }

    html:not(.tailwind-native) body.mobile-website-shell.public-screen #screen-landing > .landing-hero.landing-hero-night-trial .landing-install-cta {
        min-height: 42px !important;
        padding: 0 16px !important;
        gap: 8px !important;
        border: 1px solid rgba(255,255,255,.54) !important;
        border-radius: 10px !important;
        background: rgba(5,17,34,.62) !important;
        color: #f4fbff !important;
        box-shadow: none !important;
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    html:not(.tailwind-native) body.mobile-website-shell.public-screen #screen-landing > .landing-hero.landing-hero-night-trial .landing-install-cta-icon {
        width: 16px !important;
        height: 18px !important;
        border: 0 !important;
        border-radius: 0 !important;
        font-size: 20px !important;
        line-height: 1 !important;
    }
}

/* Final mobile website hero placement: keep the course actions inside the
   hero's own stacking context. They belong to the hero, so they must scroll
   away with it instead of staying fixed over the next landing section. */
@media (max-width: 720px) {
    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-panel {
        position: absolute !important;
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        bottom: calc(64px + env(safe-area-inset-bottom)) !important;
        width: min(390px, calc(100vw - 28px)) !important;
        max-width: calc(100vw - 28px) !important;
        margin: 0 !important;
        transform: translateX(-50%) !important;
        z-index: 4 !important;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-choice-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-choice-actions > button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
        margin: 0 !important;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-hero.landing-hero-night-trial .landing-install-strip {
        position: absolute !important;
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        max-width: calc(100vw - 28px) !important;
        margin: 0 !important;
        transform: translateX(-50%) !important;
        z-index: 4 !important;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-hero.landing-hero-night-trial .landing-install-cta {
        min-height: 42px !important;
        padding: 0 16px !important;
        gap: 8px !important;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta {
        display: none !important;
    }
}

/* Mobile website exam intro: give the mode card its own row so the exam name
   has the full card width, then keep Questions and Time side by side below it. */
@media (max-width: 720px) {
    body.is-mobile-app-shell.quiz-screen-active.native-exam-quiz:not(.is-native-app) .exam-intro-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:8px;
    }

    body.is-mobile-app-shell.quiz-screen-active.native-exam-quiz:not(.is-native-app) .exam-intro-grid .exam-intro-stat {
        min-height:0;
        padding:11px 12px;
    }

    body.is-mobile-app-shell.quiz-screen-active.native-exam-quiz:not(.is-native-app) .exam-intro-grid .exam-intro-mode {
        grid-column:1 / -1;
        grid-row:1;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
    }

    body.is-mobile-app-shell.quiz-screen-active.native-exam-quiz:not(.is-native-app) .exam-intro-grid .exam-intro-mode strong {
        min-width:0;
        margin-top:0;
        overflow-wrap:anywhere;
        text-align:right;
    }
}

/* Final authority for the mobile website install control: the header and
   hero variants must keep the same shape through the landing nav scroll state. */
@media (max-width: 720px) {
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-mobile-install-cta,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-install-cta,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing #landing-mobile-install-app-action,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing #landing-install-app-action {
        border-radius:10px !important;
        -webkit-border-radius:10px !important;
        clip-path:none !important;
        -webkit-clip-path:none !important;
        appearance:none !important;
        -webkit-appearance:none !important;
        transition:none !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen:not(.landing-user-authenticated) #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta {
        display:inline-flex !important;
    }
}

/* Absolute last-cascade finish for the mobile website install action. */
@media (max-width:720px) {
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-hero .landing-install-cta,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-hero .landing-hero-choice-actions > .landing-mobile-install-cta {
        align-items:center !important;
        justify-content:center !important;
        gap:8px !important;
        border:1px solid rgba(255,255,255,.54) !important;
        border-radius:10px !important;
        background:rgba(5,17,34,.48) !important;
        color:#ffffff !important;
        box-shadow:none !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-hero .landing-install-cta-icon,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-nav .landing-install-cta-icon {
        margin:0 !important;
        flex:0 0 auto;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta:hover,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta:focus-visible,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-hero .landing-install-cta:hover,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-hero .landing-install-cta:focus-visible,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-hero .landing-hero-choice-actions > .landing-mobile-install-cta:hover,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing > .landing-hero .landing-hero-choice-actions > .landing-mobile-install-cta:focus-visible {
        background:rgba(5,17,34,.48) !important;
        border-color:rgba(255,255,255,.54) !important;
        box-shadow:none !important;
    }
}

/* Final desktop placement: keep Get the app beside Log in in the website
   header, while installed/native app launches keep it hidden. */
html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:auto;
    min-width:118px;
    min-height:38px;
    padding:0 13px;
    border:1px solid rgba(255,255,255,0.46);
    border-radius:10px;
    background:rgba(5,17,34,0.48);
    color:#fff;
    box-shadow:none;
    cursor:pointer;
    white-space:nowrap;
}

html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta:hover,
html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-nav > .landing-nav-actions > .landing-mobile-install-cta:focus-visible {
    background:rgba(5,17,34,0.68);
    border-color:rgba(255,255,255,0.72);
    outline:none;
}

html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-hero .landing-install-strip {
    display:none !important;
}

#screen-landing > .landing-hero .landing-install-strip[hidden] {
    display:none !important;
}

/* Mobile hero finish: keep the compact two-row course cards at the bottom of
   the hero, directly above the primary action buttons. */
@media (max-width:720px) {
    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-hero .landing-hero-course-cards {
        position:absolute !important;
        left:50% !important;
        bottom:calc(132px + env(safe-area-inset-bottom)) !important;
        width:min(390px, calc(100vw - 28px)) !important;
        max-width:calc(100vw - 28px) !important;
        margin:0 !important;
        transform:translateX(-50%) !important;
        align-items:center !important;
        z-index:5 !important;
        pointer-events:auto !important;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-hero .landing-hero-course-row {
        width:100% !important;
        justify-content:center !important;
        gap:6px !important;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-hero .landing-hero-course-row > button,
    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-hero .landing-hero-course-row > div {
        flex:1 1 0 !important;
        min-width:0 !important;
        padding:8px 7px !important;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-hero .landing-hero-course-row strong {
        font-size:9px !important;
        letter-spacing:0.02em !important;
        line-height:1.2 !important;
        white-space:normal !important;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-hero .landing-install-strip[hidden] {
        display:none !important;
    }
}

/* Mobile website coupon: let the offer scroll away with the page instead of
   staying pinned to the viewport. Native app coupon behavior is unchanged. */
@media (max-width:720px) {
    html.tailwind-mobile-web body.mobile-website-shell #landing-coupon-root,
    html:not(.tailwind-native) body:not(.is-native-app) #landing-coupon-root {
        position:absolute !important;
        top:128px !important;
        right:auto !important;
        bottom:auto !important;
        left:50% !important;
        transform:translateX(-50%) !important;
        width:min(320px, calc(100vw - 32px)) !important;
    }
}

/* Match desktop purchase flow on the mobile website: show the purchase cards
   first, then explain what happens after checkout. */
@media (max-width:720px) {
    html.tailwind-mobile-web body:not(.is-native-app) #screen-landing > .landing-pricing > .pricing-rules {
        order:8 !important;
    }
}

/* Keep the mobile website CTA row close to the hero bottom when a desktop
   window is narrowed into the phone breakpoint. */
@media (max-width:720px) {
    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-panel {
        bottom:calc(14px + env(safe-area-inset-bottom)) !important;
    }
}

/* A narrowed desktop window has no phone home-indicator area. Remove the
   extra safe-area gap there so the CTA buttons stay at the actual hero edge. */
@media (max-width:720px) and (hover:hover) and (pointer:fine) {
    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-panel {
        bottom:4px !important;
    }
}

/* The mobile website landing hero should stay clean: course navigation belongs
   below in the pricing section, not over the aircraft image. */
@media (max-width:720px) {
    html.tailwind-mobile-web body:not(.is-native-app) #screen-landing > .landing-hero .landing-hero-course-cards {
        display:none !important;
        visibility:hidden !important;
        pointer-events:none !important;
    }
}

/* Keep the landing hero focused on the main message. Course choices remain
   available in the pricing section below the hero. */
html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-hero .landing-hero-course-cards {
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

/* Mobile landing order and live-question readability. The pricing gallery uses
   display:contents on phones, so explicit order values keep the course choice
   before its purchase cards and move the purchase guidance to the end. */
@media (max-width:720px) {
    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-pricing .pricing-course-tile[data-pricing-tab="ppl"] {
        order:2 !important;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-pricing > #pricing-ppl {
        order:3 !important;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-pricing .pricing-course-tile[data-pricing-tab="cpl"] {
        order:4 !important;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-pricing > #pricing-cpl {
        order:5 !important;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-pricing .pricing-course-tile[data-pricing-tab="ratings"] {
        order:6 !important;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-pricing > #pricing-ratings {
        order:7 !important;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing > .landing-pricing > .pricing-rules {
        order:8 !important;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing .landing-live-sample {
        box-sizing:border-box;
        grid-template-columns:1fr;
        gap:14px;
        width:calc(100% - 28px);
        margin:0 auto;
        padding:30px 0 38px;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing .landing-live-sample-heading h2 {
        max-width:none;
        font-size:clamp(23px, 7vw, 30px);
        line-height:1.14;
        letter-spacing:-0.025em;
        text-wrap:pretty;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing .landing-live-sample-heading > p:last-child:not(.landing-live-sample-tagline) {
        display:none;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing .landing-live-sample-heading .landing-live-sample-tagline {
        display:block;
        max-width:none;
        margin-top:10px;
        font-size:13px;
        line-height:1.4;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing .landing-live-sample-card {
        display:block;
        width:100%;
        max-width:none;
        padding:12px;
        border-radius:16px;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing .landing-live-sample-sidebar {
        display:none;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing .landing-live-sample-meta {
        margin-bottom:0;
        font-size:10px;
        letter-spacing:0.12em;
        line-height:1.45;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing .landing-live-sample-card h3 {
        margin:9px 0 12px;
        font-size:clamp(18px, 5.4vw, 22px);
        line-height:1.25;
        letter-spacing:-0.01em;
        text-wrap:pretty;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing .landing-live-sample-options {
        grid-template-columns:1fr;
        gap:6px;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing .landing-live-sample-options button {
        align-items:center;
        min-height:0;
        padding:9px 10px;
        gap:8px;
        font-size:13px;
        line-height:1.3;
        text-wrap:pretty;
        overflow-wrap:anywhere;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing .landing-live-sample-options button > span {
        flex:0 0 24px;
        width:24px;
        height:24px;
        margin-top:0;
    }

    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing .landing-live-sample-feedback {
        margin-top:16px;
        padding:14px;
        line-height:1.5;
    }
}

@media (max-width:480px) {
    html:not(.tailwind-native) body:not(.is-native-app) #screen-landing .landing-live-sample-card {
        padding:11px;
    }
}

/* Signed-in mobile website landing: the primary trial action is hidden,
   leaving Explore courses as the only visible hero action. Keep its original
   compact width but place it in the centre of the CTA row instead of leaving
   it in the first column of the two-button grid. */
@media (max-width:720px) {
    html.tailwind-mobile-web body.mobile-website-shell.public-screen.landing-user-authenticated #screen-landing .landing-hero.landing-hero-night-trial .landing-hero-choice-actions.single-action {
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        justify-items:center !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen.landing-user-authenticated #screen-landing .landing-hero.landing-hero-night-trial .landing-hero-choice-actions.single-action > .landing-secondary {
        grid-column:1 / -1 !important;
        width:calc(50% - 5px) !important;
        justify-self:center !important;
    }
}

/* Mobile website About preview: fade the disclosure surface itself as well
   as its contents, so the preview blends into the landing page instead of
   reading as a hard-edged empty square. Remove the mask when expanded so all
   feature content remains fully readable. */
@media (max-width:720px) {
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-about .about-disclosure {
        overflow:hidden !important;
        border-color:rgba(148,163,184,.2) !important;
        border-radius:18px !important;
        background:linear-gradient(
            180deg,
            rgba(15,23,42,.62) 0%,
            rgba(15,23,42,.5) 52%,
            rgba(15,23,42,0) 100%
        ) !important;
        box-shadow:0 18px 44px rgba(2,6,23,.16) !important;
        -webkit-mask-image:linear-gradient(
            to bottom,
            #000 0%,
            #000 58%,
            rgba(0,0,0,.92) 70%,
            rgba(0,0,0,.58) 84%,
            transparent 100%
        );
        mask-image:linear-gradient(
            to bottom,
            #000 0%,
            #000 58%,
            rgba(0,0,0,.92) 70%,
            rgba(0,0,0,.58) 84%,
            transparent 100%
        );
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-about .about-disclosure.is-expanded {
        -webkit-mask-image:none;
        mask-image:none;
        background:rgba(15,23,42,.5) !important;
    }
}

/* Mobile landing Features: remove the duplicate disclosure chrome and keep
   the blue feature label inside the content as the only section marker. */
@media (max-width:720px) {
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-about .about-disclosure {
        overflow:visible !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        -webkit-mask-image:none !important;
        mask-image:none !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-about .about-disclosure-summary,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-about .about-disclosure-toggle {
        display:none !important;
    }
}

/* Keep the mobile live-question preview fully interactive like desktop: show
   the subject/topic navigation beside the question instead of removing it. */
@media (max-width:720px) {
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample {
        grid-template-columns:1fr;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-card {
        display:grid !important;
        grid-template-columns:minmax(112px,.36fr) minmax(0,.64fr);
        gap:10px;
        padding:12px;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-sidebar {
        display:grid !important;
        grid-template-columns:1fr;
        align-content:start;
        gap:4px;
        margin:0;
        padding:8px;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-sidebar-course {
        margin:0 4px 5px;
        font-size:16px;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-sidebar-heading {
        margin:5px 3px 2px;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-sidebar-item {
        padding:6px 5px;
        font-size:10px;
        line-height:1.25;
        white-space:normal;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-options {
        grid-template-columns:1fr;
    }
}

/* Keep the mobile landing actions fixed to the viewport while the page scrolls.
   The wrapper contains only Try for free / Explore courses, so the hero copy
   can scroll normally without carrying the actions upward with it. */
@media (max-width:720px) {
    html:not(.tailwind-native) body.mobile-website-shell.public-screen #screen-landing > .landing-hero.landing-hero-night-trial .landing-hero-panel {
        position:fixed !important;
        z-index:300 !important;
        top:auto !important;
        right:auto !important;
        bottom:calc(14px + env(safe-area-inset-bottom)) !important;
        left:50% !important;
        width:min(390px,calc(100vw - 28px)) !important;
        max-width:calc(100vw - 28px) !important;
        margin:0 !important;
        transform:translateX(-50%) !important;
        transition:none !important;
        will-change:auto !important;
    }
}

/* Mobile live question: place the subject/topic navigation above the question
   so the card stays compact and the answer choices keep useful width. */
@media (max-width:720px) {
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-card {
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        gap:12px !important;
        padding:12px !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-sidebar {
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        align-content:start !important;
        gap:4px !important;
        margin:0 !important;
        padding:8px !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-sidebar-course,
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-sidebar-heading {
        grid-column:1 / -1 !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-sidebar-course {
        margin:0 2px 3px !important;
        font-size:15px !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-sidebar-heading {
        margin:4px 2px 1px !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-sidebar-item {
        min-width:0 !important;
        padding:6px 5px !important;
        font-size:10px !important;
        line-height:1.2 !important;
        white-space:normal !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-question {
        min-width:0 !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-card h3 {
        margin:4px 0 10px !important;
        font-size:clamp(18px,5.4vw,22px) !important;
        line-height:1.2 !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-options {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:7px !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-options button {
        min-height:52px !important;
        padding:8px !important;
        gap:7px !important;
        font-size:12px !important;
        line-height:1.25 !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-options button > span {
        flex-basis:23px !important;
        width:23px !important;
        height:23px !important;
    }
}

/* Mobile live-question navigation: keep Subjects and Topics as two vertical
   columns above the compact question panel. */
@media (max-width:720px) {
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-sidebar {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-sidebar-column {
        display:grid !important;
        grid-template-columns:1fr;
        align-content:start;
        gap:4px;
        min-width:0;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-sidebar-subjects {
        grid-column:1 !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-sidebar-topics {
        grid-column:2 !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-live-sample-sidebar-course {
        grid-column:1 / -1 !important;
    }
}

/* Final mobile landing guard: the feature cards are part of the page, not a
   closed disclosure. Keep them visible even before the runtime state syncs. */
@media (max-width:720px) {
    html:not(.tailwind-native) body.mobile-website-shell.public-screen #screen-landing .landing-about .about-disclosure-content {
        display:grid !important;
        max-height:none !important;
        overflow:visible !important;
        -webkit-mask-image:none !important;
        mask-image:none !important;
    }
}

/* Mobile website Features: use the same compact faded preview and circular
   reveal control as the FAQ section. Keep the duplicate summary hidden while
   leaving the blue Features label inside the preview content. */
@media (max-width:720px) {
    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-about .about-disclosure {
        position:relative !important;
        overflow:visible !important;
        padding-bottom:58px !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        box-shadow:none !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-about .about-disclosure-summary {
        display:none !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-about .about-disclosure-content {
        display:grid !important;
        max-height:270px !important;
        overflow:hidden !important;
        -webkit-mask-image:linear-gradient(
            to bottom,
            #000 0%,
            #000 58%,
            rgba(0,0,0,.96) 66%,
            rgba(0,0,0,.78) 76%,
            rgba(0,0,0,.42) 88%,
            transparent 100%
        ) !important;
        mask-image:linear-gradient(
            to bottom,
            #000 0%,
            #000 58%,
            rgba(0,0,0,.96) 66%,
            rgba(0,0,0,.78) 76%,
            rgba(0,0,0,.42) 88%,
            transparent 100%
        ) !important;
        -webkit-mask-repeat:no-repeat;
        mask-repeat:no-repeat;
        transition:max-height 360ms ease;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-about .about-disclosure.is-expanded .about-disclosure-content {
        max-height:1800px !important;
        -webkit-mask-image:none !important;
        mask-image:none !important;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-about .about-disclosure-toggle {
        position:absolute !important;
        z-index:2;
        bottom:12px;
        left:50%;
        display:grid !important;
        place-items:center;
        width:42px;
        height:42px;
        padding:0;
        border:1px solid color-mix(in srgb, var(--accent) 72%, var(--border));
        border-radius:50%;
        background:var(--control);
        color:var(--accent);
        box-shadow:
            0 8px 24px color-mix(in srgb, #000 24%, transparent),
            0 0 0 8px color-mix(in srgb, var(--bg) 38%, transparent);
        cursor:pointer;
        transform:translateX(-50%);
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-about .about-disclosure-toggle:focus-visible {
        outline:3px solid color-mix(in srgb, var(--accent) 36%, transparent);
        outline-offset:3px;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-about .about-disclosure-toggle svg {
        width:20px;
        height:20px;
        fill:none;
        stroke:currentColor;
        stroke-width:2;
        stroke-linecap:round;
        stroke-linejoin:round;
        transition:transform 220ms ease;
    }

    html.tailwind-mobile-web body.mobile-website-shell.public-screen #screen-landing .landing-about .about-disclosure.is-expanded .about-disclosure-toggle svg {
        transform:rotate(180deg);
    }
}