/* Retirement Age Explorer */
.age-explorer{
  background:var(--surface-soft);border:2px solid var(--border);border-radius:var(--radius);
  padding:28px 30px;margin:24px 0;text-align:center
}
.age-explorer-eyebrow{
  display:block;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;
  font-size:var(--fs-2xs);margin-bottom:12px
}
.age-explorer-readout{display:flex;align-items:baseline;justify-content:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.age-explorer-age{font-size:var(--fs-2xl);font-weight:800;color:var(--blue);transition:color .25s ease}
.age-explorer-rate{font-size:var(--fs-icon);font-weight:700;color:var(--purple);transition:color .25s ease}

.age-slider{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;margin:8px 0 8px;
  background:linear-gradient(to right,var(--blue) 0%,var(--blue) var(--age-progress,0%),#E2E8F0 var(--age-progress,0%),#E2E8F0 100%);
  outline:none;cursor:pointer
}
.age-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid var(--blue);
  box-shadow:0 4px 10px rgba(30,58,138,.35);transition:transform .2s ease,box-shadow .2s ease;cursor:grab
}
.age-slider:hover::-webkit-slider-thumb,.age-slider:focus-visible::-webkit-slider-thumb{transform:scale(1.12)}
.age-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.05)}
.age-slider::-moz-range-track{height:8px;border-radius:99px;background:#E2E8F0}
.age-slider::-moz-range-progress{height:8px;border-radius:99px;background:var(--blue)}
.age-slider::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid var(--blue);
  box-shadow:0 4px 10px rgba(30,58,138,.35);transition:transform .2s ease;cursor:grab
}
.age-slider:focus-visible{outline:3px solid var(--blue);outline-offset:6px;border-radius:99px}

.age-slider-ticks{display:flex;justify-content:space-between;padding:0 2px;font-weight:700;color:var(--muted)}
.age-slider-ticks span{display:inline-block;opacity:.5;transition:color .22s ease,opacity .22s ease,transform .22s ease}
.age-slider-ticks span.is-near{opacity:.8}
.age-slider-ticks span.is-active{opacity:1;color:var(--blue);transform:scale(1.18)}
.age-explorer-info{margin:18px 0 0;color:var(--muted);min-height:48px}

@media(max-width:640px){
  .age-explorer{padding:22px 18px}
  .age-explorer-age{font-size:28px}
}