.cost-hero h1{font-size:clamp(34px,5vw,58px)}.cost-hero{padding-bottom:45px}#cost-form{display:block}.period{padding:22px;background:#e5ede3;margin-bottom:24px}.period label{font-weight:bold}.period input{width:100px;margin-right:10px}.period p{margin:12px 0 0}.plans{display:grid;grid-template-columns:1fr 1fr;gap:24px}.plan{padding:24px;border:1px solid var(--line);background:white;min-width:0}.plan h3{margin:0 0 15px}.plan label{display:block;padding-bottom:4px;font-weight:bold}.plan input{display:block;width:100%;max-width:100%;padding:10px 12px;margin:0 0 12px;font:inherit;color:var(--ink);border:1px solid #a4b8ad;background:#fff}.period input{padding:8px;font:inherit}.plan .micro{margin:0 0 14px}.plan input:focus{outline:3px solid var(--accent)}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}.actions .reset{padding:12px 18px}.result table{background:var(--paper);margin:20px 0}.result th{width:auto}.result h3{font-size:25px}.result .micro{font-size:12px}#error{color:#983318;margin-top:16px}.example-note{color:#983318;font-weight:bold}@media(max-width:700px){.plans{grid-template-columns:1fr}.plan{padding:20px}.cost-hero h1{font-size:36px}.result{padding:20px 14px}.result th,.result td{padding:10px 7px}.actions{display:grid;grid-template-columns:1fr}.actions .button{justify-content:space-between}}