/* Debt Ladder web calculator — shared by /calculator/ and the four landing pages.
   Layout: one column at phone width; inputs above results; the two strategy
   panels sit side by side from 720px. Palette and chrome follow the Debt
   Ladder app page on adelyons.com (deep teal ink, one mint for progress, clay
   for cost). Light theme only, like the rest of adelyons.com. */
:root{
  --dl-ink:#0A2331; --dl-ink2:#123449; --dl-mint:#2FE3A0; --dl-mint-deep:#0B8F65; --dl-mint-text:#076B4C;
  --dl-clay:#E0754A; --dl-clay-deep:#B4552A; --dl-paper:#F1F5F7; --dl-card:#fff; --dl-slate:#46606e; --dl-slate2:#7d94a0;
  --dl-hair:#E4EBEF; --dl-ice:#CEE4EF; --dl-on-ink-muted:#9FBCCB;
  --dl-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
.dl-calc{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;color:var(--dl-ink);margin:1.5rem 0 2.5rem}
.dl-calc *{box-sizing:border-box}
.dl-calc [hidden]{display:none!important}
.dl-calc .num{font-family:var(--dl-mono);font-variant-numeric:tabular-nums}
.dl-card{background:var(--dl-card);border:1px solid var(--dl-hair);border-radius:16px;padding:1.1rem 1.1rem 1.2rem;box-shadow:0 14px 30px -26px rgba(10,35,49,.5)}
.dl-card+.dl-card,.dl-card+.dl-compare,.dl-compare+.dl-card{margin-top:1.1rem}
.dl-label{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dl-mint-text);margin:0 0 .75rem}
.dl-example{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--dl-clay-deep);background:rgba(224,117,74,.1);border:1px solid rgba(224,117,74,.3);border-radius:999px;padding:.2rem .7rem;margin-left:.5rem;vertical-align:middle;font-weight:600;letter-spacing:0;text-transform:none}
.dl-debts{display:grid;gap:.6rem}
.dl-debt{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;align-items:end;padding:.75rem;border:1px solid var(--dl-hair);border-radius:12px;background:var(--dl-paper)}
.dl-debt .dl-field-name{grid-column:1 / -1}
.dl-field{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.dl-field label{font-size:.72rem;color:var(--dl-slate);font-weight:600}
.dl-field input{width:100%;min-width:0;font:inherit;font-size:.95rem;padding:.5rem .6rem;border:1px solid #cfdbe2;border-radius:8px;background:#fff;color:var(--dl-ink)}
.dl-field input[inputmode=decimal]{font-family:var(--dl-mono);font-variant-numeric:tabular-nums;text-align:right}
.dl-field input:focus{outline:2px solid var(--dl-mint-deep);outline-offset:1px;border-color:var(--dl-mint-deep)}
.dl-field .dl-affix{position:relative}
.dl-field .dl-affix input{padding-left:1.4rem}
.dl-field .dl-affix.pct input{padding-left:.6rem;padding-right:1.5rem}
.dl-field .dl-affix span{position:absolute;top:50%;transform:translateY(-50%);left:.55rem;font-size:.85rem;color:var(--dl-slate2);pointer-events:none}
.dl-field .dl-affix.pct span{left:auto;right:.55rem}
.dl-debt .dl-remove{grid-column:1 / -1;justify-self:end;background:none;border:none;color:var(--dl-slate2);font-size:.8rem;cursor:pointer;padding:.2rem .3rem;font-family:inherit}
.dl-debt .dl-remove:hover{color:var(--dl-clay-deep);text-decoration:underline}
.dl-debt .dl-warn{grid-column:1 / -1;font-size:.78rem;color:var(--dl-clay-deep);margin:0}
.dl-debt.is-underwater{border-color:rgba(224,117,74,.5)}
@media(min-width:720px){
  .dl-debt{grid-template-columns:2.2fr 1.3fr 1fr 1.2fr auto}
  .dl-debt .dl-field-name{grid-column:auto}
  .dl-debt .dl-remove{grid-column:auto;align-self:end;padding-bottom:.55rem}
}
.dl-row{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:flex-end;margin-top:.9rem}
.dl-row .dl-field{flex:1 1 180px;max-width:260px}
.dl-btn{font:inherit;font-weight:700;font-size:.92rem;padding:.6rem 1.1rem;border-radius:10px;border:2px solid #8fcdb6;background:transparent;color:var(--dl-mint-text);cursor:pointer;transition:all .2s;text-decoration:none;display:inline-block;line-height:1.3}
.dl-btn:hover{background:rgba(11,143,101,.06)}
.dl-btn.primary{background:linear-gradient(135deg,#0B8F65 0%,#076B4C 100%);color:#fff;border-color:transparent}
.dl-btn.primary:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(11,143,101,.28)}
.dl-btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.dl-btn.small{font-size:.82rem;padding:.4rem .8rem;border-radius:8px}
.dl-note{font-size:.82rem;color:var(--dl-slate2);margin:.6rem 0 0;line-height:1.5}
.dl-hint{font-size:.85rem;color:var(--dl-slate);margin:.5rem 0 0;line-height:1.55}
/* Verdict */
.dl-verdict{margin-top:1.1rem;background:linear-gradient(160deg,var(--dl-ink) 0%,var(--dl-ink2) 100%);color:#e6f2ee;border-radius:18px;padding:1.25rem 1.25rem 1.3rem;box-shadow:0 30px 50px -28px rgba(10,35,49,.65)}
.dl-verdict .dl-kicker{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dl-mint);margin:0 0 .3rem}
.dl-verdict .dl-headline{font-size:clamp(1.45rem,4.5vw,2.1rem);font-weight:800;color:#fff;margin:0;line-height:1.15;text-wrap:balance}
.dl-verdict .dl-sub{color:var(--dl-on-ink-muted);margin:.5rem 0 0;font-size:.95rem;line-height:1.5}
.dl-verdict.is-stuck .dl-kicker{color:var(--dl-clay)}
/* Two panels */
.dl-compare{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.1rem}
@media(min-width:720px){.dl-compare{grid-template-columns:1fr 1fr}}
.dl-panel{background:var(--dl-card);border:1px solid var(--dl-hair);border-radius:16px;padding:1.1rem;position:relative;box-shadow:0 14px 30px -26px rgba(10,35,49,.5)}
.dl-panel.is-lead{border-color:var(--dl-mint-deep);box-shadow:0 0 0 3px rgba(11,143,101,.12),0 14px 30px -26px rgba(10,35,49,.5)}
.dl-panel h3{margin:0;font-size:1.05rem;color:var(--dl-ink)}
.dl-panel .dl-rule{font-size:.8rem;color:var(--dl-slate2);margin:.1rem 0 .9rem}
.dl-badges{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .8rem;min-height:1.4rem}
.dl-badge{font-size:.7rem;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:.18rem .6rem;background:rgba(11,143,101,.1);color:var(--dl-mint-text);border:1px solid rgba(11,143,101,.25)}
.dl-badge.warm{background:rgba(224,117,74,.1);color:var(--dl-clay-deep);border-color:rgba(224,117,74,.3)}
.dl-stat{display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;align-items:baseline;padding:.5rem 0;border-top:1px solid var(--dl-hair)}
.dl-stat:first-of-type{border-top:none}
.dl-stat dt{font-size:.82rem;color:var(--dl-slate);margin:0}
.dl-stat dd{margin:0;font-weight:700;font-size:1rem;text-align:right}
.dl-stat dd.big{font-size:1.45rem;color:var(--dl-mint-text);letter-spacing:-.01em}
.dl-stat dd.warm{color:var(--dl-clay-deep)}
.dl-stat dd small{display:block;font-weight:500;font-size:.75rem;color:var(--dl-slate2)}
.dl-order{margin:.9rem 0 0;padding:0;list-style:none;counter-reset:step}
.dl-order li{display:grid;grid-template-columns:1.5rem 1fr auto;gap:.5rem;align-items:baseline;padding:.4rem 0;border-top:1px solid var(--dl-hair);font-size:.88rem}
.dl-order li::before{counter-increment:step;content:counter(step);font-weight:800;color:var(--dl-mint-text);font-family:var(--dl-mono)}
.dl-order li .when{color:var(--dl-slate2);font-size:.8rem;white-space:nowrap}
.dl-order li.never .when{color:var(--dl-clay-deep)}
/* Chart */
.dl-chart{width:100%;height:auto;display:block;border-radius:10px}
.dl-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;font-size:.8rem;color:var(--dl-slate);margin:.7rem 0 0;padding:0;list-style:none}
.dl-legend i{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:.4rem}
/* Table */
.dl-table-head{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;margin-bottom:.7rem}
.dl-seg{display:inline-flex;border:1px solid #cfdbe2;border-radius:999px;overflow:hidden}
.dl-seg button{font:inherit;font-size:.82rem;font-weight:600;padding:.35rem .9rem;border:none;background:#fff;color:var(--dl-slate);cursor:pointer}
.dl-seg button[aria-pressed=true]{background:var(--dl-ink);color:#fff}
.dl-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--dl-hair);border-radius:10px}
.dl-table{border-collapse:collapse;width:100%;font-size:.82rem;min-width:520px}
.dl-table th,.dl-table td{padding:.45rem .6rem;text-align:right;border-bottom:1px solid var(--dl-hair);white-space:nowrap}
.dl-table th{background:var(--dl-paper);color:var(--dl-slate);font-weight:700;position:sticky;top:0}
.dl-table th:first-child,.dl-table td:first-child{text-align:left;position:sticky;left:0;background:#fff}
.dl-table th:first-child{background:var(--dl-paper)}
.dl-table tr.cleared td{color:var(--dl-mint-text);font-weight:600}
.dl-table tfoot td{font-weight:700;background:var(--dl-paper)}
.dl-more{text-align:center;margin:.7rem 0 0}
/* Share */
.dl-share-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:720px){.dl-share-grid{grid-template-columns:1fr 1fr}}
.dl-linkbox{display:flex;gap:.5rem;align-items:stretch}
.dl-linkbox input{flex:1 1 auto;min-width:0;font:inherit;font-size:.8rem;padding:.5rem .6rem;border:1px solid #cfdbe2;border-radius:8px;color:var(--dl-slate);background:var(--dl-paper);font-family:var(--dl-mono)}
.dl-canvas{width:100%;height:auto;border-radius:12px;border:1px solid var(--dl-hair);display:block;background:var(--dl-ink)}
.dl-qr{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center}
.dl-qr img,.dl-qr canvas{width:150px;height:150px;border-radius:10px;border:1px solid var(--dl-hair);background:#fff;padding:6px}
.dl-qr p{margin:0 0 .5rem;font-size:.9rem;color:var(--dl-slate);line-height:1.5}
.dl-stores{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}
.dl-ok{color:var(--dl-mint-text);font-size:.82rem;font-weight:600;margin-left:.5rem}
.dl-disclaimer{background:rgba(224,117,74,.08);border:1px solid rgba(224,117,74,.3);border-radius:12px;padding:1rem 1.2rem;margin:1.5rem 0;color:#7a4326;font-size:.92rem;line-height:1.55}
.dl-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1.5rem 0}
.dl-steps .dl-card h3{color:var(--dl-mint-text);font-size:1rem;margin:0 0 .4rem}
.dl-steps .dl-card p{color:var(--dl-slate);font-size:.92rem;margin:0;line-height:1.55}
.dl-tools{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0}
.dl-tools a{font-size:.84rem;color:var(--dl-mint-text);text-decoration:none;border:1px solid #d8e6df;background:#fff;border-radius:999px;padding:.35rem .85rem}
.dl-tools a:hover{border-color:#a9d6c4;background:#f3faf7}
.dl-tools a[aria-current=page]{background:rgba(7,107,76,.1);border-color:rgba(7,107,76,.25);font-weight:600}
@media (prefers-reduced-motion:reduce){.dl-calc *{transition:none!important}}