/* Targeted mobile polish for iPhone 14 Pro (393 × 852 CSS px). */

.mobile-brand,
.mobile-menu-toggle {
    display: none;
}

.mobile-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 900px) {
    :root {
        --mobile-gutter: 16px;
        --mobile-nav-height: 67px;
    }

    html {
        scroll-padding-top: calc(var(--mobile-nav-height) + env(safe-area-inset-top) + 12px);
    }

    body {
        min-width: 320px;
        overscroll-behavior-y: contain;
        background-attachment: scroll;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    button,
    a {
        touch-action: manipulation;
    }

    .top-nav {
        top: 0;
        display: grid !important;
        width: 100%;
        min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-top)) !important;
        grid-template-columns: minmax(0, 1fr) 48px;
        align-items: center;
        gap: 10px !important;
        padding: calc(8px + env(safe-area-inset-top)) var(--mobile-gutter) 8px !important;
        border-bottom-width: 3px;
        background: rgba(250, 248, 245, 0.98);
        box-shadow: 0 7px 0 rgba(92, 58, 33, 0.2);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }

    .mobile-brand {
        display: inline-flex;
        width: max-content;
        min-height: 48px;
        align-items: center;
        gap: 9px;
        padding: 0 4px;
        color: var(--pure-black);
        font-family: "Press Start 2P", cursive;
        font-size: 0.72rem;
        line-height: 1;
        text-decoration: none;
    }

    .mobile-brand::after {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        background: url("banana.png") center / contain no-repeat;
        content: "";
        image-rendering: pixelated;
        transform: rotate(-9deg);
    }

    .mobile-menu-toggle {
        display: none;
        width: 48px;
        height: 48px;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0;
        border: 2px solid var(--pure-black);
        border-radius: 10px;
        color: var(--pure-black);
        background: var(--banana-yellow);
        box-shadow: 4px 4px 0 var(--action-orange);
    }

    .mobile-nav-ready .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
    }

    .mobile-menu-toggle__line {
        width: 22px;
        height: 3px;
        border-radius: 2px;
        background: currentColor;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .top-nav.is-open .mobile-menu-toggle__line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .top-nav.is-open .mobile-menu-toggle__line:nth-child(2) {
        opacity: 0;
    }

    .top-nav.is-open .mobile-menu-toggle__line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .top-nav .nav-links,
    .top-nav .nav-actions {
        grid-column: 1 / -1;
        width: 100%;
        align-items: stretch;
        justify-content: stretch;
        gap: 8px !important;
    }

    .mobile-nav-ready .top-nav .nav-links,
    .mobile-nav-ready .top-nav .nav-actions {
        display: none;
    }

    .mobile-nav-ready .top-nav.is-open .nav-links,
    .mobile-nav-ready .top-nav.is-open .nav-actions {
        display: grid;
    }

    .top-nav.is-open .nav-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-top: 4px;
    }

    .top-nav.is-open .nav-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-bottom: 4px;
    }

    .top-nav .nav-link,
    .top-nav .tg-btn,
    .top-nav .login-btn {
        display: flex !important;
        width: 100%;
        min-width: 0;
        min-height: 48px !important;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 9px 7px !important;
        border-radius: 9px;
        font-family: "Press Start 2P", cursive;
        font-size: 0.57rem !important;
        line-height: 1.45 !important;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .top-nav .nav-link {
        border: 2px solid rgba(43, 43, 43, 0.16);
        background: rgba(255, 255, 255, 0.58);
    }

    .top-nav .nav-link[aria-current="page"] {
        border-color: var(--pure-black);
        background: var(--banana-yellow);
    }

    .top-nav .tg-btn,
    .top-nav .login-btn {
        border-width: 2px;
    }

    .page-home header {
        padding: calc(var(--mobile-nav-height) + env(safe-area-inset-top) + 30px) var(--mobile-gutter) 54px !important;
    }

    .page-about header {
        padding-top: calc(var(--mobile-nav-height) + env(safe-area-inset-top) + 34px) !important;
    }

    .page-programs main,
    .page-teachers main {
        padding-top: calc(var(--mobile-nav-height) + env(safe-area-inset-top) + 34px) !important;
    }

    .program-page .program-hero {
        padding: calc(var(--mobile-nav-height) + env(safe-area-inset-top) + 38px) var(--mobile-gutter) 58px !important;
    }

    .account-page .account-main {
        padding: calc(var(--mobile-nav-height) + env(safe-area-inset-top) + 28px) var(--mobile-gutter) calc(68px + env(safe-area-inset-bottom)) !important;
    }

    .page-home .logo-container {
        display: grid !important;
        width: max-content;
        max-width: 100%;
        grid-template-columns: auto 54px;
        gap: 6px 8px !important;
        margin: 22px auto 30px !important;
        font-size: clamp(2.6rem, 14.2vw, 3.6rem) !important;
        line-height: 1.12;
        text-align: left;
    }

    .page-home .logo-container > span:first-child {
        grid-column: 1;
        grid-row: 1;
    }

    .page-home .logo-container > span:last-child {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .page-home .banana-trick {
        width: 54px;
        height: 54px;
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        margin: 0 !important;
    }

    .page-home .spin-target {
        width: 54px !important;
        height: 54px !important;
        object-fit: contain;
    }

    .page-home .hero-kicker {
        width: min(100%, 330px);
        min-height: 36px;
        margin-inline: auto;
        padding: 8px 11px;
        font-size: 0.51rem;
        line-height: 1.55;
    }

    .hero-intro,
    .hero-intro__copy,
    .hero-intro__route {
        min-width: 0;
    }

    .hero-intro__copy,
    .hero-intro__route {
        padding: 20px 17px !important;
    }

    .hero-intro h1 {
        font-size: clamp(1.18rem, 6.25vw, 1.5rem) !important;
        line-height: 1.45;
    }

    .hero-intro__lead,
    .page-about p,
    .program-page p,
    .account-page p {
        font-size: 1rem;
    }

    .hero-intro__primary,
    .hero-intro__secondary,
    .primary-btn,
    .secondary-btn,
    .support-link,
    .word-complete-button,
    .auth-submit,
    .auth-choice,
    .logout-button {
        min-height: 48px;
    }

    .page-home .hero-route__head img {
        width: 78px;
        height: 78px;
    }

    .page-home .hero-route__list li {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
        padding: 14px 12px;
    }

    .page-home .hero-route__list small {
        line-height: 1.55;
    }

    .features-grid,
    .programs-grid,
    .teachers-grid,
    .about-container,
    .content-inner,
    .dashboard-shell {
        width: 100%;
        max-width: 100%;
    }

    .features-grid,
    .programs-grid,
    .teachers-grid {
        padding-inline: var(--mobile-gutter) !important;
    }

    .feature-card,
    .program-card,
    .teacher-card,
    .page-about .about-section,
    .page-about .about-cta,
    .dashboard-panel,
    .welcome-panel {
        padding: 22px 18px !important;
    }

    .content-section {
        padding: 56px var(--mobile-gutter) !important;
    }

    .program-page .back-link {
        min-height: 44px;
        align-items: center;
        padding-block: 8px;
    }

    .program-page .program-hero h1 {
        font-size: clamp(1.48rem, 7.4vw, 1.92rem) !important;
        line-height: 1.4;
    }

    .program-page .primary-btn,
    .program-page .secondary-btn {
        padding-block: 14px;
    }

    .program-page .banner-note {
        font-size: 0.58rem;
        line-height: 1.5;
    }

    .account-page input,
    .account-page select,
    .account-page textarea {
        min-height: 48px;
        font-size: 16px !important;
    }

    .account-page .auth-overlay {
        padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
    }

    .account-page .auth-dialog {
        width: 100%;
        min-height: 0;
        max-height: calc(100svh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
        overflow-y: auto;
        border-radius: 14px;
        box-shadow: 7px 7px 0 var(--action-orange);
    }

    .account-page .auth-visual {
        min-height: 142px;
        padding: 18px 20px;
    }

    .account-page .auth-monkey-frame {
        width: 88px;
        height: 88px;
        margin-bottom: 12px;
    }

    .account-page .auth-visual h2 {
        margin-bottom: 0;
        font-size: 0.76rem;
    }

    .account-page .auth-panel {
        padding: 50px 18px 24px;
    }

    .account-page .auth-close,
    .account-page .password-toggle,
    .account-page .icon-button,
    .account-page .icon-delete {
        min-width: 44px;
        min-height: 44px;
    }

    .account-page .account-state,
    .account-page .dashboard-header {
        gap: 12px;
    }

    .site-footer {
        padding-bottom: calc(28px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 370px) {
    :root {
        --mobile-gutter: 13px;
    }

    .top-nav.is-open .nav-links,
    .top-nav.is-open .nav-actions {
        grid-template-columns: 1fr;
    }

    .page-home .logo-container {
        font-size: clamp(2.05rem, 12.8vw, 2.8rem) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-toggle__line {
        transition: none;
    }
}

:root {
    color-scheme: only light;
}

/* Keep the intended palette when a mobile browser requests automatic darkening. */
.page-home header,
.page-about header {
    background:
        radial-gradient(circle at 50% -15%, rgba(92, 58, 33, 0.48), transparent 34rem),
        linear-gradient(135deg, var(--pure-black) 0%, #1a1a1a 100%) !important;
}

.page-home .logo-container {
    color: var(--banana-yellow) !important;
    text-shadow:
        0 0 12px rgba(251, 234, 140, 0.78),
        0 0 26px rgba(251, 234, 140, 0.3),
        5px 5px 0 var(--action-orange) !important;
}

@media (max-width: 520px) {
    :root {
        --mobile-gutter: 14px;
        --mobile-nav-height: 62px;
    }

    body::before {
        width: 96px;
        opacity: 0.035;
    }

    .top-nav {
        min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-top)) !important;
        padding: calc(7px + env(safe-area-inset-top)) var(--mobile-gutter) 7px !important;
        border-bottom-width: 2px;
        box-shadow: 0 5px 0 rgba(92, 58, 33, 0.18);
    }

    .mobile-brand {
        min-height: 44px;
        gap: 8px;
        font-size: 0.82rem;
        text-shadow:
            0 0 8px rgba(251, 234, 140, 0.72),
            0 0 18px rgba(251, 234, 140, 0.24);
    }

    .mobile-brand::after {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
        filter: drop-shadow(0 0 9px rgba(251, 234, 140, 0.82));
    }

    .mobile-menu-toggle {
        width: 44px;
        height: 44px;
        border-radius: 9px;
        box-shadow: 3px 3px 0 var(--action-orange);
    }

    .page-home header {
        padding: calc(var(--mobile-nav-height) + env(safe-area-inset-top) + 18px) var(--mobile-gutter) 30px !important;
    }

    .page-home .hero-kicker {
        width: max-content;
        max-width: 100%;
        min-height: 32px;
        padding: 7px 10px;
        font-size: 0.44rem;
        line-height: 1.55;
    }

    .page-home .logo-container {
        display: grid !important;
        width: max-content;
        max-width: 100%;
        grid-template-columns: auto 37px auto;
        grid-template-rows: auto;
        align-items: center;
        gap: 7px !important;
        margin: 16px auto 18px !important;
        font-size: clamp(2rem, 9vw, 2.24rem) !important;
        line-height: 1.1;
        letter-spacing: -1px;
        text-shadow:
            0 0 10px rgba(251, 234, 140, 0.86),
            0 0 22px rgba(251, 234, 140, 0.34),
            3px 3px 0 var(--action-orange) !important;
    }

    .page-home .logo-container > span:first-child {
        grid-column: 1;
        grid-row: 1;
    }

    .page-home .logo-container > span:last-child {
        grid-column: 3;
        grid-row: 1;
    }

    .page-home .banana-trick {
        width: 37px;
        height: 37px;
        grid-column: 2;
        grid-row: 1;
    }

    .page-home .spin-target {
        width: 37px !important;
        height: 37px !important;
        filter: drop-shadow(0 0 9px rgba(251, 234, 140, 0.78));
    }

    .hero-intro {
        gap: 6px;
        padding: 6px;
        border-width: 3px;
        border-radius: 13px;
        box-shadow: 5px 5px 0 var(--action-orange);
    }

    .hero-intro__copy {
        padding: 14px 13px 15px !important;
    }

    .hero-intro__eyebrow,
    .hero-route__kicker {
        font-size: 0.45rem;
        line-height: 1.55;
    }

    .hero-intro h1 {
        margin: 9px 0 10px;
        font-size: clamp(0.92rem, 4.45vw, 1.06rem) !important;
        line-height: 1.42;
        letter-spacing: -0.02em;
    }

    .hero-intro__lead {
        font-size: 0.88rem;
        line-height: 1.48;
    }

    .hero-intro__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 14px;
    }

    .hero-intro__primary,
    .hero-intro__secondary {
        width: 100%;
        min-height: 44px;
        padding: 8px 7px;
        border-width: 2px;
        font-size: 0.43rem;
        line-height: 1.55;
    }

    .hero-intro__route {
        padding: 10px !important;
        border-width: 2px;
        border-radius: 11px;
    }

    .page-home .hero-route__head {
        gap: 10px;
        margin-bottom: 7px;
        padding: 7px 9px;
        border-radius: 9px;
    }

    .page-home .hero-route__head img {
        width: 50px;
        height: 50px;
    }

    .page-home .hero-route__head strong {
        margin-top: 4px;
        font-size: 0.84rem;
        line-height: 1.35;
    }

    .hero-route__list {
        gap: 5px;
    }

    .page-home .hero-route__list li {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 7px;
        padding: 7px 9px;
        border-radius: 8px;
    }

    .hero-route__number {
        font-size: 0.47rem;
    }

    .page-home .hero-route__list strong {
        margin-bottom: 1px;
        font-size: 0.78rem;
    }

    .page-home .hero-route__list small {
        font-size: 0.7rem;
        line-height: 1.35;
    }
}

@media (max-width: 520px) {
    .features-grid {
        gap: 15px;
        padding: 40px var(--mobile-gutter) 54px !important;
    }

    .feature-card {
        display: grid;
        min-height: 0;
        grid-template-columns: 86px minmax(0, 1fr);
        grid-template-rows: auto 1fr auto;
        gap: 5px 13px;
        align-items: center;
        padding: 13px !important;
        border-width: 3px;
        border-radius: 12px;
        box-shadow: 6px 6px 0 var(--banana-yellow);
        text-align: left;
    }

    .feature-image {
        width: 86px;
        height: 86px;
        grid-row: 1 / span 3;
        margin: 0;
        border-width: 2px;
        border-radius: 9px;
        object-fit: contain;
    }

    .feature-card h2 {
        margin: 0 !important;
        font-size: 0.64rem !important;
        line-height: 1.5;
    }

    .feature-card p.subtitle {
        margin: 0;
        font-size: 0.79rem;
        line-height: 1.42;
    }

    .feature-card::after {
        grid-column: 2;
        margin: 0;
        padding-top: 5px;
        font-size: 0.43rem;
    }

    .home-directions,
    .baby-groups-showcase,
    .home-final-callout {
        width: calc(100% - 28px);
    }

    .home-directions {
        padding: 0 0 54px;
    }

    .home-section-heading {
        margin-bottom: 21px;
    }

    .home-section-kicker {
        margin-bottom: 8px;
        font-size: 0.48rem;
    }

    .home-section-heading h2,
    .baby-groups-showcase h2,
    .home-final-callout h2 {
        margin-bottom: 10px;
        font-size: 0.9rem !important;
        line-height: 1.5;
    }

    .home-section-heading p,
    .baby-groups-showcase__copy p {
        font-size: 0.88rem;
        line-height: 1.55;
    }

    .direction-grid {
        gap: 13px;
    }

    .direction-card {
        min-height: 0;
        grid-template-columns: 70px minmax(0, 1fr);
        grid-template-rows: auto;
        gap: 11px;
        align-items: center;
        padding: 14px;
        border-width: 3px;
        border-radius: 12px;
        box-shadow: 6px 6px 0 var(--direction-accent, var(--banana-yellow));
    }

    .direction-card img {
        width: 70px;
        height: 70px;
        grid-row: auto;
    }

    .direction-card__label {
        margin: 0 24px 5px 0;
        font-size: 0.43rem;
    }

    .direction-card h3 {
        margin-bottom: 6px;
        font-size: 0.62rem;
        line-height: 1.5;
    }

    .direction-card p {
        font-size: 0.79rem;
        line-height: 1.45;
    }

    .direction-card__number {
        top: 12px;
        right: 12px;
        font-size: 0.54rem;
    }

    .direction-card__arrow {
        display: none;
    }
}

@media (max-width: 520px) {
    .baby-groups-showcase {
        gap: 18px;
        margin-bottom: 54px;
        padding: 20px 16px;
        border-width: 3px;
        border-radius: 14px;
        box-shadow: 7px 7px 0 var(--banana-yellow);
    }

    .baby-groups-showcase__copy > a,
    .home-final-callout > a {
        width: 100%;
        min-height: 44px;
        margin-top: 18px;
        padding: 9px 10px;
        border-width: 2px;
        font-size: 0.46rem;
    }

    .baby-banana-team {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 5px;
        padding: 9px;
        border-radius: 11px;
    }

    .baby-banana-card,
    .baby-banana-card:last-child {
        grid-column: auto;
        padding: 4px 1px 6px;
        border-radius: 8px;
        box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.42);
    }

    .baby-banana-sprite {
        height: 24px;
    }

    .baby-banana-sprite img {
        width: 62px;
        height: 62px;
    }

    .baby-banana-card figcaption {
        margin-top: 2px;
        font-size: 0.32rem;
        line-height: 1.35;
    }

    .home-final-callout {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 13px;
        margin-bottom: 66px;
        padding: 15px;
        border-radius: 13px;
        box-shadow: 6px 6px 0 var(--action-orange);
        text-align: left;
    }

    .home-final-callout img {
        width: 58px;
        height: 58px;
        margin: 0;
    }

    .home-final-callout .home-section-kicker {
        margin-bottom: 5px;
    }

    .home-final-callout h2 {
        margin: 0;
        font-size: 0.72rem !important;
    }

    .home-final-callout > a {
        grid-column: 1 / -1;
        margin-top: 1px;
    }

    .site-footer {
        margin-top: 0;
        padding: 22px 14px calc(22px + env(safe-area-inset-bottom));
        font-size: 0.78rem;
    }
}

@media (max-width: 350px) {
    .hero-intro__actions {
        grid-template-columns: 1fr;
    }

    .page-home .logo-container {
        font-size: 1.38rem !important;
    }

    .feature-card {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .feature-image {
        width: 74px;
        height: 74px;
    }
}

@media (max-width: 520px) {
    .page-programs main,
    .page-teachers main {
        padding: calc(var(--mobile-nav-height) + env(safe-area-inset-top) + 24px) var(--mobile-gutter) 54px !important;
    }

    .page-programs .page-kicker,
    .page-teachers .page-kicker {
        margin-bottom: 10px;
        padding: 7px 9px;
        font-size: 0.43rem;
        line-height: 1.5;
        text-align: center;
    }

    .page-programs .page-title,
    .page-teachers .page-title {
        margin-bottom: 24px;
        font-size: 0.96rem !important;
        line-height: 1.5;
        text-shadow: 3px 3px 0 var(--banana-yellow);
    }

    .programs-grid,
    .teachers-grid {
        gap: 14px;
    }

    .page-programs .program-card {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        grid-template-rows: auto 1fr auto;
        gap: 5px 13px;
        align-items: center;
        padding: 13px !important;
        border-width: 3px;
        border-radius: 12px;
        box-shadow: 6px 6px 0 var(--banana-yellow);
        text-align: left;
    }

    .page-programs .program-image {
        width: 88px;
        height: 88px;
        grid-row: 1 / span 3;
        margin: 0;
        border-width: 2px;
        border-radius: 9px;
        object-fit: contain;
    }

    .page-programs .program-card h2 {
        margin: 0;
        font-size: 0.64rem;
        line-height: 1.5;
    }

    .page-programs .program-card p {
        margin: 0;
        font-size: 0.79rem;
        line-height: 1.42;
    }

    .page-programs .program-badge {
        justify-self: start;
        margin-top: 3px;
        padding: 6px 7px;
        font-size: 0.4rem;
        line-height: 1.35;
    }

    .page-teachers .teacher-card {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 16px;
        align-items: center;
        padding: 15px !important;
        border-width: 3px;
        border-radius: 12px;
        box-shadow: 6px 6px 0 var(--banana-yellow);
        text-align: left;
    }

    .page-teachers .teacher-photo,
    .page-teachers .image-placeholder {
        width: 112px;
        height: 150px;
        margin: 0;
        border-width: 2px;
        border-radius: 9px;
        object-fit: cover;
    }

    .page-teachers .teacher-card__copy {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 13px;
    }

    .page-teachers .teacher-card h2 {
        margin: 0;
        font-size: 0.78rem;
        line-height: 1.5;
    }

    .page-teachers .badges-container {
        justify-content: flex-start;
        gap: 7px;
        margin-top: 0;
    }

    .page-teachers .teacher-badge {
        padding: 8px 9px;
        font-size: 0.5rem;
        line-height: 1.4;
    }

    .page-about header {
        padding: calc(var(--mobile-nav-height) + env(safe-area-inset-top) + 24px) var(--mobile-gutter) 104px !important;
    }

    .page-about .hero-kicker {
        width: max-content;
        max-width: 100%;
        min-height: 30px;
        margin-inline: auto;
        padding: 7px 10px;
        font-size: 0.44rem;
    }

    .page-about .logo-container {
        gap: 7px;
        margin: 18px auto 20px;
        font-size: 1.45rem !important;
        line-height: 1.35;
        text-shadow:
            0 0 10px rgba(251, 234, 140, 0.78),
            3px 3px 0 var(--action-orange);
    }

    .page-about .hero-text {
        padding: 17px 16px;
        border-width: 3px;
        border-radius: 12px;
        font-size: 0.88rem;
        line-height: 1.55;
    }

    .page-about .monkey-tracker {
        right: 7%;
        bottom: 8px;
        width: 108px;
    }

    .page-about main {
        padding: 48px var(--mobile-gutter) 64px !important;
    }

    .page-about .about-container {
        gap: 16px;
    }

    .page-about .about-section,
    .page-about .about-cta {
        padding: 19px 17px !important;
        border-width: 3px;
        border-radius: 12px;
        box-shadow: 6px 6px 0 var(--banana-yellow);
    }

    .page-about .about-label {
        margin-bottom: 10px;
        font-size: 0.44rem;
    }

    .page-about .about-box h2 {
        margin-bottom: 10px;
        font-size: 0.72rem;
        line-height: 1.5;
    }

    .page-about .about-box p {
        margin-bottom: 10px;
        font-size: 0.88rem;
        line-height: 1.58;
    }

    .page-about .about-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 16px;
    }

    .page-about .about-primary-link,
    .page-about .about-secondary-link {
        min-height: 44px;
        padding: 9px 10px;
        border-width: 2px;
        font-size: 0.45rem;
    }
}

@media (max-width: 520px) {
    .program-page .program-hero {
        padding: calc(var(--mobile-nav-height) + env(safe-area-inset-top) + 24px) var(--mobile-gutter) 42px !important;
    }

    .program-page .program-hero-inner,
    .program-page .homework-layout,
    .program-page .result-layout {
        gap: 22px;
    }

    .program-page .back-link {
        min-height: 44px;
        margin-bottom: 12px;
        padding: 7px 0;
        font-size: 0.45rem;
    }

    .program-page .program-eyebrow,
    .program-page .section-kicker,
    .program-page .timeline-number {
        font-size: 0.44rem;
        line-height: 1.5;
    }

    .program-page .program-hero h1 {
        margin: 13px 0 14px;
        font-size: 1.12rem !important;
        line-height: 1.48;
        text-shadow: 3px 3px 0 var(--action-orange);
    }

    .program-page .program-lead {
        font-size: 0.9rem;
        line-height: 1.58;
    }

    .program-page .program-tags {
        gap: 6px;
        margin-top: 17px;
    }

    .program-page .program-tags li {
        padding: 6px 8px;
        font-size: 0.4rem;
        line-height: 1.4;
    }

    .program-page .hero-actions,
    .program-page .cta-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 18px;
    }

    .program-page .primary-btn,
    .program-page .secondary-btn {
        width: 100%;
        min-height: 44px;
        padding: 8px 7px;
        border-width: 2px;
        font-size: 0.43rem;
        line-height: 1.55;
    }

    .program-page .program-banner {
        width: 100%;
    }

    .program-page .banner-canvas {
        border-width: 3px;
        border-radius: 12px;
        box-shadow: 6px 6px 0 var(--action-orange);
    }

    .program-page .banner-note {
        right: 8px;
        bottom: 8px;
        left: 8px;
        padding: 6px;
        font-size: 0.39rem;
    }

    .program-page .program-banner figcaption {
        margin-top: 12px;
        font-size: 0.76rem;
        line-height: 1.45;
    }

    .program-page .content-section {
        padding: 44px var(--mobile-gutter) !important;
    }

    .program-page .section-heading {
        margin-bottom: 22px;
    }

    .program-page .section-heading h2,
    .program-page .homework-copy h2,
    .program-page .result-copy h2,
    .program-page .program-cta h2 {
        margin: 9px 0 10px;
        font-size: 0.9rem !important;
        line-height: 1.5;
    }

    .program-page .section-heading p,
    .program-page .homework-copy p,
    .program-page .result-copy p,
    .program-page .program-cta p {
        font-size: 0.88rem;
        line-height: 1.58;
    }

    .program-page .feature-grid,
    .program-page .lesson-timeline {
        gap: 11px;
    }

    .program-page .feature-item,
    .program-page .timeline-step,
    .program-page .homework-point {
        padding: 16px;
        border-radius: 11px;
    }

    .program-page .feature-icon {
        width: 42px;
        height: 42px;
    }

    .program-page .feature-item h3,
    .program-page .timeline-step h3,
    .program-page .homework-points h3 {
        font-size: 0.64rem;
        line-height: 1.5;
    }

    .program-page .feature-item p,
    .program-page .timeline-step p,
    .program-page .homework-points p,
    .program-page .result-list li {
        font-size: 0.82rem;
        line-height: 1.5;
    }

    .program-page .result-card,
    .program-page .program-cta {
        padding: 20px 17px;
        border-width: 3px;
        border-radius: 12px;
        box-shadow: 6px 6px 0 var(--action-orange);
    }
}

@media (max-width: 350px) {
    .program-page .hero-actions,
    .program-page .cta-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .account-page .account-main {
        padding: calc(var(--mobile-nav-height) + env(safe-area-inset-top) + 22px) var(--mobile-gutter) calc(48px + env(safe-area-inset-bottom)) !important;
    }

    .account-page .dashboard-grid {
        gap: 13px;
    }

    .account-page .dashboard-panel,
    .account-page .welcome-panel {
        padding: 18px 16px !important;
        border-width: 3px;
        border-radius: 12px;
        box-shadow: 5px 5px 0 var(--banana-yellow);
    }

    .account-page .welcome-panel {
        box-shadow: 6px 6px 0 var(--action-orange);
    }

    .account-page .welcome-monkey,
    .account-page .course-monkey {
        width: min(40%, 128px);
    }

    .account-page .auth-dialog {
        border-width: 3px;
        border-radius: 12px;
        box-shadow: 5px 5px 0 var(--action-orange);
    }

    .account-page .auth-visual {
        min-height: 112px;
        padding: 13px 16px;
    }

    .account-page .auth-monkey-frame {
        width: 72px;
        height: 72px;
        margin-bottom: 8px;
        box-shadow: 4px 4px 0 var(--action-orange);
    }

    .account-page .auth-panel {
        padding: 42px 16px 20px;
    }

    .account-page .auth-choice,
    .account-page .auth-submit,
    .account-page .logout-button,
    .account-page .word-complete-button,
    .account-page .support-link {
        min-height: 44px;
    }

    .account-page .lesson-item {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .account-page .toast {
        right: var(--mobile-gutter);
        bottom: calc(14px + env(safe-area-inset-bottom));
        left: var(--mobile-gutter);
        width: auto;
    }
}

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    :root {
        --mobile-nav-height: 56px;
        --mobile-gutter: 18px;
    }

    .top-nav {
        min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-top)) !important;
        padding: calc(6px + env(safe-area-inset-top)) var(--mobile-gutter) 6px !important;
    }

    .mobile-brand,
    .mobile-menu-toggle {
        min-height: 44px;
    }

    .mobile-menu-toggle {
        width: 44px;
        height: 44px;
    }

    .page-home header {
        padding: calc(var(--mobile-nav-height) + env(safe-area-inset-top) + 18px) var(--mobile-gutter) 30px !important;
    }

    .page-home .hero-kicker {
        min-height: 30px;
        padding: 6px 10px;
        font-size: 0.44rem;
    }

    .page-home .logo-container {
        display: grid !important;
        width: max-content;
        grid-template-columns: auto 32px auto;
        grid-template-rows: auto;
        gap: 9px !important;
        margin: 16px auto 20px !important;
        font-size: 1.72rem !important;
        line-height: 1.1;
        text-shadow:
            0 0 10px rgba(251, 234, 140, 0.86),
            3px 3px 0 var(--action-orange) !important;
    }

    .page-home .logo-container > span:first-child {
        grid-column: 1;
        grid-row: 1;
    }

    .page-home .logo-container > span:last-child {
        grid-column: 3;
        grid-row: 1;
    }

    .page-home .banana-trick,
    .page-home .spin-target {
        width: 32px !important;
        height: 32px !important;
    }

    .page-home .banana-trick {
        grid-column: 2;
        grid-row: 1;
        margin: 0 !important;
    }

    .hero-intro {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        gap: 8px;
        padding: 8px;
        border-width: 3px;
        box-shadow: 6px 6px 0 var(--action-orange);
    }

    .hero-intro__copy,
    .hero-intro__route {
        padding: 15px !important;
    }

    .hero-intro h1 {
        margin: 10px 0 11px;
        font-size: 0.92rem !important;
        line-height: 1.45;
    }

    .hero-intro__lead {
        font-size: 0.82rem;
        line-height: 1.48;
    }

    .hero-intro__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 14px;
    }

    .hero-intro__primary,
    .hero-intro__secondary {
        min-height: 44px;
        padding: 7px 6px;
        font-size: 0.4rem;
    }

    .page-home .hero-route__head {
        gap: 10px;
        margin-bottom: 8px;
        padding: 8px 9px;
    }

    .page-home .hero-route__head img {
        width: 48px;
        height: 48px;
    }

    .page-home .hero-route__kicker {
        font-size: 0.42rem;
    }

    .page-home .hero-route__head strong {
        margin-top: 4px;
        font-size: 0.78rem;
    }

    .hero-route__list {
        gap: 5px;
    }

    .page-home .hero-route__list li {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 7px;
        padding: 7px 9px;
    }

    .page-home .hero-route__list strong {
        font-size: 0.72rem;
    }

    .page-home .hero-route__list small {
        font-size: 0.68rem;
        line-height: 1.35;
    }

    .program-page .program-hero {
        padding-top: calc(var(--mobile-nav-height) + env(safe-area-inset-top) + 22px) !important;
    }

    .program-page .program-hero-inner {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.78fr);
    }

    .page-about header {
        padding-top: calc(var(--mobile-nav-height) + env(safe-area-inset-top) + 22px) !important;
    }
}

/* Home hero v9: one clear action and compact live lesson on phones */
@media (max-width: 820px) {
    .page-home header {
        padding-top: calc(var(--mobile-nav-height) + env(safe-area-inset-top) + 18px) !important;
    }

    .page-home .hero-kicker {
        min-height: 30px;
        padding: 6px 11px;
        font-size: 0.45rem;
    }

    .page-home .logo-container {
        display: grid !important;
        width: max-content;
        max-width: 100%;
        grid-template-columns: auto 36px auto;
        grid-template-rows: auto;
        gap: 8px !important;
        margin: 14px auto 18px !important;
        font-size: clamp(1.55rem, 7.4vw, 2rem) !important;
        line-height: 1.08;
    }

    .page-home .logo-container > span:first-child {
        grid-column: 1;
        grid-row: 1;
    }

    .page-home .logo-container > span:last-child {
        grid-column: 3;
        grid-row: 1;
    }

    .page-home .banana-trick,
    .page-home .spin-target {
        width: 36px !important;
        height: 36px !important;
    }

    .page-home .banana-trick {
        grid-column: 2;
        grid-row: 1;
        margin: 0 !important;
    }

    .page-home .hero-intro {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
        border-width: 3px;
        border-radius: 16px;
        background: var(--pure-black);
        box-shadow: 7px 7px 0 var(--action-orange);
    }

    .page-home .hero-intro__copy {
        padding: 24px 20px 22px !important;
    }

    .page-home .hero-proof {
        gap: 9px;
        margin-bottom: 20px;
        padding: 6px 11px 6px 7px;
    }

    .page-home .hero-proof__faces img {
        width: 30px;
        height: 30px;
    }

    .page-home .hero-proof strong {
        font-size: 0.74rem;
    }

    .page-home .hero-intro__eyebrow {
        font-size: 0.5rem;
    }

    .page-home .hero-intro h1 {
        margin: 13px 0 16px;
        font-size: clamp(1.28rem, 5.8vw, 1.72rem) !important;
        line-height: 1.35;
        letter-spacing: -0.035em;
    }

    .page-home .hero-intro h1 span {
        text-decoration-thickness: 3px;
        text-underline-offset: 6px;
    }

    .page-home .hero-intro__lead {
        font-size: 0.95rem;
        line-height: 1.58;
    }

    .page-home .hero-intro__actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 22px;
    }

    .page-home .hero-intro__primary,
    .page-home .hero-intro__secondary {
        width: 100%;
        min-height: 52px;
        padding: 11px 12px;
        font-size: 0.5rem;
    }

    .page-home .hero-intro__tracks {
        gap: 8px 14px;
        margin-top: 20px;
        font-size: 0.72rem;
        line-height: 1.45;
    }

    .page-home .hero-live {
        min-height: 360px;
        padding: 12px !important;
        border-width: 2px;
        border-radius: 12px;
        background-size: 24px 24px, 24px 24px, auto;
    }

    .page-home .hero-live__bar {
        padding: 9px 10px;
        font-size: 0.7rem;
    }

    .page-home .hero-live__status {
        font-size: 0.42rem;
    }

    .page-home .hero-live__stage {
        min-height: 242px;
    }

    .page-home .hero-live__gorilla {
        width: min(58%, 190px);
    }

    .page-home .hero-live__bubble {
        padding: 9px 10px;
        border-width: 2px;
        font-size: 0.52rem;
        box-shadow: 4px 4px 0 var(--action-orange);
    }

    .page-home .hero-live__bubble--hello {
        top: 34px;
    }

    .page-home .hero-live__bubble--reply {
        top: 74px;
    }

    .page-home .hero-live__score {
        right: 0;
        bottom: 12px;
        padding: 8px 9px;
        border-width: 2px;
        font-size: 0.66rem;
        box-shadow: 4px 4px 0 var(--action-orange);
    }

    .page-home .hero-live__score strong {
        font-size: 0.5rem;
    }

    .page-home .hero-live__footer {
        gap: 6px;
    }

    .page-home .hero-live__footer span {
        padding: 6px 8px;
        font-size: 0.61rem;
    }
}

@media (max-width: 440px) {
    .page-home header {
        padding-bottom: 34px !important;
    }

    .page-home .hero-intro__copy {
        padding: 21px 16px 19px !important;
    }

    .page-home .logo-container {
        grid-template-columns: auto 31px auto;
        gap: 6px !important;
        font-size: clamp(1.38rem, 7vw, 1.72rem) !important;
    }

    .page-home .banana-trick,
    .page-home .spin-target {
        width: 31px !important;
        height: 31px !important;
    }

    .page-home .hero-proof {
        width: 100%;
        justify-content: flex-start;
    }

    .page-home .hero-proof strong {
        font-size: 0.68rem;
    }

    .page-home .hero-intro h1 {
        font-size: clamp(1.08rem, 5.4vw, 1.3rem) !important;
    }

    .page-home .hero-intro__lead {
        font-size: 0.9rem;
    }

    .page-home .hero-intro__tracks {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .page-home .hero-live {
        min-height: 330px;
        padding: 10px !important;
    }

    .page-home .hero-live__bar > span:last-child {
        max-width: 145px;
        font-size: 0.64rem;
        line-height: 1.3;
        text-align: right;
    }

    .page-home .hero-live__stage {
        min-height: 218px;
    }

    .page-home .hero-live__gorilla {
        width: min(58%, 170px);
    }

    .page-home .hero-live__bubble {
        font-size: 0.46rem;
    }

    .page-home .hero-live__footer span {
        font-size: 0.55rem;
    }
}

/* Home hero v10: a single compact welcome banner on phones */
@media (max-width: 820px) {
    .page-home header {
        padding: calc(var(--mobile-nav-height) + env(safe-area-inset-top) + 12px) 14px 30px !important;
    }

    .page-home .hero-kicker,
    .page-home .logo-container {
        display: none !important;
    }

    .page-home .hero-intro {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        border-radius: 17px;
        background: #292929;
        box-shadow: 7px 7px 0 var(--action-orange), 0 18px 46px rgba(0, 0, 0, 0.28);
    }

    .page-home .hero-intro__copy {
        padding: 20px 18px 18px !important;
    }

    .page-home .hero-proof {
        width: max-content;
        max-width: 100%;
        gap: 7px;
        margin-bottom: 13px;
        padding: 4px 9px 4px 5px;
    }

    .page-home .hero-proof__faces img {
        width: 24px;
        height: 24px;
        margin-left: -6px;
    }

    .page-home .hero-proof strong {
        font-size: 0.65rem;
        white-space: nowrap;
    }

    .page-home .hero-intro__eyebrow {
        font-size: 0.43rem;
        line-height: 1.55;
    }

    .page-home .hero-intro h1 {
        margin: 9px 0 11px;
        font-size: clamp(1.03rem, 5vw, 1.25rem) !important;
        line-height: 1.34;
    }

    .page-home .hero-intro h1 span {
        display: inline-block;
        white-space: nowrap;
    }

    .page-home .hero-intro__lead {
        font-size: 0.86rem;
        line-height: 1.48;
    }

    .page-home .hero-offer {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 14px;
        padding: 12px 14px;
        border: 2px solid rgba(251, 234, 140, 0.48);
        border-radius: 12px;
        background: rgba(250, 248, 245, 0.08);
    }

    .page-home .hero-offer__price {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        column-gap: 12px;
        row-gap: 2px;
        min-height: auto;
    }

    .page-home .hero-offer__price strong {
        grid-row: 1 / span 2;
        grid-column: 1;
        font-family: "Press Start 2P", "Montserrat", sans-serif;
        font-size: clamp(1.4rem, 6.2vw, 1.85rem);
        color: var(--banana-yellow);
        letter-spacing: -0.04em;
        word-spacing: -0.3em;
        line-height: 1;
        text-shadow: 2px 2px 0 rgba(92, 58, 33, 0.9);
        white-space: nowrap;
    }

    .page-home .hero-offer__price del {
        grid-row: 1;
        grid-column: 2;
        align-self: end;
        font-size: 0.76rem;
        color: rgba(250, 248, 245, 0.62);
        white-space: nowrap;
    }

    .page-home .hero-offer__price span {
        grid-row: 2;
        grid-column: 2;
        align-self: start;
        font-size: 0.7rem;
        font-weight: 700;
        color: rgba(250, 248, 245, 0.82);
        white-space: nowrap;
    }

    .page-home .hero-offer__details {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
        gap: 8px;
        padding-top: 8px;
        border-top: 1px dashed rgba(251, 234, 140, 0.28);
        width: 100%;
    }

    .page-home .hero-offer__discount {
        display: inline-flex;
        min-height: 28px;
        align-items: center;
        justify-content: center;
        padding: 4px 9px;
        border: 2px solid var(--pure-black);
        border-radius: 999px;
        color: var(--pure-black);
        background: var(--banana-yellow);
        box-shadow: 2px 2px 0 var(--action-orange);
        font-family: "Press Start 2P", cursive;
        font-size: 0.47rem;
        line-height: 1.2;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .page-home .hero-offer__trial {
        color: rgba(250, 248, 245, 0.88);
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.25;
        white-space: normal;
        text-align: right;
        min-width: 0;
    }

    .page-home .hero-intro__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 5px;
        margin-top: 16px;
    }

    .page-home .hero-intro__primary {
        width: 100%;
        min-height: 50px;
        padding: 10px 12px;
        font-size: 0.47rem;
    }

    .page-home .hero-intro__secondary {
        width: max-content;
        min-height: 44px;
        justify-self: center;
        padding: 9px 8px 5px;
        border: 0;
        color: rgba(250, 248, 245, 0.82);
        background: transparent;
        box-shadow: none;
        font-size: 0.44rem;
        text-decoration: underline;
        text-decoration-color: rgba(251, 234, 140, 0.62);
        text-underline-offset: 5px;
    }

    .page-home .hero-intro__secondary:hover {
        color: var(--banana-yellow);
        background: transparent;
    }

    .page-home .hero-intro__tracks {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px 11px;
        margin-top: 11px;
        font-size: 0.64rem;
        line-height: 1.35;
    }

    .page-home .hero-intro__tracks li::before {
        width: 6px;
        height: 6px;
        margin-right: 5px;
    }

    .page-home .hero-live {
        min-height: 290px;
        grid-template-rows: auto 1fr auto;
        padding: 10px 12px 12px !important;
        border: 0;
        border-top: 2px solid rgba(251, 234, 140, 0.35);
        border-radius: 0;
        background-size: 20px 20px, 20px 20px, auto;
    }

    .page-home .hero-live__bar {
        min-height: 34px;
        padding: 6px 10px;
        border-width: 2px;
        font-size: 0.64rem;
    }

    .page-home .hero-live__bar > span:last-child {
        max-width: none;
        font-size: 0.62rem;
        line-height: 1.2;
        text-align: right;
    }

    .page-home .hero-live__status {
        font-size: 0.4rem;
    }

    .page-home .hero-live__status i {
        width: 7px;
        height: 7px;
        border-width: 1px;
        box-shadow: 0 0 0 3px rgba(240, 75, 66, 0.14);
    }

    .page-home .hero-live__stage {
        position: relative;
        min-height: 180px;
    }

    .page-home .hero-live__gorilla {
        position: absolute;
        bottom: 2px;
        left: 50%;
        width: min(48%, 150px);
        transform: translateX(-50%);
        filter: drop-shadow(6px 8px 0 rgba(92, 58, 33, 0.24));
    }

    .page-home .hero-live__bubble {
        padding: 7px 9px;
        border-width: 2px;
        font-size: 0.48rem;
        box-shadow: 3px 3px 0 var(--action-orange);
    }

    .page-home .hero-live__bubble--hello {
        top: 20px;
        left: 4px;
        transform: rotate(-4deg);
    }

    .page-home .hero-live__bubble--reply {
        top: 52px;
        right: 4px;
        transform: rotate(4deg);
    }

    .page-home .hero-live__score {
        right: 4px;
        bottom: 6px;
        gap: 6px;
        padding: 6px 8px;
        border-width: 2px;
        font-size: 0.6rem;
        box-shadow: 3px 3px 0 var(--action-orange);
    }

    .page-home .hero-live__score strong {
        font-size: 0.46rem;
    }

    .page-home .hero-live__footer {
        display: flex !important;
        justify-content: center;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 6px;
    }

    .page-home .hero-live__footer span {
        padding: 5px 9px;
        border: 2px solid var(--pure-black);
        border-radius: 999px;
        background: rgba(250, 248, 245, 0.96);
        box-shadow: 2px 2px 0 var(--pure-black);
        font-size: 0.6rem;
        font-weight: 800;
        color: var(--pure-black);
        white-space: nowrap;
    }
}

@media (max-width: 360px) {
    .page-home .hero-intro__copy {
        padding-inline: 14px !important;
    }

    .page-home .hero-offer__price strong {
        font-size: 1.3rem;
    }

    .page-home .hero-offer__details {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .page-home .hero-offer__trial {
        text-align: left;
    }

    .page-home .hero-proof strong {
        font-size: 0.58rem;
    }

    .page-home .hero-intro__tracks {
        font-size: 0.59rem;
    }
}