:root {
  --paper: #faf9f6;
  --paper-deep: #f2f0ea;
  --surface: #ffffff;
  --ink: #10151a;
  --dim: #4f5b64;
  --faint: #6b747c;
  --line: #d9ddd8;
  --green: #0d9e63;
  --green-deep: #087c4e;
  --green-soft: oklch(95% 0.045 158);
  --night: #0d1114;
  --night-raised: #151d22;
  --night-line: #2a363e;
  --night-dim: #b7c2c9;
  --amber: #8b5b17;
  --amber-bg: #fff4de;
  --amber-line: oklch(from var(--amber-bg) calc(l - 0.13) c h);
  --danger: #9f3034;
  --danger-bg: #fff0ef;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

.login-shell { display: grid; min-height: 100svh; grid-template-columns: minmax(0, 1fr) minmax(400px, 42%); }

/* ---- form column (warm paper) ---- */
.login-panel { display: flex; width: min(100%, 560px); flex-direction: column; justify-content: center; justify-self: center; padding: 56px clamp(28px, 6vw, 96px); }
.login-brand { display: inline-flex; width: fit-content; align-items: center; gap: 10px; color: var(--ink); font-family: var(--mono); font-size: 15px; font-weight: 650; letter-spacing: .03em; text-decoration: none; }
.login-brand img { border-radius: 6px; }
.login-brand span span { color: var(--green-deep); }
.login-brand:hover > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.login-kicker { margin: clamp(56px, 10vh, 96px) 0 12px; color: var(--green-deep); font-family: var(--mono); font-size: 10px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.login-panel h1 { margin: 0; font-size: clamp(42px, 5vw, 72px); font-weight: 640; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.login-lead { max-width: 450px; margin: 20px 0 0; color: var(--dim); font-size: 17px; }

.login-transport-notice { display: flex; align-items: center; gap: 9px; margin-top: 26px; padding: 9px 11px; border: 1px solid var(--amber-line); background: var(--amber-bg); color: var(--amber); font-family: var(--mono); font-size: 11px; }
.login-transport-notice[hidden] { display: none; }
.login-transport-notice > span:first-child { display: inline-grid; width: 16px; height: 16px; flex: none; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; font-weight: 700; }

.login-form { display: grid; gap: 16px; margin-top: 32px; }
.login-form label { display: grid; gap: 6px; color: var(--dim); font-family: var(--mono); font-size: 10px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.login-form input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); color: var(--ink); font-family: var(--sans); font-size: 15px; letter-spacing: 0; text-transform: none; }
.login-form input:focus { border-color: var(--green-deep); outline: 2px solid rgba(13, 158, 99, .2); outline-offset: 1px; }
.login-form label small { color: var(--faint); font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: 0; line-height: 1.45; text-transform: none; }
.login-guidance { margin: 0; color: var(--faint); font-size: 12px; line-height: 1.5; }
.login-identity-boundary { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 12px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--dim); font-size: 15px; line-height: 1.55; }
.login-identity-boundary strong { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 650; }
.login-identity-boundary__mark { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 2px; background: var(--green-soft); color: var(--green-deep); font-family: var(--mono); font-size: 12px; font-weight: 700; }
.login-error { margin: 0; padding: 10px 12px; border: 1px solid var(--danger); border-radius: 2px; background: var(--danger-bg); color: var(--danger); font-family: var(--mono); font-size: 12px; line-height: 1.5; }
.login-error[hidden] { display: none; }

.login-submit { display: inline-flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--night); border-radius: 4px; background: var(--night); color: #fff; font-family: var(--mono); font-size: 12px; font-weight: 650; letter-spacing: .02em; cursor: pointer; transition: transform .18s ease, background-color .18s ease, border-color .18s ease; }
.login-submit:hover { transform: translateY(-1px); border-color: var(--night-raised); background: var(--night-raised); }
.login-submit:active { transform: translateY(0); }
.login-submit:disabled { transform: none; cursor: progress; opacity: .68; }
.login-submit__arrow { display: inline-block; transition: transform .18s ease; }
.login-submit:hover .login-submit__arrow { transform: translateX(2px); }

.login-invitation-actions { display: grid; gap: 10px; margin-top: 32px; }
.login-invitation-actions form { margin: 0; }
.login-invitation-actions .login-submit,
.login-invitation-actions .login-secondary { width: 100%; }
.login-secondary { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 12px 16px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 620; text-decoration: none; transition: border-color .18s ease, background-color .18s ease; }
.login-secondary:hover { border-color: var(--faint); background: var(--surface); }
.login-new-company { display: grid; gap: 10px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--faint); font-size: 13px; }
.login-existing-account { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--faint); font-size: 13px; }
.login-existing-account form { margin: 0; }
.login-text-action { min-height: 40px; padding: 5px 2px; border: 0; background: transparent; color: var(--green-deep); font: inherit; font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.login-text-action:hover { color: var(--ink); }
.login-signup-error { margin-top: 24px; }
.login-check { display: grid !important; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px !important; color: var(--dim) !important; font-family: var(--sans) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.5; text-transform: none !important; }
.login-check input { width: 18px; min-height: 18px; margin: 2px 0 0; accent-color: var(--green-deep); }
.login-footnote { margin: 26px 0 0; color: var(--faint); font-family: var(--mono); font-size: 10px; line-height: 1.6; }

.signup-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: clamp(48px, 9vh, 72px); }
.signup-steps span { display: flex; min-height: 32px; align-items: center; gap: 8px; border-top: 2px solid var(--line); color: var(--faint); font-family: var(--mono); font-size: 10px; font-weight: 650; letter-spacing: .06em; }
.signup-steps span.is-current { border-color: var(--green); color: var(--ink); }
.signup-steps b { display: inline-grid; width: 18px; height: 18px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; }
.signup-steps + .login-kicker { margin-top: 34px; }

/* ---- boundary aside (night, living river) ---- */
.login-aside { position: relative; display: flex; min-height: 100%; flex-direction: column; overflow: hidden; padding: 52px clamp(30px, 5.5vw, 80px) 0; background: var(--night); color: #fff; }
.river-stage { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .9s ease .12s; }
.river-stage.is-enhanced { opacity: 1; }
#river-canvas { display: block; width: 100%; height: 100%; }
.login-aside__mark { position: relative; margin: 0; color: var(--green); font-family: var(--mono); font-size: 13px; font-weight: 700; }
.login-aside__copy { position: relative; margin-top: auto; padding-top: clamp(64px, 12vh, 140px); }
.login-aside__eyebrow { margin: 0 0 10px; color: var(--green); font-family: var(--mono); font-size: 10px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.login-aside__lead { max-width: 430px; margin: 0; color: var(--night-dim); font-size: 14px; }

.login-aside__ledger { position: relative; display: flex; flex-wrap: wrap; row-gap: 14px; margin: 56px 0 0; padding: 16px 0 22px; border-top: 1px solid var(--night-line); background: var(--night); }
.login-aside__ledger > div { padding: 2px 22px; }
.login-aside__ledger > div:first-child { padding-left: 0; }
.login-aside__ledger > div + div { border-left: 1px solid var(--night-line); }
.login-aside__ledger dt { color: var(--night-dim); font-family: var(--mono); font-size: 10px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; opacity: .72; }
.login-aside__ledger dd { margin: 5px 0 0; color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: .03em; overflow-wrap: break-word; }

/* Invitation templates share this sheet but do not use the river or ledger. */
.login-aside:not(:has(.login-aside__ledger)) { padding-bottom: 52px; }
.login-aside > .login-aside__eyebrow { margin-top: auto; }
.login-aside > p:not(.login-aside__mark):not(.login-aside__eyebrow) { max-width: 430px; margin: 20px 0 0; color: var(--night-dim); font-size: 14px; }
.login-aside > h2 { max-width: 470px; margin: 0; font-size: clamp(28px, 3.4vw, 44px); font-weight: 620; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
.login-aside__rule { width: 64px; height: 1px; margin: 56px 0 16px; background: var(--night-line); }
.login-aside > span { color: var(--night-dim); font-family: var(--mono); font-size: 11px; }

/* ---- entrance (JS-enabled, motion-safe only) ---- */
@keyframes login-rise { from { opacity: 0; transform: translateY(16px); } }
html.js .login-panel > * { animation: login-rise .66s cubic-bezier(.2, .65, .25, 1) both; }
html.js .login-panel > *:nth-child(2) { animation-delay: .06s; }
html.js .login-panel > *:nth-child(3) { animation-delay: .12s; }
html.js .login-panel > *:nth-child(4) { animation-delay: .18s; }
html.js .login-panel > *:nth-child(5) { animation-delay: .24s; }
html.js .login-panel > *:nth-child(6) { animation-delay: .3s; }
html.js .login-panel > *:nth-child(7) { animation-delay: .36s; }
html.js .login-panel > *:nth-child(8) { animation-delay: .42s; }

@media (max-width: 1100px) {
  .login-shell { grid-template-columns: minmax(0, 1fr) minmax(340px, 40%); }
}
@media (max-width: 820px) {
  .login-shell { display: block; }
  .login-panel { width: min(100%, 600px); padding: 32px 24px 48px; }
  .login-kicker { margin-top: clamp(48px, 8vh, 72px); }
  .signup-steps { margin-top: 58px; }
  .signup-steps + .login-kicker { margin-top: 30px; }
  .login-aside { min-height: 0; padding: 40px 24px 0; }
  .login-aside:not(:has(.login-aside__ledger)) { padding-bottom: 40px; }
  .login-aside__mark { margin-bottom: 72px; }
  .login-aside__copy { margin-top: 0; padding-top: 0; }
  .login-aside__rule { margin-top: 40px; }
  .login-aside__ledger { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .login-panel > * { animation: none; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}
@media (forced-colors: active) {
  .login-submit { border: 1px solid ButtonText; }
}