/* DESIGN A (Zevy picked 2026-11-10) · "Modify My Loan website style", from projects/portal-design optA.css:
   dark maroon sidebar with icons, cream background, orange pill buttons, Archivo Black + Barlow Condensed headings,
   Inter for reading text, soft status chips with a dot, phone bottom bar. */
@font-face{font-family:'Archivo Black';font-display:block;src:url(/static/fonts/archivo-black-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:block;src:url(/static/fonts/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:block;src:url(/static/fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:400;font-display:block;src:url(/static/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:600;font-display:block;src:url(/static/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-weight:700;font-display:block;src:url(/static/fonts/inter-latin-700-normal.woff2) format('woff2')}
/* body font options (pick one in --body below) */
@font-face{font-family:'Source Sans 3';font-weight:400;font-display:swap;src:url(/static/fonts/source-sans-3-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-weight:600;font-display:swap;src:url(/static/fonts/source-sans-3-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-weight:700;font-display:swap;src:url(/static/fonts/source-sans-3-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-weight:400;font-display:swap;src:url(/static/fonts/figtree-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-weight:600;font-display:swap;src:url(/static/fonts/figtree-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-weight:700;font-display:swap;src:url(/static/fonts/figtree-latin-700-normal.woff2) format('woff2')}
:root{--bur:#2e1113;--bur2:#4a1d22;--org:#f05222;--org-ink:#cf3f16;--pink:#d098c5;--bg:#fbf5ee;--card:#fffdfa;--line:#eadcd0;--line-soft:#f2e7dd;--mut:#7d6164;--ink:#3d1a1d;
 /* BODY FONT: one line to change. Ready: Inter / 'Source Sans 3' / Figtree */
 --body:Inter,system-ui,sans-serif;--h:'Archivo Black',Inter,sans-serif;--h2:'Barlow Condensed',Inter,sans-serif}
body{background:var(--bg);color:var(--ink);font-family:var(--body)}
input,select,textarea{border-color:#e2d2c6;background:#fff;border-radius:10px}
input:focus,select:focus,textarea:focus{outline:2px solid #ffd0bd;border-color:var(--org)}
/* sidebar */
.ni{display:inline-flex;width:20px;justify-content:center;opacity:.85}.ni svg{width:18px;height:18px}
.side{width:248px;background:#2e1113 radial-gradient(120% 60% at 0% 0%,#4a1d22 0%,transparent 60%);padding:20px 14px 14px;gap:2px;border-right:1px solid #4a2328}
.logo{margin:4px 8px 18px}.logo img{width:150px}
.side-new{display:flex!important;align-items:center;justify-content:center;gap:8px;height:40px;border-radius:999px;background:var(--org);color:#fff;font-family:var(--h2);font-weight:700;font-size:16px;letter-spacing:.07em;text-transform:uppercase;margin:0 4px 16px;box-shadow:0 6px 14px -6px rgba(240,82,34,.6)}
.nav{display:flex;align-items:center;gap:12px;justify-content:flex-start;min-height:38px;padding:0 12px;border-radius:10px;font-family:var(--h2);font-weight:600;font-size:16.5px;letter-spacing:.06em;text-transform:uppercase;color:#e9d6d9}
.nav .nl{flex:1}.nav:hover{background:rgba(255,255,255,.05)}
.nav.on{background:#4a1d22;color:#fff;box-shadow:inset 3px 0 0 var(--org)}.nav.on .ni{color:var(--pink);opacity:1}
.nav i{background:var(--org);border-radius:10px;min-width:22px;text-align:center}
.sec{font-family:var(--h2);font-size:13px;letter-spacing:.14em;color:#a88a90;margin:18px 12px 8px;font-weight:600}
.me{border-top:1px solid #4a2328;padding-top:14px}.me .av{background:var(--pink);color:#2e1113}
/* top bar */
.main>.top{height:64px;padding:0 32px;background:#fffaf4;border-bottom:1px solid var(--line)}
.search{background:#fff;border:1px solid var(--line);border-radius:999px;height:40px;padding:0 16px}
#newlead,#newclient{display:none}
.side-new.side-newcl{background:transparent;border:1.5px solid var(--org);color:#ffd9cc;box-shadow:none;margin-top:-8px}
.testbar{background:#fff4d6;color:#8a5a00}
/* buttons */
.btn{border-radius:999px;font-family:var(--h2);font-weight:700;font-size:14.5px;letter-spacing:.07em;text-transform:uppercase;min-height:38px;padding:8px 18px;box-shadow:0 6px 14px -6px rgba(240,82,34,.55)}
.btn.sm{font-size:13.5px;min-height:32px;padding:5px 13px}
.btn.ghost{background:#fff;border:1px solid #d9c3b7;color:#2e1113;box-shadow:none}
.btn.green{box-shadow:0 6px 14px -6px rgba(29,122,70,.5)}.btn.dark{background:#2e1113;box-shadow:none}

/* page + headings */
.page{padding:28px 32px}
h1{font-family:var(--h);font-weight:400;text-transform:uppercase;font-size:30px;letter-spacing:-.005em;color:#2a1316}
.crumb{font-family:var(--h2);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--org-ink)}
.sub{color:var(--mut);font-size:14px}
/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:0 1px 0 rgba(46,17,19,.04),0 6px 20px -12px rgba(46,17,19,.18)}
.card h3{font-family:var(--h2);font-weight:700;font-size:19px;letter-spacing:.05em;text-transform:uppercase;color:#2a1316;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line-soft)}
.card h3 span,.card h3 a.lk{font-family:var(--body);font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--mut);font-weight:600}.card h3 a.lk{border:1px solid var(--line);border-radius:999px;padding:3px 10px;background:#fff}.card h3 a.lk:hover{border-color:#d9c3b7;color:#2e1113}
.row{border-bottom:1px solid var(--line-soft)}
/* KPIs: first one dark */
.kpis{gap:14px;margin:20px 0}
.kpi{padding:16px 18px}a.kpi{display:block;transition:transform .12s,box-shadow .12s}a.kpi:hover{transform:translateY(-1px);box-shadow:0 10px 24px -14px rgba(46,17,19,.35)}.kpi .n{font-family:var(--h);font-weight:400;font-size:26px}
.kpi .l{font-family:var(--h2);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.kpis .kpi:first-child{background:#2e1113;border-color:#2e1113}.kpis .kpi:first-child .n{color:#fff}.kpis .kpi:first-child .l{color:#e0c4c8}
/* chips */
.chip{border-radius:6px;font-weight:600;font-size:12px;padding:3px 8px}
.chip:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px;opacity:.8}
.c-dark:before,.c-wa:before{display:none}
.c-red{background:#fde4e2;color:#c0262d}.c-org{background:#ffe6da;color:#cf3f16}.c-grn{background:#dcf2e3;color:#1d7a46}.c-blu{background:#e2ebf8;color:#2f5b9a}.c-gry{background:#f1e6df;color:#6b4f52}
/* tables */
.t th{font-family:var(--h2);font-size:13.5px;letter-spacing:.1em;font-weight:700;text-transform:uppercase;background:#f8efe6;color:var(--mut);padding:10px}
.t td{padding:12px 10px;border-bottom:1px solid var(--line-soft)}.t tr:hover td{background:#fdf3ea}
/* tabs: segmented */
.tabs{display:inline-flex;gap:2px;background:#f3e6dc;border:0;border-radius:999px;padding:3px;margin:14px 0}
.tabs a{font-family:var(--h2);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:14px;padding:6px 14px;border-radius:999px;color:var(--mut)}
.tabs a.on{background:#fff;color:#2e1113;box-shadow:0 1px 3px rgba(46,17,19,.15)}
/* next step */
.nextbar{border:1px solid #f5c3ab;border-radius:16px;background:linear-gradient(90deg,#fff1e8,#fffaf5);box-shadow:none}
.nextbar .nt{font-weight:800;font-size:17px}.nextbar .nt:before{content:'NEXT STEP';display:block;font-family:var(--h2);font-size:14px;letter-spacing:.12em;color:var(--org-ink);font-weight:700}
/* stage tracker: numbered circles */
.stages{counter-reset:st;gap:0;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 10px 12px;margin:14px 0 6px}
.stages button{counter-increment:st;background:none!important;color:#7d6164!important;font-family:var(--h2);font-weight:700;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;padding:0 4px;min-width:96px}
.stages button:before{content:counter(st);width:26px;height:26px;border-radius:50%;border:2px solid #dcc8bb;background:#fff;display:grid;place-items:center;font:700 12px var(--body);color:#7d6164;position:relative;z-index:1}
.stages button:after{content:'';position:absolute;top:13px;left:50%;width:100%;height:2px;background:#e6d7cc;z-index:0}.stages button:last-child:after{display:none}
.stages .done{color:#2a1316!important}.stages .done:before{content:'✓';background:var(--org);border-color:var(--org);color:#fff}.stages .done:after{background:var(--org)}
.stages .now{color:#2a1316!important}.stages .now:before{border-color:var(--org);color:var(--org);box-shadow:0 0 0 4px #ffe3d6}
.prog div,form.prog button{font-family:var(--h2);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:13px;border-radius:8px}.prog .now{background:var(--org);color:#fff}.prog .done{background:#2e1113;color:#fff}
/* small things */
.bar{background:#f1e6df}.bar div{background:linear-gradient(90deg,#d098c5,#f05222)}
.ic{border-radius:50%}
.redrow{background:#fff4f2;border-color:#f4c4bd!important}
.hold{border-radius:14px}
.flash{border-radius:12px;border-left:4px solid #1d7a46}
details summary{color:#2e1113;display:inline-flex;align-items:center;gap:6px;border:1px solid #e2d2c6;border-radius:999px;padding:5px 13px;margin:4px 0;background:#fff;font-weight:600;font-size:13px}details summary:hover{border-color:#cdb5a8}details[open]>summary{background:#f8efe6}details.help summary,details.mp summary{border:0;padding:0;background:none;margin:0}details.help summary{border:0;background:none;padding:8px 10px;border-radius:8px;font-size:14px;color:#2e1113}details.help summary:hover,details.help[open]>summary{background:#f8efe6}
.chips-pick span:not(.muted){border-color:#e2d2c6}.chips-pick input:checked+span{background:#2e1113;border-color:#2e1113}
.lc{background:var(--card);border-radius:12px}.col{background:#f3e6dc;border-radius:14px}.col h4{font-family:var(--h2);font-size:15px;letter-spacing:.06em;text-transform:uppercase}
/* client portal, payment, signing and invoice pages (their own layouts) */
.hd h1,.amt,.step{font-family:var(--h);font-weight:400}
.card h2{font-family:var(--h2);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:19px;color:#2a1316}
.hd h1{color:#fff}.hd .top a{color:#f3ddd6}
.hd .ti b{font-family:var(--h);font-weight:400}
.opt .t,.lab,.tabs2 button{font-family:var(--h2);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
/* phone */
@media (max-width:820px){
 html{scroll-padding-bottom:96px;scroll-padding-top:70px}
 .page{padding:16px 14px 92px}.main>.top{padding:0 14px;background:#2e1113;border-bottom:0}h1{font-size:23px}
 .main>.top form{display:none}.main>.top .tlogo{display:block;width:120px;height:32px;background:url(/static/logo.png) left center/contain no-repeat}
 .main>.top .btn.ghost,.main>.top .ibtn,.main>.top details.help summary{background:transparent;border-color:#5a2a2f;color:#fff}
 #newlead,#newclient{display:inline-flex}
 #newclient,#newlead{padding:6px 10px;font-size:13px;min-height:34px;white-space:nowrap}#newclient{margin-right:4px}
 .main>.top .nw{display:none}
 .bnav{background:#fffdfa;border-top:1px solid var(--line);padding-top:8px}.bnav a{color:#7d6164;font-family:var(--h2);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:12px}
 .bnav a b{display:none}.bnav .ni{display:flex;justify-content:center;width:auto;margin-bottom:2px;opacity:1}.bnav .ni svg{width:22px;height:22px}.bnav a.on{color:var(--org)}
 .kpi .n{font-size:22px}
 .tabs{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none}.tabs a{flex:none}
 .stages{padding:12px 6px}.stages button{min-width:78px;font-size:11.5px}
 .prog div,form.prog button{font-size:0!important;height:8px;padding:0}
 .t td{border:0;padding:2px 4px}.t tr{padding:12px 4px;border-bottom:1px solid var(--line-soft)}.t tr:hover td{background:none}.t td:first-child{font-size:15.5px}
 .main>.top{gap:8px}
 details.row>summary{border:0;border-radius:0;background:none;padding:2px 0;margin:0;width:100%}details.row[open]>summary{background:none}
}
/* help menu, rows, groups */
.ibtn{background:#fff;border-color:var(--line)}
.grp{font-family:var(--h2);font-size:14px;letter-spacing:.1em}
.row[data-href]:hover{background:#fdf3ea}.row[data-href]{margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:10px}
.lc .src{font-size:11.5px;color:var(--mut);background:#f3e6dc;border-radius:6px;padding:1px 7px}
.col h4 .tot{font-family:var(--body);font-size:12px;letter-spacing:0;text-transform:none;color:var(--mut);font-weight:600}
.moneybar,.sumstrip{background:var(--card);border-radius:16px;box-shadow:0 1px 0 rgba(46,17,19,.04),0 6px 20px -12px rgba(46,17,19,.18)}
.moneybar .l,.sumstrip span{font-family:var(--h2);font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.bigamt{font-family:var(--h);font-weight:400}
/* one orange button per screen: buttons inside cards are dark, the NEXT STEP / page action stays orange */
.card .btn:not(.ghost):not(.green){background:#2e1113;box-shadow:none}
.card .btn:not(.ghost):not(.green):hover{background:#4a1d22}
.cnt,input,select,textarea,button{font-family:var(--body)}
.facts,.props{font-variant-numeric:tabular-nums}.facts{background:var(--card);border-radius:16px}.facts span{font-family:var(--h2);font-size:13px;letter-spacing:.08em;text-transform:uppercase}

/* ===== COMPACT PASS (Zevy 2026-11-10: "too much on each page, fonts too big, smaller/cleaner") =====
   Normal-case calm headings, ~14px body, tighter cards and spacing. Overrides the Design A rules above. */
body{font-size:14px;line-height:1.42}
h1{font-family:var(--body);font-weight:700;text-transform:none;font-size:21px;letter-spacing:-.01em}
.sub{font-size:13px}
.crumb{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:0;text-transform:none;color:var(--mut)}
.backbtn{font-size:13px;padding:4px 12px;margin:0 0 8px}
.page{padding:20px 28px}
/* sidebar + top bar */
.side{width:220px;padding:16px 12px 12px}.logo{margin:2px 8px 14px}.logo img{width:128px}
.side-new{height:36px;font-family:var(--body);font-weight:700;font-size:13.5px;letter-spacing:0;text-transform:none;margin:0 4px 12px}
.nav{font-family:var(--body);font-weight:600;font-size:14px;letter-spacing:0;text-transform:none;min-height:34px;gap:10px}
.sec{font-family:var(--body);font-size:11px;letter-spacing:.06em}
.main>.top{height:54px;padding:0 28px}.search{height:36px}
/* buttons: normal case, less shadow */
.btn{font-family:var(--body);font-weight:600;font-size:13.5px;letter-spacing:0;text-transform:none;min-height:34px;padding:6px 14px;box-shadow:none}
.btn.sm{font-size:12.5px;min-height:30px;padding:4px 11px}
.btn.green,.btn.dark{box-shadow:none}
/* cards */
.card{border-radius:12px;padding:13px 15px;box-shadow:0 1px 2px rgba(46,17,19,.05)}
.card h3{font-family:var(--body);font-weight:700;font-size:14.5px;letter-spacing:0;text-transform:none;padding-bottom:7px;margin-bottom:4px}
.card h3 span,.card h3 a.lk{font-size:12px}
.card h2{font-family:var(--body);font-weight:700;text-transform:none;letter-spacing:0;font-size:15px}
.grid2,.grid3{gap:12px}.card{margin-bottom:12px}
.row{padding-top:7px;padding-bottom:7px}
.tl{padding:6px 0;gap:9px}.tl .ic,.ic{width:24px;height:24px;font-size:11px}.tl .ic svg,.ic svg{width:13px;height:13px}
.tl b{font-weight:600;font-size:13.5px}
.muted{font-size:12px}
.bubble{font-size:13px;padding:7px 10px}
/* KPI boxes */
.kpis{gap:10px;margin:14px 0}
.kpi{padding:10px 13px}.kpi .n{font-family:var(--body);font-weight:700;font-size:20px}
.kpi .l{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:0;text-transform:none}
/* chips: smaller, no dots */
.chip{font-size:11px;padding:2px 7px;border-radius:5px}.chip:before{display:none}
/* tables */
.t th{font-family:var(--body);font-size:12px;letter-spacing:0;font-weight:600;text-transform:none;padding:7px 9px}
.t td{padding:8px 9px}
/* tabs */
.tabs{margin:10px 0}
.tabs a{font-family:var(--body);font-weight:600;text-transform:none;letter-spacing:0;font-size:13px;padding:5px 12px}
/* next step */
.nextbar{border-radius:12px;padding:10px 14px}
.nextbar .nt{font-weight:700;font-size:15px}.nextbar .nt:before{content:'Next step';font-family:var(--body);font-size:11.5px;letter-spacing:0;font-weight:600}
.nextbar .nd{font-size:12.5px}
/* stage tracker */
.stages{padding:10px 8px 8px;margin:10px 0 4px;border-radius:12px}
.stages button{font-family:var(--body);font-weight:600;font-size:11.5px;letter-spacing:0;text-transform:none;gap:4px;min-width:84px}
.stages button:before{width:20px;height:20px;font-size:10.5px}.stages button:after{top:10px}
.prog div,form.prog button{font-family:var(--body);font-weight:600;text-transform:none;letter-spacing:0;font-size:12px}
/* facts strip + other labels */
.facts{border-radius:12px;margin:10px 0 4px}.facts div{padding:6px 11px;font-size:13px}
.facts span{font-family:var(--body);font-size:11px;letter-spacing:0;text-transform:none;font-weight:500}
.props div{padding:5px 0;font-size:13px}
.feeline{font-size:13px!important;padding:7px 12px!important;margin:8px 0!important}
.hold{font-size:13px;padding:8px 12px}
.flash{font-size:13.5px;padding:9px 12px}
.col{border-radius:12px}.col h4{font-family:var(--body);font-size:13px;letter-spacing:0;text-transform:none;font-weight:700}
.lc{padding:9px 11px}.lc .n{font-size:13.5px}
.grp{font-family:var(--body);font-size:12px;letter-spacing:0;font-weight:700}
.moneybar .l,.sumstrip span{font-family:var(--body);font-size:12px;letter-spacing:0;text-transform:none}
.bigamt{font-family:var(--body);font-weight:700}
details summary{font-size:12.5px;padding:3px 11px}
/* "More details" folds (template side) */
details.more{margin-top:3px}details.more>summary{border:0;background:none;padding:0;margin:2px 0;color:var(--org-ink);font-size:12px;font-weight:600}details.more[open]>summary{background:none}
details.tlmore>summary{margin-top:6px}
/* client portal, payment, signing and invoice pages */
.hd h1{font-family:var(--body);font-weight:700;text-transform:none;font-size:19px}
.hd .ti b,.amt,.step{font-family:var(--body);font-weight:700}
.step{font-size:16px}
.opt .t,.lab,.tabs2 button{font-family:var(--body);text-transform:none;letter-spacing:0;font-weight:600}
.wrap .card{padding:13px 14px;border-radius:12px}
.wrap .btn{border-radius:10px;font-size:14px}
.up .b{font-size:13.5px}
/* phone */
@media (max-width:820px){
 body{font-size:14px}
 .page{padding:12px 12px 88px}h1{font-size:19px}
 .main>.top{height:52px;padding:0 12px}
 .bnav a{font-family:var(--body);font-weight:600;letter-spacing:0;text-transform:none;font-size:11px}
 .kpi .n{font-size:18px}
 .stages button{min-width:70px;font-size:10.5px}
 .facts div{padding:5px 9px}
 .t td:first-child{font-size:14px}
 .btn{min-height:36px}.btn.sm{min-height:32px}
 .tabs a{font-size:12.5px;padding:5px 10px}
}
details.rd>summary{display:block;color:inherit;font-weight:400;font-size:inherit}details.rd>summary .rm{color:var(--org-ink);font-weight:600;font-size:12.5px;white-space:nowrap}details.rd[open]>summary{display:none}
details.more>summary::-webkit-details-marker{display:none}
details.more.muted>summary{color:var(--mut);font-weight:400}
/* phone: "+ client" and "+ lead" both fit in the top bar (logo mark only on narrow screens) */
@media (max-width:480px){.main>.top .tlogo{width:34px!important;height:34px!important;background:url(/static/mark.png) center/contain no-repeat!important;flex:none;border-radius:6px}.main>.top{gap:6px!important}}