.auth-page { background: #f7f6f0; color: #183b3a; }
.auth-header { display: flex; align-items: center; justify-content: space-between; max-width: 1440px; margin: auto; padding: 22px 5%; }
.auth-header .brand { padding: 0; color: #183b3a; font-size: 20px; }
.auth-header .brand-mark { box-shadow: none; }
.auth-header .button { border-radius: 30px; color: #214947; background: transparent; border-color: #c8cec2; }
.auth-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); align-items: center; gap: 8%; max-width: 1440px; min-height: calc(100vh - 90px); margin: auto; padding: 38px 5% 55px; }
.auth-story { min-width: 0; }
.auth-kicker { display: inline-block; padding: 8px 13px; border-radius: 30px; border: 1px solid #dce2d8; background: #eef1e9; color: #577064; }
.auth-story h1 { margin: 25px 0; font: 500 clamp(45px,5.8vw,80px)/1.04 'DM Sans',sans-serif; letter-spacing: -.065em; }
.auth-story h1 span { color: #b9694d; display: inline-block; position: relative; }
.auth-story h1 span::after { content: ''; display: block; width: 48%; height: 4px; margin-top: 7px; border-radius: 50%; background: #e4c46c; }
.auth-story > p { max-width: 490px; font-size: 17px; color: #677870; line-height: 1.75; }
.auth-benefits { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 30px; color: #49655c; font-size: 13px; }
.auth-benefits span { display: flex; align-items: center; gap: 9px; }
.auth-benefits svg { width: 16px; color: #bb785e; }
.auth-vignette { display: flex; gap: 20px; align-items: center; position: relative; margin-top: 55px; max-width: 450px; }
.auth-vignette::before { content: ''; position: absolute; z-index: -1; inset: -20px -20px -10px; background: #e5ecdf; border-radius: 50%; }
.auth-vignette > div { padding: 24px; border: 1px solid #e2e4d8; background: #fffefa; border-radius: 20px; box-shadow: 0 16px 45px -28px #16403a66; }
.auth-vignette > div:first-child { flex: 1; }
.auth-vignette .eyebrow { color: #9a9d80; font-size: 9px; }
.auth-vignette h3 { font: 400 24px 'Instrument Serif',serif; margin: 7px 0 20px; }
.auth-vignette p { margin-top: 10px; color: #577568; font-size: 12px; }
.auth-vignette p svg { width: 14px; margin-right: 5px; color: #bfa055; }
.auth-vignette .memory-card { width: 170px; transform: rotate(4deg); background: #fff9e9; margin-bottom: -45px; }
.memory-card > svg { color: #b3914b; width: 15px; }
.memory-card p { font: italic 22px/1.2 'Instrument Serif',serif; margin: 20px 0; }
.auth-form-wrap { min-width: 0; }
.auth-card { padding: 38px; border: 1px solid #e4e3da; border-radius: 28px; background: #fffefbd9; box-shadow: 0 18px 55px -35px #163a3566; }
.terracotta { color: #b97c5e; }
.auth-card h2 { margin: 12px 0 10px; font: 500 36px/1.13 'DM Sans',sans-serif; letter-spacing: -.05em; }
.auth-card > .muted { color: #7e8a80; font-size: 14px; }
.auth-card form { margin-top: 27px; gap: 19px; }
.auth-card label { color: #3b5d50; font-size: 12px; }
.auth-card input { min-height: 49px; background: #fffefa; border-color: #d8d9cf; }
.auth-card .field-row { grid-template-columns: 1fr 1fr; }
.password-field { display: flex; align-items: center; position: relative; margin-top: 7px; }
.password-field input { padding-right: 45px; }
.password-field button { position: absolute; right: 9px; color: #8a9a90; }
.auth-card .button.auth-submit { background: #214947; color: white; width: 100%; min-height: 52px; box-shadow: 0 5px 12px #21494718; }
.auth-card .button.auth-submit:hover { background: #173b39; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 28px 0; color: #a7ada0; font-size: 10px; font-weight: 500; letter-spacing: .12em; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: #e7e7de; }
.auth-switch { margin-top: 30px; color: #889287; font-size: 12px; text-align: center; }
.auth-switch a { color: #ac7259; text-decoration: underline; font-weight: 700; margin-left: 5px; }
.auth-footnote { max-width: 430px; margin: 20px auto 0; text-align: center; color: #8b968a; font-size: 11px; }
.register-page .auth-story { padding: 35px 0; }
.register-page { background: linear-gradient(90deg,#dcebe1 0 46%,#f5f2e9 46%); }
.register-page .auth-story h1 { max-width: 500px; }
.register-page .auth-vignette .memory-card { display: none; }
@media(max-width: 850px) { .auth-layout { gap: 5%; } .auth-card { padding: 25px; } .auth-story h1 { font-size: 48px; } .auth-vignette { display: none; } .auth-story > p { font-size: 15px; } }
@media(max-width: 640px) {
  .auth-header { padding: 20px; } .auth-header .brand { font-size: 18px; }
  .auth-layout { grid-template-columns: 1fr; gap: 34px; padding: 28px 20px 45px; }
  .auth-story h1 { margin: 23px 0; font-size: 48px; } .auth-story h1 br { display: none; }
  .auth-story > p { font-size: 15px; } .auth-benefits { gap: 17px; margin-top: 24px; font-size: 12px; }
  .auth-card { padding: 25px; border-radius: 24px; } .auth-card h2 { font-size: 32px; }
  .auth-card .field-row { grid-template-columns: 1fr; }
  .register-page { background: linear-gradient(#dcebe1 0 390px,#f5f2e9 390px); }
  .register-page .auth-story { padding: 0; }
}