:root {
  color-scheme: light;
  --ink: #10231c;
  --ink-soft: #28443a;
  --paper: #f4f0e7;
  --paper-2: #e9e1d2;
  --white: #fffdf8;
  --gold: #d79242;
  --gold-deep: #a85e20;
  --green: #167248;
  --green-bright: #2bbf74;
  --red: #a84437;
  --line: rgba(16, 35, 28, .16);
  --muted: #65736b;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); margin: 0; }
button, input, a { font: inherit; }
a { color: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow {
  color: var(--gold-deep); font-size: .7rem; font-weight: 850; letter-spacing: .16em;
  margin: 0 0 .7rem; text-transform: uppercase;
}

.portal-header {
  align-items: center; background: rgba(244,240,231,.92); border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; padding: .85rem clamp(1rem,5vw,5rem);
  position: sticky; top: 0; backdrop-filter: blur(18px); z-index: 10;
}
.brand { align-items: center; display: flex; gap: .7rem; text-decoration: none; }
.brand-mark {
  align-items: center; background: var(--ink); border-radius: 12px; color: var(--paper);
  display: flex; font-family: Georgia, serif; font-size: 1.45rem; font-weight: 700;
  height: 42px; justify-content: center; width: 42px;
}
.brand > span:last-child { display: flex; flex-direction: column; }
.brand strong { font-size: 1rem; }
.brand small { color: var(--muted); font-size: .68rem; margin-top: .1rem; }
.back-link { color: var(--ink-soft); font-size: .75rem; font-weight: 800; text-decoration: none; }

.auth-shell {
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(360px,.9fr);
  min-height: calc(100vh - 72px);
}
.auth-intro {
  background: var(--ink); color: var(--white); display: flex; flex-direction: column;
  justify-content: center; padding: clamp(4rem,10vw,9rem);
}
.auth-intro .eyebrow { color: #efba79; }
.auth-intro h1, .lease-hero h1 {
  font-family: Georgia, serif; font-size: clamp(4rem,8vw,7.5rem); font-weight: 400;
  letter-spacing: -.06em; line-height: .82; margin: 1rem 0 2rem;
}
.auth-intro > p:not(.eyebrow) {
  color: #c5d1ca; font-size: 1.08rem; line-height: 1.65; max-width: 620px;
}
.auth-intro ul {
  border-top: 1px solid rgba(255,255,255,.17); color: #c5d1ca; display: grid;
  gap: .75rem; list-style: none; margin: 2rem 0 0; padding: 1.5rem 0 0;
}
.auth-intro li::before { color: var(--green-bright); content: "✓"; font-weight: 900; margin-right: .7rem; }

.auth-card {
  align-self: center; background: var(--white); border: 1px solid var(--line);
  border-radius: 24px; box-shadow: 0 24px 70px rgba(16,35,28,.09);
  margin: clamp(2rem,8vw,7rem); max-width: 520px; padding: clamp(2rem,5vw,3.5rem);
}
.auth-card h2, .section-heading h2, .feature-card h2, .lease-callout h2,
.legal-status h2 {
  font-family: Georgia, serif; font-size: clamp(2rem,4vw,3.2rem); font-weight: 400;
  letter-spacing: -.045em; margin: 0 0 1.5rem;
}
.auth-card label { display: grid; font-size: .74rem; font-weight: 800; gap: .45rem; margin-top: 1rem; }
.auth-card input {
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); padding: .9rem 1rem; width: 100%;
}
.auth-card button, .primary-button {
  background: var(--ink); border: 1px solid var(--ink); border-radius: 999px;
  color: var(--white); display: inline-flex; font-weight: 850; justify-content: center;
  margin-top: 1.4rem; padding: .9rem 1.2rem; text-decoration: none; width: 100%;
}
.auth-card button:hover, .primary-button:hover { background: var(--green); border-color: var(--green); }
.form-message { min-height: 1.2rem; }
.error { color: var(--red); font-size: .76rem; font-weight: 750; }
.help { color: var(--muted); font-size: .7rem; line-height: 1.5; text-align: center; }
.help a { color: var(--green); font-weight: 800; }
.auth-card > form > .muted { font-size: .76rem; line-height: 1.55; margin: -.8rem 0 1.2rem; }
.auth-switcher {
  background: var(--paper); border-radius: 999px; display: grid; gap: .3rem;
  grid-template-columns: 1fr 1fr; margin: 0 0 2rem; padding: .3rem;
}
.auth-card .auth-switch {
  background: transparent; border: 0; color: var(--muted); margin: 0; padding: .65rem .8rem;
  width: auto;
}
.auth-card .auth-switch:hover { background: rgba(16,35,28,.06); border: 0; }
.auth-card .auth-switch.active { background: var(--ink); color: var(--white); }
.auth-card .text-button {
  background: transparent; border: 0; color: var(--green); display: inline;
  font-size: inherit; margin: 0; padding: 0; text-decoration: underline; width: auto;
}
.auth-card .text-button:hover { background: transparent; border: 0; color: var(--gold-deep); }

.dashboard, .lease-main {
  margin: 0 auto; max-width: 1260px; padding: clamp(3rem,7vw,6rem) clamp(1rem,4vw,3rem);
}
.dashboard-heading, .section-heading {
  align-items: end; display: flex; justify-content: space-between; margin-bottom: 2rem;
}
.dashboard-heading h1 {
  font-family: Georgia, serif; font-size: clamp(3rem,6vw,5.6rem); font-weight: 400;
  letter-spacing: -.06em; line-height: .92; margin: 0;
}
.outline-button {
  background: transparent; border: 1px solid var(--ink); border-radius: 999px;
  color: var(--ink); display: inline-flex; font-weight: 800; justify-content: center;
  padding: .75rem 1rem; text-decoration: none;
}
.outline-button:hover { background: var(--ink); color: var(--white); }
.notice-card {
  align-items: center; background: #e7f4eb; border: 1px solid rgba(22,114,72,.16);
  border-radius: 18px; display: flex; gap: 1rem; margin-bottom: 4rem; padding: 1.1rem 1.3rem;
}
.notice-card p { color: var(--muted); font-size: .75rem; margin: .2rem 0 0; }
.notice-icon {
  align-items: center; background: var(--green); border-radius: 50%; color: white;
  display: flex; font-weight: 900; height: 34px; justify-content: center; width: 34px;
}

.unit-cards { display: grid; gap: 1rem; grid-template-columns: repeat(2,minmax(0,1fr)); }
.unit-account-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 22px;
  overflow: hidden; padding: 1.6rem;
}
.unit-account-heading { align-items: flex-start; display: flex; justify-content: space-between; }
.unit-account-heading h3 {
  font-family: Georgia, serif; font-size: 3.2rem; font-weight: 400;
  letter-spacing: -.05em; line-height: 1; margin: 0;
}
.unit-account-heading p:last-child { color: var(--muted); font-size: .78rem; margin: .45rem 0 0; }
.badges { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
.status-badge {
  background: var(--paper); border-radius: 999px; color: var(--muted);
  font-size: .61rem; font-weight: 850; padding: .45rem .58rem;
}
.status-badge.current { background: #e2f5e9; color: var(--green); }
.status-badge.due { background: #fff0e7; color: var(--red); }
.amount-row {
  background: var(--ink); border-radius: 15px; color: var(--white); display: grid;
  gap: 1px; grid-template-columns: 1fr 1fr; margin: 1.5rem 0; overflow: hidden;
}
.amount-row div { display: grid; gap: .35rem; padding: 1rem; }
.amount-row div + div { border-left: 1px solid rgba(255,255,255,.16); }
.amount-row span { color: #aebdb5; font-size: .65rem; }
.amount-row strong { font-size: 1.3rem; }
.account-details { display: grid; gap: .9rem; grid-template-columns: 1fr 1fr; margin: 0; }
.account-details div { border-bottom: 1px solid var(--line); display: grid; gap: .25rem; padding-bottom: .7rem; }
.account-details dt { color: var(--muted); font-size: .62rem; }
.account-details dd { font-size: .78rem; font-weight: 800; margin: 0; }

.payment-grid, .lease-preview-grid {
  display: grid; gap: 1rem; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 5rem 0;
}
.feature-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 22px;
  min-height: 290px; padding: clamp(1.5rem,4vw,2.7rem);
}
.feature-card p:not(.eyebrow), .lease-callout p:not(.eyebrow), .legal-status p, .legal-status li {
  color: var(--muted); line-height: 1.65;
}
.accent-card { background: var(--gold); }
.accent-card .eyebrow { color: var(--ink); }
.accent-card p:not(.eyebrow), .accent-card small { color: #513818; }
.disabled-action {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-weight: 800; margin: 1.2rem 0 .6rem; padding: .8rem 1rem;
}
.feature-card small { color: var(--muted); display: block; font-size: .65rem; }
.history-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 22px; overflow-x: auto;
}
.account-information-grid {
  display: grid; gap: 1rem; grid-template-columns: repeat(2,minmax(0,1fr));
  margin: 5rem 0 0;
}
.account-information-grid .feature-card { min-height: 0; }
.contact-list, .document-list {
  display: grid; gap: .7rem; list-style: none; margin: 0; padding: 0;
}
.contact-list li, .document-list li {
  border-top: 1px solid var(--line); display: grid; gap: .28rem; padding-top: .75rem;
}
.contact-list strong, .document-list strong { font-size: .78rem; }
.contact-list span, .document-list span { color: var(--muted); font-size: .7rem; line-height: 1.45; }
.document-list a { color: var(--green); font-size: .72rem; font-weight: 850; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--line); font-size: .74rem; padding: 1rem; text-align: left; }
th { color: var(--muted); font-size: .62rem; text-transform: uppercase; }
td.amount { font-weight: 850; }
tbody tr:last-child td { border-bottom: 0; }
.empty-state { color: var(--muted); margin: 0; padding: 1.4rem; }
.lease-callout {
  align-items: center; background: var(--ink); border-radius: 24px; color: var(--white);
  display: flex; justify-content: space-between; margin-top: 5rem; padding: clamp(2rem,5vw,4rem);
}
.lease-callout .eyebrow { color: #efba79; }
.lease-callout p:not(.eyebrow) { color: #c5d1ca; margin-bottom: 0; max-width: 650px; }
.lease-callout .outline-button { border-color: #82978d; color: var(--white); white-space: nowrap; }

.lease-main { max-width: 1160px; }
.lease-hero {
  background: var(--ink); border-radius: 30px; color: var(--white);
  overflow: hidden; padding: clamp(3rem,8vw,7rem); position: relative;
}
.lease-hero::after {
  border: 2px solid rgba(215,146,66,.35); border-radius: 50%; content: "";
  height: 500px; position: absolute; right: -220px; top: -190px; width: 500px;
}
.lease-hero .eyebrow { color: #efba79; }
.lease-hero h1 { font-size: clamp(3.8rem,8vw,7rem); position: relative; z-index: 1; }
.lease-hero > p:not(.eyebrow) { color: #c5d1ca; line-height: 1.65; max-width: 700px; }
.lease-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; position: relative; z-index: 1; }
.lease-actions .primary-button, .lease-actions .outline-button { margin: 0; width: auto; }
.lease-actions .primary-button { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.lease-actions .outline-button { border-color: #82978d; color: var(--white); }
.lease-preview-grid { grid-template-columns: repeat(4,minmax(0,1fr)); margin: 1rem 0 4rem; }
.lease-preview-grid .feature-card { min-height: 260px; padding: 1.5rem; }
.lease-preview-grid h2 { font-size: 1.7rem; }
.step {
  align-items: center; background: var(--paper-2); border-radius: 50%; display: flex;
  font-family: Georgia, serif; font-size: 1.4rem; height: 42px; justify-content: center;
  margin-bottom: 2.3rem; width: 42px;
}
.legal-status {
  background: var(--white); border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(2rem,5vw,4rem);
}
.legal-status ul { display: grid; gap: .6rem; padding-left: 1.2rem; }
.legal-note {
  border-left: 4px solid var(--gold); font-size: .78rem; margin-top: 2rem; padding-left: 1rem;
}

footer {
  align-items: center; background: #091610; color: #a9b7af; display: flex;
  font-size: .7rem; justify-content: space-between; margin-top: 3rem;
  padding: 2rem clamp(1rem,5vw,5rem);
}
footer a { color: var(--white); font-weight: 800; text-decoration: none; }
.portal-footer-links { display: flex; gap: 1rem; }
footer a:hover, footer a:focus-visible { color: #efba79; text-decoration: underline; }

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-intro { min-height: 620px; }
  .auth-card { justify-self: center; width: calc(100% - 2rem); }
  .lease-preview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 680px) {
  .back-link { font-size: .68rem; }
  .dashboard-heading, .lease-callout { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
  .unit-cards, .payment-grid, .lease-preview-grid, .account-information-grid { grid-template-columns: 1fr; }
  .amount-row { grid-template-columns: 1fr; }
  .amount-row div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
  .account-details { grid-template-columns: 1fr; }
  .lease-callout .outline-button { width: 100%; }
  th:nth-child(3), td:nth-child(3), th:nth-child(4), td:nth-child(4) { display: none; }
  footer { align-items: flex-start; flex-direction: column; gap: .8rem; }
  .portal-footer-links { flex-direction: column; gap: .45rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}