/* ZeusView website: the same colors, type and controls as the app (light and dark). */
:root {
  --bg: #FFFFFF; --page: #EDF0F2; --surface: #FFFFFF; --surface2: #E3E8EB; --card: rgba(255,255,255,.92);
  --ink: #182142; --title: #0F2A36; --muted: #566B76; --faint: #9AA1B3; --line: #E6E9F1; --line2: #D0D8DD; --tag: #33475B;
  --primary: #07184B; --primary-ink: #FFFFFF; --gold: #F5C300; --gold-fill: rgba(255,212,0,.14); --gold-ink: #07184B;
  --in: #2E6FD1; --out: #D9661A; --good: #1D7A46; --bad: #B3261E;
  --minor: #D9A400; --moderate: #E4572E; --major: #B3261E;
  --shadow: 0 5px 18px rgba(11,29,78,.06); --radius: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C1A21; --page: #0C1A21; --surface: #14262F; --surface2: #1C323D; --card: rgba(20,38,47,.92);
    --ink: #E6EEF1; --title: #E6EEF1; --muted: #90A6B0; --faint: #7F95A0; --line: #26434F; --line2: #26434F; --tag: #A9BCC6;
    --primary: #E8B444; --primary-ink: #16203B; --gold: #E8B444; --gold-fill: rgba(232,180,68,.12); --gold-ink: #E8B444;
    --good: #5BC98A; --bad: #FF8A80; --shadow: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0C1A21; --page: #0C1A21; --surface: #14262F; --surface2: #1C323D; --card: rgba(20,38,47,.92);
  --ink: #E6EEF1; --title: #E6EEF1; --muted: #90A6B0; --faint: #7F95A0; --line: #26434F; --line2: #26434F; --tag: #A9BCC6;
  --primary: #E8B444; --primary-ink: #16203B; --gold: #E8B444; --gold-fill: rgba(232,180,68,.12); --gold-ink: #E8B444;
  --good: #5BC98A; --bad: #FF8A80; --shadow: none; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select, textarea { font-family: inherit; }
img { max-width: 100%; }
h1, h2, h3 { color: var(--title); line-height: 1.15; margin: 0; }
:focus-visible { outline: 3px solid rgba(255,212,0,.6); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(100% - 32px, 1080px); margin: 0 auto; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the stacked logo, as in the app header: house, ZeusView, AI-POWERED PROPERTY REPORTS */
.lock { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--title); }
.lock img { width: 38px; height: 38px; }
.lock b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.4px; line-height: 1.1; }
.lock i { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: 1.4px; color: var(--tag); margin-top: 2px; white-space: nowrap; }
.mark-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mark-light { display: none; } :root:not([data-theme="light"]) .mark-dark { display: inline; } }
:root[data-theme="dark"] .mark-light { display: none; } :root[data-theme="dark"] .mark-dark { display: inline; }

/* buttons, as on the sign-in screen */
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); box-shadow: 0 9px 22px rgba(7,24,75,.18); }
.btn.try { background: var(--gold-fill); border: 1.5px solid var(--gold); color: var(--gold-ink); font-weight: 700; box-shadow: none; }
.btn.small { height: 40px; padding: 0 14px; font-size: 14px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; transform: none; }

/* the gold mesh, behind the hero and the sign-in card */
.mesh { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mesh canvas { position: absolute; left: -5%; top: -5%; }