/* ================================================================
   Five West Financial: off-white theme (Sept 25, 2026)
   One layer appended after each page's own styles. It remaps the shared
   color tokens and overrides the few components that hard-code colors.
   ================================================================ */

/* 1. Surfaces and text: warm off-white page, white cards, neutral lines, darker gray text */
:root{
  --sand:#FBFAF7;        /* page background (was beige #F7F1E6) */
  --sand-2:#FFFFFF;      /* cards and former tinted bands (was cream #FCF8F0) */
  --alt:#F4F2EE;         /* the one light tint left: closing call to action (was tan #EFE4D3) */
  --line:#E7E2D9;        /* hairlines (was beige #E6D9C4) */
  --line-2:#D6CFC2;
  --ink-dim:#5C5244;     /* secondary text: 7.1:1 on off-white (was #766A57, 4.2:1 on tan) */
  --ink-faint:#6B6150;
  --shadow-sm:0 6px 18px rgba(40,30,20,.06);
  --shadow:0 16px 40px rgba(40,30,20,.08);
  --cream:#F4F2EE;       /* Privacy and Terms pages use their own two tokens */
  --cream-light:#FBFAF7;
}
body{background:#FBFAF7}

/* 2. Header: off-white glass instead of beige */
header.site{background:rgba(251,250,247,.86)}
header.site.scrolled{background:rgba(251,250,247,.96)}
@media(max-width:960px){ header.site{background:rgba(251,250,247,.97)} }

/* 3. Heroes: the one soft tint, a white-to-off-white fade */
.hero,.pghero,.post-head{background:linear-gradient(180deg,#FFFFFF 0%,#F6F4EF 100%)}

/* 4. Tinted bands become thin divider lines */
.block.tint{background:transparent}
.band,.band .stat,.stat{background:#FFFFFF}
.apply{background:transparent}

/* 5. Decorative yellow and sage out of text areas; clay stays for buttons, links and small accents */
.answer-box{border-left-color:var(--clay-deep)}
.answer-box .ab-lab{color:var(--clay-deep)}
ul.checks li::before{color:var(--ink)}
.feat .ck{background:var(--ink)}
.tlist.ben li::before{background:var(--clay-deep)}
.tier .tsub{color:var(--ink-2)}
.tnote{border-left-color:var(--clay-deep)}
.pquote{border-left-color:var(--clay)}
.vread a{border-left-color:var(--line-2)}
.vread a:hover{border-left-color:var(--clay)}
.readbar i{background:var(--clay)}
.why{border-left-color:var(--clay)}
.prod .pf{color:var(--ink-dim)}
.edge.prods .ptag{color:var(--ink-2)}
.edge.prods .pic,.callout-ic{background:#F3F0EA}
.est-out{background:#F7F5F1}
.pbar{background:#F4F2EE}
.pbar i{background:#D6CFC2}
.post-body table.cmp td:first-child,.tier-table .tr:not(.th)>span:first-child{background:#F7F5F1}

/* 6. Funding Estimator: from a dark card with yellow to a light card with clay */
.qc{--dk-bg:#FFFFFF;--dk-bubble:#FBFAF7;--dk-bubble-2:#FFFFFF;--dk-dim:#5C5244;--dk-faint:#6B6150;--dk-line:#E7E2D9;--dk-line-2:#D6CFC2;--dk-text:#2A2219;--dk-text-2:#3D3428;--sun:#A8482A;
    border:1px solid var(--line-2);box-shadow:0 18px 44px rgba(40,30,20,.08)}
.qc-bar{background:#F7F5F1}
.qc-safe{border-color:rgba(95,112,80,.35);background:rgba(95,112,80,.08);color:#46553A}
.qc .qc-money:focus-within,.qc .qc-input:focus{border-color:var(--clay-deep);box-shadow:0 0 0 3px rgba(168,72,42,.14);background-color:#FFFFFF}
.qc-err{color:#A12A1B}
.qc-seg label:hover span{border-color:rgba(168,72,42,.5)}
.qc-seg input:checked+span{border-color:var(--clay-deep);background:rgba(168,72,42,.06);color:var(--ink);box-shadow:inset 0 0 0 1px var(--clay-deep)}
.qc-btn{color:#FCF6EE;box-shadow:0 8px 22px rgba(168,72,42,.18)}
.qc-btn:hover{background:var(--clay);border-color:var(--clay)}
.qc-btn.ghost{color:var(--ink)}
.qc-btn.ghost:hover{border-color:var(--clay);color:var(--clay-deep)}
.qc-link{text-decoration-color:rgba(92,82,68,.4)}
.qc-big{border-color:rgba(168,72,42,.28);background:linear-gradient(160deg,rgba(168,72,42,.05),rgba(168,72,42,.015))}
.qc-tag{border-color:rgba(168,72,42,.35);color:var(--clay-deep)}
.qc-fine{color:#6B6150}
.qc-card.on{border-color:rgba(95,112,80,.4);background:linear-gradient(rgba(95,112,80,.05),rgba(95,112,80,.05)),#FFFFFF}
.qc-card .qc-note{border-left-color:rgba(168,72,42,.45)}
.qc select.qc-input option{background:#fff;color:#332A1F}

/* 7. Other page heads, icon tiles, tag chips and hover states */
.page-head,.phero{background:linear-gradient(180deg,#FFFFFF 0%,#F6F4EF 100%)}
.callout-ic,.prod .pic,.offer .oic,.pfeat .pic,.edge.prods .pic,.bsec-ic,.feat-ic{background:#F3F0EA}
.bsec.is-empty .bsec-ic{background:#F1EEE8}
.bsec-n,.dcard .dtag{background:#F1EEE8}
.ftag-prod{background:#F4EEEA}
.ftag-ind{background:#F1EEE8;color:var(--ink-2)}
.sub-h:hover,.sub[open]>.sub-h,.ss-h:hover,.ss[open]>.ss-h{background:#F4F2EE}

/* 8. Boxes inside guides */
.callout{background:var(--card);border-left-color:var(--clay)}
html .fwbox,.rate-note{background:#F7F5F1}
.rate-note{border-color:var(--line);border-left-color:var(--clay)}
.keyfacts{background:#FFFFFF;border-color:var(--line)}
.dyk{background:#FFFFFF}
.dyk-eyebrow{color:var(--clay-deep)}
.contact-card{border-left-color:var(--clay-deep)}
.itm::before{background:var(--clay-deep)}
.side li::before{color:var(--ink)}

/* 9. Homepage: estimator toggles, Section 179 example, Quote Builder teaser card */
.sb.on{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.est179{background:#F7F5F1;border-color:var(--line)}
.est179 .ex-lab{color:var(--ink-dim)}
.est179 .ex-val{color:var(--ink)}
.db-card{background:#FFFFFF;color:var(--ink);border:1px solid var(--line-2);box-shadow:0 18px 44px rgba(40,30,20,.08)}
.db-card:hover{box-shadow:0 24px 54px rgba(40,30,20,.12)}
.db-dot,.qc-dot{background:var(--clay);animation-name:fwpulse}
@keyframes fwpulse{0%{box-shadow:0 0 0 0 rgba(194,101,63,.45)}70%{box-shadow:0 0 0 10px rgba(194,101,63,0)}100%{box-shadow:0 0 0 0 rgba(194,101,63,0)}}
@media(prefers-reduced-motion:reduce){.db-dot,.qc-dot{animation:none}}
.db-rate{color:var(--clay-deep)}
.db-rate small,.db-sub{color:var(--ink-dim)}
.db-unl span{border-color:var(--line);color:var(--ink-dim)}
.db-unl span.on{color:var(--ink);border-color:rgba(95,112,80,.4);background:rgba(95,112,80,.06)}
.db-unl b{color:#46553A}
.db-unl span:not(.on) b{color:var(--ink-faint)}
.db-go{color:var(--clay-deep)}

/* 10. Small clay labels: the darker clay already used on most guides, so they pass AA contrast on white */
.eyebrow,.pcard .pk,.feat-lab,.tier .tnum,.val .vnum,.rl .rk,.read .rk,.kt .kt-lab,.post-body .kt .kt-lab,.smini{color:var(--clay-deep)}
.eyebrow::before,.smini::before{background:var(--clay-deep)}

/* 11. Left-edge accents on notes and callouts: clay instead of yellow or sage */
.qnote,.apply-card,.xlink,.db-cta{border-left-color:var(--clay)}
.pr-quote{border-left-color:var(--clay)}
.note:not(.est-out .note){background:#F7F5F1;border-color:var(--line);border-left-color:var(--clay)}
.note:not(.est-out .note) b{color:var(--ink)}
.dcard.alt .dtag{background:#F1EEE8;color:var(--ink-2)}

/* 12. Apply, Quote Builder and portal demo: off-white app bar and a clay progress bar */
.appbar{background:rgba(251,250,247,.9)}
.appbar .bar i{background:var(--clay)}
input:disabled{background:#F4F2EE}

/* 13. Phone-only sticky bars: guide call-to-action bar, Quote Builder and portal demo step buttons */
.m-cta{background:rgba(251,250,247,.96)}
@media(max-width:640px){ .nav{background:linear-gradient(180deg,rgba(251,250,247,0),rgba(251,250,247,.97) 30%)} }