/* Plotica landing page. Self-hosted fonts (SIL OFL, see /fonts/OFL.txt); no third-party requests. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/Archivo-latin-wdth-wght.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/SplineSansMono-latin-wght.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Locked frames: hero + exploded map | key (the map merges into the plan) | street, one frame per application | dossier. */
:root {
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gut: clamp(16px, 3.2vw, 48px);
  --hdr: 64px;
  --fh: calc(100svh - var(--hdr));
  --mfh: 50svh;

  /* brand */
  --brand: #ec3013;

  /* printed map palette: fixed, so paper stays paper in either theme */
  --L-bldg: #d9d4c8;
  --L-bldg-o: #47433a;
  --L-road: #1c1b18;
  --L-water: #a8c8e6;
  --L-hedge: #5e7a45;
  --L-green-f: rgba(120, 160, 60, 0.16);
  --L-parcel: #4a463d;
  --L-map-t: #47433a;
  --L-site: #dd2e10;
  --L-site-soft: rgba(236, 48, 19, 0.15);
  --L-ca: #78aa00;
  --L-flood: #1565c0;
  --L-listed: #f2b705;
  --L-listed-o: #8a6200;
  --L-tpo: #2e8540;
  --L-a4: #d9694a;
  --L-gb: #6c8a1e;
  --L-app: #15803d;
  --L-pen: #c27803;
  --L-ref: #c81e1e;
  --L-wd: #5d636a;

  /* daylight on drafting film */
  --bg: #e3e8ee;
  --bg-2: #d7dee6;
  --bg-3: #f3f6f9;
  --fg: #0f1419;
  --fg-2: #465160;
  --fg-3: #6f7a88;
  --rule: #b6c0cc;
  --rule-2: #cdd5de;
  --grid: rgba(15, 20, 25, 0.05);
  --grid-2: rgba(15, 20, 25, 0.1);
  --btn: #0f1419;
  --btn-fg: #f3f6f9;
  --btn-hover: #2a323c;
  --hover: rgba(15, 20, 25, 0.06);
  --focus: #0f1419;
  --glow: radial-gradient(
    50% 62% at 70% 54%,
    rgba(255, 255, 255, 0.62),
    rgba(255, 255, 255, 0) 72%
  );
  --film-rgb: 255 255 255;
  --film-a: 0.46;
  --film-on: 0.72;
  --film-base: rgba(255, 255, 255, 0.97);
  --film-edge: color-mix(in srgb, currentColor 35%, rgba(15, 20, 25, 0.5));
  --tint: 0.09;
  --edge-w: 1.5px;
  --dim-o: 0.2;
  --plan-bg: #fcfdfe;
  --plan-sh: 0 34px 60px -28px rgba(14, 30, 52, 0.5), 0 0 0 1.5px #0f1419;
  --film-glow: 0 0 0 transparent;
  --film-glow-on: 0 0 0 transparent;
  --pad-a: rgba(14, 30, 52, 0.32);
  --pad-b: rgba(14, 30, 52, 0);
  --pad-edge: transparent;
  --pin-sh: 0.5;
  --bldg: #d0d7e0;
  --bldg-o: #28303b;
  --road: #10151b;
  --water: #97c0ea;
  --hedge: #4f7334;
  --green-f: rgba(120, 160, 60, 0.2);
  --parcel: #27303a;
  --map-t: #323b47;
  --site: #ec3013;
  --site-soft: rgba(236, 48, 19, 0.17);
  --ca: #78aa00;
  --flood: #1976d2;
  --listed: #f9c744;
  --listed-o: #b8860b;
  --tpo: #557153;
  --a4: #e07a5f;
  --gb: #85994b;
  --st-app: #15803d;
  --st-pen: #b45309;
  --st-ref: #b91c1c;
  --st-wd: #52525b;
  --pin-eye: #ffffff;
  --pin-edge: #ffffff;
  --pin-glow: none;
  --on-lc: #ffffff;
  --leader: #0f1419;
  --plumb: rgba(15, 20, 25, 0.36);
  --lt-track: #c8d0da;
  --lt-edge: #aeb9c6;
  --lt-panel: #ffffff;
  --lt-glow: 0 0 0 transparent;
  --lt-x: 0px;
  --lt-led: #98a2ae;
  --card-sh: 0 0 0 1px var(--rule), 0 24px 44px -30px rgba(14, 30, 52, 0.6);

  --paper: #f8f5ee;
  --paper-edge: #e2daca;
  --paper-ink: #1c1b18;
  --paper-ink-2: #555149;
  --paper-rule: #ddd6c7;
  --paper-ok: #2e7a45;
  --paper-shadow:
    0 1px 0 rgba(40, 34, 20, 0.06), 0 26px 50px -26px rgba(14, 30, 52, 0.5),
    0 6px 14px -8px rgba(14, 30, 52, 0.22);

  /* the cutting mat under the street model */
  --mat: #1f6e55;
  --mat-fine: rgba(206, 232, 218, 0.2);
  --mat-bold: rgba(220, 232, 140, 0.42);
  --on-mat: #f5f8f3;
  --on-mat-2: #d3e7da;
  --card: #f7f6f1;
  --card-ink: #18201c;
  --card-ink-2: #4e5752;
  --card-rule: #ddd9cd;
  --card-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 12px 18px 30px -16px rgba(3, 30, 20, 0.6);
  --m-mat: #1f6e55;
  --m-fine: #a3cab6;
  --m-bold: #dce68a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1116;
    --bg-2: #111820;
    --bg-3: #121a23;
    --fg: #e6edf4;
    --fg-2: #98a6b6;
    --fg-3: #76839a;
    --rule: #26303c;
    --rule-2: #1b232d;
    --grid: rgba(120, 175, 235, 0.05);
    --grid-2: rgba(120, 175, 235, 0.085);
    --btn: #e6edf4;
    --btn-fg: #0d1116;
    --btn-hover: #c9d6e3;
    --hover: #16202a;
    --focus: #bfe3ff;
    --glow: radial-gradient(48% 60% at 70% 52%, rgba(70, 140, 220, 0.16), transparent 70%);
    --film-rgb: 150 195 240;
    --film-a: 0.085;
    --film-on: 0.14;
    --film-base: rgba(150, 195, 240, 0.12);
    --film-edge: rgba(170, 215, 255, 0.42);
    --tint: 0;
    --edge-w: 1px;
    --dim-o: 0.16;
    --plan-bg: #0e151d;
    --plan-sh: 0 0 70px -18px rgba(120, 180, 240, 0.4), 0 0 0 1px rgba(170, 215, 255, 0.5);
    --film-glow: 0 0 38px -12px currentColor;
    --film-glow-on: 0 0 60px -6px currentColor;
    --pad-a: rgba(140, 200, 255, 0.38);
    --pad-b: rgba(140, 200, 255, 0);
    --pad-edge: rgba(160, 210, 255, 0.22);
    --pin-sh: 0;
    --bldg: rgba(185, 212, 240, 0.13);
    --bldg-o: #a9bed3;
    --road: #9fb4ca;
    --water: rgba(79, 166, 250, 0.3);
    --hedge: #86a276;
    --green-f: rgba(184, 207, 115, 0.07);
    --parcel: #b9cadb;
    --map-t: #98a6b6;
    --site: #ff5a36;
    --site-soft: rgba(255, 90, 54, 0.16);
    --ca: #a6d93b;
    --flood: #4fa6fa;
    --listed: #ffd45c;
    --listed-o: #e8b640;
    --tpo: #8fc28a;
    --a4: #ff9a7e;
    --gb: #b8cf73;
    --st-app: #3bcb74;
    --st-pen: #f5a524;
    --st-ref: #f25a5a;
    --st-wd: #a1a1aa;
    --pin-eye: #0d1116;
    --pin-edge: #0d1116;
    --pin-glow: url(#glow);
    --on-lc: #0d1116;
    --leader: #cfe3f7;
    --plumb: rgba(170, 215, 255, 0.4);
    --lt-track: #173049;
    --lt-edge: #2b4a6a;
    --lt-panel: #e6f4ff;
    --lt-glow: 0 0 12px 3px rgba(150, 210, 255, 0.8);
    --lt-x: 20px;
    --lt-led: #bfe3ff;
    --card-sh: 0 0 0 1px var(--rule), 0 0 60px -24px rgba(120, 180, 240, 0.35);
    --paper: #e9e3d6;
    --paper-edge: #cfc6b2;
    --paper-ink: #1c1b18;
    --paper-ink-2: #4e4a42;
    --paper-rule: #cfc7b6;
    --paper-shadow:
      0 0 0 1px rgba(255, 236, 200, 0.05), 0 34px 70px -24px rgba(0, 0, 0, 0.8),
      0 0 90px -30px rgba(255, 214, 160, 0.22);
    --mat: #0f3a2d;
    --mat-fine: rgba(110, 165, 140, 0.18);
    --mat-bold: rgba(185, 196, 90, 0.3);
    --on-mat: #eaf2ec;
    --on-mat-2: #a9c4b6;
    --card: #e6e2d5;
    --card-shadow: 0 0 0 1px rgba(255, 240, 200, 0.05), 12px 18px 34px -14px rgba(0, 0, 0, 0.75);
    --m-mat: #0f3a2d;
    --m-fine: #5e8f79;
    --m-bold: #b9c45a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1116;
  --bg-2: #111820;
  --bg-3: #121a23;
  --fg: #e6edf4;
  --fg-2: #98a6b6;
  --fg-3: #76839a;
  --rule: #26303c;
  --rule-2: #1b232d;
  --grid: rgba(120, 175, 235, 0.05);
  --grid-2: rgba(120, 175, 235, 0.085);
  --btn: #e6edf4;
  --btn-fg: #0d1116;
  --btn-hover: #c9d6e3;
  --hover: #16202a;
  --focus: #bfe3ff;
  --glow: radial-gradient(48% 60% at 70% 52%, rgba(70, 140, 220, 0.16), transparent 70%);
  --film-rgb: 150 195 240;
  --film-a: 0.085;
  --film-on: 0.14;
  --film-base: rgba(150, 195, 240, 0.12);
  --film-edge: rgba(170, 215, 255, 0.42);
  --tint: 0;
  --edge-w: 1px;
  --dim-o: 0.16;
  --plan-bg: #0e151d;
  --plan-sh: 0 0 70px -18px rgba(120, 180, 240, 0.4), 0 0 0 1px rgba(170, 215, 255, 0.5);
  --film-glow: 0 0 38px -12px currentColor;
  --film-glow-on: 0 0 60px -6px currentColor;
  --pad-a: rgba(140, 200, 255, 0.38);
  --pad-b: rgba(140, 200, 255, 0);
  --pad-edge: rgba(160, 210, 255, 0.22);
  --pin-sh: 0;
  --bldg: rgba(185, 212, 240, 0.13);
  --bldg-o: #a9bed3;
  --road: #9fb4ca;
  --water: rgba(79, 166, 250, 0.3);
  --hedge: #86a276;
  --green-f: rgba(184, 207, 115, 0.07);
  --parcel: #b9cadb;
  --map-t: #98a6b6;
  --site: #ff5a36;
  --site-soft: rgba(255, 90, 54, 0.16);
  --ca: #a6d93b;
  --flood: #4fa6fa;
  --listed: #ffd45c;
  --listed-o: #e8b640;
  --tpo: #8fc28a;
  --a4: #ff9a7e;
  --gb: #b8cf73;
  --st-app: #3bcb74;
  --st-pen: #f5a524;
  --st-ref: #f25a5a;
  --st-wd: #a1a1aa;
  --pin-eye: #0d1116;
  --pin-edge: #0d1116;
  --pin-glow: url(#glow);
  --on-lc: #0d1116;
  --leader: #cfe3f7;
  --plumb: rgba(170, 215, 255, 0.4);
  --lt-track: #173049;
  --lt-edge: #2b4a6a;
  --lt-panel: #e6f4ff;
  --lt-glow: 0 0 12px 3px rgba(150, 210, 255, 0.8);
  --lt-x: 20px;
  --lt-led: #bfe3ff;
  --card-sh: 0 0 0 1px var(--rule), 0 0 60px -24px rgba(120, 180, 240, 0.35);
  --paper: #e9e3d6;
  --paper-edge: #cfc6b2;
  --paper-ink: #1c1b18;
  --paper-ink-2: #4e4a42;
  --paper-rule: #cfc7b6;
  --paper-shadow:
    0 0 0 1px rgba(255, 236, 200, 0.05), 0 34px 70px -24px rgba(0, 0, 0, 0.8),
    0 0 90px -30px rgba(255, 214, 160, 0.22);
  --mat: #0f3a2d;
  --mat-fine: rgba(110, 165, 140, 0.18);
  --mat-bold: rgba(185, 196, 90, 0.3);
  --on-mat: #eaf2ec;
  --on-mat-2: #a9c4b6;
  --card: #e6e2d5;
  --card-shadow: 0 0 0 1px rgba(255, 240, 200, 0.05), 12px 18px 34px -14px rgba(0, 0, 0, 0.75);
  --m-mat: #0f3a2d;
  --m-fine: #5e8f79;
  --m-bold: #b9c45a;
  color-scheme: dark;
}
body {
  background: var(--bg);
  color: var(--fg);
}

/* CSP-safe colour classes: replace every inline style="--lc:..." / "--c:...". Declared before the components so a
   component's own colour (e.g. .mc-st) still wins at equal specificity. */
.lc-0 {
  --lc: var(--fg-2);
}
.lc-1 {
  --lc: var(--site);
}
.lc-2 {
  --lc: var(--ca);
}
.lc-3 {
  --lc: var(--flood);
}
.lc-4 {
  --lc: var(--listed-o);
}
.lc-5 {
  --lc: var(--a4);
}
.lc-6 {
  --lc: var(--st-app);
}
.st-app {
  --c: var(--st-app);
  color: var(--st-app);
}
.st-pen {
  --c: var(--st-pen);
  color: var(--st-pen);
}
.st-ref {
  --c: var(--st-ref);
  color: var(--st-ref);
}
.st-wd {
  --c: var(--st-wd);
  color: var(--st-wd);
}
.L-app {
  --c: var(--L-app);
  color: var(--L-app);
}
.L-pen {
  --c: var(--L-pen);
  color: var(--L-pen);
}
.L-ref {
  --c: var(--L-ref);
  color: var(--L-ref);
}
.L-wd {
  --c: var(--L-wd);
  color: var(--L-wd);
}
.rb.L-app {
  --lc: var(--L-app);
}
.rb.L-pen {
  --lc: var(--L-pen);
}
.rb.L-ref {
  --lc: var(--L-ref);
}
.rb.L-wd {
  --lc: var(--L-wd);
}
[hidden] {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--hdr);
}
body {
  margin: 0;
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: inherit;
}
button,
input {
  font: inherit;
  color: inherit;
}
h1,
h2,
h3,
p,
dl,
dd,
ol,
ul {
  margin: 0;
}
ol,
ul {
  padding: 0;
  list-style: none;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.page {
  overflow-x: clip;
  background-image:
    linear-gradient(var(--grid-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-2) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:
    120px 120px,
    120px 120px,
    24px 24px,
    24px 24px;
  background-position: -1px -1px;
}
.eyebrow {
  font: 500 12px/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.frame {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: var(--fh);
}

/* ---------- logo: the red pin-P, then "lotica" in Archivo ---------- */
.logo {
  display: inline-flex;
  align-items: baseline;
  font: 740 var(--lsz, 28px)/1 var(--sans);
  font-stretch: 89%;
  letter-spacing: -0.005em;
  color: var(--fg);
  white-space: nowrap;
}
.logo .mark {
  height: 0.73em;
  width: auto;
  flex: none;
  position: relative;
  top: -0.015em;
  margin-right: 0.07em;
}

/* ---------- header ---------- */
.top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 28px);
  height: var(--hdr);
  padding: 0 var(--gut);
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-right: 6px;
  text-decoration: none;
  --lsz: 30px;
}
.nav {
  display: flex;
  gap: 2px;
}
.nav a,
.signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  border-radius: 2px;
}
.nav a:hover,
.signin:hover {
  background: var(--hover);
}
.nav a[aria-current="true"] {
  box-shadow: inset 0 -2px 0 var(--brand);
}
.actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--btn);
  color: var(--btn-fg);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  border-radius: 2px;
  white-space: nowrap;
}
.cta:hover {
  background: var(--btn-hover);
}
.lt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  color: var(--fg-2);
}
.lt:hover {
  background: var(--hover);
}
.lt-sw {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 3px;
  background: var(--lt-track);
  border: 1px solid var(--lt-edge);
  transition: background 0.35s;
}
.lt-sw::before {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 50%;
  height: 1px;
  background: var(--lt-edge);
}
.lt-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  background: var(--lt-panel);
  border: 1px solid var(--lt-edge);
  box-shadow: var(--lt-glow);
  transform: translateX(var(--lt-x));
  transition:
    transform 0.45s cubic-bezier(0.3, 1.35, 0.45, 1),
    box-shadow 0.35s,
    background 0.35s;
}
.lt-knob::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--lt-led);
  border-radius: 1px;
  opacity: 0.9;
}
.lt-t {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- frames 1 + 2 share one sticky figure ---------- */
.seq {
  display: grid;
  grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
  column-gap: clamp(24px, 3vw, 48px);
  padding: 0 var(--gut);
  background-image: var(--glow);
}
.hero {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 28px 0;
  min-width: 0;
}
.display {
  line-height: 1;
  margin: 6px 0 0 -0.02em;
  --lsz: min(8.6vw, 128px);
}
.tag1 {
  font: 650 clamp(22px, 1.9vw, 28px)/1.15 var(--sans);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.tag2 {
  font-size: 18px;
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 30em;
  text-wrap: pretty;
}
.tag2 b {
  font-weight: 600;
  color: var(--fg);
}
.search {
  margin-top: 6px;
}
.field {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--fg);
  background: var(--bg-3);
}
#q {
  flex: 1;
  min-width: 0;
  height: 54px;
  border: 0;
  background: transparent;
  font-size: 18px;
  padding: 0 16px;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
#q::placeholder {
  color: var(--fg-3);
}
#q:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
#q::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.go {
  flex: none;
  min-width: 112px;
  border: 0;
  background: var(--btn);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
  border-radius: 0;
}
.go:hover {
  background: var(--btn-hover);
}
.try {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.try-k {
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--fg-2);
  margin-right: 2px;
}
.chip {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  background: var(--bg-3);
  border-radius: 2px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
}
.chip:hover {
  border-color: var(--fg-2);
}
.status {
  margin-top: 14px;
  min-height: 20px;
  font: 400 12.5px/1.6 var(--mono);
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.status.warn {
  color: var(--site);
}
.status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--site);
  margin-right: 9px;
  vertical-align: 1px;
}
.keyf {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 28px 0;
  min-width: 0;
}
.mapf {
  display: none;
}
.h2 {
  font: 800 clamp(44px, 4.6vw, 76px)/0.92 var(--sans);
  font-stretch: 92%;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 31em;
  text-wrap: pretty;
}

.seq-fig {
  grid-column: 2;
  grid-row: 1 / 3;
  position: relative;
  min-width: 0;
}
.figure {
  position: sticky;
  top: var(--hdr);
  height: var(--fh);
  margin: 0;
  min-width: 0;
}
.stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.stack {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--S, 360px);
  height: var(--S, 360px);
  transform-style: preserve-3d;
  pointer-events: none;
}
.pad {
  position: absolute;
  left: -12%;
  top: -8%;
  width: 128%;
  height: 128%;
  background: radial-gradient(closest-side, var(--pad-a), var(--pad-b));
  box-shadow: inset 0 0 0 1px var(--pad-edge);
  border-radius: 4%;
  transform: translate3d(3%, 4%, -12px);
  opacity: calc(1 - var(--c, 0));
}
.sheet {
  position: absolute;
  inset: 0;
  background: rgb(var(--film-rgb) / calc(var(--film-a) * var(--fa, 1)));
  box-shadow:
    inset 0 0 0 var(--edge-w) var(--film-edge),
    var(--film-glow);
  transition: background-color 0.35s;
}
.sheet.base {
  background: var(--film-base);
}
.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: calc(var(--tint) * var(--fa, 1));
}
.sheet.base::before {
  display: none;
}
.sheet svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s;
}
.sheet.is-dim svg {
  opacity: var(--dim-o);
}
.sheet.base.is-dim svg {
  opacity: 0.5;
}
.sheet.is-focus {
  background: rgb(var(--film-rgb) / var(--film-on));
  box-shadow:
    inset 0 0 0 2px currentColor,
    var(--film-glow-on);
}
.sheet.base.is-focus {
  background: var(--film-base);
}
.shade {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}
.shade svg {
  display: block;
  width: 100%;
  height: 100%;
}
.pin {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--pw);
  height: var(--ph);
  transform-origin: 50% 100%;
  transition: opacity 0.35s;
}
.pin svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pin-b {
  fill: currentColor;
  stroke: var(--pin-edge);
  stroke-width: 7;
  filter: var(--pin-glow);
}
.pin-e {
  fill: var(--pin-eye);
}
.focusing .pin {
  opacity: 0.22;
}
.focusing.f6 .pin {
  opacity: 1;
}
.kd {
  opacity: 0.1 !important;
  transition: opacity 0.3s;
}
.pin.kd {
  opacity: 0.12 !important;
}

/* sheet drawing */
.m-green {
  fill: var(--green-f);
  stroke: var(--hedge);
  stroke-width: 2.4;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
}
.m-hedge {
  fill: none;
  stroke: var(--hedge);
  stroke-width: 2.6;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
}
.m-water {
  fill: var(--water);
}
.m-road {
  fill: none;
  stroke: var(--road);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.m-turn {
  fill: var(--road);
}
.m-bldg {
  fill: var(--bldg);
  stroke: var(--bldg-o);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.m-t {
  font: 500 22px var(--mono);
  fill: var(--map-t);
  letter-spacing: 0.1em;
}
.m-ink {
  fill: none;
  stroke: var(--map-t);
  stroke-width: 2.4;
}
.m-inkf {
  fill: var(--map-t);
}
.t-parcel {
  fill: none;
  stroke: var(--parcel);
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.t-site-f {
  fill: var(--site-soft);
}
.t-site {
  fill: none;
  stroke: var(--site);
  stroke-width: 7;
  stroke-linejoin: round;
}
.c-ca-f {
  fill: var(--ca);
  fill-opacity: 0.2;
}
.c-ca-h {
  fill: none;
  stroke: var(--ca);
  stroke-width: 3.2;
  opacity: 0.8;
}
.c-ca {
  fill: none;
  stroke: var(--ca);
  stroke-width: 5;
  stroke-linejoin: round;
}
.c-f2 {
  fill: var(--flood);
  fill-opacity: 0.13;
  stroke: var(--flood);
  stroke-width: 2.6;
  stroke-dasharray: 10 7;
}
.c-f2d {
  fill: var(--flood);
  opacity: 0.85;
}
.c-f3 {
  fill: var(--flood);
  fill-opacity: 0.3;
  stroke: var(--flood);
  stroke-width: 3;
}
.c-f3d {
  fill: var(--flood);
  stroke: var(--flood);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.c-river {
  fill: none;
  stroke: var(--flood);
  stroke-width: 7;
  stroke-linecap: round;
}
.c-lb {
  fill: var(--listed);
  stroke: var(--listed-o);
  stroke-width: 3.4;
  stroke-linejoin: round;
}
.c-tpo {
  fill: var(--tpo);
  fill-opacity: 0.3;
  stroke: var(--tpo);
  stroke-width: 3.2;
}
.c-tpo-d {
  fill: var(--tpo);
}
.c-gb-f {
  fill: var(--gb);
  fill-opacity: 0.15;
}
.c-gb-m {
  fill: none;
  stroke: var(--gb);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.c-gb-e {
  fill: none;
  stroke: var(--gb);
  stroke-width: 5;
}
.c-gb-k {
  fill: none;
  stroke: var(--gb);
  stroke-width: 16;
  stroke-dasharray: 2.6 12;
}
.c-a4 {
  fill: var(--a4);
  fill-opacity: 0.2;
  stroke: var(--a4);
  stroke-width: 4.5;
  stroke-dasharray: 16 9;
  stroke-linejoin: round;
}
.foot-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
}
.pin-sh {
  opacity: calc(var(--pin-sh) * (1 - var(--c, 0)));
}
.plan {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  background: var(--plan-bg);
  box-shadow: var(--plan-sh);
}
.plan svg {
  display: block;
  width: 100%;
  height: 100%;
}
.plan .ps,
.plan [data-k],
.plan .pf {
  transition: opacity 0.3s;
}
.plan .ps.is-dim {
  opacity: 0.2;
}
.plan .ps.base.is-dim {
  opacity: 0.55;
}
.plan .kd {
  opacity: 0.1 !important;
}
.pf-b {
  fill: currentColor;
  stroke: var(--pin-edge);
  stroke-width: 8;
}
.pf-e {
  fill: var(--pin-eye);
}
.plate {
  fill: var(--paper);
  opacity: 0.9;
}
.ghost {
  fill: none;
  stroke: var(--site);
  stroke-width: 2.4;
  opacity: 0.5;
  stroke-linejoin: round;
}
.ghost-g {
  fill: none;
  stroke: var(--site);
  stroke-width: 18;
  opacity: 0.07;
  stroke-linejoin: round;
}
.sheet-k {
  fill: currentColor;
}
.sheet-t {
  font: 500 24px var(--mono);
  letter-spacing: 0.14em;
  fill: var(--fg-2);
}
.sw-bg {
  fill: var(--film-base);
}

/* ---------- the flow rail (shared by the map and the street) ---------- */
.rail {
  position: absolute;
  left: 0;
  top: 20px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.rail-l {
  display: flex;
  align-items: center;
  position: relative;
  --p: 0;
}
.rail-l::before,
.rail-l::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--rule);
}
.rail-l::before {
  right: 20px;
}
.rail-l::after {
  width: calc((100% - 40px) * var(--p));
  background: var(--fg);
  transition: width 0.6s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.rail-l li {
  position: relative;
  z-index: 1;
}
.rb {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 2px;
}
.rail-l li:last-child .rb {
  width: auto;
  padding: 0 2px;
  margin-right: 0;
}
.rb span {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 5px;
  font: 500 11.5px/1 var(--mono);
  letter-spacing: 0.02em;
  border: 1.5px solid var(--fg-3);
  background: var(--bg);
  color: var(--fg-2);
  transition:
    background 0.3s,
    color 0.3s,
    border-color 0.3s,
    transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.rb:hover span {
  border-color: var(--fg);
}
.rb.done span {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}
.rb[aria-current="step"] span {
  background: var(--lc, var(--fg));
  border-color: var(--lc, var(--fg));
  color: var(--on-lc);
  transform: scale(1.18);
}
.rb.key[aria-current="step"] span {
  color: var(--bg);
}
.rail-now {
  font: 500 12px/1.3 var(--mono);
  color: var(--fg-2);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rail-now b {
  font-weight: 600;
  color: var(--fg);
}

/* figure captions, labels, leaders */
.fig-cap {
  position: absolute;
  top: 84px;
  right: 0;
  width: var(--lw, 290px);
  padding-left: 34px;
  font: 400 11.5px/1.65 var(--mono);
  color: var(--fg-2);
  z-index: 2;
  transition: opacity 0.35s;
}
.fig-cap b {
  font-weight: 600;
  color: var(--fg);
}
.fig-cap span {
  color: var(--fg-3);
}
.labels {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--lw, 290px);
  z-index: 2;
  transition:
    opacity 0.4s,
    visibility 0s;
}
.labels li {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(var(--ly, 0px));
}
.lbl {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 9px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 5px 6px 6px 5px;
  cursor: pointer;
  border-radius: 2px;
  min-height: 44px;
  opacity: var(--lo, 1);
  transition: background 0.2s;
}
.lbl:hover,
.lbl.on {
  background: var(--hover);
}
.lbl-n {
  font: 500 12px/20px var(--mono);
  color: var(--fg);
  align-self: start;
  background: linear-gradient(90deg, var(--lc) 50%, var(--lc2) 50%) 0 21px/18px 3px no-repeat;
  padding-bottom: 6px;
}
.lbl-b {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lbl-t {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.lbl-sub {
  font-weight: 400;
  color: var(--fg-2);
}
.lbl-d {
  font-size: 13.5px;
  line-height: 18px;
  color: var(--fg-2);
  margin-top: 1px;
}
.lbl-s {
  font: 400 10.5px/16px var(--mono);
  color: var(--fg-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leaders {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}
.ld {
  fill: none;
  stroke: var(--leader);
  stroke-width: 1;
  opacity: 0.6;
  transition:
    opacity 0.3s,
    stroke-width 0.3s;
}
.ld.on {
  opacity: 1;
  stroke-width: 1.6;
  stroke: var(--lc);
}
.ld-dot {
  fill: var(--leader);
}
.pl {
  fill: none;
  stroke: var(--plumb);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.sl {
  fill: none;
  stroke: var(--site);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.55;
}
.tag {
  font: 500 11px var(--mono);
  fill: var(--fg-2);
}
.tl {
  fill: none;
  stroke: var(--lc);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.tl-dot,
.tl-end {
  fill: var(--lc);
}
.plan-cap {
  position: absolute;
  left: 0;
  right: 0;
  font: 400 11.5px/1.5 var(--mono);
  color: var(--fg-2);
  display: flex;
  justify-content: center;
  gap: 8px 22px;
  flex-wrap: wrap;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  z-index: 2;
}
.plan-cap b {
  font-weight: 600;
  color: var(--fg);
}

/* the layer card: what the flow rail opens */
.lcard {
  position: absolute;
  right: 0;
  top: 110px;
  width: var(--lw, 290px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 14px;
  background: var(--bg-3);
  box-shadow: var(--card-sh);
  border-radius: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.3s,
    transform 0.3s,
    visibility 0s 0.3s;
}
.lc-k {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 12px/1 var(--mono);
  color: var(--fg-3);
  letter-spacing: 0.04em;
}
.lc-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font: 600 14px/1 var(--mono);
  background: var(--lc);
  color: var(--on-lc);
}
.lc-x {
  margin-left: auto;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  background: none;
  border-radius: 2px;
  cursor: pointer;
  font: 500 11.5px/1 var(--mono);
  color: var(--fg-2);
}
.lc-x:hover {
  border-color: var(--fg-2);
  color: var(--fg);
}
.lc-h {
  font: 780 26px/1 var(--sans);
  font-stretch: 94%;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.lc-src {
  font: 400 11.5px/1.45 var(--mono);
  color: var(--fg-2);
  margin-top: -4px;
}
.lc-sw {
  display: flex;
  gap: 10px;
}
.lc-sw figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1;
}
.lc-sw svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  border: 1px solid var(--rule);
  background: var(--bg-3);
}
.lc-sw figcaption {
  font: 400 10.5px/1.3 var(--mono);
  color: var(--fg-3);
}
.lc-dl {
  display: grid;
  border-top: 1px solid var(--rule);
}
.lc-dl div {
  display: grid;
  gap: 2px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-2);
}
.lc-dl dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 11.5px/1.5 var(--mono);
  color: var(--fg);
}
.lc-dl dt svg {
  width: 11px;
  height: 17px;
  flex: none;
  overflow: visible;
}
.lc-dl dd {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--fg-2);
  text-wrap: pretty;
}
.lc-dl.pins div {
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
}
.lc-dl.pins dt {
  font: 600 14px/1.3 var(--sans);
}
.lc-dl.pins dd {
  font-size: 13.5px;
}
.lc-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
}
.lc-nav button {
  min-height: 44px;
  padding: 0 10px;
  border: 1.5px solid var(--fg);
  background: none;
  border-radius: 2px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.lc-nav button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lc-nav .nx {
  background: var(--btn);
  border-color: var(--btn);
  color: var(--btn-fg);
  justify-content: flex-end;
  text-align: right;
}
.lc-nav .nx:hover {
  background: var(--btn-hover);
}
.lc-nav .pv:hover {
  background: var(--hover);
}
.lc-nav button:disabled {
  opacity: 0.35;
  cursor: default;
}
.m-hero .tl,
.m-hero .tl-dot,
.m-hero .tl-end {
  display: none;
}
.m-tour .labels,
.m-plan .labels {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0s 0.3s;
}
.m-tour .lcard {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.35s 0.12s,
    transform 0.35s 0.12s,
    visibility 0s;
}
.m-tour .fig-cap,
.m-plan .fig-cap {
  opacity: 0;
}
.m-plan .plan-cap {
  opacity: 1;
  transition-delay: 0.45s;
}

/* the key at rest */
.legend {
  display: grid;
  gap: 14px;
  margin-top: 2px;
}
.lg-g {
  display: grid;
}
.lg-gh {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
  padding: 0 0 7px;
  border-bottom: 1.5px solid var(--fg);
}
.lg-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}
.lg {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 5px 6px 5px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule-2);
  text-align: left;
  cursor: pointer;
  border-radius: 0;
}
.lg:hover,
.lg.on {
  background: var(--hover);
}
.lg svg {
  display: block;
  width: 48px;
  height: 32px;
  border: 1px solid var(--rule);
  background: var(--bg-3);
}
.lg b {
  display: block;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
}
.lg-x {
  display: block;
  min-width: 0;
}
.lg em {
  display: block;
  font-style: normal;
  font-size: 13px;
  line-height: 1.3;
  color: var(--fg-2);
}

/* ---------- street model: one frame per application ---------- */
.street {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background-color: var(--mat);
  color: var(--on-mat);
  background-image:
    linear-gradient(var(--mat-bold) 2px, transparent 2px),
    linear-gradient(90deg, var(--mat-bold) 2px, transparent 2px),
    linear-gradient(var(--mat-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-fine) 1px, transparent 1px);
  background-size:
    120px 120px,
    120px 120px,
    24px 24px,
    24px 24px;
  background-position: -1px -1px;
}
.st-stage {
  grid-area: 1 / 1;
  position: sticky;
  top: var(--hdr);
  height: var(--fh);
  align-self: start;
  overflow: hidden;
  z-index: 0;
}
.st-stage canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.st-frame {
  position: absolute;
  left: 38%;
  right: 6%;
  top: 96px;
  bottom: 64px;
  pointer-events: none;
}
.st-tags {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.srail {
  left: 38%;
  --rule: rgba(245, 248, 243, 0.34);
  --fg: var(--on-mat);
  --fg-2: var(--on-mat-2);
  --fg-3: rgba(211, 231, 218, 0.62);
  --bg: var(--mat);
  --on-lc: #ffffff;
}
.srail .rb.done span {
  color: var(--mat);
}
.mtag {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: none;
  transition: opacity 0.35s;
  will-change: transform;
  opacity: 0;
}
.mtag.on {
  opacity: 1;
}
.mtag-in {
  position: absolute;
  bottom: calc(var(--stem, 34px) + 2px);
  left: -12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px 8px;
  background: var(--card);
  color: var(--card-ink);
  box-shadow: var(--card-shadow);
  white-space: nowrap;
  border-radius: 2px;
}
.mtag.dn .mtag-in {
  bottom: auto;
  top: calc(var(--stem, 34px) + 2px);
}
.mtag.dn::before {
  bottom: auto;
  top: 0;
}
.mtag.dn::after {
  bottom: auto;
  top: -3px;
}
.mtag::before {
  content: "";
  position: absolute;
  left: -1px;
  bottom: 0;
  width: 2px;
  height: var(--stem, 34px);
  background: var(--card);
}
.mtag::after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 2px var(--card);
}
.mtag b {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 600 14px/1.2 var(--sans);
}
.mtag b i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c);
  flex: none;
}
.mtag small {
  font: 500 11px/1.4 var(--mono);
  color: var(--card-ink-2);
  display: none;
}
.mtag.big small {
  display: block;
}
.mtag.on.dim {
  opacity: 0.42;
}
.st-cap {
  position: absolute;
  right: var(--gut);
  bottom: 18px;
  max-width: min(760px, 60%);
  font: 500 12px/1.5 var(--mono);
  color: var(--on-mat);
  text-align: right;
  z-index: 1;
}
.st-steps {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  padding: 0 var(--gut);
  width: min(100%, calc(35% + var(--gut)));
  min-width: 0;
}
.st-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 40px 0;
}
.st-intro .eyebrow {
  color: var(--on-mat-2);
}
.st-intro .h2 {
  color: var(--on-mat);
}
.st-intro .lede {
  color: var(--on-mat-2);
}
.st-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1.5px solid var(--on-mat-2);
  font: 500 12.5px/1.5 var(--mono);
  color: var(--on-mat);
  max-width: 30em;
}
.st-note svg {
  width: 14px;
  height: 22px;
  flex: none;
  margin-top: 1px;
}
.st-go {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 2px;
  background: var(--on-mat);
  color: var(--mat);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
.mstep {
  display: flex;
  align-items: center;
  padding: 24px 0;
}
.mcard {
  width: 100%;
  max-width: 470px;
  background: var(--card);
  color: var(--card-ink);
  padding: 24px 26px 22px;
  box-shadow: var(--card-shadow);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mc-k {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--card-ink-2);
}
.mc-st {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--card-ink);
  font-weight: 600;
}
.mc-st i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
}
.mcard h3 {
  font: 800 clamp(30px, 2.8vw, 42px)/0.95 var(--sans);
  font-stretch: 92%;
  letter-spacing: -0.04em;
}
.mc-ref {
  font: 500 12.5px/1.5 var(--mono);
  color: var(--card-ink-2);
}
.mc-ref b {
  color: var(--card-ink);
  font-weight: 600;
}
.mc-dl {
  display: grid;
  border-top: 1px solid var(--card-rule);
}
.mc-dl div {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--card-rule);
}
.mc-dl dt {
  font: 500 11.5px/1.7 var(--mono);
  color: var(--card-ink-2);
}
.mc-dl dd {
  font-size: 15.5px;
  line-height: 1.45;
}
.mc-dl .na {
  font-weight: 600;
  box-shadow: inset 0 -0.45em 0 rgba(236, 48, 19, 0.16);
}
.mc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1.5px solid var(--card-ink);
  font: 500 12px/1.2 var(--mono);
}
.mc-chip.on {
  background: var(--card-ink);
  color: var(--card);
}
.mc-chip svg {
  width: 11px;
  height: 11px;
}
.mc-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--card-rule);
  font-size: 15px;
}
.mc-list .r {
  font: 500 12.5px/1 var(--mono);
}
.mc-list .s {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--card-ink);
  font: 600 13px/1 var(--sans);
}
.mc-list .s i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c);
}
.mc-hint {
  font: 500 11.5px/1.4 var(--mono);
  color: var(--card-ink-2);
}
.nogl .st-stage canvas,
.nogl .st-tags {
  display: none;
}

/* ---------- dossier ---------- */
.dossier {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
  padding: clamp(24px, 4vh, 48px) var(--gut);
}
.dos-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.dos-copy p.t {
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 31em;
  text-wrap: pretty;
}
.dos-key {
  display: grid;
  border-top: 1.5px solid var(--fg);
  max-width: 34em;
}
.dos-key div {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  gap: 4px 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.dos-key dd {
  font-size: 15px;
  color: var(--fg-2);
  line-height: 1.45;
}
.dos-scales {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 var(--mono);
  color: var(--fg-2);
}
.dos-scales span {
  padding: 7px 9px;
  border: 1.5px solid var(--rule);
  color: var(--fg);
}
.dos-scales em {
  font-style: normal;
  flex-basis: 100%;
  margin-bottom: 2px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font: 600 12px/1.15 var(--mono);
  border-radius: 2px;
  white-space: nowrap;
}
.pill.in {
  background: var(--L-site);
  color: #fff8f4;
}
.pill.adj {
  box-shadow: inset 0 0 0 1.5px var(--L-site);
  color: var(--L-site);
}
.pill.none {
  padding-left: 0;
  padding-right: 0;
  color: var(--paper-ok);
  font-weight: 500;
}
.dos-key .pill.none {
  color: var(--fg-2);
}
.pill svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.dsheet {
  position: relative;
  background: var(--paper);
  color: var(--paper-ink);
  padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2.4vw, 30px);
  border-radius: 2px;
  box-shadow: var(--paper-shadow);
  min-width: 0;
  --bldg: var(--L-bldg);
  --bldg-o: var(--L-bldg-o);
  --road: var(--L-road);
  --water: var(--L-water);
  --hedge: var(--L-hedge);
  --green-f: var(--L-green-f);
  --parcel: var(--L-parcel);
  --map-t: var(--L-map-t);
  --site: var(--L-site);
  --site-soft: var(--L-site-soft);
  --ca: var(--L-ca);
  --flood: var(--L-flood);
  --listed: var(--L-listed);
  --listed-o: var(--L-listed-o);
  --tpo: var(--L-tpo);
  --a4: var(--L-a4);
  --gb: var(--L-gb);
  --st-app: var(--L-app);
  --st-pen: var(--L-pen);
  --st-ref: var(--L-ref);
  --st-wd: var(--L-wd);
  --pin-eye: var(--paper);
  --pin-edge: var(--paper);
  --fg: var(--paper-ink);
  --fg-2: var(--paper-ink-2);
}
.ds-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 2.5px solid var(--paper-ink);
}
.ds-brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  --lsz: 26px;
}
.ds-brand small {
  font: 500 11.5px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-left: 12px;
  border-left: 1.5px solid var(--paper-ink);
}
.ds-meta {
  display: grid;
  gap: 6px;
  justify-items: end;
}
.ds-date {
  font: 500 12px/1 var(--mono);
}
.ds-ill {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-ink-2);
}
.ds-site {
  display: grid;
  grid-template-columns: minmax(0, 196px) minmax(0, 1fr);
  gap: 22px;
  margin-top: 14px;
  align-items: start;
}
.ds-map {
  position: relative;
  border: 1.5px solid var(--paper-ink);
  background: var(--paper);
}
.ds-map svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.ds-map .t-site {
  stroke-width: 4;
}
.ds-map .c-ca {
  stroke-width: 2.6;
}
.ds-map .c-ca-h {
  stroke-width: 1.3;
  opacity: 0.5;
}
.ds-map .m-bldg {
  stroke-width: 1;
}
.ds-map .t-parcel {
  stroke-width: 1;
}
.ds-map .c-a4 {
  stroke-width: 2.4;
  stroke-dasharray: 9 5;
}
.ds-map .c-gb-e {
  stroke-width: 2.6;
}
.ds-map .c-gb-k {
  stroke-width: 8;
  stroke-dasharray: 1.6 7;
}
.ds-map .c-f2 {
  stroke-width: 1.4;
}
.ds-map .c-f3 {
  stroke-width: 1.6;
}
.ds-map .c-river {
  stroke-width: 4;
}
.ds-map .c-lb {
  stroke-width: 2;
}
.ds-map .c-tpo {
  stroke-width: 1.8;
}
.ds-map .m-green,
.ds-map .m-hedge {
  stroke-width: 1.6;
}
.ds-map figcaption {
  position: absolute;
  left: 6px;
  bottom: 5px;
  font: 600 10.5px/1 var(--mono);
  background: var(--paper);
  padding: 3px 5px;
}
.ds-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 14px;
  align-content: start;
}
.ds-facts dt {
  font: 500 10.5px/1.75 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-ink-2);
}
.ds-facts dd {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
}
.ds-facts dd.mono {
  font: 500 13.5px/1.5 var(--mono);
}
.ds-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 13px;
  padding-bottom: 7px;
  border-bottom: 1.5px solid var(--paper-ink);
  font: 500 11.5px/1.2 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ds-h span {
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper-ink-2);
}
.ds-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 27px;
  padding: 2px 0;
  border-bottom: 1px solid var(--paper-rule);
  font-size: 14.5px;
}
.ds-near li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--paper-rule);
  font-size: 14.5px;
}
.ds-near .r {
  font: 500 12.5px/1 var(--mono);
}
.ds-near .p {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-near .s {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--paper-ink);
  font-weight: 600;
  font-size: 13.5px;
}
.ds-near .s i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c);
}
.ds-near .d {
  font: 500 12px/1 var(--mono);
  color: var(--paper-ink-2);
  text-align: right;
  min-width: 4ch;
}

/* ---------- footer ---------- */
.foot {
  scroll-snap-align: end;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px 40px;
  align-items: center;
  padding: 30px var(--gut) 36px;
  border-top: 1px solid var(--rule);
  background: var(--bg);
}
.foot .brand {
  --lsz: 26px;
}
.foot p {
  font-size: 15px;
  color: var(--fg-2);
}
.foot nav {
  display: flex;
  gap: 2px;
}
.foot nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.foot nav a:hover {
  background: var(--hover);
}
.foot .attr {
  grid-column: 1 / -1;
  font: 400 11.5px/1.6 var(--mono);
  color: var(--fg-3);
  border-top: 1px solid var(--rule-2);
  padding-top: 16px;
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .lt-t {
    display: none;
  }
  .lbl-d {
    display: none;
  }
  .nav a.opt {
    display: none;
  }
}
@media (max-height: 760px) and (min-width: 900px) {
  .lc-sw {
    display: none;
  }
  .lg em {
    display: none;
  }
  .lg {
    min-height: 40px;
  }
}
@media (max-width: 899px) {
  :root {
    --hdr: 58px;
  }
  .seq {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero {
    grid-row: 1;
    padding: 24px 0;
    gap: 14px;
  }
  .display {
    --lsz: min(19vw, 104px);
  }
  .seq-fig {
    grid-column: 1;
    grid-row: 2 / 4;
    align-self: stretch;
    z-index: 4;
    margin: 0 calc(-1 * var(--gut));
    pointer-events: none;
  }
  .figure {
    height: var(--mfh);
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    pointer-events: auto;
  }
  .mapf {
    display: block;
    grid-column: 1;
    grid-row: 2;
    padding-top: var(--mfh);
  }
  .keyf {
    grid-column: 1;
    grid-row: 3;
    justify-content: flex-start;
    padding: calc(var(--mfh) + 12px) 0 10px;
    gap: 8px;
  }
  .keyf .h2 {
    font-size: 30px;
  }
  .keyf .lede,
  .keyf .eyebrow {
    display: none;
  }
  .legend {
    gap: 8px;
  }
  .lg-gh {
    padding-bottom: 5px;
  }
  .fig-cap {
    display: none;
  }
  .labels {
    position: absolute;
    top: 100%;
    left: var(--gut);
    right: var(--gut);
    width: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    padding-top: 10px;
    background: var(--bg);
  }
  .labels li {
    position: static;
    transform: none;
    border-bottom: 1px solid var(--rule-2);
  }
  .lbl {
    grid-template-columns: 22px minmax(0, 1fr);
    padding: 7px 4px;
  }
  .lbl-d,
  .lbl-s {
    display: none;
  }
  .lbl-t {
    font-size: 14px;
  }
  .lbl-sub {
    display: none;
  }
  .lcard {
    top: calc(100% + 10px);
    left: var(--gut);
    right: var(--gut);
    width: auto;
    gap: 9px;
    padding: 12px 14px;
  }
  .lc-sw {
    display: none;
  }
  .lc-h {
    font-size: 22px;
  }
  .lc-dl div {
    padding: 6px 0;
  }
  .lc-dl dd {
    font-size: 14px;
  }
  .rail {
    left: var(--gut);
    right: var(--gut);
    top: 8px;
    gap: 0;
  }
  .rail-l {
    width: 100%;
    justify-content: space-between;
  }
  .rb {
    margin-right: 0;
    width: 36px;
  }
  .rail-l li:last-child .rb {
    width: 42px;
  }
  .rb span {
    min-width: 26px;
    height: 26px;
    font-size: 11px;
  }
  .rail-now {
    display: none;
  }
  .plan-cap {
    font-size: 10.5px;
    gap: 4px 12px;
    padding: 0 12px;
  }
  .plan-cap span + span {
    display: none;
  }
  .lg-rows {
    column-gap: 10px;
  }
  .lg {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    min-height: 34px;
    padding: 3px 4px 3px 0;
  }
  .lg svg {
    width: 34px;
    height: 24px;
  }
  .lg b {
    font-size: 13.5px;
  }
  .lg em {
    display: none;
  }
  .mtag.on.dim {
    opacity: 0;
  }
  .st-stage {
    height: 46svh;
    z-index: 2;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  }
  .st-frame {
    left: 8px;
    right: 8px;
    top: 58px;
    bottom: 10px;
  }
  .srail {
    left: var(--gut);
    right: var(--gut);
  }
  .st-cap {
    display: none;
  }
  .st-steps {
    width: auto;
  }
  .st-intro {
    justify-content: flex-start;
    padding: calc(46svh + 18px) 0 18px;
    gap: 12px;
  }
  .st-intro .h2 {
    font-size: 34px;
  }
  .mstep {
    align-items: flex-start;
    padding: calc(46svh + 14px) 0 18px;
  }
  .mcard {
    padding: 18px 18px 16px;
    gap: 10px;
  }
  .mcard h3 {
    font-size: 28px;
  }
  .mc-dl div {
    grid-template-columns: 72px minmax(0, 1fr);
    padding: 7px 0;
  }
  .mc-dl dd {
    font-size: 14.5px;
  }
  .mtag-in {
    padding: 5px 8px 6px;
  }
  .mtag b {
    font-size: 12.5px;
  }
  .dossier {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .ds-site {
    grid-template-columns: minmax(0, 1fr);
  }
  .ds-map svg {
    aspect-ratio: 4/3;
  }
}
@media (max-width: 640px) {
  .nav,
  .signin {
    display: none;
  }
  .brand {
    --lsz: 26px;
  }
  .lt {
    padding: 0 6px;
  }
  .cta {
    padding: 0 14px;
  }
  .tag2 {
    font-size: 16.5px;
  }
  #q {
    font-size: 16px;
    padding: 0 12px;
  }
  .go {
    min-width: 92px;
  }
  .ds-near li {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .ds-near .p {
    grid-column: 1 / -1;
    grid-row: 2;
    white-space: normal;
  }
  .ds-near .d {
    display: none;
  }
  .ds-list li {
    font-size: 14px;
  }
  .dos-key div {
    grid-template-columns: minmax(0, 1fr);
  }
  .foot {
    grid-template-columns: minmax(0, 1fr);
  }
  .foot nav {
    margin-left: -12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- additions for the static, CSP-safe page ---------- */
.mk {
  fill: var(--brand);
}
.ds-t {
  font: 600 8.5px var(--mono);
}
.ds-map {
  margin: 0;
}
.mc-ref.lead {
  font-family: var(--sans);
  font-size: 15.5px;
  color: var(--card-ink);
}
.st-note svg use {
  fill: currentColor;
}
.lc-dl dt svg use {
  fill: currentColor;
}
.dos-key .pill {
  font-size: 11.5px;
}
.lg.more {
  cursor: default;
  grid-template-columns: minmax(0, 1fr);
}
.lg.more:hover {
  background: none;
}
.fig-fallback {
  display: none;
}
.pcta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  margin-top: 12px;
  padding: 0 16px;
  border: 1.5px solid var(--fg);
  border-radius: 2px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  background: var(--bg-3);
}
.pcta:hover {
  background: var(--hover);
}
.lnote {
  display: none;
}
.lnote.on {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.st-nogl {
  font: 500 12.5px/1.5 var(--mono);
  color: var(--on-mat);
  max-width: 30em;
}
.dsheet .logo {
  --fg: var(--paper-ink);
}