.access-page { display: grid; min-height: 100vh; grid-template-columns: 1.05fr 1fr; color: var(--cx-color-text); background: var(--cx-color-background); }
.access-story { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 56px 48px; color: var(--cx-color-text-inverse); background: var(--cx-gradient-brand); }
.access-decoration { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--cx-color-text-inverse); opacity: .25; pointer-events: none; }
.access-decoration path,
.access-decoration circle { stroke: currentColor; }
.access-brand { position: relative; z-index: 1; display: inline-flex; width: fit-content; align-items: center; gap: 12px; color: var(--cx-color-text); text-decoration: none; }
.access-brand > img { display: block; width: 40px; height: 40px; flex: none; }
.access-brand strong { font-size: 19px; letter-spacing: -.02em; }
.access-brand--inverse { color: var(--cx-color-text-inverse); }
.access-story__content { position: relative; z-index: 1; max-width: 500px; margin-top: auto; }
.access-story h1 { margin: 0; font-size: clamp(34px, 3.4vw, 48px); font-weight: 650; line-height: 1.12; letter-spacing: -.045em; }
.access-story__content > p { margin: 18px 0 0; color: color-mix(in srgb, var(--cx-color-text-inverse) 75%, transparent); font-size: 17px; }
.access-story ul { display: grid; gap: 20px; margin: 38px 0 0; padding: 0; list-style: none; }
.access-story li { display: flex; align-items: center; gap: 15px; }
.access-story li > span { display: grid; width: 40px; height: 40px; flex: none; place-items: center; background: color-mix(in srgb, var(--cx-color-text-inverse) 11%, transparent); border-radius: var(--cx-radius-lg); font-size: 17px; font-weight: 700; }
.access-story li strong,
.access-story li small { display: block; }
.access-story li strong { font-weight: 600; }
.access-story li small { margin-top: 3px; color: color-mix(in srgb, var(--cx-color-text-inverse) 70%, transparent); font-size: 13px; line-height: 1.5; }

.access-form-side { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; padding: 48px 20px; background: color-mix(in srgb, var(--cx-color-surface-muted) 60%, var(--cx-color-background)); }
.access-decoration--form { color: var(--cx-color-border); opacity: .55; }
.access-wrap { position: relative; z-index: 1; width: 100%; max-width: 448px; }
.access-card { padding: 32px; background: var(--cx-color-surface); border: 1px solid var(--cx-color-border); border-radius: calc(var(--cx-radius-xl) + 4px); box-shadow: var(--cx-shadow-md); }
.access-brand--mobile { display: none; margin-bottom: 24px; }
.access-brand--mobile > img { width: 36px; height: 36px; }
.access-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--cx-color-surface-muted); border-radius: var(--cx-radius-xl); }
.access-tabs a { padding: 9px 12px; color: var(--cx-color-text-muted); border-radius: var(--cx-radius-lg); font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; transition: color 120ms ease, background 120ms ease, box-shadow 120ms ease; }
.access-tabs a:hover { color: var(--cx-color-text); }
.access-tabs a.is-active { color: var(--cx-color-text); background: var(--cx-color-surface); box-shadow: var(--cx-shadow-sm); }
.access-heading { margin-top: 28px; }
.access-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.025em; }
.access-heading p { margin: 7px 0 0; color: var(--cx-color-text-muted); font-size: 13px; }
.access-form { display: grid; gap: 17px; margin-top: 25px; }
.access-form > label > span:first-child { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; }
.access-input { position: relative; display: block; }
.access-input > i { position: absolute; top: 50%; left: 13px; color: var(--cx-color-text-muted); font-size: 14px; font-style: normal; transform: translateY(-50%); pointer-events: none; }
.access-input input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 9px 42px 9px 39px; color: var(--cx-color-text); background: var(--cx-color-background); border: 1px solid var(--cx-color-border-strong); border-radius: var(--cx-radius-xl); font: inherit; font-size: 13px; outline: none; }
.access-input input::placeholder { color: var(--cx-color-text-subtle); }
.access-input input:focus { border-color: var(--cx-color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-color-primary) 15%, transparent); }
.access-input > button { position: absolute; top: 50%; right: 11px; display: grid; width: 30px; height: 30px; padding: 0; place-items: center; color: var(--cx-color-text-muted); background: transparent; border: 0; border-radius: var(--cx-radius-md); cursor: pointer; transform: translateY(-50%); }
.access-input > button:hover { color: var(--cx-color-text); background: var(--cx-color-surface-muted); }
.access-eye { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.access-eye[hidden] { display: none; }
.access-extras { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; }
.access-extras label { display: inline-flex; align-items: center; gap: 7px; color: var(--cx-color-text-muted); cursor: pointer; }
.access-extras input { accent-color: var(--cx-color-primary); }
.access-extras button { padding: 0; color: var(--cx-color-primary); background: transparent; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.access-error { margin: 0; padding: 10px 12px; color: var(--cx-color-danger); background: color-mix(in srgb, var(--cx-color-danger) 9%, var(--cx-color-surface)); border: 1px solid color-mix(in srgb, var(--cx-color-danger) 25%, var(--cx-color-surface)); border-radius: var(--cx-radius-lg); font-size: 13px; }
.access-submit { display: inline-flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: 9px; padding: 9px 16px; color: var(--cx-color-text-inverse); background: var(--cx-gradient-brand); border: 0; border-radius: var(--cx-radius-xl); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: filter 120ms ease; }
.access-submit:hover { filter: brightness(.96); }
.access-submit:disabled { cursor: default; opacity: .7; }
.access-spinner { width: 16px; height: 16px; border: 2px solid color-mix(in srgb, var(--cx-color-text-inverse) 35%, transparent); border-top-color: var(--cx-color-text-inverse); border-radius: 50%; animation: access-spin .75s linear infinite; }
.access-spinner[hidden] { display: none; }
.access-note { margin: 22px 0 0; color: var(--cx-color-text-muted); font-size: 11px; line-height: 1.5; text-align: center; }
@keyframes access-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    .access-page { grid-template-columns: 1fr; }
    .access-story { display: none; }
    .access-form-side { min-height: 100vh; }
    .access-brand--mobile { display: inline-flex; }
}
@media (max-width: 520px) {
    .access-form-side { padding: 24px 14px; }
    .access-card { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) { .access-spinner { animation-duration: 1.5s; } }