/*
 * AICOUNTLY — authentication portal design system.
 *
 * Shared by the login screen and the post-login "Jump To" launcher so the two
 * read as one product. Self-contained on purpose: these two pages no longer pull
 * in the 700 KB admin theme or Bootstrap, both of which were loaded only to
 * style a handful of form controls.
 */

:root {
    --aicountly-green: #25b003;
    --aicountly-green-dark: #1e9502;
    --aicountly-green-light: #effbed;

    --text-primary: #161b22;
    --text-secondary: #667085;
    --text-muted: #98a2b3;

    --border-light: #e5e7eb;
    --surface: #ffffff;
    --surface-soft: #f8faf9;

    --danger: #e5484d;
    --danger-soft: #fdf2f3;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    --shadow-soft: 0 10px 35px rgba(16, 24, 40, 0.06);

    --font-sans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, 'Helvetica Neue', Arial, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body.aic-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

.aic-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(ellipse 60% 45% at 0% 0%, rgba(37, 176, 3, 0.10), transparent 70%),
        radial-gradient(ellipse 55% 40% at 100% 100%, rgba(37, 176, 3, 0.07), transparent 70%),
        #ffffff;
}

/*
 * The dot grid in the approved design is a corner motif. As a background layer
 * it tiles the whole viewport — including through the card and the footer — so
 * it is a masked pseudo-element instead, sized to the corner and faded out well
 * before it reaches the login card.
 */
.aic-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: min(430px, 32vw);
    height: min(300px, 34vh);
    background-image: radial-gradient(circle at center, rgba(37, 176, 3, 0.22) 1px, transparent 1.3px);
    background-size: 17px 17px;
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 0% 0%, #000 20%, transparent 72%);
    mask-image: radial-gradient(ellipse 100% 100% at 0% 0%, #000 20%, transparent 72%);
    pointer-events: none;
    z-index: -1;
}

.aic-brand-text {
    color: var(--aicountly-green);
}

/* Anything only a screen reader should reach. */
.aic-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------- header -- */

.aic-topbar {
    position: relative;
    width: min(1240px, calc(100% - 32px));
    margin: 0 auto;
    padding: 15px 0 6px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.aic-topbar__logo {
    grid-column: 2;
    justify-self: center;
    /* It is a <p> for document outline reasons; the UA margin around it was
       adding 30px of dead space above and below the logo. */
    margin: 0;
}

.aic-topbar__logo img {
    display: block;
    width: 112px;
    max-width: 100%;
    height: auto;
}

.aic-topbar__actions {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
}

.aic-region {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.aic-region svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

.aic-region select {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    padding-right: 16px;
    cursor: pointer;
    outline: none;
}

.aic-region::after {
    content: '';
    position: absolute;
    right: 14px;
    width: 7px;
    height: 7px;
    border-right: 1.6px solid var(--text-muted);
    border-bottom: 1.6px solid var(--text-muted);
    transform: translateY(-2px) rotate(45deg);
    pointer-events: none;
}

.aic-region select:focus-visible {
    outline: 3px solid rgba(37, 176, 3, 0.18);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ----------------------------------------------------------------- login -- */

.aic-auth-shell {
    flex: 1;
    width: min(1240px, calc(100% - 32px));
    margin: 0 auto;
    padding: 6px 0 4px;
    display: flex;
    align-items: center;
}

.aic-auth-card {
    width: 100%;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.aic-brand-panel {
    padding: 30px 34px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background:
        radial-gradient(circle at 88% 12%, rgba(37, 176, 3, 0.07), transparent 42%),
        linear-gradient(135deg, #ffffff 0%, #fdfffd 60%, #f5fbf3 100%);
}

.aic-badge {
    align-self: flex-start;
    padding: 7px 14px;
    background: var(--aicountly-green-light);
    border: 1px solid rgba(37, 176, 3, 0.18);
    border-radius: 999px;
    color: var(--aicountly-green-dark);
    font-size: 13px;
    font-weight: 700;
}

.aic-brand-panel h1 {
    margin: 0;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.aic-brand-panel__lead {
    margin: -8px 0 0;
    max-width: 34ch;
    color: var(--text-secondary);
}

.aic-brand-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 24px;
    /* When the sign-in column is the taller of the two, the leftover height in
       this panel would otherwise pool as one gap above the trust badge. Let the
       split absorb it and centre inside, so the slack reads as breathing room
       rather than a hole. */
    flex: 1 1 auto;
    align-content: center;
}

.aic-benefits {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aic-benefit {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.aic-benefit__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--aicountly-green-light);
    color: var(--aicountly-green-dark);
}

.aic-benefit__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.aic-benefit__copy {
    margin: 2px 0 0;
    font-size: 13.5px;
    color: var(--text-secondary);
}

.aic-brand-art {
    justify-self: center;
}

.aic-brand-art img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
}

.aic-trust {
    /* Sits on the floor of the panel, so the column does not end in dead space
       when the form beside it is taller. */
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}

/*
 * Overlapping avatars and the count pill.
 *
 * Drawn in CSS rather than shipped as photographs: the design calls for a row of
 * faces, and using stock portraits of people who are not customers would put
 * invented individuals on the sign-in page. These read as avatars at this size
 * without claiming to be anyone.
 */
.aic-trust__faces {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.aic-face {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    margin-right: -10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
}

.aic-face--1 { background: linear-gradient(145deg, #f0b8a0, #d98b6b); }
.aic-face--2 { background: linear-gradient(145deg, #a9c4ea, #6d92c9); }
.aic-face--3 { background: linear-gradient(145deg, #f3cf8f, #d9a44f); }

.aic-face--count {
    display: grid;
    place-items: center;
    margin-right: 0;
    font-size: 11px;
    background: var(--aicountly-green);
    color: #ffffff;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.aic-trust__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.aic-trust__copy {
    margin: 1px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.aic-panel-foot__sep {
    margin: 0 6px;
    color: var(--text-muted);
}

.aic-login-panel {
    padding: 30px 34px 26px;
    border-left: 1px solid var(--border-light);
    background: var(--surface);
    display: flex;
    flex-direction: column;
}

.aic-login-panel__head {
    text-align: center;
    margin-bottom: 16px;
}

.aic-login-panel__head h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.aic-login-panel__head p {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 14px;
}

/* -------------------------------------------------------- method tabs ----- */

.aic-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 5px;
    background: var(--surface-soft);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.aic-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.aic-tab[aria-selected='true'] {
    background: var(--surface);
    border-color: rgba(37, 176, 3, 0.45);
    color: var(--aicountly-green-dark);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.aic-tab:focus-visible,
.aic-btn:focus-visible,
.aic-link:focus-visible,
.aic-social:focus-visible {
    outline: 3px solid rgba(37, 176, 3, 0.2);
    outline-offset: 2px;
}

/* ------------------------------------------------------------- fields ----- */

.aic-field {
    margin-bottom: 13px;
}

.aic-label {
    display: block;
    margin-bottom: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.aic-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.aic-input-wrap__icon {
    position: absolute;
    left: 14px;
    display: flex;
    color: var(--text-muted);
    pointer-events: none;
}

.aic-input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font: inherit;
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.aic-input-wrap__icon ~ .aic-input {
    padding-left: 44px;
}

.aic-input::placeholder {
    color: var(--text-muted);
}

.aic-input:focus {
    border-color: rgba(37, 176, 3, 0.65);
    box-shadow: 0 0 0 4px rgba(37, 176, 3, 0.09);
}

.aic-input[type='password'],
.aic-input.aic-input--toggle {
    padding-right: 48px;
}

/* Number-style inputs must not grow spinners — OTP codes are typed, not stepped. */
.aic-input::-webkit-outer-spin-button,
.aic-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.aic-input[type='number'] {
    -moz-appearance: textfield;
}

.aic-reveal {
    position: absolute;
    right: 6px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.aic-reveal:hover {
    color: var(--text-secondary);
}

.aic-reveal:focus-visible {
    outline: 3px solid rgba(37, 176, 3, 0.2);
    outline-offset: -1px;
}

.aic-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 16px;
    flex-wrap: wrap;
}

.aic-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}

.aic-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--aicountly-green);
    cursor: pointer;
}

.aic-link {
    color: #2f6fdb;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.aic-link:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------ buttons ----- */

.aic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 11px 20px;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease,
        box-shadow 150ms ease;
}

.aic-btn--primary {
    background: var(--aicountly-green);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(37, 176, 3, 0.22);
}

.aic-btn--primary:hover:not([disabled]) {
    background: var(--aicountly-green-dark);
}

.aic-btn--ghost {
    background: var(--surface);
    border-color: var(--border-light);
    color: var(--text-primary);
    letter-spacing: 0;
    font-weight: 700;
}

.aic-btn--ghost:hover:not([disabled]) {
    border-color: rgba(37, 176, 3, 0.4);
    background: var(--surface-soft);
}

.aic-btn[disabled] {
    opacity: 0.62;
    cursor: not-allowed;
    box-shadow: none;
}

.aic-btn__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: aic-spin 700ms linear infinite;
}

@keyframes aic-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .aic-btn__spinner {
        animation-duration: 2s;
    }
}

.aic-btn-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* -------------------------------------------------------------- social ---- */

.aic-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 16px 0 14px;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.aic-divider::before,
.aic-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

.aic-social-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.aic-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 8px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}

.aic-social:hover {
    border-color: rgba(37, 176, 3, 0.35);
    background: var(--surface-soft);
}

.aic-social img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.aic-safety {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 0;
    color: var(--text-muted);
    font-size: 12.5px;
}

.aic-fineprint {
    margin: 14px 0 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-muted);
}

.aic-panel-foot {
    margin: 12px 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
}

/* ------------------------------------------------------ step sub-panels --- */

.aic-step__title {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
}

.aic-step__lead {
    margin: 0 0 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

.aic-step__lead strong {
    color: var(--text-primary);
}

.aic-choice-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.aic-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font: inherit;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}

.aic-choice:hover {
    border-color: rgba(37, 176, 3, 0.35);
    background: var(--surface-soft);
}

.aic-choice:focus-visible {
    outline: 3px solid rgba(37, 176, 3, 0.2);
    outline-offset: 2px;
}

.aic-choice img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.aic-account-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aic-account {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font: inherit;
    color: inherit;
    transition: border-color 150ms ease, background 150ms ease;
}

.aic-account:hover {
    border-color: rgba(37, 176, 3, 0.35);
    background: var(--surface-soft);
}

.aic-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--aicountly-green-light);
    color: var(--aicountly-green-dark);
    font-weight: 800;
    font-size: 14px;
}

.aic-account__name {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
}

.aic-account__meta {
    margin: 1px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* ------------------------------------------------------------- alerts ----- */

.aic-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    margin-bottom: 16px;
    border-radius: var(--radius-md);
    border: 1px solid;
    font-size: 14px;
}

.aic-alert--error {
    background: var(--danger-soft);
    border-color: rgba(229, 72, 77, 0.35);
    color: #8f2226;
}

.aic-alert--success {
    background: var(--aicountly-green-light);
    border-color: rgba(37, 176, 3, 0.3);
    color: #1a6b00;
}

.aic-alert__close {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

/*
 * Server-rendered flash messages.
 *
 * App\Libraries\message_output emits `.alert-success-custom` / `.alert-error-custom`
 * with a Bootstrap `.btn-close`, and it is shared with views that still load the
 * admin theme — so rather than change the library, these map its markup onto the
 * same alert this page draws for client-side messages.
 */
.alert-success-custom,
.alert-error-custom {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    margin-bottom: 16px;
    border-radius: var(--radius-md);
    border: 1px solid;
    font-size: 14px;
}

.alert-success-custom {
    background: var(--aicountly-green-light);
    border-color: rgba(37, 176, 3, 0.3);
    color: #1a6b00;
}

.alert-error-custom {
    background: var(--danger-soft);
    border-color: rgba(229, 72, 77, 0.35);
    color: #8f2226;
}

/* The library ships Bootstrap-icon <i> elements; no icon font is loaded here. */
.alert-success-custom > .bi,
.alert-error-custom > .bi {
    display: none;
}

.alert-success-custom .btn-close,
.alert-error-custom .btn-close {
    margin-left: auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    position: relative;
}

.alert-success-custom .btn-close::before,
.alert-error-custom .btn-close::before {
    content: '\00d7';
    font-size: 18px;
    line-height: 1;
}

.alert-success-custom .btn-close:focus-visible,
.alert-error-custom .btn-close:focus-visible,
.aic-alert__close:focus-visible {
    outline: 3px solid rgba(37, 176, 3, 0.2);
    outline-offset: 2px;
}

/* ------------------------------------------------------------- footer ----- */

.aic-footer {
    width: min(1240px, calc(100% - 32px));
    margin: 0 auto;
    padding: 16px 0 18px;
    text-align: center;
}

.aic-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 4px;
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.aic-footer__links a {
    color: var(--text-secondary);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 4px;
}

.aic-footer__links a:hover {
    color: var(--aicountly-green-dark);
    text-decoration: underline;
}

.aic-footer__links a:focus-visible {
    outline: 3px solid rgba(37, 176, 3, 0.2);
    outline-offset: 1px;
}

.aic-footer__note {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1024px) {
    .aic-brand-panel {
        padding: 34px 30px;
    }

    .aic-login-panel {
        padding: 34px 28px 30px;
    }

    .aic-brand-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .aic-brand-art {
        display: none;
    }
}

@media (max-width: 880px) {
    .aic-auth-card {
        grid-template-columns: minmax(0, 1fr);
    }

    /*
     * Sign-in first on a small screen. The brand panel is worth reading, but not
     * ahead of the fields the user opened this page to fill in, so it is moved
     * below the form rather than scrolled past.
     */
    .aic-login-panel {
        order: 1;
        border-left: 0;
        border-bottom: 1px solid var(--border-light);
    }

    .aic-brand-panel {
        order: 2;
    }

    .aic-brand-art {
        display: block;
        max-width: 220px;
    }
}

@media (max-width: 560px) {
    .aic-topbar {
        padding-top: 18px;
        grid-template-columns: 1fr auto;
        row-gap: 14px;
    }

    .aic-topbar__logo {
        grid-column: 1;
        justify-self: start;
    }

    .aic-topbar__actions {
        grid-column: 2;
    }

    .aic-topbar__logo img {
        width: 122px;
    }

    .aic-auth-shell {
        width: calc(100% - 22px);
    }

    .aic-auth-card {
        border-radius: var(--radius-lg);
    }

    .aic-login-panel {
        padding: 26px 18px 24px;
    }

    .aic-brand-panel {
        padding: 26px 18px;
    }

    .aic-social-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .aic-social {
        min-height: 46px;
    }
}

/* ---------------------------------------------------- short viewports ----- */

/*
 * The card is the thing the user came for, so on a short screen it has to be
 * readable without scrolling to reach the sign-in button. These two tiers trade
 * whitespace — never a field, a control or a line of copy — for height.
 *
 * Scoped to `min-width: 881px`: below that the card stacks into a single column
 * and is scrollable by design, and these rules would fight the mobile layout.
 */

@media (min-width: 881px) and (max-height: 820px) {
    .aic-topbar {
        padding: 11px 0 5px;
    }

    .aic-topbar__logo img {
        width: 100px;
    }

    .aic-auth-shell {
        padding: 4px 0 3px;
    }

    .aic-brand-panel {
        padding: 20px 30px 18px;
        gap: 13px;
    }

    .aic-login-panel {
        padding: 20px 30px 18px;
    }

    /* The illustration is decoration; the benefits list beside it sets the
       column's useful height, so the art shrinks to match rather than
       stretching the card past it. */
    .aic-brand-art img {
        max-width: 230px;
    }

    .aic-trust {
        padding: 10px 14px;
    }

    .aic-login-panel__head {
        margin-bottom: 10px;
    }

    .aic-tabs {
        margin-bottom: 10px;
    }

    .aic-field {
        margin-bottom: 11px;
    }

    .aic-input {
        height: 44px;
    }

    .aic-btn {
        min-height: 44px;
    }

    .aic-form-row {
        margin: 2px 0 13px;
    }

    .aic-divider {
        margin: 13px 0 11px;
    }

    .aic-safety {
        margin-top: 11px;
    }

    .aic-panel-foot {
        margin-top: 8px;
    }

    .aic-footer {
        padding: 6px 0 8px;
    }

    .aic-footer__note {
        margin-top: 6px;
    }
}

@media (min-width: 881px) and (max-height: 700px) {
    .aic-topbar {
        padding: 8px 0 4px;
    }

    .aic-topbar__logo img {
        width: 92px;
    }

    .aic-auth-shell {
        padding: 3px 0 2px;
    }

    .aic-brand-panel {
        padding: 18px 26px 16px;
        gap: 11px;
    }

    .aic-login-panel {
        padding: 18px 26px 16px;
    }

    .aic-badge {
        padding: 5px 12px;
        font-size: 12.5px;
    }

    .aic-brand-panel h1 {
        font-size: clamp(24px, 2.4vw, 31px);
    }

    .aic-brand-panel__lead {
        margin-top: -5px;
        font-size: 14px;
    }

    .aic-brand-split {
        gap: 18px;
    }

    .aic-brand-art img {
        max-width: 195px;
    }

    .aic-benefits {
        gap: 10px;
    }

    .aic-benefit__icon {
        width: 34px;
        height: 34px;
    }

    .aic-benefit__copy {
        font-size: 13px;
    }

    .aic-trust {
        padding: 8px 13px;
    }

    .aic-login-panel__head {
        margin-bottom: 10px;
    }

    .aic-login-panel__head h2 {
        font-size: 22px;
    }

    .aic-login-panel__head p {
        margin-top: 4px;
        font-size: 13.5px;
    }

    .aic-tabs {
        padding: 4px;
        margin-bottom: 10px;
    }

    .aic-tab {
        padding: 8px 12px;
    }

    .aic-label {
        margin-bottom: 5px;
    }

    .aic-field {
        margin-bottom: 9px;
    }

    .aic-input {
        height: 42px;
    }

    .aic-form-row {
        margin: 2px 0 10px;
    }

    .aic-btn {
        min-height: 42px;
        padding: 9px 20px;
    }

    .aic-divider {
        margin: 10px 0 9px;
    }

    .aic-social {
        min-height: 40px;
        padding: 8px;
    }

    .aic-safety {
        margin-top: 8px;
    }

    .aic-panel-foot {
        margin-top: 7px;
    }

    .aic-footer {
        padding: 8px 0 10px;
    }

    .aic-footer__note {
        margin-top: 5px;
    }
}

@media (min-width: 881px) and (max-height: 640px) {
    .aic-topbar {
        padding: 5px 0 3px;
    }

    .aic-topbar__logo img {
        width: 84px;
    }

    .aic-brand-panel {
        padding: 12px 24px 11px;
        gap: 9px;
    }

    .aic-login-panel {
        padding: 12px 24px 11px;
    }

    .aic-brand-panel h1 {
        font-size: clamp(22px, 2.1vw, 27px);
    }

    .aic-brand-art img {
        max-width: 165px;
    }

    .aic-benefits {
        gap: 8px;
    }

    .aic-benefit__icon {
        width: 30px;
        height: 30px;
    }

    .aic-login-panel__head {
        margin-bottom: 8px;
    }

    .aic-login-panel__head h2 {
        font-size: 20px;
    }

    .aic-tabs {
        margin-bottom: 8px;
    }

    .aic-tab {
        padding: 7px 12px;
    }

    .aic-field {
        margin-bottom: 5px;
    }

    .aic-input {
        height: 38px;
    }

    .aic-form-row {
        margin: 1px 0 8px;
    }

    .aic-btn {
        min-height: 38px;
    }

    .aic-divider {
        margin: 7px 0 6px;
    }

    .aic-social {
        min-height: 36px;
    }

    .aic-safety {
        margin-top: 5px;
    }

    .aic-panel-foot {
        margin-top: 5px;
    }

    .aic-footer {
        padding: 4px 0 6px;
    }

    .aic-footer__note {
        margin-top: 4px;
    }
}