/* ─── UX home: editorial architecture sections ─────────────────────────────
   Owned by the ux-home run. Scoped to .home-page and .report-product-page so
   it never leaks onto other surfaces. Loaded after styles.css/order.css and
   reuses their tokens (ink + bronze on a warm stone ground, sharp corners,
   Playfair display, tabular figures). */

/* ─── Hero: address lookup ──────────────────────────────────────────────── */

.fs-lookup {
  display: flex;
  gap: 10px;
  align-items: stretch;
  max-width: 560px;
  margin: 0 auto 22px;
}

.fs-lookup input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-sm);
  background: rgba(10, 11, 13, 0.34);
  color: #fff;
  font-size: 0.95rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.fs-lookup input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.62);
}

.fs-lookup input[type="text"]:focus {
  outline: 0;
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.35);
}

.fs-lookup button {
  flex: 0 0 auto;
  min-height: 54px;
  padding: 0 24px;
  border: 1px solid var(--color-accent-bronze);
  border-radius: var(--radius-sm);
  background: var(--color-accent-bronze);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.fs-lookup button:hover {
  background: var(--color-accent-bronze-hover);
  border-color: var(--color-accent-bronze-hover);
}

@media (max-width: 560px) {
  .fs-lookup {
    flex-direction: column;
  }
  .fs-lookup button {
    width: 100%;
  }
}

/* ─── Shared section header ─────────────────────────────────────────────── */

.uh-head {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}

.uh-head h2 {
  font-size: var(--fs-display-lg);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-heading);
  margin: 0 0 16px;
}

.uh-head .uh-lede {
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: var(--color-text-soft);
  margin: 0 auto;
  max-width: 640px;
}

.uh-inner {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

/* ─── "What your lot could earn" — ROI calculator ──────────────────────────
   The calculator itself (controls, results card, disclosure) is styled in
   roi-calc.css, shared with the product page. Only the section shell is here. */

.uh-earn {
  background: linear-gradient(180deg, #e9e5dc 0%, #f4f1ec 100%);
  padding: 96px 0 104px;
}

/* ─── "What's inside the dossier" — premium ink section ──────────────────── */

.uh-dossier {
  background: var(--color-slate-ink);
  color: var(--color-on-dark, #f7f5f1);
  padding: 104px 0;
  /* The fanned page stack is rotated; clip it so the corners can't bleed into
     the next section or widen the page (horizontal scroll). */
  overflow: hidden;
}

.uh-dossier .uh-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.uh-dossier .eyebrow {
  color: var(--color-bronze-on-ink);
}

.uh-dossier h2 {
  font-size: var(--fs-display-lg);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 18px;
}

.uh-dossier .uh-lede {
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: rgba(247, 245, 241, 0.72);
  margin: 0 0 26px;
}

.uh-chapters {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.uh-chapters li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(247, 245, 241, 0.88);
  font-size: 0.95rem;
}

.uh-chapters li::before {
  content: counter(uhchapter, decimal-leading-zero);
  counter-increment: uhchapter;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--color-bronze-on-ink);
  font-variant-numeric: tabular-nums lining-nums;
}

.uh-chapters {
  counter-reset: uhchapter;
}

.uh-dossier-cta {
  min-height: 48px;
  padding: 0 24px;
}

/* Page stack — the only surface with soft layered shadows.
   A tight fan: the cover sits front and centred, the aerial peeks out a
   little to the left (−4°) and the executive summary to the right (+4°), with
   every offset ≤ 40 px. The stack is bounded (aspect-ratio + max-height) so it
   can never grow taller than the section, and contain: layout paint stops the
   rotation from contributing to the page layout. */
.uh-stack {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  aspect-ratio: 3 / 4.4;
  max-height: 560px;
  contain: layout paint;
}

.uh-page {
  position: absolute;
  top: 0;
  width: 360px;
  max-width: 100%;
  /* The <img> carries width/height attributes for CLS; height: auto + the
     aspect-ratio below make the CSS box a clean 3:4 regardless of the source
     image's own ratio. */
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
  transform-origin: 50% 100%;
}

.uh-page-1 {
  right: 20px;
  transform: rotate(0deg);
  z-index: 3;
}

.uh-page-2 {
  right: 0;
  transform: rotate(-4deg);
  z-index: 2;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

.uh-page-3 {
  right: 40px;
  transform: rotate(4deg);
  z-index: 1;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
}

/* ─── "How it is made" — credibility strip ───────────────────────────────── */

.uh-made {
  background: var(--color-bg-warm);
  padding: 96px 0;
}

.uh-steps {
  list-style: none;
  counter-reset: uhstep;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
}

.uh-step {
  border-top: 2px solid var(--color-bronze);
  padding-top: 18px;
}

.uh-step-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-bronze-text);
  font-variant-numeric: tabular-nums lining-nums;
  margin-bottom: 8px;
}

.uh-step h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--color-heading);
  margin: 0 0 8px;
}

.uh-step p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-soft);
  margin: 0;
}

/* ─── Case studies ───────────────────────────────────────────────────────── */

.uh-cases {
  background: var(--color-bg);
  padding: 96px 0;
}

.uh-case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.uh-case {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.uh-case:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

.uh-case-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg-soft);
}

.uh-case-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.uh-case-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px 24px;
  flex: 1;
}

.uh-case-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-bronze-text);
}

.uh-case h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--color-heading);
  margin: 0;
}

.uh-case-verdict {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-soft);
  margin-top: auto;
}

/* ─── Products row ───────────────────────────────────────────────────────── */

.uh-products {
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-warm) 100%);
  padding: 96px 0 104px;
}

.uh-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.uh-product {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: #fff;
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.uh-product:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

.uh-product .tp-badge {
  align-self: flex-start;
  margin-bottom: 8px;
}

.uh-product-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--color-heading);
  margin: 0;
}

.uh-product-tag {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-soft);
  margin: 0;
}

.uh-product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.uh-product-price {
  font-weight: 700;
  color: var(--color-heading);
  font-variant-numeric: tabular-nums lining-nums;
}

.uh-product-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--color-bronze-text);
}

.uh-product-cta svg {
  width: 15px;
  height: 15px;
}

.uh-product--flagship {
  border-color: var(--color-bronze);
  box-shadow: var(--shadow-2);
}

.uh-product--flagship .uh-product-name {
  font-size: 1.4rem;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .uh-dossier .uh-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .uh-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .uh-case-grid,
  .uh-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .uh-earn,
  .uh-dossier,
  .uh-made,
  .uh-cases,
  .uh-products {
    padding: 64px 0;
  }
  .uh-head {
    margin-bottom: 32px;
  }
  .uh-dossier .uh-inner {
    gap: 28px;
  }
  .uh-steps,
  .uh-case-grid,
  .uh-product-grid {
    grid-template-columns: 1fr;
  }
}

/* At ≤760 px the fanned stack collapses to a single upright page — no rotation,
   no offsets — so the dossier reads cleanly on a phone. */
@media (max-width: 760px) {
  .uh-stack {
    max-width: 320px;
    aspect-ratio: 3 / 4;
    max-height: none;
  }
  .uh-page {
    width: 100%;
    right: 0;
    transform: none;
  }
  .uh-page-2,
  .uh-page-3 {
    display: none;
  }
}

/* ─── home-tighten additions ───────────────────────────────────────────────
   Scoped to the home page. Loaded after styles.css so these win the cascade
   where they overlap (hero headline, free-guide grid). */

/* Hero headline: the new one-liner sits in ≤3 lines at desktop and ≤5 on a
   phone — a touch smaller than the original 4.2rem cap. */
.fs-headline {
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  max-width: 26ch;
}

/* Slim flagship band above the product cards. One line + one text link. */
.uh-flagship-band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 0 auto 28px;
  padding: 18px 22px;
  border: 1px solid var(--color-bronze);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-2);
}

.uh-flagship-band-text {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-heading);
}

.uh-flagship-band-link {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--color-bronze-text);
  text-decoration: none;
  white-space: nowrap;
}

.uh-flagship-band-link:hover {
  color: var(--color-ink);
}

/* Compact product row: five cards, thumbnail on top, name, one-line tagline,
   tabular price. */
.uh-product-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.uh-product-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: #fff;
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.uh-product-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

.uh-product-thumb {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-bg-soft);
}

.uh-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.uh-product-card-name {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

/* The card is 167 px wide on a 390 px phone, so a single nowrap line showed
   about twenty characters — "Which City pre-appro…", "Your King County evi…" —
   which tells a visitor nothing about what the report answers (measured
   2026-09-23). Two clamped lines fit the card without changing its height
   rhythm and carry the actual sentence. */
.uh-product-card-line {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text-soft);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.uh-product-card-price {
  margin-top: auto;
  font-weight: 700;
  color: var(--color-heading);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Free guides: three across, six cards, then one "All guides" link. */
.home-free-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* Compact the free-guide cards on the home page: shorter thumbnails and a
   clamped excerpt keep the 3×2 grid tight without touching the /blog layout. */
.home-free-guides .blog-card-img {
  height: 170px;
}

.home-free-guides .blog-card-body {
  padding: 16px 16px 18px;
}

.home-free-guides .blog-card-body h2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-free-guides .blog-card-body p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-free-header {
  margin-bottom: 28px;
}

.home-free-all {
  text-align: center;
  margin: -20px 0 48px;
}

.home-free-all a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--color-bronze-text);
  text-decoration: none;
}

.home-free-all a:hover {
  color: var(--color-ink);
}

@media (max-width: 960px) {
  .uh-product-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-free-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .uh-product-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-free-grid {
    grid-template-columns: 1fr;
  }
}

/* Bring the page back under its length budget while keeping generous — not
   wasteful — whitespace between sections. */
.uh-earn {
  padding: 72px 0 80px;
}
.uh-dossier {
  padding: 80px 0;
}
.uh-made {
  padding: 72px 0;
}
.uh-cases {
  padding: 72px 0;
}
.uh-products {
  padding: 72px 0 80px;
}

/* ─── Motion: honour reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .home-page [data-reveal],
  .report-product-page [data-reveal] {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
  .uh-page,
  .uh-page-2,
  .uh-page-3 {
    transform: none;
  }
}

/* Phone: one CTA per screen — the sticky bar already carries "Get your report",
   so the hero keeps only the address lookup and the sample link. */
@media (max-width: 760px) {
  .fs-hero .fs-actions .fs-cta {
    display: none;
  }
  .fs-hero .fs-actions {
    margin-top: 4px;
  }
}

/* ─── Assistant launcher: off the hero until first scroll ──────────────────
   At phone widths the fixed launcher sat on the "See a sample report" link in
   the fullscreen hero. Hidden until body.has-scrolled (toggled by the tiny
   script in the home page), then faded in below the hero. */
.home-page .asg-launcher {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.18s ease, background 0.18s ease;
}
.home-page.has-scrolled .asg-launcher {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ─── Hero: address autocomplete + instant lot card ────────────────────────
   Owned by the home-lot-check run. Reuses the hero's ink-on-dark palette and
   the site tokens (bronze, Playfair display, sharp radii). The dropdown is
   absolutely positioned so opening it never shifts the hero layout. */

.fs-lookup-zone {
  position: relative;
  max-width: 560px;
  margin: 0 auto 22px;
}

.fs-lookup-zone .fs-lookup {
  max-width: none;
  margin: 0;
}

.fs-lookup-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.fs-lookup-field input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

.fs-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: rgba(14, 15, 18, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-height: 320px;
  overflow-y: auto;
}

.fs-suggest-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
}

.fs-suggest-item:hover,
.fs-suggest-item.is-active {
  background: rgba(176, 141, 87, 0.22);
}

.fs-suggest-address {
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

.fs-suggest-zip {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.55);
}

.fs-suggest-note {
  margin: 8px 2px 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
}

/* While the address list is open, the two fixed overlays get out of its way.
   The list is absolutely positioned under the input, inside the hero's own
   stacking context, so its z-index: 30 cannot beat the sticky bar's 29 — the
   bar and the assistant launcher paint over it and swallow the taps. Measured
   2026-09-23 on / at 390x844 with six matches for "900 N": row 1 was half
   covered, and a tap on row 2 hit .mobile-cta's "Get your feasibility report
   — $149" and navigated to /feasibility-report instead of choosing the
   address. home-lot-check.js sets .fs-suggest-open on <body> while the list is
   open and clears it on every close, so this never hides the bar for longer
   than the list is up.
   Scoped to the widths where the two overlays are actually fixed over the
   column (.mobile-cta appears at <=760px, the launcher moves to the bottom bar
   at <=1100px), so a desktop visitor sees no flicker. */
@media (max-width: 1100px) {
  body.fs-suggest-open .mobile-cta,
  body.fs-suggest-open .asg-launcher {
    display: none;
  }
}

/* ─── Lot card ───────────────────────────────────────────────────────────── */

.fs-lot-card {
  text-align: left;
  padding: 24px 22px 20px;
  background: rgba(10, 11, 13, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-2);
}

.fs-lot-head {
  margin-bottom: 16px;
}

.fs-lot-kicker {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-bronze-on-ink, #c9a476);
}

.fs-lot-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}

/* The title takes programmatic focus when a state renders (screen readers land
   on the result); only keyboard users see the ring. */
.fs-lot-title:focus:not(:focus-visible) {
  outline: none;
}

.fs-lot-zip {
  margin: 4px 0 0;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.6);
}

.fs-facts {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 8px;
}

/* Label left, value right-aligned; a long value (a footprint with its caveat,
   a rent band) wraps onto further lines inside the card instead of clipping.
   The value is the flexible column and may shrink below its content width
   (min-width: 0) so it always wraps rather than overflowing the row. */
.fs-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.fs-fact-label {
  flex: 0 0 auto;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.fs-fact-value {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.fs-marker {
  display: inline-block;
  margin-right: 5px;
  font-size: 0.82rem;
}

.fs-marker.is-official {
  color: var(--color-bronze-on-ink, #c9a476);
}

.fs-marker.is-estimate {
  color: rgba(255, 255, 255, 0.5);
}

/* The source a fact came from, under its value (one lot size, one label — the
   assessor's recorded area, or the polygon measurement when there is no
   assessor figure). */
.fs-fact-basis {
  display: block;
  margin-top: 1px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: normal;
}

/* A unit already under construction or permitted on this lot: the one fact that
   can overturn the rest of the card, so it sits above the facts and reads like a
   stop sign rather than a footnote. */
.fs-lot-pending {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(201, 164, 118, 0.6);
  border-left: 3px solid var(--color-bronze-on-ink, #c9a476);
  border-radius: 10px;
  background: rgba(201, 164, 118, 0.12);
}

.fs-lot-pending-head {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-bronze-on-ink, #c9a476);
}

.fs-lot-pending-fact {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  font-weight: 600;
  color: #fff;
}

.fs-lot-pending-action {
  margin: 6px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

/* "Email me the guide": a lead who read their first pass and left used to leave
   nothing behind. Never a gate — the card above is already on screen. */
.fs-lot-lead {
  margin: 0 0 12px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.fs-lot-lead-head {
  margin: 0 0 3px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #fff;
}

.fs-lot-lead-sub {
  margin: 0 0 10px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
}

.fs-lot-lead-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fs-lot-lead-input {
  flex: 1 1 180px;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
}

.fs-lot-lead-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.fs-lot-lead-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-sm);
  background: transparent;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.fs-lot-lead-btn:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.06);
}

.fs-lot-lead-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.fs-lot-lead-msg {
  margin: 8px 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.8);
}

.fs-lot-lead-msg.is-error {
  color: #f0b4a6;
}

.fs-lot-degraded-sub {
  margin: -6px 0 14px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
}

.fs-lot-fineprint {
  margin: 0 0 14px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}

.fs-lot-degraded {
  margin: 0 0 14px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

.fs-lot-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.fs-lot-cta-primary,
.fs-lot-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
}

.fs-lot-cta-primary {
  background: var(--color-accent-bronze);
  border: 1px solid var(--color-accent-bronze);
  color: #fff;
  transition: background 160ms ease, border-color 160ms ease;
}

.fs-lot-cta-primary:hover {
  background: var(--color-accent-bronze-hover);
  border-color: var(--color-accent-bronze-hover);
}

.fs-lot-cta-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  transition: border-color 160ms ease, background 160ms ease;
}

.fs-lot-cta-secondary:hover {
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.06);
}

.fs-lot-again {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* tap target */
  padding: 0 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  cursor: pointer;
}

.fs-lot-again:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* ─── Lot-card progress (mirrors the report-page progress bar, dark) ─────── */

.fs-lot-progress {
  display: grid;
  gap: 10px;
}

.fs-lot-progress-caption {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.88);
}

.fs-lot-progress-track {
  position: relative;
  height: 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.fs-lot-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-accent-bronze), #b08d57);
  transition: width 180ms ease;
}

.fs-lot-progress-meta {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
}

.fs-lot-progress-pct {
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-bronze-on-ink, #c9a476);
}

@media (max-width: 560px) {
  .fs-lot-cta {
    flex-direction: column;
  }
  .fs-lot-lead-form {
    flex-direction: column;
  }
  .fs-lot-lead-btn {
    width: 100%;
  }
  .fs-lot-cta-primary,
  .fs-lot-cta-secondary {
    width: 100%;
  }
  .fs-lot-card {
    padding: 20px 16px 16px;
  }
  .fs-fact {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .fs-fact-value {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs-lot-progress-fill { transition: none; }
}

/* ─── Hero: the second CTA (records dossier) ───────────────────────────────
   The two hero products both get a button in the hero. The phone rule above
   hides .fs-cta so the sticky bar carries the single primary action; the
   dossier's button is the cheap, low-friction one, so it is the one that stays
   visible on a phone. */
.fs-cta-alt {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.fs-cta-alt:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

@media (max-width: 760px) {
  .fs-hero .fs-actions .fs-cta-alt {
    display: inline-flex;
  }

  /* ...and because .fs-cta is hidden here, the alt IS the primary on a phone,
     so it takes the primary's treatment. Read off the iOS Simulator before
     this rule: the laptop hero leads with a solid bronze button, while the
     phone hero showed two transparent outlines over the photograph with
     nothing to say which one to press — and the sticky bar that the note
     above relies on is itself suppressed on the home page until the first
     scroll, so on the opening screen there was no filled CTA at all. Same
     bronze, same white, same pair the desktop primary already uses. */
  .fs-hero .fs-actions .fs-cta-alt {
    background: var(--color-accent-bronze);
    border-color: var(--color-accent-bronze);
    color: #fff;
  }

  .fs-hero .fs-actions .fs-cta-alt:hover {
    background: var(--color-accent-bronze-hover);
    border-color: var(--color-accent-bronze-hover);
  }
}

/* ─── Home: the two hero products ──────────────────────────────────────────
   Two cards, equal weight, directly under the hero. The five focused reports
   keep the compact .uh-product-row further down the page. */
.uh-products-heroes {
  padding-bottom: 8px;
}

.uh-twoup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.uh-twoup-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 30px 26px;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-bronze);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-2);
  text-decoration: none;
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.uh-twoup-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3, var(--shadow-2));
}

.uh-twoup-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--color-bronze-tint, rgba(176, 141, 87, 0.12));
  color: var(--color-bronze-text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
}

.uh-twoup-name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  margin-bottom: 12px;
}

.uh-twoup-line {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--color-text);
  margin-bottom: 16px;
}

.uh-twoup-meta {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.uh-twoup-cta {
  margin-top: auto;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--color-bronze-text);
}

.uh-twoup-card:hover .uh-twoup-cta {
  color: var(--color-ink);
}

.uh-twoup-note {
  max-width: 76ch;
  margin: 22px auto 0;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* The secondary group: smaller heading, quieter than the two heroes. */
.uh-products-secondary .uh-head h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
}

@media (max-width: 860px) {
  .uh-twoup {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .uh-twoup-card {
    padding: 24px 20px 20px;
  }
}

/* The two-up cards ended in a plain text link with the price in small grey
   meta, so the one action on the site's main comparison read as a footnote.
   These live HERE, not in styles.css: home.css loads after it and re-sets
   .uh-twoup-cta's colour, which rendered the button dark-bronze-on-bronze —
   effectively unreadable. The doubled class keeps it ahead of the base rule
   and of the card's hover rule. */
.uh-twoup-cta.uh-twoup-buy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 13px 22px;
  border-radius: var(--radius-sm, 8px);
  background: var(--color-accent-bronze, #8b6f47);
  color: #fff;
  text-decoration: none;
  transition: background 0.15s ease;
}
.uh-twoup-card:hover .uh-twoup-cta.uh-twoup-buy,
.uh-twoup:hover .uh-twoup-cta.uh-twoup-buy {
  background: var(--color-ink, #17191c);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .uh-twoup-cta.uh-twoup-buy { transition: none; }
}
@media (max-width: 560px) {
  .uh-twoup-cta.uh-twoup-buy { width: 100%; justify-content: center; padding: 14px 16px; }
}

/* ── Legibility pass 2026-09-23 · see the block at the end of styles.css ──── */
.uh-twoup-note,
.uh-case-verdict,
.uh-step p,
.blog-card-body {
  font-size: 1rem;      /* was 14.1–14.7px */
  line-height: 1.6;
}

.uh-twoup-note {
  max-width: 68ch;
}

.uh-recon-headline-foot,
.uh-calc-disclosure-list li {
  max-width: 78ch;      /* ran 914–998px (140+ chars) on a 1920 viewport */
}