/* ============================================================================
 * Ordolio Login Redesign (Circle 3 — showcase pages)
 *
 * Everything scoped under `body.login-2026` so this file is dead weight on
 * any page that doesn't opt in. Override the legacy external-card chrome
 * (kt-portlet wrappers, .external_card_container fixed widths) and lay out
 * a two-column hero + form panel using the new design tokens.
 *
 * DOM hooks preserved (login.js depends on these):
 *   .login-method-card[data-method], #magic_link-login, #password-login,
 *   .login-back-btn, #login-method-selection, .login-method-selection,
 *   data-testid attributes.
 * ========================================================================== */

/* ----- Reset legacy external-card chrome for this page only ---------------- */

body.login-2026 {
    background: var(--ordolio-bg-canvas);
    font-family: var(--ordolio-font-body);
    font-feature-settings: var(--ordolio-font-features);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--ordolio-fg-default);
}

/* Hide the legacy full-bleed banner-image layer system when using the new
   programmatic surface. We still respect the org's custom banner image —
   when set, we'll render it inside the hero panel below. */
body.login-2026 .background-layer,
body.login-2026 .background-overlay {
    display: none !important;
}

/* Neutralise the legacy external_card wrappers for this page.
   The min-height: 100vh chain ensures the split panel fills the viewport
   on desktop. On mobile we want auto-height so the hero + form stack
   naturally — overridden in the bottom @media block. */
body.login-2026 .external_card_container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100%;
    min-height: 100vh;
}
body.login-2026 .external_card {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    min-height: 100vh;
}
body.login-2026 .external_card > .row {
    margin: 0 !important;
    min-height: 100vh;
}
body.login-2026 .external_card > .row > [class*="col-"] {
    padding: 0 !important;
    min-height: 100vh;
}
body.login-2026 .kt-portlet,
body.login-2026 .kt-portlet__body {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 100vh;
}

/* ----- Layout shell -------------------------------------------------------- */

.lp-shell {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
}
@media (min-width: 900px) {
    .lp-shell {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    }
}

/* ----- LEFT panel — hero --------------------------------------------------- */

.lp-hero {
    position: relative;
    overflow: hidden;
    padding: var(--ordolio-space-10) var(--ordolio-space-6);
    /* Grid: 1fr eats available space and vertically centers the content
       block. Single-row grid since we no longer have a footer here — the
       Ordolio attribution moved to the form panel. */
    display: grid;
    text-align: left;
    color: var(--ordolio-fg-default);
    min-height: 220px;
}
.lp-hero > div:first-child {
    align-self: center;
    max-width: 640px;
}
@media (min-width: 900px) {
    .lp-hero {
        padding: var(--ordolio-space-16) var(--ordolio-space-12);
        min-height: 100vh;
    }
}

/* Default — programmatic brand surface (most clubs). */
.lp-hero--programmatic {
    /* uses .bg-brand-surface utility */
}

/* When the club uploaded a login_banner_image we use it as the hero
   backdrop, with a soft scrim to keep the type readable. */
.lp-hero--photo {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
}
.lp-hero--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(11, 12, 16, 0.15) 0%, rgba(11, 12, 16, 0.55) 100%),
        radial-gradient(ellipse 60% 50% at 30% 30%, rgba(11, 12, 16, 0) 0%, rgba(11, 12, 16, 0.35) 80%);
    pointer-events: none;
}
.lp-hero--photo > * {
    position: relative;
    z-index: 1;
}
.lp-hero--photo .lp-hero__eyebrow,
.lp-hero--photo .lp-hero__display,
.lp-hero--photo .lp-hero__org,
.lp-hero--photo .lp-hero__footer,
.lp-hero--photo .lp-hero__footer a {
    color: #fff;
}
.lp-hero--photo .lp-hero__footer {
    border-color: rgba(255, 255, 255, 0.18);
}

.lp-hero__eyebrow {
    display: inline-block;
    font-size: var(--ordolio-text-xs);
    font-weight: var(--ordolio-weight-semibold);
    letter-spacing: var(--ordolio-tracking-caps);
    text-transform: uppercase;
    color: var(--ordolio-default-primary);
    margin: 0 0 var(--ordolio-space-5);
}

.lp-hero__display {
    font-family: var(--ordolio-font-display);
    font-feature-settings: var(--ordolio-font-features);
    font-size: clamp(3rem, 7vw, var(--ordolio-text-7xl));
    line-height: var(--ordolio-leading-tight);
    letter-spacing: var(--ordolio-tracking-display);
    font-weight: var(--ordolio-weight-semibold);
    color: var(--ordolio-fg-default);
    margin: 0 0 var(--ordolio-space-4);
    display: flex;
    flex-direction: column;
}

.lp-hero__org {
    font-family: var(--ordolio-font-display);
    font-size: clamp(1.5rem, 2.5vw, var(--ordolio-text-3xl));
    letter-spacing: var(--ordolio-tracking-tight);
    line-height: var(--ordolio-leading-snug);
    color: var(--ordolio-fg-muted);
    margin: 0 0 var(--ordolio-space-10);
    font-weight: var(--ordolio-weight-medium);
}

.lp-hero__quote {
    max-width: 38ch;
    padding: var(--ordolio-space-5);
    background: color-mix(in srgb, var(--ordolio-bg-surface), transparent 30%);
    border: 1px solid var(--ordolio-border-subtle);
    border-radius: var(--ordolio-radius-xl);
    box-shadow: var(--ordolio-shadow-md);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: var(--ordolio-text-base);
    line-height: var(--ordolio-leading-relaxed);
    color: var(--ordolio-fg-default);
    margin: 0;
}
.lp-hero__quote-body {
    margin: 0 0 var(--ordolio-space-3);
    font-weight: var(--ordolio-weight-medium);
}
.lp-hero__quote-author {
    font-size: var(--ordolio-text-xs);
    color: var(--ordolio-fg-muted);
    text-transform: uppercase;
    letter-spacing: var(--ordolio-tracking-caps);
    margin: 0;
}

.lp-hero__footer {
    margin-top: var(--ordolio-space-12);
    padding-top: var(--ordolio-space-5);
    border-top: 1px solid var(--ordolio-border-subtle);
    font-size: var(--ordolio-text-xs);
    color: var(--ordolio-fg-muted);
    display: flex;
    align-items: center;
    gap: var(--ordolio-space-2);
}
.lp-hero__footer a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--ordolio-border-default);
    text-underline-offset: 3px;
}
.lp-hero__footer a:hover {
    text-decoration-color: var(--ordolio-default-primary);
}

/* ----- RIGHT panel — form -------------------------------------------------- */

.lp-form-panel {
    background: var(--ordolio-bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Extra top + bottom padding leaves room for the absolutely-positioned
       brand row (top) and Ordolio attribution (bottom). */
    padding: var(--ordolio-space-20) var(--ordolio-space-6) var(--ordolio-space-16);
    position: relative;
    text-align: left;
}
@media (min-width: 900px) {
    .lp-form-panel {
        padding: var(--ordolio-space-24) var(--ordolio-space-12) var(--ordolio-space-20);
    }
}

.lp-form {
    width: 100%;
    max-width: 420px;
    text-align: left;
}

/* ----- Panel header (brand row) + footer (Ordolio attribution) ----------- */
/* Anchored to the corners of .lp-form-panel so the centered .lp-form has
   pure form content. Pattern: Linear, Stripe, Vercel. */

body.login-2026 .lp-form__brand {
    position: absolute;
    top: var(--ordolio-space-6);
    left: var(--ordolio-space-6);
    margin: 0;
    z-index: 2;
}
@media (min-width: 900px) {
    body.login-2026 .lp-form__brand {
        top: var(--ordolio-space-10);
        left: var(--ordolio-space-12);
    }
}
/* On mobile the hero already shows the org logo + name — hide the
   redundant brand row in the form panel. */
@media (max-width: 899px) {
    body.login-2026 .lp-form__brand {
        display: none;
    }
}

.lp-panel-footer {
    position: absolute;
    bottom: var(--ordolio-space-6);
    left: var(--ordolio-space-6);
    right: var(--ordolio-space-6);
    font-size: var(--ordolio-text-xs);
    color: var(--ordolio-fg-subtle);
    display: flex;
    align-items: center;
    gap: var(--ordolio-space-2);
    z-index: 2;
}
@media (min-width: 900px) {
    .lp-panel-footer {
        bottom: var(--ordolio-space-10);
        left: var(--ordolio-space-12);
        right: var(--ordolio-space-12);
    }
}
.lp-panel-footer__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ordolio-default-primary);
    flex: 0 0 auto;
}

/* Defeat any inherited text-align: center from the legacy
   .external_card_body wrapper. Done at the leaf level so we can keep
   intentionally-centered bits (registration CTA, demo block) centered. */
body.login-2026 .lp-hero__eyebrow,
body.login-2026 .lp-hero__display,
body.login-2026 .lp-hero__org,
body.login-2026 .lp-hero__quote,
body.login-2026 .lp-hero__footer,
body.login-2026 .lp-form__brand,
body.login-2026 .lp-form__title,
body.login-2026 .lp-form__subtitle {
    text-align: left;
}

.lp-form__brand {
    display: flex;
    align-items: center;
    gap: var(--ordolio-space-3);
    margin-bottom: var(--ordolio-space-8);
}
.lp-form__brand img {
    height: 48px;
    width: 48px;
    object-fit: contain;
    border-radius: var(--ordolio-radius-md);
}
.lp-form__brand-text {
    font-size: var(--ordolio-text-xs);
    font-weight: var(--ordolio-weight-semibold);
    letter-spacing: var(--ordolio-tracking-caps);
    text-transform: uppercase;
    color: var(--ordolio-fg-subtle);
}

.lp-form__title {
    font-family: var(--ordolio-font-display);
    font-size: var(--ordolio-text-3xl);
    letter-spacing: var(--ordolio-tracking-tight);
    line-height: var(--ordolio-leading-snug);
    font-weight: var(--ordolio-weight-semibold);
    color: var(--ordolio-fg-default);
    margin: 0 0 var(--ordolio-space-2);
}
.lp-form__subtitle {
    font-size: var(--ordolio-text-base);
    color: var(--ordolio-fg-muted);
    margin: 0 0 var(--ordolio-space-8);
}
.lp-form__subtitle a {
    color: var(--ordolio-default-primary);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--ordolio-default-primary), transparent 60%);
    text-underline-offset: 3px;
}
.lp-form__subtitle a:hover {
    text-decoration-color: var(--ordolio-default-primary);
}

/* ----- Method-selection cards (preserve .login-method-card hook) ---------- */

body.login-2026 .login-method-selection {
    margin: 0;
}
body.login-2026 .login-method-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ordolio-space-3);
}
body.login-2026 .login-method-card {
    display: flex;
    /* Explicitly row + left-align — legacy .login-method-card in custom.css
       sets flex-direction: column with align-items: center, which would
       otherwise leak through and stack icon/text/arrow centered. */
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ordolio-space-4);
    padding: var(--ordolio-space-5);
    background: var(--ordolio-bg-surface);
    border: 1px solid var(--ordolio-border-default);
    border-radius: var(--ordolio-radius-lg);
    box-shadow: var(--ordolio-shadow-xs);
    cursor: pointer;
    text-align: left;
    transition:
        border-color var(--ordolio-motion-fast) var(--ordolio-ease-out),
        box-shadow var(--ordolio-motion-fast) var(--ordolio-ease-out),
        transform var(--ordolio-motion-fast) var(--ordolio-ease-out),
        background-color var(--ordolio-motion-fast) var(--ordolio-ease-out);
}
/* Inner text block — let it take the remaining horizontal space so the
   arrow sticks to the far right via margin-left:auto. */
body.login-2026 .login-method-card > div:not(.method-icon) {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
body.login-2026 .login-method-card:hover {
    border-color: var(--ordolio-default-primary);
    box-shadow: var(--ordolio-shadow-md);
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--ordolio-bg-surface), var(--ordolio-default-primary) 2%);
}
body.login-2026 .login-method-card:focus-visible {
    outline: none;
    box-shadow: var(--ordolio-ring-focus);
}
body.login-2026 .method-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: var(--ordolio-radius-md);
    background: var(--ordolio-default-primary-soft);
    color: var(--ordolio-default-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
body.login-2026 .method-icon-password,
body.login-2026 .method-icon-email {
    background: var(--ordolio-default-primary-soft);
    color: var(--ordolio-default-primary-dark);
}
body.login-2026 .method-icon i {
    font-size: 18px;
}
body.login-2026 .method-title {
    font-size: var(--ordolio-text-base);
    font-weight: var(--ordolio-weight-semibold);
    color: var(--ordolio-fg-default);
    margin-bottom: 2px;
}
body.login-2026 .method-description {
    font-size: var(--ordolio-text-sm);
    color: var(--ordolio-fg-muted);
    line-height: var(--ordolio-leading-snug);
}
body.login-2026 .method-arrow {
    margin-left: auto;
    color: var(--ordolio-fg-subtle);
    font-size: 14px;
}

/* ----- Form fields (override Bootstrap .form-control for this page only) - */

body.login-2026 .kt-form {
    margin: 0;
}
body.login-2026 .form-group {
    margin-bottom: var(--ordolio-space-4);
}

body.login-2026 .form-control,
body.login-2026 .lp-form input[type="email"],
body.login-2026 .lp-form input[type="password"],
body.login-2026 .lp-form input[type="text"] {
    width: 100%;
    height: 48px;
    padding: 0 var(--ordolio-space-4);
    background: var(--ordolio-bg-surface);
    border: 1px solid var(--ordolio-border-default);
    border-radius: var(--ordolio-radius-md);
    font-family: var(--ordolio-font-body);
    font-size: var(--ordolio-text-base);
    color: var(--ordolio-fg-default);
    box-shadow: none;
    transition:
        border-color var(--ordolio-motion-fast) var(--ordolio-ease-out),
        box-shadow var(--ordolio-motion-fast) var(--ordolio-ease-out);
}
body.login-2026 .form-control::placeholder {
    color: var(--ordolio-fg-subtle);
}
body.login-2026 .form-control:focus {
    outline: none;
    border-color: var(--ordolio-default-primary);
    box-shadow: var(--ordolio-ring-focus);
}
body.login-2026 .form-control:disabled {
    background: var(--ordolio-neutral-100);
    color: var(--ordolio-fg-subtle);
    cursor: not-allowed;
}

/* ----- Buttons (override Bootstrap .btn for this page only) --------------- */

body.login-2026 .lp-form .btn,
body.login-2026 .lp-form .kt-login__actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ordolio-space-2);
    width: 100%;
    height: 48px;
    padding: 0 var(--ordolio-space-5);
    border-radius: var(--ordolio-radius-md);
    font-family: var(--ordolio-font-body);
    font-size: var(--ordolio-text-base);
    font-weight: var(--ordolio-weight-semibold);
    letter-spacing: 0.005em;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color var(--ordolio-motion-fast) var(--ordolio-ease-out),
        box-shadow var(--ordolio-motion-fast) var(--ordolio-ease-out),
        transform var(--ordolio-motion-fast) var(--ordolio-ease-out);
}
body.login-2026 .lp-form .btn-primary,
body.login-2026 .lp-form .kt-login__btn-primary {
    background: var(--ordolio-default-primary);
    color: var(--ordolio-text-on-primary);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.18),
        var(--ordolio-shadow-sm);
}
body.login-2026 .lp-form .btn-primary:hover,
body.login-2026 .lp-form .kt-login__btn-primary:hover {
    background: var(--ordolio-default-primary-dark);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.22),
        var(--ordolio-shadow-md);
}
body.login-2026 .lp-form .btn-primary:focus-visible,
body.login-2026 .lp-form .kt-login__btn-primary:focus-visible {
    box-shadow: var(--ordolio-ring-focus), var(--ordolio-shadow-sm);
    outline: none;
}
body.login-2026 .lp-form .btn-primary-soft {
    background: var(--ordolio-default-primary-soft);
    color: var(--ordolio-default-primary-dark);
    box-shadow: none;
}
body.login-2026 .lp-form .btn-primary-soft:hover {
    background: color-mix(in srgb, var(--ordolio-default-primary), white 75%);
}
body.login-2026 .lp-form .btn-lg {
    height: 52px;
    font-size: var(--ordolio-text-base);
}

/* ----- Misc form bits ----------------------------------------------------- */

body.login-2026 .kt-login__actions {
    margin: var(--ordolio-space-2) 0 0;
}

body.login-2026 .login-back-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ordolio-space-2);
    font-size: var(--ordolio-text-sm);
    color: var(--ordolio-fg-muted);
    text-decoration: none;
    margin-bottom: var(--ordolio-space-4);
}
body.login-2026 .login-back-btn:hover {
    color: var(--ordolio-default-primary);
}

body.login-2026 .login-info-box {
    padding: var(--ordolio-space-3) var(--ordolio-space-4);
    background: var(--ordolio-default-primary-soft);
    color: var(--ordolio-default-primary-dark);
    border-radius: var(--ordolio-radius-md);
    font-size: var(--ordolio-text-sm);
    line-height: var(--ordolio-leading-snug);
    margin-bottom: var(--ordolio-space-4);
}

body.login-2026 .kt-login__link-forgot,
body.login-2026 .lp-form .kt-link {
    color: var(--ordolio-default-primary);
    font-size: var(--ordolio-text-sm);
    text-decoration: none;
}
body.login-2026 .kt-login__link-forgot:hover,
body.login-2026 .lp-form .kt-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.login-2026 .lp-form .alert-danger {
    padding: var(--ordolio-space-4);
    background: var(--ordolio-default-danger-soft);
    color: var(--ordolio-default-danger-dark);
    border: 1px solid color-mix(in srgb, var(--ordolio-default-danger), transparent 75%);
    border-radius: var(--ordolio-radius-md);
    font-size: var(--ordolio-text-sm);
}

/* ----- Registration CTA --------------------------------------------------- */

body.login-2026 .lp-form .registration-cta {
    margin-top: var(--ordolio-space-8);
    padding: var(--ordolio-space-5);
    background: var(--ordolio-bg-surface-sunken);
    border: 1px solid var(--ordolio-border-subtle);
    border-radius: var(--ordolio-radius-lg);
    text-align: center;
}
body.login-2026 .lp-form .registration-cta p {
    color: var(--ordolio-fg-muted);
    margin: 0 0 var(--ordolio-space-3);
    font-size: var(--ordolio-text-sm);
}

/* ----- Demo mode card ----------------------------------------------------- */

body.login-2026 .lp-demo {
    margin-top: var(--ordolio-space-8);
    padding: var(--ordolio-space-6);
    background: var(--ordolio-bg-surface);
    border: 1px solid var(--ordolio-border-subtle);
    border-radius: var(--ordolio-radius-xl);
    box-shadow: var(--ordolio-shadow-md);
}
body.login-2026 .lp-demo__title {
    font-family: var(--ordolio-font-display);
    font-size: var(--ordolio-text-lg);
    font-weight: var(--ordolio-weight-semibold);
    letter-spacing: var(--ordolio-tracking-tight);
    margin: 0 0 var(--ordolio-space-2);
}
body.login-2026 .lp-demo__lead {
    font-size: var(--ordolio-text-sm);
    color: var(--ordolio-fg-muted);
    margin: 0 0 var(--ordolio-space-4);
}
body.login-2026 .lp-demo__cred {
    padding: var(--ordolio-space-3) var(--ordolio-space-4);
    background: var(--ordolio-bg-surface-sunken);
    border-radius: var(--ordolio-radius-md);
    margin-bottom: var(--ordolio-space-2);
    font-size: var(--ordolio-text-sm);
}
body.login-2026 .lp-demo__cred strong {
    display: block;
    font-size: var(--ordolio-text-xs);
    color: var(--ordolio-fg-muted);
    text-transform: uppercase;
    letter-spacing: var(--ordolio-tracking-caps);
    margin-bottom: 2px;
    font-weight: var(--ordolio-weight-semibold);
}
body.login-2026 .lp-demo__cred code {
    font-family: var(--ordolio-font-mono);
    color: var(--ordolio-fg-default);
}
body.login-2026 .lp-demo__buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ordolio-space-2);
    margin-top: var(--ordolio-space-4);
}

/* ----- Language picker corner -------------------------------------------- */

body.login-2026 .language-picker-card-corner {
    position: absolute;
    top: var(--ordolio-space-5);
    right: var(--ordolio-space-5);
    z-index: 2;
}
@media (max-width: 899px) {
    body.login-2026 .language-picker-card-corner {
        top: var(--ordolio-space-3);
        right: var(--ordolio-space-3);
    }
}

/* ----- Environment notification (test banner) ---------------------------- */

body.login-2026 .environment-notification,
body.login-2026 #environment-notification {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
}

/* ============================================================================
 * Mobile (<900px) — compact stack
 *
 * Hero collapses to a banner above the form. The decorative quote card and
 * the redundant brand row hide. Forces auto-height on the legacy wrapper
 * chain so the stack flows naturally instead of forcing two 100vh blocks.
 * ========================================================================== */

@media (max-width: 899px) {
    body.login-2026 .external_card_container,
    body.login-2026 .external_card,
    body.login-2026 .external_card > .row,
    body.login-2026 .external_card > .row > [class*="col-"],
    body.login-2026 .kt-portlet,
    body.login-2026 .kt-portlet__body {
        min-height: 0 !important;
    }
    body.login-2026 .lp-shell {
        min-height: 100vh;
    }
    /* Hero — auto-height banner. Hide the decorative quote on mobile so
       users don't have to scroll past it to reach the form. */
    body.login-2026 .lp-hero {
        min-height: 0;
        padding: var(--ordolio-space-10) var(--ordolio-space-6) var(--ordolio-space-12);
    }
    body.login-2026 .lp-hero__quote {
        display: none;
    }
    body.login-2026 .lp-hero__org {
        margin-bottom: 0;
    }
    /* Photo hero on mobile: shorter, still atmospheric. */
    body.login-2026 .lp-hero--photo {
        min-height: 240px;
    }

    /* Form panel: natural height, tightened padding, the absolute footer
       sits below the form content rather than overlapping it. */
    body.login-2026 .lp-form-panel {
        padding: var(--ordolio-space-10) var(--ordolio-space-6) var(--ordolio-space-16);
    }
    body.login-2026 .lp-form {
        max-width: 100%;
    }

    /* Touch targets — keep buttons and inputs comfortable on phones. */
    body.login-2026 .lp-form .btn,
    body.login-2026 .lp-form .kt-login__actions .btn {
        height: 52px;
    }
    body.login-2026 .form-control,
    body.login-2026 .lp-form input[type="email"],
    body.login-2026 .lp-form input[type="password"],
    body.login-2026 .lp-form input[type="text"] {
        height: 52px;
        font-size: 16px; /* prevents iOS Safari zoom-on-focus */
    }
    body.login-2026 .login-method-card {
        padding: var(--ordolio-space-4);
    }
}

/* Smaller phones — squeeze padding a bit more, scale display headline down. */
@media (max-width: 479px) {
    body.login-2026 .lp-hero {
        padding: var(--ordolio-space-8) var(--ordolio-space-5) var(--ordolio-space-10);
    }
    body.login-2026 .lp-form-panel {
        padding: var(--ordolio-space-8) var(--ordolio-space-5) var(--ordolio-space-16);
    }
    body.login-2026 .lp-hero__display {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }
}