/* A quiet code-colour canvas, with the offer always beside the form. */
body:has(.signup-page) {
    --signup-bg: var(--code-bg);
    --signup-panel: var(--code-surface);
    --signup-input: var(--code-bg);
    --signup-line: #293139;
    --signup-field-line: #5f6b74;
    --signup-text: #eef4f8;
    --signup-muted: #9fa7ae;
    --signup-space-xs: 8px;
    --signup-space-sm: 16px;
    --signup-space-md: 24px;
    --signup-space-lg: 32px;
    --signup-space-xl: 48px;
    --signup-space-2xl: 64px;
    --signup-space-3xl: 96px;
    background: var(--signup-bg);
}
body:has(.signup-page) .page-space-scene,
body:has(.signup-page) .site-footer { display: none; }
.signup-page { color: var(--signup-text); padding-block: var(--signup-space-xl) var(--signup-space-2xl); }
.signup-page .shell { width: min(920px, calc(100% - 24px)); }
.signup-layout { display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, 1fr); grid-template-areas: "intro form"; gap: var(--signup-space-lg); align-items: start; }
.signup-intro { display: block; grid-area: intro; padding-top: var(--signup-space-sm); min-width: 0; }
.signup-intro > h2 { display: grid; margin: 0; font-size: clamp(1.125rem, 4vw, 2rem); font-weight: 600; line-height: 1.25; letter-spacing: -.04em; }
.signup-promise > span:last-child { color: var(--accent); }
.signup-offer { color: var(--signup-text); margin-top: var(--signup-space-lg); padding-top: var(--signup-space-md); border-top: 1px solid var(--signup-line); }
.signup-benefits { display: grid; gap: var(--signup-space-md); margin: 0; padding: 0; list-style: none; font-size: .875rem; line-height: 1.5; }
.signup-benefits li { display: flex; align-items: start; gap: var(--signup-space-md); color: var(--signup-muted); }
.signup-benefits svg { width: 16px; height: 20px; flex: 0 0 16px; color: var(--accent); }
.signup-benefits strong { display: block; margin-bottom: 4px; font-weight: 600; color: var(--signup-text); }
.signup-usage-value { color: var(--accent); font-weight: 700; }
.signup-benefits li > span > span { display: block; }
.signup-bundle-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--signup-space-xs); margin: var(--signup-space-sm) 0 0; color: var(--signup-muted); font-size: .875rem; }
.signup-bundle-price strong { color: var(--accent); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; font-weight: 600; letter-spacing: -.04em; }
.signup-billing { margin: var(--signup-space-xs) 0 0; color: var(--signup-muted); font-size: .875rem; line-height: 1.5; }
.signup-page a:hover { text-decoration: underline; text-underline-offset: 4px; }
.signup-page a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.signup-skip { position: absolute; left: -10000px; }
.signup-skip:focus { position: fixed; left: 16px; top: 16px; background: var(--signup-panel); color: var(--signup-text); padding: var(--signup-space-sm); z-index: 100; }
.signup-form-panel { grid-area: form; background: var(--signup-panel); border: 1px solid var(--signup-line); border-radius: var(--radius); padding: var(--signup-space-sm); min-width: 0; scroll-margin-top: 100px; }
.signup-form-heading h1 { font-size: 1.5rem; line-height: 1.3; margin: 0; letter-spacing: -.035em; font-weight: 600; }
.signup-page .auth-form { gap: var(--signup-space-sm); margin-top: var(--signup-space-md); scroll-margin-top: 110px; }
.signup-page .field { gap: var(--signup-space-xs); min-width: 0; }
.signup-page .auth-recommendation:empty { display: none; }
.signup-page .field-row { grid-template-columns: 1fr; gap: var(--signup-space-sm); }
.signup-page .field > span, .signup-page .field .auth-recommendation { color: var(--signup-muted); font-size: .875rem; }
.signup-page .field > span:first-child { color: var(--signup-text); }
.signup-page .input { background: var(--signup-input); color: var(--signup-text); border-color: var(--signup-field-line); border-radius: 6px; box-shadow: none; font-size: 1rem; min-width: 0; transition: border-color 150ms ease; }
.signup-page .input:hover { border-color: var(--signup-muted); }
.signup-page .input::placeholder { color: var(--signup-muted); }
.signup-page .input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); box-shadow: none; }
.signup-page select.input { color-scheme: dark; }
.signup-plan-picker { padding-bottom: var(--signup-space-sm); border-bottom: 1px solid var(--signup-line); }
.signup-page #signup-plan { background: var(--accent-soft); border-color: var(--accent); }
.signup-page .legal-checkbox { align-items: start; color: var(--signup-muted); font-size: .875rem; min-height: 44px; }
.signup-page .legal-checkbox input { accent-color: var(--accent); margin-top: 4px; }
.signup-page .legal-checkbox a { text-decoration: underline; text-underline-offset: 3px; }
.signup-page .auth-submit { width: 100%; justify-content: center; gap: var(--signup-space-sm); background: var(--accent); border-color: var(--accent); color: var(--signup-bg); border-radius: 6px; box-shadow: none; transform: none; min-height: 48px; font-size: 1rem; }
.signup-page .auth-submit:hover { background: var(--accent-dark); border-color: var(--accent-dark); transform: none; box-shadow: none; }
.signup-page .auth-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.signup-page .auth-note { color: var(--signup-muted); font-size: .875rem; text-align: center; margin-top: var(--signup-space-sm); }
@media (min-width: 860px) {
    .signup-page .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .signup-page { padding-top: var(--signup-space-2xl); }
    .signup-page .shell { width: min(920px, calc(100% - 64px)); }
    .signup-layout { grid-template-columns: minmax(240px, .7fr) minmax(0, 1fr); grid-template-areas: "intro form"; column-gap: var(--signup-space-3xl); align-items: start; }
    .signup-intro { display: block; padding-top: var(--signup-space-lg); }
    .signup-intro > h2 { font-size: 2.5rem; }
    .signup-benefits { font-size: 1rem; }
    .signup-benefits li { gap: var(--signup-space-lg); }
    .signup-benefits svg { width: 20px; height: 24px; flex-basis: 20px; }
    .signup-form-panel { padding: var(--signup-space-lg); }
    .signup-form-heading h1 { font-size: 1.75rem; }
}
@media (max-width: 420px) {
    .signup-intro > h2 { font-size: 1rem; }
    .signup-offer { margin-top: var(--signup-space-md); padding-top: var(--signup-space-sm); }
    .signup-benefits { gap: var(--signup-space-sm); }
    .signup-benefits li { display: block; }
    .signup-benefits svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html:has(.signup-page) { scroll-behavior: auto; }
}