/* ============================================================================
   site.css — one stylesheet for every page. No external requests: fonts are
   self-hosted in assets/fonts, every image is a local SVG in assets/img.
   Palette follows the reference template in ref/: deep teal, warm gold,
   sage, off-white. Pages are generated by tools/build.py; edit the templates
   there, not the HTML at the repo root.
   ============================================================================ */

/* Subset fonts. The weight axes are narrowed to the range the site actually
   uses (serif 600-700, sans 400-800), which cut 47KB from the payload without
   losing a single codepoint or the optical-size axis. If you ever style
   something outside these ranges the browser will clamp it, so widen the
   range and re-subset rather than wondering why 400 looks bold. */
@font-face{font-family:"Source Serif 4";src:url(fonts/source-serif-4-latin.woff2) format("woff2");font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url(fonts/public-sans-latin.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}

/* ----------------------------------------------------------------------------
   Metric-matched fallback for the body font.

   With font-display:swap the page first paints in a system font and reflows
   when the webfont arrives. Measured across three pages, that reflow moved the
   bottom of the document by 191px in total — content shifting under someone
   who has already started reading.

   size-adjust scales the fallback's advances so its line breaks land where the
   webfont's do. 103.5% was found by sweeping values and measuring the residual
   shift, not computed from xAvgCharWidth: that field is not comparable across
   these fonts, since Liberation Sans reports 1187 where metrically identical
   Arial reports 913. The sweep took the total from 191px to 48px.

   The ascent/descent overrides are the webfont's own metrics and are relative
   to the font size, so they hold whichever system font answers local().

   There is deliberately no equivalent face for the display serif. One was
   built and measured, and it changed the rendering by exactly zero pixels:
   every heading here sets a unitless line-height, so the line box comes from
   the CSS and never from the font's ascent and descent. Adding a size-adjust
   for it would need Georgia's advance widths, which cannot be measured on this
   machine, so it would be a guess replacing a known shift with an unknown one.

   If local() finds nothing the face is skipped and the stack behaves exactly
   as it did before, so this can only help or do nothing.
   ---------------------------------------------------------------------------- */
@font-face{font-family:"Public Sans Fallback";src:local("Arial"),local("Liberation Sans");size-adjust:103.5%;ascent-override:90.63%;descent-override:21.47%;line-gap-override:0%}

:root{
  color-scheme:light;
  --bg:#FAFAF7;
  --paper:#FFFFFF;
  --ink:#0E1A1B;
  --ink-2:#304446;
  --ink-3:#556a6b;
  --rule:#DDE2D6;
  --rule-2:#C3CBBB;
  --teal:#224142;
  --teal-2:#2E5A5D;
  --teal-3:#3F7174;
  --teal-deep:#172D2F;
  --teal-tint:#E8EFEC;
  --sage:#C7CEBC;
  --sage-2:#E4E8DC;
  --sage-3:#F1F3EC;
  --gold:#C6A767;
  --gold-2:#E3CD98;
  --gold-ink:#86662A;
  --leaf:#5E9163;
  --on-dark:#F4F6F1;
  --on-dark-2:#B9C8C4;
  --shadow-sm:0 1px 2px rgba(14,26,27,.06),0 4px 14px -6px rgba(14,26,27,.14);
  --shadow:0 2px 4px rgba(14,26,27,.05),0 24px 48px -24px rgba(14,26,27,.35);
  --display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Public Sans","Public Sans Fallback","Helvetica Neue",Arial,sans-serif;
  --maxw:1180px;
  --pad:clamp(16px,4vw,40px);
  --r-lg:28px;
  --r:16px;
  --r-sm:10px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--teal-2);text-underline-offset:3px}
a:hover{color:var(--teal)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);line-height:1.15;letter-spacing:-.012em;margin:0 0 .5em;text-wrap:balance}
h1{font-weight:700}
h2{font-size:clamp(28px,3.6vw,42px);font-weight:700}
h3{font-size:clamp(19px,1.8vw,22px);font-weight:650}
h1 em,h2 em{font-style:normal;color:var(--gold-ink)}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em}
strong{font-weight:700;color:var(--ink)}
.shell{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--teal);color:#fff;padding:10px 16px;border-radius:8px}
.skip:focus{left:8px}
.icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------- eyebrow / lead ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-3);margin:0 0 14px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--gold);border-radius:2px}
.lead{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--ink-2);max-width:62ch}
.small{font-size:14px;color:var(--ink-3)}
.center{text-align:center}
.center .lead{margin-inline:auto}
.center .eyebrow::after{content:"";width:22px;height:2px;background:var(--gold);border-radius:2px}

/* ---------- buttons ---------- */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 15px/1 var(--sans);letter-spacing:.01em;padding:15px 24px;border-radius:999px;background:var(--gold);color:var(--teal-deep);text-decoration:none;border:2px solid var(--gold);cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s}
.btn:hover{background:var(--gold-2);border-color:var(--gold-2);color:var(--teal-deep);transform:translateY(-1px)}
.btn .icon{width:18px;height:18px;stroke-width:2.2}
.btn--teal{background:var(--teal);border-color:var(--teal);color:#fff}
.btn--teal:hover{background:var(--teal-2);border-color:var(--teal-2);color:#fff}
.btn--ghost{background:transparent;color:var(--on-dark);border-color:rgba(244,246,241,.45)}
.btn--ghost:hover{background:rgba(244,246,241,.1);border-color:var(--on-dark);color:#fff}
.btn--line{background:transparent;color:var(--teal);border-color:var(--teal)}
.btn--line:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn--block{width:100%}
.textlink{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--teal-2);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px}
.textlink .icon{width:18px;height:18px;transition:transform .15s}
.textlink:hover .icon{transform:translateX(3px)}

/* ---------- header ---------- */
.site-header{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:40}
.site-header .shell{display:flex;align-items:center;gap:24px;min-height:84px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);margin-right:auto;min-width:0;flex:none}
.brand span{white-space:nowrap}
.brand img{width:54px;height:54px}
.brand b{display:block;font-family:var(--display);font-size:19px;font-weight:700;line-height:1.1;letter-spacing:-.01em;color:var(--teal)}
.brand small{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-top:3px}
.mainnav ul{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.mainnav a{display:block;white-space:nowrap;font-family:var(--display);font-weight:650;font-size:16px;color:var(--teal);text-decoration:none;padding:8px 10px;border-radius:8px;position:relative}
.mainnav a::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .2s;transform-origin:left}
.mainnav a:hover{color:var(--gold-ink)}
.mainnav a:hover::after,.mainnav a[aria-current="page"]::after{transform:scaleX(1)}
.mainnav a[aria-current="page"]{color:var(--gold-ink)}
.header-cta{display:flex;align-items:center;gap:10px}
.header-phone{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--sage);color:var(--teal);transition:background .15s,border-color .15s}
.header-phone:hover{background:var(--sage-3);border-color:var(--teal-3);color:var(--teal)}
.header-phone .icon{width:20px;height:20px}
.header-cta .btn{padding:12px 20px;font-size:14.5px}
.navtoggle{display:none;align-items:center;gap:8px;background:none;border:1px solid var(--rule-2);border-radius:999px;padding:10px 16px;font:700 14px/1 var(--sans);color:var(--teal);cursor:pointer}
.navtoggle .icon{width:20px;height:20px}
@media (max-width:1240px){.brand small{display:none}.mainnav a{padding:8px 7px;font-size:15.5px}}
@media (max-width:1080px){
  .brand small{display:block}
  .brand{flex:1 1 0}
  .brand span{white-space:normal}
  .site-header .shell{flex-wrap:wrap;gap:12px;min-height:72px}
  .brand img{width:46px;height:46px}
  .navtoggle{display:inline-flex}
  .header-cta{display:none}
  .mainnav{flex-basis:100%;display:none;padding-bottom:16px}
  .mainnav.is-open{display:block}
  .mainnav ul{flex-direction:column;align-items:stretch;gap:0;border-top:1px solid var(--rule)}
  .mainnav li{border-bottom:1px solid var(--rule)}
  .mainnav a{padding:14px 4px;font-size:17px}
  .mainnav a::after{display:none}
  .mainnav .mobile-only{display:block}
}
.mainnav .mobile-only{display:none}
.mainnav .mobile-only a{color:var(--gold-ink)}
@media (max-width:420px){.brand b{font-size:16px}.brand small{font-size:10px;letter-spacing:.1em}.navtoggle{padding:10px 12px}}

/* ---------- sections ---------- */
.section{padding-block:clamp(64px,8vw,112px)}
.section--tight{padding-block:clamp(40px,5vw,64px)}
.section--tight+.section{padding-top:clamp(24px,3vw,40px)}
.section--sage{background:var(--sage-3)}
.section--white{background:var(--paper)}
.section-head{max-width:760px;margin-bottom:clamp(32px,4vw,52px)}
.section-head.center{margin-inline:auto}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.split--top{align-items:start}
/* When one column is much taller than the other, top-aligning leaves a large
   void under the shorter one. On what-it-costs the gap was 329px. --balance
   centres the short column instead, so the space is shared top and bottom and
   reads as composition rather than as something missing. */
.split--balance{align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ---------- home hero (rounded panel, like the reference) ---------- */
.hero-wrap{padding:22px clamp(10px,1.6vw,22px) 0;background:linear-gradient(var(--paper) 0 60%,var(--bg) 60%)}
.hero{position:relative;border-radius:var(--r-lg);background:var(--teal) url(img/plat-lines.svg) center/cover no-repeat;color:var(--on-dark);overflow:hidden;box-shadow:var(--shadow)}
/* The scrim and the gold light pool were one background on ::before. They are
   split so the gold can move on its own layer without disturbing the plat
   lines or the text. Explicit z-index because ::after would otherwise paint
   over .shell — pseudo-elements are the first and last children, and
   positioned siblings at z-index:auto paint in DOM order. */
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(23,45,47,.92) 0%,rgba(23,45,47,.55) 55%,rgba(23,45,47,.15) 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 70% 90% at 85% 40%,rgba(198,167,103,.20),transparent 60%)}
.hero .shell{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(56px,7vw,96px) clamp(120px,11vw,150px)}
.hero h1{color:#fff;font-size:clamp(36px,5.2vw,62px);line-height:1.06;margin-bottom:22px}
.hero h1 em{color:var(--gold);font-style:normal}
.hero p{color:var(--on-dark);font-size:clamp(16.5px,1.4vw,18.5px);max-width:58ch}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(244,246,241,.1);border:1px solid rgba(227,205,152,.45);color:var(--gold-2);font-size:13px;font-weight:700;letter-spacing:.06em;padding:8px 14px;border-radius:999px;margin-bottom:22px}
.pill .icon{width:16px;height:16px}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 22px}
.hero .assure{font-size:14.5px;color:var(--on-dark-2);border-left:3px solid var(--gold);padding-left:14px;max-width:56ch;margin:0}
.hero .assure strong{color:#fff}
.hero-art{position:relative}
.hero-art img{width:100%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.25))}
@media (max-width:900px){
  .hero .shell{grid-template-columns:1fr;padding-bottom:64px}
  .hero-art{max-width:460px;margin-inline:auto;order:2}
}

/* ---------- proof band: floating card over the hero edge ---------- */
.proof{position:relative;z-index:2;margin-top:-86px}
.proof ul{list-style:none;margin:0 auto;padding:clamp(18px,2.4vw,28px);max-width:1040px;background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
/* Each tile flows naturally: icon and heading at the top, description tight
   underneath it. An earlier version used subgrid to force the four
   descriptions onto one baseline, which did align them — but it sized the
   heading row for two lines, so the single-line tiles ("$0 upfront", "Since
   2021") ended up with their description floating ~30px below the heading,
   visibly detached from it. Proximity beats alignment here: a description
   belongs to its heading, not to the descriptions beside it.

   Fitting every heading on one line would fix both at once, but it cannot be
   done at this size: "Licensed attorney" needs 214px on one line and a tile
   only offers about 166px, so the type would have to drop from 27px to 21px.
   These four numbers are the proof band; shrinking them by a fifth to tidy a
   baseline is the wrong trade. */
.proof li{display:flex;gap:14px;align-items:flex-start;padding:10px 12px}
.proof li+li{border-left:1px solid var(--rule)}
.proof .icon{width:34px;height:34px;color:var(--leaf);stroke-width:1.6;margin-top:2px}
.proof b{display:block;font-family:var(--display);font-size:clamp(22px,2.2vw,27px);line-height:1.05;color:var(--teal);font-weight:700;letter-spacing:-.01em}
.proof span{display:block;font-size:13.5px;line-height:1.45;color:var(--ink-3);margin-top:5px}
@media (max-width:900px){
  .proof{margin-top:24px}
  .proof ul{grid-template-columns:1fr 1fr}
  .proof li+li{border-left:0}
  .proof li:nth-child(n+3){border-top:1px solid var(--rule)}
  .proof li:nth-child(even){border-left:1px solid var(--rule)}
}
@media (max-width:520px){
  .proof ul{grid-template-columns:1fr}
  .proof li:nth-child(even){border-left:0}
  .proof li+li{border-top:1px solid var(--rule)}
}

/* ---------- explainer diagram ---------- */
.diagram{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:clamp(20px,3vw,32px);box-shadow:var(--shadow-sm);margin:0}
.diagram h3{font-size:18px;margin-bottom:4px}
.diagram .sub{font-size:14px;color:var(--ink-3);margin-bottom:22px}
.bar{display:flex;height:64px;border-radius:12px;overflow:hidden;margin-bottom:14px}
.bar>div{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;text-align:center;padding:0 8px;line-height:1.2}
.bar .debt{flex:40;background:var(--teal);color:#fff}
.bar .costs{flex:9;background:repeating-linear-gradient(135deg,var(--sage) 0 6px,var(--sage-2) 6px 12px);color:var(--teal)}
.bar .left{flex:56;background:var(--gold);color:var(--teal-deep)}
.bar-scale{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-bottom:22px}
.legend{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.legend li{display:grid;grid-template-columns:16px 1fr;gap:12px;font-size:15px;color:var(--ink-2)}
.legend i{width:16px;height:16px;border-radius:4px;margin-top:4px}
.legend .k-debt{background:var(--teal)}
.legend .k-costs{background:repeating-linear-gradient(135deg,var(--sage) 0 3px,var(--sage-2) 3px 6px);border:1px solid var(--sage)}
.legend .k-left{background:var(--gold)}
.diagram figcaption{font-size:13px;color:var(--ink-3);margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
.kicker-line{font-family:var(--display);font-size:clamp(20px,2vw,24px);font-weight:700;color:var(--teal);margin-top:6px}

/* ---------- do / are-not cards ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:860px){.duo{grid-template-columns:1fr}}
.card{background:var(--paper);border-radius:var(--r);padding:clamp(24px,3vw,36px);border:1px solid var(--rule)}
.card--sage{background:var(--sage);border-color:var(--sage)}
.card--dark{background:var(--teal);border-color:var(--teal);color:var(--on-dark)}
.card--dark h3,.card--dark strong{color:#fff}
.card h3{font-size:clamp(22px,2.2vw,27px)}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.ticks li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.ticks .icon{width:26px;height:26px;padding:4px;border-radius:50%;background:var(--sage-2);color:var(--teal);stroke-width:2.4;margin-top:1px}
.card--dark .ticks .icon{background:rgba(198,167,103,.2);color:var(--gold)}
.card--dark .ticks li{color:var(--on-dark)}

/* ---------- feature grid (what you receive) ---------- */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1000px){.features{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.features{grid-template-columns:1fr}}
.feature{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:26px 24px;transition:transform .2s,box-shadow .2s}
.feature:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.feature h3{font-size:19px;margin:16px 0 8px}
.feature p{font-size:15px;color:var(--ink-2);margin:0}
.tile{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--sage);color:var(--teal)}
.tile .icon{width:26px;height:26px}
.feature--intro{background:var(--teal);border-color:var(--teal);color:var(--on-dark);display:flex;flex-direction:column;justify-content:space-between}
.feature--intro h3{color:#fff;font-size:24px;margin-top:0}
.feature--intro p{color:var(--on-dark-2)}
.feature--intro .textlink{color:var(--gold-2);margin-top:20px;align-self:flex-start}

/* ---------- 4-step process (icon tiles like the reference) ---------- */
.steps4{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px);position:relative;counter-reset:s}
.steps4::before{content:"";position:absolute;top:36px;left:12%;right:12%;height:2px;background:repeating-linear-gradient(90deg,var(--sage) 0 8px,transparent 8px 16px)}
.steps4 li{position:relative;text-align:center}
.steps4 .tile{width:72px;height:72px;border-radius:18px;background:var(--teal);color:var(--gold-2);box-shadow:0 0 0 8px var(--bg)}
.section--sage .steps4 .tile{box-shadow:0 0 0 8px var(--sage-3)}
.steps4 .tile .icon{width:34px;height:34px;stroke-width:1.6}
.steps4 .n{display:block;font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:18px 0 6px}
.steps4 h3{font-size:20px;margin-bottom:10px}
.steps4 p{font-size:15px;color:var(--ink-2);text-align:left;margin:0}
@media (max-width:960px){.steps4{grid-template-columns:1fr 1fr;row-gap:44px}.steps4::before{display:none}}
@media (max-width:560px){.steps4{grid-template-columns:1fr}.steps4 li{text-align:left;display:grid;grid-template-columns:72px 1fr;column-gap:18px}.steps4 .tile{grid-row:span 3}.steps4 .n{margin-top:4px}}

/* ---------- contact strip (like the reference "text start" band) ---------- */
.strip{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:center;max-width:980px;margin:0 auto;padding:clamp(22px,3vw,32px);border-radius:var(--r);background:var(--paper);border:1px solid var(--rule);box-shadow:var(--shadow-sm)}
.strip .tile{width:76px;height:76px;border-radius:16px;background:var(--teal);color:var(--gold-2)}
.strip .tile .icon{width:36px;height:36px}
.strip .label{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 4px}
.strip .big{font-family:var(--display);font-size:clamp(24px,2.8vw,32px);font-weight:700;line-height:1.1;color:var(--teal);margin:0}
.strip .big a{color:inherit;text-decoration:none}
.strip p.note{font-size:14.5px;color:var(--ink-2);margin:0}
@media (max-width:760px){.strip{grid-template-columns:auto 1fr}.strip p.note{grid-column:1/-1}}

/* ---------- ledger (worked example) ---------- */
.ledger{background:var(--paper);border-radius:var(--r);border:1px solid var(--rule);box-shadow:var(--shadow);overflow:hidden}
.ledger header{background:var(--teal);color:var(--on-dark);padding:20px 26px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.ledger header h3{color:#fff;font-size:19px;margin:0}
.ledger header span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2)}
.ledger dl{margin:0;padding:8px 26px}
.ledger dl>div{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px dashed var(--rule-2)}
.ledger dl>div:last-child{border-bottom:0}
.ledger dt{color:var(--ink-2)}
.ledger dd{margin:0;font-family:var(--display);font-weight:700;font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ledger .you dd{color:var(--leaf);font-size:24px}
.ledger .split-bar{display:flex;height:14px;margin:0 26px 8px;border-radius:99px;overflow:hidden}
.ledger .split-bar i{display:block}
.ledger .split-bar .a{flex:70;background:var(--leaf)}
.ledger .split-bar .b{flex:30;background:var(--gold)}
.ledger .split-key{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-3);padding:0 26px 18px}
.ledger footer{background:var(--sage-3);padding:16px 26px;font-size:13.5px;color:var(--ink-2);border-top:1px solid var(--rule)}
.costlist{list-style:none;margin:24px 0;padding:0;display:grid;gap:16px}
.costlist li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.costlist .tile{width:44px;height:44px;border-radius:10px}
.costlist .tile .icon{width:22px;height:22px}

/* ---------- rights cards ---------- */
.rights{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:960px){.rights{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.rights{grid-template-columns:1fr}}
.right{background:var(--paper);border:1px solid var(--rule);border-top:4px solid var(--teal-3);border-radius:var(--r-sm);padding:24px}
.right:nth-child(3n+2){border-top-color:var(--gold)}
.right:nth-child(3n){border-top-color:var(--leaf)}
.right .icon{width:30px;height:30px;color:var(--teal-3);margin-bottom:12px}
.right h3{font-size:18.5px;margin-bottom:8px}
.right p{font-size:15px;color:var(--ink-2);margin:0}

/* ---------- cancellation / notice panel ---------- */
.panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border-radius:var(--r-lg);overflow:hidden;background:var(--paper);border:1px solid var(--rule);box-shadow:var(--shadow-sm)}
.panel>div{padding:clamp(28px,4vw,48px)}
.panel>div+div{background:var(--sage-3);border-left:1px solid var(--rule)}
.panel .tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);background:var(--sage);padding:6px 12px;border-radius:99px;margin-bottom:14px}
@media (max-width:820px){.panel{grid-template-columns:1fr}.panel>div+div{border-left:0;border-top:1px solid var(--rule)}}
.quote-line{font-family:var(--display);font-size:clamp(20px,2.2vw,26px);font-weight:600;color:var(--teal);line-height:1.35;margin:28px auto 0;max-width:40ch;text-align:center}

/* ---------- FAQ (dark bars like the reference) ---------- */
.faq{display:grid;gap:10px;max-width:920px;margin-inline:auto}
/* The closed state used to be a solid teal bar. Seventeen of them stacked read
   as a wall of dark blocks against a site that is otherwise light and open,
   and because the questions are short most of each bar was empty. Closed rows
   are now paper with a hairline rule; the teal is spent on the question itself
   and on marking which row is open. The chevron uses gold-ink rather than
   gold: gold on white is 1.9:1, and a control that signals state has to clear
   3:1 (WCAG 1.4.11). gold-ink is 5.1:1. */
.faq details{background:var(--paper);border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--rule);transition:border-color .2s,box-shadow .2s}
.faq details[open]{border-color:var(--teal-3);box-shadow:var(--shadow-sm)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 22px;background:var(--paper);color:var(--teal);font-family:var(--display);font-size:clamp(17px,1.6vw,19px);font-weight:650;line-height:1.3}
.faq details[open] summary{background:var(--sage-3);border-bottom:1px solid var(--rule)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{width:22px;height:22px;color:var(--gold-ink);transition:transform .2s;stroke-width:2.2;margin-left:auto;order:2}
.faq details[open] summary .icon{transform:rotate(180deg)}
.faq summary:hover{background:var(--sage-3);color:var(--teal-2)}
.faq summary:focus-visible{outline-offset:-4px}
.faq .answer{padding:20px 24px 22px;color:var(--ink-2)}
.faq .answer p:last-child,.faq .answer ul:last-child{margin-bottom:0}

/* ---------- start-a-case card (sage card like the reference CTA) ---------- */
.startcard{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,48px);background:var(--sage);border-radius:var(--r-lg);padding:clamp(22px,4vw,48px);align-items:start}
@media (max-width:900px){.startcard{grid-template-columns:1fr}}
.startcard .aside h2{font-size:clamp(28px,3.2vw,38px)}
.startcard .aside .eyebrow{color:var(--teal)}
.contact-list{list-style:none;margin:24px 0;padding:0;display:grid;gap:14px}
.contact-list li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center}
.contact-list .tile{width:44px;height:44px;border-radius:10px;background:var(--teal);color:var(--gold-2)}
.contact-list .tile .icon{width:22px;height:22px}
.contact-list b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-3)}
.contact-list a,.contact-list span{font-weight:700;color:var(--ink);text-decoration:none;font-size:16.5px}
.startcard .art{margin-top:8px;border-radius:var(--r);overflow:hidden}

.formcard{background:var(--paper);border-radius:var(--r);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow)}
.formcard h2,.formcard h3{font-family:var(--display);font-size:24px;margin-bottom:6px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:14.5px;font-weight:700;color:var(--ink)}
.field .opt{font-weight:400;color:var(--ink-3)}
.field input,.field textarea{font:400 16px/1.4 var(--sans);color:var(--ink);background:#fff;border:1.5px solid var(--rule-2);border-radius:10px;padding:12px 14px;width:100%;transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:104px;resize:vertical}
/* Placeholders are worked examples. Set explicitly rather than left to the
   browser's grey: #556a6b on white is 5.74:1, readable at body size, and still
   clearly lighter than entered text so an example never reads as a filled
   value. opacity:1 stops Firefox fading it further. */
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:1}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--teal-3);box-shadow:0 0 0 4px var(--teal-tint)}
.field input[aria-invalid="true"]{border-color:#9B3B2E}
.hint{font-size:13px;color:var(--ink-3)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:560px){.pair{grid-template-columns:1fr}}
.consent{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding:14px 16px;border:1px solid var(--rule);border-radius:10px;margin-bottom:12px;font-size:14px;line-height:1.55;color:var(--ink-2);background:var(--sage-3)}
.consent input{margin:2px 0 0;width:20px;height:20px;accent-color:var(--teal)}
.consent label{color:inherit;cursor:pointer}
.consent .req,.consent .optl{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.consent .req{color:var(--teal)}
.consent .optl{color:var(--ink-3)}
.consent b{color:var(--ink)}
.nossn{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);margin:14px 0 0}
.nossn .icon{width:20px;height:20px;color:var(--leaf);margin-top:2px}
/* Honeypot: off-screen for sighted visitors, hidden from assistive tech, out
   of the tab order. Not display:none — some bots skip what is display:none. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.formmsg{display:none;padding:14px 16px;border-radius:10px;margin-bottom:16px;font-size:14.5px}
.formmsg.is-visible{display:block}
.formmsg--error{background:#FBF1EE;border:1px solid #E2B8AE;color:#5C231A}
.formmsg--ok{background:var(--teal-tint);border:1px solid var(--teal-3);color:var(--ink)}
.formmsg--ok h3{font-size:20px;margin-bottom:6px}

/* ---------- page title band (interior pages, like the reference) ---------- */
.pagehead{background:var(--teal) url(img/plat-lines.svg) center/cover no-repeat;color:var(--on-dark);position:relative;overflow:hidden}
.pagehead::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,45,47,.82),rgba(34,65,66,.92))}
.pagehead .shell{position:relative;padding-block:clamp(52px,7vw,88px);text-align:center}
.pagehead h1{color:#fff;font-size:clamp(34px,5vw,56px);margin-bottom:14px}
.pagehead h1 em{color:var(--gold);font-style:normal}
.pagehead p{color:var(--on-dark);font-size:clamp(16.5px,1.5vw,19px);max-width:64ch;margin:0 auto}
.crumbs{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--gold-2);margin-bottom:14px}
.crumbs a{color:var(--on-dark-2);text-decoration:none}
.crumbs a:hover{color:#fff}

/* ---------- alternating illustrated rows (how it works page) ---------- */
.rows{display:grid;gap:clamp(56px,8vw,104px)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.row:nth-child(even) .row-art{order:2}
.row-art{background:var(--sage-3);border-radius:var(--r-lg);padding:clamp(16px,3vw,32px)}
.row-art img{width:100%}
.row .n{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);background:var(--sage);padding:6px 12px;border-radius:99px;margin-bottom:14px}
.row h2{font-size:clamp(26px,3vw,36px)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden;margin-top:22px}
.facts div{background:var(--paper);padding:12px 14px}
.facts dt{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.facts dd{margin:4px 0 0;font-weight:700;color:var(--teal);font-size:15px}
@media (max-width:860px){.row{grid-template-columns:1fr}.row:nth-child(even) .row-art{order:0}}
@media (max-width:480px){.facts{grid-template-columns:1fr}}

/* ---------- prose pages (rights, about, legal) ---------- */
.prose-wrap{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:900px){.prose-wrap{grid-template-columns:1fr}}
.toc{position:sticky;top:110px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm);padding:20px 22px}
@media (max-width:900px){.toc{position:static}}
.toc h2{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:t}
.toc a{display:grid;grid-template-columns:22px 1fr;font-size:14.5px;color:var(--ink-2);text-decoration:none;line-height:1.4;counter-increment:t}
.toc a::before{content:counter(t,decimal-leading-zero);font-size:11.5px;font-weight:800;color:var(--gold-ink);padding-top:2px}
.toc a:hover{color:var(--teal)}
.prose{max-width:76ch}
.prose section{scroll-margin-top:110px;margin-bottom:clamp(36px,5vw,56px)}
.prose h2{font-size:clamp(24px,2.8vw,32px);padding-bottom:12px;border-bottom:2px solid var(--sage);margin-bottom:18px}
.prose h3{font-size:19px;margin:26px 0 8px}
.prose p,.prose li{color:var(--ink-2)}
.prose ul,.prose ol{padding-left:22px;display:grid;gap:8px}
.prose .lead{color:var(--ink)}
.callout{display:grid;grid-template-columns:40px 1fr;gap:14px;background:var(--sage-3);border:1px solid var(--rule);border-left:4px solid var(--teal-3);border-radius:var(--r-sm);padding:18px 20px;margin:0 0 20px}
.callout .icon{width:28px;height:28px;color:var(--teal-3)}
.callout p:last-child{margin:0}
.callout--warn{border-left-color:var(--gold);background:#FBF7EE}
.callout--warn .icon{color:var(--gold-ink)}

/* disclosure blocks — the argument, not the fine print: body size, full contrast */
.disclosure{background:var(--paper);border:1px solid var(--rule-2);border-left:5px solid var(--teal);border-radius:var(--r-sm);padding:22px 24px;margin:0 0 20px}
.disclosure .tag{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0 0 10px}
.disclosure p{font-size:15.5px;color:var(--ink);margin-bottom:10px}
.disclosure p:last-child{margin:0}

.commit{display:grid;gap:16px;counter-reset:c;list-style:none;padding:0;margin:0}
.commit li{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm);padding:22px 24px 22px 76px;position:relative;counter-increment:c}
.commit li::before{content:counter(c);position:absolute;left:22px;top:20px;width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--teal-deep);font-family:var(--display);font-weight:700;font-size:19px;display:grid;place-items:center}
.commit h3{font-size:19px;margin-bottom:6px}
.commit p{margin:0;color:var(--ink-2)}

.table-wrap{overflow-x:auto;margin:0 0 20px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--paper)}
table.plain{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
table.plain th,table.plain td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
table.plain thead th{background:var(--sage-3);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
table.plain tbody tr:last-child>*{border-bottom:0}
table.plain tbody th{color:var(--ink);font-weight:700}
table.plain td{color:var(--ink-2)}

/* ---------- closing CTA band ---------- */
.cta-band{background:var(--teal);color:var(--on-dark);border-radius:var(--r-lg);padding:clamp(32px,5vw,56px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:center;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;border:40px solid rgba(198,167,103,.14)}
.cta-band h2{color:#fff;font-size:clamp(26px,3vw,36px);margin-bottom:8px}
.cta-band h2 em{color:var(--gold)}
.cta-band p{color:var(--on-dark-2);margin:0;max-width:56ch}
.cta-band .actions{display:flex;flex-wrap:wrap;gap:12px;position:relative;z-index:1}
@media (max-width:800px){.cta-band{grid-template-columns:1fr}}

/* ---------- footer ---------- */
/* Waves moved off the element and onto an oversized layer beneath the content,
   so they can drift without the edges ever showing. inset:-10% gives the drift
   room; overflow:hidden clips it. */
.site-footer{position:relative;overflow:hidden;background:var(--teal-deep);color:var(--on-dark);padding-top:clamp(56px,7vw,88px)}
.site-footer::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url(img/waves.svg) center/cover no-repeat}
.site-footer>.shell{position:relative;z-index:1}
main>:last-child:not(.section--sage):not(.section){margin-bottom:clamp(64px,8vw,112px)}
.footdisc{border:1px solid rgba(185,200,196,.28);border-left:5px solid var(--gold);border-radius:var(--r-sm);padding:clamp(20px,3vw,30px);background:rgba(23,45,47,.7);margin-bottom:48px}
.footdisc h2{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);margin:0 0 14px}
.footdisc p{font-size:14.5px;line-height:1.7;color:var(--on-dark);max-width:100ch;margin:0 0 12px}
.footdisc p:last-child{margin:0}
.footdisc strong{color:#fff}
.footdisc a{color:var(--gold-2)}
.footgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:44px}
@media (max-width:900px){.footgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footgrid{grid-template-columns:1fr}}
.footbrand img{width:120px;height:120px;background:var(--paper);border-radius:50%;padding:6px;margin-bottom:16px}
.footbrand p{font-size:14.5px;color:var(--on-dark-2);max-width:32ch}
.site-footer h3{font-family:var(--display);font-size:17px;font-weight:700;color:var(--gold);margin:0 0 14px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.site-footer a{color:var(--on-dark);text-decoration:none;font-size:15px}
.site-footer a:hover{color:var(--gold-2);text-decoration:underline}
.site-footer address{font-style:normal;font-size:15px;color:var(--on-dark);display:grid;gap:9px}
.footbase{border-top:1px solid rgba(198,167,103,.45);padding-block:22px 30px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:13.5px;color:var(--on-dark-2)}
.footbase p{margin:0}

/* utility */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-s{margin-top:16px}.mt-m{margin-top:28px}.mt-l{margin-top:48px}
.stack>*+*{margin-top:18px}

/* ============================================================================
   MOTION
   ----------------------------------------------------------------------------
   Everything below is decorative and opt-in. It is wrapped in
   prefers-reduced-motion:no-preference, so a visitor whose system asks for
   reduced motion never has these rules applied at all — not merely shortened.
   The blanket reduced-motion rule near the top of this file is the backstop;
   this is the belt.

   Two principles, both from the design rules in the README:

   1. No urgency. Nothing pulses, counts, flashes, or draws the eye to a call
      to action. This site is read by people who have just lost a house to a
      foreclosure or a tax sale, in a category crowded with predators. Motion
      that hurries them would be a tell.

   2. Nothing moves while it is being read. Ambient loops are slow (14s-90s)
      and low-amplitude. The one quick loop is the dotted path inside the hero
      illustration, which is off to the side of the text and is the only motion
      that carries meaning — it is the money going home.

   Note on WCAG 2.2.2 (Pause, Stop, Hide): the ambient loops here run longer
   than five seconds. prefers-reduced-motion is treated as the stop mechanism,
   which is common practice but is not the same as an in-page control. If a
   visible motion toggle is ever wanted, this is the block it would switch.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* --- ambient backgrounds ------------------------------------------------
     Both drift on transform rather than background-position, so the work
     happens on the compositor instead of repainting a large area each frame.
     alternate, so there is no jump at the end of a cycle. */

  /* Gold light pool in the hero, like light moving across a room. 70s. */
  .hero::after { animation: ure-light 70s ease-in-out infinite alternate; }
  @keyframes ure-light {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-2.2%, 1.6%, 0) scale(1.06); }
  }

  /* Footer waves. 90s — about as slow as motion can be and still register.

     The layer is exactly the size of the footer, so a bare translate would
     drag its edge into view. Instead scale and translate together, both
     starting at identity: at progress t the scale opens up 2.5%t of slack on
     each side while the translate only asks for 1.5%t, so the edge is never
     exposed at any point in the cycle — and at rest the layer is untransformed
     and therefore pixel-identical to the original design. */
  .site-footer::before { animation: ure-swell 90s ease-in-out infinite alternate; }
  @keyframes ure-swell {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(1.5%, -0.8%, 0) scale(1.05); }
  }

  /* --- illustrations rising into view -------------------------------------
     Scroll-driven, so no JavaScript is involved. @supports means a browser
     without scroll timelines simply shows the picture, and the rule is scoped
     to alt="" decorative images only: if this ever misbehaves, the worst case
     is a missing illustration, never missing words. */
  @supports (animation-timeline: view()) {
    .row-art img[alt=""],
    .art img[alt=""] {
      animation: ure-rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    @keyframes ure-rise {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: none; }
    }
  }

  /* --- form feedback -------------------------------------------------------
     The one place motion is earned rather than ambient: the visitor did
     something and the page answers. Short, and it never loops. */
  .formmsg.is-visible { animation: ure-answer .32s cubic-bezier(.2, .7, .3, 1) both; }
  @keyframes ure-answer {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
}