/* ppf-calculator.html only (owner: ppf-calculator) */
.ppf-hero h1{max-width:20ch}
.ppf-hero__facts{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:20px 0 0;display:flex;flex-wrap:wrap;gap:12px 40px;border-top:1px solid rgba(255,255,255,.18);font-size:15px;color:#d5deec}
.ppf-hero__facts b{display:block;font:600 clamp(20px,2vw,26px)/1.2 var(--f-disp);color:#fff}

.ppf-calc{display:grid;grid-template-columns:1.25fr 1fr;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ppf-in{display:grid;gap:28px;padding:clamp(22px,3vw,44px)}
.ppf-field label,.ppf-lbl{display:block;font-weight:600;color:var(--ink);margin-bottom:10px}
.ppf-pair{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:8px;padding:0 12px;min-height:48px;background:var(--tint)}
.ppf-pair span{color:var(--muted);font-weight:600}
.ppf-pair input{border:0;background:transparent;font:600 20px/1.2 var(--f-body);color:var(--navy);width:9ch;padding:8px 0;font-variant-numeric:tabular-nums}
.ppf-pair input:focus{outline:none}
.ppf-pair:focus-within{border-color:var(--navy)}
.ppf-field input[type=range]{display:block;width:100%;margin:14px 0 8px;accent-color:var(--green);min-height:24px}
.ppf-seg{display:flex;gap:8px;flex-wrap:wrap}
.ppf-seg label{margin:0;cursor:pointer}
.ppf-seg input{position:absolute;opacity:0;pointer-events:none}
.ppf-seg span{display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:44px;padding:8px 16px;border:1.5px solid var(--line);border-radius:999px;font-weight:600;color:var(--ink)}
.ppf-seg input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.ppf-seg input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}

.ppf-out{background:var(--navy);color:#d5deec;padding:clamp(22px,3vw,44px);display:flex;flex-direction:column}
.ppf-out__k{margin:0;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.ppf-out__v{margin:6px 0 20px;font:600 clamp(32px,4vw,48px)/1.1 var(--f-disp);color:#fff}
.ppf-bar{height:12px;border-radius:6px;background:var(--green);overflow:hidden;margin-bottom:18px}
.ppf-bar i{display:block;height:100%;background:#9fb3d6;transition:width .25s}
.ppf-out .kv dt,.ppf-out .kv dd{color:#d5deec;border-color:rgba(255,255,255,.16)}
.ppf-out .kv dd{color:#fff;font-weight:600}
.ppf-dot{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--green);margin-right:8px;vertical-align:middle}
.ppf-dot--in{background:#9fb3d6}
.ppf-out .fine{color:#a9b7cf}

.ppf-table td,.ppf-table th{font-variant-numeric:tabular-nums;white-space:nowrap}
.ppf-table tbody tr:nth-child(5n) td{border-bottom:2px solid var(--line)}

.ppf-rules{margin:0}
.ppf-timing{list-style:none;margin:0;padding:0;counter-reset:t;border-left:2px solid var(--green-l)}
.ppf-timing li{counter-increment:t;position:relative;padding:0 0 24px 32px}
.ppf-timing li:last-child{padding-bottom:0}
.ppf-timing li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--green)}
.ppf-timing li:nth-child(3)::before{background:var(--accent)}
.ppf-timing li:nth-child(4)::before{background:#b54434}
.ppf-timing b{display:block;font:600 18px/1.3 var(--f-disp);color:var(--navy);margin-bottom:4px}
.ppf-timing span{display:block}
.ppf-form{margin-top:20px}

@media (max-width:860px){.ppf-calc{grid-template-columns:1fr}}
@media (max-width:600px){.ppf-table{font-size:13.5px}.ppf-table th,.ppf-table td{padding:10px 8px}.ppf-out .kv{grid-template-columns:auto 1fr}.ppf-out .kv dd{text-align:right}}