/* TrueCostProp design system v22 (2026-10-17). Loaded LAST on every page; overrides v1-v21 tokens.
   Principles (see /workspace/site-deploy/design-benchmark.md): one flat primary CTA colour, WCAG AA text,
   4px spacing scale, 1.2 type scale, hairline borders, flat surfaces, system fonts only, no layout shift.
   No external requests, no web fonts, no images. */

/* ---------- 1. Tokens ---------- */
:root{
  /* surfaces: 4 steps of one cool ink-navy ramp */
  --bg:#080C12;--bg2:#0D131C;--card:#121A27;--card2:#18222F;
  /* text (contrast on --bg / --card, computed): tx 17:1 / 15:1, tx2 12:1 / 10:1, mu 7.9:1 / 6.9:1 */
  --tx:#F3F5F8;--tx2:#D0D7E1;--mu:#9DA8B9;
  /* accents: teal = data/links/positive, gold = the offer (primary CTA only) */
  --ac:#5EEAD4;--ac2:#2DD4BF;--am:#F0CB78;--am2:#D4AC5C;
  --ok:#4ADE80;--bad:#FB7185;--warn:#F0CB78;
  --bd:rgba(148,163,184,.17);--bd2:rgba(148,163,184,.30);
  --r:12px;--r2:16px;
  /* spacing scale, 4px base */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  /* type scale, ratio 1.2 */
  --t-xs:.75rem;--t-sm:.875rem;--t-md:1rem;--t-lg:1.125rem;--t-xl:1.25rem;--t-2xl:1.5rem;--t-3xl:1.875rem;--t-4xl:2.375rem;--t-5xl:3rem;
  /* system stacks only: nothing to download, no font swap, no layout shift */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --hdr:60px;
}

/* ---------- 2. Base ---------- */
body{font-size:1rem;line-height:1.6;background:var(--bg);background-image:none}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.15}
h1{font-size:clamp(var(--t-3xl),5.2vw,var(--t-5xl));letter-spacing:-.03em;line-height:1.08}
h2{font-size:clamp(var(--t-2xl),3vw,var(--t-3xl));margin-top:var(--s7)}
h3{font-size:var(--t-lg)}
.lead,.sub{font-size:clamp(var(--t-md),1.5vw,var(--t-lg));color:var(--tx2);line-height:1.6;max-width:64ch}
.muted,.small,.fine,.fig,.board-f,.kf-note,.pick-foot{color:var(--mu)}
.small{font-size:var(--t-sm)}
a{text-underline-offset:3px}
.wrap{max-width:1160px}
.kick,.kicker,.eyebrow{letter-spacing:.08em}
.kick{font-size:var(--t-xs);font-weight:700;color:var(--ac)}
:focus-visible{outline:3px solid var(--am);outline-offset:2px}
html{scroll-padding-top:calc(var(--hdr) + 16px)}

/* ---------- 3. Header, strip, disclosure ---------- */
.top{background:rgba(8,12,18,.94);border-bottom:1px solid var(--bd);-webkit-backdrop-filter:none;backdrop-filter:none}
.top.v3{border-bottom:1px solid var(--bd)}
.nav3{min-height:var(--hdr);padding-top:6px;padding-bottom:6px}
.pstrip{border-bottom:1px solid var(--bd);background:var(--bg2)}
.pstrip-lbl{background:var(--bg2);color:var(--am);border-right:1px solid var(--bd);font-size:11px}
.pb{border-color:var(--bd2);background:var(--card);color:var(--tx)}
.pb:hover,.pb:focus{border-color:var(--am);box-shadow:none}
.pb-lg{border-color:var(--am);background:rgba(240,203,120,.08)}
.disclosure{color:var(--mu);font-size:var(--t-xs);line-height:1.5;padding:var(--s2) 20px 0}
.disclosure a,.feat-disc a{color:var(--tx2)}
.feat-disc,.v22-disc{margin:var(--s3) 0;padding:var(--s3) var(--s4);border:1px solid var(--bd);border-left:3px solid var(--am);border-radius:0 var(--r) var(--r) 0;background:var(--bg2);color:var(--tx2);font-size:var(--t-sm);line-height:1.55;max-width:none}
.feat-disc strong{color:var(--tx)}
.nbadge{background:rgba(240,203,120,.16);color:var(--am)}

/* ---------- 4. Buttons: ONE primary (flat gold), quiet ghost ---------- */
.btn{min-height:44px;padding:10px 18px;border-radius:10px;font:700 var(--t-md)/1.2 var(--font);transform:none!important}
.btn.primary,.btn.gold,.nav-cta3.btn{background:var(--am);background-image:none;color:#17120A;border:1px solid var(--am);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 1px 2px rgba(0,0,0,.4)}
.btn.primary:hover,.btn.gold:hover,.nav-cta3.btn:hover{background:#F7DA94;border-color:#F7DA94;color:#17120A;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 6px 18px -8px rgba(240,203,120,.6)}
.btn.primary:active{background:#E6BE66}
.btn.primary{font-size:var(--t-lg);padding:14px 24px;min-height:52px}
.btn.big{min-height:52px}
.nav-cta3.btn{min-height:42px;padding:9px 16px;font-size:var(--t-sm)}
.mnav-panel .btn.primary{font-size:var(--t-md);padding:12px 16px}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--bd2)}
.btn.ghost:hover{background:rgba(255,255,255,.05);border-color:var(--tx2);color:var(--tx)}
.copy-btn{min-height:36px;border-radius:8px;border:1px solid var(--bd2);background:var(--card2);color:var(--tx);font-weight:600}
.copy-btn:hover{border-color:var(--am);color:var(--am)}
code.coupon{background:rgba(240,203,120,.1);color:var(--am);border:1px dashed rgba(240,203,120,.55);border-radius:8px;padding:3px 10px}
.textlink{color:var(--tx);border-bottom:1px solid var(--bd2)}

/* ---------- 5. Surfaces ---------- */
.card,.board,.metric,.chart,.pick-i,.feat-card,.kf,.pc>div,.bb-card,.steps3>div,.honest>div,.faq3 details,.chips a,.h2h a,.soon-list li,.statband div{box-shadow:none}
.card,.pc>div,.bb-card,.steps3>div,.chips a,.h2h a,.soon-list li{background:var(--card);background-image:none;border:1px solid var(--bd)}
.board{background:var(--card);border:1px solid var(--bd2);border-radius:var(--r2)}
.feat-card{border-radius:var(--r2);background-image:none;background:var(--card)}
.statband{border-radius:var(--r);margin:var(--s5) 0 var(--s2)}
.statband div{background:var(--card);padding:var(--s4) var(--s5)}
.statband b{font-size:var(--t-3xl);color:var(--tx);line-height:1.1}
.statband span{color:var(--mu);font-size:var(--t-sm);line-height:1.4}
.trustrow{color:var(--tx2)}
.partner-tag,.firm-badge{border-radius:6px}
.eyebrow{border-color:rgba(94,234,212,.35);background:rgba(94,234,212,.08);color:var(--ac)}

/* ---------- 6. Section rhythm: 64 desktop / 48 mobile ---------- */
.sec,.sec3{padding-top:var(--s8)}
.sec3-h h2,.h2big{font-size:clamp(var(--t-2xl),3.2vw,var(--t-4xl));letter-spacing:-.025em;line-height:1.12;max-width:none}
.display{font-size:clamp(var(--t-3xl),5.4vw,3.5rem);letter-spacing:-.035em;line-height:1.05;max-width:20ch}

/* ---------- 7. Home: hero, deals, table ---------- */
.h3ro{padding:var(--s7) 0 var(--s5);gap:var(--s7);align-items:start}
.h3ro h1{font-size:clamp(2.1rem,5.2vw,3.5rem)}
.h3ro h1 em{color:var(--am);font-style:normal}
.h3ro .cta-row .btn.primary{min-width:260px}
.h3ro .micro{margin:var(--s3) 0 0;color:var(--tx2);font-size:var(--t-sm)}
.h3ro .micro b{color:var(--tx)}
.board li{padding:var(--s3) var(--s1)}
.board .bv{font-size:var(--t-lg)}
.home3 .sec{padding-top:var(--s8)}

/* ---------- 8. Tables (comparison): sticky header, sticky first + action columns ---------- */
.tablewrap{border:1px solid var(--bd);border-radius:var(--r);background:var(--card);overflow-x:auto;overscroll-behavior-x:contain}
table.firms{font-size:var(--t-sm);line-height:1.45}
.firms th,.firms td{padding:14px 12px;border-bottom:1px solid var(--bd)}
.firms thead th{background:var(--bg2);color:var(--mu);font-size:var(--t-xs);letter-spacing:.07em;border-bottom:1px solid var(--bd2)}
.firms tbody tr:hover{background:rgba(148,163,184,.06)}
.firms tbody th strong{font-size:var(--t-md);color:var(--tx)}
tr.best{background:rgba(94,234,212,.08)!important;box-shadow:inset 3px 0 0 var(--ac)}
@media(min-width:721px){
  .firms tbody th[data-l="Firm"],.firms thead th:first-child{position:sticky;left:0;z-index:2;background:var(--card);box-shadow:1px 0 0 var(--bd)}
  .firms thead th:first-child{background:var(--bg2);z-index:3}
  .firms td.actions,.firms thead th:last-child{position:sticky;right:0;z-index:2;background:var(--card);box-shadow:-1px 0 0 var(--bd),-14px 0 14px -14px rgba(0,0,0,.7)}
  .firms thead th:last-child{background:var(--bg2);z-index:3}
  .firms tbody tr:hover th[data-l="Firm"],.firms tbody tr:hover td.actions{background:#161F2D}
  .firms td.actions .btn{min-height:40px;padding:8px 14px;font-size:var(--t-sm)}
}
.mfilter button,.tsort button{min-height:40px;border-radius:999px;border:1px solid var(--bd2);background:transparent;color:var(--tx2);font-weight:600}
.mfilter button[aria-pressed="true"],.tsort button[aria-pressed="true"]{background:var(--tx);color:#0B0F15;border-color:var(--tx)}
.tag{background:#222C3B}

/* ---------- 9. Deals page: top picks as a 3-up strip, rows as scannable table-cards ---------- */
.dh{padding:var(--s6) 0 var(--s2)}
.dh h1{font-size:clamp(var(--t-3xl),4.4vw,var(--t-4xl))}
.dh-stats span{border-radius:var(--r);background:var(--card);border-color:var(--bd);color:var(--mu);font-size:var(--t-sm)}
.dh-stats b{font-size:var(--t-2xl);color:var(--tx)}
.launch{margin:var(--s4) 0 0;border-radius:var(--r);border-color:rgba(94,234,212,.4);background:rgba(94,234,212,.07)}
.launch-tag{background:var(--ac);color:#04201c}
.pick{margin:var(--s5) 0 var(--s4);padding:var(--s5);border-radius:var(--r2);border:1px solid rgba(240,203,120,.4);background:var(--card)}
.pick h2{margin:var(--s2) 0 var(--s3);font-size:clamp(var(--t-xl),2.6vw,var(--t-3xl))}
.adtag{border-color:var(--am);color:var(--am);border-radius:6px}
@media(min-width:1000px){
  .pick-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);align-items:stretch}
  .pick-list .pick-i{display:flex;flex-direction:column}
  .pick-list .pick-i .pick-act{margin-top:auto;padding-top:var(--s3)}
  .pick-list .pick-i:nth-child(n+4){grid-column:span 3}
}
.pick-i{border-radius:var(--r);background:var(--bg2)}
.pick-def{border-color:rgba(94,234,212,.6);background:rgba(94,234,212,.06)}
.pick-tag{background:var(--ac);color:#04201c}
.dl-list{gap:var(--s3)}
.dl{border-radius:var(--r2);border:1px solid var(--bd);background:var(--card);background-image:none;padding:var(--s4) var(--s5);grid-template-columns:minmax(210px,1.2fr) 96px minmax(240px,2fr) 128px 156px}
.dl:hover{border-color:var(--bd2)}
.dl-off{border-radius:var(--r);border:1px dashed rgba(240,203,120,.55);background:rgba(240,203,120,.08)}
.dl-off b{font-size:var(--t-xl)}
.dl-trap,.dl-what .dl-trap{border-left:3px solid var(--am);background:rgba(240,203,120,.07);color:var(--tx2);font-size:var(--t-sm)}
.dl-trap b{color:var(--am)}
.dl-tc b{font-size:var(--t-lg);color:var(--tx)}
.dl-act .btn{width:100%;display:block;text-align:center}
.dl-act .small{color:var(--tx2)}

/* ---------- 10. Review pages (lp-*): verdict box beside the title ---------- */
.v9p .lp-hero{padding:var(--s6) 0 var(--s3)}
.v9p .lp-box{background:var(--card);border:1px solid rgba(240,203,120,.4);border-radius:var(--r2);padding:var(--s5)}
.v9p .lp-code code{font-size:var(--t-2xl);border:1px dashed rgba(240,203,120,.6);color:var(--am);border-radius:10px}
.v9p .lp-cta{display:flex;width:100%;justify-content:center;font-size:var(--t-lg);padding:14px 24px}
.v9p table.lp-t{border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;background:var(--card);border-collapse:separate;border-spacing:0}
.v9p table.lp-t th{width:48%;color:var(--mu);font-weight:600;font-size:var(--t-sm);background:transparent}
.v9p table.lp-t td{font-weight:700;font-variant-numeric:tabular-nums}
.v9p table.lp-t td,.v9p table.lp-t th{padding:12px var(--s4)}
.v9p table.lp-t tr:last-child>*{border-bottom:0}
.v9p .grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s5)}
.v9p .grid2>div{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:var(--s4) var(--s5)}
.v9p .grid2>div:first-child{border-top:3px solid var(--ok)}
.v9p .grid2>div:last-child{border-top:3px solid var(--bad)}
.v9p .grid2 h2{margin:0 0 var(--s2);font-size:var(--t-lg)}
.v9p .grid2 ul{margin:0;padding-left:20px;color:var(--tx2)}
.v9p .lp-faq details{border:1px solid var(--bd);border-radius:var(--r);background:var(--card);padding:0 var(--s4);margin:var(--s2) 0}
.v9p .lp-faq summary{padding:var(--s4) 0;min-height:44px}
.v9p .lp-more a{padding:var(--s2) 0}
@media(min-width:900px){
  .v9p .lp-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);column-gap:var(--s7);align-items:start}
  .v9p .lp-hero>.kick,.v9p .lp-hero>h1,.v9p .lp-hero>.feat-disc{grid-column:1}
  .v9p .lp-hero>.lp-box{grid-column:2;grid-row:1 / span 4;margin:0;position:sticky;top:calc(var(--hdr) + var(--s4))}
}
@media(max-width:720px){.v9p .grid2{grid-template-columns:1fr}}

/* firm pages (/firms/x/) */
.fr-head{padding-top:var(--s5)}
.fr-head img{border-radius:var(--r)}
.kf{border-radius:var(--r2);border:1px solid rgba(240,203,120,.4);background:var(--card);background-image:none}
.kf-cta.btn{min-height:52px}
.pc-pro{border-top:3px solid var(--ok)!important}.pc-con{border-top:3px solid var(--bad)!important}
.pc-pro li::before{color:var(--ok)}.pc-con li::before{color:var(--bad)}
.fp-cost{border-radius:var(--r2)}

/* ---------- 11. Sticky CTAs (mobile only; fixed = no layout shift) ---------- */
@media(max-width:720px){
  .sticky-course{left:0;right:0;bottom:0;padding:var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));border-radius:0;border:0;border-top:1px solid var(--bd2);background:var(--card2);box-shadow:0 -10px 30px -12px rgba(0,0,0,.7);gap:var(--s2)}
  .sticky-course a{color:var(--tx);padding:0;min-height:44px;font-size:var(--t-sm);gap:var(--s3)}
  .sticky-course .sc-t b{color:var(--am)}
  .sticky-course .sc-p{background:var(--am);color:#17120A;border-radius:10px;padding:10px 14px;font-weight:700}
  .sticky-course button{background:transparent;color:var(--tx2);border:1px solid var(--bd2);border-radius:10px}
  body.has-sticky{padding-bottom:76px}
}
.v22-bar{display:none}
@media(max-width:720px){
  .v22-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));background:var(--card2);border-top:1px solid var(--bd2);box-shadow:0 -10px 30px -12px rgba(0,0,0,.7)}
  .v22-bar span{flex:1;font-size:var(--t-sm);line-height:1.3;color:var(--tx2)}
  .v22-bar b{color:var(--am)}
  .v22-bar a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:10px;background:var(--am);color:#17120A;font-weight:700;font-size:var(--t-sm);text-decoration:none}
  body.has-v22-bar{padding-bottom:76px}
}

/* ---------- 12. Footer ---------- */
.foot{margin-top:var(--s8);border-top:1px solid var(--bd);color:var(--tx2)}
.footnav h2{color:var(--mu);font-size:var(--t-xs);letter-spacing:.09em}
.foot a{color:var(--tx2)}
.next-step{border-radius:var(--r2);border:1px solid rgba(240,203,120,.4);background:var(--card);background-image:none}
.finale{background:var(--card);border-radius:var(--r2)}
.faq3 details{border-radius:var(--r)}

/* ---------- 13. Mobile ---------- */
@media(max-width:720px){
  body{font-size:1rem}
  h2{margin-top:var(--s6)}
  .sec,.sec3,.home3 .sec{padding-top:var(--s7)}
  .h3ro{padding:var(--s5) 0 var(--s3);gap:var(--s5)}
  .h3ro .cta-row .btn.primary,.btn.primary{width:100%}
  .statband b{font-size:var(--t-2xl)}
  .statband div{padding:var(--s3) var(--s4)}
  .dl{padding:var(--s4)}
  .dl-act{flex-direction:column}
  .dl-act .btn{width:100%;min-height:48px}
  .firms tr{border-radius:var(--r);background:var(--card);border:1px solid var(--bd)}
  .firms td::before{color:var(--mu)}
  .firms td.actions .btn{min-height:44px}
  .pick{padding:var(--s4)}
  .v9p .lp-box{padding:var(--s4)}
}
@media(max-width:380px){h1{font-size:1.75rem}.btn.primary{padding:12px 16px}}

/* ---------- 14. Home quick-jump (table-of-contents row), featured grid, deals rows ---------- */
.v22-jump{display:flex;gap:var(--s2);margin:var(--s4) 0 0;padding:var(--s1) 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.v22-jump::-webkit-scrollbar{display:none}
.v22-jump a{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1px solid var(--bd2);border-radius:999px;color:var(--tx2);font-size:var(--t-sm);font-weight:600;text-decoration:none;white-space:nowrap}
.v22-jump a:hover{border-color:var(--ac);color:var(--tx)}
.v22-disc{margin:var(--s4) 0}
.feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:720px){.feat-grid{grid-template-columns:1fr}}
@media(min-width:1001px){.dl{grid-template-columns:minmax(200px,1.1fr) 88px minmax(220px,2fr) 120px 200px}}
@media(max-width:720px){
  .dh-stats{gap:var(--s2)}
  .dh-stats span{flex-direction:row;align-items:center;gap:var(--s3);min-width:0;width:100%;padding:var(--s3) var(--s4)}
  .dh-stats b{min-width:28px;font-size:var(--t-xl)}
}