/* Auth pages: every visual override is restricted to phone widths. */
@media (max-width: 650px) {
  .login-motion .intro > .auth-mobile-copy { display: block; }
  .login-motion .intro > h1,
  .login-motion .intro > .auth-mobile-copy { text-align: center; }
  .login-motion .auth-title-period { display: none; }
  .login-motion .intro > .auth-desktop-copy,
  .login-motion .intro > .eyebrow,
  .login-motion .signal-copy span,
  .login-motion .analysis-tags { display: none; }

  body:is(.login-motion, .auth-mobile) {
    min-height: 100svh;
    background: #050506;
  }

  :is(.login-motion, .auth-mobile) header {
    padding: max(18px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left));
    gap: 12px;
  }
  :is(.login-motion, .auth-mobile) .brand { gap: 9px; font-size: 17px; }
  :is(.login-motion, .auth-mobile) .brand img { width: 30px; height: 30px; }
  :is(.login-motion, .auth-mobile) header > a:last-child:not(.brand) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 12px;
    white-space: nowrap;
  }
  :is(.login-motion, .auth-mobile) main {
    gap: 24px;
    margin: 10px auto 24px;
    padding: 0 max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));
    max-width: 490px;
  }
  :is(.login-motion, .auth-mobile) .intro { min-width: 0; }
  :is(.login-motion, .auth-mobile) .eyebrow { font-size: 9px !important; letter-spacing: 1.5px; }
  :is(.login-motion, .auth-mobile) h1 {
    font-size: clamp(28px, 8.3vw, 40px);
    letter-spacing: -1.2px;
    line-height: 1.12;
    margin: 14px 0;
    text-wrap: balance;
  }
  :is(.login-motion, .auth-mobile) .intro > p:not(.eyebrow) {
    max-width: none;
    font-size: 12px;
    line-height: 1.65;
    margin: 10px 0;
  }
  .login-motion .ambient { display: none; }
  .login-motion .traffic-preview {
    position: relative;
    margin-top: 18px;
    padding: 16px 12px 12px;
    border: 1px solid #ffffff0b;
    border-radius: 20px;
    background: linear-gradient(140deg, #ffffff04, #ffffff01);
  }
  .login-motion .traffic-demo {
    flex-direction: column;
    gap: 14px;
    margin: 0;
    perspective: none;
  }
  .login-motion .light-housing {
    flex-direction: row;
    justify-content: center;
    gap: clamp(22px, 8vw, 38px);
    padding: 12px 18px;
    border-radius: 999px;
    transform: none;
    will-change: auto;
    box-shadow: inset 0 1px 0 #c0d0e530, 0 10px 25px #0005;
  }
  .login-motion .light-housing:before { border-radius: inherit; }
  .login-motion .lamp { width: 44px; height: 44px; transform: none; touch-action: manipulation; }
  .login-motion .lamp:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; }
  .login-motion .signal-explanations {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
    text-align: center;
  }
  .login-motion .signal-copy { min-width: 0; animation-name: mobile-signal-copy; }
  .login-motion .signal-copy strong { font-size: 10px; line-height: 1.4; }
  .login-motion .signal-copy span { font-size: 9px; line-height: 1.5; margin-top: 5px; }
  .login-motion .traffic-demo.is-interacting .signal-copy.is-selected { transform: none; }
  .login-motion .analysis-tags {
    justify-content: center;
    gap: 8px 16px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid #ffffff08;
  }
  .login-motion .analysis-tags span { font-size: 9px; }
  /* Shared compact signal visualization for mobile login and password setup. */
  .activation-mobile .activation-tagline { display: none; }
  .login-motion .traffic-preview {
    padding: 10px 8px;
    border: 0;
    background: none;
  }
  .login-motion .traffic-demo { gap: 10px; }
  .login-motion .light-housing {
    gap: 14px;
    padding: 6px 10px;
    border-color: #ffffff18;
    background: #141519;
    box-shadow: inset 0 1px 0 #ffffff06, 0 5px 14px #0002;
  }
  .login-motion .light-housing:before,
  .login-motion .light-housing:after,
  .login-motion .lamp:before { display: none; }
  .login-motion .lamp {
    /* Keep a 44px touch target around the smaller 28px lens. */
    border: 8px solid #141519;
    background: radial-gradient(circle at 35% 30%, #ffffff35, transparent 65%), var(--light);
    background-clip: padding-box;
    box-shadow: 0 0 8px var(--glow);
  }
  .login-motion .lamp:after { inset: 0; }
  .login-motion .green,
  .login-motion .green:after,
  .login-motion .go { animation: activation-green 10s ease-in-out infinite; }
  .login-motion .red,
  .login-motion .red:after,
  .login-motion .stop { animation: activation-red 10s ease-in-out infinite; }
  .login-motion .amber,
  .login-motion .amber:after,
  .login-motion .wait { animation: activation-amber 10s ease-in-out infinite; }
  @keyframes activation-green {
    0%, 46%, 100% { opacity: 1; }
    50%, 97% { opacity: .25; }
  }
  @keyframes activation-red {
    0%, 48%, 75%, 100% { opacity: .25; }
    52%, 71% { opacity: 1; }
  }
  @keyframes activation-amber {
    0%, 73%, 100% { opacity: .25; }
    77%, 96% { opacity: 1; }
  }
  :is(.login-motion, .auth-mobile) .card {
    padding: 24px 22px;
    border-radius: 22px;
    min-width: 0;
    border-color: #ffffff10;
    background: linear-gradient(140deg, #131315, #101012);
    box-shadow: 0 16px 40px #0004, inset 0 1px 0 #ffffff04;
    animation: mobile-card-enter .7s .12s cubic-bezier(.22, 1, .36, 1) both;
    scroll-margin-top: 16px;
  }
  .login-motion .card:before {
    display: none;
  }
  .login-motion .card:after { display: none; }
  :is(.login-motion, .auth-mobile) .card h2 { font-size: 25px; text-wrap: balance; }
  :is(.login-motion, .auth-mobile) .card input { min-height: 52px; font-size: 16px; }
  :is(.login-motion, .auth-mobile) .field button { min-width: 44px; min-height: 44px; right: 6px; }
  :is(.login-motion, .auth-mobile) .submit {
    min-height: 52px;
    align-items: center;
    font-size: 14px;
    touch-action: manipulation;
    box-shadow: 0 6px 22px #ffb30016;
  }
  .login-motion .card .submit:before {
    display: block;
    width: 35%;
    background: linear-gradient(90deg, transparent, #fff3, transparent);
    animation: button-sheen 9s 1.2s infinite;
    pointer-events: none;
  }
  :is(.login-motion, .auth-mobile) .submit:active { transform: scale(.98); }
  :is(.login-motion, .auth-mobile) .card .help { font-size: 11px; }
  :is(.login-motion, .auth-mobile) footer {
    padding: 12px 20px max(22px, env(safe-area-inset-bottom));
    text-align: center;
  }
  @keyframes mobile-card-enter {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to { opacity: 1; transform: none; }
  }
  @keyframes mobile-signal-copy {
    0%, 25%, 100% { opacity: 1; }
    33%, 92% { opacity: .4; }
  }
}

@media (max-width: 650px) and (prefers-reduced-motion: reduce) {
  :is(.login-motion, .auth-mobile) .card { animation: none; }
  .login-motion .card .submit:before { display: none; }
  .login-motion .signal-copy { animation: none; opacity: 1; }
  .login-motion .lamp,
  .login-motion .signal-copy { animation: none !important; opacity: .4; }
  .login-motion .green,
  .login-motion .go { opacity: 1; }
  .login-motion .lamp:after { display: none; }
}

@media (max-width: 650px) and (hover: none) {
  :is(.login-motion, .auth-mobile) .submit:hover { transform: none; }
  .login-motion .traffic-demo:hover .light-housing { transform: none; }
}