/* Interest cap checker. Layers on /articles/article.css for the shared page chrome
   (.wrap, .bar, .crumbs, .site-foot), so only the tool itself is styled here. */
.tool{background:#fff;border:1px solid #E7E3DA;border-radius:18px;padding:22px 20px;margin:0 0 22px}
@media(min-width:620px){.tool{padding:26px 26px}}
.tool h2{margin:0 0 4px;font-size:1.06rem;font-weight:600;color:#1C1A17}
.tool .lede{margin:0 0 18px;color:#6B6459;font-size:.92rem;line-height:1.55}
.fields{display:grid;gap:14px}
@media(min-width:620px){.fields{grid-template-columns:1fr 1fr}.fields .fw{grid-column:1/-1}}
.fld label{display:block;font-size:.83rem;font-weight:600;color:#3D382F;margin:0 0 6px}
.fld .hint{display:block;font-weight:400;color:#8A8276;font-size:.76rem;margin-top:3px}
.inp{position:relative}
.inp .cur{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#8A8276;font-weight:600;pointer-events:none}
.inp input{width:100%;box-sizing:border-box;font:inherit;font-size:1rem;font-weight:600;color:#1C1A17;
  padding:12px 13px;border:1.5px solid #E0DBD1;border-radius:12px;background:#FDFCFA;-moz-appearance:textfield}
.inp.peso input{padding-left:30px}
.inp input::-webkit-outer-spin-button,.inp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inp input:focus{outline:none;border-color:#F6C453;box-shadow:0 0 0 3px rgba(246,196,83,.28);background:#fff}
.inp input[aria-invalid="true"]{border-color:#D4553F;background:#FEF7F5}
.err{color:#B8452F;font-size:.78rem;margin:5px 0 0;min-height:0}
.go{width:100%;margin:18px 0 0;font:inherit;font-size:1rem;font-weight:700;color:#4A3208;cursor:pointer;
  padding:14px 18px;border:0;border-radius:13px;background:#F6C453;transition:filter .12s}
.go:hover{filter:brightness(.96)}
.go:focus-visible{outline:3px solid #8C5F0B;outline-offset:2px}

.res{margin:22px 0 0;border-radius:16px;padding:20px;border:1px solid}
.res[hidden]{display:none}
.res.over{background:#FEF5F2;border-color:#F0C4B8}
.res.under{background:#F2FAF4;border-color:#BFE3CB}
.res.out{background:#F8F7F4;border-color:#E3DED4}
.res .tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;margin:0 0 10px}
.res.over .tag{background:#D4553F;color:#fff}
.res.under .tag{background:#2E7D4F;color:#fff}
.res.out .tag{background:#6B6459;color:#fff}
.res h3{margin:0 0 8px;font-size:1.14rem;font-weight:700;line-height:1.35;color:#1C1A17}
.res p{margin:0 0 10px;font-size:.92rem;line-height:1.6;color:#413C33}
.res p:last-child{margin-bottom:0}
.nums{display:grid;gap:1px;background:#E7E3DA;border:1px solid #E7E3DA;border-radius:12px;overflow:hidden;margin:14px 0}
@media(min-width:520px){.nums{grid-template-columns:1fr 1fr}}
.nums div{background:#fff;padding:11px 13px}
.nums dt{font-size:.75rem;color:#7A7367;margin:0 0 2px}
.nums dd{margin:0;font-size:1.04rem;font-weight:700;color:#1C1A17;font-variant-numeric:tabular-nums}
.nums dd.bad{color:#B8452F}
.nums dd.good{color:#2E7D4F}
.next{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0 0}
/* without align-items the buttons stretch to the flex line and look hollow */
.next a{display:inline-block;text-decoration:none;font-size:.9rem;font-weight:700;padding:12px 17px;border-radius:12px}
.next a.pri{background:#1C1A17;color:#fff;border:1.5px solid #1C1A17}
.next a.sec{background:#fff;color:#1C1A17;border:1.5px solid #D9D4C9}
.next a:hover{filter:brightness(1.08)}
.rulebox{background:#FFFBF0;border:1px solid #F0DFB4;border-radius:14px;padding:16px 18px;margin:0 0 22px}
.rulebox p{margin:0;font-size:.88rem;line-height:1.6;color:#4A3F28}
.notlegal{font-size:.8rem;color:#8A8276;line-height:1.55;margin:18px 0 0}