/* FeeBulldog — feebulldog.com */

:root{
  --ink:#1C1C1E;
  --ink-2:#2A2A2E;
  --ink-3:#3C3C42;
  --rust:#D6432B;
  --rust-dk:#B5341F;--rust-lt:#FF7A5E;
  --paper:#F5F3EF;
  --paper-2:#EBE7E0;
  --white:#FFFFFF;
  --muted:#6B6B73;
  --muted-dk:#A0A0AA;
  --line:#DAD5CC;
  --line-dk:#3A3A40;
  --green:#1F7A4D;
  --maxw:1140px;
  --radius:4px;

  /* ---------------------------------------------------------------------
     STATUS TONES — the portal's only status palette.
     Every coloured state in the client portal (invoice status, finding
     stage chips, timeline dots, the "outstanding" / "done" markers) comes
     from this block. Before it existed the JS carried its own shadow
     palette: a second green next to --green, an amber with no token, and
     four near-identical off-whites that were neither --paper nor --paper-2.
     If a new state is needed, add a pair here — do not write a hex in JS.

     Each tone is a foreground plus a tint to sit it on. Both are
     redefined inside .dark further down, so a chip or a status word stays
     legible whichever band of the page it lands in.
     --------------------------------------------------------------------- */
  --tone-good:var(--green);
  --tone-good-tint:#E8F3ED;
  --tone-active:var(--ink);
  --tone-active-tint:var(--paper-2);
  --tone-waiting:var(--muted);
  --tone-waiting-tint:var(--paper-2);
  --tone-attention:#8A5A00;          /* the one amber; dark enough to read on its tint */
  --tone-attention-tint:#F6EBD6;
  --tone-closed:#8A8A92;
  --tone-closed-tint:var(--paper-2);
  --tone-bad:var(--rust-dk);         /* text only — nothing is chipped in red */

  /* hairlines and meter tracks drawn by JS. --rule is the same line as
     --line; it exists so the JS can name a role instead of guessing a
     fallback hex (one of which was simply the wrong colour). */
  --rule:var(--line);
  --track:var(--line);
  --dot-idle:#C9C4BA;                /* timeline step not reached yet */

  /* ---------------------------------------------------------------------
     RESPONSIVE SCALE — the only breakpoints this site uses.
     Do not invent new ones; pick the nearest tier below.
       md  900px  multi-column -> 2 columns, nav collapses to the hamburger
       sm  620px  everything -> single column
     Page gutter is fluid: 24px on desktop, easing down to 16px on narrow
     phones so a 390px screen is not spending 48px of its width on margins.
     (CSS vars cannot be used inside a media query, so the pixel values are
     written literally below — keep them in sync with this note.)
     --------------------------------------------------------------------- */
  --gutter:clamp(16px,4vw,24px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto}
/* SKUs, ASINs and Amazon case numbers are long unbreakable tokens shown inside
   narrow cards and table cells. Without this one line a single 32-character SKU
   pushes the whole page sideways on a phone. */
body{overflow-wrap:break-word}
td,th,.card,.form-msg{overflow-wrap:anywhere}

h1,h2,h3,h4,.display{
  font-family:"Archivo",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.05;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.4rem,6vw,4.2rem)}
h2{font-size:clamp(1.9rem,4vw,2.9rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem);letter-spacing:-0.01em}
h4{font-size:1.12rem;letter-spacing:-0.01em;margin-bottom:.4em}
p{margin:0 0 1.1em;text-wrap:pretty}
a{color:inherit}
.dark h4{color:var(--white)}
strong{font-weight:700}

/* anchor targets clear the sticky header */
[id]{scroll-margin-top:88px}

/* keyboard focus — visible everywhere, not just inputs */
:focus-visible{outline:3px solid var(--rust);outline-offset:3px;border-radius:2px}
.dark :focus-visible,.hero :focus-visible{outline-color:#FF7A5E}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:760px;margin-left:auto;margin-right:auto}
section{padding:84px 0}
.dark{background:var(--ink);color:var(--paper)}
/* The status palette, restated for the ink background. Because these are
   custom properties on .dark itself, anything the portal JS renders inside a
   dark band picks the right pair up automatically — the JS never needs to
   know which band it is drawing into. */
.dark{
  --tone-good:#63C08D;
  --tone-good-tint:#173A2A;
  --tone-active:var(--white);
  --tone-active-tint:var(--ink-3);
  --tone-waiting:#C9C5BD;
  --tone-waiting-tint:var(--ink-3);
  --tone-attention:#E0A83C;
  --tone-attention-tint:#3B2E12;
  --tone-closed:#C9C5BD;
  --tone-closed-tint:var(--ink-3);
  --tone-bad:#FF7A5E;
  --rule:var(--line-dk);
  --track:var(--line-dk);
  --dot-idle:#55555E;
}
.dark h1,.dark h2,.dark h3{color:var(--white)}
.dark .muted{color:var(--muted-dk)}
.muted{color:var(--muted)}
.eyebrow{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rust-dk);margin-bottom:14px;display:block;
}
.lede{font-size:clamp(1.05rem,1.8vw,1.28rem);line-height:1.55;color:var(--muted)}
.dark .lede{color:#C9C5BD}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:1rem;
  padding:15px 28px;border-radius:var(--radius);border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .12s ease,background .15s ease,color .15s ease;
  line-height:1;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--rust-dk);color:var(--white);border-color:var(--rust-dk)}
.btn-primary:hover{background:#98290F;border-color:#98290F}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.dark .btn-ghost{color:var(--paper);border-color:#55555E}
.dark .btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-lg{font-size:1.1rem;padding:18px 34px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:32px}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;background:var(--ink);
  border-bottom:1px solid var(--line-dk);
  transition:box-shadow .2s ease,border-color .2s ease;
}
.hdr{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--white);flex-shrink:0}
.brand img,.brand svg{width:36px;height:36px;display:block}
.brand-name{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.32rem;letter-spacing:-.02em}
.brand-name span{color:var(--rust)}
.nav{display:flex;align-items:center;gap:28px}
.nav a{
  color:#C9C5BD;text-decoration:none;font-size:.95rem;font-weight:500;
  transition:color .15s ease;white-space:nowrap;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--white)}
.nav .btn{padding:11px 20px;font-size:.92rem}
.nav-toggle{display:none;background:none;border:0;color:var(--white);padding:8px;cursor:pointer}
.nav-toggle svg{width:26px;height:26px}

@media(max-width:900px){ /* md */
  .nav-toggle{display:block}
  .nav{
    display:none;position:absolute;top:72px;left:0;right:0;background:var(--ink);
    flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 24px;
    border-bottom:1px solid var(--line-dk);
  }
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line-dk)}
  .nav .btn{margin-top:16px;justify-content:center;border-bottom:0;padding:15px 20px}
}

/* ---------- alert bar ---------- */
.alertbar{background:var(--rust-dk);color:var(--white);font-size:.93rem;padding:11px 0;text-align:center}
/* The bar's own background was --rust, so a focused link inside it got a rust
   outline on rust — a 1:1 focus ring, i.e. none at all. */
.alertbar :focus-visible{outline-color:#fff}
.alertbar strong{font-family:"Archivo",sans-serif}
.alertbar .wrap{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:var(--paper);padding:96px 0 88px;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;right:-140px;top:50%;transform:translateY(-50%);
  width:620px;height:620px;opacity:.045;pointer-events:none;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="white"/></svg>') no-repeat center/contain;
}
.hero-inner{position:relative;z-index:1;max-width:840px}
.hero h1{color:var(--white)}
.hero h1 em{font-style:normal;color:var(--rust)}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}} /* md */
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}} /* sm */

.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 10px 30px rgba(28,28,30,.08)}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
/* .tag is the small uppercase label that sits above a card's heading. It was
   only ever defined as `.card .tag`, so the one tag on the portal that is not
   inside a card rendered as plain body text. Split in two: the look lives on
   .tag, the block layout stays scoped to cards so nothing already on the site
   moves a pixel. */
.tag{
  font-family:"Archivo",sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rust-dk);display:inline-block;font-weight:700;
}
.card .tag{display:block;margin-bottom:12px}
.dark .card{background:var(--ink-2);border-color:var(--line-dk)}
.dark .card:hover{border-color:var(--rust);box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* ---------- stat card ----------
   A dashboard KPI is a .card with a .tag label and a .stat-value number.
   The LABEL is the heading element, not the number: a screen reader's
   heading list has to read "Recovered lifetime", not "$12,340". Everything
   the portal used to draw inline — a .74rem label, a 1.5rem value, a .8rem
   sub — is these two classes plus the card's own padding. */
.stat-value{
  font-family:"Archivo",sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.7rem,3vw,2.1rem);line-height:1;margin:0 0 .3em;
  font-variant-numeric:tabular-nums;
}
.dark .stat-value{color:var(--white)}
.stat-sub{font-size:.9rem;color:var(--muted);margin:0}
.dark .stat-sub{color:var(--muted-dk)}

/* ---------- card head, card note ----------
   A name on the left and a figure on the right, inside a card: the returns
   page, the programs list on the dashboard and the SKU rankings all draw the
   same row. It had been hand-rolled inline SEVEN times on 8 Sep, which is how
   a set of near-identical rows drifts apart — and the reason this stylesheet
   exists at all (inline styles were deliberately driven down to ~1).
   `align-items:baseline` so a big number and a small label sit on one line;
   wraps to two lines on a narrow card rather than squashing the figure. */
.card-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;
}
.card-head strong{font-weight:700}
/* The seven were not even consistent with each other: gaps of 12, 14 and 16,
   flex-wrap on some and not others, one with its own font-size. One class, and
   a modifier for the one row that is genuinely smaller. */
.card-head.tight{font-size:.92rem}
/* The muted explanatory line under a card's head. Was four different inline
   margin/size combinations; one class instead. */
.card-note{margin:.4em 0 0;color:var(--muted);font-size:.92rem}
.card-note + .card-note{margin-top:.3em}
.dark .card-note{color:var(--muted-dk)}
.card-note.tight{font-size:.88rem}

/* Confidence chip — how likely one finding is to be paid, on the five-band
   scale in feebulldog-api/src/confidence.js. The LABEL carries the band
   ("Strong", "Thin", "Long shot"); the COLOUR carries only what to do about
   it, which is a three-way question, not a five-way one: green files as
   written, amber wants a look first, grey is not filed on its own. Five
   colours would have asked the eye to hold a distinction the hand does not
   act on. */
.conf{display:inline-flex;align-items:baseline;gap:5px;font-size:.72rem;font-weight:600;
  padding:3px 8px;border-radius:3px;white-space:nowrap;background:var(--tone-closed-tint);color:var(--tone-closed)}
.conf-strong,.conf-good{background:var(--tone-good-tint);color:var(--tone-good)}
.conf-mixed{background:var(--tone-attention-tint);color:var(--tone-attention)}
.conf-pct{font-weight:400;opacity:.7;font-variant-numeric:tabular-nums}
/* JS tables, finding chips and timelines: portal.css (portal, admin, demo only) */

/* a vertical run of cards — a dashboard list, read top to bottom.
   Spacing here rather than an inline margin on every card the JS writes. */
.card-stack .card{margin-bottom:14px}
.card-stack .card:last-child{margin-bottom:0}

/* numbered steps */
.step{display:flex;gap:22px;padding:28px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step-n{
  font-family:"Archivo",sans-serif;font-weight:800;font-size:2.6rem;line-height:1;
  color:var(--rust);flex-shrink:0;width:64px;
}
.step h3{margin-bottom:.35em}
.step p:last-child{margin-bottom:0}
.dark .step{border-color:var(--line-dk)}

/* ---------- price ---------- */
.price-hero{text-align:center;padding:56px 32px;background:var(--ink);color:var(--white);border-radius:var(--radius)}
.price-num{
  font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(5rem,16vw,10rem);
  line-height:.9;color:var(--rust);letter-spacing:-.04em;display:block;
}
.price-sub{font-family:"Archivo",sans-serif;font-size:1.3rem;font-weight:700;margin-top:10px}
.compare{
  display:flex;gap:0;flex-wrap:wrap;margin:44px 0 0;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--white);
}
.compare-col{flex:1 1 220px;padding:30px 26px;border-right:1px solid var(--line)}
.compare-col:last-child{border-right:0}
.compare-col.win{background:#FCF6F4;border-top:4px solid var(--rust)}
.compare-col .who{font-family:"Archivo",sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.compare-col .rate{font-family:"Archivo",sans-serif;font-weight:800;font-size:3rem;line-height:1;letter-spacing:-.03em}
.compare-col.win .rate{color:var(--rust)}
.compare-col .note{font-size:.9rem;color:var(--muted);margin-top:10px;margin-bottom:0}

/* ---------- callout ---------- */
.callout{
  border-left:4px solid var(--rust);background:var(--white);
  padding:24px 28px;border-radius:0 var(--radius) var(--radius) 0;margin:32px 0;
}
.callout p:last-child{margin-bottom:0}
.dark .callout{background:var(--ink-2)}

/* ---------- math example ---------- */
.math{background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:32px;margin:32px 0;font-family:"Inter",monospace}
.math-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line-dk);font-size:.97rem}
.math-row:last-child{border-bottom:0;padding-top:18px;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.3rem;color:var(--rust)}
.math-row span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- lists ---------- */
.checks{list-style:none;padding:0;margin:0}
.checks li{padding:11px 0 11px 34px;position:relative;border-bottom:1px solid var(--line)}
.checks li:last-child{border-bottom:0}
.checks li::before{
  content:"";position:absolute;left:0;top:18px;width:16px;height:9px;
  border-left:3px solid var(--rust);border-bottom:3px solid var(--rust);transform:rotate(-45deg);
}
.dark .checks li{border-color:var(--line-dk)}
.nots{list-style:none;padding:0;margin:0}
.nots li{padding:11px 0 11px 34px;position:relative;border-bottom:1px solid var(--line)}
.nots li:last-child{border-bottom:0}
.nots li::before{content:"✕";position:absolute;left:2px;top:10px;color:var(--muted);font-weight:700}
.dark .nots li{border-color:var(--line-dk)}

/* ---------- form ---------- */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:36px}
.dark .form-card{background:var(--ink-2);border-color:var(--line-dk)}
.field{margin-bottom:20px}
.field label{
  display:block;font-family:"Archivo",sans-serif;font-weight:700;font-size:.83rem;
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:7px;
}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;font-size:1rem;font-family:inherit;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.dark .field input,.dark .field select,.dark .field textarea{background:var(--ink);color:var(--white);border-color:var(--line-dk)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--rust-dk);box-shadow:0 0 0 3px rgba(181,52,31,.20);
}
/* Do NOT set outline:0 here. This rule outranks :focus-visible above, so an
   outline reset would silently delete the site's own 3px keyboard ring from
   every input, select and textarea on every page. The border+glow are a
   supplement to that ring, not a replacement for it. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--rust-dk);outline-offset:2px;
}
.field .hint{font-size:.85rem;color:var(--muted);margin:6px 0 0}
.dark .field .hint,.dark .form-note{color:var(--muted-dk)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:620px){.field-row{grid-template-columns:1fr}} /* sm */
.form-note{font-size:.88rem;color:var(--muted);margin-top:18px}
.form-msg{padding:14px 16px;border-radius:var(--radius);margin-bottom:20px;display:none;font-size:.95rem}
.form-msg.ok{display:block;background:#E8F4ED;color:var(--green);border:1px solid #B9DFCB}
.form-msg.err{display:block;background:#FBECE9;color:var(--rust-dk);border:1px solid #F1C9C0}
/* Neither good news nor bad — a standing note, e.g. "no card on file yet".
   .form-msg is display:none until a variant turns it on, so a message given
   no variant is invisible however many times you clear its hidden attribute. */
.form-msg.note{display:block;background:var(--paper-2);color:var(--ink);border:1px solid var(--line)}
.dark .form-msg.note{background:var(--ink-2);color:var(--paper);border-color:var(--line-dk)}

/* ---------- trust row ---------- */
.trust{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.trust span{
  font-size:.84rem;color:var(--muted);border:1px solid var(--line);
  padding:7px 13px;border-radius:100px;background:var(--white);
}
.dark .trust span{background:transparent;border-color:var(--line-dk);color:var(--muted-dk)}

/* ---------- faq ---------- */
details.faq{border-bottom:1px solid var(--line);padding:4px 0}
details.faq summary{
  cursor:pointer;padding:20px 34px 20px 0;font-family:"Archivo",sans-serif;font-weight:700;
  font-size:1.08rem;list-style:none;position:relative;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{
  content:"+";position:absolute;right:4px;top:16px;font-size:1.7rem;color:var(--rust);font-weight:400;line-height:1;
}
details.faq[open] summary::after{content:"–"}
details.faq .faq-body{padding:0 40px 20px 0;color:var(--muted)}
details.faq .faq-body p:last-child{margin-bottom:0}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--muted-dk);padding:64px 0 32px;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}} /* md */
@media(max-width:620px){.foot-grid{grid-template-columns:1fr}} /* sm */
.foot-grid h4{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--white);margin-bottom:16px;
}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:10px}
.foot-grid a{color:var(--muted-dk);text-decoration:none}
.foot-grid a:hover{color:var(--white)}
.foot-bottom{border-top:1px solid var(--line-dk);padding-top:26px;font-size:.83rem;line-height:1.6}
.foot-bottom p{margin:0 0 8px}

/* ---------- estimator ---------- */
.est{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-top:36px}
@media(max-width:900px){.est{grid-template-columns:1fr;gap:28px}} /* md */
.est-controls{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.dark .est-controls{background:var(--ink-2);border-color:var(--line-dk)}
.est-row{margin-bottom:24px}
.est-row:last-child{margin-bottom:0}
.est-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.est-head label{font-family:"Archivo",sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.est-head output{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.15rem;color:var(--rust);font-variant-numeric:tabular-nums}
.est-row input[type=range]{width:100%;accent-color:var(--rust);height:44px;padding:11px 0;background-clip:content-box;cursor:pointer}
.est-hint{font-size:.83rem;color:var(--muted);margin:4px 0 0}
.dark .est-hint{color:var(--muted-dk)}
.est-out{background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:28px}
.est-out h3{color:var(--white);font-size:1.05rem;margin-bottom:14px}
.est-line{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-dk);font-size:.95rem}
.est-line span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.est-line.big{border-bottom:0;padding-top:16px;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.35rem;color:var(--rust)}
.est-line.dim{color:var(--muted-dk)}
.est-block{margin-bottom:26px}
.est-block:last-child{margin-bottom:0}

/* ---------- motion ----------
   Reveal styles only bite once motion.js has added .motion to <html>, so a
   JS failure can never leave the page blank. */
.motion .reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);
}
.motion .reveal.in{opacity:1;transform:none}

.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:60;
  background:var(--rust);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .1s linear;pointer-events:none;
}
.site-header.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.28);border-bottom-color:#4A4A52}

/* animated underline on body links */
.wrap p a:not(.btn),.faq-body a,.checks a,.nots a{
  text-decoration:none;background-image:linear-gradient(var(--rust),var(--rust));
  background-size:100% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  padding-bottom:1px;transition:background-size .25s ease,color .2s ease;
}
.wrap p a:not(.btn):hover,.faq-body a:hover{background-size:0 1.5px;color:var(--rust)}
.dark .wrap p a:not(.btn),.dark .faq-body a,.dark .checks a{
  background-image:linear-gradient(#FF7A5E,#FF7A5E);
}
.dark .wrap p a:not(.btn):hover{color:#FF7A5E}

/* number readouts shouldn't reflow while counting */
.math-row span:last-child,.compare-col .rate,.price-num,.est-line span:last-child{
  font-variant-numeric:tabular-nums;
}

/* ---------- diagrams ---------- */
.diagram{margin:40px 0;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;background:var(--white)}
.dark .diagram{background:var(--ink-2);border-color:var(--line-dk)}
.diagram svg{display:block;width:100%;height:auto}
.diagram figcaption{font-size:.88rem;color:var(--muted);margin-top:16px;text-align:center}
.dark .diagram figcaption{color:var(--muted-dk)}

/* ---------- misc ---------- */
.hr{height:1px;background:var(--line);border:0;margin:0}
.dark .hr{background:var(--line-dk)}
.center{text-align:center}
.placeholder{
  border:2px dashed var(--rust);padding:16px 20px;border-radius:var(--radius);
  background:#FCF6F4;color:var(--rust-dk);font-size:.9rem;
}
.placeholder strong{font-family:"Archivo",sans-serif}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--rust);color:#fff;padding:12px 18px;border-radius:var(--radius)}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* =====================================================================
   UTILITIES AND SMALL COMPONENTS

   This block exists so the HTML can carry no style="" attributes at all
   and the Content-Security-Policy can drop style-src 'unsafe-inline'.
   Everything below is a value that was already inline somewhere on the
   site — this is a refactor, not a redesign.

   Spacing was 23 distinct margin-top values for what was plainly one
   rhythm. It is now an 8px scale, steps 1-8 (8px to 64px), and every
   old value was rounded to its nearest rung (ties up). Nothing moved
   by more than 4px. Values that were doing something specific rather
   than approximating a rung — the footer brand's 14px, the table cell
   paddings — kept their exact number inside a component rule instead.
   ===================================================================== */

/* ---------- spacing scale: 8px rhythm ---------- */
.m-0{margin:0}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-0{margin-top:0}
.mt-1{margin-top:8px}
.mt-2{margin-top:16px}
.mt-3{margin-top:24px}
.mt-4{margin-top:32px}
.mt-5{margin-top:40px}
.mt-6{margin-top:48px}
.mt-7{margin-top:56px}
.mt-8{margin-top:64px}
.mb-0{margin-bottom:0}
.mb-2{margin-bottom:16px}
.mb-3{margin-bottom:24px}
.mb-4{margin-bottom:32px}
.mb-5{margin-bottom:40px}
.mb-6{margin-bottom:48px}
.mb-7{margin-bottom:56px}
.pt-7{padding-top:56px}

/* ---------- type scale ---------- */
.t-xs{font-size:.85rem}
.t-sm{font-size:.9rem}
.t-md{font-size:.95rem}
.t-lg{font-size:1.05rem}
.t-xl{font-size:1.15rem}
.t-2xl{font-size:1.3rem}
.nowrap{white-space:nowrap}
.no-underline{text-decoration:none}
.v-mid{vertical-align:middle}

/* ---------- measure ---------- */
.mw-460{max-width:460px}
.mw-480{max-width:480px}
.mw-60ch{max-width:60ch}
.mw-62ch{max-width:62ch}

/* ---------- colour ----------
   .c-white is white text on an ink band. The compound selectors below keep
   a link white through :hover, which is what the inline style used to do by
   brute force — without them the body-link hover rule would repaint it rust
   on a dark background. */
.c-rust{color:var(--rust)}
.c-white{color:var(--white)}
.dark .c-white,
.wrap p a.c-white,.wrap p a.c-white:hover,
.dark .wrap p a.c-white,.dark .wrap p a.c-white:hover{color:var(--white)}

/* visually removed but still in the accessibility tree — honeypot fields */
.offscreen{position:absolute;left:-9999px}

/* ---------- layout helpers ---------- */
.align-start{align-items:start}
.grid.gap-lg{gap:40px}
.grid.gap-xl{gap:56px}
/* a heading block and its trailing control, baselines along the bottom */
.split-end{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;
}
/* wrapper that lets a wide table scroll instead of crushing the page */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- section and hero size variants ---------- */
.section-sm{padding:48px 0}
.hero.hero-sm{padding:72px 0 56px}
.hero.hero-xs{padding:64px 0 48px}

/* ---------- component tweaks ---------- */
/* the footer lockup: the mark sits above a blurb held to one column */
.site-footer .brand{margin-bottom:14px}
.foot-grid p{max-width:34ch}
/* a centred call-to-action row, and a button that fills its column */
.btn-row.center{justify-content:center}
.btn-block{width:100%;justify-content:center}
/* the first step in a run has no rule above it */
.step.no-rule{border-top:0;padding-top:0}
/* a callout sitting on an ink band wants a lift, not a second dark box */
.callout.callout-soft{background:rgba(255,255,255,.08)}
/* a KPI figure standing in for a heading inside a card */
.stat-num,.card h3.stat-num{font-size:2rem;margin-bottom:.15em}
/* a compact page title */
.h2-sm{font-size:clamp(1.7rem,3.5vw,2.2rem);margin-bottom:.2em}
/* a closing line separated from the copy above it by a hairline, on ink */
.kicker-rule{
  margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18);
  color:var(--white);font-size:.95rem;
}
/* "(optional)" inside an uppercase field label */
.field label .label-opt{
  text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted);
}
/* a running count inside a heading — body face, not the display face */
.h-note{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:400;font-size:.9rem;
}
/* a standing advisory strip above the page content */
.notice{background:#FBF0DE;border-bottom:1px solid #E8D9BC}
.notice .wrap{padding:14px 0}

/* ---------- data table ----------
   Every report, comparison and ledger table on the site. Previously this
   was the same six declarations repeated on every single cell. */
.dtable{width:100%;border-collapse:collapse}
.dtable th{
  text-align:left;padding:8px 12px 8px 0;border-bottom:2px solid var(--ink);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
}
.dtable td{
  padding:9px 12px 9px 0;border-bottom:1px solid var(--line);
  font-size:.92rem;vertical-align:top;
}
/* Most of these tables run their last column flush to the edge — but not
   all of them, so it is a modifier and not a blanket :last-child rule. */
.dtable.flush th:last-child,.dtable.flush td:last-child{padding-right:0}
/* .right is a right-aligned label; .num is a right-aligned figure that must
   not reflow as the digits change. */
.dtable .right{text-align:right}
.dtable .num{text-align:right;font-variant-numeric:tabular-nums}
/* the compact variant used for a short ledger */
.dtable.tight th{padding:7px 12px 7px 0;font-size:.74rem}
.dtable.tight td{padding:6px 12px 6px 0;vertical-align:middle}
/* minimum widths, so a wide table scrolls inside .tscroll on a phone */
.dtable.w-sm{min-width:640px}
.dtable.w-md{min-width:720px}
.dtable.w-lg{min-width:920px}
/* on an ink band */
.dark .dtable{color:var(--white)}
.dark .dtable th{border-bottom-color:var(--white)}
.dark .dtable td{border-bottom-color:rgba(255,255,255,.2)}

/* Things the record believes that cannot all be true. Red, above the worklist,
   and shown even when the list is empty — a contradictory record with nothing
   due is not a quiet morning. */
.banner-contradiction{margin:0 0 16px;padding:12px 14px;border:2px solid #A32D2D;border-radius:6px;background:#FFF5F5;color:#1C1C1E;font-size:.92rem;line-height:1.45}
.banner-contradiction strong{display:block;color:#A32D2D;margin-bottom:4px}
/* --- WCAG AA contrast, audited live on the rendered pages 23 Sep 2026 ---
   Measured, not guessed. Three failures, with one colour and one
   specificity bug behind all of them:
     .nav a.btn-primary  3.51 — ".nav a" (0,0,1,1) beat ".btn-primary"
       (0,0,1,0) and came later in the file, so the header CTA rendered
       #C9C5BD on rust. Every other btn-primary was already white.
     .eyebrow / .tag on the dark ink ground  2.82 / 2.37 — --rust-dk
       (#B5341F) reads 5.46 on --paper and fails on #1C1C1E.
   --rust-lt is that hue lifted for dark grounds: 6.64 on --ink.
   Re-run the audit after touching any of these. */
.nav a.btn-primary,.nav a.btn-primary:hover{color:var(--white)}
.dark .eyebrow,.dark .tag,.hero .eyebrow,.hero .tag{color:var(--rust-lt)}