:root {
    color-scheme: dark;
    --bg: #07090b;
    --panel: #0d1013;
    --panel-soft: #111418;
    --text: #f7f7f8;
    --muted: #a7abb1;
    --line: #2c3035;
    --orange: #ff7608;
    --amber: #ffb800;
    --danger: #ff6b6b;
    --success: #41d695;
    --focus: #ffc447;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html {
    min-height: 100%;
    background: var(--bg);
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-size: 1rem;
    color: var(--text);
    background:
        radial-gradient(circle at 28% 62%, rgba(255, 95, 0, .055), transparent 26rem),
        radial-gradient(circle at 77% 20%, rgba(255, 139, 0, .035), transparent 28rem),
        var(--bg);
}

button, input { font: inherit; }
a { color: inherit; }

.skip-link {
    position: fixed;
    z-index: 100;
    top: .75rem;
    left: .75rem;
    transform: translateY(-180%);
    border-radius: .5rem;
    padding: .7rem 1rem;
    color: #111;
    background: var(--amber);
    font-weight: 700;
    transition: transform .2s ease;
}

.skip-link:focus { transform: translateY(0); }

.auth-page {
    display: grid;
    grid-template-rows: 1fr auto;
    overflow-x: hidden;
}

.auth-shell {
    display: grid;
    grid-template-columns: 45% 55%;
    min-height: calc(100vh - 3.25rem);
}

.brand-panel,
.form-panel { position: relative; min-width: 0; }

.brand-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    overflow: hidden;
    min-height: 0;
    padding: clamp(3rem, 7vh, 6rem) clamp(3.2rem, 7.3vw, 7rem);
    border-right: 1px solid rgba(255, 135, 0, .08);
}

.brand-panel::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: .28;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 122, 0, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 122, 0, .035) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, transparent 0, black 28%, black 82%, transparent 100%);
}

.brand-glow {
    position: absolute;
    right: -7rem;
    bottom: 2rem;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    background: rgba(255, 91, 0, .11);
    filter: blur(90px);
}

.brand-panel-content {
    position: relative;
    z-index: 2;
    width: min(100%, 39rem);
    margin-inline: auto;
}

.brand-logo {
    position: relative;
    z-index: 2;
    display: flex;
    width: fit-content;
    align-items: center;
    margin-inline: 0;
    text-decoration: none;
}

.brand-logo img { width: clamp(19rem, 26.7vw, 25.625rem); height: auto; }

.product-label,
.mobile-product {
    border: 1px solid rgba(255, 146, 0, .42);
    border-radius: 999px;
    padding: .45rem .75rem;
    color: #ffc15a;
    background: rgba(255, 127, 0, .08);
    font-size: .875rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.brand-copy {
    position: relative;
    z-index: 2;
    width: min(100%, 39rem);
    margin-top: clamp(2.5rem, 4.5vh, 2.9rem);
    text-align: left;
}

.eyebrow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .65rem;
    margin: 0 0 1.15rem;
    color: #ff9b21;
    font-size: .875rem;
    font-weight: 800;
    letter-spacing: .2em;
}

.eyebrow span { width: 1.5rem; height: 2px; background: linear-gradient(90deg, var(--orange), var(--amber)); }

.brand-copy h1,
.dashboard-main h1 {
    margin: 0;
    font-size: clamp(2.8rem, 3.65vw, 3.5rem);
    line-height: .98;
    letter-spacing: -.055em;
}

.brand-copy h1 em,
.dashboard-main h1 em {
    color: transparent;
    background: linear-gradient(100deg, #ff6b0b, #ffb900);
    background-clip: text;
    -webkit-background-clip: text;
    font-style: normal;
}

.brand-copy h2 {
    margin: .375rem 0 0;
    font-size: clamp(1.05rem, 1.76vw, 1.7rem);
    letter-spacing: -.025em;
}

.accent-line { width: 6rem; height: 3px; margin: 1.9rem 0 1.65rem; background: linear-gradient(90deg, var(--orange), var(--amber)); }

.brand-description {
    max-width: 31rem;
    margin: 0;
    color: #bec1c6;
    font-size: clamp(.98rem, 1.25vw, 1.2rem);
    line-height: 1.58;
}

.feature-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.3rem;
    width: min(100%, 31rem);
    margin: clamp(2.2rem, 3.7vh, 2.3rem) 0 0;
}

.feature-item { color: #f1f2f3; font-size: .91rem; line-height: 1.35; text-align: center; }

.feature-item svg {
    display: block;
    width: 3rem;
    height: 3rem;
    margin: 0 auto .75rem;
    fill: none;
    stroke: #ff9308;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.form-panel {
    display: grid;
    place-items: center;
    padding: 0 clamp(1.25rem, 2.4vw, 2.3rem);
}

.auth-card {
    display: flex;
    width: min(100%, 48.125rem);
    min-height: min(55.125rem, calc(100vh - 5.7rem));
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(255, 126, 0, .66);
    border-radius: 1.7rem;
    padding: 4rem;
    background:
        radial-gradient(circle at 30% 0, rgba(255, 255, 255, .025), transparent 22rem),
        linear-gradient(145deg, rgba(18, 21, 25, .97), rgba(10, 12, 15, .97));
    box-shadow: 0 2.2rem 6rem rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .025);
}

.card-heading { margin-bottom: 3.25rem; text-align: center; }
.mobile-product { display: none; width: fit-content; margin: 0 auto 1.25rem; }
.card-heading h2 { margin: 0; font-size: clamp(2.15rem, 3vw, 2.75rem); letter-spacing: -.045em; }
.card-heading h2 em { color: var(--orange); font-style: normal; }
.card-heading p { margin: .55rem 0 0; color: var(--muted); font-size: clamp(1rem, 1.48vw, 1.4rem); }

.auth-card--login { justify-content: flex-start; padding-top: 4.375rem; padding-bottom: 3.125rem; }
.auth-card--login .card-heading { margin-bottom: 3.5625rem; }
.auth-card--login form .field-group:first-of-type { margin-bottom: 2.34rem; }
.auth-card--login form .field-group:nth-of-type(2) { margin-bottom: 2.275rem; }
.auth-card--login .form-options { margin-bottom: 1.7rem; }
.auth-card--login .social-divider { margin-top: 2.875rem; margin-bottom: 1.475rem; }
.auth-card--login .form-footer { margin-top: 2.67rem; }

.auth-page--register .auth-shell { grid-template-columns: minmax(27rem, 34%) minmax(0, 66%); align-items: start; }
.auth-page--register .brand-panel { position: sticky; top: 0; height: calc(100vh - 3.25rem); padding-inline: clamp(2.5rem, 4.5vw, 5rem); }
.auth-page--register .form-panel { padding: 2.5rem clamp(1.25rem, 3vw, 3rem); }
.auth-card--register { width: min(100%, 62rem); min-height: 0; justify-content: flex-start; padding: clamp(2.25rem, 4vw, 3.75rem); }
.auth-card--register .card-heading { margin-bottom: 2.4rem; }
.auth-card--register .card-heading p { font-size: 1.1rem; }
.registration-form { display: grid; gap: 1.5rem; }
.registration-section { border-top: 1px solid rgba(255, 255, 255, .09); padding-top: 1.5rem; }
.registration-section:first-of-type { border-top: 0; padding-top: 0; }
.registration-section-heading { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.2rem; }
.registration-section-heading > span {
    display: grid;
    flex: 0 0 auto;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border: 1px solid rgba(255, 145, 12, .42);
    border-radius: .6rem;
    color: #ffae35;
    background: rgba(255, 116, 8, .08);
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .08em;
}
.registration-section-heading h3 { margin: 0; font-size: 1.03rem; letter-spacing: -.015em; }
.registration-section-heading p { margin: .2rem 0 0; color: #8f949b; font-size: .84rem; line-height: 1.4; }
.registration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; }
.registration-form .field-group { margin-bottom: 0; }
.registration-form .field-group label { margin-bottom: .55rem; font-size: .9rem; }
.registration-form .field { min-height: 3.8rem; border-radius: .65rem; }
.registration-form .field input { font-size: 1rem; }
.registration-form .field select { font-size: .91rem; }
.registration-plan-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin-top: 1.1rem;
    border: 1px solid rgba(255, 140, 0, .2);
    border-radius: .8rem;
    background: rgba(255, 140, 0, .16);
}
.registration-plan-summary article { min-width: 0; padding: 1rem; background: rgba(10, 12, 15, .92); }
.registration-plan-summary span { display: block; color: #c47a27; font-size: .68rem; font-weight: 850; letter-spacing: .13em; }
.registration-plan-summary strong { display: block; overflow: hidden; margin-top: .4rem; color: #fff; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.registration-plan-summary small { display: block; margin-top: .3rem; color: #888e96; font-size: .75rem; line-height: 1.35; }
.password-requirements { display: flex; flex-wrap: wrap; gap: .45rem 1rem; margin-top: .8rem; color: #8f949b; font-size: .78rem; }
.password-requirements span::first-letter { color: #ff9a19; }
.registration-form .checkbox-row { margin: 0; padding: .15rem 0; }
.registration-assurance { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.25rem; color: #858a91; font-size: .75rem; }
.registration-assurance span::first-letter { color: #ff920f; }
.registration-form .primary-button { min-height: 4.25rem; font-size: 1.12rem; }
.auth-card--register + .form-footer { margin-top: 0; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.field-group { margin-bottom: 1.9rem; }
.field-group--wide { grid-column: 1 / -1; }
.field-group label { display: block; margin-bottom: .9rem; font-size: 1rem; font-weight: 700; }

.field {
    display: flex;
    min-height: 4.45rem;
    align-items: center;
    gap: 1rem;
    border: 1px solid #35393e;
    border-radius: .7rem;
    padding: 0 1.15rem;
    background: rgba(9, 11, 13, .5);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field:focus-within { border-color: #ff9c1a; background: rgba(18, 16, 13, .72); box-shadow: 0 0 0 3px rgba(255, 139, 0, .12); }
.field--error { border-color: rgba(255, 107, 107, .8); }
.field > svg { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; fill: none; stroke: #aeb2b8; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.field input { width: 100%; min-width: 0; border: 0; outline: 0; color: #fff; background: transparent; font-size: 1.12rem; }
.field input::placeholder { color: #777c83; opacity: 1; }
.field select {
    width: 100%;
    min-width: 0;
    appearance: none;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font-size: .95rem;
    cursor: pointer;
}
.field select option { color: #fff; background: #111418; }
.select-field { gap: .75rem; }
.select-field .select-chevron { width: 1.1rem; height: 1.1rem; color: #ff9b19; stroke: currentColor; pointer-events: none; opacity: .82; transition: opacity .18s ease, transform .18s ease; }
.select-field:hover .select-chevron,
.select-field:focus-within .select-chevron { opacity: 1; transform: translateY(.08rem); }
.plan-context { margin: .42rem 0 0; color: #c88732; font-size: .875rem; line-height: 1.35; }

.password-toggle { display: grid; flex: 0 0 auto; width: 2.35rem; height: 2.35rem; place-items: center; border: 0; border-radius: .5rem; color: #aeb2b8; background: transparent; cursor: pointer; }
.password-toggle:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.password-toggle svg { width: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.5; }

.field-error { margin: .45rem 0 0; color: #ff8c8c; font-size: .875rem; }
.field-error--terms { margin: -.45rem 0 1rem; }
.form-options { display: flex; margin: -.75rem 0 2.25rem; }
.form-options--end { justify-content: flex-end; }
.form-options a, .form-footer a, .checkbox-row a { color: #ff920f; text-decoration: none; font-weight: 650; }
.form-options a:hover, .form-footer a:hover, .checkbox-row a:hover { color: #ffc04b; text-decoration: underline; }

.checkbox-row { display: flex; align-items: flex-start; gap: .7rem; margin: -.15rem 0 1.3rem; color: #b7bbc0; font-size: .875rem; line-height: 1.45; }
.checkbox-row input { width: 1rem; height: 1rem; margin: .15rem 0 0; accent-color: var(--orange); }
.security-trusted-device { margin-top: -.2rem; }
.security-trusted-device span { display: grid; gap: .18rem; }
.security-trusted-device strong { color: #f4f5f6; font-size: .9rem; }
.security-trusted-device small { color: #7f8791; font-size: .76rem; line-height: 1.45; }

.primary-button {
    display: flex;
    width: 100%;
    min-height: 4.85rem;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-radius: .68rem;
    padding: 0 1.8rem;
    color: #fff;
    background: linear-gradient(105deg, #ff5d0b, #ff7d05 48%, #ffbd00);
    box-shadow: 0 .8rem 2rem rgba(255, 104, 0, .18);
    font-size: 1.3rem;
    font-weight: 760;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.primary-button span:first-child { flex: 1; text-align: center; }
.primary-button span:last-child { font-size: 1.85rem; font-weight: 300; }
.primary-button:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 1rem 2.4rem rgba(255, 104, 0, .25); }
.primary-button:active { transform: translateY(1px); }

.social-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    margin: 2.25rem 0 1.85rem;
    color: #aaaeb4;
    font-size: 1rem;
}
.social-divider::before,
.social-divider::after { height: 1px; content: ""; background: #30343a; }
.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.social-button {
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    border: 1px solid #35393e;
    border-radius: .7rem;
    color: #f4f4f5;
    background: rgba(9, 11, 13, .48);
    font-size: 1.17rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.social-button:hover { border-color: #5a5e64; background: rgba(255, 255, 255, .035); transform: translateY(-1px); }
.social-button:disabled { opacity: 1; cursor: not-allowed; }
.social-button svg { width: 1.65rem; height: 1.65rem; }
.social-status { margin: .7rem 0 -1.2rem; color: #c58a38; font-size: .875rem; line-height: 1.4; text-align: center; }
.social-status:empty { display: none; }

button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.field input:focus-visible { outline: 0; }

.form-footer { margin-top: 2.35rem; color: #aaaeb4; font-size: 1.08rem; text-align: center; }
.form-intro { margin: -1rem 0 1.8rem; color: #aaaeb4; line-height: 1.6; }

.alert { display: flex; align-items: flex-start; gap: .65rem; border-radius: .6rem; margin: -1.3rem 0 1.6rem; padding: .9rem 1rem; font-size: .88rem; line-height: 1.45; }
.alert svg { flex: 0 0 auto; width: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.alert--success { border: 1px solid rgba(65, 214, 149, .28); color: #91e7bd; background: rgba(65, 214, 149, .07); }
.alert--error { border: 1px solid rgba(255, 107, 107, .3); color: #ff9a9a; background: rgba(255, 107, 107, .08); }
.alert--local { display: grid; border: 1px solid rgba(255, 169, 32, .3); color: #d3d5d8; background: rgba(255, 146, 0, .07); }
.alert--local strong { color: #ffb23d; }
.alert--local a { width: fit-content; color: #fff; word-break: break-word; }
.alert--local code { width: fit-content; color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.15rem; font-weight: 800; letter-spacing: .22em; }

.auth-card--security { min-height: 42rem; }
.security-copy { margin: -1rem 0 1.8rem; color: #b7bbc0; font-size: .98rem; line-height: 1.65; }
.security-copy strong { color: #fff; }
.security-copy ol { margin: 0; padding-left: 1.25rem; }
.security-copy li + li { margin-top: .55rem; }
.security-secret { display: grid; gap: .55rem; border: 1px solid rgba(255, 146, 0, .35); border-radius: .7rem; margin-bottom: 1rem; padding: 1rem; background: rgba(255, 146, 0, .07); }
.security-secret span { color: #ca8b39; font-size: .875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.security-secret code, .security-uri code { color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.security-uri { margin: 0 0 1.8rem; color: #aeb2b8; }
.security-uri summary { cursor: pointer; color: #ff9b1d; }
.security-uri code { display: block; margin-top: .7rem; border-radius: .5rem; padding: .75rem; background: #080a0d; }
.security-secondary-action { margin-top: 1rem; text-align: center; }
.security-secondary-action button { border: 0; color: #ff9b1d; background: transparent; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.recovery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 0 0 2rem; }
.recovery-grid code { border: 1px solid #34383d; border-radius: .5rem; padding: .75rem; color: #ffb23d; background: #090b0e; font-size: 1rem; text-align: center; }
.security-signout { margin-top: 1.3rem; text-align: center; }
.security-signout button { border: 0; color: #999ea4; background: transparent; cursor: pointer; text-decoration: underline; }

.site-footer { position: relative; z-index: 3; padding: .7rem 1.5rem 1.05rem; color: #8b8e93; font-size: .875rem; text-align: center; }

/* Signed-in placeholder */
.dashboard-page { min-height: 100vh; background: radial-gradient(circle at 50% -20%, rgba(255, 131, 0, .13), transparent 40rem), #07090b; }
.dashboard-nav { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #24272b; padding: 1rem clamp(1.25rem, 5vw, 5rem); background: rgba(7, 9, 11, .82); }
.dashboard-logo { display: flex; align-items: center; gap: .85rem; text-decoration: none; font-size: .875rem; font-weight: 800; letter-spacing: .16em; }
.dashboard-logo img { width: 9rem; }
.ghost-button { min-height: 2.6rem; border: 1px solid #3a3e43; border-radius: .5rem; padding: 0 1rem; color: #fff; background: #111418; cursor: pointer; }
.dashboard-main { width: min(100% - 2.5rem, 68rem); margin: 0 auto; padding: clamp(5rem, 12vh, 9rem) 0; }
.dashboard-main > p:not(.eyebrow) { max-width: 42rem; color: #9da1a7; font-size: 1.15rem; line-height: 1.65; }
.current-plan { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: 1rem; border: 1px solid rgba(255, 146, 0, .3); border-radius: 999px; padding: .55rem .85rem; color: #8d9298; background: rgba(255, 127, 0, .06); font-size: .875rem; }
.current-plan strong { color: #ffae35; }
.current-plan strong + span::before { margin-right: .65rem; color: #555a60; content: "•"; }
.workspace-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.3rem; margin-top: 3rem; border: 1px solid #2c3035; border-radius: 1rem; padding: 1.5rem; background: #0d1013; }
.workspace-icon { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; border-radius: .7rem; color: #111; background: linear-gradient(135deg, var(--orange), var(--amber)); font-size: 1.7rem; }
.workspace-card h2, .workspace-card p { margin: 0; }
.workspace-card p { margin-top: .3rem; color: #858a91; }
.workspace-card button { border: 1px solid #393d42; border-radius: .5rem; padding: .7rem 1rem; color: #777c83; background: #15181c; }

.error-page { display: grid; min-height: 100vh; place-items: center; text-align: center; }
.error-page main { width: min(100% - 2rem, 30rem); }
.error-page h1 { margin: 0; color: transparent; background: linear-gradient(100deg, var(--orange), var(--amber)); background-clip: text; font-size: 7rem; }
.error-page p { color: #a7abb1; }
.error-page .primary-button { width: fit-content; gap: 2rem; margin: 2rem auto 0; }

@media (max-width: 1200px) {
    .auth-shell { grid-template-columns: 43% 57%; }
    .brand-panel { padding-inline: clamp(2.2rem, 4vw, 3.5rem); }
    .brand-logo img { width: clamp(17rem, 29vw, 21rem); }
    .brand-copy h1 { font-size: clamp(2.7rem, 4.5vw, 3.2rem); }
    .brand-copy h2 { font-size: clamp(1rem, 2vw, 1.35rem); }
    .brand-description { font-size: 1rem; }
    .feature-grid { gap: .65rem; }
    .feature-item { font-size: .875rem; }
    .feature-item svg { width: 2.4rem; height: 2.4rem; }
    .form-panel { place-items: center; padding: 1rem; }
    .auth-card { width: 100%; padding-inline: clamp(2rem, 4vw, 3rem); }
}

@media (min-width: 901px) and (max-height: 850px) {
    .auth-shell { min-height: calc(100vh - 2.7rem); }
    .brand-panel { padding-top: 2.2rem; padding-bottom: 2.2rem; }
    .brand-logo img { width: clamp(17rem, 24vw, 20rem); }
    .brand-copy { margin-top: 1.8rem; }
    .brand-copy h1 { font-size: clamp(2.7rem, 3.5vw, 3.1rem); }
    .brand-copy h2 { margin-top: .75rem; font-size: 1.2rem; }
    .accent-line { margin: 1.3rem 0; }
    .brand-description { max-width: 29rem; font-size: .96rem; line-height: 1.5; }
    .feature-grid { margin-top: 1.7rem; }
    .form-panel { padding-top: 1rem; padding-bottom: 1rem; }
    .auth-card { min-height: calc(100vh - 4.7rem); padding-top: 1.8rem; padding-bottom: 1.8rem; }
    .auth-card--register { min-height: 0; padding-top: 2.2rem; padding-bottom: 2.2rem; }
    .auth-card--login { justify-content: center; }
    .card-heading { margin-bottom: 1.8rem; }
    .auth-card--login .card-heading { margin-bottom: 1.8rem; }
    .card-heading h2 { font-size: 2.35rem; }
    .card-heading p { font-size: 1.05rem; }
    .field-group { margin-bottom: 1.15rem; }
    .auth-card--login form .field-group:first-of-type,
    .auth-card--login form .field-group:nth-of-type(2) { margin-bottom: 1.15rem; }
    .field-group label { margin-bottom: .55rem; }
    .field { min-height: 3.6rem; }
    .form-options { margin: -.45rem 0 1.25rem; }
    .auth-card--login .form-options { margin-bottom: 1.25rem; }
    .primary-button { min-height: 3.9rem; }
    .social-divider { margin: 1.25rem 0 1rem; }
    .auth-card--login .social-divider { margin: 1.25rem 0 1rem; }
    .social-button { min-height: 3.6rem; }
    .form-footer { margin-top: 1.3rem; }
    .auth-card--login .form-footer { margin-top: 1.3rem; }
}

@media (max-width: 900px) {
    .auth-page { display: block; }
    .auth-shell { display: block; min-height: auto; }
    .brand-panel { align-items: center; justify-content: flex-start; min-height: auto; padding: 2rem 1.25rem 2.4rem; border-right: 0; border-bottom: 1px solid rgba(255, 126, 0, .14); text-align: center; }
    .brand-logo { margin: 0 auto; }
    .brand-logo img { width: min(15rem, 68vw); }
    .brand-copy { margin: 2rem auto 0; text-align: center; }
    .brand-copy h1 { font-size: clamp(2.55rem, 12vw, 4rem); }
    .brand-copy h2 { font-size: 1rem; }
    .accent-line { margin: 1.4rem auto; }
    .brand-description { margin-inline: auto; font-size: .94rem; }
    .feature-grid { grid-template-columns: repeat(4, 1fr); max-width: 35rem; margin: 2.1rem auto 0; }
    .feature-item { font-size: .875rem; }
    .feature-item svg { width: 2.15rem; height: 2.15rem; margin-bottom: .55rem; }
    .auth-page--register .auth-shell { display: block; }
    .auth-page--register .brand-panel { position: relative; top: auto; height: auto; }
    .auth-page--register .form-panel { padding: 1.25rem; }
    .form-panel { padding: 1.25rem; }
    .auth-card { width: 100%; min-height: 0; border-radius: 1.25rem; padding: 2rem 1.25rem; }
    .auth-card--login { justify-content: flex-start; }
    .card-heading { margin-bottom: 2rem; }
    .auth-card--login .card-heading { margin-bottom: 2rem; }
    .auth-card--login form .field-group:first-of-type,
    .auth-card--login form .field-group:nth-of-type(2) { margin-bottom: 1.55rem; }
    .auth-card--login .form-options { margin-bottom: 1.55rem; }
    .auth-card--login .social-divider { margin: 1.6rem 0 1.2rem; }
    .auth-card--login .form-footer { margin-top: 2rem; }
    .mobile-product { display: block; }
    .card-heading h2 { font-size: 2rem; }
    .card-heading p { font-size: 1rem; }
    .site-footer { padding: 1rem 1rem 1.5rem; }
}

@media (max-width: 540px) {
    .brand-panel { padding-top: 1.5rem; }
    .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem .65rem; }
    .feature-item { display: flex; align-items: center; gap: .6rem; text-align: left; }
    .feature-item svg { flex: 0 0 auto; margin: 0; }
    .field-grid { display: block; }
    .registration-grid,
    .registration-plan-summary { grid-template-columns: 1fr; }
    .registration-plan-summary { gap: 1px; }
    .registration-section-heading { margin-bottom: 1rem; }
    .registration-assurance { align-items: flex-start; flex-direction: column; }
    .field { min-height: 3.85rem; padding-inline: .9rem; }
    .field input { font-size: .96rem; }
    .primary-button { min-height: 4rem; }
    .social-grid { grid-template-columns: 1fr; gap: .75rem; }
    .social-button { min-height: 3.9rem; }
    .social-divider { margin: 1.6rem 0 1.2rem; }
    .workspace-card { grid-template-columns: auto 1fr; }
    .workspace-card button { grid-column: 1 / -1; }
    .recovery-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Shared select system
   Keep every native dropdown accessible while giving authentication, workspace,
   builder and administration forms the same branded control and option palette. */
html body select:not([multiple]) {
    -webkit-appearance: none;
    appearance: none;
    border-color: #343a42;
    border-radius: .65rem;
    padding-right: 3rem;
    color: #f5f7fa;
    color-scheme: dark;
    background-color: #090d11;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ff9b19' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .95rem center;
    background-size: 1.15rem;
    font-family: inherit;
    font-size: max(.9rem, 1em);
    font-weight: 650;
    line-height: 1.35;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
html body select:not([multiple]):hover:not(:disabled) {
    border-color: rgba(255, 155, 25, .72);
    background-color: #0d1116;
}
html body select:not([multiple]):focus,
html body select:not([multiple]):focus-visible {
    border-color: #ff9b19;
    outline: none;
    background-color: #0d1116;
    box-shadow: 0 0 0 3px rgba(255, 139, 0, .13);
}
html body select:not([multiple]):disabled {
    border-color: #292e34;
    color: #737982;
    background-color: #0a0d10;
    cursor: not-allowed;
    opacity: .72;
}
html body select option,
html body select optgroup {
    color: #f4f6f8;
    background-color: #11161c;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
}
html body select option { padding: .7rem .9rem; }
html body select option:checked {
    color: #080b0e;
    background: #ff9b19 linear-gradient(0deg, #ff9b19 0%, #ffb20f 100%);
    font-weight: 800;
}
html body select option:disabled { color: #69717a; }

/* Icon fields already draw their own container and chevron. */
html body .field select:not([multiple]) {
    min-height: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}
html body .field select:not([multiple]):hover:not(:disabled),
html body .field select:not([multiple]):focus,
html body .field select:not([multiple]):focus-visible { background-color: transparent; box-shadow: none; }

/* Public legal documents intentionally share the product visual system while
   remaining readable, printable and independently linkable during onboarding. */
.legal-page { min-width: 20rem; min-height: 100vh; color: #edf0f2; background: radial-gradient(circle at 82% 0, rgba(255, 126, 0, .12), transparent 30rem), #07090b; }
.legal-header { position: sticky; top: 0; z-index: 5; display: flex; min-height: 4.8rem; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #292d32; padding: .8rem clamp(1rem, 5vw, 4.5rem); background: rgba(7, 9, 11, .94); backdrop-filter: blur(1rem); }
.legal-header > a { display: flex; align-items: center; gap: .75rem; color: #ff9b20; font-size: .78rem; font-weight: 850; letter-spacing: .18em; text-decoration: none; }
.legal-header img { width: 10.5rem; height: auto; }
.legal-header nav { display: flex; align-items: center; gap: .35rem; }
.legal-header nav a { border-radius: .45rem; padding: .62rem .8rem; color: #aeb4bb; font-size: .875rem; font-weight: 750; text-decoration: none; }
.legal-header nav a:hover, .legal-header nav a:focus-visible, .legal-header nav a.is-active { color: #fff; background: rgba(255, 139, 0, .1); outline: none; }
.legal-document { width: min(100% - 2rem, 68rem); margin: 0 auto; padding: clamp(3rem, 7vw, 6.5rem) 0 4rem; }
.legal-document > header { border-bottom: 1px solid #292d32; margin-bottom: 2.5rem; padding-bottom: 2rem; }
.legal-document h1 { margin: .7rem 0 0; font-size: clamp(2.7rem, 6vw, 5rem); line-height: .98; letter-spacing: -.06em; }
.legal-document > header > p:last-child { margin: .8rem 0 0; color: #959ba2; }
.legal-document section { border-bottom: 1px solid #22262b; padding: 1.2rem 0 1.5rem; }
.legal-document h2 { margin: 0; color: #ff9c24; font-size: 1.15rem; }
.legal-document section p, .legal-document li { color: #b5bbc1; font-size: 1rem; line-height: 1.75; }
.legal-document section p { margin: .75rem 0 0; }
.legal-document ul { display: grid; gap: .55rem; margin: .8rem 0 0; padding-left: 1.25rem; }
.legal-document strong { color: #f1f3f5; }
.legal-document a { color: #ff9f26; }
.legal-document footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 2rem; color: #7f868d; font-size: .875rem; }
.legal-document footer a { font-weight: 800; text-decoration: none; }
@media (max-width: 620px) {
    .legal-header { align-items: flex-start; flex-direction: column; }
    .legal-header nav { width: 100%; overflow-x: auto; }
    .legal-header img { width: 9rem; }
    .legal-document footer { align-items: flex-start; flex-direction: column; }
}
@media print {
    .legal-page { color: #111; background: #fff; }
    .legal-header { position: static; background: #fff; }
    .legal-header nav { display: none; }
    .legal-document section p, .legal-document li, .legal-document > header > p:last-child { color: #222; }
    .legal-document h2, .legal-document a { color: #8a4600; }
}