.login-mobile-page {
    --login-green: #176b4b;
    --login-canvas: #fff5df;
    --login-deep: #173f31;
    --login-cream: #fffdf8;
    --login-pink: #f29ab4;
}

@media (min-width: 761px) {
    .public-portal:not(.public-portal--home) .shell-main:has(.login-mobile-page) {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .public-portal .page-section.login-mobile-page {
        min-height: calc(100vh - 180px);
        padding: 48px 0 64px;
        background: var(--login-canvas);
    }

    .login-mobile-page .auth-shell {
        min-height: 0;
        place-items: stretch;
    }

    .login-mobile-page .auth-card {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        width: min(100%, 1080px);
        margin: 0 auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .login-mobile-page .auth-lead {
        grid-column: 1 / -1;
        display: grid;
        justify-items: start;
        gap: 8px;
        margin-bottom: 8px;
    }

    .login-mobile-page .auth-lead__brand {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 8px;
        color: var(--login-deep);
        font: 800 12px/1.2 var(--font-sans);
    }

    .login-mobile-page .auth-lead__brand img {
        width: 72px;
        height: 72px;
        padding: 4px;
        border-radius: 50%;
        background: var(--login-cream);
        object-fit: contain;
    }

    .login-mobile-page .auth-lead h1 {
        margin: 0;
        color: var(--login-green);
        font: 400 52px/0.96 var(--font-graphic);
        text-transform: uppercase;
    }

    .login-mobile-page .auth-lead p {
        max-width: 610px;
        margin: 0;
        color: var(--login-deep);
        font: 500 15px/1.5 var(--font-sans);
    }

    .login-mobile-page .status-banner,
    .login-mobile-page .auth-divider,
    .login-mobile-page .google-signin-button,
    .login-mobile-page .consumption-card {
        grid-column: 1 / -1;
    }

    .login-mobile-page .auth-form--email,
    .login-mobile-page .phone-auth-card {
        align-content: start;
        min-width: 0;
        min-height: 346px;
        margin: 0;
        padding: 28px;
        border: 2px solid color-mix(in srgb, var(--login-green) 50%, var(--login-cream) 50%);
        border-radius: 8px;
        background: var(--login-cream);
        box-shadow: none;
    }

    .login-mobile-page .auth-form--email {
        grid-column: 1;
        gap: 16px;
    }

    .login-mobile-page .phone-auth-card {
        grid-column: 2;
        gap: 16px;
    }

    .login-mobile-page .auth-form__intro span,
    .login-mobile-page .phone-auth-card__copy span {
        color: var(--login-deep);
        font: 800 11px/1.2 var(--font-sans);
        text-transform: uppercase;
    }

    .login-mobile-page .auth-form__intro h2,
    .login-mobile-page .phone-auth-card__copy h2 {
        margin: 0;
        color: var(--login-deep);
        font: 400 29px/1 var(--font-graphic);
        text-transform: uppercase;
    }

    .login-mobile-page .phone-auth-card__copy p {
        max-width: 42ch;
        margin: 3px 0 0;
        color: var(--login-deep);
        font: 500 13px/1.45 var(--font-sans);
    }

    .login-mobile-page .field-group label {
        color: var(--login-deep);
        font: 400 15px/1 var(--font-graphic);
        text-transform: uppercase;
    }

    .login-mobile-page .text-input,
    .login-mobile-page .phone-input-shell {
        min-height: 48px;
        border: 2px solid var(--login-canvas);
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.6);
        color: var(--login-deep);
        font: 600 15px/1.2 var(--font-sans);
    }

    .login-mobile-page .phone-input-shell {
        overflow: hidden;
    }

    .login-mobile-page .phone-input-shell .phone-input-shell__input {
        min-height: 44px;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .login-mobile-page .phone-input-shell__country {
        border-right: 2px solid var(--login-canvas);
        background: color-mix(in srgb, var(--login-cream) 70%, white 30%);
        color: var(--login-deep);
    }

    .login-mobile-page .field-hint {
        color: color-mix(in srgb, var(--login-deep) 76%, white 24%);
        font-size: 12px;
    }

    .login-mobile-page .auth-form--email .panel-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 2px;
    }

    .login-mobile-page .auth-form--phone,
    .login-mobile-page .auth-form--phone-verify {
        gap: 16px;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .login-mobile-page .button {
        min-height: 46px;
        justify-content: center;
        border: 2px solid var(--login-canvas);
        border-radius: 6px;
        font: 400 17px/1 var(--font-graphic);
        text-transform: uppercase;
    }

    .login-mobile-page .button--primary {
        background: var(--login-green);
        color: var(--login-cream);
        box-shadow: 3px 3px 0 var(--login-deep);
    }

    .login-mobile-page .button--secondary {
        background: transparent;
        color: var(--login-deep);
    }

    .login-mobile-page .auth-form--phone .button,
    .login-mobile-page .auth-form--phone-verify .button {
        width: 100%;
    }

    .login-mobile-page .google-signin-button {
        width: min(100%, 420px);
        justify-self: center;
        border: 2px solid var(--login-cream);
        border-radius: 6px;
        background: var(--login-cream);
        color: var(--login-deep);
    }

    .login-mobile-page .auth-divider {
        color: var(--login-deep);
    }

    .login-mobile-page :is(input, button, a):focus-visible {
        outline: 3px solid var(--login-pink);
        outline-offset: 2px;
    }

    .login-mobile-page .consumption-card {
        gap: 10px;
        margin-top: 12px;
        padding: 24px 0 0;
        border: 0;
        border-top: 1px solid color-mix(in srgb, var(--login-green) 24%, transparent);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .login-mobile-page .consumption-card > strong {
        color: var(--login-green);
        font: 400 23px/1 var(--font-graphic);
        text-transform: uppercase;
    }

    .login-mobile-page .consumption-card > p {
        color: var(--login-deep);
        font-size: 13px;
    }

    .login-mobile-page .seeded-access-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 6px;
    }

    .login-mobile-page .seeded-access-item {
        min-width: 0;
        gap: 12px;
        padding: 12px 14px;
        border: 1px solid color-mix(in srgb, var(--login-green) 25%, white 75%);
        border-radius: 6px;
        background: var(--login-cream);
    }

    .login-mobile-page .seeded-access-item__meta {
        min-width: 0;
    }

    .login-mobile-page .seeded-access-item__meta strong {
        color: var(--login-deep);
        font-size: 13px;
    }

    .login-mobile-page .seeded-access-item__meta span {
        overflow: hidden;
        color: color-mix(in srgb, var(--login-deep) 75%, white 25%);
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .login-mobile-page .seeded-access-item .button {
        flex: none;
        min-height: 36px;
        padding: 6px 10px;
        font: 700 11px/1.2 var(--font-sans);
        text-transform: none;
    }
}

@media (min-width: 761px) and (max-width: 980px) {
    .login-mobile-page .auth-form--email,
    .login-mobile-page .phone-auth-card {
        padding: 20px;
    }

    .login-mobile-page .auth-form--email .panel-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .login-mobile-page {
        --oh-mobile-green: var(--login-green);
        --oh-mobile-green-dark: var(--login-deep);
        --oh-mobile-cream: var(--login-canvas);
    }

    .public-portal .page-section.login-mobile-page {
        background: var(--login-canvas);
    }

    .login-mobile-page .auth-lead__brand,
    .login-mobile-page .auth-lead p {
        display: none;
    }
}