:root {
    --ct-ink: #101716;
    --ct-ink-soft: #1a2422;
    --ct-ivory: #f3efe7;
    --ct-ivory-light: #faf8f3;
    --ct-paper: #fffdfa;
    --ct-bronze: #76583b;
    --ct-bronze-light: #a67e55;
    --ct-muted: #565d58;
    --ct-line: #d9d3c8;
    --ct-danger: #9d2f2f;
    --ct-success: #315f4b;
    --ct-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --ct-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ct-shadow: 0 30px 80px rgba(16, 23, 22, .13);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
    margin: 0;
    color: var(--ct-ink);
    background: var(--ct-ivory-light);
    font-family: var(--ct-sans);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; }
:focus-visible {
    outline: 3px solid #b58145;
    outline-offset: 3px;
}

.ct-brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: var(--ct-ink);
    text-decoration: none;
}
.ct-brand-mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ct-bronze-light);
    border-radius: 50%;
    font: 400 .76rem/1 var(--ct-serif);
    letter-spacing: -.06em;
}
.ct-brand-name {
    font: 400 1.28rem/1 var(--ct-serif);
    letter-spacing: -.025em;
}

.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(360px, .88fr) minmax(520px, 1.12fr);
    background: var(--ct-paper);
}
.auth-story {
    position: sticky;
    top: 0;
    min-height: 100vh;
    padding: 64px clamp(40px, 6vw, 96px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
    background:
        radial-gradient(circle at 78% 16%, rgba(154, 118, 80, .32), transparent 31%),
        var(--ct-ink);
}
.auth-story .ct-brand { color: white; }
.auth-story .ct-brand-mark { border-color: #c8a57e; }
.auth-eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #d6b58f;
    font-size: .67rem;
    font-weight: 750;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.auth-eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.auth-story h1 {
    max-width: 640px;
    margin: 24px 0 22px;
    font: 400 clamp(3rem, 5vw, 5.4rem)/.94 var(--ct-serif);
    letter-spacing: -.05em;
}
.auth-story p {
    max-width: 550px;
    margin: 0;
    color: rgba(255,255,255,.66);
    font-size: 1rem;
    line-height: 1.75;
}
.auth-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 48px;
    border-top: 1px solid rgba(255,255,255,.16);
    border-bottom: 1px solid rgba(255,255,255,.16);
}
.auth-proof div { padding: 22px 18px 22px 0; }
.auth-proof div + div { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.16); }
.auth-proof strong { display: block; font: 400 1.5rem/1 var(--ct-serif); }
.auth-proof span {
    display: block;
    margin-top: 8px;
    color: rgba(255,255,255,.54);
    font-size: .67rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.auth-story-foot { color: rgba(255,255,255,.42); font-size: .72rem; }

.auth-main {
    min-width: 0;
    padding: 64px clamp(24px, 7vw, 110px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ct-ivory);
}
.auth-card { width: min(100%, 560px); }
.auth-mobile-brand { display: none; margin-bottom: 38px; }
.auth-card h1,
.auth-card h2 {
    margin: 0;
    font: 400 clamp(2.55rem, 5vw, 4.2rem)/.98 var(--ct-serif);
    letter-spacing: -.045em;
}
.auth-intro {
    max-width: 500px;
    margin: 18px 0 34px;
    color: var(--ct-muted);
    line-height: 1.7;
}
.auth-note {
    margin: 0 0 26px;
    padding: 14px 16px;
    color: var(--ct-success);
    background: rgba(49, 95, 75, .08);
    border: 1px solid rgba(49, 95, 75, .24);
    font-size: .82rem;
    line-height: 1.55;
}
.form-group { margin-bottom: 18px; }
.form-group label, .form-label {
    display: block;
    margin-bottom: 7px;
    color: var(--ct-ink-soft);
    font-size: .79rem;
    font-weight: 700;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    color: var(--ct-ink);
    background: var(--ct-paper);
    border: 1px solid #bdb7ac;
    border-radius: 0;
}
.form-group input::placeholder { color: #777d79; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--ct-bronze);
    box-shadow: 0 0 0 3px rgba(118, 88, 59, .12);
    outline: 0;
}
.form-help {
    display: block;
    margin-top: 7px;
    color: var(--ct-muted);
    font-size: .72rem;
    line-height: 1.45;
}
.password-wrap { position: relative; }
.password-wrap input { padding-right: 84px; }
.password-toggle {
    position: absolute;
    top: 1px;
    right: 1px;
    min-height: 48px;
    padding: 0 13px;
    color: var(--ct-bronze);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: .73rem;
    font-weight: 750;
}
.plan-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.plan-option {
    position: relative;
    display: block;
    cursor: pointer;
}
.plan-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.plan-option span {
    min-height: 72px;
    padding: 13px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--ct-muted);
    background: rgba(255,255,255,.45);
    border: 1px solid var(--ct-line);
}
.plan-option strong { color: var(--ct-ink); font: 400 1.05rem/1.2 var(--ct-serif); }
.plan-option small { margin-top: 5px; font-size: .68rem; }
.plan-option input:checked + span {
    color: rgba(255,255,255,.7);
    background: var(--ct-ink);
    border-color: var(--ct-ink);
}
.plan-option input:checked + span strong { color: white; }
.plan-option input:focus-visible + span { outline: 3px solid #b58145; outline-offset: 2px; }
.check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 22px 0;
    color: var(--ct-muted);
    font-size: .77rem;
    line-height: 1.5;
}
.check-row input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--ct-ink); flex: 0 0 auto; }
.check-row a { color: var(--ct-bronze); font-weight: 700; }
.auth-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ct-button {
    min-height: 52px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    color: white;
    background: var(--ct-ink);
    border: 1px solid var(--ct-ink);
    text-decoration: none;
    cursor: pointer;
    font-size: .79rem;
    font-weight: 750;
    letter-spacing: .04em;
}
.ct-button:hover { background: var(--ct-bronze); border-color: var(--ct-bronze); }
.ct-button.secondary { color: var(--ct-ink); background: transparent; border-color: var(--ct-line); }
.ct-button.full { width: 100%; }
.text-link { color: var(--ct-bronze); font-size: .8rem; font-weight: 700; text-decoration: none; }
.auth-footer {
    margin-top: 28px;
    color: var(--ct-muted);
    text-align: center;
    font-size: .78rem;
}
.auth-footer a { color: var(--ct-bronze); font-weight: 750; }
.alert {
    margin-bottom: 22px;
    padding: 14px 16px;
    font-size: .82rem;
    line-height: 1.55;
    border: 1px solid;
}
.alert-error { color: var(--ct-danger); background: rgba(157,47,47,.07); border-color: rgba(157,47,47,.25); }
.alert-success { color: var(--ct-success); background: rgba(49,95,75,.07); border-color: rgba(49,95,75,.25); }

.legal-header {
    padding: 28px 0;
    background: var(--ct-paper);
    border-bottom: 1px solid var(--ct-line);
}
.legal-container { width: min(920px, calc(100% - 48px)); margin-inline: auto; }
.legal-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.legal-back { color: var(--ct-bronze); font-size: .78rem; font-weight: 700; text-decoration: none; }
.legal-main { padding: 84px 0 110px; }
.legal-main h1 { margin: 0; font: 400 clamp(3rem, 7vw, 5.6rem)/.96 var(--ct-serif); letter-spacing: -.05em; }
.legal-updated { margin: 18px 0 54px; color: var(--ct-muted); font-size: .78rem; }
.legal-main h2 { margin: 44px 0 13px; font: 400 1.8rem/1.2 var(--ct-serif); }
.legal-main p, .legal-main li { color: var(--ct-muted); line-height: 1.75; }
.legal-main li + li { margin-top: 8px; }
.legal-callout { margin: 34px 0; padding: 22px; background: var(--ct-paper); border-left: 3px solid var(--ct-bronze); }

.state-page {
    min-height: 100vh;
    padding: 32px;
    display: grid;
    place-items: center;
    background: var(--ct-ivory);
}
.state-card { width: min(100%, 600px); padding: clamp(34px, 7vw, 70px); text-align: center; background: var(--ct-paper); border: 1px solid var(--ct-line); box-shadow: var(--ct-shadow); }
.state-code { color: var(--ct-bronze); font: 400 clamp(4rem, 13vw, 8rem)/.8 var(--ct-serif); }
.state-card h1, .state-card h2 { margin: 25px 0 14px; font: 400 clamp(2rem, 6vw, 3.5rem)/1 var(--ct-serif); }
.state-card p { margin: 0 0 28px; color: var(--ct-muted); line-height: 1.65; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 900px) {
    .auth-page { display: block; }
    .auth-story { display: none; }
    .auth-main { min-height: 100vh; padding: 42px 24px 64px; }
    .auth-mobile-brand { display: inline-flex; }
}
@media (max-width: 520px) {
    .auth-main { align-items: flex-start; padding-inline: 18px; }
    .auth-card h1,
    .auth-card h2 { font-size: 2.7rem; }
    .plan-options { grid-template-columns: 1fr; }
    .auth-actions { align-items: stretch; flex-direction: column; }
    .auth-actions .ct-button { width: 100%; }
    .legal-container { width: min(100% - 30px, 920px); }
    .legal-top { align-items: flex-start; flex-direction: column; }
    .legal-main { padding-top: 58px; }
}

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