/* Pension calculator */
.calc-hero { position: relative; background: var(--brand); color: #fff; padding-block: clamp(3rem,8vw,5.5rem) clamp(4rem,11vw,8rem); overflow: hidden; }
.calc-hero__inner { position: relative; z-index: 1; max-width: 680px; }
.calc-hero__eyebrow { font-size: var(--fs-300); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--orange-300); margin-block-end: var(--sp-2); }
.calc-hero__heading { font-family: 'Archivo Expanded', var(--font-display, sans-serif); font-size: clamp(2rem,5vw,3.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; margin-block-end: var(--sp-3); }
.calc-hero__sub { font-size: clamp(1rem,2vw,1.15rem); color: rgba(255,255,255,.82); line-height: 1.65; }
.calc-hero__wave { position: absolute; bottom: -2px; left: 0; width: 100%; z-index: 2; pointer-events: none; }
.calc-body { background: var(--surface, #f8f9f5); padding-block: clamp(2.5rem,7vw,4.5rem); }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: start; }
.calc-form { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(1.25rem,4vw,2rem); display: flex; flex-direction: column; gap: var(--sp-4); }
.calc-field { display: flex; flex-direction: column; gap: 6px; }
.calc-field label { font-size: var(--fs-300); font-weight: 700; color: var(--ink); }
.calc-field input[type=number] { font: inherit; padding: .7rem .9rem; border: 1.5px solid var(--border); border-radius: var(--r-md); outline: none; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.calc-field input[type=number]:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--green-050); }
.calc-field input[type=range] { width: 100%; accent-color: var(--brand); }
.calc-field small { font-size: var(--fs-300); color: var(--text-muted); }
.calc-field output { font-weight: 700; color: var(--brand); font-size: var(--fs-400); }
.calc-results { background: var(--brand); color: #fff; border-radius: var(--r-lg); padding: clamp(1.25rem,4vw,2rem); display: flex; flex-direction: column; gap: var(--sp-4); position: sticky; top: calc(var(--header-height,72px) + 1.5rem); }
.calc-results__label { font-size: var(--fs-300); text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.7); }
.calc-results__big { font-family: 'Archivo Expanded', var(--font-display, sans-serif); font-size: clamp(2rem,5vw,2.75rem); font-weight: 800; line-height: 1.05; color: var(--orange-300); }

/* Info card — explains the rate applies only to the long-term 70% */
.calc-info { display: flex; gap: var(--sp-3); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.calc-info__icon { color: var(--orange-300); flex-shrink: 0; margin-top: 2px; }
.calc-info p { font-size: var(--fs-300); line-height: 1.6; color: rgba(255,255,255,.88); margin: 0; }
.calc-info strong { color: #fff; font-weight: 700; }

.calc-split { display: flex; flex-direction: column; gap: var(--sp-2); }
.calc-split__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-400); }
.calc-split__row span { color: rgba(255,255,255,.82); }
.calc-split__bar { height: 8px; background: rgba(255,255,255,.18); border-radius: var(--r-pill); overflow: hidden; }
.calc-split__bar span { display: block; height: 100%; background: var(--orange-300); }
.calc-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); border-top: 1px solid rgba(255,255,255,.18); padding-top: var(--sp-4); margin: 0; }
.calc-meta dt { font-size: var(--fs-300); color: rgba(255,255,255,.6); margin-bottom: 4px; }
.calc-meta dd { font-weight: 700; font-size: var(--fs-400); margin: 0; }
.calc-cta { align-self: flex-start; background: var(--orange-500) !important; }
.calc-disclaimer { font-size: var(--fs-300); color: var(--text-muted); line-height: 1.6; margin-top: var(--sp-5); max-width: 70ch; }
/* Frequency segmented control */
.calc-freq { display: flex; border: 1.5px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.calc-freq input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; accent-color: #07542b; }
.calc-freq label { flex: 1; text-align: center; padding: .55rem .5rem; font-size: var(--fs-300); font-weight: 600; color: var(--text-muted); cursor: pointer; border-right: 1px solid var(--border); line-height: 1.4; transition: background var(--dur-fast,150ms) ease, color var(--dur-fast,150ms) ease; }
.calc-freq label:last-child { border-right: none; }
.calc-freq input[type=radio]:checked + label { background: #07542b; color: #fff; }
.calc-freq input[type=radio]:focus-visible + label { outline: 2px solid #07542b; outline-offset: -2px; }

@media (max-width: 860px) {
    .calc-grid { grid-template-columns: 1fr; }
    .calc-results { position: static; }
}
@media (max-width: 480px) { .calc-meta { grid-template-columns: 1fr; gap: var(--sp-2); } }