/* ════════════════════════════════════════════════════════════════════════
   ktp-ui.css — the surface layer: depth, glass, motion.

   Loads after each page's own <style> and after ktp-a11y.css, so it is the
   last word on chrome and surfaces.

   The rule this file follows, and the reason it is safe on a site built for
   people in their sixties: GLASS IS FOR SURFACES, NEVER FOR TYPE. Headers,
   bars, card edges, the depth between layers — those get translucency and
   blur. Body copy always sits on something near-opaque, at full contrast.
   That is the difference between "Apple" and "unreadable".
   ════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:light;
  /* Depth. Four steps, each a two-part shadow — a tight contact shadow plus
     a wide ambient one. One-shadow elevation is what makes a card look
     stuck on rather than lifted. */
  /* Elevation, deliberately quiet. The earlier values were tuned for a
     glass look and every card floated; the reference deck gets its modern
     feel the opposite way — hairline edges, real whitespace, and shadow
     reserved for things that genuinely sit above the page (the sticky bar,
     a modal, a card you are dragging). Flat is the style; depth is the
     exception. */
  --e1:0 1px 2px rgba(20,38,30,.04);
  --e2:0 1px 2px rgba(20,38,30,.04), 0 4px 10px rgba(20,38,30,.045);
  --e3:0 2px 6px rgba(20,38,30,.06), 0 10px 26px rgba(20,38,30,.07);
  --e4:0 6px 14px rgba(20,38,30,.08), 0 24px 56px rgba(20,38,30,.11);

  /* Hairline, the workhorse of the flat look. */
  --rule:rgba(28,43,51,.10);
  --rule-soft:rgba(28,43,51,.06);

  /* Glass */
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.88);
  --glass-brd:rgba(255,255,255,.65);
  --glass-dark:rgba(13,58,42,.80);

  /* Motion. --spring overshoots very slightly; it is what makes a panel feel
     like an object rather than a div whose opacity changed. */
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:32px;
}
.ktp-skip{
  position:fixed; z-index:400; top:12px; left:12px;
  padding:12px 18px; border-radius:10px;
  background:var(--green-deep); color:#fff; font-weight:700;
  transform:translateY(-200%); text-decoration:underline; text-underline-offset:3px;
}
.ktp-skip:focus{ transform:none; outline:3px solid var(--gold); outline-offset:3px }
header .nav-links a[aria-current="page"]{ background:var(--green-tint); color:var(--green-deep); font-weight:700 }
::selection{ background:var(--green-tint); color:var(--green-deep) }
input,textarea{ caret-color:var(--green) }

/* ── The ground ──────────────────────────────────────────────────────────
   Three very soft radial washes, fixed, behind everything. Gives the glass
   something to actually refract instead of flat cream. */
body{
  background:
    radial-gradient(900px 620px at 12% -8%,  rgba(23,105,75,.075), transparent 62%),
    radial-gradient(760px 560px at 92% 4%,   rgba(201,162,74,.085), transparent 60%),
    radial-gradient(1000px 760px at 50% 102%,rgba(23,105,75,.055), transparent 64%),
    var(--paper);
  background-attachment:fixed;
}

/* ── Header: glass, and it condenses as you scroll ───────────────────── */
header{
  background:var(--glass) !important;
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(231,222,203,.75) !important;
  transition:box-shadow .3s var(--ease), background .3s var(--ease);
}
header.condensed{ box-shadow:var(--e2); background:var(--glass-strong) !important; }
header .nav{ transition:height .3s var(--ease); }
header.condensed .nav{ height:56px; }

/* ── The accessibility strip, restyled to match ──────────────────────── */
.a11ybar{
  background:rgba(231,240,235,.62) !important;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(231,222,203,.7) !important;
}
.listen,.a11y button{ border-radius:var(--r-s); transition:transform .22s var(--spring), box-shadow .22s var(--ease), background .18s var(--ease); cursor:pointer }
.listen:hover,.a11y button:hover{ transform:translateY(-1px); box-shadow:var(--e2) }
.listen:active,.a11y button:active{ transform:translateY(0) scale(.98) }

/* ── Call bar: glass over the page, not a slab under it ──────────────── */
.callbar{
  background:var(--glass-dark) !important;
  -webkit-backdrop-filter:saturate(170%) blur(22px);
  backdrop-filter:saturate(170%) blur(22px);
  border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -10px 40px rgba(10,40,28,.22) !important;
}
.callbar a{ border-radius:14px; transition:transform .24s var(--spring), box-shadow .24s var(--ease) }
.callbar a:active{ transform:scale(.97) }
.callbar .cb-call{ box-shadow:0 2px 10px rgba(0,0,0,.14) }
.callbar .cb-call:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.2) }
@media(min-width:760px){ .callbar{ border:1px solid rgba(255,255,255,.16); border-radius:var(--r-l) !important } }

/* ── Surfaces ────────────────────────────────────────────────────────── */
/* Cards read as sheets of paper on a warm ground, not panes of glass over
   it: solid white, one hairline, almost no shadow. Blur stays on the
   chrome — header, call bar, modals — where translucency is doing real
   work instead of decorating a card. */
.stage-box,.panel,.tool,.county-detail,.cost{
  border-radius:var(--r-m) !important;
  box-shadow:var(--e1) !important;
  border:1px solid var(--rule) !important;
  background:#fff !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.honest,.surplus-hero{ border-radius:var(--r-m) !important; box-shadow:var(--e2) !important }

/* Air. The reference deck's whole feel is whitespace doing the separating,
   with a hairline where a boundary genuinely has to be read. */
.stage-box,.panel,.cost,.verify,.honest{ padding:34px 32px }
.view{ padding:52px 0 72px }
.tools{ gap:20px !important; margin:52px 0 !important }
.sit-grid{ gap:18px !important }
.hero{ padding:32px 0 36px !important }
/* Keep the guide's first action alongside the introduction. The existing
   map artwork complements the copy instead of adding a full screen below it. */
#view-home .hero{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  column-gap:40px;
  align-items:start;
}
#view-home .hero > :not(.hero-media){ grid-column:1 }
#view-home .hero h1{ font-size:clamp(1.9rem,3.4vw,2.5rem); text-wrap:balance }
#view-home .hero .lead{ max-width:60ch }
#view-home .hero-media{
  grid-column:2;
  grid-row:1 / span 4;
  align-self:center;
  width:100%;
  margin:0;
}
.hero-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-top:24px }
.hero-actions .btn{ min-height:48px; white-space:normal; text-align:left }
.hero-contact{ text-decoration:underline; text-underline-offset:4px; font-weight:600 }
.hero-contact:hover{ color:var(--green-deep); text-decoration-thickness:2px }
#find-stage:focus{ outline:3px solid var(--green); outline-offset:5px }
@media(max-width:800px){
  #view-home .hero{ grid-template-columns:minmax(0,1fr); row-gap:24px }
  #view-home .hero-media{ grid-column:1; grid-row:auto; width:min(220px,65%); justify-self:center }
}
@media(max-width:620px){
  .stage-box,.panel,.cost,.verify,.honest{ padding:24px 20px }
  .view{ padding:36px 0 56px }
}

/* Numbers line up. Every figure on this site is one a homeowner is trying
   to compare against another figure. */
.cbar-amt,.calc-out,.cv-n,.dl-num,.brk-row b,.dl-when,.chip{ font-variant-numeric:tabular-nums }
.sit-card,.result,.notice,.formerr,.consent{ border-radius:var(--r-m) !important }

/* Flat surfaces move less. A 6px lift and a heavy shadow read as a card
   peeling off the page, which is the look we just left behind. */
.tool{ transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .2s }
.tool:hover{ transform:translateY(-2px) !important; box-shadow:var(--e2) !important;
  border-color:rgba(23,105,75,.35) !important }
.sit-card{ transition:transform .28s var(--ease), box-shadow .28s var(--ease) }
.sit-card:hover{ transform:translateY(-2px) !important; box-shadow:var(--e2) }

.btn{
  border-radius:12px !important; cursor:pointer;
  box-shadow:0 1px 2px rgba(20,38,30,.08);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .18s var(--ease);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 2px 8px rgba(23,105,75,.2) }
.btn:active{ transform:translateY(0) scale(.98) }
.btn.ghost{ box-shadow:none }
.btn.ghost:hover{ box-shadow:var(--e2) }

.field input,.field select,.field textarea{
  border-radius:var(--r-s) !important; background:rgba(255,255,255,.7) !important;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  background:#fff !important; box-shadow:0 0 0 4px rgba(23,105,75,.14);
}

/* ── Reveal on scroll ────────────────────────────────────────────────── */
.rv{ opacity:0; transform:translateY(22px); }
.rv.in{ opacity:1; transform:none; transition:opacity .66s var(--ease), transform .66s var(--ease); }

/* ════════════════════════════════════════════════════════════════════════
   THE JOURNEY TRACK
   The six stages as a track you move along, not six buttons in a grid. The
   point is for someone to see at a glance that the thing has a shape, that
   they are somewhere specific on it, and that there is road behind them and
   road ahead — which is the actual message of the whole site.
   ════════════════════════════════════════════════════════════════════════ */
.journey{ position:relative; margin:26px 0 8px; padding:4px 0 2px }

/* Inset to the centre of the first and last node (6 equal columns, so the
   outer centres sit at 1/12 and 11/12) — a rail that runs past the ends
   reads as a process that continues off the page, which is the opposite of
   the point. */
.jrail{
  position:absolute; left:8.333%; right:8.333%; top:27px; height:5px; border-radius:99px;
  background:linear-gradient(90deg,rgba(23,105,75,.10),rgba(23,105,75,.16));
  overflow:hidden;
}
.jfill{
  position:absolute; inset:0 auto 0 0; width:0;
  background:linear-gradient(90deg,var(--green),#2a9068);
  border-radius:99px; box-shadow:0 0 0 1px rgba(23,105,75,0.35);
  transition:width .72s var(--spring);
}

.jnodes{ position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:4px }

.jnode{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  background:none; border:0; padding:4px 2px 0; cursor:pointer;
  font-family:inherit; color:var(--ink-soft);
  transition:color .3s var(--ease);
}
.jdot{
  position:relative; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--card); border:2.5px solid rgba(23,105,75,.22);
  box-shadow:var(--e1);
  font-family:'Poppins',system-ui,sans-serif; font-weight:700; font-size:1rem;
  color:var(--ink-soft);
  transition:transform .42s var(--spring), background .3s var(--ease),
             border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.jlab{
  font-size:.86rem; font-weight:600; line-height:1.25; text-align:center;
  max-width:13ch; transition:color .3s var(--ease);
}

.jnode:hover .jdot{ transform:translateY(-3px) scale(1.06); border-color:var(--green); box-shadow:var(--e2) }

.jnode.done .jdot{ background:var(--green-tint); border-color:var(--green); color:var(--green-deep) }
.jnode.done .jdot::after{
  content:"✓"; position:absolute; inset:0; display:grid; place-items:center;
  background:var(--green); color:#fff; border-radius:50%; font-size:1.1rem;
}

.jnode.on{ color:var(--green-deep) }
.jnode.on .jdot{
  background:var(--green); border-color:var(--green); color:#fff;
  transform:scale(1.18); box-shadow:0 0 0 7px rgba(23,105,75,.13), var(--e3);
}
.jnode.on .jlab{ color:var(--green-deep); font-weight:700 }

/* The quiet pulse on "you are here". Slow enough to read as presence, not
   as an alarm — this is somebody's house. */
.jnode.on .jdot::before{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:2px solid var(--green); opacity:.55;
  
}


/* Phone: the track becomes a swipeable rail. */
@media(max-width:720px){
  .journey{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
            -webkit-overflow-scrolling:touch; padding-bottom:10px; margin-inline:-20px; padding-inline:20px }
  .journey::-webkit-scrollbar{ display:none }
  .journey{ scrollbar-width:none }
  .jnodes{ grid-template-columns:repeat(6,minmax(104px,1fr)); min-width:640px }
  .jrail{ min-width:640px; left:0; right:0; width:auto;
          margin-inline:calc(640px/12) ; max-width:none }
  .jnode{ scroll-snap-align:center }
}
/* A soft fade off the right edge, so it is visible that the track continues.
   A rail that silently runs off-screen just looks cut off. */
@media(max-width:720px){
  .stage-box{ position:relative }
  .stage-box::after{
    content:""; position:absolute; top:0; right:0; width:34px; height:100%;
    pointer-events:none; border-radius:0 var(--r-l) var(--r-l) 0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.92));
  }
}

/* ── The stage panel ─────────────────────────────────────────────────── */
.stage-detail{ border-top:0 !important; margin-top:26px !important; padding-top:0 !important }
.stage-detail.show{ animation:none }
/* The stage panel used to be its own bordered, shadowed card sitting
   inside the stage card. A box inside a box is the thing the flat style
   exists to get rid of — it reads as two competing surfaces and makes the
   content feel further away. It sits directly on the card now, separated
   by a hairline and whitespace, which is how the reference deck does it. */
.jpanel-in{
  background:none; border:0; border-radius:0; box-shadow:none;
  border-top:1px solid var(--rule-soft);
  padding:28px 0 4px; margin-top:4px;
}
.jpanel-in > *{ opacity:0; transform:translateY(10px); animation:jrise .5s var(--ease) forwards }
.jpanel-in > *:nth-child(1){ animation-delay:.04s } .jpanel-in > *:nth-child(2){ animation-delay:.09s }
.jpanel-in > *:nth-child(3){ animation-delay:.14s } .jpanel-in > *:nth-child(4){ animation-delay:.19s }
.jpanel-in > *:nth-child(5){ animation-delay:.24s } .jpanel-in > *:nth-child(6){ animation-delay:.29s }
@keyframes jrise{ to{ opacity:1; transform:none } }

.jwhere{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:12px;
  font-size:.74rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--green-deep); background:var(--green-tint);
  border:1px solid rgba(23,105,75,.2); padding:6px 13px; border-radius:99px;
}
.jwhere .pip{ width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 1px rgba(23,105,75,.35); }


.chip{ border-radius:99px; box-shadow:var(--e1); font-size:.8rem; padding:6px 13px }
.chip.time{ color:#765718 }
.opts li{ padding-left:30px }
.opts li::before{ content:"→"; transition:transform .25s var(--spring); display:inline-block }
.opts li:hover::before{ transform:translateX(4px) }

.jnav{ display:flex; gap:10px; align-items:center; margin-top:18px; flex-wrap:wrap }
.jstep-btn{
  display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.8);
  border:1.5px solid var(--line); border-radius:99px; padding:10px 17px; min-height:46px;
  font-family:inherit; font-weight:600; font-size:.94rem; color:var(--ink); cursor:pointer;
  transition:transform .24s var(--spring), border-color .2s, box-shadow .24s var(--ease);
}
.jstep-btn:hover{ transform:translateY(-2px); border-color:var(--green); box-shadow:var(--e2) }
.jstep-btn[disabled]{ opacity:.35; cursor:default; transform:none !important; box-shadow:none }

/* ════════════════════════════════════════════════════════════════════════
   THE DEADLINE PROJECTOR
   ════════════════════════════════════════════════════════════════════════ */
.dl-hero{
  margin:22px 0 6px; padding:28px 26px; border-radius:var(--r-l); text-align:center;
  background:linear-gradient(165deg,var(--green-deep),#0b3a29); color:#EAF2ED;
  box-shadow:var(--e3); position:relative; overflow:hidden;
}
.dl-hero::after{
  content:""; position:absolute; inset:-40% -20% auto auto; width:320px; height:320px;
  background:radial-gradient(circle,rgba(159,217,190,.26),transparent 68%);
}
.dl-hero .k{ position:relative; font-size:.74rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:#9FD9BE; margin-bottom:6px }
.dl-num{ position:relative; font-family:'Poppins',system-ui,sans-serif; font-weight:800;
  font-size:clamp(3rem,13vw,5rem); line-height:1; color:#fff; letter-spacing:-.02em }
.dl-unit{ position:relative; font-size:1.05rem; color:#CFE6DA; margin-top:4px }
.dl-hero.urgent{ background:linear-gradient(165deg,#8E2B23,#6d201a) }
.dl-hero.urgent .k{ color:#F3C9C3 } .dl-hero.urgent .dl-unit{ color:#F0D4CF }

.dl-line{ position:relative; margin:24px 0 6px; padding-left:38px }
.dl-line::before{
  content:""; position:absolute; left:14px; top:6px; bottom:6px; width:3px; border-radius:2px;
  background:linear-gradient(180deg,var(--green),rgba(23,105,75,.18));
}
.dl-item{ position:relative; padding:14px 0 16px; opacity:0; transform:translateX(-10px);
  animation:dlin .5s var(--ease) forwards }
@keyframes dlin{ to{ opacity:1; transform:none } }
.dl-item::before{
  content:""; position:absolute; left:-30px; top:20px; width:15px; height:15px; border-radius:50%;
  background:var(--card); border:3px solid var(--green); box-shadow:var(--e1);
}
.dl-item.hard::before{ background:var(--red); border-color:var(--red) }
.dl-item.hard .dl-when{ color:var(--red); font-weight:800 }
.dl-when{ display:block; font-family:'Poppins',system-ui,sans-serif; font-weight:700;
  font-size:1.02rem; color:var(--green-deep); margin-bottom:2px }
.dl-what{ display:block; font-weight:600; margin-bottom:3px }
.dl-note{ display:block; font-size:.92rem; color:var(--ink-soft); max-width:58ch }
.dl-tag{ display:inline-block; margin-left:8px; font-size:.7rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; background:var(--red-tint); color:var(--red);
  border-radius:99px; padding:3px 9px; vertical-align:middle }

/* ── Honour the setting. Everything above still works, it just arrives. ─ */
@media(prefers-reduced-motion:reduce){
  .rv{ opacity:1 !important; transform:none !important }
  .jfill{ transition:none }
  .jnode.on .jdot::before,.jwhere .pip{ animation:none }
  .jpanel-in > *,.dl-item{ opacity:1 !important; transform:none !important; animation:none !important }
  .tool:hover,.sit-card:hover,.btn:hover,.listen:hover,.a11y button:hover{ transform:none !important }
}

/* The projector prints a calendar, not a short form — give it room. */
#view-timeline .panel{ max-width:780px }

/* ════════════════════════════════════════════════════════════════════════
   The team picker. index.html and surplus.html carried their own copies of
   these rules; loan-modification.html had none, which is why its call bar
   had nowhere to go. Defined once here for every page.
   ════════════════════════════════════════════════════════════════════════ */
.call-modal{
  position:fixed; inset:0; z-index:300; display:none;
  align-items:flex-end; justify-content:center;
  background:rgba(12,32,24,.5);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.call-modal.show{ display:flex; animation:cmfade .25s var(--ease) }
@keyframes cmfade{ from{opacity:0} to{opacity:1} }
.call-card{
  background:var(--glass-strong); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  width:min(480px,100%); border-radius:var(--r-xl) var(--r-xl) 0 0;
  border:1px solid var(--glass-brd); border-bottom:0;
  padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -18px 60px rgba(10,30,22,.3);
  animation:cmup .34s var(--spring);
  max-height:calc(100dvh - 24px); overflow-y:auto;
}
@keyframes cmup{ from{transform:translateY(40px)} to{transform:none} }
@media(min-width:620px){
  .call-modal{ align-items:center }
  .call-card{ border-radius:var(--r-xl); border-bottom:1px solid var(--glass-brd) }
}
.call-head{
  display:flex; align-items:center; justify-content:space-between;
  font-family:'Poppins',system-ui,sans-serif; font-weight:700; font-size:1.2rem;
  color:var(--ink); margin-bottom:15px;
}
.call-x{ background:none; border:0; font-size:1.8rem; line-height:1; color:var(--ink-soft);
  cursor:pointer; padding:0 6px; border-radius:8px; transition:color .2s, background .2s }
.call-x:hover{ color:var(--ink); background:rgba(0,0,0,.05) }
.call-row{
  display:flex; align-items:center; gap:13px; padding:14px;
  border:1.5px solid var(--line); border-radius:var(--r-m); margin-bottom:10px;
  background:rgba(255,255,255,.75); color:var(--ink); text-decoration:none; min-height:62px;
  transition:transform .24s var(--spring), border-color .2s, background .2s, box-shadow .24s var(--ease);
}
.call-row:hover,.call-row:focus-visible{
  transform:translateY(-2px); border-color:var(--green);
  background:var(--green-tint); text-decoration:none; box-shadow:var(--e2); outline:none;
}
.call-row .av{
  flex:none; width:46px; height:46px; border-radius:50%;
  background:linear-gradient(145deg,var(--green),#12543c); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Poppins',system-ui,sans-serif; font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), var(--e1);
}
.call-row .who b{ display:block; font-size:1rem }
.call-row .who span{ font-size:.9rem; color:var(--ink-soft) }
.call-row .num{ margin-left:auto; font-weight:700; color:var(--green); font-size:.95rem; white-space:nowrap }
.call-row .who{ min-width:0; overflow-wrap:anywhere }
.call-x{ min-width:44px; min-height:44px; flex-shrink:0 }
.call-row:focus-visible{ outline:3px solid var(--green); outline-offset:3px }
body.ktp-dialog-open{ overflow:hidden }
@media(max-width:430px){
  .call-row{ flex-wrap:wrap; gap:8px 12px }
  .call-row .who{ flex:1 1 calc(100% - 62px) }
  .call-row .num{ margin-left:58px }
}
.call-note{ font-size:.9rem; color:var(--ink-soft); text-align:center; margin-top:10px }

/* The call bar's button is a <button> now, not a link — it opens the picker
   so every caller can reach the right person. Keep it looking identical. */
.callbar .cb-call{ cursor:pointer; font-family:inherit }

/* ════════════════════════════════════════════════════════════════════════
   THE WALK-AWAY CALCULATOR
   Three futures priced side by side and redrawn under the thumb. The bars
   are the argument: for most people the gap between "auction" and "sell
   first" is tens of thousands of dollars, and nobody has ever shown it to
   them on their own numbers.
   ════════════════════════════════════════════════════════════════════════ */
.calcwrap{ max-width:820px }
.calc-grid{ display:grid; gap:20px; margin-bottom:8px }
.calc-in label{ display:block; font-weight:600; margin-bottom:9px }
.calc-row{ display:flex; align-items:center; gap:16px }

.calc-range{
  -webkit-appearance:none; appearance:none; flex:1; height:10px; border-radius:99px;
  background:linear-gradient(90deg,var(--green) 0 var(--p,30%),rgba(23,105,75,.14) var(--p,30%) 100%);
  outline:none; cursor:pointer; min-height:0; padding:0; border:0;
}
.calc-range:focus-visible{ box-shadow:0 0 0 4px rgba(23,105,75,.2) }
/* 34px thumb: this gets dragged with a thumb, often an older one. */
.calc-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:34px; height:34px; border-radius:50%;
  background:linear-gradient(145deg,#fff,#eef4f0); border:2.5px solid var(--green);
  box-shadow:var(--e2); cursor:grab;
  transition:transform .18s var(--spring), box-shadow .18s var(--ease);
}
.calc-range::-webkit-slider-thumb:active{ transform:scale(1.14); cursor:grabbing; box-shadow:var(--e3) }
.calc-range::-moz-range-thumb{
  width:34px; height:34px; border-radius:50%; background:#fff;
  border:2.5px solid var(--green); box-shadow:var(--e2); cursor:grab;
}
.calc-out{
  flex:none; min-width:122px; text-align:right;
  font-family:'Poppins',system-ui,sans-serif; font-weight:800;
  font-size:1.18rem; color:var(--green-deep); font-variant-numeric:tabular-nums;
}

.calc-verdict{
  margin:26px 0 22px; padding:24px 26px; border-radius:var(--r-l); text-align:center;
  background:linear-gradient(165deg,var(--green-deep),#0b3a29); color:#EAF2ED;
  box-shadow:var(--e3); position:relative; overflow:hidden;
}
.calc-verdict::after{
  content:""; position:absolute; inset:-45% -25% auto auto; width:300px; height:300px;
  background:radial-gradient(circle,rgba(159,217,190,.22),transparent 70%);
}
.calc-verdict.tight{ background:linear-gradient(165deg,#6B4E10,#4d3809) }
.cv-k{ position:relative; display:block; font-size:.72rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:#9FD9BE; margin-bottom:6px }
.calc-verdict.tight .cv-k{ color:#E8D4A0 }
.cv-n{ position:relative; display:block; font-family:'Poppins',system-ui,sans-serif;
  font-weight:800; font-size:clamp(2.2rem,9vw,3.6rem); line-height:1.05; color:#fff;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.cv-s{ position:relative; display:block; margin:10px auto 0; max-width:50ch;
  font-size:.98rem; color:#CFE6DA; line-height:1.55 }
.calc-verdict.tight .cv-s{ color:#EDE0C2 }

.calc-bars{ display:grid; gap:18px; margin-bottom:22px }
.cbar-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px }
.cbar-head b{ font-family:'Poppins',system-ui,sans-serif; font-size:1.02rem }
.cbar-amt{ font-family:'Poppins',system-ui,sans-serif; font-weight:800; font-size:1.3rem;
  color:var(--green-deep); font-variant-numeric:tabular-nums }
.cbar-track{ height:17px; border-radius:99px; background:rgba(23,105,75,.10); overflow:hidden }
.cbar-fill{ height:100%; width:0; border-radius:99px; transition:width .55s var(--ease) }
.cbar-fill.auction{ background:linear-gradient(90deg,#A8352C,#c2473d) }
.cbar-fill.sell{ background:linear-gradient(90deg,var(--green),#2fa173) }
.cbar-fill.keep{ background:linear-gradient(90deg,var(--gold),#ddb964) }
.cbar-note{ margin-top:8px; font-size:.93rem; color:var(--ink-soft); line-height:1.55; max-width:64ch }
.cbar[data-k="auction"] .cbar-amt{ color:var(--red) }
.cbar[data-k="keep"] .cbar-amt{ color:#765718 }

@media(max-width:560px){
  .calc-row{ flex-wrap:wrap }
  .calc-out{ min-width:0; width:100%; text-align:left; order:-1; font-size:1.35rem }
}
@media(prefers-reduced-motion:reduce){ .cbar-fill{ transition:none } }

/* The nav at an 18px root. Every link was wrapping to two lines: they are
   flex items with no nowrap, and the accessibility layer raised the base
   size under them. Nowrap, tighter gaps, and they collapse to the two
   contact buttons once there is genuinely no room — the footer and the
   tool cards carry the same links. */
.nav-links{ gap:2px }
.nav-links a{ white-space:nowrap; padding:8px 10px; flex-shrink:0 }
header .nav-links{ min-width:0; max-width:calc(100% - 220px); overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--green) var(--green-tint) }
.nav-links button.cta,.nav-links button.cta-text{ white-space:nowrap }
/* At narrow widths keep every destination reachable in a scrollable row.
   Do not remove the links and make visitors hunt through the footer. */
@media(max-width:1340px){
  header .nav,header.condensed .nav{ height:auto; min-height:64px; flex-wrap:wrap; gap:12px; padding-top:14px; padding-bottom:10px }
  header .nav-links{ flex:0 0 100%; min-width:0; max-width:100%; overflow-x:auto; padding:3px 3px 8px; scrollbar-width:thin; scrollbar-color:var(--green) var(--green-tint) }
  header .nav-links a:not(.cta),html[lang="es"] header .nav-links a:not(.cta){ display:block; flex-shrink:0; min-height:44px; font-size:.9rem; padding:8px 12px }
  header .nav-links button{ flex-shrink:0; min-height:44px }
  #find-stage{ scroll-margin-top:150px }
}

/* The language toggle sits with text size and read-aloud. It belongs there:
   it is the same kind of control — it decides whether this person can use
   the page at all. */
.langtog{
  min-height:44px; padding:0 16px; border-radius:var(--r-s);
  border:1.5px solid var(--green); background:var(--card); color:var(--green-deep);
  font-family:inherit; font-weight:700; font-size:.95rem; cursor:pointer;
  transition:transform .22s var(--spring), box-shadow .22s var(--ease), background .18s;
}
.langtog:hover{ transform:translateY(-1px); box-shadow:var(--e2); background:var(--green-tint) }
.langtog:active{ transform:translateY(0) scale(.98) }
select.langtog{ padding-right:10px }
@media(max-width:560px){ .langtog{ flex:1 1 auto } }

/* Spanish runs about 20–25% longer than English, which pushed the nav 235px
   past its container and gave the whole page a horizontal scrollbar. Smaller
   links in Spanish, and they collapse to the contact buttons earlier — the
   footer and the tool cards carry the same destinations either way. */
html[lang="es"] .nav-links a{ font-size:.82rem; padding:8px 7px }
html[lang="es"] .nav-links button.cta,
html[lang="es"] .nav-links button.cta-text{ font-size:.84rem; padding:8px 12px }

/* The header's container is capped at 1040px, so no viewport width makes the
   full Spanish link row fit — widen the header (and only the header) and let
   it use the screen it actually has. */
header .wrap{ max-width:1280px }

/* On a phone the two Spanish contact buttons alone overflowed the viewport. */
@media(max-width:430px){
  html[lang="es"] .nav-links button.cta,
  html[lang="es"] .nav-links button.cta-text{ font-size:.78rem; padding:8px 9px }
  html[lang="es"] .brand .wm-2{ font-size:1.02rem }
}

/* The proof strip. Quiet, factual, and it shows only what has been filled
   in — see PROOF in ktp-ui.js. */
.proof{ display:flex; flex-wrap:wrap; gap:10px 26px; margin:26px 0 4px;
  padding:16px 20px; border-radius:var(--r-m);
  background:rgba(255,255,255,.6); border:1px solid rgba(231,222,203,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
.proof:empty{ display:none }
.proof-item{ display:flex; align-items:center; gap:9px;
  font-size:.95rem; font-weight:600; color:var(--ink) }
.proof-ico{ font-size:1.05rem; line-height:1 }
@media(max-width:560px){ .proof{ gap:12px 18px; padding:14px 16px } .proof-item{ font-size:.92rem } }

/* ════════════════════════════════════════════════════════════════════════
   THE VERIFICATION BLOCK
   The competing site says "verify me". This says "here is how to verify
   anybody who contacts you about your foreclosure, and here is our
   information so you can start with us." Same trust mechanism, pointed at
   the homeowner's actual problem instead of at our reputation.
   ════════════════════════════════════════════════════════════════════════ */
.verify{
  background:linear-gradient(170deg,rgba(255,255,255,.95),rgba(246,241,231,.9));
  border:1px solid rgba(231,222,203,.95); border-left:5px solid var(--gold);
  border-radius:var(--r-l); padding:34px; margin:0 0 46px; box-shadow:var(--e2);
}
.verify .eyebrow{ display:block; font-size:.74rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:#765718; margin-bottom:10px }
.verify h2{ font-family:'Poppins',system-ui,sans-serif; font-size:1.5rem;
  color:var(--ink); margin-bottom:10px; line-height:1.25 }
.verify .lede{ color:var(--ink-soft); max-width:68ch; margin-bottom:22px }

.vsteps{ list-style:none; counter-reset:v; display:grid; gap:14px; margin:0 0 26px; padding:0 }
.vsteps li{
  counter-increment:v; position:relative; padding:16px 18px 16px 58px;
  background:rgba(255,255,255,.75); border:1px solid rgba(231,222,203,.9);
  border-radius:var(--r-m); transition:transform .28s var(--spring), box-shadow .28s var(--ease);
}
.vsteps li:hover{ box-shadow:var(--e1); border-color:rgba(201,162,74,.5) }
.vsteps li::before{
  content:counter(v); position:absolute; left:16px; top:16px;
  width:28px; height:28px; border-radius:50%;
  background:var(--gold); color:#3a2a06; display:grid; place-items:center;
  font-family:'Poppins',system-ui,sans-serif; font-weight:800; font-size:.92rem;
}
.vsteps li b{ display:block; font-family:'Poppins',system-ui,sans-serif;
  font-size:1.02rem; color:var(--ink); margin-bottom:4px; line-height:1.35 }
.vsteps li span{ display:block; font-size:.95rem; color:var(--ink-soft); line-height:1.6; max-width:66ch }

.vcard{ background:var(--green-deep); color:#EAF2ED; border-radius:var(--r-m); padding:26px 28px }
.vcard h3{ font-family:'Poppins',system-ui,sans-serif; color:#fff; font-size:1.18rem; margin-bottom:16px }
.vfacts{ display:grid; grid-template-columns:auto 1fr; gap:10px 20px; margin:0 }
.vfacts dt{ font-weight:700; color:#9FD9BE; white-space:nowrap; font-size:.93rem }
.vfacts dd{ margin:0; color:#D5E4DB; font-size:.95rem; line-height:1.55 }
.vfacts dd a{ color:#fff; text-decoration:underline; text-underline-offset:3px }
.vfacts em{ color:#fff; font-style:normal; font-weight:700 }
.vmore:empty{ display:none }
.vmore{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.18);
  display:flex; flex-wrap:wrap; gap:10px }
.vmore a{ display:inline-flex; align-items:center; gap:8px; min-height:46px;
  padding:10px 16px; border-radius:99px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3); color:#fff; font-weight:600; font-size:.93rem;
  text-decoration:none; transition:transform .22s var(--spring), background .2s }
.vmore a:hover{ transform:translateY(-2px); background:rgba(255,255,255,.2); text-decoration:none }

@media(max-width:620px){
  .verify{ padding:26px 20px }
  .vfacts{ grid-template-columns:1fr; gap:3px 0 }
  .vfacts dd{ margin-bottom:12px }
}
.vfacts dt.vnot{ color:#F3C9C3 }
.vlinks{ margin-top:8px; display:flex; flex-wrap:wrap; gap:14px }
.vlinks a{ font-weight:700; font-size:.92rem; text-decoration:underline; text-underline-offset:3px }

/* The header is sticky, so anything scrolled to by an anchor or by
   scrollIntoView lands underneath it. Give everything scrollable-to enough
   margin to clear the header plus the accessibility strip. */
section,main,.panel,.stage-box,.verify,.cost,[id]{ scroll-margin-top:112px }

/* ── "Show the breakdown" ────────────────────────────────────────────────
   Borrowed from Karim's listing deck, and it earns its place here: a number
   a homeowner cannot check is a number they are being asked to take on
   faith, which is the one thing this whole site tells them not to do. */
.brk{ margin:0 0 22px; border:1px solid rgba(231,222,203,.95); border-radius:var(--r-m);
  background:rgba(255,255,255,.7); overflow:hidden }
.brk summary{
  cursor:pointer; list-style:none; padding:15px 20px; min-height:54px;
  display:flex; align-items:center; gap:10px;
  font-family:'Poppins',system-ui,sans-serif; font-weight:700; font-size:1rem;
  color:var(--green-deep); transition:background .2s;
}
.brk summary::-webkit-details-marker{ display:none }
.brk summary::before{
  content:""; width:9px; height:9px; flex:none;
  border-right:2.5px solid var(--green); border-bottom:2.5px solid var(--green);
  transform:rotate(-45deg); transition:transform .28s var(--spring); margin-left:3px;
}
.brk[open] summary::before{ transform:rotate(45deg) }
.brk summary:hover{ background:var(--green-tint) }
.brk-body{ display:grid; grid-template-columns:1fr 1fr; gap:0 28px;
  padding:4px 20px 20px; border-top:1px solid rgba(231,222,203,.8) }
.brk-col h4{ font-family:'Poppins',system-ui,sans-serif; font-size:.95rem;
  color:var(--ink); margin:16px 0 8px }
.brk-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:7px 0; font-size:.92rem; color:var(--ink-soft);
  border-bottom:1px dashed rgba(231,222,203,.9) }
.brk-row b{ font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap }
.brk-row.sub{ color:var(--ink) } .brk-row.sub b{ font-weight:800 }
.brk-row.tot{ border-bottom:0; border-top:2px solid var(--green); margin-top:4px;
  padding-top:11px; font-weight:700; color:var(--ink) }
.brk-row.tot b{ font-family:'Poppins',system-ui,sans-serif; font-size:1.15rem; color:var(--green-deep) }
@media(max-width:620px){ .brk-body{ grid-template-columns:1fr; gap:0 } }
@media(prefers-reduced-motion:reduce){ .brk summary::before{ transition:none } }

/* The bar is two actions now, Call and Text, each opening its own list of
   people. The number came off it: a bar that dials one person makes the
   other two invisible, and a surplus caller needs LaVarr, not whoever is
   hardcoded. */
.callbar .cb-text{
  background:transparent; color:#fff; border:2px solid rgba(255,255,255,.55);
  cursor:pointer; font-family:inherit;
}
.callbar .cb-text:hover{ background:rgba(255,255,255,.12) }

/* Section rules. The reference deck separates with a hairline and air
   rather than by boxing everything, so the few boxes that remain mean
   something. */
.tools,.situations,.verify,.cost{ position:relative }
.situations::before,.verify::before{
  content:""; display:block; height:1px; background:var(--rule-soft);
  margin:0 0 42px;
}
@media(max-width:620px){ .situations::before,.verify::before{ margin-bottom:30px } }