body {
    min-height: 100vh;
    height: auto !important;
    padding: 32px 20px;
    color: var(--brand-carbon, #243238);
    background:
        radial-gradient(circle at 85% 15%, rgba(56, 168, 117, .18), transparent 33%),
        #123f3a !important;
}

.auth-shell {
    width: min(940px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    align-items: stretch;
    gap: 24px;
}

.login-card {
    align-self: center;
    max-width: 420px !important;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 14px !important;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .2) !important;
}

.login-header h1 { color: #123f3a; }
.login-header img { max-height: 56px !important; }
.form-label { color: #123f3a; font-weight: 700; }
.form-control { min-height: 44px; border-color: #dce6e2; border-radius: 9px; }
.form-control:focus { border-color: #38a875; box-shadow: 0 0 0 .22rem rgba(56, 168, 117, .14); }
.btn-primary { min-height: 46px; border-radius: 9px; }
.trial-summary {
    align-self: center;
    padding: 44px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    background: rgba(2, 47, 40, .7);
}
.trial-summary h2 { margin: 16px 0 24px; color: #fff; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.trial-summary ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.trial-summary li { position: relative; padding-left: 28px; color: rgba(255, 255, 255, .85); }
.trial-summary li::before { content: "✓"; position: absolute; left: 0; color: #38a875; font-weight: 900; }
.trial-summary p { margin: 25px 0 0; color: rgba(255, 255, 255, .62); font-size: .83rem; }
.auth-eyebrow { display: inline-flex; padding: 6px 9px; color: #c9f4da; border-radius: 7px; background: rgba(56, 168, 117, .13); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 780px) {
    .auth-shell { grid-template-columns: 1fr; max-width: 440px; }
    .trial-summary { padding: 28px; }
}

@media (max-width: 480px) {
    body { padding: 18px 12px; align-items: flex-start !important; }
    .login-card { padding: 1.4rem !important; }
    .trial-summary { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; }
}