@font-face{font-family:"Sounding Serif";font-weight:400 700;font-style:normal;font-display:swap;src:url(/assets/fonts/sounding-serif-400700.woff2) format("woff2")}
@font-face{font-family:"Sounding Sans";font-weight:400 700;font-style:normal;font-display:swap;src:url(/assets/fonts/sounding-sans-400700.woff2) format("woff2")}
@font-face{font-family:"Sounding Mono";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/sounding-mono-400.woff2) format("woff2")}
@font-face{font-family:"Sounding Mono";font-weight:600 700;font-style:normal;font-display:swap;src:url(/assets/fonts/sounding-mono-600700.woff2) format("woff2")}





  :root {
    --vellum:      #F4F7F7;
    --surface:     #FFFFFF;
    --surface-alt: #EAF0F0;
    --ink:         #0D1B21;
    --slate:       #55676D;
    --channel:     #0B5D66;
    --channel-lit: #128894;
    --contour:     #A85B2A;
    --hairline:    #C9D6D6;
    --verified:    #1F6B45;
    --flagged:     #8A5A12;

    --ground: var(--vellum);
    --card:   var(--surface);
    --band:   var(--surface-alt);
    --text:   var(--ink);
    --muted:  var(--slate);
    --accent: var(--channel);
    --accent-lit: var(--channel-lit);
    --rule:   var(--hairline);

    /* Source Serif 4 = the record. IBM Plex Sans = the interface.
       IBM Plex Mono = the instrument. All three are subset and inlined as
       woff2 data URIs above, so the page sets identically on every machine
       and needs no network. */
    --serif: "Sounding Serif", Cambria, "Palatino Linotype", Georgia, serif;
    --sans: "Sounding Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --mono: "Sounding Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    --measure: 64ch;
    --gutter: clamp(1.25rem, 5vw, 4rem);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --ground: #08171C;
      --card:   #0E2229;
      --band:   #0B1D23;
      --text:   #E4EDEE;
      --muted:  #93A8AE;
      --accent: #38A9B5;
      --accent-lit: #56C6D1;
      --rule:   #1E3A42;
      --contour: #D08A54;
      --verified: #4FB07C;
      --flagged:  #D4A24A;
    }
  }
  :root[data-theme="dark"] {
    --ground: #08171C;
    --card:   #0E2229;
    --band:   #0B1D23;
    --text:   #E4EDEE;
    --muted:  #93A8AE;
    --accent: #38A9B5;
    --accent-lit: #56C6D1;
    --rule:   #1E3A42;
    --contour: #D08A54;
    --verified: #4FB07C;
    --flagged:  #D4A24A;
  }
  :root[data-theme="light"] {
    --ground: var(--vellum);
    --card:   var(--surface);
    --band:   var(--surface-alt);
    --text:   var(--ink);
    --muted:  var(--slate);
    --accent: var(--channel);
    --accent-lit: var(--channel-lit);
    --rule:   var(--hairline);
    --contour: #A85B2A;
    --verified: #1F6B45;
    --flagged:  #8A5A12;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--text);
    font-family: var(--sans);
    font-size: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
    line-height: 1.65;
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
  }

  /* Every figure is set in mono, tabular, so numbers read as measurements
     and columns of them line up. */
  .sta, .tag, .eyebrow, .stat .n, .stat .l, .step-k, .cell .kicker, .chip,
  ul.cov li, .cov-h, td.price, td.acre, thead th, .n, .btn, figcaption {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "kern" 1;
  }
  .n { font-size: 0.93em; letter-spacing: -0.004em; }

  /* Verification marks are drawn, not typed: the check, the cross and the
     caution triangle are the trust device and must not depend on which
     symbol font a reader's machine happens to carry. */
  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .mk { width: 0.95em; height: 0.72em; margin-right: 0.34em; vertical-align: -0.02em; overflow: visible; }

  .wrap {
    max-width: 78rem;
    margin: 0 auto;
    padding-inline: var(--gutter);
  }

  /* ---- stationing rail ---------------------------------------------- */
  .sec { position: relative; padding-block: clamp(3.5rem, 7vw, 6.5rem); }
  .sec + .sec { border-top: 1px solid var(--rule); }
  .sta {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    color: var(--muted);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.75rem;
  }
  .sta::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--rule);
  }
  .sta b { color: var(--contour); font-weight: 700; }

  h1, h2, h3 { font-family: var(--serif); text-wrap: balance; margin: 0; font-weight: 600; }
  h1 { font-size: clamp(2.35rem, 1.6rem + 3.4vw, 4.1rem); line-height: 1.04; letter-spacing: -0.018em; }
  h2 { font-size: clamp(1.65rem, 1.25rem + 1.6vw, 2.5rem); line-height: 1.14; letter-spacing: -0.012em; }
  h3 { font-size: 1.11rem; line-height: 1.3; }
  p { margin: 0; max-width: var(--measure); }
  .lede { font-size: clamp(1.09rem, 1rem + 0.4vw, 1.3rem); color: var(--muted); line-height: 1.6; }

  .stack { display: flex; flex-direction: column; gap: 1.15rem; }
  .stack-lg { display: flex; flex-direction: column; gap: 2.5rem; }
  /* Flex and grid children default to min-width:auto, which lets a wide table
     push the whole page sideways instead of scrolling inside its own wrapper. */
  .stack > *, .stack-lg > *, .hero > * { min-width: 0; }

  /* ---- masthead ------------------------------------------------------ */
  .mast {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding-block: 1.6rem;
    border-bottom: 1px solid var(--rule);
  }
  .mark {
    font-family: var(--serif);
    font-size: 1.32rem; font-weight: 600;
    letter-spacing: 0.03em;
    display: inline-flex; align-items: center; gap: 0.55rem;
  }
  .mark svg { display: block; overflow: visible; }
  .mast .tag {
    font-family: var(--mono); font-size: 0.68rem;
    letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted);
  }

  /* ---- hero ---------------------------------------------------------- */
  .hero { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
  @media (min-width: 62rem) { .hero { grid-template-columns: 1.05fr 0.95fr; } }

  /* Stacked hero: the demo IS the product, so it gets the full column width
     instead of sharing a row with the copy (2026-08-06 — it was reading as a
     thumbnail beside the text). Copy stays at reading measure above it. */
  /* The hero is the one section that pays for its top padding in fold space. */
  #top.sec { padding-top: clamp(1.5rem, 2.4vw, 2.5rem); }
  .hero-stack { display: grid; gap: clamp(1.5rem, 2.6vw, 2.25rem); }
  /* The copy is deliberately held back so the demo clears the fold: a smaller
     headline than the site's default h1 and a wider measure, because the video
     is the argument and a four-line headline was burying it. */
  .hero-lead { max-width: 74ch; }
  .hero-lead h1 {
    font-size: clamp(2.1rem, 1.35rem + 2.3vw, 3.15rem);
    text-wrap: balance;
  }
  .hero-lead .lede { margin-top: 0.95rem; max-width: 68ch; }
  .hero-lead .hero-actions { margin-top: 1.35rem; }
  .hero-fig {
    background: var(--card);
    border: 1px solid var(--rule);
    padding: 1.1rem 1.1rem 0.75rem;
  }
  /* figure carries a UA margin of 1em 40px — it was quietly stealing 80px of
     width from the demo. Zero it before anything else here. */
  .hero-fig.wide { margin: 0; padding: clamp(0.7rem, 1.4vw, 1.35rem); }
  .hero-fig.wide video {
    width: 100%; height: auto; display: block;
    border: 1px solid var(--rule);
  }
  .hero-fig.wide figcaption { padding-inline: 0.25rem; }
  .hero-fig figcaption {
    font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted);
    padding-top: 0.75rem; margin-top: 0.65rem; border-top: 1px solid var(--rule);
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  }
  /* .shot / .shots / .shot.wide are defined in build.py's injected CSS.
     Not redefined here - one definition, one place. */
  a.chip {
    color: var(--accent); text-decoration: none;
    border-color: color-mix(in srgb, var(--accent) 45%, var(--rule));
  }
  a.chip:hover, a.chip:focus-visible {
    background: var(--accent); color: var(--ground); border-color: var(--accent);
  }

  #profile { width: 100%; height: auto; display: block; }

  .eyebrow {
    font-family: var(--mono); font-size: 0.71rem; letter-spacing: 0.17em;
    text-transform: uppercase; color: var(--accent); margin: 0 0 1rem;
  }

  /* ---- stat strip ----------------------------------------------------- */
  .stats {
    display: grid; gap: 1px; background: var(--rule);
    border: 1px solid var(--rule);
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2.75rem;
  }
  @media (min-width: 45rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
  .stat { background: var(--card); padding: 1.05rem 1.1rem; }
  .stat .n {
    font-family: var(--mono); font-variant-numeric: tabular-nums;
    font-size: 1.5rem; color: var(--text); line-height: 1.1; display: block;
  }
  .stat .l {
    font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted); margin-top: 0.35rem; display: block;
  }

  /* ---- process -------------------------------------------------------- */
  ol.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  ol.steps li {
    display: grid; gap: 0.3rem 1.5rem; padding-block: 1.35rem;
    border-top: 1px solid var(--rule);
    grid-template-columns: 1fr;
  }
  @media (min-width: 48rem) { ol.steps li { grid-template-columns: 7.5rem 1fr; } }
  ol.steps li:last-child { border-bottom: 1px solid var(--rule); }
  .step-k {
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--contour); padding-top: 0.28rem;
  }
  ol.steps p { color: var(--muted); margin-top: 0.28rem; }

  /* ---- generic cards -------------------------------------------------- */
  .grid2 { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); grid-template-columns: 1fr; }
  @media (min-width: 46rem) { .grid2 { grid-template-columns: 1fr 1fr; } }
  .grid3 { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); grid-template-columns: 1fr; }
  @media (min-width: 46rem) { .grid3 { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 64rem) { .grid3 { grid-template-columns: repeat(3, 1fr); } }
  .cell { background: var(--card); padding: 1.5rem; }
  .cell h3 { margin-bottom: 0.45rem; }
  .cell p { color: var(--muted); font-size: 0.965rem; }
  .cell .kicker {
    font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--contour); display: block; margin-bottom: 0.7rem;
  }

  /* ---- depth figure ------------------------------------------------------ */
  /* Contour orange appears here and only here on this page, because here it is
     data: the share of the record that sits below the summary layer. */
  .depth-fig { margin: 0; background: var(--card); border: 1px solid var(--rule); padding: clamp(1.25rem, 3vw, 1.9rem); }
  .dbar { display: flex; height: 2.4rem; border: 1px solid var(--rule); overflow: hidden; }
  .dseg + .dseg { border-left: 1px solid var(--card); }
  .dseg.shallow { background: var(--rule); opacity: 0.55; }
  .dseg.deep    { background: var(--contour); }
  .dkey { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.5rem 1.5rem; }
  .dkey li {
    display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
    color: var(--muted);
  }
  .dkey b { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 400; }
  .dkey span { color: var(--muted); opacity: 0.8; }
  .sw { width: 0.72rem; height: 0.72rem; flex: none; border: 1px solid var(--rule); align-self: center; }
  .sw.shallow { background: var(--rule); opacity: 0.55; }
  .sw.deep { background: var(--contour); border-color: var(--contour); }
  .depth-fig figcaption {
    font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted);
    padding-top: 0.8rem; margin-top: 1.1rem; border-top: 1px solid var(--rule);
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  }

  /* ---- citation demo --------------------------------------------------- */
  .cite-demo {
    background: var(--card); border: 1px solid var(--rule);
    padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 1.1rem;
  }
  .cite-row { display: flex; flex-direction: column; gap: 0.5rem; }
  .cite-row q {
    font-family: var(--serif); font-size: 1.06rem; quotes: "\201C" "\201D";
    line-height: 1.5;
  }
  .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
  .chip {
    font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em;
    padding: 0.2rem 0.5rem; border: 1px solid var(--rule); color: var(--muted);
    white-space: nowrap; max-width: 100%;
  }
  /* Verdict chips carry a phrase, not an identifier, so they may wrap. */
  .chip.ok, .chip.flag { white-space: normal; }
  .chip.ok    { color: var(--verified); border-color: currentColor; }
  .chip.flag  { color: var(--flagged);  border-color: currentColor; }

  .sample {
    background: var(--card); border: 1px solid var(--rule);
    padding: clamp(1.25rem, 3vw, 1.9rem);
    display: flex; flex-wrap: wrap; gap: 1.25rem;
    align-items: center; justify-content: space-between;
  }
  .sample > div { flex: 1 1 22rem; }

  /* ---- coverage -------------------------------------------------------- */
  /* Two columns, because "covered" is two different questions: can we list the
     permits, and can we pull their documents. Collapsing them would overstate. */
  td.dist { font-family: var(--mono); font-size: 0.86rem; }
  .st {
    font-family: var(--mono); font-size: 0.67rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap;
  }
  .st.live { color: var(--verified); }
  .dot {
    display: inline-block; width: 0.42rem; height: 0.42rem; border-radius: 50%;
    background: currentColor; margin-right: 0.45rem; vertical-align: 0.04em;
  }

  /* ---- pricing --------------------------------------------------------- */
  .tablewrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--card); }
  table { border-collapse: collapse; width: 100%; min-width: 34rem; }
  th, td { text-align: left; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--rule); }
  thead th {
    font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted); font-weight: 400;
  }
  tbody td { font-size: 0.95rem; }
  tbody tr:last-child td { border-bottom: 0; }
  td.price { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
  td.scope { color: var(--muted); }
  .tier { font-family: var(--serif); font-size: 1.02rem; }

  /* ---- cta ------------------------------------------------------------- */
  .cta {
    background: var(--card); border: 1px solid var(--rule);
    padding: clamp(1.5rem, 4vw, 2.75rem);
    display: flex; flex-direction: column; gap: 1.1rem;
  }
  .btn {
    align-self: flex-start;
    font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase;
    background: var(--accent); color: var(--ground);
    padding: 0.8rem 1.5rem; border: 1px solid var(--accent); text-decoration: none;
    transition: background 140ms ease, color 140ms ease;
  }
  .btn:hover, .btn:focus-visible { background: var(--accent-lit); border-color: var(--accent-lit); }
  a { color: var(--accent); text-underline-offset: 0.18em; }
  a:focus-visible, .btn:focus-visible { outline: 2px solid var(--contour); outline-offset: 3px; }

  footer.foot {
    border-top: 1px solid var(--rule); padding-block: 2.25rem 3.5rem;
    color: var(--muted); font-size: 0.85rem;
    display: flex; flex-direction: column; gap: 0.9rem;
  }
  footer.foot p { max-width: 70ch; font-size: 0.85rem; }
  .fine { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.005em; line-height: 1.65; color: var(--muted); max-width: 72ch; }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }

  /* ---- masthead nav (multi-page, 2026-08-04) ------------------------- */
  .mast { row-gap: 0.5rem; }
  .mast a.markline { color: inherit; text-decoration: none; }
  .mnav { display: flex; flex-wrap: wrap; gap: 0.9rem 1.25rem; font-family: var(--mono); font-size: 0.67rem; letter-spacing: 0.13em; text-transform: uppercase; }
  .mnav a { color: var(--muted); text-decoration: none; padding-block: 0.2rem; border-bottom: 1px solid transparent; }
  .mnav a:hover, .mnav a:focus-visible { color: var(--accent); }
  .mnav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

  /* ---- FAQ ------------------------------------------------------------ */
  .faq { border-top: 1px solid var(--rule); max-width: 52rem; }
  .faq details { border-bottom: 1px solid var(--rule); }
  .faq summary { list-style: none; cursor: pointer; padding-block: 1.15rem; display: flex; align-items: baseline; gap: 0.9rem; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::before { content: "+"; font-family: var(--mono); color: var(--contour); flex: none; width: 1.1rem; }
  .faq details[open] summary::before { content: "\2212"; }
  .faq summary h3 { font-size: 1.06rem; }
  .faq .faq-a { padding: 0 0 1.35rem 2rem; }
  .faq .faq-a p { color: var(--muted); font-size: 0.965rem; max-width: 60ch; }
  .faq .faq-a b { color: var(--text); font-weight: 600; }
  @media (max-width: 40rem) { .faq .faq-a { padding-left: 0; } }

  /* ---- screenshot figures --------------------------------------------- */
  .shots { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
  @media (min-width: 52rem) { .shots { grid-template-columns: 1fr 1fr; } }
  .shot { margin: 0; background: var(--card); border: 1px solid var(--rule); padding: 0.9rem 0.9rem 0.6rem; min-width: 0; }
  .shot img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); }
  .shot figcaption { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 0.6rem; margin-top: 0.55rem; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
  .shot.wide { max-width: 64rem; }

  /* ---- demo video ------------------------------------------------------ */
  .demo-video { margin: 0; background: var(--card); border: 1px solid var(--rule); padding: 0.9rem 0.9rem 0.6rem; max-width: 64rem; }
  .demo-video video { width: 100%; height: auto; display: block; border: 1px solid var(--rule); }
  .demo-video figcaption { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 0.6rem; margin-top: 0.55rem; border-top: 1px solid var(--rule); }

  /* ---- hero actions + video (2026-08-05 map-first rework) -------------- */
  .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
  .btn.quiet { background: var(--card); color: var(--text); border-color: var(--rule); }
  .btn.quiet:hover, .btn.quiet:focus-visible { background: var(--band); border-color: var(--muted); color: var(--text); }
  .hero-fig video { width: 100%; height: auto; display: block; border: 1px solid var(--rule); }
  .hero-meta { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 1.05rem; }
  .mnav-map { color: var(--accent) !important; border: 1px solid var(--accent); padding: 0.35rem 0.75rem !important; }
  .mnav-map:hover, .mnav-map:focus-visible { background: var(--accent); color: var(--ground) !important; }
  .report-embed { margin: 0; background: var(--card); border: 1px solid var(--rule); padding: 0.9rem 0.9rem 0.6rem; }
  .report-embed iframe { width: 100%; height: 78vh; border: 1px solid var(--rule); background: #fff; display: block; }
  .report-embed figcaption { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 0.6rem; margin-top: 0.55rem; border-top: 1px solid var(--rule); }
  .map-strip { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border: 1px solid var(--rule); border-left: 3px solid var(--accent); background: var(--card); padding: 1rem 1.25rem; margin-block: 2.25rem; }
  .map-strip span { font-family: var(--serif); font-size: 1.06rem; }
  .map-strip.in-faq { margin-block: 1.5rem; }

  /* ---- footer nav ------------------------------------------------------ */
  .fnav { display: flex; flex-wrap: wrap; gap: 0.7rem 1.4rem; font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; }
  .fnav a { color: var(--muted); text-decoration: none; }
  .fnav a:hover, .fnav a:focus-visible { color: var(--accent); }