:root { color-scheme: light; --ink: #152019; --muted: #6a776f; --green: #76d956; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #f5f7f3; font: 15px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
button, input { font: inherit; }
[hidden] { display: none !important; }
.register-nav { width: min(1220px, calc(100% - 48px)); margin: auto; min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.register-nav > a:last-child { color: var(--muted); font-size: 13px; text-decoration: none; }
.register-nav > a:last-child strong { color: var(--ink); }
.register-layout { width: min(1120px, calc(100% - 48px)); margin: 20px auto 44px; display: grid; grid-template-columns: 1fr 1.08fr; border: 1px solid #e0e7df; border-radius: 28px; background: white; overflow: hidden; box-shadow: 0 24px 70px #1720190a; }
.register-story { padding: 52px 44px 36px; color: #fff; background: radial-gradient(ellipse at top right, #31522b 0%, transparent 65%), #101713; display: flex; flex-direction: column; }
.register-eyebrow { display: block; color: #4c9834; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.register-story .register-eyebrow { color: #9ce17d; }
.register-story h1 { margin: 24px 0 22px; font-size: clamp(34px, 3.5vw, 48px); line-height: 1.12; letter-spacing: -.055em; }
.register-story h1 em { color: #9ce17d; font-style: normal; }
.register-story > p { color: #b3bdb5; max-width: 350px; font-size: 15px; }
.register-benefits { display: grid; gap: 23px; margin: 34px 0; }
.register-benefits > div { display: flex; align-items: flex-start; gap: 15px; }
.register-benefits > div > span { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid #ffffff20; border-radius: 10px; color: #9ce17d; font-size: 11px; }
.register-benefits p { margin: 0; font-size: 12px; color: #a7b3aa; }
.register-benefits strong { display: block; color: white; margin-bottom: 4px; font-size: 14px; }
.register-story-footer { margin-top: auto; padding-top: 26px; border-top: 1px solid #ffffff16; font-size: 10px; letter-spacing: .17em; color: #bbc6bd; }
.register-story-footer span { margin: 0 12px; color: var(--green); }
.register-panel { padding: 42px 44px; }
.register-steps { display: flex; list-style: none; padding: 0; margin: 0 0 35px; gap: 24px; }
.register-steps li { display: flex; align-items: center; gap: 8px; color: #87928b; font-size: 12px; font-weight: 700; }
.register-steps li span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #f1f4ef; }
.register-steps li[aria-current] { color: #2e7121; }
.register-steps li[aria-current] span { background: #e4f5dc; }
h2 { font-size: 30px; line-height: 1.2; letter-spacing: -.045em; margin: 12px 0; }
.register-intro { color: var(--muted); font-size: 13px; margin: 0 0 26px; }
.register-field { margin-bottom: 15px; }
.register-field label { display: block; font-size: 12px; font-weight: 750; margin-bottom: 6px; }
.register-field input { width: 100%; height: 46px; padding: 0 13px; border: 1px solid #dfe6dd; border-radius: 10px; background: #fbfcfa; color: var(--ink); outline: none; }
.register-field input:focus { border-color: #65b946; box-shadow: 0 0 0 3px #76d95622; }
.register-field input[aria-invalid="true"] { border-color: #b73a3a; }
.register-field small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
.password-field { position: relative; }
.password-field input { padding-right: 65px; }
.password-field button { position: absolute; top: 6px; right: 6px; height: 34px; border: 0; background: transparent; color: #3d7c29; font-size: 12px; cursor: pointer; }
.field-error { display: block; color: #a82c2c; font-size: 11px; margin-top: 4px; }
.register-primary, .register-secondary { width: 100%; min-height: 48px; border: 0; border-radius: 11px; cursor: pointer; font-weight: 750; font-size: 13px; }
.register-primary { display: flex; align-items: center; justify-content: center; gap: 15px; background: var(--ink); color: white; margin-top: 22px; }
.register-primary:hover { background: #2c402e; }
button:disabled { opacity: .5; cursor: not-allowed; }
button:focus-visible, a:focus-visible { outline: 3px solid #65b946; outline-offset: 3px; }
.register-secondary { background: #edf7e9; color: #347b28; }
.register-note { color: var(--muted); text-align: center; font-size: 11px; margin: 12px 0 0; }
.register-alert { padding: 12px 14px; border: 1px solid #efd9d9; border-radius: 10px; color: #a82c2c; background: #fff6f6; font-size: 13px; }
.account-success { color: #347b28; background: #edf7e9; border-radius: 8px; padding: 9px 12px; margin-bottom: 20px; font-size: 12px; font-weight: 700; }
.registration-plans { display: grid; gap: 11px; }
.registration-plan { display: block; text-align: left; padding: 17px; border: 1px solid #dfe6dd; border-radius: 13px; color: var(--ink); background: white; cursor: pointer; }
.registration-plan[aria-checked="true"] { border-color: #65b946; box-shadow: 0 0 0 2px #65b946; background: #f7fbf4; }
.registration-plan:disabled { opacity: .65; }
.registration-plan-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 800; }
.registration-plan-price { font-size: 14px; }
.registration-plan-description { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; }
.registration-plan-interval { font-size: 10px; font-weight: 500; }
.register-skip { display: block; text-align: center; font-size: 12px; color: var(--muted); margin-top: 20px; }
.register-footer { display: flex; justify-content: space-between; width: min(1120px, calc(100% - 48px)); margin: 0 auto 28px; color: #87928b; font-size: 11px; }
@media (max-width: 850px) { .register-layout { grid-template-columns: .85fr 1fr; } .register-story, .register-panel { padding: 32px 26px; } }
@media (max-width: 650px) {
    .register-nav { width: calc(100% - 28px); min-height: 78px; }
    .register-nav > a:last-child { max-width: 115px; text-align: right; font-size: 11px; }
    .register-layout { width: calc(100% - 28px); grid-template-columns: 1fr; margin-top: 8px; border-radius: 20px; }
    .register-story { padding: 25px; } .register-story h1 { font-size: 32px; margin: 15px 0 10px; }
    .register-story > p { margin: 0; } .register-benefits, .register-story-footer { display: none; }
    .register-panel { padding: 28px 24px; } .register-steps { gap: 18px; margin-bottom: 27px; }
    h2 { font-size: 28px; } .register-footer { width: calc(100% - 28px); }
}