/* Shared restaurant + affiliate authentication experience.
   The existing forms and authentication logic stay untouched; this layer owns
   presentation, responsive layout, focus visibility, and the dark-matter brand. */
:root {
    --ar-auth-cyan: #67dcff;
    --ar-auth-indigo: #9eb4ff;
    --ar-auth-violet: #b8a2ff;
    --ar-auth-mint: #56e1ae;
    --ar-auth-ink: #05060b;
    --ar-auth-line: rgba(143, 216, 255, 0.18);
    --ar-auth-muted: rgba(232, 240, 255, 0.68);
}

@property --ar-auth-glow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes ar-auth-border-orbit { to { --ar-auth-glow-angle: 360deg; } }

body.ar-auth-page {
    display: block !important;
    min-height: 100vh;
    padding: 0 !important;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 14% 18%, rgba(66, 46, 158, 0.16), transparent 34%),
        radial-gradient(circle at 86% 12%, rgba(0, 212, 255, 0.08), transparent 26%),
        #03050a;
}

.ar-auth-page .auth-experience,
.ar-auth-page .login-wrap.active {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(440px, 0.84fr);
    min-height: 100svh;
    width: 100%;
}

/* Compact account-entry flows (password reset and employee invitation) share
   the same real dark-matter environment without forcing a two-panel layout. */
body.ar-auth-utility-page {
    position: relative;
    isolation: isolate;
    display: grid !important;
    place-items: center;
    min-height: 100svh;
    padding: clamp(20px, 5vw, 56px) !important;
    overflow-x: hidden;
    background: #03050a !important;
}

body.ar-auth-utility-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(120deg, rgba(2,4,10,.08), rgba(2,4,10,.32) 58%, rgba(2,4,10,.5)),
        url('/assets/auth-dark-matter-v2.webp') center / cover no-repeat;
}

body.ar-auth-utility-page::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 50% 45%, transparent 0 24%, rgba(2,4,10,.44) 78%, rgba(2,4,10,.72) 100%);
}

.ar-auth-utility-page .auth-container {
    position: relative;
    width: min(100%, 470px);
    max-width: 470px;
    padding: clamp(28px, 5vw, 42px) !important;
    overflow: hidden;
    border: 1px solid transparent !important;
    border-radius: 20px !important;
    background:
        linear-gradient(145deg, rgba(13,16,27,.94), rgba(5,7,13,.96)) padding-box,
        linear-gradient(120deg, rgba(103,220,255,.56), rgba(158,180,255,.34), rgba(184,162,255,.48)) border-box !important;
    box-shadow: 0 32px 90px rgba(0,0,0,.62), 0 0 48px rgba(35,126,196,.1), inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(24px) saturate(118%);
    -webkit-backdrop-filter: blur(24px) saturate(118%);
}

.ar-auth-utility-page .utility-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.ar-auth-utility-page .utility-brand img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border: 1px solid rgba(103,220,255,.26);
    border-radius: 13px;
    filter: brightness(1.18) contrast(1.06);
    box-shadow: 0 0 26px rgba(103,220,255,.14);
}

.ar-auth-utility-page .utility-brand strong {
    display: block;
    color: #f8fbff;
    font-family: 'Orbitron', 'Exo 2', sans-serif;
    font-size: 1.08rem;
    letter-spacing: .025em;
}

.ar-auth-utility-page .utility-brand span {
    display: block;
    margin-top: 3px;
    color: rgba(222,234,252,.58);
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ar-auth-utility-page .logo h1 {
    margin: 0;
    font-size: clamp(1.65rem, 5vw, 2.05rem) !important;
    letter-spacing: -.025em !important;
    background: linear-gradient(110deg, #a9f1ff 5%, #9eb4ff 55%, #c1adff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.ar-auth-utility-page .subtitle {
    color: rgba(230,239,255,.68) !important;
    line-height: 1.55;
}

.ar-auth-utility-page input[type='password'],
.ar-auth-utility-page input[type='text'],
.ar-auth-utility-page input[type='email'] {
    min-height: 48px;
    color: #f8fbff !important;
    border: 1px solid rgba(143,216,255,.2) !important;
    border-radius: 10px !important;
    background: rgba(3,5,10,.72) !important;
}

.ar-auth-utility-page input:focus {
    outline: 2px solid rgba(103,220,255,.9) !important;
    outline-offset: 2px;
    border-color: rgba(103,220,255,.64) !important;
    box-shadow: 0 0 0 4px rgba(103,220,255,.08) !important;
}

.ar-auth-utility-page .btn {
    position: relative;
    min-height: 50px;
    color: #06111c !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: linear-gradient(128deg, #84e4ff 0%, #9eb4ff 55%, #b8a2ff 100%) !important;
    box-shadow: 0 14px 36px rgba(103,220,255,.14), 0 8px 24px rgba(143,116,255,.1) !important;
}

.ar-auth-utility-page .login-link a {
    color: #72e4ff !important;
}

.ar-auth-page .login-wrap.active {
    padding: 0 !important;
}

.ar-auth-page--affiliate-signup .auth-experience {
    min-height: calc(100svh - 72px);
    padding-top: 72px;
}

.ar-auth-page .auth-experience::before,
.ar-auth-page .login-wrap.active::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(2,4,10,.08) 0%, rgba(2,4,10,.2) 49%, rgba(2,4,10,.48) 100%),
        linear-gradient(180deg, rgba(2,4,10,.03), rgba(2,4,10,.24)),
        url('/assets/auth-dark-matter-v2.webp') center / cover no-repeat;
}

.ar-brand-panel {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: clamp(88px, 9vw, 144px) clamp(44px, 7vw, 118px);
    overflow: hidden;
    border-right: 1px solid rgba(161, 184, 255, 0.13);
}

.ar-brand-panel::before {
    content: '';
    position: absolute;
    width: min(62vw, 780px);
    aspect-ratio: 1;
    left: -18%;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 1px solid rgba(54, 217, 255, 0.12);
    box-shadow:
        0 0 0 72px rgba(156, 130, 255, 0.04),
        0 0 0 144px rgba(103, 220, 255, 0.025),
        0 0 120px rgba(40, 86, 190, 0.13);
}

.ar-brand-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, rgba(255,255,255,.035), transparent 26%),
        radial-gradient(circle at 30% 50%, rgba(54,217,255,.08), transparent 38%);
}

.ar-brand-panel-inner {
    position: relative;
    z-index: 1;
    width: min(100%, 720px);
    margin: auto;
}

.ar-auth-page--affiliate-signup .ar-brand-panel-inner {
    position: sticky;
    top: 132px;
    margin: 0 auto;
}

.ar-brand-lockup {
    position: relative;
    width: clamp(170px, 20vw, 280px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin-bottom: clamp(26px, 4vw, 48px);
    isolation: isolate;
}

.ar-brand-lockup::before,
.ar-brand-lockup::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ar-brand-lockup::before {
    inset: 1%;
    z-index: -1;
    border: 1px solid rgba(103,220,255,.34);
    background: radial-gradient(circle, rgba(8,12,24,.78) 0 53%, rgba(103,220,255,.06) 72%, transparent 76%);
    box-shadow: inset 0 0 58px rgba(103,220,255,.11), 0 0 72px rgba(103,220,255,.13);
}

.ar-brand-lockup::after {
    inset: 10%;
    z-index: -1;
    border: 1px solid rgba(184,162,255,.22);
    box-shadow: 0 0 50px rgba(143,116,255,.12);
}

.ar-brand-lockup img {
    width: 94%;
    height: 94%;
    object-fit: contain;
    opacity: 1;
    mix-blend-mode: normal;
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    filter: brightness(1.2) contrast(1.08) saturate(1.06) drop-shadow(0 0 24px rgba(103,220,255,.2)) drop-shadow(0 0 42px rgba(143,116,255,.16));
}

/* The connected-marketing experience adds an in-page compass to ordinary
   editorial <main> elements. Authentication is a focused two-panel task, so
   suppress that generated element and pin the intended grid areas explicitly. */
.ar-auth-page .auth-experience > .ar-brand-panel {
    grid-column: 1;
    grid-row: 1;
}

.ar-auth-page .auth-experience > .ar-form-panel {
    grid-column: 2;
    grid-row: 1;
}

.ar-auth-page .auth-experience > .arx-compass {
    display: none !important;
}

.ar-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    color: #9beaff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.ar-eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, var(--ar-auth-cyan), var(--ar-auth-violet));
    box-shadow: 0 0 12px rgba(54,217,255,.45);
}

.ar-brand-panel h2 {
    max-width: 700px;
    margin: 0;
    color: #fff;
    font-family: 'Orbitron', 'Exo 2', sans-serif;
    font-size: clamp(2.25rem, 4.2vw, 4.65rem);
    line-height: 1.03;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.ar-brand-panel h2 span {
    color: transparent;
    background: linear-gradient(110deg, #f8fbff 8%, #8de8ff 48%, #b8a2ff 92%);
    -webkit-background-clip: text;
    background-clip: text;
}

.ar-brand-copy {
    max-width: 620px;
    margin: 22px 0 0;
    color: var(--ar-auth-muted);
    font-size: clamp(1rem, 1.35vw, 1.16rem);
    line-height: 1.72;
}

.ar-capability-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 620px;
    margin: 28px 0 0;
}

.ar-capability {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 11px;
    background: rgba(255,255,255,.025);
    color: rgba(244,248,255,.78);
    font-size: .86rem;
    font-weight: 650;
    backdrop-filter: blur(10px);
}

.ar-capability::before {
    content: '';
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--ar-auth-cyan);
    box-shadow: 0 0 12px rgba(54,217,255,.7);
}

.ar-form-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: clamp(84px, 8vh, 118px) clamp(26px, 4vw, 68px) clamp(42px, 6vh, 78px);
    background: linear-gradient(180deg, rgba(5,6,11,.52), rgba(5,6,11,.9));
}

.ar-form-panel::before {
    content: '';
    position: absolute;
    inset: 8% 8%;
    z-index: -1;
    border-radius: 40%;
    background: radial-gradient(circle, rgba(54,217,255,.09), transparent 64%);
    filter: blur(30px);
}

.ar-auth-page .ar-form-panel .auth-container,
.ar-auth-page .ar-form-panel .login-card,
.ar-auth-page .ar-form-panel .card {
    width: min(100%, 520px);
    max-width: 520px;
    margin: 0 !important;
    padding: clamp(28px, 3.2vw, 42px) !important;
    border: 1px solid rgba(143,216,255,.22) !important;
    border-radius: 20px !important;
    background:
        linear-gradient(145deg, rgba(13,16,27,.93), rgba(5,7,13,.94)) padding-box,
        linear-gradient(120deg, rgba(103,220,255,.5), rgba(158,180,255,.3), rgba(184,162,255,.42)) border-box !important;
    box-shadow:
        0 32px 90px rgba(0,0,0,.58),
        0 0 44px rgba(25,110,178,.08),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(24px) saturate(118%);
    -webkit-backdrop-filter: blur(24px) saturate(118%);
}

.ar-auth-page .ar-form-panel .auth-container,
.ar-auth-page .ar-form-panel .login-card {
    overflow: hidden;
}

.ar-auth-page .ar-form-panel .logo h1,
.ar-auth-page .ar-form-panel .login-card h1 {
    font-size: clamp(1.55rem, 2vw, 2rem) !important;
    letter-spacing: -0.025em;
    text-shadow: none !important;
    animation: none !important;
    background: linear-gradient(110deg, #a9f1ff 5%, #9eb4ff 55%, #c1adff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.ar-auth-page .ar-form-panel .logo p,
.ar-auth-page .ar-form-panel .login-card .sub {
    color: rgba(230,239,255,.65) !important;
    font-size: .93rem !important;
    line-height: 1.55;
}

.ar-auth-page .ar-form-panel .auth-tabs {
    padding: 5px;
    border: 1px solid rgba(143,216,255,.16);
    border-radius: 12px;
    background: rgba(255,255,255,.028);
}

.ar-auth-page .ar-form-panel .tab-btn {
    min-height: 44px;
    color: rgba(236,244,255,.68);
    border-radius: 8px;
}

.ar-auth-page .ar-form-panel .tab-btn.active {
    color: #fff;
    background:
        radial-gradient(circle at 24% 20%, rgba(54,217,255,.22), transparent 38%),
        radial-gradient(circle at 78% 82%, rgba(184,162,255,.18), transparent 42%),
        #111421;
    box-shadow: inset 0 0 0 1px rgba(119,226,255,.28), 0 8px 24px rgba(0,0,0,.28);
}

.ar-auth-page .ar-form-panel .form-group label,
.ar-auth-page .ar-form-panel .fg label {
    color: rgba(239,245,255,.82);
    font-weight: 650;
}

.ar-auth-page .ar-form-panel .form-group input,
.ar-auth-page .ar-form-panel .form-group select,
.ar-auth-page .ar-form-panel .fg input {
    min-height: 48px;
    color: #f8fbff !important;
    border: 1px solid rgba(143,216,255,.2) !important;
    border-radius: 10px !important;
    background: rgba(3,5,10,.68) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.ar-auth-page .ar-form-panel .form-group input:focus,
.ar-auth-page .ar-form-panel .form-group select:focus,
.ar-auth-page .ar-form-panel .fg input:focus {
    outline: 2px solid rgba(54,217,255,.9) !important;
    outline-offset: 2px;
    border-color: rgba(54,217,255,.65) !important;
    background: rgba(5,10,18,.9) !important;
    box-shadow: 0 0 0 4px rgba(54,217,255,.08), 0 12px 30px rgba(0,0,0,.2) !important;
    transform: none !important;
}

.ar-auth-page .ar-form-panel .form-group input::placeholder,
.ar-auth-page .ar-form-panel .fg input::placeholder {
    color: rgba(214,225,244,.42);
}

.ar-auth-page .ar-form-panel .btn:not(.google-btn):not(.btn-secondary):not(.ghost) {
    min-height: 50px;
    color: #06111c;
    border: 1px solid transparent;
    border-radius: 11px;
    background: linear-gradient(128deg, #84e4ff 0%, #9eb4ff 55%, #b8a2ff 100%);
    box-shadow: 0 14px 36px rgba(103,220,255,.14), 0 8px 24px rgba(143,116,255,.1);
}

.ar-auth-page .ar-form-panel .btn:not(.google-btn):not(.btn-secondary):not(.ghost):hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 18px 40px rgba(103,220,255,.18), 0 10px 28px rgba(143,116,255,.14);
}

.ar-auth-page .ar-form-panel .btn:not(.google-btn):not(.btn-secondary):not(.ghost):not(.loading)::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    padding: 1.5px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(
        from var(--ar-auth-glow-angle),
        rgba(103,228,255,.08) 0deg,
        rgba(103,228,255,.92) 40deg,
        rgba(86,225,174,.72) 116deg,
        rgba(255,255,255,.04) 164deg,
        rgba(167,145,255,.9) 224deg,
        rgba(191,102,255,.68) 306deg,
        rgba(103,228,255,.08) 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ar-auth-border-orbit 6.4s linear infinite;
}

.ar-auth-page .ar-form-panel .google-btn,
.ar-auth-page .ar-form-panel .btn-secondary,
.ar-auth-page .ar-form-panel .btn.ghost {
    min-height: 48px;
    color: rgba(242,248,255,.9);
    border: 1px solid rgba(143,216,255,.2);
    background: rgba(255,255,255,.035);
}

.ar-auth-page a:focus-visible,
.ar-auth-page button:focus-visible {
    outline: 2px solid var(--ar-auth-cyan);
    outline-offset: 3px;
}

.ar-auth-page .back-to-home,
.ar-auth-page .back-link {
    top: 18px;
    left: 20px;
    min-height: 44px;
    border-radius: 10px;
    color: rgba(239,246,255,.76);
    background: rgba(6,8,14,.72);
    border: 1px solid rgba(143,216,255,.19);
    box-shadow: 0 12px 30px rgba(0,0,0,.24);
}

/* The affiliate signup carries the shared marketing header. Match the exact
   cool cyan-to-violet action surface used by the homepage enterprise system. */
.ar-auth-page--affiliate-signup .nav-cta {
    color: #06111c !important;
    border-color: transparent !important;
    background: linear-gradient(128deg, #84e4ff 0%, #9eb4ff 55%, #b8a2ff 100%) !important;
    box-shadow: 0 14px 36px rgba(103,220,255,.14), 0 8px 24px rgba(143,116,255,.1) !important;
}

.ar-auth-page--affiliate-signup .nav-brand-text {
    background: linear-gradient(110deg, #a9f1ff 5%, #9eb4ff 55%, #c1adff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.ar-auth-page--affiliate-signup .back-link {
    top: 86px;
}

.ar-auth-page .ar-form-panel .footer-text,
.ar-auth-page .ar-form-panel .honesty-line,
.ar-auth-page .ar-form-panel .field-hint,
.ar-auth-page .ar-form-panel .login-links {
    color: rgba(221,231,248,.56);
}

.ar-auth-page .ar-form-panel .footer-text a,
.ar-auth-page .ar-form-panel .honesty-line a,
.ar-auth-page .ar-form-panel .login-links a,
.ar-auth-page .ar-form-panel .login-links button {
    color: #72e4ff;
}

@media (max-width: 1020px) {
    .ar-auth-page .auth-experience,
    .ar-auth-page .login-wrap.active {
        grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
    }

    .ar-brand-panel {
        padding-inline: 42px;
    }

    .ar-brand-panel h2 {
        font-size: clamp(2rem, 4.5vw, 3.1rem);
    }

    .ar-capability-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .ar-auth-page .auth-experience,
    .ar-auth-page .login-wrap.active {
        grid-template-columns: 1fr;
        min-height: 100svh;
    }

    .ar-auth-page .auth-experience > .ar-brand-panel,
    .ar-auth-page .auth-experience > .ar-form-panel {
        grid-column: 1;
        grid-row: auto;
    }

    .ar-auth-page--affiliate-signup .auth-experience {
        padding-top: 64px;
    }

    .ar-brand-panel {
        min-height: 310px;
        padding: 86px 22px 34px;
        border-right: 0;
        border-bottom: 1px solid rgba(143,216,255,.12);
    }

    .ar-auth-page--affiliate-signup .ar-brand-panel {
        padding-top: 92px;
    }

    .ar-brand-panel-inner,
.ar-auth-page--affiliate-signup .ar-brand-panel-inner {
        position: relative;
        top: auto;
        display: grid;
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 0 24px;
        align-items: center;
        margin: auto;
    }

    .ar-brand-lockup {
        grid-row: 1 / span 3;
        width: 100px;
        margin: 0;
    }

    .ar-eyebrow { margin: 0 0 8px; }
    .ar-brand-panel h2 { font-size: clamp(1.65rem, 7vw, 2.45rem); }
    .ar-brand-copy { margin-top: 10px; font-size: .95rem; line-height: 1.55; }
    .ar-capability-list { display: none; }

    .ar-form-panel {
        padding: 34px 18px 54px;
    }

    .ar-auth-page .ar-form-panel .auth-container,
    .ar-auth-page .ar-form-panel .login-card,
    .ar-auth-page .ar-form-panel .card {
        width: min(100%, 560px);
        max-width: 560px;
    }

    .ar-auth-page .back-to-home,
    .ar-auth-page .back-link {
        top: 12px;
        left: 12px;
    }

    .ar-auth-page--affiliate-signup .back-link { top: 74px; }
}

.ar-auth-page--affiliate-signup .ar-brand-panel {
    align-items: flex-start;
}

.ar-auth-page--affiliate-signup .ar-brand-panel-inner {
    top: 0;
}

.ar-auth-page--restaurant .ar-brand-panel,
.ar-auth-page--affiliate-login .ar-brand-panel {
    padding-block: 48px;
}

.ar-auth-page--restaurant .ar-brand-lockup,
.ar-auth-page--affiliate-login .ar-brand-lockup,
.ar-auth-page--affiliate-signup .ar-brand-lockup {
    width: clamp(178px, 16vw, 214px);
    margin-bottom: 24px;
}

.ar-auth-page--restaurant .ar-brand-panel h2,
.ar-auth-page--affiliate-login .ar-brand-panel h2,
.ar-auth-page--affiliate-signup .ar-brand-panel h2 {
    font-size: clamp(2.15rem, 3.45vw, 3.3rem);
}

.ar-auth-page--restaurant .ar-brand-copy,
.ar-auth-page--affiliate-login .ar-brand-copy,
.ar-auth-page--affiliate-signup .ar-brand-copy {
    margin-top: 16px;
}

.ar-auth-page--restaurant .ar-capability-list,
.ar-auth-page--affiliate-login .ar-capability-list,
.ar-auth-page--affiliate-signup .ar-capability-list {
    margin-top: 20px;
}

/* Long signup forms must not stretch and vertically center the left story
   below the fold. Pin that panel to the viewport while the form scrolls. */
@media (min-width: 821px) {
    .ar-auth-page--restaurant .ar-brand-panel {
        position: sticky;
        top: 0;
        align-self: start;
        height: 100svh;
        min-height: 640px;
        align-items: center;
    }

    .ar-auth-page--affiliate-signup .ar-brand-panel {
        position: sticky;
        top: 72px;
        align-self: start;
        height: calc(100svh - 72px);
        min-height: 640px;
        align-items: center;
    }

    .ar-auth-page--affiliate-signup .ar-brand-panel-inner {
        position: relative;
        top: auto;
    }
}

@media (max-width: 820px) {
    .ar-auth-page .auth-experience::before,
    .ar-auth-page .login-wrap.active::before {
        background-position: 34% center;
    }

    .ar-auth-page--restaurant .ar-brand-panel,
    .ar-auth-page--affiliate-login .ar-brand-panel,
    .ar-auth-page--affiliate-signup .ar-brand-panel {
        padding: 86px 22px 34px;
    }

    .ar-auth-page--affiliate-signup .ar-brand-panel {
        padding-top: 92px;
    }

    .ar-auth-page--restaurant .ar-brand-lockup,
    .ar-auth-page--affiliate-login .ar-brand-lockup,
    .ar-auth-page--affiliate-signup .ar-brand-lockup {
        width: 110px;
        margin: 0;
    }

    .ar-auth-page--restaurant .ar-brand-panel h2,
    .ar-auth-page--affiliate-login .ar-brand-panel h2,
    .ar-auth-page--affiliate-signup .ar-brand-panel h2 {
        font-size: clamp(1.65rem, 7vw, 2.45rem);
    }

    .ar-auth-page--restaurant .ar-brand-copy,
    .ar-auth-page--affiliate-login .ar-brand-copy,
    .ar-auth-page--affiliate-signup .ar-brand-copy {
        margin-top: 10px;
    }
}

@media (max-width: 520px) {
    .ar-brand-panel {
        min-height: 285px;
        padding: 76px 18px 28px;
    }

    .ar-auth-page--affiliate-signup .ar-brand-panel {
        padding-top: 88px;
    }

    .ar-brand-panel-inner,
    .ar-auth-page--affiliate-signup .ar-brand-panel-inner {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 0 18px;
    }

    .ar-auth-page--restaurant .ar-brand-lockup,
    .ar-auth-page--affiliate-login .ar-brand-lockup,
    .ar-auth-page--affiliate-signup .ar-brand-lockup {
        width: 88px;
        transform: translateX(-4px);
    }
    .ar-eyebrow { font-size: .66rem; letter-spacing: .11em; }
    .ar-eyebrow::before { width: 18px; }
    .ar-brand-panel h2 { font-size: 1.52rem; line-height: 1.1; }
    .ar-brand-copy { font-size: .86rem; }

    .ar-form-panel { padding-inline: 12px; }

    .ar-auth-page .ar-form-panel .auth-container,
    .ar-auth-page .ar-form-panel .login-card,
    .ar-auth-page .ar-form-panel .card {
        padding: 26px 20px !important;
        border-radius: 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ar-auth-page *,
    .ar-auth-page *::before,
    .ar-auth-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}