@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap");

:root {
  color-scheme: light;
  --brand-forest: #0c3325;
  --brand-forest-deep: #062419;
  --brand-forest-soft: #174a36;
  --brand-mint: #a8efc8;
  --brand-paper: #f5f1e8;
  --brand-card: #fffdf8;
  --brand-ink: #14231b;
  --brand-muted: #66736b;
  --brand-line: #d9e1d9;
  --brand-danger: #a33c3c;
  --brand-success: #1b704b;
  --brand-shadow: 0 26px 70px rgba(3, 27, 18, .24);
}

body.brand-auth {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--brand-ink);
  background:
    radial-gradient(700px 520px at 9% 8%, rgba(168,239,200,.19), transparent 65%),
    radial-gradient(600px 500px at 100% 92%, rgba(95,163,121,.14), transparent 64%),
    linear-gradient(135deg, var(--brand-forest-deep), var(--brand-forest));
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.brand-auth *, .brand-auth *::before, .brand-auth *::after { box-sizing: border-box; }
.brand-auth a { color: inherit; }
.brand-auth button, .brand-auth input { font: inherit; }
.brand-auth button, .brand-auth a { -webkit-tap-highlight-color: transparent; }
.brand-auth :focus-visible { outline: 3px solid var(--brand-mint); outline-offset: 3px; }

.brand-auth-shell {
  width: min(1160px, calc(100% - 56px));
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 500px);
  align-items: center;
  gap: clamp(54px, 9vw, 132px);
  padding: 68px 0;
}
.brand-auth-intro { color: #f8fbf7; max-width: 560px; }
.brand-auth-logo { display: block; width: 116px; height: auto; margin-bottom: 64px; }
.brand-auth-eyebrow {
  margin: 0 0 19px; color: var(--brand-mint); font: 500 .72rem/1 DM Mono, monospace;
  letter-spacing: .16em; text-transform: uppercase;
}
.brand-auth-intro h1 {
  max-width: 10ch; margin: 0; font-family: Newsreader, Georgia, serif;
  font-size: clamp(3.8rem, 7vw, 6.8rem); font-weight: 500; letter-spacing: -.065em; line-height: .86;
}
.brand-auth-intro h1 em { color: var(--brand-mint); font-style: normal; }
.brand-auth-copy {
  max-width: 43ch; margin: 34px 0 0; color: rgba(248,251,247,.74);
  font-size: 1rem; line-height: 1.7;
}
.brand-auth-proof {
  display: flex; gap: 14px; align-items: flex-start; max-width: 450px;
  margin-top: 46px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.17);
  color: rgba(248,251,247,.63); font-size: .78rem; line-height: 1.55;
}
.brand-auth-proof-mark {
  flex: 0 0 25px; width: 25px; height: 25px; border: 1px solid var(--brand-mint);
  border-radius: 50%; color: var(--brand-mint); font: 500 .72rem/23px DM Mono, monospace; text-align: center;
}
.brand-auth-proof strong { display: block; margin-bottom: 3px; color: #f8fbf7; font-size: .84rem; }
.brand-auth-card {
  padding: 30px; border: 1px solid rgba(255,255,255,.5); border-radius: 28px;
  background: var(--brand-card); box-shadow: var(--brand-shadow);
}
.brand-auth-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  margin-bottom: 30px; border-radius: 15px; background: #e8eee8;
}
.brand-auth-tab {
  min-height: 43px; border: 0; border-radius: 11px; color: var(--brand-muted);
  background: transparent; font-size: .8rem; font-weight: 800; cursor: pointer; text-decoration: none;
  display: grid; place-items: center;
}
.brand-auth-tab.is-active, .brand-auth-tab:hover { color: var(--brand-ink); background: #fff; box-shadow: 0 2px 10px rgba(20,35,27,.08); }
.brand-auth-kicker { margin: 0 0 8px; color: var(--brand-success); font: 500 .67rem/1 DM Mono, monospace; letter-spacing: .12em; text-transform: uppercase; }
.brand-auth-title { margin: 0 0 8px; color: var(--brand-ink); font-size: 1.52rem; letter-spacing: -.04em; line-height: 1.08; }
.brand-auth-subtitle { margin: 0 0 25px; color: var(--brand-muted); font-size: .83rem; line-height: 1.6; }
.section-divider {
  display: flex; align-items: center; gap: 10px; margin: 25px 0 14px;
  color: var(--brand-muted); font: 500 .64rem/1 DM Mono, monospace; letter-spacing: .1em; text-transform: uppercase;
}
.section-divider::after { content: ""; height: 1px; flex: 1; background: var(--brand-line); }
.field { margin-bottom: 16px; }
.field-label, .label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-bottom: 7px; color: var(--brand-ink); font-size: .76rem; font-weight: 800;
}
.field-label .helper { color: var(--brand-muted); font-size: .67rem; font-weight: 500; }
.required, .req { color: var(--brand-success); }
.input, .textarea {
  width: 100%; min-height: 49px; border: 1px solid var(--brand-line); border-radius: 12px;
  padding: 12px 13px; color: var(--brand-ink); background: #fff; outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.input::placeholder, .textarea::placeholder { color: #99a59d; }
.input:focus, .textarea:focus { border-color: var(--brand-success); background: #fff; box-shadow: 0 0 0 4px rgba(27,112,75,.12); }
.input[aria-invalid="true"] { border-color: var(--brand-danger); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(163,60,60,.12); }
.inline-error, .error-text { color: var(--brand-danger); font-size: .72rem; line-height: 1.45; }
.inline-error { margin-top: 6px; }
.error-text { margin-top: 12px; padding: 11px 12px; border: 1px solid #efcccc; border-radius: 10px; background: #fff2f0; }
.status-text, .hint { color: var(--brand-muted); font-size: .72rem; line-height: 1.5; }
.hint.error { display: none; color: var(--brand-danger); }
.consent-group { display: flex; flex-direction: column; gap: 13px; margin-top: 16px; }
.consent-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.consent-row input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--brand-success); }
.consent-copy { color: var(--brand-muted); font-size: .7rem; line-height: 1.55; }
.consent-copy a { color: var(--brand-success); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.actions { display: flex; flex-direction: column; gap: 11px; margin-top: 23px; }
.btn-primary {
  width: 100%; min-height: 51px; border: 0; border-radius: 13px; color: #f8fbf7;
  background: var(--brand-forest); box-shadow: 0 11px 24px rgba(12,51,37,.2);
  font-size: .82rem; font-weight: 800; cursor: pointer; transition: transform .16s ease, background .16s ease, opacity .16s ease;
}
.btn-primary:hover:not(:disabled) { background: var(--brand-forest-deep); transform: translateY(-1px); }
.btn-primary:disabled { cursor: wait; opacity: .62; }
.btn-secondary-link, .btn-link {
  align-self: center; color: var(--brand-success); font-size: .74rem; font-weight: 800;
  text-decoration: none; text-align: center;
}
.btn-secondary-link:hover, .btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-note, .legal-note { margin: 17px 3px 0; color: var(--brand-muted); font-size: .67rem; line-height: 1.55; text-align: center; }
.brand-auth-badge { display: inline-flex; margin-bottom: 17px; color: var(--brand-success); font: 500 .66rem/1 DM Mono, monospace; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 840px) {
  .brand-auth-shell { width: min(540px, calc(100% - 32px)); grid-template-columns: 1fr; gap: 38px; padding: 40px 0; }
  .brand-auth-intro { max-width: 540px; text-align: center; }
  .brand-auth-logo { margin: 0 auto 38px; }
  .brand-auth-intro h1, .brand-auth-copy, .brand-auth-proof { margin-left: auto; margin-right: auto; }
  .brand-auth-intro h1 { max-width: 12ch; }
  .brand-auth-proof { text-align: left; }
}
@media (max-width: 480px) {
  .brand-auth-shell { width: 100%; padding: 28px 16px 20px; }
  .brand-auth-intro h1 { font-size: clamp(3.3rem, 16vw, 4.5rem); }
  .brand-auth-copy { margin-top: 23px; font-size: .9rem; }
  .brand-auth-proof { margin-top: 27px; }
  .brand-auth-card { padding: 21px 18px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-auth *, .brand-auth *::before, .brand-auth *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}