/* SMAIS Entry - mobile-first premium refinement v18
   Mobile only. Desktop layout remains unchanged. */

@media (max-width: 720px) {
  :root {
    --mobile-pad: 18px;
    --mobile-radius: 20px;
    --mobile-header: 64px;
  }

  html {
    scroll-padding-top: calc(var(--mobile-header) + 12px);
    -webkit-text-size-adjust: 100%;
  }

  body {
    background:
      radial-gradient(circle at 88% -8%, rgba(216,184,95,.09), transparent 31%),
      linear-gradient(180deg, #07101a 0%, #050a10 100%);
  }

  body:before { display: none; }

  .site-header {
    height: var(--mobile-header);
    padding: 0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right));
    background: rgba(5,10,16,.84);
    border-bottom-color: rgba(255,255,255,.065);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
  }

  .brand { gap: 0; }
  .brand img { height: 25px; }
  .brand span,
  .top-nav > a:first-child { display: none; }
  .top-nav { gap: 0; }
  .top-nav a {
    min-height: 38px;
    padding: 0 13px;
    font-size: .76rem;
  }
  .top-nav .nav-mypage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    min-height: 38px;
    padding: 0 13px;
    line-height: 1;
    background: rgba(255,255,255,.055);
    border-color: rgba(255,255,255,.12);
    color: #f6f1e5;
  }

  .content-shell { width: calc(100% - 32px); }
  .eyebrow,
  .section-label,
  .card-kicker {
    font-size: .64rem;
    letter-spacing: .16em;
  }

  .primary-button,
  .secondary-button,
  .microsoft-button {
    min-height: 56px;
    border-radius: 16px;
    padding: 0 18px;
    font-size: .92rem;
  }

  /* Home */
  .home-page .hero {
    min-height: 100svh;
    align-items: flex-end;
  }
  .home-page .hero-image {
    inset: 0;
    animation: none;
    transform: scale(1.01);
    /* Mobile: anchor the hero artwork to the left edge. */
    background-position: 12% center;
  }
  .home-page .hero-overlay {
    background:
      linear-gradient(180deg, rgba(3,7,12,.20) 0%, rgba(3,7,12,.16) 28%, rgba(3,7,12,.72) 65%, #060b12 100%),
      linear-gradient(90deg, rgba(4,8,13,.36), rgba(4,8,13,.08));
  }
  .home-page .hero-overlay:after {
    background: radial-gradient(circle at 72% 32%, rgba(244,211,130,.15), transparent 25%);
  }
  .home-page .hero-spark { display: none; }
  .home-page .hero-content {
    width: 100%;
    margin: 0;
    padding: calc(var(--mobile-header) + 44px) 20px calc(34px + env(safe-area-inset-bottom));
  }
  .home-page .hero-content .eyebrow { display: none; }
  .home-page .live-status {
    margin: 0 0 17px;
    padding: 7px 11px;
    font-size: .72rem;
    background: rgba(5,10,16,.46);
  }
  .home-page .hero-content h1 {
    max-width: 11em;
    margin: 0 0 12px;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
    font-size: clamp(2.25rem, 10.5vw, 3.25rem);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.045em;
  }
  .home-page .hero-content h1 span {
    color: #fffaf0;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
  .home-page .hero-copy {
    margin: 0;
    color: rgba(255,255,255,.78);
    font-size: .92rem;
    line-height: 1.75;
  }
  .home-page .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 25px;
  }
  .home-page .hero-actions > * {
    width: 100%;
    min-height: 58px;
    padding: 0 18px;
  }
  .home-page .hero-actions .secondary-button {
    min-height: 52px;
    background: rgba(9,15,23,.46);
    border-color: rgba(255,255,255,.16);
  }
  .home-page .status-note {
    margin-top: 13px;
    font-size: .74rem;
    line-height: 1.6;
  }
  .home-page .scroll-cue { display: none; }

  .home-page .opening-section { padding: 58px 0 42px; }
  .home-page .opening-grid { gap: 16px; margin-top: 15px; }
  .home-page .opening-grid > div:first-child { padding: 8px 0 0; }
  .home-page .opening-kicker { margin-bottom: 8px; font-size: .73rem; }
  .home-page .opening-grid h2 {
    font-size: clamp(1.75rem, 8.5vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -.04em;
  }
  .home-page .opening-grid p {
    margin: 13px 0 0;
    font-size: .83rem;
    line-height: 1.75;
  }
  .home-page .countdown-card {
    min-height: 148px;
    padding: 20px;
    border-radius: var(--mobile-radius);
    box-shadow: 0 18px 45px rgba(0,0,0,.22);
  }
  .home-page .countdown-card strong {
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .home-page .journey-section { padding: 44px 0 58px; }
  .home-page .section-heading { margin-bottom: 20px; }
  .home-page .section-heading h2 { font-size: 2rem; }
  .home-page .section-heading > p:last-child {
    margin-top: 9px;
    font-size: .83rem;
    line-height: 1.7;
  }
  .home-page .journey-grid { gap: 10px; }
  .home-page .journey-card {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr);
    gap: 3px 14px;
    min-height: 0;
    padding: 17px;
    border-radius: 18px;
    background: rgba(255,255,255,.028);
    box-shadow: none;
  }
  .home-page .journey-card > span {
    top: 14px;
    right: 15px;
    font-size: .62rem;
  }
  .home-page .journey-icon {
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: .9rem;
  }
  .home-page .journey-card h3 {
    margin: 1px 28px 0 0;
    font-size: .98rem;
    line-height: 1.45;
  }
  .home-page .journey-card p {
    margin: 0;
    font-size: .74rem;
    line-height: 1.6;
  }
  .home-page .info-banner {
    gap: 18px;
    margin-bottom: 54px;
    padding: 20px;
    border-radius: 20px;
    box-shadow: none;
  }
  .home-page .info-banner h2 {
    font-size: 1.15rem;
    line-height: 1.5;
  }
  .home-page .info-banner p {
    font-size: .78rem;
    line-height: 1.65;
  }
  .home-page .info-banner .text-link {
    width: 100%;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.08);
  }

  /* Registration flow */
  .flow-entry-page {
    background: linear-gradient(180deg,#07111c 0%,#050a10 100%) !important;
  }
  /* On the registration flow, keep the header in layout so the progress row can sit
     directly below it without either overlapping the heading or creating a spacer. */
  .flow-entry-page .site-header {
    position: sticky;
    top: 0;
  }
  .flow-entry-page main { overflow: visible; }
  .flow-entry-page .flow-viewport { overflow: visible !important; }
  .flow-entry-page .flow-shell {
    width: 100% !important;
    max-width: none !important;
    padding: 0 0 calc(28px + env(safe-area-inset-bottom)) !important;
  }
  .flow-entry-page .flow-ambient { display: none; }
  .flow-entry-page .flow-topbar {
    position: sticky;
    top: var(--mobile-header);
    z-index: 40;
    grid-template-columns: max-content minmax(0,1fr) max-content;
    gap: 10px;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px 16px 11px !important;
    background: rgba(6,12,19,.91);
    border-bottom: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(20px) saturate(135%);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
  }
  .flow-entry-page .flow-step-copy strong { font-size: .7rem; }
  .flow-entry-page .flow-step-kicker { display: none; }
  .flow-entry-page .flow-progress { gap: 4px; }
  .flow-entry-page .flow-progress span { height: 3px; border-radius: 999px; }
  .flow-entry-page .flow-exit {
    padding: 7px 0 7px 9px;
    font-size: .67rem;
    color: #a8b2bf;
  }
  .flow-entry-page .flow-global-alert {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin: 14px auto 0 !important;
    border-radius: 15px;
  }
  .flow-entry-page .flow-panel {
    width: 100% !important;
    min-width: 100% !important;
    padding: 0 !important;
  }
  .flow-entry-page .flow-topbar + .flow-form .flow-panel.is-current .flow-panel-inner {
    padding-top: 34px !important;
  }
  .flow-entry-page .flow-ms-button.is-disabled,
  .flow-entry-page .flow-ms-button[aria-disabled="true"] {
    opacity: .42;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
  }
  .flow-entry-page .flow-panel-inner {
    width: 100% !important;
    min-height: 0 !important;
    padding: 28px var(--mobile-pad) 26px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .flow-entry-page .flow-panel-inner::before { display: none !important; }
  .flow-entry-page .flow-back {
    min-height: 38px;
    margin: 0 0 24px;
    padding: 0 10px 0 0;
    color: #c0cad5;
    font-size: .78rem;
  }
  .flow-entry-page .flow-heading { margin-bottom: 24px; }
  .flow-entry-page .flow-heading .eyebrow {
    color: #c9ad62;
    font-size: .62rem;
    letter-spacing: .12em;
  }
  .flow-entry-page .flow-heading h1 {
    max-width: 100%;
    margin: 9px 0 11px;
    font-size: clamp(1.9rem, 8.7vw, 2.45rem) !important;
    line-height: 1.16 !important;
    letter-spacing: -.045em;
  }
  .flow-entry-page .flow-heading h1 br { display: none; }
  .flow-entry-page .flow-heading > p:last-child {
    margin: 0;
    color: #95a1b0;
    font-size: .83rem !important;
    line-height: 1.72 !important;
  }

  .flow-entry-page .edition-showcase { gap: 10px; }
  .flow-entry-page .edition-tile {
    min-height: 86px !important;
    gap: 13px;
    padding: 15px !important;
    border-radius: 18px;
    background: rgba(255,255,255,.027);
  }
  .flow-entry-page .edition-icon {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
    border-radius: 14px !important;
  }
  .flow-entry-page .edition-copy b { font-size: .98rem; }
  .flow-entry-page .edition-copy small { font-size: .7rem; }
  .flow-entry-page .edition-status {
    margin-top: 4px;
    font-size: .56rem;
  }
  .flow-entry-page .java-review-notice { display: none !important; }

  .flow-entry-page .platform-stage {
    margin-top: 18px;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .flow-entry-page .platform-stage-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .flow-entry-page .platform-stage-head span { font-size: .66rem; }
  .flow-entry-page .platform-stage-head p { font-size: .69rem; }
  .flow-entry-page .platform-pills {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px;
  }
  .flow-entry-page .platform-pills span {
    min-height: 46px;
    padding: 0 8px !important;
    border-radius: 13px;
    font-size: .72rem;
  }
  .flow-entry-page .flow-ms-button {
    width: 100%;
    min-height: 60px !important;
    margin-top: 20px;
    padding: 0 14px;
    border-radius: 16px;
  }
  .flow-entry-page .flow-ms-button b { font-size: .84rem; }
  .flow-entry-page .flow-ms-button small { font-size: .64rem; }
  .flow-entry-page .flow-footnote {
    margin: 10px 2px 0;
    font-size: .68rem;
    line-height: 1.55;
  }

  .flow-entry-page .connected-hero {
    grid-template-columns: auto minmax(0,1fr) !important;
    gap: 12px;
    padding: 16px !important;
    border-radius: 18px;
  }
  .flow-entry-page .connected-orb {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
  }
  .flow-entry-page .connected-main small { font-size: .57rem; }
  .flow-entry-page .connected-main strong { font-size: 1.28rem !important; }
  .flow-entry-page .connected-whitelist {
    grid-column: 1 / -1;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.07);
    text-align: left !important;
  }

  .flow-entry-page .discord-username-field { width: 100%; }
  .flow-entry-page .discord-username-field input {
    height: 58px !important;
    font-size: 16px !important;
    border-radius: 16px;
  }
  .flow-entry-page .username-hint {
    margin-top: 10px;
    font-size: .68rem;
    line-height: 1.6;
  }

  .flow-entry-page .flow-fields.two-col { grid-template-columns: 1fr !important; gap: 17px; }
  .flow-entry-page .flow-field { gap: 7px; }
  .flow-entry-page .flow-field label { font-size: .78rem; }
  .flow-entry-page .flow-field input,
  .flow-entry-page .flow-field select,
  .flow-entry-page .flow-field textarea {
    min-height: 56px;
    padding: 14px 14px;
    border-radius: 15px;
    font-size: 16px;
    background: rgba(3,9,15,.72);
  }
  .flow-entry-page .flow-field textarea { min-height: 106px; }
  .flow-entry-page .featured-field { grid-column: auto; }

  .flow-entry-page .flow-slot-grid { grid-template-columns: 1fr !important; gap: 9px; }
  .flow-entry-page .flow-slot {
    min-height: 88px;
    padding: 14px;
    border-radius: 17px;
  }
  .flow-entry-page .slot-day {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .flow-entry-page .flow-slot strong { font-size: .98rem; }

  .flow-entry-page .account-credential-card {
    grid-template-columns: 1fr !important;
    gap: 17px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  .flow-entry-page .pin-pair {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 9px;
  }
  .flow-entry-page .pin-pair input {
    text-align: center;
    letter-spacing: .22em;
  }
  .flow-entry-page .account-help { display: none; }

  .flow-entry-page .creator-choice-card {
    grid-template-columns: 48px minmax(0,1fr) auto;
    gap: 12px;
    padding: 15px;
    border-radius: 18px;
  }
  .flow-entry-page .creator-choice-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .flow-entry-page .creator-choice-copy b { font-size: .85rem; }
  .flow-entry-page .creator-choice-copy small { font-size: .67rem; line-height: 1.55; }
  .flow-entry-page .creator-choice-state { align-self: center; }
  .flow-entry-page .creator-choice-note { font-size: .67rem; }
  .flow-entry-page .creator-row { grid-template-columns: 1fr; gap: 8px; }
  .flow-entry-page .creator-notice { padding: 12px; }

  .flow-entry-page .review-card {
    border-radius: 18px;
    overflow: hidden;
  }
  .flow-entry-page .review-card-head { padding: 15px; }
  .flow-entry-page .review-row { padding: 14px 15px; }
  .flow-entry-page .review-icon { width: 38px; height: 38px; border-radius: 12px; }
  .flow-entry-page .review-meta { font-size: .58rem; }
  .flow-entry-page .terms-confirm {
    gap: 12px;
    margin-top: 14px;
    padding: 15px;
    border-radius: 18px;
  }
  .flow-entry-page .terms-confirm-copy b { font-size: .78rem; line-height: 1.5; }
  .flow-entry-page .terms-confirm-copy small { font-size: .66rem; }

  .flow-entry-page .flow-actions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 28px calc(var(--mobile-pad) * -1) -26px !important;
    padding: 12px var(--mobile-pad) calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(5,10,16,0), rgba(5,10,16,.96) 24%, rgba(5,10,16,.99));
  }
  .flow-entry-page .flow-primary,
  .flow-entry-page .flow-submit {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    border-radius: 16px !important;
    font-size: .9rem;
  }
  .flow-entry-page .flow-actions.split-actions {
    flex-direction: column-reverse !important;
    gap: 9px;
    align-items: stretch !important;
  }
  .flow-entry-page .flow-text-action {
    min-height: 42px;
    display: grid;
    place-items: center;
    font-size: .72rem;
  }
  .flow-entry-page .flow-submit {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: 20px;
    box-shadow: 0 0 0 12px rgba(5,10,16,.97);
  }
  .flow-entry-page .final-note { margin-top: 18px; }
  .flow-entry-page .site-footer { display: none; }

  /* Auth / recovery */
  .login-page .auth-stage,
  .recovery-page .auth-stage {
    min-height: 100svh;
    display: block;
    position: relative;
    padding: calc(var(--mobile-header) + 28px) 0 calc(34px + env(safe-area-inset-bottom));
    background: #06101a;
  }
  .login-page .auth-visual,
  .recovery-page .auth-visual {
    position: absolute;
    inset: 0;
    min-height: 100%;
    opacity: .2;
    filter: saturate(.72) brightness(.7);
    background-position: 58% center;
  }
  .login-page .auth-stage:after,
  .recovery-page .auth-stage:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,10,16,.28), #06101a 68%);
    pointer-events: none;
  }
  .login-page .auth-card,
  .recovery-page .auth-card {
    position: relative;
    z-index: 2;
    width: calc(100% - 36px);
    margin: 0 auto;
    padding: 30px 4px 12px;
  }
  .login-page .auth-logo,
  .recovery-page .auth-logo { display: none; }
  .login-page .auth-card h1,
  .recovery-page .auth-card h1 {
    margin: 9px 0 12px;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 2.35rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.04em;
  }
  .login-page .auth-lead,
  .recovery-page .auth-lead { font-size: .82rem; line-height: 1.75; }
  .login-page .auth-form,
  .recovery-page .auth-form { gap: 15px; margin-top: 26px; }
  .login-page .auth-form input,
  .recovery-page .auth-form input,
  .recovery-page .auth-form select {
    min-height: 58px;
    border-radius: 15px;
    font-size: 16px;
  }
  .login-page .auth-links,
  .recovery-page .auth-links {
    gap: 0;
    margin-top: 18px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .login-page .auth-links a,
  .recovery-page .auth-links a {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #b3bfcc;
    text-decoration: none;
  }

  /* Visit registration */
  .visit-apply-page .visit-apply-shell {
    width: 100%;
    padding: calc(var(--mobile-header) + 30px) 16px calc(58px + env(safe-area-inset-bottom));
  }
  .visit-apply-page .page-heading { margin-bottom: 22px; }
  .visit-apply-page .page-heading h1 { font-size: 2.15rem; line-height: 1.16; }
  .visit-apply-page .page-heading > p:last-child { font-size: .82rem; line-height: 1.7; }
  .visit-apply-page .registration-form { gap: 12px; }
  .visit-apply-page .step-card,
  .visit-apply-page .existing-entry {
    padding: 18px;
    border-radius: 19px;
    box-shadow: none;
    background: rgba(255,255,255,.027);
  }
  .visit-apply-page .step-title { gap: 12px; margin-bottom: 18px; }
  .visit-apply-page .step-title > span {
    flex-basis: 34px;
    height: 34px;
    border-radius: 11px;
  }
  .visit-apply-page .step-title h2 { font-size: 1.04rem; }
  .visit-apply-page .step-title p { font-size: .77rem; line-height: 1.6; }
  .visit-apply-page .identity-card {
    align-items: flex-start;
    padding: 15px;
    border-radius: 16px;
  }
  .visit-apply-page .identity-card strong { font-size: 1.25rem; }
  .visit-apply-page .slot-grid { grid-template-columns: 1fr; gap: 9px; }
  .visit-apply-page .slot-card { min-height: 94px; padding: 15px; border-radius: 16px; }
  .visit-apply-page .terms-check { padding: 15px; border-radius: 16px; font-size: .8rem; line-height: 1.6; }
  .visit-apply-page .submit-button { width: 100%; margin-top: 4px; }
  .visit-apply-page .compact-banner { padding: 18px; border-radius: 18px; }

  /* My SMAIS */
  .mypage-page .mypage-shell {
    width: 100%;
    padding: calc(var(--mobile-header) + 26px) 16px calc(52px + env(safe-area-inset-bottom));
  }
  .mypage-page .mypage-hero {
    gap: 13px;
    padding: 15px 0 24px;
  }
  .mypage-page .mypage-hero h1 {
    margin: 7px 0 8px;
    font-size: 2.3rem;
    line-height: 1.08;
  }
  .mypage-page .mypage-hero p { font-size: .8rem; }
  .mypage-page .logout-link { padding: 7px 0; }
  .mypage-page .mypage-grid { gap: 10px; }
  .mypage-page .profile-card {
    padding: 18px;
    border-radius: 19px;
    box-shadow: none;
  }
  .mypage-page .gamertag-line { gap: 13px; margin-top: 20px; }
  .mypage-page .avatar-orb {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    border-radius: 15px;
    font-size: 1.15rem;
  }
  .mypage-page .gamertag-line strong { font-size: 1.35rem; }
  .mypage-page .whitelist-preview { margin-top: 20px; border-radius: 13px; }
  .mypage-page .schedule-section { padding: 48px 0 30px; }
  .mypage-page .section-heading.split { gap: 14px; margin-bottom: 19px; }
  .mypage-page .section-heading.split h2 { font-size: 1.85rem; }
  .mypage-page .section-heading.split .secondary-button { width: 100%; }
  .mypage-page .visit-card {
    gap: 10px;
    padding: 17px;
    border-radius: 17px;
    background: rgba(255,255,255,.026);
  }
  .mypage-page .visit-main strong { font-size: 1.05rem; line-height: 1.45; }
  .mypage-page .visit-main p { font-size: .75rem; line-height: 1.6; }
  .mypage-page .visit-card-side { gap: 8px; }
  .mypage-page .visit-cancel-button { min-height: 40px; }
  .mypage-page .empty-state { padding: 36px 18px; border-radius: 18px; }
  .mypage-page .mypage-security {
    gap: 16px;
    margin: 16px 0 0;
    padding: 24px 0 0;
  }
  .mypage-page .mypage-security p { font-size: .76rem; }
  .mypage-page .mypage-security .text-link {
    width: 100%;
    justify-content: space-between;
    padding: 13px 0;
    border-top: 1px solid rgba(255,255,255,.08);
  }

  /* Complete / reset */
  .complete-page .complete-shell {
    width: 100%;
    padding: calc(var(--mobile-header) + 48px) 18px calc(54px + env(safe-area-inset-bottom));
  }
  .complete-page .complete-mark {
    width: 66px;
    height: 66px;
    border-radius: 20px;
  }
  .complete-page .complete-shell h1 {
    margin-top: 10px;
    font-size: 2.2rem;
    line-height: 1.2;
  }
  .complete-page .complete-shell > p { font-size: .82rem; line-height: 1.7; }
  .complete-page .receipt-card { margin: 24px 0; border-radius: 18px; }
  .complete-page .receipt-card > div { padding: 16px; }
  .complete-page .complete-actions { gap: 9px; }

  .recovery-page .reset-shell {
    width: 100%;
    min-height: 100svh;
    padding: calc(var(--mobile-header) + 28px) 16px calc(36px + env(safe-area-inset-bottom));
  }
  .recovery-page .reset-card {
    width: 100%;
    padding: 22px 18px;
    border-radius: 20px;
    box-shadow: none;
  }
  .recovery-page .reset-card h1 { font-size: 2rem; line-height: 1.2; }

  .site-footer {
    padding: 26px 18px calc(26px + env(safe-area-inset-bottom));
    gap: 14px;
  }
  .site-footer > p { font-size: .68rem; line-height: 1.6; }
}

@media (max-width: 380px) {
  .flow-entry-page .pin-pair { grid-template-columns: 1fr !important; }
  .flow-entry-page .platform-pills { grid-template-columns: 1fr !important; }
  .home-page .hero-content h1 { font-size: 2.15rem; }
}

/* Registration mobile vertical stacking fix v19
   Keep the progress row flush below the fixed header while reserving
   independent breathing room for the first heading. */
@media (max-width: 720px) {
  .flow-entry-page .site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
  }

  .flow-entry-page .flow-shell {
    padding-top: var(--mobile-header) !important;
  }

  .flow-entry-page .flow-topbar {
    top: var(--mobile-header) !important;
    padding: 8px 16px 9px !important;
  }

  .flow-entry-page .flow-topbar + .flow-form .flow-panel.is-current .flow-panel-inner {
    padding-top: 30px !important;
  }

  .flow-entry-page .flow-heading {
    padding-top: 2px;
  }

  .flow-entry-page .flow-heading h1 {
    padding-top: .06em;
    overflow: visible;
  }
}

/* Registration mobile header/progress geometry fix v20
   Fixed header and progress row occupy adjacent, explicit bands. The form
   reserves both bands so the first heading never slides underneath them. */
@media (max-width: 720px) {
  :root {
    --mobile-progress: 44px;
  }

  .flow-entry-page .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--mobile-header) !important;
  }

  .flow-entry-page .flow-shell {
    padding-top: calc(var(--mobile-header) + var(--mobile-progress)) !important;
  }

  .flow-entry-page .flow-topbar {
    position: fixed !important;
    top: var(--mobile-header) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: var(--mobile-progress) !important;
    margin: 0 !important;
    padding: 8px 16px 9px !important;
    box-sizing: border-box;
  }

  .flow-entry-page .flow-topbar + .flow-form .flow-panel.is-current .flow-panel-inner {
    padding-top: 28px !important;
  }

  .flow-entry-page .flow-heading {
    padding-top: 0 !important;
  }

  .flow-entry-page .flow-heading h1 {
    padding-top: .08em !important;
    line-height: 1.12 !important;
    overflow: visible !important;
  }

  /* Entry-choice popup: mobile should read as a centered dialog, not a bottom sheet. */
  .entry-choice-modal {
    place-items: center !important;
    align-items: center !important;
    padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)) !important;
  }

  .entry-choice-panel {
    width: 100% !important;
    max-height: calc(100dvh - max(32px, env(safe-area-inset-top)) - max(32px, env(safe-area-inset-bottom))) !important;
    margin: 0 !important;
  }
}

/* SMAIS ID prefix spacing fix v21
   Keep the @ prefix visually separate from typed text on mobile. */
@media (max-width: 720px) {
  .flow-entry-page .id-field .input-prefix {
    left: 16px !important;
    width: 16px;
    text-align: center;
    pointer-events: none;
  }

  .flow-entry-page .id-field input {
    padding-left: 46px !important;
  }
}