/* Paradigm's industrial imagery and teal accents, paired with the workspace's
   restrained DIN typography. Authentication behavior is unchanged. */
body.clair-spacex #header .paradigm-brand-logo {
    display: block; width: 174px; height: auto; max-height: 42px; object-fit: contain;
}
body.clair-spacex #header .paradigm-workspace-label {
    display: inline-block; border-left: 1px solid #3a3a3f; padding-left: 16px;
    margin-left: 4px; color: #b5b5bd; font-size: 10px; font-weight: 400;
    letter-spacing: .12em; line-height: 1.5; text-transform: uppercase;
}
body.clair-spacex #content:has(> .paradigm-login) {
    padding: 0 !important; margin-inline: 0; width: 100%; max-width: none;
}
body.clair-spacex #content > .paradigm-login {
    display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
    width: 100%; min-height: 100dvh; padding: 0;
}
.paradigm-login-hero {
    background: #003b49; position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(32px, 4vw, 64px); display: flex; flex-direction: column;
    justify-content: space-between; min-height: 560px;
}
.paradigm-login-photo {
    position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
    object-fit: cover; object-position: center; filter: brightness(.48) saturate(.72);
}
.paradigm-login-logo { display: block; width: clamp(200px, 23vw, 320px); max-width: 85%; height: auto; }
.paradigm-login-story { margin-top: 96px; }
body.clair-spacex .paradigm-login-eyebrow {
    color: #a8d5df; text-transform: uppercase; font-size: 11px; line-height: 1.6;
    letter-spacing: .15em; margin: 0 0 18px;
}
body.clair-spacex .paradigm-login-statement {
    color: #fff; font-family: var(--sx-font); font-weight: 700; font-size: clamp(42px, 4.8vw, 76px);
    letter-spacing: .015em; line-height: .98; text-transform: uppercase; margin: 0;
}
.paradigm-login-panel {
    background: #080b0d; display: flex; align-items: center; justify-content: center;
    padding: clamp(28px, 4vw, 64px); border-left: 1px solid #30434a;
}
body.clair-spacex .paradigm-login #login_form {
    width: 100%; max-width: 400px; padding: 0; margin: 0;
    border: 0 !important; background: transparent; border-radius: 0; box-shadow: none;
}
body.clair-spacex .paradigm-login #login_form h1 {
    font-size: clamp(30px, 3vw, 44px); line-height: 1.06; letter-spacing: .015em;
    margin: 0 0 16px; padding: 0; border: 0;
}
body.clair-spacex .paradigm-login-intro { color: #b5b5bd; margin: 0 0 36px; font-size: 16px; }
body.clair-spacex .paradigm-login #login_form label {
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 9px;
}
body.clair-spacex .paradigm-login #login_form .form-group { margin-bottom: 24px; }
body.clair-spacex .paradigm-login #login_form .form-control {
    background: #0d1417; border-color: #46545c; min-height: 50px; padding: 12px 14px;
    color: #fff; border-radius: 4px;
}
body.clair-spacex .paradigm-login #login_form .form-control:focus { border-color: #8bcad8; }
body.clair-spacex .paradigm-login #login_form .login_btn {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 32px; min-height: 52px; border-color: #8bcad8 !important;
    padding: 14px 22px !important; background: #003b49 !important; font-size: 13px !important;
}
body.clair-spacex .paradigm-login #login_form .login_btn:hover {
    background: #006e91 !important; color: #fff !important; border-color: #b9e6ef !important;
}
body.clair-spacex .paradigm-login #login_form .auth-footer { margin-top: 18px; }
body.clair-spacex .paradigm-login #login_form .auth-footer-link { color: #b5b5bd; font-size: 13px; text-underline-offset: 4px; }
body.clair-spacex .paradigm-login #login_form .auth-footer-link:hover { color: #fff; }
/* Sep 16 2026: the header's collapse breakpoint moved from
   navbar-expand-lg (992px) to navbar-expand-xl (1200px) -- five
   always-visible top-level items no longer fit one row at 1024px, and
   trimming chrome here (this block used to hide the label and shrink
   the logo/link padding/user-name across 992-1199) still wasn't
   enough; the overflow was real gated content, not decoration. Below
   1200px the nav is now in the hamburger drawer, so that row holds only
   the logo, this label and the toggler -- comfortably, with no trim
   needed. The label stays visible at every width down to the 767px
   logo-shrink rule below it, and the user is asked to keep it that
   way (brand label / user controls must stay reachable at every
   width). Nothing here overrides the >=1200px full-row desktop sizing
   below. */
@media (max-width: 960px) {
    body.clair-spacex #content > .paradigm-login { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .paradigm-login-hero, .paradigm-login-panel { padding: 32px; }
    body.clair-spacex .paradigm-login-statement { font-size: 48px; }
}
@media (max-width: 767px) {
    body.clair-spacex #header .paradigm-brand-logo { width: 148px; max-height: 34px; }
    body.clair-spacex #content > .paradigm-login { display: flex; flex-direction: column; min-height: 100dvh; }
    .paradigm-login-hero { min-height: 142px; padding: 24px; justify-content: flex-end; gap: 16px; }
    .paradigm-login-photo { object-position: center 45%; }
    .paradigm-login-story { margin-top: 0; }
    .paradigm-login-story .paradigm-login-eyebrow { margin-bottom: 8px; font-size: 9px; }
    body.clair-spacex .paradigm-login-statement { font-size: 30px; line-height: 1.02; }
    .paradigm-login-statement br { display: none; }
    .paradigm-login-panel { padding: 30px 24px 36px; border-left: 0; border-top: 1px solid #30434a; flex: 1; }
    body.clair-spacex .paradigm-login #login_form h1 { font-size: 30px; margin-bottom: 12px; }
    body.clair-spacex .paradigm-login #login_form > .paradigm-login-eyebrow { margin-bottom: 12px; }
    body.clair-spacex .paradigm-login-intro { margin-bottom: 24px; font-size: 14px; }
    body.clair-spacex .paradigm-login #login_form .form-group { margin-bottom: 18px; }
    body.clair-spacex .paradigm-login #login_form .login_btn { margin-top: 24px; }
}