/* ==========================================================================
   AIRA REMINDER — SIGN IN  ·  "Dispatch Beam"
   Left panel: the reminder queue dispatching to WhatsApp and Pulse.
   Right panel: the two-step credentials → OTP form.

   The art panel is a container query context, so every size inside it is in
   cqw and the whole scene scales with the panel instead of the viewport.
   ========================================================================== */

.auth-shell {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    --wa: #25D366;
    --wa-deep: #0F7A66;
    --pulse: #B9A6FF;
}

/* ==========================================================================
   RIGHT — the form
   ========================================================================== */
.auth-form {
    flex: 1 1 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px clamp(24px, 4vw, 64px);
    background: var(--aira-surface, #fff);
}
.af-inner { width: 100%; max-width: 380px; margin-inline: auto; }

.af-logo { display: block; height: 56px; width: auto; margin-bottom: 34px; }

.af-inner h1 {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--aira-ink, #2E3360);
    margin: 0;
}
.af-lede {
    color: var(--aira-muted, #6B74A6);
    font-size: 14px;
    line-height: 1.55;
    margin: 8px 0 0;
}

.af-field { margin-top: 20px; }
.af-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--aira-muted, #6B74A6);
    margin-bottom: 7px;
}
.af-input { position: relative; }
.af-input .form-control { height: 48px; padding-left: 42px; font-size: 15px; }
.af-input > .fi {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--aira-faint, #98A0CA);
    pointer-events: none;
}
.af-input > .fi svg { width: 100%; height: 100%; display: block; }
.af-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    border-radius: 7px;
    color: var(--aira-faint, #98A0CA);
    cursor: pointer;
}
.af-eye:hover { color: var(--ins-primary); background: var(--ins-primary-bg-subtle); }
.af-eye svg { width: 18px; height: 18px; }

.af-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    font-size: 13.5px;
}
.af-row .form-check { margin: 0; }
.af-row label { color: var(--aira-muted, #6B74A6); cursor: pointer; }
.af-link { color: var(--ins-primary); font-weight: 600; text-decoration: none; }
.af-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.af-submit { width: 100%; height: 50px; margin-top: 26px; font-size: 15px; }

.af-foot {
    margin-top: 30px;
    font-size: 12px;
    color: var(--aira-faint, #98A0CA);
    letter-spacing: .02em;
}
.af-foot .sep { opacity: .5; margin-inline: 6px; }

/* --- OTP step --- */
.otp-boxes { display: flex; gap: 10px; margin-top: 22px; }
.otp-digit {
    flex: 1;
    min-width: 0;
    height: 56px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--aira-ink, #2E3360);
    border: 1px solid var(--aira-border, #E4E5F6);
    border-radius: 10px;
    background: var(--aira-surface-2, #F7F8FE);
}
.otp-digit:focus {
    outline: none;
    border-color: var(--ins-primary);
    background: var(--aira-surface, #fff);
    box-shadow: 0 0 0 3px rgba(var(--ins-primary-rgb), .18);
}
.otp-target {
    font-weight: 700;
    color: var(--aira-ink, #2E3360);
    font-variant-numeric: tabular-nums;
}
.af-backrow { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; font-size: 13.5px; }

/* ==========================================================================
   LEFT — the dispatch scene
   ========================================================================== */
.auth-art {
    flex: 1 1 60%;
    position: relative;
    overflow: hidden;
    container-type: inline-size;
    background: linear-gradient(150deg, #2B3AF0 0%, #5B2EE8 48%, #8A2BE0 100%);
}
.auth-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 50% at 82% 8%, rgba(255,255,255,.2), transparent 60%),
        radial-gradient(50% 40% at 8% 92%, rgba(0,229,255,.18), transparent 60%);
}

.art-eyebrow {
    position: absolute;
    top: 3cqw;
    left: 3.4cqw;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: .8cqw;
    font-size: max(9px, .76cqw);
    font-weight: 700;
    letter-spacing: .22em;
    color: rgba(255,255,255,.85);
}
.art-live {
    width: .65cqw; height: .65cqw; min-width: 7px; min-height: 7px;
    border-radius: 50%; background: #fff;
    animation: artBeat 2s ease-out infinite;
}
@keyframes artBeat {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
    70%  { box-shadow: 0 0 0 .9cqw transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.art-legend { position: absolute; right: 3.4cqw; top: 3cqw; z-index: 5; display: flex; gap: .7cqw; }
.art-legend span {
    display: flex; align-items: center; gap: .55cqw;
    padding: .5cqw .85cqw; border-radius: 99px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    font-size: max(8px, .68cqw); font-weight: 700; letter-spacing: .1em; color: #fff;
}
.art-legend i { width: .55cqw; height: .55cqw; min-width: 6px; min-height: 6px; border-radius: 50%; flex: none; }

/* --- the queue --- */
/* ==========================================================================
   THE STAGE — the queue on the left, the two handsets it feeds on the right.

   Everything is sized in cqw against .auth-art, so the scene scales with the
   panel rather than the viewport. All motion is decorative CSS on a loop;
   nothing here is driven by script.
   ========================================================================== */
.art-stage {
    position: absolute;
    inset: 8.5cqw 3.4cqw 12cqw;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 2.4cqw;
}

/* ==========================================================================
   THE QUEUE
   ========================================================================== */
.art-queue {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    overflow: hidden;
    /* fades top and bottom so the loop has no visible seam */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
}

.qtrack {
    display: flex;
    flex-direction: column;
    gap: .8cqw;
    animation: qFlow 24s linear infinite;
}

@keyframes qFlow { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.qcard {
    flex: none;
    display: flex;
    align-items: center;
    gap: .8cqw;
    padding: .7cqw .85cqw;
    border-radius: .85cqw;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 .5cqw 1.2cqw -.5cqw rgba(8, 4, 45, .5);
}

.qcard .qt {
    flex: none;
    font-size: max(8px, .68cqw);
    font-weight: 800;
    color: #6B74A6;
    font-variant-numeric: tabular-nums;
}

.qcard .qm { flex: 1; min-width: 0; }

.qcard .qm b {
    display: block;
    font-size: max(9px, .78cqw);
    font-weight: 700;
    color: #191D3E;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qcard .qm span {
    display: block;
    font-size: max(7px, .63cqw);
    color: #6B74A6;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qpill {
    flex: none;
    padding: .18cqw .55cqw;
    border-radius: .4cqw;
    font-size: max(6.5px, .55cqw);
    font-weight: 800;
    letter-spacing: .05em;
}

.qpill.is-wa    { background: #DBF6E6; color: #0A7040; }
.qpill.is-pulse { background: #E9E4FF; color: #4B2FBF; }
.qpill.is-both  { background: linear-gradient(100deg, #DBF6E6 0 50%, #E9E4FF 50% 100%); color: #2D4A7A; }

/* the right edge of the queue: where a reminder leaves for a handset */
.qport {
    position: absolute;
    right: -.35cqw;
    top: 50%;
    translate: 0 -50%;
    width: .7cqw;
    height: 46%;
    border-radius: .5cqw;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .5), transparent);
}

/* ==========================================================================
   THE HANDSETS
   ========================================================================== */
.art-phones {
    flex: none;
    display: flex;
    align-items: center;
    gap: 1.4cqw;
}

.ph {
    position: relative;
    width: 15.5cqw;
    min-width: 146px;
    aspect-ratio: 9 / 18.5;
    border-radius: 2cqw;
    padding: .4cqw;
    background: linear-gradient(160deg, #2A2C46 0%, #14162A 100%);
    box-shadow:
        0 0 0 .1cqw rgba(255, 255, 255, .16),
        0 2.4cqw 4cqw -1.2cqw rgba(6, 4, 40, .78);
    animation: phFloat 7s ease-in-out infinite;
}

/* Pulse sits a little higher, WhatsApp a little lower - a straight pair reads
   as a product shot, a stagger reads as a scene */
.ph-pulse { transform: translateY(-1.6cqw) rotate(-3deg); animation-delay: -1.6s; }
.ph-wa    { transform: translateY(1.6cqw) rotate(3deg); }

@keyframes phFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -.9cqw; }
}

.ph-notch {
    position: absolute;
    top: .4cqw;
    left: 50%;
    translate: -50% 0;
    width: 26%;
    height: .8cqw;
    min-height: 8px;
    border-radius: 0 0 .8cqw .8cqw;
    background: #14162A;
    z-index: 3;
}

.ph-scr {
    position: relative;
    height: 100%;
    border-radius: 1.7cqw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #F4F6F8;
}

/* the phone flashes as the reminder lands on it */
.ph-scr::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    animation: phLand 9s ease-out infinite;
}
.ph-pulse .ph-scr::after { background: radial-gradient(70% 40% at 50% 30%, rgba(140, 120, 255, .5), transparent 70%); animation-delay: 1.5s; }
.ph-wa .ph-scr::after    { background: radial-gradient(70% 40% at 50% 30%, rgba(37, 211, 102, .45), transparent 70%); }

@keyframes phLand { 0%, 100% { opacity: 0; } 8% { opacity: 1; } 22% { opacity: 0; } }

/* the status strip both phones wear */
.ps-status, .wa-status {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6cqw .9cqw .25cqw;
    font-size: max(6.5px, .58cqw);
    font-weight: 700;
    color: #2A2E3A;
}

.ps-status-r { display: inline-flex; align-items: center; gap: .28cqw; }
.ps-status-r svg { width: max(6.5px, .62cqw); height: max(6.5px, .62cqw); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* ---------------------------- PULSE ---------------------------- */
.ps-top {
    flex: none;
    display: flex;
    align-items: center;
    gap: .5cqw;
    padding: .4cqw .9cqw .65cqw;
    border-bottom: 1px solid #E3E7EC;
    background: #fff;
}

.ps-top b {
    flex: 1;
    text-align: center;
    margin-right: 1.2cqw;
    font-size: max(9px, .88cqw);
    font-weight: 800;
    color: #1E7BE8;
}

.ps-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.5cqw; height: 1.5cqw;
    min-width: 15px; min-height: 15px;
    border-radius: .4cqw;
    border: 1px solid #BBD9F7;
    background: #EAF3FE;
}
.ps-mark svg { width: 62%; height: 62%; fill: none; stroke: #1E7BE8; stroke-width: 1.8; stroke-linejoin: round; }

.ps-body {
    flex: 1;
    min-height: 0;
    padding: .6cqw;
    display: flex;
    flex-direction: column;
    gap: .55cqw;
    background: #F4F6F8;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}

.ps-card {
    flex: none;
    border-radius: .75cqw;
    border: 1px solid #CFE3D6;
    background: #E9F3EC;
    padding: .6cqw .65cqw;
}

.ps-card.is-new { animation: psArrive 9s cubic-bezier(.2, .9, .3, 1) infinite; animation-delay: 1.5s; }

@keyframes psArrive {
    0%       { opacity: 0; translate: 0 -1.4cqw; }
    7%       { opacity: 1; translate: 0 0; }
    90%      { opacity: 1; translate: 0 0; }
    97%,100% { opacity: 0; translate: 0 -1.4cqw; }
}

.ps-card-h { display: flex; align-items: flex-start; gap: .45cqw; }
.ps-card-h > div { flex: 1; min-width: 0; }
.ps-card-h b { display: block; font-size: max(8px, .74cqw); font-weight: 800; color: #17202B; line-height: 1.25; }

.ps-bell {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.5cqw; height: 1.5cqw;
    min-width: 15px; min-height: 15px;
    border-radius: .4cqw;
    border: 1px solid #BEDCC8;
    background: #D9EDE0;
}
.ps-bell svg { width: 58%; height: 58%; fill: none; stroke: #1F7A45; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ps-tag {
    display: inline-block;
    margin-top: .18cqw;
    padding: .1cqw .4cqw;
    border-radius: .3cqw;
    background: #CDE9D6;
    color: #14663A;
    font-size: max(6px, .53cqw);
    font-weight: 800;
}
.ps-tag.is-meet { background: #CFE6DA; color: #106046; }

.ps-when {
    display: flex; align-items: center; gap: .25cqw;
    margin-top: .35cqw;
    font-size: max(6px, .56cqw);
    font-weight: 700;
    color: #3D4A56;
}
.ps-when svg { width: max(6px, .6cqw); height: max(6px, .6cqw); fill: none; stroke: currentColor; stroke-width: 2; }

.ps-card p { margin: .3cqw 0 0; font-size: max(6px, .58cqw); line-height: 1.42; color: #2F3A45; }
.ps-card p b { font-weight: 700; color: #17202B; }
.ps-foot { display: block; margin-top: .28cqw; font-size: max(5.5px, .5cqw); color: #7E8E88; }

.ps-nav {
    flex: none;
    display: flex;
    border-top: 1px solid #E3E7EC;
    background: #fff;
    padding: .4cqw .25cqw .65cqw;
}

.ps-nav span {
    position: relative;
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: .15cqw;
    font-size: max(5px, .45cqw);
    font-weight: 800;
    letter-spacing: .03em;
    color: #93A0AD;
}
.ps-nav svg { width: max(9px, .9cqw); height: max(9px, .9cqw); fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.ps-nav .on { color: #1E7BE8; }

.ps-badge {
    position: absolute;
    top: -.1cqw; right: 26%;
    width: .45cqw; height: .45cqw;
    min-width: 5px; min-height: 5px;
    border-radius: 50%;
    background: #F0483C;
    animation: psBadge 9s ease-out infinite;
    animation-delay: 1.5s;
}

@keyframes psBadge {
    0%, 4%   { scale: 0; }
    9%       { scale: 1.5; }
    13%, 92% { scale: 1; }
    97%,100% { scale: 0; }
}

/* --------------------------- WHATSAPP --------------------------- */
.wa-status { background: #F4F6F8; }

.wa-top {
    flex: none;
    display: flex; align-items: center; gap: .45cqw;
    padding: .5cqw .7cqw;
    background: #075E54;
}

.wa-av {
    flex: none;
    display: grid; place-items: center;
    width: 1.6cqw; height: 1.6cqw;
    min-width: 16px; min-height: 16px;
    border-radius: 50%;
    background: #25D366;
}
.wa-av svg { width: 62%; height: 62%; fill: #06342A; }

.wa-nm { flex: 1; min-width: 0; }
.wa-nm b { display: block; font-size: max(7.5px, .7cqw); font-weight: 700; color: #fff; line-height: 1.25; }
.wa-nm span { display: block; font-size: max(6px, .53cqw); color: rgba(255, 255, 255, .75); }

.wa-body {
    flex: 1;
    min-height: 0;
    padding: .55cqw .55cqw 0;
    display: flex; flex-direction: column; align-items: flex-end; gap: .45cqw;
    overflow: hidden;
    background-color: #ECE3DA;
    background-image:
        radial-gradient(circle at 20% 25%, rgba(255, 255, 255, .55) 0 .1cqw, transparent .11cqw),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .45) 0 .09cqw, transparent .1cqw);
    background-size: 4cqw 4cqw, 5.5cqw 5.5cqw;
}

.wa-day {
    align-self: center;
    padding: .15cqw .6cqw;
    border-radius: .45cqw;
    background: rgba(255, 255, 255, .82);
    font-size: max(5.5px, .5cqw);
    font-weight: 800;
    letter-spacing: .06em;
    color: #5C6B62;
}

.wa-bub {
    position: relative;
    max-width: 90%;
    padding: .42cqw .55cqw .85cqw;
    border-radius: .7cqw .18cqw .7cqw .7cqw;
    background: #DCF8C6;
    font-size: max(6px, .58cqw);
    line-height: 1.42;
    color: #17202B;
    box-shadow: 0 .08cqw .2cqw rgba(0, 0, 0, .1);
    animation: waIn .5s ease-out backwards;
    animation-delay: var(--d, 0s);
}
.wa-bub b { font-weight: 700; }

@keyframes waIn { from { opacity: 0; translate: .5cqw .4cqw; scale: .96; } }

.wa-bub.is-new { animation: waLoop 9s cubic-bezier(.2, .9, .3, 1) infinite; animation-delay: 0s; }

@keyframes waLoop {
    0%       { opacity: 0; translate: .5cqw .7cqw; scale: .94; }
    7%       { opacity: 1; translate: 0 0; scale: 1; }
    90%      { opacity: 1; translate: 0 0; }
    97%,100% { opacity: 0; translate: .5cqw .7cqw; }
}

.wa-meta {
    position: absolute;
    right: .45cqw; bottom: .25cqw;
    display: inline-flex; align-items: center; gap: .2cqw;
    font-size: max(5px, .46cqw);
    color: #6C8A72;
}

.wa-tk { font-style: normal; font-weight: 700; color: #8FA795; animation: waRead 9s steps(1) infinite; }
@keyframes waRead { 0%, 22% { color: #8FA795; } 30%, 100% { color: #34B7F1; } }

.wa-input {
    flex: none;
    display: flex; align-items: center; gap: .4cqw;
    padding: .45cqw .6cqw .65cqw;
    background: #ECE3DA;
}

.wa-field {
    flex: 1;
    padding: .35cqw .6cqw;
    border-radius: 1cqw;
    background: #fff;
    font-size: max(6px, .56cqw);
    color: #9AA6A0;
}

.wa-send {
    flex: none;
    display: grid; place-items: center;
    width: 1.4cqw; height: 1.4cqw;
    min-width: 14px; min-height: 14px;
    border-radius: 50%;
    background: #075E54;
}
.wa-send svg { width: 55%; height: 55%; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linejoin: round; }

/* ==========================================================================
   THE ROUTES
   A dot leaves the queue and flies to the handset that reminder is going to.
   Green ends at WhatsApp, violet at Pulse; a BOTH card fires one of each at
   the same moment, which is why two share a --t.

   They sit inside .art-phones, so every number below is measured from the
   handsets: the block is 15.5 + 1.4 + 15.5 = 32.4cqw wide, Pulse centred at
   7.75cqw and WhatsApp at 24.65cqw, each offset by the stagger it carries.
   ========================================================================== */
.art-phones { position: relative; }

.rt {
    position: absolute;
    left: 0;
    top: 50%;
    width: .55cqw;
    height: .55cqw;
    min-width: 6px;
    min-height: 6px;
    margin: -.275cqw 0 0 -.275cqw;   /* centre the dot on its own point */
    border-radius: 50%;
    opacity: 0;
    z-index: 6;
    animation: routeFly 9s cubic-bezier(.35, 0, .55, 1) infinite;
    animation-delay: var(--t, 0s);
}

/* the trail behind the dot */
.rt::after {
    content: "";
    position: absolute;
    right: 55%;
    top: 50%;
    translate: 0 -50%;
    width: 3.4cqw;
    height: .16cqw;
    border-radius: .16cqw;
    background: linear-gradient(90deg, transparent, currentColor);
    opacity: .6;
}

.rt.to-pulse {
    color: #B9A6FF;
    background: #C9BCFF;
    box-shadow: 0 0 1cqw .18cqw rgba(185, 166, 255, .9);
    --ex: 7.75cqw;      /* the middle of the Pulse handset */
    --ey: -1.6cqw;      /* which sits high in the pair */
}

.rt.to-wa {
    color: #25D366;
    background: #25D366;
    box-shadow: 0 0 1cqw .18cqw rgba(37, 211, 102, .9);
    --ex: 24.65cqw;     /* the middle of the WhatsApp handset */
    --ey: 1.6cqw;       /* which sits low */
}

/* starts off to the left, where the queue is, and lands on the handset */
@keyframes routeFly {
    0%       { opacity: 0; translate: -13cqw 0; scale: .4; }
    4%       { opacity: 1; scale: 1; }
    15%      { opacity: 1; }
    19%      { opacity: 0; translate: var(--ex) var(--ey); scale: .55; }
    100%     { opacity: 0; translate: var(--ex) var(--ey); }
}

/* ==========================================================================
   MOTION OFF
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .qtrack, .ph, .ps-card.is-new, .ps-badge, .wa-bub, .wa-tk, .rt, .ph-scr::after {
        animation: none !important;
    }
    .ps-card.is-new, .wa-bub { opacity: 1 !important; translate: none !important; scale: none !important; }
    .wa-tk { color: #34B7F1; }
    .rt { display: none; }
}

.art-tagline { position: absolute; left: 3.4cqw; bottom: 3.2cqw; right: 3.4cqw; z-index: 5; }
.art-tagline h2 {
    font-size: max(20px, 2.15cqw); font-weight: 700; letter-spacing: -.022em;
    line-height: 1.15; margin: 0; color: #fff;
}
.art-tagline h2 em { font-style: normal; color: #8CF0C4; }
.art-tagline p {
    margin: .7cqw 0 0; font-size: max(11px, .95cqw);
    color: rgba(255,255,255,.76); max-width: 40ch; line-height: 1.5;
}

/* ==========================================================================
   STATE — quieten the scene while the OTP is being typed
   ========================================================================== */
.auth-shell:has(#stepOtp:not(.d-none)) .auth-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10,6,40,.22);
    z-index: 7;
    pointer-events: none;
}

/* ==========================================================================
   RESPONSIVE — below 992px the scene becomes a strip above the form
   ========================================================================== */
@media (max-width: 991.98px) {
    .auth-shell { flex-direction: column; }
    .auth-art { flex: none; height: 190px; container-type: normal; }
    /* the phones need real height to read; on a 190px strip the tagline says it better */
    .auth-art .art-stage,
    .auth-art .art-legend { display: none; }
    .art-eyebrow { top: 22px; left: 22px; font-size: 10px; }
    .art-live { width: 7px; height: 7px; }
    .art-tagline { left: 22px; right: 22px; bottom: 22px; }
    .art-tagline h2 { font-size: 21px; }
    .art-tagline p { display: none; }
    .auth-form { flex: 1; padding: 34px 22px 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-art *, .auth-art *::before, .auth-art *::after { animation: none !important; }
    .ps-card, .wa-bub { opacity: 1 !important; translate: none !important; scale: none !important; }
    .beam { display: none; }
}