@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    :root {
        --mobile-page-gutter: clamp(0.42rem, 2.8vw, 0.82rem);
        --mobile-surface-pad: clamp(0.78rem, 3.5vw, 1rem);
        --mobile-stack-gap: clamp(0.72rem, 2.8vw, 0.95rem);
        --mobile-touch-target: 44px;
        --mobile-shell-header: clamp(4rem, 10.5vw, 4.2rem);
        --mobile-shell-footer: clamp(4.45rem, 12.8vw, 4.8rem);
        --mobile-body-size: 0.95rem;
        --mobile-page-title-size: 1.72rem;
        --mobile-section-title-size: 1.24rem;
        --mobile-brand-name-size: 1.14rem;
        --mobile-brand-logo-size: 2.04rem;
        --mobile-brand-logo-font-size: 1.02rem;
        --mobile-nav-label-size: 0.66rem;
        --mobile-input-pad-y: 0.78rem;
        --mobile-input-pad-x: 0.82rem;
        --mobile-input-font-size: 16px;
        --mobile-btn-pad-y: 0.72rem;
        --mobile-btn-pad-x: 0.95rem;
        --mobile-card-radius: 1.02rem;
        --mobile-header-gap: 0.66rem;
        --mobile-notification-toggle-size: 2.45rem;
        --mobile-nav-inline-pad: 0.4rem;
        --mobile-nav-grid-gap: 0.24rem;
        --footer-branding-height: clamp(14rem, 58vw, 18rem);
        --app-layout-width: 100vw;
        --app-layout-height: 100svh;
        --app-viewport-offset-top: 0px;
        --app-viewport-offset-left: 0px;
        --app-viewport-right-gap: 0px;
        --app-viewport-bottom-gap: 0px;
        --app-viewport-scale: 1;
        --app-viewport-scale-inverse: 1;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        padding-bottom: 0;
        font-size: var(--mobile-body-size);
        overscroll-behavior-y: none;
        max-width: 100%;
        overflow-x: hidden;
        -webkit-tap-highlight-color: transparent;
    }

    main {
        padding-bottom: clamp(0.78rem, 2.8vw, 1rem);
    }

    .footer {
        margin-bottom: 0;
        min-height: var(--footer-branding-height);
    }

    .footer::before {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.5)),
            url("../assets/images/footer-cricket-celebration.png") center center / 100% 100% no-repeat;
        opacity: 0.76;
    }

    .footer-inner {
        min-height: var(--footer-branding-height);
        padding-bottom: 1rem;
    }

    body.has-mobile-nav {
        padding-bottom: 0;
    }

    body.has-mobile-nav main {
        height: calc(var(--app-height, 100svh) - var(--mobile-shell-header) - var(--mobile-shell-footer));
        padding-top: clamp(0.55rem, 2.4vw, 0.78rem);
        padding-bottom: clamp(0.78rem, 2.8vw, 1rem);
        scroll-padding-top: 0.65rem;
        scroll-padding-bottom: calc(var(--mobile-shell-footer) + 0.7rem);
        scrollbar-width: thin;
    }

    body.has-mobile-nav .footer {
        margin-bottom: 0;
    }

    body.has-mobile-nav .mobile-inline-footer {
        width: 100%;
        margin-bottom: 0;
        scroll-margin-bottom: calc(var(--mobile-shell-footer) + 0.55rem);
        min-height: var(--footer-branding-height);
        background-color: #f6fbff;
    }

    .container {
        width: min(var(--container), calc(100% - (var(--mobile-page-gutter) * 2)));
    }

    .section {
        margin-top: var(--mobile-stack-gap);
    }

    .surface,
    .card {
        padding: var(--mobile-surface-pad);
        border-radius: var(--mobile-card-radius);
    }

    .card-title-row {
        gap: 0.6rem;
    }

    .page-title {
        font-size: var(--mobile-page-title-size);
    }

    .section-title {
        font-size: var(--mobile-section-title-size);
    }

    .small,
    .section-subtitle,
    .notice,
    .footer-subtagline {
        line-height: 1.45;
    }

    input,
    textarea,
    select,
    .btn,
    .mobile-nav-link,
    .notification-toggle,
    .header-utility-btn {
        min-height: var(--mobile-touch-target);
    }

    input,
    textarea,
    select {
        padding: var(--mobile-input-pad-y) var(--mobile-input-pad-x);
        font-size: var(--mobile-input-font-size);
        line-height: 1.35;
    }

    .btn {
        padding: var(--mobile-btn-pad-y) var(--mobile-btn-pad-x);
        line-height: 1.15;
        touch-action: manipulation;
    }

    .mobile-nav-link {
        touch-action: manipulation;
        font-size: var(--mobile-nav-label-size);
    }

    .btn:active,
    .mobile-nav-link:active {
        transform: scale(0.985);
    }

    .brand-logo {
        width: var(--mobile-brand-logo-size);
        height: var(--mobile-brand-logo-size);
        font-size: var(--mobile-brand-logo-font-size);
    }

    .brand-name {
        font-size: var(--mobile-brand-name-size);
    }

    .header-inner {
        gap: var(--mobile-header-gap);
    }

    .notification-toggle {
        width: var(--mobile-notification-toggle-size);
        height: var(--mobile-notification-toggle-size);
    }

    .notification-panel {
        width: min(380px, calc(var(--app-width, 100vw) - 1rem));
    }

    body.has-mobile-nav .site-header {
        left: var(--app-viewport-offset-left, 0px);
        right: auto;
        width: var(--app-layout-width, 100vw);
        top: var(--app-viewport-offset-top, 0px);
        transform: scale(var(--app-viewport-scale-inverse, 1));
        transform-origin: top left;
        will-change: transform;
    }

    body.has-mobile-nav .mobile-bottom-nav {
        left: var(--app-viewport-offset-left, 0px);
        right: auto;
        width: var(--app-layout-width, 100vw);
        bottom: var(--app-viewport-bottom-gap, 0px);
        transform: scale(var(--app-viewport-scale-inverse, 1));
        transform-origin: bottom left;
        will-change: transform;
    }

    body.has-mobile-nav .player-modal-overlay {
        inset: auto;
        top: calc(var(--app-viewport-offset-top, 0px) + var(--mobile-shell-header));
        left: var(--app-viewport-offset-left, 0px);
        width: var(--app-layout-width, 100vw);
        height: calc(var(--app-layout-height, 100svh) - var(--app-viewport-offset-top, 0px) - var(--app-viewport-bottom-gap, 0px) - var(--mobile-shell-header) - var(--mobile-shell-footer));
        box-sizing: border-box;
        padding: 0.45rem var(--mobile-page-gutter) 0.5rem;
        place-items: stretch center;
        align-content: stretch;
        background: rgba(16, 32, 58, 0.24);
    }

    body.has-mobile-nav .player-modal {
        width: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 1rem;
    }

    body.has-mobile-nav .player-modal-overlay.player-modal-overlay-centered {
        inset: auto;
        top: var(--app-viewport-offset-top, 0px);
        left: var(--app-viewport-offset-left, 0px);
        width: var(--app-layout-width, 100vw);
        height: calc(var(--app-layout-height, 100svh) - var(--app-viewport-offset-top, 0px) - var(--app-viewport-bottom-gap, 0px));
        padding: 0.85rem;
        box-sizing: border-box;
        place-items: center;
        align-content: center;
        background: rgba(16, 32, 58, 0.28);
    }

    body.has-mobile-nav .player-modal-overlay.player-modal-overlay-centered .player-modal {
        width: min(100%, 42rem);
        max-height: min(82vh, 44rem);
        margin: 0 auto;
        border-radius: 1rem;
    }

    .mobile-bottom-nav {
        padding-inline: var(--mobile-nav-inline-pad);
    }

    .mobile-nav-grid {
        gap: var(--mobile-nav-grid-gap);
    }

    .mobile-nav-link .nav-label {
        letter-spacing: -0.01em;
    }

    .mobile-nav-link .nav-icon svg {
        width: clamp(1rem, 4vw, 1.14rem);
        height: clamp(1rem, 4vw, 1.14rem);
    }

    .app-confirm-overlay,
    .app-picker-overlay {
        padding-inline: 0.55rem;
    }

    .app-confirm-modal {
        width: min(100%, 25rem);
        padding: 0.9rem;
        gap: 0.75rem;
        border-radius: 1.15rem;
    }

    .app-confirm-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .app-confirm-actions .btn {
        min-width: 0;
    }

    body.has-mobile-nav .app-confirm-overlay {
        inset: auto;
        top: var(--app-viewport-offset-top, 0px);
        left: var(--app-viewport-offset-left, 0px);
        width: var(--app-layout-width, 100vw);
        height: calc(var(--app-layout-height, 100svh) - var(--app-viewport-offset-top, 0px) - var(--app-viewport-bottom-gap, 0px));
        padding: 1rem;
        box-sizing: border-box;
        place-items: center;
        align-content: center;
    }

    body.has-mobile-nav .app-confirm-overlay .app-confirm-modal {
        width: min(17.5rem, calc(100vw - 2rem));
        max-width: calc(100vw - 2rem);
        max-height: min(78vh, 24rem);
        margin: 0 auto;
        padding: 0.95rem;
        border-radius: 1rem;
    }

    .app-picker-overlay {
        padding: 0.8rem;
    }

    body.has-mobile-nav .app-picker-overlay {
        inset: auto;
        top: var(--app-viewport-offset-top, 0px);
        left: var(--app-viewport-offset-left, 0px);
        width: var(--app-layout-width, 100vw);
        height: calc(var(--app-layout-height, 100svh) - var(--app-viewport-offset-top, 0px) - var(--app-viewport-bottom-gap, 0px));
        padding: 0.8rem;
        box-sizing: border-box;
        place-items: center;
        align-content: center;
    }

    body.has-mobile-nav .app-picker-sheet {
        width: min(20rem, calc(100vw - 1rem));
        max-height: min(52vh, 22rem);
        padding: 0.62rem;
        gap: 0.42rem;
        margin: 0 auto;
        border-radius: 1rem;
    }

    .app-picker-option {
        padding: 0.68rem 0.72rem;
        font-size: 0.88rem;
    }

    .player-modal > .card-title-row {
        top: -0.82rem;
        margin: -0.82rem -0.82rem 0;
        padding: 0.78rem 0.82rem 0.72rem;
    }

    .modal-form-actions {
        gap: 0.42rem;
    }

    .modal-form-actions .btn {
        min-width: 0;
        flex: 1 1 0;
        justify-content: center;
    }

    body.has-mobile-nav #update-profile-modal.player-modal-overlay {
        --update-profile-footer-reserve: max(0px, calc(var(--mobile-shell-footer) - var(--app-viewport-bottom-gap, 0px)));
        top: calc(var(--app-viewport-offset-top, 0px) + var(--mobile-shell-header));
        height: calc(var(--app-height, 100svh) - var(--mobile-shell-header) - var(--update-profile-footer-reserve));
        padding: 0.35rem var(--mobile-page-gutter);
        place-items: stretch center;
        align-content: stretch;
    }

    body.has-mobile-nav #update-profile-modal.player-modal-overlay:focus-within {
        --update-profile-footer-reserve: 0px;
    }

    body.has-mobile-nav #update-profile-modal .player-modal {
        width: min(100%, 32rem);
        max-height: 100%;
        margin: 0 auto;
        overflow: hidden;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
    }

    body.has-mobile-nav #update-profile-modal #profile-form {
        min-height: 0;
        overflow-y: auto;
        scroll-padding-bottom: 0.75rem;
        padding-bottom: max(0.35rem, env(safe-area-inset-bottom));
    }

    body.has-mobile-nav #update-profile-modal #profile-form .field {
        scroll-margin-bottom: 0.75rem;
    }

    body.has-mobile-nav #update-profile-modal .profile-form-actions {
        position: static;
        z-index: auto;
        border-top: 0;
        background: transparent;
        padding-top: 0.18rem;
        margin-top: 0.08rem;
    }

    .footer-tagline {
        font-size: clamp(1.04rem, 4.5vw, 1.2rem);
    }

    .footer-subtagline {
        font-size: clamp(0.9rem, 4vw, 1.05rem);
    }

    body.has-mobile-nav main > .container > * {
        animation: mobile-app-rise 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    body.has-mobile-nav main > .container > *:nth-child(1) {
        animation-delay: 0.02s;
    }

    body.has-mobile-nav main > .container > *:nth-child(2) {
        animation-delay: 0.05s;
    }

    body.has-mobile-nav main > .container > *:nth-child(3) {
        animation-delay: 0.08s;
    }

    body.has-mobile-nav main > .container > *:nth-child(4) {
        animation-delay: 0.11s;
    }

    body.has-mobile-nav main > .container > *:nth-child(5) {
        animation-delay: 0.14s;
    }

    body.has-mobile-nav main > .container > *:nth-child(6) {
        animation-delay: 0.17s;
    }

    .home-welcome-row {
        flex-direction: column;
        align-items: stretch;
    }

    .home-cta-stack {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-items: stretch;
    }

    .home-cta-stack .btn {
        width: 100%;
        min-width: 0;
    }

    .home-spotlight-stat,
    .home-check-item {
        min-height: 2.35rem;
    }

    .site-nav .nav-btn {
        width: 100%;
    }

    .team-roster-mobile-list,
    .match-squad-mobile-list {
        display: grid;
        gap: 0.45rem;
    }

    .mobile-player-card {
        border: 1px solid var(--border);
        border-radius: 0.72rem;
        background: color-mix(in srgb, var(--white) 95%, transparent);
        box-shadow: 0 6px 18px rgba(17, 37, 63, 0.06);
        padding: 0.48rem 0.56rem;
        display: grid;
        gap: 0.34rem;
    }

    .mobile-player-card-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.42rem;
    }

    .mobile-player-name {
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: left;
        font-size: 0.88rem;
        font-weight: 800;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-player-name.player-name-link,
    .mobile-player-name.player-name-btn {
        display: block;
    }

    .mobile-player-role-chip {
        min-width: 2.85rem;
        padding: 0.14rem 0.38rem;
        justify-content: center;
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.08em;
    }

    .mobile-player-badges {
        display: inline-flex;
        align-items: center;
        gap: 0.22rem;
    }

    .mobile-player-badges .captain-chip {
        min-width: 1.5rem;
        padding: 0.14rem 0.36rem;
        justify-content: center;
        font-size: 0.62rem;
    }

    .mobile-player-card-actions {
        display: grid;
        gap: 0.26rem;
    }

    .mobile-player-card-actions .mobile-roster-action-group,
    .mobile-player-card-actions .roster-action-group,
    .mobile-player-card-actions .captain-contact-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.26rem;
        width: 100%;
    }

    .mobile-player-card-actions .btn,
    .mobile-player-card-actions .captain-chip,
    .mobile-player-card-actions .captain-action-btn {
        width: 100%;
        min-width: 0;
        justify-content: center;
        min-height: 1.82rem;
        padding: 0.2rem 0.3rem;
        font-size: 0.62rem;
    }

    .mobile-table-card-wrap {
        border: 0;
        overflow: visible;
        background: transparent;
    }

    .team-roster-table,
    .match-squad-table {
        min-width: 0;
        width: 100%;
        table-layout: auto;
    }

    .team-roster-table thead,
    .match-squad-table thead {
        display: none;
    }

    .team-roster-table,
    .team-roster-table tbody,
    .team-roster-table tr,
    .team-roster-table td,
    .match-squad-table,
    .match-squad-table tbody,
    .match-squad-table tr,
    .match-squad-table td {
        display: block;
        width: 100%;
    }

    .team-roster-table tbody,
    .match-squad-table tbody {
        display: grid;
        gap: 0.75rem;
    }

    .team-roster-table tr,
    .match-squad-table tr {
        border: 1px solid var(--border);
        border-radius: 0.95rem;
        background: color-mix(in srgb, var(--white) 94%, transparent);
        box-shadow: 0 6px 18px rgba(17, 37, 63, 0.06);
        padding: 0.78rem;
    }

    .team-roster-table td,
    .match-squad-table td {
        border: 0;
        width: auto !important;
        max-width: none;
        padding: 0;
        margin-top: 0.5rem;
        white-space: normal;
        overflow: visible;
        text-overflow: initial;
    }

    .team-roster-table th,
    .match-squad-table th {
        width: auto !important;
    }

    .team-roster-table td:first-child,
    .match-squad-table td:first-child {
        margin-top: 0;
    }

    .team-roster-table td::before,
    .match-squad-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.14rem;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-500);
    }

    .team-roster-table td[data-label="Player"] .player-name-btn,
    .match-squad-table td[data-label="Player"] .player-name-link {
        max-width: none;
        white-space: normal;
    }

    .team-roster-table td[data-label="Action"]::before {
        margin-bottom: 0.3rem;
    }

    .team-roster-table td[data-label="Action"] .roster-action-group {
        display: grid;
        gap: 0.35rem;
    }

    .team-roster-table td[data-label="Action"] .roster-action-btn,
    .team-roster-table td[data-label="Action"] .captain-chip {
        width: 100%;
        justify-content: center;
    }

    .team-roster-table td[data-label="Action"] .small.muted {
        display: block;
    }

    .captain-note-actions {
        align-items: stretch;
    }

    .captain-note-actions p,
    .captain-note-actions .btn,
    .captain-contact-actions .captain-action-btn {
        width: 100%;
    }

    .request-actions .btn {
        width: 100%;
    }

    .team-ready-helper {
        padding: 0.62rem 0.72rem;
        border-radius: 0.8rem;
        border: 1px solid var(--border);
        background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
    }

    .team-ready-helper strong {
        display: block;
        margin-bottom: 0.18rem;
        font-size: 0.78rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .team-ready-helper p {
        margin: 0;
        font-size: 0.82rem;
        line-height: 1.35;
    }

    .team-ready-helper-warning {
        border-color: color-mix(in srgb, var(--gold-500) 55%, var(--border));
        background: color-mix(in srgb, var(--gold-500) 15%, transparent);
    }

    .team-ready-helper-ok {
        border-color: color-mix(in srgb, var(--green-500) 45%, var(--border));
        background: color-mix(in srgb, var(--green-500) 14%, transparent);
    }

    .team-ready-helper-top {
        margin-top: 0.2rem;
    }

    .team-create-helper {
        margin: 0 0 0.2rem;
        font-size: 0.78rem;
        color: var(--ink-500);
    }
}

/* Touch-first tuning for Android and iOS browsers */
@media (max-width: 767px) and (pointer: coarse) {
    :root {
        --mobile-touch-target: 46px;
    }
}

/* Phone profile matrix for common CSS viewport widths:
   320/340/360/375/390/412/430/480+ */
@media (max-width: 339px) {
    :root {
        --mobile-page-gutter: 0.38rem;
        --mobile-surface-pad: 0.74rem;
        --mobile-shell-header: 3.95rem;
        --mobile-shell-footer: 4.38rem;
        --mobile-body-size: 0.91rem;
        --mobile-page-title-size: 1.46rem;
        --mobile-section-title-size: 1.06rem;
        --mobile-brand-name-size: 0.98rem;
        --mobile-brand-logo-size: 1.84rem;
        --mobile-brand-logo-font-size: 0.9rem;
        --mobile-nav-label-size: 0.55rem;
        --mobile-input-pad-y: 0.7rem;
        --mobile-input-pad-x: 0.72rem;
        --mobile-btn-pad-y: 0.66rem;
        --mobile-btn-pad-x: 0.74rem;
        --mobile-card-radius: 0.92rem;
        --mobile-header-gap: 0.52rem;
        --mobile-notification-toggle-size: 2.24rem;
        --mobile-nav-inline-pad: 0.18rem;
        --mobile-nav-grid-gap: 0.14rem;
    }

    .home-cta-stack,
    .home-pulse-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 340px) and (max-width: 359px) {
    :root {
        --mobile-page-gutter: 0.42rem;
        --mobile-surface-pad: 0.76rem;
        --mobile-shell-header: 4rem;
        --mobile-shell-footer: 4.46rem;
        --mobile-body-size: 0.92rem;
        --mobile-page-title-size: 1.52rem;
        --mobile-section-title-size: 1.11rem;
        --mobile-brand-name-size: 1rem;
        --mobile-brand-logo-size: 1.9rem;
        --mobile-brand-logo-font-size: 0.93rem;
        --mobile-nav-label-size: 0.58rem;
        --mobile-input-pad-y: 0.72rem;
        --mobile-input-pad-x: 0.74rem;
        --mobile-btn-pad-y: 0.67rem;
        --mobile-btn-pad-x: 0.78rem;
        --mobile-card-radius: 0.94rem;
        --mobile-header-gap: 0.54rem;
        --mobile-notification-toggle-size: 2.26rem;
        --mobile-nav-inline-pad: 0.2rem;
        --mobile-nav-grid-gap: 0.16rem;
    }
}

@media (min-width: 360px) and (max-width: 374px) {
    :root {
        --mobile-page-gutter: 0.46rem;
        --mobile-surface-pad: 0.8rem;
        --mobile-shell-header: 4rem;
        --mobile-shell-footer: 4.5rem;
        --mobile-body-size: 0.93rem;
        --mobile-page-title-size: 1.56rem;
        --mobile-section-title-size: 1.14rem;
        --mobile-brand-name-size: 1.04rem;
        --mobile-brand-logo-size: 1.96rem;
        --mobile-brand-logo-font-size: 0.96rem;
        --mobile-nav-label-size: 0.6rem;
        --mobile-input-pad-y: 0.74rem;
        --mobile-input-pad-x: 0.76rem;
        --mobile-btn-pad-y: 0.68rem;
        --mobile-btn-pad-x: 0.82rem;
        --mobile-card-radius: 0.96rem;
        --mobile-header-gap: 0.57rem;
        --mobile-notification-toggle-size: 2.32rem;
        --mobile-nav-inline-pad: 0.24rem;
        --mobile-nav-grid-gap: 0.18rem;
    }
}

@media (min-width: 375px) and (max-width: 389px) {
    :root {
        --mobile-page-gutter: 0.52rem;
        --mobile-surface-pad: 0.84rem;
        --mobile-shell-header: 4.03rem;
        --mobile-shell-footer: 4.54rem;
        --mobile-body-size: 0.94rem;
        --mobile-page-title-size: 1.62rem;
        --mobile-section-title-size: 1.18rem;
        --mobile-brand-name-size: 1.08rem;
        --mobile-brand-logo-size: 2rem;
        --mobile-brand-logo-font-size: 0.99rem;
        --mobile-nav-label-size: 0.62rem;
        --mobile-input-pad-y: 0.76rem;
        --mobile-input-pad-x: 0.78rem;
        --mobile-btn-pad-y: 0.7rem;
        --mobile-btn-pad-x: 0.86rem;
        --mobile-card-radius: 0.98rem;
        --mobile-header-gap: 0.6rem;
        --mobile-notification-toggle-size: 2.38rem;
        --mobile-nav-inline-pad: 0.28rem;
        --mobile-nav-grid-gap: 0.2rem;
    }
}

@media (min-width: 390px) and (max-width: 411px) {
    :root {
        --mobile-page-gutter: 0.58rem;
        --mobile-surface-pad: 0.88rem;
        --mobile-shell-header: 4.06rem;
        --mobile-shell-footer: 4.58rem;
        --mobile-body-size: 0.95rem;
        --mobile-page-title-size: 1.68rem;
        --mobile-section-title-size: 1.22rem;
        --mobile-brand-name-size: 1.12rem;
        --mobile-brand-logo-size: 2.04rem;
        --mobile-brand-logo-font-size: 1.01rem;
        --mobile-nav-label-size: 0.64rem;
        --mobile-input-pad-y: 0.77rem;
        --mobile-input-pad-x: 0.8rem;
        --mobile-btn-pad-y: 0.71rem;
        --mobile-btn-pad-x: 0.91rem;
        --mobile-card-radius: 1rem;
        --mobile-header-gap: 0.62rem;
        --mobile-notification-toggle-size: 2.42rem;
        --mobile-nav-inline-pad: 0.32rem;
        --mobile-nav-grid-gap: 0.22rem;
    }
}

@media (min-width: 412px) and (max-width: 429px) {
    :root {
        --mobile-page-gutter: 0.62rem;
        --mobile-surface-pad: 0.94rem;
        --mobile-shell-header: 4.1rem;
        --mobile-shell-footer: 4.62rem;
        --mobile-body-size: 0.96rem;
        --mobile-page-title-size: 1.74rem;
        --mobile-section-title-size: 1.26rem;
        --mobile-brand-name-size: 1.16rem;
        --mobile-brand-logo-size: 2.08rem;
        --mobile-brand-logo-font-size: 1.04rem;
        --mobile-nav-label-size: 0.66rem;
        --mobile-input-pad-y: 0.78rem;
        --mobile-input-pad-x: 0.82rem;
        --mobile-btn-pad-y: 0.72rem;
        --mobile-btn-pad-x: 0.95rem;
        --mobile-card-radius: 1.03rem;
        --mobile-header-gap: 0.66rem;
        --mobile-notification-toggle-size: 2.48rem;
        --mobile-nav-inline-pad: 0.36rem;
        --mobile-nav-grid-gap: 0.24rem;
    }
}

@media (min-width: 430px) and (max-width: 479px) {
    :root {
        --mobile-page-gutter: 0.72rem;
        --mobile-surface-pad: 1rem;
        --mobile-shell-header: 4.16rem;
        --mobile-shell-footer: 4.8rem;
        --mobile-body-size: 0.98rem;
        --mobile-page-title-size: 1.82rem;
        --mobile-section-title-size: 1.34rem;
        --mobile-brand-name-size: 1.2rem;
        --mobile-brand-logo-size: 2.12rem;
        --mobile-brand-logo-font-size: 1.08rem;
        --mobile-nav-label-size: 0.68rem;
        --mobile-input-pad-y: 0.8rem;
        --mobile-input-pad-x: 0.86rem;
        --mobile-btn-pad-y: 0.74rem;
        --mobile-btn-pad-x: 1rem;
        --mobile-card-radius: 1.08rem;
        --mobile-header-gap: 0.72rem;
        --mobile-notification-toggle-size: 2.52rem;
        --mobile-nav-inline-pad: 0.42rem;
        --mobile-nav-grid-gap: 0.28rem;
    }

    .home-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-action-card:last-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    :root {
        --mobile-page-gutter: 0.84rem;
        --mobile-surface-pad: 1.04rem;
        --mobile-shell-header: 4.2rem;
        --mobile-shell-footer: 4.84rem;
        --mobile-body-size: 1rem;
        --mobile-page-title-size: 1.92rem;
        --mobile-section-title-size: 1.4rem;
        --mobile-brand-name-size: 1.24rem;
        --mobile-brand-logo-size: 2.16rem;
        --mobile-brand-logo-font-size: 1.1rem;
        --mobile-nav-label-size: 0.7rem;
        --mobile-input-pad-y: 0.82rem;
        --mobile-input-pad-x: 0.9rem;
        --mobile-btn-pad-y: 0.76rem;
        --mobile-btn-pad-x: 1.04rem;
        --mobile-card-radius: 1.12rem;
        --mobile-header-gap: 0.75rem;
        --mobile-notification-toggle-size: 2.56rem;
        --mobile-nav-inline-pad: 0.48rem;
        --mobile-nav-grid-gap: 0.3rem;
    }

    .home-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) and (max-height: 780px) {
    :root {
        --mobile-shell-header: 4rem;
        --mobile-shell-footer: 4.42rem;
    }

    .app-picker-sheet {
        max-height: min(48vh, 19rem);
    }
}

@media (orientation: landscape) and (max-width: 932px) {
    :root {
        --mobile-shell-header: 3.82rem;
        --mobile-shell-footer: 4.12rem;
        --mobile-nav-label-size: clamp(0.56rem, 1.5vw, 0.68rem);
    }

    body.has-mobile-nav main {
        padding-top: 0.45rem;
    }

    .consent-banner {
        bottom: calc(var(--mobile-shell-footer) + 0.4rem);
    }
}

/* Registration is a normal mobile page: compact form, real scroll, branding below. */
@media (max-width: 767px) {
    body.page-register {
        min-height: 100svh;
        min-height: 100dvh;
        height: auto;
        display: block;
        overflow-y: visible;
        overscroll-behavior-y: auto;
        touch-action: pan-y;
    }

    .page-register .site-header,
    .page-register .footer {
        display: block !important;
        position: static;
    }

    .page-register .header-inner {
        min-height: auto;
        padding-block: 0.52rem;
    }

    .page-register .auth-main {
        display: block;
        min-height: auto;
        padding: 0.52rem 0 0.58rem;
    }

    .page-register .auth-main > .container {
        width: min(430px, calc(100% - 0.72rem));
    }

    .page-register .auth-shell {
        display: block;
        width: 100%;
        min-height: auto;
        border-radius: 0.72rem;
        overflow: visible;
    }

    .page-register .auth-hero,
    .page-register .section-subtitle,
    .page-register .auth-location-note,
    .page-register .consent-banner {
        display: none !important;
    }

    body.page-support {
        min-height: 100svh;
        min-height: 100dvh;
        height: auto;
        display: flex;
        overflow-y: auto;
        overscroll-behavior-y: auto;
        touch-action: pan-y;
    }

    .page-support .site-header,
    .page-support .footer {
        display: block !important;
        position: static;
    }

    .page-support main {
        display: block;
        min-height: auto;
        padding: 0.7rem 0 1rem;
        overflow: visible;
    }

    .page-support .support-grid,
    .page-support .support-card,
    .page-support .support-form {
        min-height: 0;
    }

    .page-support .support-action-row .btn,
    .page-support #support-feedback-btn {
        width: 100%;
    }

    .page-register .auth-form-wrap {
        padding: 0.62rem;
        gap: 0.42rem;
    }

    .page-register .section-title {
        font-size: 1.14rem;
        line-height: 1.16;
    }

    .page-register #register-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0.48rem;
        row-gap: 0.42rem;
    }

    .page-register #register-form > .field:first-child,
    .page-register #register-form > .field:nth-child(6),
    .page-register #register-form .field-password,
    .page-register #register-form .auth-optional-card,
    .page-register #register-form .field-submit {
        grid-column: 1 / -1;
    }

    .page-register #register-form label {
        font-size: 0.62rem;
        line-height: 1.18;
        letter-spacing: 0.08em;
    }

    .page-register #register-form input,
    .page-register #register-form select {
        min-height: 2.38rem;
        padding: 0.42rem 0.5rem;
        font-size: 16px;
        line-height: 1.2;
        border-radius: 0.55rem;
    }

    .page-register .password-input-wrap input {
        padding-right: 4.4rem;
    }

    .page-register .password-toggle {
        right: 0.36rem;
        padding: 0.2rem 0.5rem;
        min-width: 3.1rem;
        font-size: 0.68rem;
    }

    .page-register .password-guidance {
        display: grid;
        gap: 0.24rem;
        padding: 0.42rem 0.48rem;
        border-radius: 0.58rem;
    }

    .page-register .password-guidance-label {
        font-size: 0.66rem;
    }

    .page-register .password-checklist {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0.36rem;
        row-gap: 0.22rem;
    }

    .page-register .password-rule {
        gap: 0.28rem;
        font-size: 0.68rem;
        line-height: 1.2;
    }

    .page-register .password-rule::before {
        width: 0.58rem;
        height: 0.58rem;
        border-width: 1px;
    }

    .page-register .auth-optional-card {
        padding: 0 0.5rem 0.5rem;
        border-radius: 0.58rem;
    }

    .page-register .auth-optional-card summary {
        padding: 0.5rem 0 0.42rem;
        font-size: 0.68rem;
    }

    .page-register .auth-optional-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.42rem;
    }

    .page-register .auth-optional-grid .field:last-child {
        grid-column: 1 / -1;
    }

    .page-register #register-form .btn,
    .page-register .auth-links .btn,
    .page-register .auth-links .btn-link {
        width: 100%;
        min-height: 2.42rem;
        justify-content: center;
        text-align: center;
    }

    .page-register .auth-links {
        display: grid;
        gap: 0.34rem;
    }

    .page-register .footer {
        margin-top: 0;
    }

    .page-register .footer-inner {
        padding-top: 0.48rem;
        padding-bottom: 0.58rem;
    }
}

@media (max-width: 339px) {
    .page-register #register-form {
        grid-template-columns: 1fr;
    }

    .page-register #register-form > .field:first-child,
    .page-register #register-form > .field:nth-child(6),
    .page-register #register-form .field-password,
    .page-register #register-form .auth-optional-card,
    .page-register #register-form .field-submit {
        grid-column: auto;
    }

    .page-register .auth-optional-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    body.has-mobile-nav main > .container > * {
        animation: none !important;
    }

    .btn,
    .mobile-nav-link,
    .surface,
    .card,
    .notification-card {
        transition: none !important;
    }
}

@keyframes mobile-app-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}