/* The sign-in page (acquisition/login.js, docs/design/login-and-auth-email.md): the form on white in the left quarter, and
   across the other three quarters a real aerial (USGS NAIP, self-hosted WebP) with one shape and one glass callout per pillar,
   and the pitch. The app's tokens (tokens.css) by value, since this page loads nothing else. Below 900 px the panel sits
   under the form. */
:root {
  color-scheme: light;
  --ink: #111113; --ink-2: #3f3f46; --muted: #71717a; --line: #e8e8e6; --strong: #d4d4d2; --bad: #b42318; --ok: #16713c;
  --blue: #2563eb; --blue-ink: #1d4ed8;
  /* one colour per pillar, spaced round the wheel */
  --parcels: #06b6d4; --api: #d946ef; --deal: #f43f5e; --zoning: #7c3aed; --debt: #f59e0b; --owner: #10b981; --env: #84cc16; --ai: #2563eb;
  --ring: 0 0 0 2px #fff, 0 0 0 4px rgb(17 17 19 / 72%);
}
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--ink); font: 14px/1.5 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; }

.login-shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
/* landing: the aerial is the page; sign in / sign up open the form as a modal (owner 2026-09-30) */
.topbar { position: fixed; z-index: 20; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; padding: 14px 28px;
  background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(255 255 255 / 0)); }
.top-actions { display: flex; gap: 8px; }
.top-actions button { height: 36px; }
.login { position: fixed; z-index: 30; inset: 0; margin: auto; width: min(420px, calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 32px);
  overflow: auto; background: #fff; border-radius: 16px; box-shadow: 0 24px 64px rgb(0 0 0 / 22%); display: none; }
body.auth-open .login { display: flex; }
body.auth-open::after { content: ""; position: fixed; z-index: 25; inset: 0; background: rgb(9 9 11 / 45%); }
.login .wordmark { display: none; }
.modal-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; padding: 0; border: 0; font-size: 22px; line-height: 1; }
.art-copy { background: rgb(255 255 255 / 86%); backdrop-filter: blur(12px); border: 1px solid rgb(226 232 240 / 80%); border-radius: 16px;
  box-shadow: 0 20px 48px rgb(0 0 0 / 14%); padding: 24px 28px 22px; }

/* ---------- the form */
.login { flex-direction: column; padding: 24px 32px; }
.wordmark { align-self: flex-start; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; text-decoration: none; color: inherit; border-radius: 4px; }
.wordmark span { color: var(--blue); }
.login-form { display: grid; gap: 12px; width: 100%; max-width: 360px; margin: auto; padding: 16px 0; }
h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
.lede, .muted { color: var(--muted); margin: 0; }
.lede { margin-top: -4px; }
form { display: grid; gap: 10px; margin-top: 8px; }
.field { display: grid; gap: 6px; }
label { font-weight: 500; font-size: 13px; }
input { height: 40px; padding: 0 12px; border: 1px solid var(--strong); border-radius: 6px; font: inherit; color: inherit; background: #fff;
  transition: border-color 120ms, box-shadow 120ms; }
input:hover { border-color: #a1a1aa; }
input:focus { border-color: #3f3f46; box-shadow: none; outline: 2px solid transparent; }
button:focus-visible, .wordmark:focus-visible { box-shadow: var(--ring); outline: 2px solid transparent; }
button { height: 40px; padding: 0 14px; border: 1px solid var(--strong); border-radius: 6px; background: #fff; color: inherit; font: inherit; font-weight: 500;
  cursor: pointer; transition: background 120ms, border-color 120ms; }
button:hover { background: #f6f6f5; border-color: #a1a1aa; }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
button.primary:hover { background: #2a2a2e; }
button.link { border: 0; background: none; padding: 0 2px; height: auto; color: var(--ink-2); font-size: 13px; text-decoration: underline;
  text-decoration-color: var(--strong); text-underline-offset: 3px; }
button.link:hover { color: var(--ink); text-decoration-color: currentColor; }
.or { display: flex; align-items: center; gap: 12px; margin: 2px 0 -6px; color: #a1a1aa; font-size: 12px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* step 1: SSO, then the email; step 2: who you are signing in as, the password, and the quiet alternatives */
.sso { display: grid; gap: 8px; margin-top: 8px; }
.sso-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.sso-button svg { width: 18px; height: 18px; flex: none; }
.who { display: flex; align-items: center; gap: 8px; min-width: 0; height: 40px; padding: 0 12px 0 4px; border: 1px solid var(--line);
  border-radius: 6px; background: #fafaf9; color: var(--ink-2); }
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .back { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--muted); }
.who .back:hover { background: #efefed; color: var(--ink); }
.who .back svg { width: 16px; height: 16px; }
.alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 8px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line); }
.foot button.link { color: var(--muted); }
.foot button.link:hover { color: var(--ink); }
.status { min-height: 1.5em; margin: 4px 0 0; }
.status:empty { min-height: 0; margin: 0; }  /* still in the page, so the live region keeps announcing */
.status[data-tone="error"] { color: var(--bad); }
.status[data-tone="ok"] { color: var(--ok); }
.status-action { justify-self: start; margin-top: -8px; font-weight: 600; }
[hidden] { display: none !important; }

/* ---------- the panel: an aerial stage that covers the panel at the photo's aspect. The photo, both SVG overlays and the cards
   are all placed in the stage in viewBox units (1600 x 1760), so they scale and crop as one and the leaders stay on target. */
.login-art { position: relative; overflow: hidden; background: #dfe5ea; isolation: isolate; container-type: size; min-height: 560px; }
.art-stage { --H: calc((100cqh - 64px) * 1.15); position: absolute; left: 50%; top: calc(64px - (100cqh - 64px) * 0.06); height: var(--H); width: calc(var(--H) * 1600 / 1760);
  aspect-ratio: 1600 / 1760; margin-left: calc(var(--H) * 1600 / 1760 / -2); --u: calc(var(--H) / 1760); }
.art-stage::before, .art-stage::after { content: ""; position: absolute; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  background: url(/acquisition/login-aerial.webp) center / 100% 100%; transform: scaleX(-1); }
.art-stage::before { right: 100%; }
.art-stage::after { left: 100%; }
/* one viewBox unit = --u. No transform or containment on the stage: either would make it a stacking context and put the
   fades over the cards. */
.art-photo, .art-zones, .art-leaders { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.art-leaders { z-index: 2; pointer-events: none; }
.login-art::before, .login-art::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.login-art::before { background: none; }  /* into the form */
.login-art::after {  /* a light veil at the top, white at the foot for the copy */
  background: linear-gradient(180deg, rgb(255 255 255 / 30%) 0%, rgb(255 255 255 / 0) 14%, rgb(255 255 255 / 0) 100%); }

.zone > * { vector-effect: non-scaling-stroke; stroke-width: 2.5; stroke-linejoin: round; stroke: var(--c); fill: color-mix(in srgb, var(--c) 30%, transparent); }
.zone-parcels { --c: var(--parcels); } .zone-api { --c: var(--api); } .zone-deal { --c: var(--deal); } .zone-zoning { --c: var(--zoning); }
.zone-debt { --c: var(--debt); } .zone-owner { --c: var(--owner); } .zone-env { --c: var(--env); } .zone-ai { --c: var(--ai); }
.zone-zoning > * { fill: url(#hatch); }
.hatch-bg { fill: rgb(124 58 237 / 16%); }
.hatch-line { stroke: rgb(124 58 237 / 55%); stroke-width: 5; }
.zone-api > * { fill: color-mix(in srgb, var(--c) 12%, transparent); stroke-dasharray: 8 6; }  /* a query window, not a parcel */
.zone-env > * { fill: color-mix(in srgb, var(--c) 26%, transparent); stroke-dasharray: 2 5; stroke-linecap: round; }
.zone-ai > * { fill: color-mix(in srgb, var(--c) 14%, transparent); }
.zone-owner .links { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 6 6; opacity: .95; }
.art-leaders line { stroke: rgb(255 255 255 / 95%); stroke-width: 1.5; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 1px rgb(16 24 40 / 45%)); }

/* a card's box is --x/--y/--w/--h in viewBox units (tests/test_login_hero.py reads them); type and padding scale with it */
.callout { --w: 320; --h: 132; --s: 1; --t: calc(var(--u) * var(--s)); position: absolute; z-index: 3; overflow: hidden;
  left: calc(var(--x) * 100% / 1600); top: calc(var(--y) * 100% / 1760); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  padding: calc(16 * var(--t)) calc(18 * var(--t)); border: 1px solid rgb(255 255 255 / 70%); border-radius: calc(14 * var(--t));
  background: rgb(255 255 255 / 82%); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 1px 2px rgb(16 24 40 / 8%), 0 12px 32px -8px rgb(16 24 40 / 28%); }
.callout p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.callout .k { display: flex; align-items: center; gap: calc(9 * var(--t)); color: var(--ink-2); font-size: max(11px, calc(19 * var(--t))); font-weight: 600; line-height: 1.3; }
.callout .k i { flex: none; width: calc(10 * var(--t)); height: calc(10 * var(--t)); border-radius: 2px; background: var(--c);
  box-shadow: 0 0 0 calc(4 * var(--t)) color-mix(in srgb, var(--c) 22%, transparent); }
.callout .k b { margin-left: auto; padding: 0 calc(8 * var(--t)); border-radius: calc(5 * var(--t)); background: color-mix(in srgb, var(--c) 14%, #fff);
  color: color-mix(in srgb, var(--c) 62%, #000); font-size: max(11px, calc(16 * var(--t))); font-weight: 600; }
.c-env .k b { color: #3f6212; }  /* lime at 62% is too light on its own tint: lime-800 reads */
.callout .v { margin-top: calc(6 * var(--t)); font-size: calc(32 * var(--t)); font-weight: 650; letter-spacing: -0.025em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.callout .s { margin-top: calc(4 * var(--t)); color: #52525b; font-size: max(11px, calc(18 * var(--t))); line-height: 1.3; }
/* three hero cards (zoning, debt, owner); the other five are smaller and lighter. Each sits beside its own parcel. */
.callout.minor { --s: .86; background: rgb(255 255 255 / 78%); }
.callout.minor .v { font-weight: 600; }
.callout.minor .s { font-size: max(11px, calc(20 * var(--t))); }  /* the smaller cards keep a readable subline */
.c-ai.minor .s { font-size: max(11px, calc(18 * var(--t))); }  /* the longest subline */
.c-parcels { --c: var(--parcels); --x: 140; --y: 430; --w: 276; --h: 114; }
.c-api { --c: var(--api); --x: 380; --y: 760; --w: 276; --h: 114; }
.c-deal { --c: var(--deal); --x: 606; --y: 250; --w: 276; --h: 114; }
.c-zoning { --c: var(--zoning); --x: 1210; --y: 440; }
.c-debt { --c: var(--debt); --x: 1250; --y: 850; }
.c-owner { --c: var(--owner); --x: 470; --y: 396; --w: 352; }
.c-env { --c: var(--env); --x: 750; --y: 760; --w: 276; --h: 114; }
.c-ai { --c: var(--ai); --x: 1160; --y: 190; --w: 276; --h: 114; }

.art-copy { position: absolute; z-index: 4; left: 32px; bottom: 24px; width: max-content; max-width: calc(100vw - 64px); }
.art-copy h2 { font-size: 30px; white-space: nowrap; }
.art-copy .art-line, .art-copy .art-stats { width: 0; min-width: 100%; }  /* the headline sets the card width */
/* the landing is one fixed screen: no scrolling (owner 2026-09-30) */
html, body { height: 100%; overflow: hidden; }
.login-shell { height: 100dvh; min-height: 0; }
.login-art { min-height: 0; }
.art-copy .art-line { font-size: 13px; margin-top: 6px; }
.art-copy .art-stats { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 20px; }
.art-copy .art-stats dd { font-size: 19px; }
/* cards keep their earlier size on the full-bleed aerial: scaled about their leader-line anchor (landing.js) */

.art-eyebrow { margin: 0 0 10px; color: var(--blue-ink); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.login-art h2 { margin: 0; font-size: 38px; font-weight: 650; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
.art-line { margin: 14px 0 0; max-width: 520px; color: var(--ink-2); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.art-stats { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 22px 0 0; }
.art-stats div { display: flex; flex-direction: column-reverse; }
.art-stats dd { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.art-stats dt { color: var(--muted); font-size: 12px; }
.art-note { position: absolute; z-index: 4; right: 16px; bottom: 12px; margin: 0; color: #71717a; font-size: 11px; }

@media (prefers-reduced-motion: no-preference) {
  .zone > * { stroke-dasharray: 2400; animation: draw 1.6s ease-out .3s both; }
  .zone-api > * { stroke-dasharray: 8 6; animation: none; }
  .zone-env > * { stroke-dasharray: 2 5; animation: none; }
  .zone-owner .links { stroke-dasharray: 6 6; animation: flow 1.6s linear infinite; }
  .art-leaders line { animation: fade .5s ease-out both; }
  .callout { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
  /* the sign-in steps swap: what appears slides in a little (display none -> shown restarts the animation) */
  #steps > :is(.sso, .or), #form > *, #title { animation: step-in 200ms cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes step-in { from { opacity: 0; translate: 10px 0; } to { opacity: 1; translate: 0 0; } }
  .c-zoning, [data-for="zoning"] { animation-delay: .6s; } .c-debt, [data-for="debt"] { animation-delay: .95s; }
  .c-owner, [data-for="owner"] { animation-delay: 1.25s; } .c-ai, [data-for="ai"] { animation-delay: 1.8s; }
  .c-deal, [data-for="deal"] { animation-delay: 2.05s; } .c-parcels, [data-for="parcels"] { animation-delay: 2.4s; }
  .c-env, [data-for="env"] { animation-delay: 2.6s; } .c-api, [data-for="api"] { animation-delay: 2.95s; }
  @keyframes draw { from { stroke-dashoffset: 2400; } to { stroke-dashoffset: 0; } }
  @keyframes flow { to { stroke-dashoffset: -24; } }
  @keyframes rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- short, wide windows: the stage is scaled by width, so give the copy a little less height under the cards */
@media (min-width: 901px) and (max-height: 920px) {
  .art-copy { padding-bottom: 30px; }
  .login-art h2 { font-size: 34px; }
  .art-line { margin-top: 10px; }
  .art-stats { margin-top: 16px; }
}

/* ---------- narrow: the form first, the panel under it. The stage zooms to a window of the aerial (--x0, --win: viewBox units
   from y 150 down) so the cards stay readable; cards outside the window are hidden, never moved, so what shows stays connected. */
@media (max-width: 900px) {
  .login-shell { grid-template-columns: minmax(0, 1fr); }
  .login { padding: 24px 16px; }
  .login-form { padding: 32px 0 24px; }
  .login-art { --x0: 740; --win: 840; --gutter: 24px; height: calc((100vw - var(--gutter)) * 850 / var(--win) + 400px); min-height: 0;
    margin: 0 12px 12px; border-radius: 14px; }  /* a definite height: the cards' rows plus the copy under them */
  .login-art::before { display: none; }
  .art-stage { --u: calc(100cqw / var(--win)); width: calc(100cqw * 1600 / var(--win)); margin-left: 0; left: calc(100cqw * var(--x0) / var(--win) * -1);
    top: calc(100cqw * -150 / var(--win)); }
  .c-parcels, .c-api, .c-owner, .c-deal, [data-for="parcels"], [data-for="api"], [data-for="owner"], [data-for="deal"] { display: none; }
  .art-copy { padding: 0 24px 40px; }
  .login-art h2 { font-size: 30px; }
}
@media (max-width: 640px) {
  h1 { font-size: 24px; }
  .login-art { --x0: 1040; --win: 545; --gutter: 16px; margin: 0 8px 8px; }  /* three pillars: AI, zoning, debt */
  .c-env, [data-for="env"] { display: none; }
  .art-copy { padding: 0 20px 36px; }
  .login-art h2 { font-size: 26px; }
  .art-line { font-size: 14px; }
  .art-stats { gap: 12px 20px; grid-template-columns: repeat(2, minmax(0, max-content)); }
  .art-stats dd { font-size: 19px; }
}
@media (max-width: 700px) { .art-copy h2 { white-space: normal; } .art-copy { width: auto; right: 16px; left: 16px; } html, body { overflow: auto; } }

/* footer links: small and quiet, bottom right over the aerial; in the flow under 900 px (tests/test_privacy_page.py) */
.legal { position: fixed; z-index: 10; right: 16px; bottom: 12px; font-size: 12px; }
.legal a { padding: 2px 8px; border-radius: 4px; background: rgb(255 255 255 / 80%); color: var(--muted); text-decoration: none; }
.legal a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal a:focus-visible { box-shadow: var(--ring); outline: 2px solid transparent; }
@media (max-width: 900px) { .legal { position: static; padding: 4px 16px 16px; text-align: center; } }

/* ---------- Talk to sales (docs/design/b2b-contact-sales.md): Pencil's discovery chat, same modal language as sign in */
.sales { position: fixed; z-index: 30; inset: 0; margin: auto; width: min(520px, calc(100vw - 32px)); height: min(680px, calc(100dvh - 32px));
  display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 24px 64px rgb(0 0 0 / 22%); overflow: hidden; }
.sales[hidden] { display: none; }
body.sales-open::after { content: ""; position: fixed; z-index: 25; inset: 0; background: rgb(9 9 11 / 45%); }
.sales-head { position: relative; display: flex; gap: 12px; align-items: center; padding: 16px 52px 14px 20px; border-bottom: 1px solid var(--line); }
.sales-head h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.sales-head p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.sales-mark { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--ink); color: #fff;
  font-weight: 700; font-size: 13px; letter-spacing: -0.04em; }
.sales-stream { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 8px; display: flex; flex-direction: column; gap: 8px; }
.sales-turn { margin: 0; max-width: 88%; font-size: 13.5px; line-height: 1.5; }
.sales-turn.pencil { align-self: flex-start; color: var(--ink); }
.sales-turn.you { align-self: flex-end; padding: 7px 12px; border-radius: 12px 12px 4px 12px; background: #f1f2f0; }
.sales-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 20px 10px; }
.sales-chips:empty { display: none; }
.sales-chips .chip { height: 30px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; }
.sales-chips .chip[aria-pressed=true] { border-color: var(--blue); background: rgb(37 99 235 / 8%); color: var(--blue); }
.sales-chips .chip.primary { border-color: var(--ink); }
.sales-composer { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line); margin: 0; }
.sales-composer[hidden] { display: none; }
.sales-composer input { flex: 1; min-width: 0; }
.sales-composer button.primary { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.sales-composer button svg { display: block; width: 16px; height: 16px; }
.sales-turn.typing { color: var(--muted); letter-spacing: 2px; }
.sales-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 14px 20px 18px; border-top: 1px solid var(--line); margin: 0; }
.sales-contact[hidden] { display: none; }
.sales-contact .status, .sales-contact button { grid-column: 1 / -1; }
.sales-contact .status:empty { display: none; }
.sales-contact input[aria-invalid=true] { border-color: var(--bad); }
.field-error { margin: 0; color: var(--bad); font-size: 12.5px; line-height: 1.35; }
.field-error[hidden] { display: none; }
.sales-contact button[aria-busy=true] { cursor: progress; }
.sales-done { display: grid; justify-items: center; gap: 6px; padding: 22px 24px 24px; border-top: 1px solid var(--line); text-align: center; outline: 2px solid transparent; }
.sales-done[hidden] { display: none; }
.sales-done h3 { margin: 6px 0 0; font-size: 16px; font-weight: 600; }
.sales-done p { margin: 0 0 8px; max-width: 40ch; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.sales-done-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 14%, #fff); color: var(--ok); }
.sales-states { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; align-items: center; }
.sales-states input { flex: 1 1 200px; min-width: 0; height: 34px; border-radius: 999px; padding: 0 14px; font-size: 13px; }
.sales-states input[aria-invalid=true] { border-color: var(--bad); }
.sales-chips .chip.state { border-color: var(--ink); }
.sales-chips .chip.state span { margin-left: 6px; color: var(--muted); }
.sales-chips .state-hint { margin: 0; width: 100%; color: var(--muted); font-size: 12px; }
.sales-chips .state-hint:empty { display: none; }
@media (max-width: 520px) { .sales-contact { grid-template-columns: 1fr; } }