/* Truppraisal — shared across index, for-brokers, for-homeowners.
   Brand: logo blue #217FA3, site navy #0A2239, deep blue #185B76. */
:root{
  --ground:#F1F5F7; --surface:#FFFFFF; --sunk:#E7EEF2;
  --ink:#0A2239; --muted:#52697C; --line:#CEDBE3;
  --brand:#217FA3; --brand-strong:#185B76; --brand-soft:#DFEDF4; --on-brand:#FFFFFF;
  --deep:#0A2239; --on-deep:#DCE9F1;
  --ochre:#8A5D00; --ochre-soft:#F7EDD8;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Source Sans 3",-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#061523; --surface:#0C2337; --sunk:#081B2B;
    --ink:#E4EEF5; --muted:#93AABC; --line:#1C3B55;
    --brand:#4FB2D8; --brand-strong:#3196BF; --brand-soft:#0F3348; --on-brand:#03131F;
    --deep:#030E19; --on-deep:#DCE9F1;
    --ochre:#E0B44F; --ochre-soft:#332A16;
  }
}
:root[data-theme="dark"]{
  --ground:#061523; --surface:#0C2337; --sunk:#081B2B;
  --ink:#E4EEF5; --muted:#93AABC; --line:#1C3B55;
  --brand:#4FB2D8; --brand-strong:#3196BF; --brand-soft:#0F3348; --on-brand:#03131F;
  --deep:#030E19; --on-deep:#DCE9F1;
  --ochre:#E0B44F; --ochre-soft:#332A16;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
a{color:var(--brand-strong)}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.06;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:clamp(34px,5vw,58px)}
h2{font-size:clamp(26px,3.3vw,39px)}
h3{font-size:20px;font-weight:600;letter-spacing:-.01em}
p{margin:0;max-width:64ch}
.label{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}

.ribbon{background:var(--ochre-soft);border-bottom:1px solid var(--line);font-size:13.5px;padding-block:9px}
.ribbon .wrap{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline}
.ribbon b{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--ochre)}

/* Sep 16 2026: sticky. The form lives at the bottom of a ten-screen page and
   the nav was scrolling away with the only button that reaches it -- after the
   hero there was no path to the ask for eight thousand pixels. */
nav{padding-block:14px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
  background:var(--ground);backdrop-filter:saturate(180%) blur(6px)}
@supports not (backdrop-filter: blur(6px)){nav{background:var(--ground)}}
nav .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.navlinks{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.navlinks a{font-size:15px;font-weight:600;text-decoration:none;color:var(--muted)}
.navlinks a:hover{color:var(--brand-strong)}
.navlinks a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:var(--brand)}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{height:25px;width:auto;display:block}
.logo .on-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo .on-light{display:none}
  :root:not([data-theme="light"]) .logo .on-dark{display:block}
}
:root[data-theme="dark"] .logo .on-light{display:none}
:root[data-theme="dark"] .logo .on-dark{display:block}

.btn{display:inline-flex;align-items:center;gap:9px;background:var(--brand-strong);color:var(--on-brand);font-family:var(--body);font-weight:700;font-size:16px;padding:13px 22px;border-radius:4px;text-decoration:none;border:0;cursor:pointer}
.btn:hover{filter:brightness(1.12)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--brand)}
.btn.small{font-size:15px;padding:10px 17px}

.hero{padding-block:44px 64px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
.hero.solo .wrap{grid-template-columns:1fr;max-width:820px}
.hero-copy{display:flex;flex-direction:column;gap:22px;padding-top:6px}
.hero-copy h1 em{font-style:normal;color:var(--brand)}
.lede{font-size:19.5px;color:var(--muted)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:4px}
.hero-note{font-size:14px;color:var(--muted)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.card-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:13px 17px;background:var(--deep);color:var(--on-deep)}
.card-head .label{color:var(--on-deep);opacity:.65}
.subj{display:flex;flex-direction:column;gap:1px}
.subj strong{font-size:15.5px}
.subj span{font-family:var(--mono);font-size:12.5px;opacity:.75}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
th{font-weight:500;text-align:left;color:var(--muted);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:9px 11px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px 11px;border-bottom:1px solid var(--line);white-space:nowrap}

/* Sep 15 2026: the nowrap above is for the report proof tables, where a comp row
   must stay on one line. Comparison tables carry sentences, and nowrap made them
   overflow their own container -- clipping our column on desktop and forcing a
   sideways scroll on mobile. Wrap those. */
table.cmp td,table.cmp th,table.eg td,table.eg th,
table.vs td,table.vs th{white-space:normal}
td.num,th.num{text-align:right}
tr.dim td{color:var(--muted)}
.bar{width:58px;height:5px;background:var(--brand-soft);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand)}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;padding:2px 6px;border-radius:2px;background:var(--brand-soft);color:var(--brand-strong)}
.chip.p{background:var(--ochre-soft);color:var(--ochre)}
.chip.a{background:transparent;color:var(--muted);border:1px dashed var(--line)}
.card-foot{display:flex;justify-content:space-between;align-items:end;gap:14px;flex-wrap:wrap;padding:15px 17px}
.est{font-family:var(--display);font-weight:700;font-size:31px;line-height:1}
.est small{display:block;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.09em;color:var(--muted);margin-bottom:5px;text-transform:uppercase}
.card-foot p{font-size:12.5px;color:var(--muted);max-width:30ch}

section{padding-block:72px;border-top:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:end;margin-bottom:40px}
.sec-head p{color:var(--muted);font-size:18px}
.sec-head.solo{grid-template-columns:1fr;gap:14px;align-items:start}

.math{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);background:var(--surface);border-radius:6px}
.math div{padding:26px 24px;display:flex;flex-direction:column;gap:7px}
.math div+div{border-left:1px solid var(--line)}
.math .n{font-family:var(--display);font-weight:700;font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
.math .op{color:var(--brand)}
.math p{font-size:14.5px;color:var(--muted)}

.path{background:var(--deep);color:var(--on-deep);border-top:0}
.path h2{color:var(--on-deep)}
.path .sec-head p{color:var(--on-deep);opacity:.75}
.track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid rgba(220,233,241,.22)}
.leg{padding:26px 26px 0 0;display:flex;flex-direction:column;gap:11px}
.leg+.leg{padding-left:26px;border-left:1px solid rgba(220,233,241,.16)}
.leg .step{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:#7FD0EE}
.leg h3{color:var(--on-deep)}
.leg p{font-size:15.5px;opacity:.85}
.leg .when{font-family:var(--mono);font-size:12px;opacity:.6;margin-top:auto;padding-top:10px}
.path-note{margin-top:34px;padding:18px 22px;border:1px dashed rgba(220,233,241,.3);border-radius:6px;font-size:15.5px;opacity:.9;max-width:78ch}

.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.rule{display:grid;grid-template-columns:142px 1fr;gap:18px;padding-block:21px;border-bottom:1px solid var(--line);padding-right:26px}
.rule:nth-child(even){padding-left:26px;padding-right:0;border-left:1px solid var(--line)}
.rule .k{font-family:var(--mono);font-size:12.5px;color:var(--brand-strong);padding-top:3px}
.rule p{font-size:15.5px}

.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:46px}
.split>div{display:flex;flex-direction:column;gap:14px}
.split ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:7px;max-width:56ch;color:var(--muted)}

/* two-column "is / is not" — used on every page, it's the spine of the product */
.isnot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--surface)}
.isnot>div{padding:24px 26px;display:flex;flex-direction:column;gap:12px}
.isnot>div+div{border-left:1px solid var(--line)}
.isnot h3{font-size:18px}
.isnot ul{margin:0;padding-left:1.05em;display:flex;flex-direction:column;gap:8px;font-size:15.5px;color:var(--muted)}
.isnot .no{background:var(--sunk)}

.disclosure{background:var(--surface);border:2px solid var(--ink);border-radius:4px;padding:26px 28px;display:flex;flex-direction:column;gap:11px;max-width:800px}
.disclosure h3{font-size:24px}
.disclosure p{font-size:15.5px}
.disclosure .req{font-weight:700}

.callout{background:var(--brand-soft);border-left:4px solid var(--brand);border-radius:4px;padding:20px 24px;display:flex;flex-direction:column;gap:10px;max-width:76ch}
.callout h3{font-size:18px}
.callout p{font-size:15.5px}

.quote{border-left:3px solid var(--line);padding:4px 0 4px 20px;display:flex;flex-direction:column;gap:8px;margin-block:16px;max-width:76ch}
.quote p{font-style:italic;font-size:16px;color:var(--ink)}
.quote cite{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em}

.cta .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:46px;align-items:start}
.cta-copy{display:flex;flex-direction:column;gap:16px}
form{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1/-1}
label{font-size:13.5px;font-weight:600}
input,select{font:inherit;font-size:16px;color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:4px;padding:10px 11px;width:100%}
input:focus,select:focus{outline:2px solid var(--brand);outline-offset:1px}
.hint{font-size:13px;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{grid-column:1/-1;font-size:14.5px;min-height:1.4em}
.msg.err{color:var(--ochre)}
.msg.ok{color:var(--brand-strong);font-weight:600}

details{border-bottom:1px solid var(--line);padding-block:17px}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;font-weight:700;font-size:17.5px;list-style:none;display:flex;justify-content:space-between;gap:16px;font-family:var(--display)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--brand)}
details[open] summary::after{content:"–"}
details p{margin-top:9px;color:var(--muted);font-size:16px}
details p+p{margin-top:8px}
.faq{max-width:820px}

.crosslink{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.crosslink a{display:flex;flex-direction:column;gap:7px;padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--ink)}
.crosslink a:hover{border-color:var(--brand)}
.crosslink strong{font-family:var(--display);font-size:19px}
.crosslink span{font-size:15px;color:var(--muted)}

footer{padding-block:38px 52px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
footer .wrap{display:flex;flex-direction:column;gap:11px}
footer p{max-width:86ch;font-size:13.5px}
.footlinks{display:flex;gap:18px;flex-wrap:wrap;margin-top:2px}
.footlinks a{font-size:14px;font-weight:600;text-decoration:none}

@media (max-width:900px){
  .hero .wrap,.sec-head,.cta .wrap,.split,.crosslink{grid-template-columns:1fr}
  .track,.rules,.isnot{grid-template-columns:1fr}
  .leg+.leg{padding-left:0;border-left:0;border-top:1px solid rgba(220,233,241,.16)}
  .leg{padding-right:0}
  .isnot>div+div{border-left:0;border-top:1px solid var(--line)}
  .rule:nth-child(even){padding-left:0;border-left:0}
  .rule{padding-right:0}
}
@media (max-width:640px){
  .math{grid-template-columns:1fr}
  .math div+div{border-left:0;border-top:1px solid var(--line)}
  form{grid-template-columns:1fr}
  .rule{grid-template-columns:1fr;gap:5px}
  body{font-size:16px}
}
@media (prefers-reduced-motion:no-preference){
  .bar i{animation:grow .8s cubic-bezier(.2,.7,.2,1) both;transform-origin:left}
  tr:nth-child(2) .bar i{animation-delay:.05s} tr:nth-child(3) .bar i{animation-delay:.1s}
  tr:nth-child(4) .bar i{animation-delay:.15s} tr:nth-child(5) .bar i{animation-delay:.2s}
  tr:nth-child(6) .bar i{animation-delay:.25s}
  @keyframes grow{from{transform:scaleX(.12)}to{transform:scaleX(1)}}
}

/* --- Sep 15 2026: per-MLS "for counsel" pages (legal-*.html) -----------------
   A lawyer clearing a data designation reads for structure, not for atmosphere:
   what am I agreeing to, on what authority, how do I get out. So these rules aim
   at scannability and at making quoted policy text visibly distinct from our own
   prose -- counsel has to be able to tell at a glance which words are NAR's and
   which are ours, or the whole document reads as marketing. */
.eyebrow{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:10px}
.fineprint{font-size:14px;color:var(--muted);line-height:1.55}

/* Quoted policy. Monospace-adjacent left rule and a cite line, so a verbatim
   quotation can never be mistaken for our characterisation of it. */
blockquote.pq{margin:14px 0 18px;padding:15px 20px;background:var(--sunk);
  border-left:4px solid var(--brand);border-radius:0 8px 8px 0;font-size:17px;line-height:1.6}
blockquote.pq cite{display:block;font-style:normal;font-size:13.5px;color:var(--muted);margin-top:9px}

.bigcallout{background:var(--brand-soft);border-left:4px solid var(--brand);
  border-radius:0 10px 10px 0;padding:20px 24px;margin:18px 0 26px;font-size:17.5px;line-height:1.6}
.bigcallout p{margin:0 0 10px}.bigcallout p:last-child{margin:0}

/* The asked / not-asked pair. Most readers take in only this. */
.cmp2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0 8px}
.cmp2 > div{border-radius:10px;padding:20px 22px}
.cmp2 .yes{background:var(--brand-soft)}
.cmp2 .no{background:var(--ochre-soft)}
.cmp2 h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}
.cmp2 .yes h3{color:var(--brand-strong)}.cmp2 .no h3{color:var(--ochre)}
.cmp2 ul{margin:0;padding-left:19px}.cmp2 li{margin-bottom:8px;font-size:16px;line-height:1.5}

ol.terms{padding-left:20px;margin:16px 0}
ol.terms li{margin-bottom:12px;font-size:16.5px;line-height:1.6}
ol.steps{padding-left:20px;margin:16px 0}
ol.steps li{margin-bottom:9px;font-size:16.5px;line-height:1.6}

pre.block{background:var(--deep);color:var(--on-deep);border-radius:9px;
  padding:18px 20px;font-family:var(--mono);font-size:13.5px;line-height:1.7;
  overflow-x:auto;white-space:pre;margin:14px 0 18px}

@media(max-width:760px){
  .cmp2{grid-template-columns:1fr}
  blockquote.pq{font-size:16px;padding:13px 16px}
  .bigcallout{font-size:16.5px;padding:17px 19px}
}


/* ============================================================
   COMPONENTS — Sep 16 2026.
   These were duplicated in a <style> block on eight pages and had
   drifted apart, so the same table rendered differently depending
   on which page you were reading. One copy, here, for every page.
   ============================================================ */
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:42px;align-items:center}
.hero-proof{min-width:0}
.proof-label{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
.proof-card{background:#fff;border:1px solid #D7E0E7;border-radius:7px;overflow:hidden;
  box-shadow:0 12px 30px rgba(10,34,57,.16);font-family:'Segoe UI',Calibri,system-ui,sans-serif;color:#1C2733}
.pc-top{background:#1A7A3C;color:#fff;display:flex;justify-content:space-between;font-size:12px;font-weight:700;padding:6px 12px}
.pc-body{padding:12px 14px}
.pc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pc-price{font-size:22px;font-weight:700;color:#0A2239;font-variant-numeric:tabular-nums;line-height:1.1}
.pc-prox{font-size:11px;color:#5B6B7C;margin-top:3px}
.pc-tru{text-align:center;flex:0 0 auto}
.pc-tru .b{display:inline-block;background:#0A2239;color:#fff;font-size:12px;font-weight:700;border-radius:11px;padding:2px 10px}
.pc-tru .l{display:block;font-size:9px;color:#5B6B7C;letter-spacing:.07em;margin-top:3px}
.pc-vs{font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:#5B6B7C;text-align:right;margin:10px 0 2px}
table.pc-adj{width:100%;border-collapse:collapse;font-size:12px}
table.pc-adj td{padding:4px 5px}
table.pc-adj tr:nth-child(odd){background:#F7F9FB}
table.pc-adj td:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
table.pc-adj .p{color:#1A7A3C}
table.pc-adj .n{color:#C0392B}
table.pc-adj .z{color:#9AA8B4}
.pc-foot{background:#0A2239;color:#fff;padding:8px 14px;text-align:right}
.pc-foot span{display:block;font-size:9px;letter-spacing:.09em;color:#A9C2D8;text-transform:uppercase}
.pc-foot b{font-size:19px;font-variant-numeric:tabular-nums}
.proof-note{font-size:12.5px;color:var(--muted);margin-top:9px;font-style:italic}
.cmp-scroll{overflow-x:auto}
table.cmp{border-collapse:collapse;width:100%;min-width:740px;font-size:15px}
table.cmp th{background:var(--ink);color:#fff;text-align:left;padding:12px 14px;font-size:13.5px;
  font-weight:600;vertical-align:top;line-height:1.3}
table.cmp th small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:#9FBDD0;font-weight:400;margin-top:4px}
table.cmp th.us{background:var(--brand-strong)}
table.cmp td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45}
table.cmp td:first-child{font-weight:600;color:var(--ink);width:25%}
table.cmp td.no{color:var(--muted)}
table.cmp td.part{color:var(--ochre)}
table.cmp td.us{background:var(--brand-soft);font-weight:600;color:var(--brand-strong)}
.fineprint{font-size:13px;color:var(--muted);margin-top:10px}
table.cmp.duo{table-layout:fixed;min-width:620px}
table.cmp.duo td:first-child,table.cmp.duo th:first-child{width:40%}
table.cmp.price td{font-variant-numeric:tabular-nums;font-size:16px}
table.cmp.price td:first-child{width:22%;font-variant-numeric:tabular-nums}
table.cmp.price td small{display:block;font-family:var(--body);font-size:11.5px;font-weight:400;
  color:var(--muted);margin-top:3px;letter-spacing:0}
table.cmp.price td.us{font-size:18px}
table.cmp.price td.us small{color:var(--brand-strong);opacity:.8}
.per{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:30px;border:1px solid var(--line);
  border-radius:5px;overflow:hidden}
@media(max-width:620px){.per{grid-template-columns:1fr}}
.per > div{padding:20px 22px;background:var(--surface)}
.per .them{border-right:1px solid var(--line)}
.per .mine{background:var(--brand-soft)}
.per .who{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.per .mine .who{color:var(--brand-strong)}
.per .big{font-family:var(--display);font-weight:700;font-size:clamp(34px,6vw,50px);line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:8px 0 4px}
.per .mine .big{color:var(--brand-strong)}
.per .cap{font-size:14px;color:var(--muted);line-height:1.45}
.per .mine .cap{color:var(--ink)}
.plans{display:grid;grid-template-columns:1fr 1.25fr;gap:14px;margin-top:6px;align-items:stretch}
@media(max-width:820px){.plans{grid-template-columns:1fr}}
.plan ul{margin:12px 0 0;padding-left:0;list-style:none;display:grid;gap:7px}
.plan li{font-size:14.5px;line-height:1.4;padding-left:21px;position:relative;color:var(--ink)}
.plan li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;
  border-radius:50%;background:var(--brand-strong)}
.plan li.off{color:var(--muted)}
.plan li.off::before{background:none;border:1.5px solid var(--line);top:6px}
.plan .pgate{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ochre);margin-top:14px}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:5px;
  padding:20px 19px 22px;display:flex;flex-direction:column}
.plan.pick{border-color:var(--brand-strong);border-width:2px;padding:19px 18px 21px}
.plan .pflag{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--brand-strong);min-height:14px}
.plan .pname{font-family:var(--display);font-weight:700;font-size:19px;margin-top:5px}
.plan .pprice{font-family:var(--display);font-weight:700;font-size:38px;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;margin:7px 0 2px;line-height:1}
.plan .pprice span{font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0}
.plan .pinc{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--brand-strong);
  padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid var(--line)}
.plan .pwho{font-size:14.5px;color:var(--muted);line-height:1.5}
.plan .pwho b{color:var(--ink);font-weight:600}
.plan .pthen{margin-top:auto;padding-top:14px;font-size:13.5px;color:var(--muted);line-height:1.45}
.plan .pthen b{color:var(--ink);font-variant-numeric:tabular-nums}
.rates{margin-top:16px;border:1px solid var(--line);border-radius:5px;background:var(--surface);
  padding:20px 22px}
.rates h3{margin-bottom:4px}
.rates .rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:16px;
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
@media(max-width:720px){.rates .rgrid{grid-template-columns:repeat(2,1fr)}}
.rates .rband{padding:13px 14px;background:var(--sunk);border-right:1px solid var(--line)}
.rates .rband:last-child{border-right:0}
.rates .rband .rr{font-family:var(--display);font-weight:700;font-size:25px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--brand-strong)}
.rates .rband .rw{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.35}
table.eg{border-collapse:collapse;width:100%;min-width:620px;font-size:15px;margin-top:8px}
table.eg th{background:var(--ink);color:#fff;text-align:left;padding:11px 13px;font-size:12.5px;
  font-weight:600;letter-spacing:.02em}
table.eg th:last-child,table.eg td:last-child{text-align:right}
table.eg td{padding:11px 13px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
table.eg td:first-child{font-weight:600;color:var(--ink);font-variant-numeric:normal}
table.eg td.pay{font-weight:700;color:var(--brand-strong);font-size:16px}
table.eg td small{display:block;font-size:11.5px;font-weight:400;color:var(--muted);margin-top:2px}
@media(max-width:700px){table.eg{min-width:0;display:block}
  table.eg thead{display:none}
  table.eg tbody,table.eg tr,table.eg td{display:block;width:auto}
  table.eg tr{border:1px solid var(--line);border-radius:4px;background:var(--surface);
    padding:14px 15px;margin-bottom:10px}
  table.eg td{border:0;padding:2px 0;text-align:left}
  table.eg td:first-child{font-size:15.5px;margin-bottom:8px;line-height:1.35}
  table.eg td:not(:first-child)::before{content:attr(data-l) ": ";color:var(--muted);
    font-weight:400;font-size:13.5px}
  table.eg td.pay{font-size:21px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
  table.eg td.pay::before{content:"Pays: ";color:var(--muted);font-weight:400;font-size:13.5px}
  table.eg td.pay small{display:inline;margin-left:7px}}
.swipe{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:6px 0 0}
@media(max-width:760px){.swipe{display:block}}
.btn.ghost{background:transparent;color:var(--brand-strong);border:2px solid var(--brand-strong)}
.btn.ghost:hover{background:var(--brand-soft)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:30px}
  .hero-proof{order:2}}
.vs-hero{padding-block:40px 30px;border-bottom:1px solid var(--line)}
.vs-hero .eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.vs-hero h1{margin-top:10px;max-width:18ch}
.vs-hero .lede{margin-top:16px;font-size:19px;line-height:1.55;max-width:60ch}
.verdict{margin-top:26px;border-left:4px solid var(--brand-strong);padding:2px 0 2px 18px}
.verdict p{font-size:16.5px;line-height:1.55}
.verdict p + p{margin-top:10px}
.sec-head{margin-block:44px 18px}
.sec-head h2{max-width:22ch}
.sec-head p{margin-top:9px;color:var(--muted);font-size:16.5px}
.fair{background:var(--ochre-soft);border:1px solid var(--line);border-radius:5px;
  padding:22px 24px;margin-top:34px}
.fair h3{margin-bottom:10px}
.fair ul{margin:12px 0 0;padding-left:0;list-style:none;display:grid;gap:9px}
.fair li{font-size:15.5px;line-height:1.45;padding-left:20px;position:relative}
.fair li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--ochre)}
.faq{margin-top:40px;display:grid;gap:2px}
.faq details{background:var(--surface);border:1px solid var(--line);padding:15px 18px}
.faq details[open]{background:var(--sunk)}
.faq summary{font-weight:600;cursor:pointer;font-size:16px;line-height:1.4}
.faq p{margin-top:10px;color:var(--muted);font-size:15.5px;line-height:1.55}

/* ============================================================
   Sep 16 2026 — consistency + polish pass.
   Three things this fixes, in order of how badly they were broken:
   1. The nav CTA was rendering in --muted on --brand-strong,
      because `.navlinks a` (0,1,1) outranks `.btn` (0,1,0).
      That is a 2.2:1 contrast ratio -- the button was unreadable.
   2. Footer is now a three-column structure matching the nav,
      so the top bar is a strict subset of the bottom one.
   3. Softer radii, real shadows and less monospace, because the
      hairline-box-everywhere look read as dated.
   ============================================================ */

/* --- 1. the unreadable button --- */
.navlinks a.btn{color:var(--on-brand)}
.navlinks a.btn:hover{color:var(--on-brand)}

/* --- 2. structured footer --- */
.footcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;
  margin:26px 0 30px;max-width:720px}
@media(max-width:620px){.footcols{grid-template-columns:1fr 1fr;gap:22px}}
.fcol{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.fcol h4{margin:0 0 3px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:500}
.fcol a{font-size:15px;font-weight:600;text-decoration:none;color:var(--ink);opacity:.82}
.fcol a:hover{opacity:1;color:var(--brand-strong)}

/* --- 3. sleeker chrome --- */
:root{--r:12px; --r-sm:9px;
  --shadow:0 1px 2px rgba(10,34,57,.05), 0 8px 24px -12px rgba(10,34,57,.16);
  --shadow-lift:0 2px 4px rgba(10,34,57,.06), 0 16px 40px -16px rgba(10,34,57,.24)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lift:0 2px 6px rgba(0,0,0,.45), 0 18px 44px -16px rgba(0,0,0,.7)}}
:root[data-theme="dark"]{
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lift:0 2px 6px rgba(0,0,0,.45), 0 18px 44px -16px rgba(0,0,0,.7)}

h1,h2,h3{letter-spacing:-.028em}
h1{line-height:1.04}

.btn{border-radius:var(--r-sm);padding:14px 24px;letter-spacing:-.005em;
  box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn:hover{filter:none;background:var(--brand);transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.btn.ghost{box-shadow:none;border:1px solid var(--line);background:var(--surface)}
.btn.ghost:hover{background:var(--surface);border-color:var(--brand);transform:translateY(-1px);
  box-shadow:var(--shadow)}
.btn.small{padding:10px 18px;border-radius:8px}

.plan,.proof-card,.math,.door,.fair,.per,.calc,.rates,.how,.path-note,.gap,.midcta{
  border-radius:var(--r)}
.plan,.proof-card,.door{box-shadow:var(--shadow)}
.plan.pick{box-shadow:var(--shadow-lift)}
.faq details{border-radius:var(--r-sm)}
.faq{gap:8px}

/* the comparison table: drop the solid navy header bar, which was the
   single most dated element on the site, and let the type do the work */
.cmp-scroll{border:1px solid var(--line);border-radius:var(--r);overflow:auto;
  background:var(--surface);box-shadow:var(--shadow)}
table.cmp{font-family:var(--body);font-size:15.5px}
table.cmp th{background:var(--sunk);color:var(--muted);font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;padding:14px 16px;border-bottom:1px solid var(--line);
  vertical-align:bottom;white-space:normal}
table.cmp th small{display:block;margin-top:5px;font-family:var(--body);font-size:12.5px;
  letter-spacing:0;text-transform:none;font-weight:600;color:var(--ink);opacity:.72}
table.cmp th.us{background:var(--brand-soft);color:var(--brand-strong)}
table.cmp td{padding:14px 16px;border-bottom:1px solid var(--line)}
table.cmp tr:last-child td{border-bottom:0}
table.cmp td.us{background:var(--brand-soft)}

/* Sep 16 2026 — mobile guards. Several grids were declared 1fr 1fr with no
   breakpoint, so at phone width the second column pushed the document
   sideways. A grid track is min-content-wide by default; minmax(0,1fr)
   is what actually lets it shrink. */
@media(max-width:700px){
  .gr,.per,.doors,.plans,.math,.cmp2,.rules{grid-template-columns:1fr}
  .math div+div,.rules>div+div{border-left:0;border-top:1px solid var(--line)}
}
.wrap>*{min-width:0}

/* Sep 16 2026 — hero balance and the comp card's colour.
   The h1 was running to four lines at desktop and shouting over
   everything else, the proof card floated 120px below the headline
   it belongs beside, and the card's status bar was a stoplight green
   that appears nowhere else on the site. */
.hero h1{font-size:clamp(32px,3.9vw,47px);max-width:15ch}
.hero .wrap{align-items:start}
.hero-proof{padding-top:4px}
.proof-label{max-width:34ch;line-height:1.5}
.pc-top{background:var(--brand-strong);color:#fff}
table.pc-adj .p{color:var(--brand-strong)}
table.pc-adj .n{color:var(--ochre)}
.killers{align-items:stretch}
.killers li b{text-wrap:balance}
/* the comp card's adjustment table has nowrap rows (a comp line must stay
   on one line); at 390px that pushed the page 8px sideways. Let the card
   itself take the scroll rather than the document. */
.proof-card{overflow:hidden}
.pc-body{overflow-x:auto}
@media(max-width:430px){
  table.pc-adj td{font-size:11.5px;padding-inline:8px}
  .pc-tru{flex-shrink:0}
}
/* let the headline breathe over three lines rather than five, and start the
   proof card level with the eyebrow instead of 90px below it */
.hero h1{max-width:17ch}
.hero-proof{padding-top:0}
.proof-label{margin-bottom:12px;white-space:nowrap}
@media(max-width:900px){.proof-label{white-space:normal}}

/* Section headings were a two-column grid: title left, subtitle far right,
   with a canyon between them that moved depending on how long the title was.
   Stack them. It reads as one thought instead of two. */
.sec-head{grid-template-columns:1fr;gap:12px;align-items:start;margin-bottom:34px;max-width:62ch}
.sec-head h2{max-width:24ch}
.sec-head p{font-size:17.5px}

/* Sep 16 2026 — the $999 ceiling used to be a third plan card headed "Not a plan
   you pick", which is a confusing thing to put on a pricing page: a column the
   reader is told not to choose. It is a property of the two real plans, so it
   reads as one now. */
.capnote{margin-top:18px;background:var(--brand-soft);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 24px}
.capnote h3{margin:0 0 8px;color:var(--brand-strong)}
.capnote p{font-size:16px;line-height:1.55;max-width:70ch}
.capnote p + p{margin-top:10px;color:var(--muted)}
.capnote p + p b{color:var(--ink)}

/* Sep 16 2026 — "how your bill works" was a three-step numbered list, but a
   monthly fee plus cents per report is not a sequence, and numbering it implied
   an order that does not exist. One sentence of model, then two real months. */
.howlede{font-size:18px;line-height:1.5;max-width:56ch;margin-bottom:18px}
.howeg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:700px){.howeg{grid-template-columns:1fr}}
.howeg > div{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.howeg .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.howeg b{font-family:var(--display);font-weight:700;font-size:34px;line-height:1.05;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--brand-strong)}
.howeg .v{font-size:15px;line-height:1.5;color:var(--muted);margin-top:2px}

/* the per-report contrast moved directly under the prices -- it is the number
   that decides whether an agent runs a report at all, so it leads */
.bighead{font-size:clamp(24px,3vw,33px);margin-top:40px}
.bigsub{max-width:64ch;color:var(--muted);margin:10px 0 0;font-size:16.5px;line-height:1.55}
.per.big{margin-top:18px}
.per.big .big{font-size:clamp(40px,7vw,62px)}

/* Sep 16 2026 — .callout sets its own background (--brand-soft) but never set a
   text colour, so inside .path (which sets color:var(--on-deep) for the dark
   ground) it rendered pale text on a pale panel: 1.03:1, effectively invisible.
   Tom reported it twice as "blank areas at the bottom" and he was right both
   times -- the boxes were there, the words weren't.

   The rule this is an instance of: a component that owns its background owns its
   foreground. Anything that sets background here also sets color. */
.callout{color:var(--ink)}
.callout h3{color:var(--ink)}
.callout a{color:var(--brand-strong)}
.path .callout,.path .callout h3,.path .callout p{color:var(--ink)}
.path .callout a{color:var(--brand-strong)}

/* Sep 16 2026 — three more the contrast audit caught, all the same shape: a
   colour that is right in one theme and wrong in the other. */

/* 1. My own .callout a rule above also hit buttons inside callouts, painting
      brand-strong text on a brand-strong background: 1.0:1. Links only. */
.callout a.btn,.path .callout a.btn{color:var(--on-brand)}
.callout a.btn.ghost,.path .callout a.btn.ghost{color:var(--ink)}

/* 2. table.eg th hardcoded #fff on var(--ink). --ink is near-white in dark mode,
      so the header row was white on white -- 1.18:1. --deep/--on-deep are dark
      and pale respectively in BOTH themes, which is what a fixed-dark header
      needs. */
table.eg th{background:var(--deep);color:var(--on-deep)}

/* 3. td.us used --brand-strong on --brand-soft: fine on the light ground (7.4:1),
      only 3.93:1 in dark. --ink tracks the theme and keeps the brand tint in the
      cell background where it belongs. */
table.cmp td.us{color:var(--ink)}
table.cmp th.us{color:var(--ink)}
.per .who,.per .mine .who{color:var(--muted)}
.per .mine .big{color:var(--ink)}

/* Sep 16 2026 — the report facsimiles (.proof-card on the homepage, .sheet and
   .compcard on the sample page) depict a printed page. They set background:#fff
   outright, so they are white in dark mode too -- but their text was using theme
   tokens, which flip pale and leave pale-on-white. A picture of paper needs fixed
   ink, not theme ink. */
.proof-card{color:#0A2239}
.proof-card .pc-prox,.proof-card .pc-vs{color:#5b6b7c}
table.pc-adj .p{color:#1a6b4a}
table.pc-adj .n{color:#9a5a12}
table.pc-adj .z{color:#5b6b7c}
.proof-card .pc-price{color:#0A2239}

/* the sponsor half-price story was a quiet tinted box near the end of pricing.
   It halves the bill -- it gets the same treatment as the per-report number. */
.sponsor-fine{margin-top:16px;font-size:14px;line-height:1.55;color:var(--muted);max-width:76ch}
table.vs td.dim{color:#5b6b7c}

/* Sep 16 2026 — table.vs on sample-report.html was inheriting the global
   td{white-space:nowrap}, which exists for the comp grids where a row must stay
   on one line. .vs carries full sentences, so every cell in the right-hand
   column ran past the edge of the page facsimile and was clipped mid-word.
   The same mistake was fixed for .cmp and .eg on Sep 15; .vs was missed. */
table.vs{table-layout:fixed;width:100%}
table.vs td,table.vs th{overflow-wrap:anywhere}

/* Sep 16 2026 — the sample page used to be a hand-built HTML replica of the
   report. It drifted from the real thing (wrong page count, copy the report no
   longer contained, a table clipped mid-word) and an agent looks once. These are
   now images rendered from the actual PDF, so the page cannot go stale without
   the report going stale with it. Tom: "let the report do the talking" -- so the
   captions are a page number and a name, nothing more. */
.pages-lede{margin:44px 0 20px;max-width:60ch}
.pages-lede p{margin-top:8px;color:var(--muted);font-size:16.5px}
.pagelist{display:grid;gap:34px;justify-items:center}
.pagefig{margin:0;width:100%;max-width:935px}
.pagefig img{display:block;width:100%;height:auto;border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--shadow);background:#fff}
.pagefig figcaption{display:flex;align-items:baseline;gap:12px;margin-top:10px;
  padding-left:2px}
.pagefig .pnum{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.pagefig .plabel{font-size:15px;font-weight:600;color:var(--ink)}
.pages-foot{margin-top:38px;display:flex;gap:12px;flex-wrap:wrap}

/* Sep 16 2026 — Tom: "when I click on the report I want the report." The sample
   page opened with a full-height hero before a single page of the report was
   visible. One compact band, then the pages. */
.rep-top{padding-block:30px 22px;border-bottom:1px solid var(--line)}
.rep-top-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.rep-top h1{font-size:clamp(28px,3.4vw,40px);margin-top:8px;max-width:20ch}
.rep-top h1 em{font-style:normal;color:var(--brand)}
.rep-top-note{margin-top:14px;font-size:15px;line-height:1.55;color:var(--muted);max-width:78ch}
.rep-top + section{padding-top:34px}