/* Debt consolidation calculator — builds on styles.css + checklist.css (header, hero, footer). */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.debt-section{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(56px,8vw,96px)}
.debt-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:start}
.debt-inputs{display:grid;gap:18px;min-width:0}

.debt-card{margin:0;min-width:0;border:1px solid var(--line,#d8d9d5);background:var(--paper,#fbfbfa);padding:clamp(18px,2.4vw,28px);border-radius:4px;box-shadow:0 18px 40px -30px rgba(13,14,16,.35)}
.debt-card legend{float:left;width:100%;padding:0;margin:0 0 18px;font-family:var(--serif);font-size:clamp(22px,2.2vw,27px);font-weight:500;color:var(--ink,#131518);display:flex;align-items:center;gap:12px;line-height:1.15}
.debt-card legend+*{clear:both}
legend .step{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy,#181a1e);color:#fff;font-family:Jost,system-ui,sans-serif;font-size:13px;font-weight:500}

.debt-switch{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.debt-switch label{position:relative;cursor:pointer}
.debt-switch input{position:absolute;opacity:0;pointer-events:none}
.debt-switch label>span{display:block;height:100%;padding:16px 18px;border:1px solid var(--line,#d8d9d5);border-radius:4px;background:#fff;transition:border-color .2s,box-shadow .2s,background .2s}
.debt-switch strong{display:block;font-weight:500;color:var(--ink,#131518);font-size:16px;margin-bottom:4px}
.debt-switch small{display:block;color:var(--muted,#5c6169);font-size:13px;line-height:1.5}
.debt-switch input:checked+span{border-color:var(--gold,#55606d);background:var(--champagne-soft,#ebebe8);box-shadow:inset 0 0 0 1px var(--gold,#55606d)}
.debt-switch input:focus-visible+span{outline:2px solid var(--gold,#55606d);outline-offset:2px}

.dgrid{display:grid;gap:14px}
.dgrid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.df{display:grid;gap:6px;min-width:0;align-content:start}
.df>label:not(.dcheck){font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#5c6169)}
.df-check{align-content:end}
.dctl{display:flex;align-items:center;gap:6px;min-width:0;border:1px solid var(--line,#d8d9d5);background:#fff;border-radius:3px;padding:0 12px;height:46px;transition:border-color .2s,box-shadow .2s}
.dctl:focus-within{border-color:var(--gold,#55606d);box-shadow:0 0 0 3px rgba(85,96,109,.15)}
.dctl>span{color:var(--muted,#5c6169);font-size:14px;flex:none}
.dctl input,.dctl select{flex:1;min-width:0;width:100%;border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink,#131518);padding:0;height:100%;outline:none}
.dsel{padding-right:8px}
.dsel select{cursor:pointer}
.dcheck{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14px;color:var(--ink,#131518);line-height:1.4}
.dcheck input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--gold,#55606d);flex:none}
.df-check .dcheck{min-height:46px;align-items:center}
.reapply{margin-top:16px;padding-top:16px;border-top:1px solid var(--line,#d8d9d5)}
.dnote{margin:14px 0 0;font-size:13px;color:var(--muted,#5c6169);line-height:1.55}
.dnote strong{color:var(--ink,#131518);font-weight:500}

/* Debts table */
.debt-table{display:grid;gap:8px}
.debt-row{display:grid;grid-template-columns:36px minmax(0,1.25fr) minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1fr) 36px;gap:8px;align-items:center;transition:opacity .2s}
.debt-head{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#5c6169);padding-bottom:2px}
.debt-head>span:first-child{font-size:12px}
.dinc{display:grid;place-items:center;height:46px;cursor:pointer}
.dinc input{width:18px;height:18px;accent-color:var(--gold,#55606d)}
.debt-row .dctl{height:44px;padding:0 10px}
.debt-row .dctl input,.debt-row .dctl select{font-size:15px}
.drm{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--muted,#5c6169);cursor:pointer;transition:background .2s,color .2s}
.drm:hover,.drm:focus-visible{background:var(--champagne-soft,#ebebe8);color:var(--ink,#131518)}
.drm .icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.debt-row.is-off .dctl{opacity:.45}
.add-debt{margin-top:12px;display:inline-flex;align-items:center;gap:8px;border:1px dashed var(--champagne,#cdd1d6);background:transparent;color:var(--gold,#55606d);padding:10px 16px;border-radius:3px;font:inherit;font-size:14px;cursor:pointer;transition:background .2s,border-color .2s}
.add-debt:hover,.add-debt:focus-visible{background:var(--champagne-soft,#ebebe8);border-color:var(--gold,#55606d)}
.add-debt .icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}

/* Results */
.debt-results{position:sticky;top:96px;min-width:0;color:#fff;padding:clamp(22px,2.6vw,32px);border-radius:4px;background:radial-gradient(120% 80% at 100% 0%,rgba(85,96,109,.55),transparent 60%),linear-gradient(160deg,var(--navy,#181a1e),var(--midnight,#0d0e10));box-shadow:0 30px 60px -30px rgba(13,14,16,.7);overflow:hidden}
.debt-results .eyebrow{color:var(--champagne,#cdd1d6);margin:0 0 8px}
.res-big{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding-bottom:18px;border-bottom:1px solid rgba(205,209,214,.25)}
.res-big span{font-family:var(--serif);font-size:clamp(46px,5vw,64px);line-height:1;font-weight:400;color:#fff}
.res-big small{font-size:14px;color:var(--champagne,#cdd1d6)}
.res-big.is-negative span{color:#f3c9c9}
.res-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 14px}
.res-compare>div{display:grid;gap:2px;min-width:0}
.res-compare span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-light,#b4b8bd)}
.res-compare strong{font-size:22px;font-weight:400;color:#fff}
.res-compare small{font-size:12px;color:var(--muted-light,#b4b8bd);line-height:1.4}
.res-bars{display:grid;gap:8px;margin-bottom:18px}
.bar{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center}
.bar-label{font-size:12px;color:var(--muted-light,#b4b8bd)}
.bar-track{height:8px;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden}
.bar-track span{display:block;height:100%;border-radius:8px;transition:width .4s ease}
#bar-current{background:rgba(205,209,214,.55)}
#bar-new{background:linear-gradient(90deg,#8f98a3,#cdd1d6)}
.res-list{margin:0;display:grid;border-top:1px solid rgba(205,209,214,.2)}
.res-list>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(205,209,214,.14)}
.res-list>div[hidden]{display:none}
.res-list dt{font-size:13px;color:var(--muted-light,#b4b8bd)}
.res-list dd{margin:0;font-size:14px;color:#fff;text-align:right}
.res-list dd.is-warn{color:#f3d9a8}
.res-insight{margin:16px 0 0;font-size:14px;line-height:1.6;color:var(--champagne-soft,#ebebe8)}
.res-insight:empty{display:none}
.res-actions{display:grid;gap:10px;margin-top:20px}
.res-actions .button{justify-content:center;text-align:center}
.res-actions .text-link{justify-self:start;background:none;border:0;padding:4px 0;font:inherit;font-size:14px;color:var(--champagne,#cdd1d6);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.res-actions .text-link .icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.res-fine{margin:18px 0 0;font-size:12px;line-height:1.55;color:var(--muted-light,#b4b8bd)}

/* Explainer */
.debt-explainer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,36px);margin-top:clamp(48px,7vw,80px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line,#d8d9d5)}
.debt-explainer h3{font-family:var(--serif);font-size:clamp(24px,2.4vw,30px);font-weight:500;margin:6px 0 10px;color:var(--ink,#131518)}
.debt-explainer p:not(.eyebrow){color:var(--muted,#5c6169);line-height:1.65;margin:0 0 14px}

@media (max-width:1100px){
  .debt-layout{grid-template-columns:minmax(0,1fr)}
  .debt-results{position:static}
  .dgrid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){.debt-explainer{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .debt-switch{grid-template-columns:minmax(0,1fr)}
  .debt-head{display:none}
  .debt-row{grid-template-columns:32px minmax(0,1fr) minmax(0,1fr) 32px;grid-template-areas:"inc type type rm" ". bal bal ." ". rate pay .";padding:12px 0;border-bottom:1px solid var(--line,#d8d9d5);row-gap:8px}
  .debt-row>.dinc{grid-area:inc}
  .debt-row>.dsel{grid-area:type}
  .debt-row>.dctl:nth-child(3){grid-area:bal}
  .debt-row>.dctl:nth-child(4){grid-area:rate}
  .debt-row>.dctl:nth-child(5){grid-area:pay}
  .debt-row>.drm{grid-area:rm;width:32px;height:32px}
  .res-compare strong{font-size:20px}
}
@media (max-width:374px){.dgrid-4{grid-template-columns:minmax(0,1fr)}}

@media print{
  .cl-header,.cl-hero,.debt-explainer,.add-debt,.drm,.res-actions,.skip-link,.cl-footer a[target]{display:none!important}
  .debt-layout{grid-template-columns:1fr 1fr}
  .debt-card{box-shadow:none;break-inside:avoid}
  .debt-results{position:static;color:#000;background:#fff;border:1px solid #999;box-shadow:none}
  .debt-results *,.res-big span{color:#000!important}
  .bar-track{border:1px solid #999}
}