/* Pension calculator pages: the blog's paper page plus the calculator card. */
.calc-page h1 { margin-bottom: .75rem; }
.calc-page .post__lede { font-size: 1.2rem; color: var(--ink-soft); margin: 0 0 2rem; text-wrap: pretty; }
.calc { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.25rem, 4vw, 2rem); margin: 0 0 2.5rem; box-shadow: 0 1px 0 rgba(36, 28, 26, .04), 0 12px 30px -18px rgba(36, 28, 26, .35); }
.calc__h { font: 400 1.5rem/1.2 var(--serif); margin: 0 0 1rem; }
.calc__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem 1.25rem; }
.calc label > span, .calc legend { display: block; font-size: .9375rem; font-weight: 500; margin-bottom: .35rem; line-height: 1.35; }
.calc input[type=text], .calc input[type=number], .calc select { width: 100%; font: inherit; font-size: 1.0625rem; color: var(--ink); background: var(--cream); border: 1px solid rgba(36, 28, 26, .3); border-radius: 3px; padding: .65rem .75rem; min-height: 2.9rem; }
.calc input:focus, .calc select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.calc fieldset { border: 0; margin: 1.25rem 0 0; padding: 0; }
.calc fieldset p { margin: 0 0 .5rem; font-size: .9375rem; color: var(--ink-soft); }
.calc__radios { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.calc__radios label { display: flex; align-items: center; gap: .5rem; font-size: 1rem; cursor: pointer; }
.calc__radios input { width: 1.15rem; height: 1.15rem; accent-color: var(--gold); }
.calc__go { margin-top: 1.5rem; font: inherit; font-weight: 500; font-size: 1.0625rem; background: var(--brown); color: var(--cream); border: 0; border-radius: 2px; padding: .9rem 1.4rem; cursor: pointer; }
.calc__go:hover { background: #000; }
.calc__fine { font-size: .875rem; color: var(--ink-soft); margin: 1rem 0 0; }
.calc__out { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); scroll-margin-top: 5rem; }
.calc__out p { margin: 0; }
.calc__err { color: #8a2a12; font-weight: 500; }
.calc__big { font: 400 clamp(2rem, 1.5rem + 2.5vw, 2.8rem)/1.1 var(--serif); }
.calc__big strong { font-weight: 400; color: var(--gold); }
.calc__what { margin-top: .5rem !important; }
.calc__math { margin-top: .75rem !important; font-size: .9375rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.calc__ages { margin-top: 1.25rem; font-size: .9375rem; }
.calc__ages summary { cursor: pointer; font-weight: 500; color: var(--gold); }
.calc__ages table { width: 100%; border-collapse: collapse; margin-top: .75rem; font-variant-numeric: tabular-nums; }
.calc__ages th, .calc__ages td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
.calc__ages th { font-weight: 500; color: var(--ink-soft); }
.calc__ages tr.is-target td { font-weight: 600; background: var(--paper-2); }
.calc__ages p { margin-top: .5rem !important; color: var(--ink-soft); }
.calc__barcell { position: relative; width: 50%; }
.calc__barcell span:last-child { position: relative; }
.calc__bar { position: absolute; left: .5rem; top: 50%; height: 1.4rem; transform: translateY(-50%); max-width: calc(100% - 1rem); background: color-mix(in oklab, var(--gold-lift) 35%, transparent); border-radius: 2px; }
.calc__barcell span:last-child { padding-left: .35rem; }
.calc__next { margin-top: 1.5rem; padding: 1.25rem 1.4rem; background: var(--brown); color: #D6C8B5; border-radius: 3px; }
.calc__next p + p { margin-top: .6rem !important; }
.calc__nexth { font: 400 1.45rem/1.2 var(--serif); color: #fff; }
.calc__next .btn { margin-top: .4rem; }
.post__body table.rules { width: 100%; border-collapse: collapse; margin-top: 1em; font-size: 1rem; }
.post__body table.rules th, .post__body table.rules td { text-align: left; vertical-align: top; padding: .55rem .6rem; border-bottom: 1px solid var(--line); }
.post__body table.rules th { font-weight: 600; }
.plans-list { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; }
.plans-list li + li { margin-top: 0 !important; }
.plans-list a { display: block; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 3px; text-decoration: none; color: var(--ink) !important; background: #fff; }
.plans-list a:hover { border-color: var(--gold); }
.plans-list b { display: block; font-weight: 600; }
.plans-list span { font-size: .9375rem; color: var(--ink-soft); }
.faq h3 { margin-top: 1.5em !important; }
@media (max-width: 520px) { .calc__ages th:nth-child(3), .calc__ages td:nth-child(3) { display: none; } }