/* Life insurance needs calculator (/solutions#calculator). Uses site tokens from styles.css. */
.opening--calc .letter { grid-column: 1 / span 6; }
.opening--calc .calc { grid-column: 7 / span 6; }
.calc { scroll-margin-top: var(--space-lg); }
.calc-card { display: grid; gap: var(--space-lg); padding: var(--space-xl); background: #fff; border: 1px solid var(--color-rule); border-top: 6px solid var(--color-accent); border-radius: var(--radius-card); box-shadow: 0 18px 44px var(--color-shadow-raised); font-size: 1.125rem; }
.calc-badge { justify-self: start; margin: 0; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-forest); color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: .02em; }
.calc-title { margin: 0; font-family: var(--font-display); color: var(--color-forest); font-size: var(--text-section); max-width: none; }
.calc-intro { margin: 0; color: var(--color-ink); line-height: 1.5; }
.calc-step { margin: 0; padding: var(--space-lg) 0 0; border: 0; border-top: 1px solid var(--color-rule); display: grid; gap: var(--space-lg); min-width: 0; }
.calc-step legend { display: flex; align-items: center; gap: var(--space-sm); padding: 0 0 var(--space-xs); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--color-forest); }
.calc-num { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-accent); color: #fff; font-size: 1.0625rem; flex: none; }
.calc-step--assume { background: var(--color-paper); margin-inline: calc(var(--space-md) * -1); padding: var(--space-md); border: 1px dashed var(--color-rule-strong); border-radius: var(--radius-control); }
.calc-field { display: grid; gap: var(--space-xs); }
.calc-field label { font-weight: 700; color: var(--color-ink); }
.calc-help { margin: 0; color: var(--color-ink-2, var(--color-muted)); font-size: 1.0625rem; line-height: 1.45; }
.calc-inputs { display: grid; grid-template-columns: minmax(0, 1fr) 11rem; gap: var(--space-md); align-items: center; }
.calc-box { display: flex; align-items: center; min-height: 52px; border: 2px solid var(--color-rule-strong); border-radius: var(--radius-control); background: #fff; padding-inline: var(--space-sm); }
.calc-box:focus-within { border-color: var(--color-forest); outline: 3px solid var(--color-focus); outline-offset: 2px; }
.calc-box input { flex: 1; min-width: 0; border: 0; background: transparent; font: 700 1.1875rem/1 var(--font-body); color: var(--color-ink); padding: var(--space-xs) 0; text-align: right; }
.calc-box input:focus { outline: none; }
.calc-pre { font-weight: 700; color: var(--color-muted); margin-right: var(--space-2xs); }
.calc-suf { margin-left: var(--space-xs); color: var(--color-muted); white-space: nowrap; font-size: 1rem; }
.calc input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; --fill: 0%; }
.calc input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: linear-gradient(to right, var(--color-accent) var(--fill), var(--color-rule) var(--fill)); }
.calc input[type=range]::-moz-range-track { height: 10px; border-radius: 999px; background: var(--color-rule); }
.calc input[type=range]::-moz-range-progress { height: 10px; border-radius: 999px; background: var(--color-accent); }
.calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -11px; border-radius: 50%; background: #fff; border: 4px solid var(--color-forest); box-shadow: 0 2px 6px var(--color-shadow-raised); }
.calc input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 4px solid var(--color-forest); }
.calc input[type=range]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; border-radius: 8px; }
.calc-result { position: sticky; bottom: var(--space-sm); z-index: 2; padding: var(--space-lg); border-radius: var(--radius-card); background: linear-gradient(135deg, var(--color-forest), var(--color-navy-deep)); color: #fff; text-align: center; box-shadow: 0 12px 30px var(--color-shadow-raised); }
.calc-result p { margin: 0; color: #fff; }
.calc-result-label { font-weight: 700; font-size: 1.125rem; }
.calc-result-value { font-family: var(--font-display); font-size: clamp(2.25rem, 4vw + 1rem, 3.25rem); font-weight: 800; line-height: 1.1; padding-block: var(--space-2xs); font-variant-numeric: tabular-nums; }
.calc-result-note { font-size: 1.0625rem; opacity: .95; }
.calc-breakdown summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-weight: 700; color: var(--color-forest); }
.calc-breakdown dl { margin: 0; display: grid; }
.calc-line { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); font-size: 1.0625rem; }
.calc-line dt { color: var(--color-ink); } .calc-line dd { margin: 0; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-line--sub { border-bottom: 2px solid var(--color-rule-strong); } .calc-line--sub dt, .calc-line--sub dd { font-weight: 800; }
.calc-line--total { border-bottom: 0; color: var(--color-accent); } .calc-line--total dt { font-weight: 800; color: var(--color-accent); } .calc-line--total dd { color: var(--color-crimson-deep); font-size: 1.25rem; }
.calc-disclaimer { margin: 0; padding: var(--space-md); background: var(--color-paper); border-left: 4px solid var(--color-forest); border-radius: var(--radius-control); font-size: 1rem; line-height: 1.5; color: var(--color-ink); }
.calc-cta { display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.calc-cta p { margin: 0; }
.calc-cta-title { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; color: var(--color-forest); }
.calc-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.calc-cta-actions .button { min-height: 52px; font-size: 1.125rem; }
.calc-cta-people a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; color: var(--color-forest); }
@media (max-width: 64rem) { .opening--calc .letter, .opening--calc .calc { grid-column: 1 / -1; } }
@media (max-width: 40rem) {
  .calc-card { padding: var(--space-md); }
  .calc-inputs { grid-template-columns: 1fr; gap: var(--space-xs); }
  .calc-box { order: -1; }
  .calc-cta-actions .button { width: 100%; }
}
@media (forced-colors: active) { .calc-result { border: 2px solid CanvasText; } }
/* The hero is navy with white ink; the card is a light surface, so reset ink inside it. */
.opening .calc-card { color: var(--color-ink); }
.opening .calc-card .calc-title { color: var(--color-forest); }
.opening .calc-card .calc-result, .opening .calc-card .calc-result p, .opening .calc-card .calc-badge { color: #fff; }
.opening .calc-card .button.outline { color: var(--color-forest); border-color: var(--color-forest); background: #fff; }
.opening--calc .grid { align-items: start; }
@media (min-width: 64.01rem) { .opening--calc .letter { position: sticky; top: var(--space-2xl); } }
/* 2026-10-29 layout: calculator in its own section, inputs left, sticky result right. */
.calc-jump { margin: var(--space-sm) 0 0; }
.calc-jump .button { min-height: 44px; font-size: 1rem; }
.calc-section .calc { max-width: 72rem; margin-inline: auto; }
.calc-layout { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); align-items: start; }
.calc-inputs-col, .calc-panel { display: grid; gap: var(--space-lg); min-width: 0; }
@media (min-width: 64.01rem) {
  .calc-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .calc-panel { position: sticky; top: var(--space-lg); }
  .calc-panel .calc-result { position: static; }
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.calc-help:empty { display: none; }
.calc-field label { display: flex; gap: var(--space-sm); align-items: flex-start; line-height: 1.4; }
.calc-result-value--sub { font-size: clamp(1.5rem, 2vw + 1rem, 2rem); margin-bottom: var(--space-sm); }