/* avoidforeclosure.co, Build 3: foreclosure is a clock.
   The identity is the timeline itself: the days that matter, set big. Color carries meaning: Harbor while there's
   time, Amber as it gets late, Rust at the sale. One load moment (the clock track drawing once); everything else moves
   only when the visitor acts. No drop shadows, no decorative gradients, no cards. (box-shadow appears only as flat
   inset rules and the focus ring's inner Ink line.) */

/* ---------- fonts ---------- */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Digits only (Build 2): Atkinson Hyperlegible Next draws a slashed zero, and the font has no unslashed alternate (its
   GSUB features are ccmp, frac, locl, pnum, tnum). Figures 0-9 come from Source Sans 3 (OFL), subset to the ten digits,
   scaled so its figures match Atkinson's figure height (652 vs 682 units: 104.6%), with Atkinson's vertical metrics so
   line boxes don't change. */
@font-face {
  font-family: "AHN Digits";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-digits-wght.woff2") format("woff2");
  unicode-range: U+0030-0039;
  size-adjust: 104.6%;
  ascent-override: 94.1%;
  descent-override: 30.2%;
  line-gap-override: 0%;
}
/* Display (Build 3): Young Serif, one weight (400), self-hosted. Lining figures for the big day numbers. */
@font-face {
  font-family: "Young Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/young-serif-latin-400-normal.woff2") format("woff2");
}
/* metric-matched fallbacks so the swap doesn't move the page */
@font-face { font-family: "AHN Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; }
@font-face { font-family: "YS Fallback"; src: local("Georgia"), local("DejaVu Serif"), local("Times New Roman"); size-adjust: 112%; ascent-override: 93%; descent-override: 33%; line-gap-override: 0%; }

/* ---------- tokens ---------- */
:root {
  --harbor: #0E4C4F;
  --paper: #F3F6F5;
  --ink: #14201F;
  --mist: #DDE7E5;
  --sage: #2F6B5E;
  --amber: #E9A23B;          /* buttons (with Ink text) and the middle of the timeline; never text on Paper */
  --amber-ink: #8A4B08;      /* urgency text on light backgrounds */
  --rust: #A33A2C;           /* the late end of the timeline and the sale marker only */
  --ink-soft: color-mix(in srgb, var(--ink) 80%, var(--paper));
  --line: color-mix(in srgb, var(--ink) 55%, var(--paper));      /* form borders: 3:1 or better on Paper */
  --rule: color-mix(in srgb, var(--ink) 18%, var(--mist));       /* rules on Mist bands */
  --harbor-rule: color-mix(in srgb, var(--mist) 28%, var(--harbor));
  --amber-wash: color-mix(in srgb, var(--amber-ink) 8%, var(--paper));
  --font: "AHN Digits", "Atkinson Hyperlegible Next", "AHN Fallback", system-ui, sans-serif;
  --display: "Young Serif", "YS Fallback", Georgia, serif;
  --measure: 65ch;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 6rem;
  --r: 8px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 1.1875rem; line-height: 1.6;
  font-variant-numeric: lining-nums proportional-nums;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 var(--s5); font-variant-numeric: lining-nums; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.25rem); }
h2 { font-size: clamp(1.875rem, 1.35rem + 1.7vw, 2.75rem); }
h3, h4, h5 { font-weight: 750; line-height: 1.25; margin: 0 0 var(--s3); }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.1875rem; }
h5 { font-size: 1.0625rem; }
p, ul, ol, dl, table { margin: 0 0 var(--s4); }
p, li { max-width: var(--measure); }
a { color: var(--sage); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }
strong { font-weight: 750; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: 76rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .wrap { padding: 0 32px; } }
.skip { position: absolute; left: -9999px; top: 0; background: var(--amber); color: var(--ink); padding: var(--s2) var(--s3); z-index: 10; font-weight: 750; }
.skip:focus { left: var(--s2); top: var(--s2); }

/* bands: full-bleed color, square edges */
.band { padding: var(--s8) 0; }
.band-harbor { background: var(--harbor); color: var(--paper); }
.band-mist { background: var(--mist); }
.band-paper { background: var(--paper); }
.band-harbor a:not(.btn) { color: var(--paper); }
.band-harbor a:not(.btn):hover { color: var(--mist); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font: inherit; font-weight: 750; line-height: 1.25; text-decoration: none; cursor: pointer;
  background: var(--amber); color: var(--ink); border: 2px solid var(--amber); border-radius: var(--r); padding: .85rem 1.4rem;
}
.btn:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.band-harbor .btn:hover, .site-header .btn:hover { border-color: var(--paper); }
.btn-outline { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn-outline:hover { background: var(--paper); color: var(--ink); }
.band-harbor a.btn-outline:not(:hover) { color: var(--paper); }
.btn-small { padding: .45rem .9rem; font-size: 1.0625rem; }
.btn[disabled] { opacity: .7; cursor: progress; }

/* ---------- header ---------- */
.site-header { background: var(--harbor); color: var(--paper); border-bottom: 1px solid var(--harbor-rule); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); padding-top: var(--s4); padding-bottom: var(--s4); }
.wordmark { font-family: var(--display); font-size: 1.5rem; color: var(--paper); text-decoration: none; letter-spacing: -0.01em; line-height: 1.1; }
.wordmark span { color: var(--mist); }
.wordmark:hover { color: var(--paper); text-decoration: underline; text-decoration-thickness: 1px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); }
.site-nav li { max-width: none; }
.site-nav a:not(.btn) { color: var(--paper); text-decoration: none; font-size: 1.0625rem; padding: var(--s1) 0; border-bottom: 2px solid transparent; }
.site-nav a:not(.btn):hover { border-bottom-color: var(--mist); color: var(--paper); }
.site-nav a[aria-current]:not(.btn) { border-bottom-color: var(--amber); }
@media (max-width: 699px) { .header-row { flex-direction: column; align-items: flex-start; } .site-nav ul { gap: var(--s2) var(--s4); } }

/* ---------- page head (inner pages) ---------- */
.page-head { padding: var(--s7) 0 var(--s6); }
.page-head h1 { max-width: 18ch; }
.crumbs ol { list-style: none; margin: 0 0 var(--s5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); font-size: 1rem; }
.crumbs li { color: var(--ink-soft); }
.crumbs li + li::before { content: "/"; margin-right: var(--s2); color: var(--ink-soft); }
.lede { font-size: 1.3125rem; color: var(--ink-soft); max-width: 56ch; margin-bottom: 0; }
.checked { color: var(--ink-soft); font-size: 1.0625rem; }

/* ---------- content ---------- */
.content { padding-bottom: var(--s8); }
.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--s8); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s6); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin-bottom: var(--s2); }
.prose li::marker { color: var(--harbor); }

/* numbered vertical sequence: option-page steps and state timelines */
.steps { list-style: none; padding: 0 !important; margin: 0 0 var(--s5); counter-reset: step; }
.steps > li { counter-increment: step; position: relative; padding: .2rem 0 var(--s5) 3.75rem; margin: 0; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--harbor); color: var(--paper); font-family: var(--display); font-size: 1.25rem; display: grid; place-items: center; line-height: 1;
}
.steps > li::after { content: ""; position: absolute; left: calc(1.25rem - 2px); top: 2.5rem; bottom: 0; border-left: 4px solid var(--harbor); }
.steps > li:last-child::after { display: none; }
.steps > li.is-sale::before { background: var(--rust); }
.steps > li.is-sale::after, .steps > li.is-late::after { border-left-color: var(--rust); }
.steps > li.is-late::before { background: var(--paper); color: var(--rust); border: 3px solid var(--rust); }

/* type chip and the facts band (state guides) */
.type-chip { display: inline-block; font-family: var(--display); font-size: 1.5rem; line-height: 1.2; border: 2px solid var(--harbor); color: var(--harbor); padding: .3rem .8rem; margin: 0 0 var(--s5); }
.facts { display: grid; grid-template-columns: 1fr; background: var(--mist); padding: var(--s4) var(--s5); margin: 0 0 var(--s7); max-width: none; gap: 0 var(--s6); }
.facts > div { padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.facts > div:first-child { border-top: 0; }
.facts dt { font-weight: 750; font-size: 1rem; color: var(--ink-soft); }
.facts dd { margin: 0; }
@media (min-width: 800px) { .facts { grid-template-columns: 1fr 1fr; } .facts > div:nth-child(2) { border-top: 0; } }

/* disclosure note and author line */
.disclosure { background: var(--mist); border-radius: var(--r); border-left: 6px solid var(--harbor); padding: var(--s5); margin: var(--s7) 0; max-width: calc(var(--measure) + 3rem); }
.disclosure p { margin: 0; }
.disclosure-text { font-weight: 700; }
.disclosure-hud { margin-top: var(--s3) !important; }
.author { border-top: 1px solid var(--mist); padding-top: var(--s4); margin-top: var(--s7); max-width: var(--measure); font-size: 1.0625rem; color: var(--ink-soft); }
.author p { margin-bottom: var(--s2); }
.updated { margin: 0; }

/* CTA band */
.cta { padding: var(--s8) 0; }
.cta h2 { color: var(--paper); max-width: 18ch; }
.cta p { color: var(--mist); max-width: 56ch; }
.cta p:last-child { margin: var(--s5) 0 0; }

/* ---------- home: hero ---------- */
.hero { padding: var(--s8) 0 var(--s9); }
.hero h1 { font-size: clamp(2.75rem, 1.3rem + 5.2vw, 5.75rem); line-height: 1; max-width: 15ch; color: var(--paper); margin-bottom: var(--s6); }
.hero .lede { color: var(--mist); font-size: 1.375rem; max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); align-items: center; margin-top: var(--s6); }

/* ---------- home: the clock ---------- */
.clock-band { padding: var(--s8) 0; }
.clock-band h2 { margin-bottom: var(--s4); }
.where-intro { color: var(--ink-soft); max-width: 56ch; }
.clock { position: relative; margin: var(--s7) 0 var(--s6); }
.stages { border: 0; margin: 0; padding: 0; min-width: 0; position: relative; }
.stage { position: absolute; display: block; cursor: pointer; }
.stage input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stage-name { display: block; font-weight: 750; line-height: 1.25; font-size: 1.0625rem; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r); padding: .55rem .8rem; }
.stage:hover .stage-name { background: var(--mist); }
.stage input:checked + .stage-name { background: var(--ink); color: var(--paper); }
.stage input:focus-visible + .stage-name { outline: 3px solid var(--amber); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }
.axis { position: relative; }
.milestones { list-style: none; margin: 0; padding: 0; }
.ms { position: relative; max-width: none; margin: 0; }
.ms::before { content: ""; position: absolute; }
.ms::after { content: ""; position: absolute; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--paper); border: 4px solid var(--ink); }
.ms-num { display: block; font-family: var(--display); font-variant-numeric: lining-nums; line-height: .95; font-size: clamp(2.5rem, 1.4rem + 2.6vw, 4rem); letter-spacing: -0.02em; }
.ms-day { display: block; font-family: var(--font); font-size: 1rem; font-weight: 750; letter-spacing: 0; color: var(--ink-soft); margin-bottom: var(--s1); }
.ms-word { font-size: clamp(2rem, 1.2rem + 1.9vw, 3rem); }
.ms-label { display: block; font-size: 1.0625rem; line-height: 1.35; margin-top: var(--s2); color: var(--ink); }
.ms.is-sale::after { background: var(--rust); border-color: var(--rust); }
/* segment colors, square-edged (hard stops, not a smooth gradient): Harbor to day 45, Amber 45 to 120, Rust after */
.ms-1::before, .ms-2::before { background: var(--harbor); }
.ms-5::before, .ms-6::before { background: var(--rust); }
.marker { position: absolute; z-index: 3; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--ink); border: 5px solid var(--paper); outline: 3px solid var(--ink); pointer-events: none; }
.marker[hidden] { display: none; }
.track-cover { position: absolute; z-index: 2; background: var(--paper); pointer-events: none; display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .track-cover { display: block; animation: track-draw .9s cubic-bezier(.3, .6, .3, 1) .15s both; }
  .js .marker.is-placed { transition: left .45s ease, top .45s ease; }
  .js .panel.is-entering { animation: panel-in .22s ease-out; }
}
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* clock, horizontal (wide screens) */
@media (min-width: 1000px) {
  .stages { height: 8.25rem; }
  .stage { bottom: 1.25rem; left: var(--pos); transform: translateX(-50%); width: max-content; max-width: 15rem; }
  .stage::after { content: ""; position: absolute; left: 50%; bottom: -1.25rem; height: 1.25rem; border-left: 2px solid var(--ink); }
  .stage.is-first { left: 0; transform: none; } .stage.is-first::after { left: 1.25rem; }
  .stage.is-last { left: auto; right: 0; transform: none; } .stage.is-last::after { left: auto; right: 1.25rem; }
  .milestones { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ms { padding: 3rem var(--s3) 0; text-align: center; }
  .ms::before { left: 0; right: 0; top: .75rem; height: 12px; }
  .ms::after { left: 50%; top: calc(.75rem + 6px); transform: translate(-50%, -50%); }
  .ms-3::before { background: linear-gradient(to right, var(--harbor) 50%, var(--amber) 50%); }
  .ms-4::before { background: linear-gradient(to right, var(--amber) 50%, var(--rust) 50%); }
  .marker { top: calc(.75rem + 6px); left: var(--pos); transform: translate(-50%, -50%); }
  .track-cover { left: 0; right: 0; top: 0; height: 2rem; transform-origin: right center; }
  @keyframes track-draw { from { transform: scaleX(1); } to { transform: scaleX(0); } }
}
/* clock, vertical (phones and tablets) */
@media (max-width: 999px) {
  .clock { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
  .stages { align-self: stretch; }
  .stage { left: 0; right: .9rem; top: var(--pos); transform: translateY(-50%); }
  .stage.is-first { top: 0; transform: none; }
  .stage-name { font-size: 1rem; padding: .45rem .6rem; }
  .milestones { display: block; }
  .ms { padding: 0 0 var(--s6) 2.6rem; }
  .ms:last-child { padding-bottom: var(--s2); }
  .ms::before { left: .5rem; width: 12px; top: 0; bottom: 0; }
  .ms:first-child::before { top: .6rem; }
  .ms:last-child::before { bottom: auto; height: .9rem; }
  .ms::after { left: calc(.5rem + 6px); top: .9rem; transform: translate(-50%, -50%); }
  .ms-3::before { background: linear-gradient(to bottom, var(--harbor) 50%, var(--amber) 50%); }
  .ms-4::before { background: linear-gradient(to bottom, var(--amber) 50%, var(--rust) 50%); }
  .ms-num { font-size: clamp(2.25rem, 1.6rem + 3vw, 3rem); }
  .ms-word { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.25rem); }
  .ms-day { margin-bottom: 0; }
  .marker { left: calc(.5rem + 6px); top: var(--pos); transform: translate(-50%, -50%); }
  .track-cover { left: 0; width: 1.75rem; top: 0; bottom: 0; transform-origin: center bottom; }
  @keyframes track-draw { from { transform: scaleY(1); } to { transform: scaleY(0); } }
}
/* without JavaScript: the track and its milestones show; the stage buttons don't; all four panels list below */
.no-js .stages, .no-js .panel-hint, .no-js .marker { display: none; }
@media (max-width: 999px) { .no-js .clock { grid-template-columns: 1fr; } }
.js .panel[hidden] { display: none; }
.panel-hint { color: var(--ink-soft); }
.panel { border-top: 4px solid var(--ink); padding-top: var(--s5); margin-top: var(--s5); }
.no-js .panel + .panel { margin-top: var(--s7); }
.panel h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem); line-height: 1.1; color: var(--ink); }
.panel h4 { margin-top: var(--s5); }
.panel ul { padding-left: 1.2em; }
.panel li { margin-bottom: var(--s2); }
.panel li::marker { color: var(--harbor); }
.panel-cols { display: grid; gap: 0 var(--s7); }
@media (min-width: 800px) { .panel-cols { grid-template-columns: 1fr 1fr; } }
.panel-cols ul { list-style: none; padding: 0; }
.panel-cols li { border-top: 1px solid var(--mist); padding: var(--s2) 0; margin: 0; }
.panel-cols h5 { color: var(--ink-soft); margin: var(--s3) 0 var(--s2); }
.panel-urgent { background: var(--amber-wash); color: var(--amber-ink); border-left: 6px solid var(--rust); padding: var(--s3) var(--s4); font-weight: 750; }
.panel-urgent a { color: var(--amber-ink); }

/* ---------- home: five ways (Mist band, full-width rows) ---------- */
.ways-head p { max-width: 56ch; }
.ways { list-style: none; margin: var(--s6) 0 0; padding: 0; border-bottom: 1px solid var(--rule); }
.ways li { max-width: none; border-top: 1px solid var(--rule); padding: var(--s5) 0; display: grid; gap: var(--s2) var(--s6); align-items: baseline; }
.ways h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.05; margin: 0; }
.ways p { margin: 0; }
@media (min-width: 900px) { .ways li { grid-template-columns: 4fr 6fr 2.5fr; } .ways li p:last-child { text-align: right; } }

/* little-equity pull band */
.pull { padding: var(--s8) 0 var(--s4); }
.pull-inner { border-left: 8px solid var(--harbor); padding: var(--s2) 0 var(--s2) var(--s6); }
.pull h2 { font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem); margin-bottom: var(--s4); }
.pull p { font-size: 1.3125rem; max-width: 50ch; margin: 0; }

/* ---------- comparison table ---------- */
.compare { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 1.0625rem; line-height: 1.5; }
.compare caption { text-align: left; color: var(--ink-soft); padding-bottom: var(--s3); }
.compare th, .compare td { text-align: left; vertical-align: top; padding: var(--s3); border-top: 1px solid var(--mist); background: var(--paper); }
.compare thead th { border-top: 0; border-bottom: 3px solid var(--ink); font-size: 1rem; }
.compare tbody th { font-family: var(--display); font-weight: 400; font-size: 1.25rem; line-height: 1.15; width: 14%; }
.compare tr.justin th, .compare tr.justin td { background: var(--mist); }
.compare tr.justin th { box-shadow: inset 6px 0 0 var(--harbor); padding-left: var(--s5); }
@media (min-width: 900px) {
  .compare th:first-child { position: sticky; left: 0; z-index: 1; }
}
@media (max-width: 899px) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100% !important; }
  .compare tr { border-top: 3px solid var(--ink); padding: var(--s4) 0 var(--s4); margin-bottom: var(--s4); }
  .compare tbody th { border: 0; font-size: 1.625rem; padding: 0 0 var(--s2); }
  .compare td { border: 0; padding: var(--s2) 0; }
  .compare td::before { content: attr(data-label); display: block; font-weight: 750; font-size: .9375rem; color: var(--ink-soft); }
  .compare tr.justin { background: var(--mist); border-top-color: var(--harbor); box-shadow: inset 6px 0 0 var(--harbor); padding-left: var(--s5); padding-right: var(--s4); }
  .compare tr.justin th { box-shadow: none; padding-left: 0; }
}
.compare + .prose { margin-top: var(--s7); }

/* ---------- option pages: who holds what ---------- */
.holds { margin: 0 0 var(--s7); }
.holds figcaption { font-weight: 750; margin-bottom: var(--s3); }
.holds-grid { display: grid; grid-template-columns: minmax(7rem, 1.1fr) repeat(3, minmax(0, 2fr)); border-top: 3px solid var(--ink); border-bottom: 1px solid var(--mist); }
.holds-col { font-weight: 750; font-size: 1rem; color: var(--ink-soft); padding: var(--s3) var(--s3) var(--s2); }
.holds-col:first-child { padding-left: 0; }
.holds-lane { font-family: var(--display); font-size: 1.5rem; line-height: 1.1; padding: var(--s4) var(--s3) var(--s4) 0; border-top: 1px solid var(--mist); }
.holds-cell { position: relative; padding: var(--s4) var(--s3); border-top: 1px solid var(--mist); display: flex; gap: var(--s3); align-items: flex-start; }
.holds-cell::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--s4) + 1.125rem - 1px); border-top: 2px solid var(--mist); z-index: 0; }
.holds-cell p { margin: 0; font-size: 1.0625rem; line-height: 1.4; position: relative; z-index: 1; padding-top: .35rem; }
.who { position: relative; z-index: 1; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-size: .875rem; font-weight: 750; line-height: 1; }
.who-you { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); }
.who-me { background: var(--harbor); color: var(--paper); border: 2px solid var(--harbor); }
.who-none { background: var(--paper); border: 2px dashed var(--line); }
.holds-note { font-size: 1.0625rem; color: var(--ink-soft); margin: var(--s3) 0 0; }
.col-label { display: none; }
@media (max-width: 760px) {
  .holds-grid { grid-template-columns: 1fr; }
  .holds-col { display: none; }
  .holds-lane { padding-top: var(--s5); }
  .holds-cell { border-top: 0; padding: var(--s2) 0; }
  .holds-cell::before { display: none; }
  .holds-cell .col-label { display: block; font-weight: 750; font-size: .9375rem; color: var(--ink-soft); }
}

/* risks band and checklist */
.risks h2 { margin-top: 0; }
.risks ul { padding-left: 1.3em; }
.risks li::marker { color: var(--rust); font-size: 1.2em; }
.checklist { list-style: none; padding: 0 !important; }
.checklist li { position: relative; padding-left: 2.25rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .25rem; width: 1.25rem; height: 1.25rem; border: 2px solid var(--harbor); }

/* ---------- little or no equity: the bars ---------- */
.example { border-top: 3px solid var(--ink); padding: var(--s5) 0 0; margin: var(--s5) 0; max-width: none; }
.example-label { font-weight: 750; color: var(--ink-soft); margin-bottom: var(--s4); }
.figures { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s5); margin: var(--s5) 0; max-width: 40rem; }
.figures dt, .figures dd { margin: 0; padding: var(--s1) 0; border-top: 1px solid var(--mist); }
.figures dd { text-align: right; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.bars { margin: 0 0 var(--s4); max-width: 52rem; }
.bar-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.bar-name { font-weight: 750; font-size: 1rem; }
.bar-track { position: relative; height: 2.75rem; }
.bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--harbor); color: var(--paper); display: flex; align-items: center; justify-content: flex-end; padding: 0 var(--s3); font-family: var(--display); font-size: 1.25rem; font-variant-numeric: lining-nums tabular-nums; }
.bar-payoff { background: var(--ink); }
.bar-offer { background: var(--amber); color: var(--ink); }
.bar-gap { position: absolute; top: 0; bottom: 0; background: var(--rust); color: var(--paper); display: flex; align-items: center; justify-content: center; font-weight: 750; font-size: .9375rem; white-space: nowrap; overflow: hidden; }
.bar-axis { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s3); font-size: .9375rem; color: var(--ink-soft); }
.bar-axis div { display: flex; justify-content: space-between; border-top: 2px solid var(--ink); padding-top: var(--s1); }
@media (max-width: 560px) {
  .bar-row, .bar-axis { grid-template-columns: 1fr; gap: var(--s1); }
  .bar-axis > span { display: none; }
  .bar { font-size: 1.0625rem; }
}

/* ---------- state hub grid ---------- */
.state-grid { list-style: none; padding: 0; margin: 0 0 var(--s6); display: grid; grid-template-columns: 1fr; border-top: 3px solid var(--ink); }
.state-grid li { max-width: none; margin: 0; border-bottom: 1px solid var(--mist); padding: var(--s4) var(--s3) var(--s4) 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s4); }
.state-grid a { font-family: var(--display); font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); line-height: 1.15; color: var(--ink); text-decoration: none; }
.state-grid a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.state-grid .kind { color: var(--ink-soft); font-size: 1rem; }
@media (min-width: 700px) { .state-grid { grid-template-columns: 1fr 1fr; column-gap: var(--s7); } }
@media (min-width: 1100px) { .state-grid { grid-template-columns: 1fr 1fr 1fr; } }

.sources { font-size: 1.0625rem; }
.sources li { overflow-wrap: anywhere; }
.sources .src-host { color: var(--ink-soft); }

/* ---------- form ---------- */
.form-wrap { max-width: 46rem; }
.options-form fieldset { border: 0; padding: 0; margin: 0 0 var(--s7); min-width: 0; }
.options-form > fieldset > legend { font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1.1; padding: 0; margin-bottom: var(--s4); }
.options-form .q { font-weight: 750; font-size: 1.1875rem; margin-bottom: var(--s2); padding: 0; }
.field { margin-bottom: var(--s4); }
.field label { display: block; font-weight: 700; margin-bottom: var(--s1); }
.opt { font-weight: 400; color: var(--ink-soft); }
input[type=text], input[type=email], input[type=tel], input[type=date], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--line); border-radius: var(--r); padding: .6rem .75rem; min-height: 3rem;
}
textarea { min-height: 7rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--ink); }
.fgrid { display: grid; gap: 0 var(--s4); }
@media (min-width: 620px) { .fgrid { grid-template-columns: 1fr 1fr; } .field-wide { grid-column: 1 / -1; } }
/* segmented buttons */
.choice-group { margin-bottom: var(--s5) !important; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--ink); border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; }
.choice { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; min-height: 3rem; padding: .5rem .75rem; cursor: pointer; line-height: 1.25; background: var(--paper); }
.choice:hover span { background: var(--mist); }
.choice input:checked + span { background: var(--ink); color: var(--paper); font-weight: 750; }
.choice input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: -5px; }
[data-group="notice"] .choices { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  [data-group="behind"] .choices { grid-template-columns: repeat(4, 1fr); }
  [data-group="notice"] .choices { grid-template-columns: repeat(3, 1fr); }
}
[data-group="live"] .choices { max-width: 20rem; }
.saledate { display: none; margin-top: var(--s4); }
.options-form:has(input[name="notice"][value="sale date set"]:checked) .saledate { display: block; }
.no-has .saledate.is-on { display: block; }
.amber-note { background: var(--amber-wash); color: var(--amber-ink); border-left: 6px solid var(--rust); padding: var(--s3) var(--s4); font-weight: 750; margin: 0 0 var(--s3); }
.saledate .field { max-width: 16rem; }
.consent { font-size: 1rem; color: var(--ink-soft); margin: calc(-1 * var(--s2)) 0 var(--s4); }
.form-error { background: var(--amber-wash); color: var(--amber-ink); border-left: 6px solid var(--rust); padding: var(--s3) var(--s4); font-weight: 750; margin-bottom: var(--s5); }
.form-error[hidden] { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.thanks { display: none; padding: var(--s6) var(--s5); background: var(--harbor); color: var(--paper); }
.thanks.is-on, .thanks:target { display: block; }
.form-wrap:has(.thanks:target) .options-form { display: none; }
.thanks-text { font-family: var(--display); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.15; margin: 0; max-width: 24ch; }

/* 404 */
.notfound { list-style: none; margin: 0; padding: 0 !important; border-top: 3px solid var(--ink); max-width: var(--measure); }
.notfound li { border-bottom: 1px solid var(--mist); margin: 0; }
.notfound a { display: block; padding: var(--s3) 0; font-family: var(--display); font-size: 1.625rem; color: var(--ink); }

/* ---------- footer ---------- */
.site-footer { background: var(--harbor); color: var(--mist); padding: var(--s7) 0 var(--s5); font-size: 1.0625rem; border-top: 1px solid var(--harbor-rule); }
.site-footer a { color: var(--paper); }
.site-footer a:hover { color: var(--mist); }
.footer-grid { display: grid; gap: var(--s5) var(--s8); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--s2) var(--s5); }
.footer-fine p { color: var(--mist); font-size: 1rem; margin: var(--s6) 0 0; padding-top: var(--s4); border-top: 1px solid var(--harbor-rule); max-width: none; }
.js .stage-hint-nojs, .no-js .stage-hint-js { display: none; }
.need-h { margin-top: var(--s8) !important; }
.content > .band { margin: var(--s7) 0 0; }
.sources { margin-top: var(--s7); }