/* ==========================================================================
   HouseKnow theme
   --------------------------------------------------------------------------
   One stylesheet. No build step, no framework, no utility classes.

   The visual brief in one line: a property due-diligence document, not a
   startup landing page. That means squared corners everywhere, hairline rules
   instead of cards, generous whitespace, and typography doing the work that
   shadows and gradients do elsewhere.

   Rules this file holds itself to:
     * border-radius is 0. There are two exceptions, both functional and both
       2px: the focus ring and the severity swatch.
     * colour never carries meaning on its own. Every severity is written out
       in words next to its swatch, so the design works in greyscale and for a
       colour-blind reader.
     * the semantic palette (green/amber/orange/red) appears ONLY on real data.
       Nothing decorative is ever painted in a risk colour.
     * no shadow larger than 1px, and only on genuinely floating things.
   ========================================================================== */

/* ── Fonts ────────────────────────────────────────────────────────────────
   Two self-hosted variable faces, latin-subset, 52KB together.
   Public Sans is the typeface of the US Web Design System, which is a fitting
   voice for a product built entirely from federal data. Source Serif carries
   the headlines so the page reads as a document rather than a dashboard.     */

@font-face {
  font-family: 'Public Sans';
  src: url('/assets/fonts/public-sans.woff2') format('woff2-variations'),
       url('/assets/fonts/public-sans.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif Display';
  src: url('/assets/fonts/source-serif.woff2') format('woff2-variations'),
       url('/assets/fonts/source-serif.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ───────────────────────────────────────────────────────────── */

:root {
  /* Surfaces. The page is warm off-white; white is reserved for the few
     surfaces that genuinely sit on top of it (the address field, the report
     sheet), which is what makes those read as elevated without a shadow. */
  --paper:        #FBFAF7;
  --paper-sunken: #F4F2EC;
  --surface:      #FFFFFF;

  /* Ink. Near-black with a navy cast: darker and calmer than a pure grey. */
  --ink:        #14181F;
  --ink-2:      #4A5361;
  --ink-3:      #757E8C;
  --ink-invert: #FBFAF7;

  /* Structure. Warm hairlines, so rules sit on the paper rather than cutting it. */
  --rule:        #E4E0D6;
  --rule-strong: #CFCABC;
  --rule-ink:    #14181F;

  /* Brand. One navy for action, one muted blue for links. */
  --navy:       #16263F;
  --navy-hover: #22385A;
  --blue:       #2B5C93;
  --blue-quiet: #EDF1F7;

  /* Semantic. Data only. Never decorative. */
  --sev-low:      #2C6A4C;
  --sev-low-bg:   #EAF2ED;
  --sev-moderate: #8A6009;
  --sev-moderate-bg: #F7F0DF;
  --sev-elevated: #A9500D;
  --sev-elevated-bg: #F9EDE2;
  --sev-high:     #9C2A2A;
  --sev-high-bg:  #F7E9E9;
  --sev-unknown:  #5C646F;
  --sev-unknown-bg: #EFEEEA;
  --sev-info:     #2B5C93;
  --sev-info-bg:  #EDF1F7;

  /* Type */
  --sans:  'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: 'Source Serif Display', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Rhythm */
  --gutter: 20px;
  --measure: 68ch;
  --page: 1120px;
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

/* ── Reset ────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Every figure in this product is a number in a column of numbers. */
  font-variant-numeric: tabular-nums;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: 0.4em; }

a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--navy); }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 40px 0;
}

/* Focus: always visible, never removed. 2px is one of the two permitted radii. */
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* A heading given focus after an in-page transition, so a screen reader lands
   where a navigation would have put it. It is not an interactive control, so it
   is announced without being ringed. */
h1[tabindex="-1"]:focus { outline: none; }

::selection { background: #DDE5F0; }

/* ── Skip link ─────────────────────────────────────────────────────────── */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: var(--ink-invert);
  padding: 12px 20px;
  font-weight: 600;
}
.skip:focus { left: 0; }

/* ── Layout ───────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 760px; }

/* A column of text inside a full-width wrap. Keeps an interstitial page left
   aligned with the masthead and with the preview that follows it, rather than
   centring it and making the address jump between steps. */
.measure { max-width: 42rem; }
.wrap--prose  { max-width: 720px; }

.section { padding-block: 56px; }
.section--tight { padding-block: 40px; }
.section--rule { border-top: 1px solid var(--rule); }
.section--sunken { background: var(--paper-sunken); }

@media (min-width: 900px) {
  .section { padding-block: 88px; }
  .section--tight { padding-block: 56px; }
}

/* ── Type ─────────────────────────────────────────────────────────────── */

.display {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.1rem, 7vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.021em;
  margin: 0;
  text-wrap: balance;
}

.h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.006em;
}

.lede {
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 54ch;
}

@media (min-width: 720px) {
  .lede { font-size: 1.1875rem; }
}

.prose { max-width: var(--measure); }
.prose h2 { margin: 40px 0 12px; }
.prose h3 { margin: 32px 0 8px; }
.prose > :first-child { margin-top: 0; }

.muted { color: var(--ink-2); }
.quiet { color: var(--ink-3); }
.small { font-size: 0.875rem; line-height: 1.55; }
.tiny  { font-size: 0.8125rem; line-height: 1.5; }

/* The one "label" treatment in the system. It marks a data field or a section
   of a document. It is NOT an eyebrow: it never sits above a marketing
   headline to announce a section. */
.label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: normal;
}

.numeric { font-variant-numeric: tabular-nums; }

/* ── Header ───────────────────────────────────────────────────────────── */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}

.wordmark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--ink); }
.wordmark b { font-weight: 600; }
/* "House" in ink, "Know" in navy: the whole logo system, and enough of one. */
.wordmark span { color: var(--navy); }

.masthead__nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.9375rem;
}

.masthead__nav a {
  color: var(--ink-2);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 1px solid transparent;
}
.masthead__nav a:hover,
.masthead__nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--rule-ink);
}

@media (max-width: 599px) {
  .masthead__nav .hide-sm { display: none; }
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 15px 26px;
  border: 1px solid var(--navy);
  border-radius: 0;
  background: var(--navy);
  color: var(--ink-invert);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
  min-height: 50px;
}
.btn:hover { background: var(--navy-hover); border-color: var(--navy-hover); color: var(--ink-invert); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { background: var(--paper-sunken); color: var(--ink); border-color: var(--rule-ink); }

.btn--block { width: 100%; }

.btn--sm { font-size: 0.9375rem; padding: 10px 18px; min-height: 42px; }

/* A link that behaves like a next step, with a trailing rule rather than a box. */
.link-next {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ── Address field ────────────────────────────────────────────────────── */
/* The visual focus of the whole site. Deliberately the only element on the
   page with an ink-weight border. */

.addressbar { margin-top: 28px; }

.addressbar__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.addressbar__field {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--rule-ink);
  background: var(--surface);
}

.addressbar__field:focus-within {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.addressbar input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.4;
  padding: 17px 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
}
.addressbar input[type="text"]:focus { outline: none; }
.addressbar input[type="text"]::placeholder { color: var(--ink-3); }

.addressbar__submit {
  flex: 0 0 auto;
  border: 0;
  border-left: 1.5px solid var(--rule-ink);
  background: var(--navy);
  color: var(--ink-invert);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  padding-inline: 22px;
  cursor: pointer;
  white-space: nowrap;
}
.addressbar__submit:hover { background: var(--navy-hover); }

@media (max-width: 519px) {
  /* At phone width the inline button squeezes the field to nothing, so it
     drops below rather than fighting for room. */
  .addressbar__field { display: block; }
  .addressbar input[type="text"] { width: 100%; padding: 15px 14px; }
  .addressbar__submit {
    width: 100%;
    border-left: 0;
    border-top: 1.5px solid var(--rule-ink);
    padding-block: 15px;
  }
}

.addressbar__hint {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* ── Forms ────────────────────────────────────────────────────────────── */

.field { margin-bottom: 20px; }

.field > label,
.field__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
}

.field__help {
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin-top: 6px;
}

input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.4;
  padding: 13px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
}

input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
  border-color: var(--navy);
}

input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--sev-high);
  border-width: 1.5px;
}

textarea { min-height: 140px; resize: vertical; }

.form-error {
  display: block;
  margin-top: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sev-high);
}

/* ── Notices ──────────────────────────────────────────────────────────── */

.notice {
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--ink-3);
  background: var(--surface);
  padding: 14px 16px;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.notice + .notice { margin-top: 12px; }
.notice--warn  { border-left-color: var(--sev-moderate); background: var(--sev-moderate-bg); border-color: #E6D9B7; }
.notice--error { border-left-color: var(--sev-high); background: var(--sev-high-bg); border-color: #E9CFCF; }
.notice--info  { border-left-color: var(--blue); background: var(--blue-quiet); border-color: #D5DFEC; }
.notice strong { font-weight: 600; }

/* ── Data rows ────────────────────────────────────────────────────────── */
/* The core structural device. A stack of hairline-separated rows, label left,
   value right on wide screens and stacked on narrow ones. This is what makes
   the product read as a document instead of a grid of cards. */

.rows { border-top: 1px solid var(--rule); }

.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 24px;
  padding-block: 18px;
  border-bottom: 1px solid var(--rule);
}

.row__label {
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.row__value {
  font-size: 0.9375rem;
  font-weight: 500;
}

@media (min-width: 640px) {
  .row { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
}

/* ── Severity ─────────────────────────────────────────────────────────── */
/* Never colour alone. The swatch is decoration; the word is the information. */

.sev {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.sev::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 2px;
  background: currentColor;
}

.sev--low      { color: var(--sev-low); }
.sev--moderate { color: var(--sev-moderate); }
.sev--elevated { color: var(--sev-elevated); }
.sev--high     { color: var(--sev-high); }
.sev--info     { color: var(--sev-info); }

/* Unknown gets a hollow swatch, not a grey fill: the shape itself says
   "nothing was determined here" rather than "a low value". */
.sev--unknown  { color: var(--sev-unknown); }
.sev--unknown::before {
  background: transparent;
  border: 1.5px dashed currentColor;
  width: 11px; height: 11px; flex-basis: 11px;
}

/* ── Findings ─────────────────────────────────────────────────────────── */

.findings { border-top: 1px solid var(--rule); }

.finding {
  border-bottom: 1px solid var(--rule);
  padding: 22px 0 22px 16px;
  border-left: 3px solid transparent;
  transition: border-left-color 120ms ease;
}

.finding--low      { border-left-color: var(--sev-low); }
.finding--moderate { border-left-color: var(--sev-moderate); }
.finding--elevated { border-left-color: var(--sev-elevated); }
.finding--high     { border-left-color: var(--sev-high); }
.finding--info     { border-left-color: var(--rule-strong); }
.finding--unknown  {
  border-left-color: var(--sev-unknown);
  border-left-style: dashed;
}

.finding__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-bottom: 4px;
}

.finding__label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.finding__headline {
  font-family: var(--serif);
  font-size: 1.3125rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 2px 0 6px;
}

.finding__summary {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

.finding__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* Precision tag: the single most important label in the product. */
.precision {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--rule-strong);
  padding: 2px 7px;
  white-space: nowrap;
}
.precision--area { color: var(--ink-3); border-style: dashed; }

/* ── Disclosure ───────────────────────────────────────────────────────── */

details.disclose {
  border-top: 1px solid var(--rule);
  margin-top: 12px;
}

details.disclose > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
details.disclose > summary::-webkit-details-marker { display: none; }
details.disclose > summary::after {
  content: "+";
  font-weight: 400;
  font-size: 1rem;
  color: var(--ink-3);
  margin-left: auto;
}
details.disclose[open] > summary::after { content: "\2212"; }
details.disclose > summary:hover { color: var(--ink); }

.disclose__body {
  padding-bottom: 16px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.source-line {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 14px;
  font-size: 0.8125rem;
}
.source-line dt { color: var(--ink-3); }
.source-line dd { margin: 0; }

/* ── Columns ──────────────────────────────────────────────────────────── */

.cols {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
  .cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 40px; }
}

.split {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 56px; }
}

/* ── Checklist of categories ──────────────────────────────────────────── */

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.checks li {
  margin: 0;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 2px;
}

@media (min-width: 640px) {
  .checks li { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 24px; align-items: baseline; }
}

.checks__name { font-weight: 600; font-size: 0.9375rem; }
.checks__what { font-size: 0.9375rem; color: var(--ink-2); }

/* ── Source list ──────────────────────────────────────────────────────── */

.agencies {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.agencies li {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ── Pricing ──────────────────────────────────────────────────────────── */

.prices {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
}

@media (min-width: 720px) {
  .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price + .price { border-top: 0; border-left: 1px solid var(--rule-strong); }
}

.price { padding: 28px 26px 30px; }
.price + .price { border-top: 1px solid var(--rule-strong); }

.price__name { font-size: 0.9375rem; font-weight: 600; }

.price__amount {
  font-family: var(--serif);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 10px 0 4px;
}

.price__save {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sev-low);
  border: 1px solid #C6DCCF;
  background: var(--sev-low-bg);
  padding: 2px 8px;
}

.price__blurb {
  font-size: 0.9375rem;
  color: var(--ink-2);
  margin: 14px 0 0;
  min-height: 3em;
}

/* ── Preview panel ────────────────────────────────────────────────────── */

.sheet {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
}

.sheet__head {
  padding: 22px 22px 20px;
  border-bottom: 1px solid var(--rule);
}

.sheet__body { padding: 4px 22px 22px; }

.sheet__foot {
  padding: 22px;
  border-top: 1px solid var(--rule);
  background: var(--paper-sunken);
}

@media (min-width: 720px) {
  .sheet__head, .sheet__foot { padding: 26px 30px; }
  .sheet__body { padding: 6px 30px 26px; }
}

.sheet__address {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

/* A caption that identifies demo content. Deliberately plain and always
   visible: sample data must never be mistakable for a real result. */
.sample-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--paper-sunken);
  border: 1px solid var(--rule-strong);
  padding: 4px 10px;
}

/* ── Locked / teaser rows ─────────────────────────────────────────────── */

.locked {
  display: grid;
  gap: 2px 24px;
  padding-block: 15px;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.locked:first-child { border-top: 1px solid var(--rule); }

@media (min-width: 640px) {
  .locked { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
}

.locked__name { font-weight: 600; font-size: 0.9375rem; }

.locked__state {
  font-size: 0.875rem;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.locked__state::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--rule-strong);
  flex: 0 0 26px;
}

/* ── Address suggestions ──────────────────────────────────────────────────
   An ARIA combobox hanging off the address field. It reuses the field's own
   ink-weight border so the open list reads as the field growing rather than as
   a panel arriving on top of it.

   On a phone the field stacks (input above, button below) and the list sits in
   normal flow between the two, so it can never be clipped, never covers the
   button, and never fights the on-screen keyboard for room. */

.addressbar__field { position: relative; }

.suggest {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  /* In flow on a phone, so the field's own border already frames it. */
  border: 0;
  border-top: 1px solid var(--rule);
  max-height: min(56vh, 24rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 520px) {
  .suggest {
    position: absolute;
    top: 100%;
    left: -1.5px;
    right: -1.5px;
    z-index: 30;
    border: 1.5px solid var(--rule-ink);
    border-top: 0;
    /* The only shadow in the stylesheet wider than a hairline, because this is
       the only thing that genuinely floats above the page. */
    box-shadow: 0 1px 0 rgba(20, 24, 31, 0.08);
  }
}

.suggest__item {
  margin: 0;
  padding: 11px 14px;
  /* A comfortable target on a phone without looking padded on a desktop. */
  min-height: 46px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
  line-height: 1.35;
}
.suggest__item:last-child { border-bottom: 0; }
.suggest__item.is-active { background: var(--blue-quiet); }

.suggest__primary {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
}

.suggest__secondary {
  font-size: 0.875rem;
  color: var(--ink-3);
  flex: 1 1 auto;
}

/* Marks a suggestion the Census geocoder itself returned, as opposed to one
   assembled from the place index. A tick, not a colour: the difference matters
   and has to survive greyscale. */
.suggest__mark {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  position: relative;
  align-self: center;
}
.suggest__mark::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 3px;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--sev-low);
  border-bottom: 1.5px solid var(--sev-low);
  transform: rotate(-45deg);
}

/* Loading is a hairline under the field, not a spinner. */
.suggest[data-loading]::after,
.addressbar__field:has(.suggest[data-loading])::after { content: none; }

.addressbar__field::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.5px;
  height: 1.5px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
}
.addressbar__field:has(.suggest[data-loading])::after {
  opacity: 1;
  animation: hk-scan 1.1s ease-in-out infinite;
}

@keyframes hk-scan {
  0%   { transform: scaleX(0);   transform-origin: left; }
  50%  { transform: scaleX(1);   transform-origin: left; }
  51%  { transform: scaleX(1);   transform-origin: right; }
  100% { transform: scaleX(0);   transform-origin: right; }
}

/* ── Free snapshot ────────────────────────────────────────────────────────
   Eight answers, each one a real result from a real source. A one-pixel grid
   gap over a rule-coloured background gives hairline separators in both
   directions with no double borders and no radius. */

.preview__intro { max-width: 46rem; }

.snapshot {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule-strong);
}

@media (min-width: 700px) {
  .snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .snapshot { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.snap {
  background: var(--surface);
  padding: 16px 18px 18px;
  border-left: 3px solid transparent;
  display: flex;
  flex-direction: column;
}

.snap--low      { border-left-color: var(--sev-low); }
.snap--moderate { border-left-color: var(--sev-moderate); }
.snap--elevated { border-left-color: var(--sev-elevated); }
.snap--high     { border-left-color: var(--sev-high); }
.snap--info     { border-left-color: var(--rule-strong); }
.snap--unknown  { border-left-color: var(--sev-unknown); border-left-style: dashed; }

.snap--undetermined { background: var(--paper); }

.snap__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 10px;
}

.snap__cat {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.snap__lead {
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin: 0 0 2px;
  line-height: 1.4;
}

.snap__headline {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ink);
  margin: 0 0 12px;
}
.snap__headline--quiet { color: var(--ink-2); font-family: var(--sans); font-size: 0.9375rem; }

.snap__meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 0.75rem;
  color: var(--ink-3);
}

.snap__more { font-size: 0.75rem; color: var(--ink-3); }
.snap__why  { font-size: 0.75rem; color: var(--ink-3); line-height: 1.45; }

/* ── What the paid report adds ────────────────────────────────────────────
   Same two-column row as the rest of the document, with a hairline down the
   left instead of a lock icon. Nothing here is styled as a teaser: it is a
   list of what is in the report, counted from this property's own results. */

.adds {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
}

.adds li {
  margin: 0;
  padding: 14px 0 14px 16px;
  border-bottom: 1px solid var(--rule);
  border-left: 2px solid var(--rule-strong);
  display: grid;
  gap: 2px;
}

@media (min-width: 640px) {
  .adds li { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 20px; align-items: baseline; }
}

.adds__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.adds__text { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.55; }

/* ── Evidence ─────────────────────────────────────────────────────────────
   The rows a source actually returned: named sites and their distances, the
   individual hazard ratings, the dated records. This is the substance of the
   paid report, so it is plain, dense and readable rather than decorated. */

.evidence {
  margin-top: 14px;
  border-top: 1px solid var(--rule);
}

.evidence__cap {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 10px 0 6px;
}

.evidence__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  padding: 7px 0;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
}

.evidence__name { color: var(--ink); min-width: 0; flex: 1 1 14rem; }
.evidence__note {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.evidence__value { color: var(--ink-2); flex: 0 0 auto; white-space: nowrap; }
.evidence__value .quiet { margin-left: 6px; }

/* ── Address chooser ──────────────────────────────────────────────────────
   A radio list where the whole row is the target, because on a phone the
   circle alone is not. */

.choices { border-top: 1px solid var(--rule); }

.choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 12px 16px 4px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.choice:hover { background: var(--paper-sunken); }
.choice input[type="radio"] { width: auto; margin-top: 3px; }
.choice__body { display: grid; gap: 2px; }
.choice__address { font-size: 0.9375rem; font-weight: 600; }
.choice:has(input:checked) { background: var(--blue-quiet); }

/* ── Progress (real states, never a fake percentage) ──────────────────── */

.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }

.steps li {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--ink-3);
}

.steps li::before {
  content: "";
  width: 9px; height: 9px;
  flex: 0 0 9px;
  border: 1.5px solid var(--rule-strong);
  border-radius: 2px;
}

.steps li[data-state="active"] { color: var(--ink); font-weight: 600; }
.steps li[data-state="active"]::before { border-color: var(--navy); background: var(--navy); }

.steps li[data-state="done"] { color: var(--ink-2); }
.steps li[data-state="done"]::before { border-color: var(--sev-low); background: var(--sev-low); }

/* The active step keeps a slow pulse so a screen that is genuinely waiting
   looks like it, without anything spinning. */
.steps li[data-state="active"]::before { animation: hk-pulse 1.8s ease-in-out infinite; }

@keyframes hk-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ── The waiting screen ───────────────────────────────────────────────────
   One hairline sweeping left to right, the way a document scanner moves. It
   says "working"; it deliberately says nothing about how far along we are,
   because a sweep of a dozen federal services has no honest percentage. */

.scan__body { max-width: 40rem; }

.scan__bar {
  position: relative;
  height: 2px;
  margin: 30px 0 0;
  background: var(--rule);
  overflow: hidden;
}

.scan__bar span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 34%;
  background: var(--navy);
  animation: hk-sweep 2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes hk-sweep {
  0%   { transform: translateX(-105%); }
  100% { transform: translateX(400%); }
}

.scan.is-done .scan__bar span {
  animation: none;
  width: 100%;
  transform: none;
  background: var(--sev-low);
}

.scan__steps { border-top: 0; margin-top: 4px; }

/* Normally the standing explanation of why this takes a moment. When a source
   is being slow, or the whole thing has gone quiet, the same line carries that
   instead: there is only ever one place to look. */
.scan__note {
  margin: 16px 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 46ch;
}
.scan__note[data-warn] { color: var(--sev-moderate); font-weight: 500; }

/* ── Page transitions ─────────────────────────────────────────────────────
   One short fade as a block is swapped in, so an in-page change reads as a
   transition rather than a flicker. Nothing moves more than a few pixels. */

@keyframes hk-enter {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

.hk-enter { animation: hk-enter 220ms ease both; }

@media (prefers-reduced-motion: reduce) {
  /* The global reset already clamps every animation to a single 0.01ms run,
     which would freeze the sweep mid-travel. Give it something honest to be
     instead: a static rule that simply sits there. */
  .scan__bar span { width: 100%; transform: none; }
  .hk-enter { animation: none; }
}

/* ── Report ───────────────────────────────────────────────────────────── */

.report-head {
  border-bottom: 1px solid var(--rule-ink);
  padding-bottom: 22px;
  margin-bottom: 6px;
}

.report-title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 6px 0 0;
}

.report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.keypoints { counter-reset: kp; list-style: none; margin: 0; padding: 0; }

.keypoints li {
  counter-increment: kp;
  position: relative;
  margin: 0;
  padding: 18px 0 18px 42px;
  border-bottom: 1px solid var(--rule);
}

.keypoints li::before {
  content: counter(kp);
  position: absolute;
  left: 0;
  top: 20px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-invert);
  background: var(--navy);
}

.keypoints__line {
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.report-section { padding-top: 44px; }
.report-section > h2 { margin-bottom: 4px; }
.report-section__intro { color: var(--ink-2); font-size: 0.9375rem; margin: 0 0 18px; max-width: 62ch; }

/* Where a report is honest about what it could not find out. Given equal
   weight to the findings, because "we do not know" is a real answer. */
.undetermined { border-top: 1px solid var(--rule); }

.undetermined li {
  list-style: none;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 4px;
}
.undetermined ul { margin: 0; padding: 0; }

@media (min-width: 640px) {
  .undetermined li { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 4px 24px; }
}

/* ── Tables (used sparingly; always scrollable on a phone) ────────────── */

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  min-width: 520px;
}
table.data th, table.data td {
  text-align: left;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.data th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--rule-strong);
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--rule); }

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 36px 20px 0;
  position: relative;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 18px;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ink-3);
}
.faq details[open] summary::after { content: "\2212"; }
.faq__answer { padding: 0 0 22px; color: var(--ink-2); max-width: 64ch; }

/* ── Footer ───────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--rule);
  padding-block: 34px 44px;
  margin-top: 40px;
  font-size: 0.875rem;
  color: var(--ink-3);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 32px;
  margin-bottom: 20px;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__links a { color: var(--ink-2); text-decoration: none; }
.footer__links a:hover { color: var(--ink); text-decoration: underline; }
.footer__links li { margin: 0; }

.footer__legal { max-width: 76ch; line-height: 1.6; }

/* ── Utilities ────────────────────────────────────────────────────────── */

.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 28px; }
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Print ────────────────────────────────────────────────────────────── */
/* The web report is the product, but people print property documents. */

@media print {
  body { background: #fff; font-size: 11pt; }
  .masthead, .footer, .no-print, .btn { display: none !important; }
  .sheet, .prices { border-color: #999; }
  .section { padding-block: 12pt; }
  details.disclose[open] > summary::after,
  .faq summary::after { content: ""; }
  details { break-inside: avoid; }
  .finding, .keypoints li { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}