/* EstateLark landing page. docs/design-system.md says how to use these values;
   the shared ones copy the app's tokens (web/src/styles/kori/tokens.css) so the page ships alone,
   and tests/test_site.py keeps the two equal. */

@font-face {
  font-family: "Satoshi";
  src: url("/fonts/Satoshi-Variable.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --ink: #0c0a08;
  --obsidian: #1a1919;
  --ink-soft: #646362;
  --bone: #f4f2f0;
  --bone-deep: #eae8e4;
  --white: #ffffff;
  --line: #e5e7eb;
  --line-strong: #d3d3d3;
  --highlighter: #e4f222; /* the action and the approval, never text on a light ground */
  --highlighter-hover: #d6e30f;
  --danger-tint: #fae5e3;
  --danger-ink: #a02c28;

  --surface: var(--white);
  --surface-panel: var(--bone);
  --surface-raised: var(--white);
  --text: var(--ink);
  --muted: var(--ink-soft);
  --action: var(--ink);
  --action-hover: var(--obsidian);
  --action-text: var(--white);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --focus: var(--ink);
  --notice: var(--bone);
  --notice-error: var(--danger-tint);
  --notice-error-text: var(--danger-ink);
  --mark-edge: var(--ink);
  --field-border: #8f8e8d; /* 3:1 on white, the floor for a control's edge */

  --font-body: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --radius-button: 8px;
  --radius-field: 8px;
  --radius-tile: 12px;
  --radius-panel: 16px;
  --ease-quiet: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0c0a08;
    --surface-panel: #1a1919;
    --surface-raised: #1a1919;
    --text: #f4f2f0;
    --muted: #a8a7a5;
    --action: #f4f2f0;
    --action-hover: #ffffff;
    --action-text: #0c0a08;
    --border: #2e2d2c;
    --border-strong: #454443;
    --focus: #e4f222;
    --notice: #1a1919;
    --notice-error: #34201f;
    --notice-error-text: #f0a9a4;
    --mark-edge: #f4f2f0;
    color-scheme: dark;
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-padding-top: 16px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--highlighter); color: var(--ink); }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; }
h1 {
  font-size: clamp(2.5rem, 1.6rem + 5vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
}
h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
h2.big {
  font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; }
h1 span { display: inline-block; }
h2 span, h3 span { color: var(--muted); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: 1232px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 32px; } }

.muted { color: var(--muted); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-button);
}
.skip:focus { top: 12px; }

/* The notice and the top bar */

.notice-bar {
  margin: 0;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--white);
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
}
.notice-bar a { display: inline-block; margin-left: 8px; }
.notice-bar :focus-visible { outline-color: var(--highlighter); }

.bar { border-bottom: 1px solid var(--border); }
.bar-inner { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; }
.wordmark picture { display: block; }
.wordmark img { display: block; width: auto; height: 34px; }
@media (max-width: 419px) { .wordmark img { height: 28px; } }
.wordmark-small { display: inline-block; width: auto; height: 26px; vertical-align: middle; }
.bar-nav { display: none; gap: 24px; font-size: 0.9375rem; }
.bar-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.bar-nav a:hover { text-decoration: underline; }
.bar-actions { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.bar-inner > .button:last-child { margin-left: auto; }
.bar-signin { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; text-decoration: none; }
.bar-signin:hover { text-decoration: underline; }
/* On a phone the first screen's button is right below, so the bar keeps the way back in. */
@media (max-width: 519px) { .bar-actions .button { display: none; } }
@media (min-width: 800px) {
  .bar-nav { display: flex; margin-left: 16px; }
}

/* Buttons */

button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--action-text);
  background: var(--action);
  border: 0;
  border-radius: var(--radius-button);
  padding: 12px 20px;
  min-height: 52px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: background-color 120ms ease;
}
button:hover,
.button:hover { background: var(--action-hover); }
.button-small { min-height: 44px; padding: 8px 14px; font-size: 0.9375rem; }
.button-yellow,
.join button { background: var(--highlighter); color: var(--ink); }
.button-yellow:hover,
.join button:hover { background: var(--highlighter-hover); }

/* The small label with its figure */

.stat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat b,
.ticker b {
  font-weight: 400;
  color: var(--text);
  background: var(--surface-panel);
  border-radius: 4px;
  padding: 2px 6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* The first screen. The model is daylight in both themes, so the hero keeps the light values. */

.hero {
  --surface: var(--white);
  --surface-panel: var(--bone);
  --surface-raised: var(--white);
  --text: var(--ink);
  --muted: var(--ink-soft);
  --border: var(--line);
  --focus: var(--ink);
  position: relative;
  overflow: hidden;
  background: var(--white);
  color: var(--ink);
  color-scheme: light;
}
.hero-grid { display: grid; gap: 20px; padding-block: 24px 16px; }
.lede {
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--muted);
  margin: 16px 0 0;
  max-width: 30em;
  text-wrap: pretty;
}

.scene { position: relative; height: 330px; margin-inline: calc(50% - 50vw); overflow: hidden; }
.model {
  position: absolute;
  aspect-ratio: 2000 / 1240;
  width: 800px;
  left: calc(50% - 530px);
  top: -101px;
}
.model-map { display: block; width: 100%; height: 100%; }
.lot { position: absolute; width: 6.9%; height: auto; }
.lot-a { left: 55.99%; top: 47.23%; }
.lot-b { left: 78.52%; top: 31.45%; }
.lot-c { left: 71.63%; top: 69.07%; }

.pin {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.875rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}
.pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 14px;
  background: var(--ink);
}
.pin-approved { margin-top: -14px; padding: 7px 13px; font-size: 1rem; background: var(--highlighter); border: 1px solid var(--ink); }
.pin-filed { margin-top: -10px; background: var(--white); color: var(--muted); border: 1px solid var(--line-strong); }
.pin-filed::after { height: 10px; background: var(--line-strong); }
.pin-b { left: 82.06%; top: 34.83%; }
.pin-c { left: 75.17%; top: 72.45%; }
.filed-a { left: 63.26%; top: 17.32%; }
.filed-b { left: 42.78%; top: 57.2%; }
.filed-c { left: 60.47%; top: 80.95%; }

.estate {
  position: absolute;
  left: 59.53%;
  top: 50.61%;
  width: 236px;
  transform: translate(-50%, -100%);
  margin-top: -14px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-tile);
  background: var(--white);
}
.estate::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -15px;
  width: 1px;
  height: 14px;
  background: var(--ink);
}
.estate-when {
  margin: 0;
  padding: 6px 12px;
  background: var(--highlighter);
  border-bottom: 1px solid var(--ink);
  border-radius: 11px 11px 0 0;
  font-size: 0.875rem;
}
.estate-body { padding: 8px 12px 10px; }
.estate-value { margin: 0; font-size: 1.625rem; line-height: 1.1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.estate-house { margin: 4px 0 0; font-size: 0.8125rem; color: var(--muted); }
.estate dl { display: none; margin: 10px 0 0; font-size: 0.8125rem; line-height: 1.4; }
.estate dl div { display: flex; justify-content: space-between; gap: 12px; padding-block: 5px; border-top: 1px solid var(--line); }
.estate dt { color: var(--muted); }
.estate dd { margin: 0; text-align: right; }

.scene-note { margin: 0; font-size: 0.75rem; color: var(--muted); }

.filed-a, .filed-b { display: none; }

@media (min-width: 520px) {
  .scene { height: 440px; }
  .model { width: 1400px; left: calc(50% - 833px); top: -224px; }
  .filed-a { display: block; }
  .estate { width: 268px; }
  .estate-when { padding: 8px 14px; }
  .estate-body { padding: 12px 14px 14px; }
  .estate-value { font-size: 2rem; }
  .estate dl { display: block; }
}

/* From here the words stand beside the picture. The picture is placed from where they end, so
   the estate card always clears them and the houses fade out before they reach the text. */
@media (min-width: 1100px) {
  .hero-grid {
    --copy: 480px;
    grid-template-columns: minmax(0, var(--copy));
    align-content: center;
    gap: 28px;
    min-height: clamp(640px, calc(100vh - 110px), 800px);
    padding-block: 48px;
  }
  .hero-head, .hero-cta { position: relative; z-index: 2; }
  .hero h1 { font-size: 4.5rem; }
  .scene {
    --copy-end: calc(max(32px, 50vw - 584px) + var(--copy));
    --model-width: clamp(1300px, 108vw, 2200px);
    --model-left: calc(max(var(--copy-end) + 190px, 70vw) - var(--model-width) * 0.5953);
    position: absolute;
    inset: 0;
    height: auto;
    margin: 0;
  }
  .model { width: var(--model-width); left: var(--model-left); top: 50%; transform: translateY(-50%); }
  .model::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      var(--white) calc(var(--copy-end) - var(--model-left)),
      transparent calc(var(--copy-end) - var(--model-left) + 260px)
    );
  }
  .scene-note { position: absolute; right: 16px; bottom: 12px; z-index: 2; padding: 2px 8px; background: var(--white); border-radius: 4px; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .pin-b, .lot-b { display: none; }
}
@media (min-width: 1280px) {
  .filed-b { display: block; }
}
@media (min-width: 1500px) {
  .hero-grid { --copy: 560px; }
  .hero h1 { font-size: 5rem; }
}
@media (min-width: 1960px) {
  .filed-c { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .lot { animation: lot-lands 500ms var(--ease-quiet) both; }
  .pin-approved { animation: pin-lands 400ms var(--ease-quiet) both; }
  .lot-b, .pin-b { animation-delay: 250ms; }
  .lot-c, .pin-c { animation-delay: 500ms; }
  .lot-a { animation-delay: 750ms; }
  .estate { animation: estate-opens 600ms var(--ease-quiet) 950ms both; }
  @keyframes lot-lands {
    from { opacity: 0; translate: 0 -10px; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes pin-lands {
    from { opacity: 0; translate: 0 8px; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes estate-opens {
    from { opacity: 0; translate: 0 12px; scale: 0.97; }
    to { opacity: 1; translate: 0 0; scale: 1; }
  }
}

/* The form */

/* The first screen's call to action: one bright button, one quiet way to learn more. */

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.cta-main { gap: 10px; min-height: 60px; padding: 14px 28px; font-size: 1.125rem; letter-spacing: -0.005em; }
.cta-main svg { flex: none; transition: translate 160ms var(--ease-quiet); }
.cta-main:hover svg { translate: 4px 0; }
.cta-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.0625rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.cta-quiet:hover { text-decoration-thickness: 2px; }
.cta-note { margin: 14px 0 0; font-size: 0.9375rem; color: var(--muted); }
.cta-note a { display: inline-block; }
@media (max-width: 519px) {
  .cta-main { width: 100%; }
}

.sample .lede { margin-bottom: 28px; }
.join { max-width: 820px; scroll-margin-top: 24px; }
.join-row {
  display: grid;
  gap: 8px;
  padding: 8px;
  background: var(--surface-panel);
  border: 1px solid var(--border);
  border-radius: 14px;
}
@media (min-width: 560px) {
  .join-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 4px; padding: 4px; }
  .join button { grid-column: 1 / -1; }
}
.join input,
.join select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-field);
  padding: 10px 16px;
  min-height: 52px;
}
.join input::placeholder { color: var(--muted); opacity: 1; }
.join select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23908f8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.join select:invalid { color: var(--muted); }
.join option { color: var(--text); background: var(--surface-raised); }
.join button { width: 100%; }
.other-county { margin-top: 12px; max-width: 420px; }
.other-county label { display: block; font-size: 0.9375rem; margin-bottom: 6px; }
.fine { font-size: 0.8125rem; line-height: 1.5; color: var(--muted); margin: 12px 0 0; max-width: 72ch; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Shown until the browser can reveal it only for "Somewhere else". */
@supports selector(:has(*)) {
  .other-county { display: none; }
  .join:has(option[value="other"]:checked) .other-county { display: block; }
}

/* The product on its panel */

.stage {
  margin: 0;
  padding: 16px;
  background-color: var(--surface-panel);
  background-image: radial-gradient(var(--border-strong) 1px, transparent 1px);
  background-size: 14px 14px;
  border-radius: var(--radius-panel);
}
@media (min-width: 720px) { .stage { padding: clamp(24px, 5vw, 64px); } }
.stage picture { display: block; margin-inline: auto; }
@media (max-width: 719px) { .stage picture { max-width: 358px; } }
.stage img { display: block; width: 100%; height: auto; border-radius: var(--radius-tile); }

/* The strip of figures */

.ticker { border-block: 1px solid var(--border); }
.ticker-list {
  list-style: none;
  margin-block: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 32px;
  padding-block: 14px;
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.ticker li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
@media (min-width: 720px) { .ticker-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ticker-list { display: flex; justify-content: space-between; } }

/* Sections */

.statement { padding-block: 64px 0; }
@media (min-width: 960px) { .statement { padding-block: 96px 0; } }
.statement h2 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem); line-height: 1.18; max-width: 26em; text-wrap: pretty; }

.section { padding-block: 64px 0; }
@media (min-width: 960px) { .section { padding-block: 112px 0; } }
.section > h2 { margin-bottom: 40px; }

.centered { text-align: center; margin-bottom: 48px; }
.centered .stat { justify-content: center; margin-bottom: 16px; }
.centered h2 { margin-bottom: 16px; }
.centered > p:last-child { color: var(--muted); font-size: 1.125rem; }

/* The four steps. Each picture is the product doing that step: two small demos, then two crops of
   the real app. steps.js plays them once; left alone, each shows its finished state. */

.steps-head { margin-bottom: 40px; }
.steps-head h2 { max-width: 16em; margin-bottom: 12px; }
.steps-head mark { padding: 0 0.12em; border-radius: 8px; background: var(--highlighter); color: var(--ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.steps-head p { color: var(--muted); font-size: 1.125rem; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 24px; }
@media (min-width: 600px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.step h3 { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 1.25rem; }
.step p { margin: 10px 0 0; color: var(--muted); }
.step-no {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--text);
  color: var(--surface);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.step-approved .step-no { background: var(--highlighter); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* The picture stays daylight in both themes, like the app crops inside it. */
.step-pic {
  position: relative;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--bone);
  color: var(--ink);
}
.step-rises { padding-bottom: 0; padding-top: 56px; align-items: end; }
@media (min-width: 600px) { .step-pic { aspect-ratio: 1; } }
.step-pic img { display: block; width: 100%; height: auto; }
.step-flag {
  position: absolute;
  right: 24px;
  top: 24px;
  padding: 6px 12px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.8125rem;
  line-height: 1.2;
}
.step-approved .step-flag { background: var(--highlighter); }
.step-rises .step-flag { right: 16px; top: 16px; }

.pick { position: relative; display: grid; gap: 8px; width: 100%; }
.pick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-field);
  background: var(--white);
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--ink-soft);
}
.pick-on { border-color: var(--ink); color: var(--ink); }
.pick-mark { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line-strong); border-radius: 50%; }
.pick-on .pick-mark { border-color: var(--ink); background: var(--ink); color: var(--white); }
.pick-cursor { position: absolute; right: 2px; top: 30px; }

.log { list-style: none; display: grid; gap: 8px; width: 100%; margin: 0; padding: 0; }
.log li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 12px;
  border-radius: var(--radius-field);
  background: var(--white);
  font-size: 0.8125rem;
  line-height: 1.2;
}
.log li span:last-child { color: var(--ink-soft); }
.log .log-yes { background: var(--highlighter); box-shadow: inset 0 0 0 1px var(--ink); }
.log .log-yes span:last-child { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .steps-armed .step:not(.step-play) :is(.pick-cursor, .pick-on .pick-mark svg, .log li, .step-flag) { visibility: hidden; }
  .step-play .pick-cursor { animation: step-cursor 800ms var(--ease-quiet) both; }
  .step-play .pick-on .pick-mark svg { animation: step-pop 300ms var(--ease-quiet) 750ms both; }
  .step-play .log li { animation: step-in 300ms var(--ease-quiet) both; }
  .step-play .log li:nth-child(2) { animation-delay: 350ms; }
  .step-play .log li:nth-child(3) { animation-delay: 700ms; }
  .step-play .log .log-yes { animation: step-pop 400ms var(--ease-quiet) 1100ms both; }
  .step-play .step-flag { animation: step-pop 400ms var(--ease-quiet) 350ms both; }
}

@keyframes step-cursor {
  from { translate: 60px 90px; opacity: 0; }
  to { translate: 0 0; opacity: 1; }
}
@keyframes step-in {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes step-pop {
  from { opacity: 0; scale: 0.8; }
  to { opacity: 1; scale: 1; }
}

.steps-key { margin: 24px 0 0; font-size: 0.8125rem; color: var(--muted); }

.street {
  display: block;
  width: 100%;
  height: clamp(170px, 24vw, 340px);
  margin-top: 40px;
  object-fit: cover;
  object-position: 62% 100%;
  border-radius: var(--radius-panel);
}

.estate-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) {
  .estate-grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 64px; }
}

.facts { list-style: none; margin: 0 0 1.25em; padding: 0; }
.facts li { padding-block: 14px; border-top: 1px solid var(--border); }
.facts li:last-child { border-bottom: 1px solid var(--border); }

.screen { margin: 0; }
.screen picture { display: block; }
@media (max-width: 719px) { .screen picture { max-width: 358px; } }
.screen img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
}
.screen figcaption { margin-top: 12px; font-size: 0.875rem; color: var(--muted); }

/* The proof */

.cards { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 16px; }
@media (min-width: 800px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cards li { padding: 24px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-tile); }
.cards b {
  display: block;
  font-weight: 400;
  font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.cards p { color: var(--muted); }

.rules { display: grid; gap: 32px; align-items: center; margin-top: 40px; }
.rules img { display: block; width: 100%; max-width: 420px; height: auto; border-radius: var(--radius-panel); }
.rules .facts { margin: 0; }
@media (min-width: 960px) {
  .rules { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 64px; }
}

.questions { display: grid; gap: 24px; }
.questions > h2 { margin-bottom: 0; }
@media (min-width: 960px) {
  .questions { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 64px; }
}
.question-list { border-top: 1px solid var(--border); }
details { border-bottom: 1px solid var(--border); }
summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding-block: 12px;
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms var(--ease-quiet);
}
details[open] summary::after { transform: translateY(2px) rotate(225deg); }
details p { padding-bottom: 18px; max-width: 60ch; color: var(--muted); }

/* Pricing. The agent names their county and the price follows; the card's button is the one
   call to action, and the table of areas gives the same answer without the script. */

.pricing-head { margin-bottom: 32px; }
.pricing-head h2 { max-width: 16em; }
.billing { display: inline-flex; gap: 2px; margin: 0; padding: 3px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-panel); }
.billing label { position: relative; display: block; cursor: pointer; }
.billing input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.billing span { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: var(--radius-button); font-size: 0.9375rem; color: var(--muted); white-space: nowrap; }
.billing input:checked + span { background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text); }
.billing input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.price-year { display: none; }
@supports selector(:has(*)) {
  .pricing:has(input[name="billing"][value="year"]:checked) .price-month { display: none; }
  .pricing:has(input[name="billing"][value="year"]:checked) .price-year { display: inline; }
}

.price-grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 960px) { .price-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; } }

.choose { display: grid; gap: 20px; padding: 20px; border: 1.5px solid var(--mark-edge); border-radius: var(--radius-panel); background: var(--surface-raised); }
@media (min-width: 520px) { .choose { padding: 24px; } }
@media (min-width: 720px) { .choose { padding: 32px; } }
.choose p { margin: 0; }
.choose-where { display: grid; gap: 8px; }
.choose-where[hidden] { display: none; }
.choose-where label { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; }
.choose-where select {
  width: 100%;
  max-width: 420px;
  min-height: 52px;
  padding: 10px 40px 10px 16px;
  appearance: none;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-field);
  background: var(--surface-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23908f8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.choose-where option { color: var(--text); background: var(--surface-raised); }
.choose-find b { display: block; margin-bottom: 4px; font-size: 1.25rem; font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; }
.choose-price { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 4px; }
.choose-amount { color: var(--muted); }
.choose-amount b { font-weight: 400; font-size: clamp(2.75rem, 2.2rem + 1.6vw, 3.5rem); line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--text); }
.price-from { font-size: 1.25rem; color: var(--muted); }
.choose-counties { font-size: 1.0625rem; }
.choose-counties a { display: inline-block; }
.choose-soon { padding: 12px 16px; border-radius: var(--radius-button); background: var(--notice); }
.choose-area { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.choose-area[hidden] { display: none; }
.choose-area legend { margin-bottom: 8px; padding: 0; font-weight: 500; }
.choose-others { display: grid; gap: 8px; }
/* On a phone the price each county leads to sits under its name, so the name keeps one line. */
.choose-other {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 12px;
  min-height: 52px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
  cursor: pointer;
}
.choose-other[hidden] { display: none; }
.choose-other:hover { border-color: var(--border-strong); }
.choose-other:has(input:checked) { border-color: var(--mark-edge); }
.choose-other input { grid-row: span 2; width: 18px; height: 18px; margin: 0; accent-color: var(--action); cursor: pointer; }
.choose-other-soon { color: var(--muted); }
.choose-other-hint { font-size: 0.875rem; color: var(--muted); }
@media (min-width: 520px) {
  .choose-other { grid-template-columns: auto minmax(0, 1fr) auto; }
  .choose-other input { grid-row: auto; }
  .choose-other-hint { text-align: right; white-space: nowrap; }
}
.choose-fine { font-size: 0.875rem; color: var(--muted); }
.choose-unlock { padding-top: 16px; border-top: 1px solid var(--border); }
.choose-go { display: grid; justify-items: start; gap: 12px; }
.choose-go .cta-main { width: 100%; }
@media (min-width: 520px) { .choose-go .cta-main { width: auto; } }

.includes { padding: 24px; border-radius: var(--radius-panel); background: var(--surface-panel); }
@media (min-width: 720px) { .includes { padding: 32px; } }
.includes-title { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 24px; }
.includes-title span { display: block; }
.includes-list { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.includes-list li { display: flex; gap: 10px; line-height: 1.4; }
.includes-list svg { flex: none; margin-top: 2px; }
.includes-more { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--border-strong); }
.includes-more a { white-space: nowrap; }

.pricing-note { margin: 20px 0 0; max-width: 72ch; font-size: 0.9375rem; color: var(--muted); }
.pricing-note b { font-weight: 500; color: var(--text); }

.price-hero { padding-block: 56px 0; }
.price-hero h1 span { display: block; color: var(--muted); }
.price-hero .lede { margin-bottom: 32px; }

.math { display: grid; gap: 16px; }
@media (min-width: 720px) { .math { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.math-side { padding: 24px; border-radius: var(--radius-tile); background: var(--surface-panel); }
.math-side b { display: block; margin-bottom: 8px; font-weight: 400; font-size: clamp(2.75rem, 2.2rem + 2vw, 4rem); line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.math-side p { color: var(--muted); }

.areas-lede { margin: 12px 0 24px; max-width: 72ch; color: var(--muted); }
.compare-scroll { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { padding: 14px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; font-weight: 400; }
.compare thead th { color: var(--muted); font-size: 0.9375rem; border-bottom-color: var(--border-strong); }
.compare tbody th { color: var(--text); }
.areas-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.areas-table .area-row th { padding-top: 28px; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.areas-table tbody:first-of-type .area-row th { padding-top: 18px; }
@media (max-width: 559px) {
  .compare th, .compare td { padding: 12px 8px; }
  .compare th:first-child, .compare td:first-child { padding-left: 0; }
  .areas-table td { white-space: normal; }
}

.closing { display: grid; justify-items: center; gap: 24px; padding-block: 88px; text-align: center; }
@media (min-width: 960px) { .closing { padding-block: 128px; } }

.foot { background: var(--obsidian); color: #a8a7a5; padding-block: 40px 56px; font-size: 0.9375rem; }
.foot p { margin: 0 0 0.5em; }
.foot a { color: var(--white); }
.foot :focus-visible { outline-color: var(--highlighter); }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }

/* The short pages: privacy, thanks and retry */

.page { padding-block: 48px 64px; }
.page > * { max-width: 720px; }
.page h1 { font-size: clamp(2.25rem, 1.8rem + 2vw, 3rem); margin-bottom: 0.5em; }
.page h2 { font-size: 1.5rem; margin: 1.8em 0 0.5em; }
.page ul { padding-left: 1.2em; }
.notice { background: var(--notice); border-radius: var(--radius-button); padding: 16px 18px; }
.notice.error { background: var(--notice-error); color: var(--notice-error-text); }
.notice.error a { color: inherit; }