/* The installment illustration card on the deeper pages, as the home page shows it.
   The home page keeps its own rules in preview.css and refine.css; this file carries the merged
   result so a deep page can show the same card without loading the home stylesheets. */
.installment-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:36px;box-shadow:var(--shadow-1)}
.installment-card::after{content:'';position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),#2f7bff0a,transparent 60%);pointer-events:none}
.installment-heading{display:flex;flex-wrap:wrap;align-items:center;gap:13px;margin-block-end:22px}
.installment-heading>span{font-size:12px;font-weight:500;color:var(--ink-2);letter-spacing:-.02em}
.installment-heading>span:first-of-type{font-size:14px}
.planned-tag{margin-inline-start:auto;padding:5px 11px;border-radius:999px;background:var(--blue-50);color:var(--blue-600);font-size:11px;font-weight:550}
.installment-card>label{display:block;font-size:13px;color:var(--ink-3)}
.purchase-value{font-size:38px;letter-spacing:-.07em;margin:8px 0 20px}
.installment-card input[type=range]{appearance:none;width:100%;height:5px;border-radius:10px;background:linear-gradient(to right,var(--blue-500) var(--range-fill,18.37%),var(--blue-50) var(--range-fill,18.37%));margin:10px 0 0;cursor:pointer}
.installment-card input[type=range]::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;border:4px solid #fff;box-shadow:0 1px 8px #0a2a6b35;background:var(--blue-500)}
.installment-card input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:4px solid #fff;box-shadow:0 1px 8px #0a2a6b35;background:var(--blue-500)}
.range-labels{display:flex;justify-content:space-between;font-size:9px;color:var(--ink-3);margin-block-start:8px}
.installment-summary{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;padding:16px 0;margin-block-start:12px;border-block-start:1px solid var(--line)}
.installment-summary span{display:block;font-size:12px;color:var(--ink-3)}
.installment-summary strong{display:block;font-size:25px;letter-spacing:-.07em;margin-block-start:8px}
.installment-summary>div:last-child strong{color:var(--blue-600)}
.payment-months{display:flex;justify-content:space-between;gap:7px;margin:0 0 16px}
.payment-months>span{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;gap:8px;font-size:10px;color:var(--ink-3)}
.payment-months i{position:relative;width:100%;height:30px;border-radius:5px;background:var(--blue-50)}
.payment-months i::before{content:'';position:absolute;inset:3px 3px 18px;background:var(--blue-200);border-radius:2px}
.installment-total{display:flex;align-items:center;justify-content:space-between;border-block-start:1px solid var(--line);padding-block-start:18px;font-size:13px}
.installment-total strong{font-size:14px}
.installment-card>p{font-size:12px;line-height:1.7;color:var(--ink-3);margin-block-start:14px}
@media(max-width:899px){.installment-card{padding:26px}}
@media(max-width:819px){.installment-card{padding:22px}.installment-heading{gap:8px}.purchase-value{font-size:31px}.installment-summary strong{font-size:21px}.payment-months{gap:4px}.payment-months i{height:25px}}
@media(max-width:599px){.installment-card{padding:24px}.purchase-value{font-size:36px}.installment-summary strong{font-size:25px}.payment-months{gap:6px}.payment-months i{height:28px}}