.life-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  align-items: center;
  gap: clamp(26px, 5vw, 70px);
  margin: 8px 0 32px;
}
.life-intro h1 { margin: 0 0 14px; max-width: 27ch; font-size: var(--tool-title); font-weight: 680; line-height: 1.12; letter-spacing: -.035em; }
.life-intro > div > p { margin: 0; max-width: 60ch; color: var(--secondary); font-size: var(--lead); line-height: 1.55; }
.life-start, .life-guide-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 19px; }
.life-start { margin-top: 13px; }
.life-start a, .life-guide-nav a { display: inline-flex; align-items: center; min-height: 44px; gap: 7px; font-size: .91rem; font-weight: 620; }
.life-horizons { min-width: 0; margin: 0; padding: clamp(17px, 2.5vw, 28px); border-radius: var(--panel-radius); background: var(--night-banner, var(--navy)); color: #fff; }
.life-horizons figcaption { font-size: clamp(19px, 2vw, 25px); font-weight: 620; letter-spacing: -.028em; line-height: 1.2; }
.life-horizons dl { margin: 16px 0 12px; }
.life-period { --period: 100%; position: relative; display: grid; grid-template-columns: 1fr max-content; align-items: baseline; gap: 10px; margin: 12px 0; padding-bottom: 9px; font-size: .88rem; }
.life-period dt, .life-period dd { margin: 0; }
.life-period dd { font-weight: 680; font-variant-numeric: tabular-nums; }
.life-period::before, .life-period::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 2px; }
.life-period::before { width: 100%; background: #466286; }
.life-period::after { width: var(--period); background: #a6caff; }
.life-period-care { --period: 30%; }
.life-period-benefit { --period: 50%; }
.life-horizons > p { margin: 0; color: #e0eaff; font-size: .81rem; line-height: 1.5; }
.life-horizons a { color: white; }
.life-horizons a:focus-visible { outline-color: white; }

.life-guide { max-width: 1010px; margin: clamp(42px, 6vw, 76px) auto 0; color: var(--ink); }
.life-guide h2 { margin: 0; max-width: 38ch; font-size: var(--section-title); font-weight: 660; line-height: 1.18; letter-spacing: -.032em; text-wrap: balance; }
.life-guide-opening { padding-top: clamp(24px, 4vw, 42px); border-top: 1px solid var(--rule); }
.life-guide p, .life-source-ledger dd, .life-calculation-steps li { max-width: 78ch; color: var(--secondary); line-height: 1.63; }
.life-guide p { margin: 12px 0; }
.life-guide-nav { border-block: 1px solid var(--rule); padding: 5px 0; margin-top: 20px; }
.life-guide > section { padding: clamp(24px, 3.4vw, 40px) 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 1rem; }
.life-source-ledger { margin: 16px 0; }
.life-source-ledger > div { display: grid; grid-template-columns: minmax(150px, .32fr) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.life-source-ledger dt { font-weight: 650; }
.life-source-ledger dd { margin: 0; }
.life-example-table { width: min(100%, 52rem); margin: 18px 0; border-collapse: collapse; font-size: .9rem; line-height: 1.45; }
.life-example-table caption { padding-bottom: 8px; text-align: left; color: var(--secondary); font-size: .84rem; font-weight: 570; }
.life-example-table th, .life-example-table td { padding: 10px 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.life-example-table thead th { background: var(--night-soft, #e9f1fc); color: var(--night-navy, #29476d); font-size: .84rem; }
.life-example-table tbody th { font-weight: 590; }
.life-example-table td { font-variant-numeric: tabular-nums; }
.life-example-table .life-total { background: var(--night-soft, #ecf3ff); color: var(--night-navy, #173e80); font-weight: 680; }
.life-example-action button { min-height: var(--control-height); padding: 8px 15px; border: 1px solid var(--blue); border-radius: 8px; background: var(--blue); color: var(--night-on-action, white); font: inherit; font-weight: 620; }
.life-example-action button:hover { background: var(--blue-hover); }
.life-calculation-steps { max-width: 79ch; padding-left: 1.5rem; margin: 16px 0; }
.life-calculation-steps li { padding: 4px 0 8px 4px; }
.life-calculation-steps li::marker { color: var(--blue); font-weight: 650; }
.life-calculation-steps strong { color: var(--ink); }
.life-math { white-space: nowrap; font-variant-numeric: tabular-nums; }
.life-questions details { max-width: 78ch; border-bottom: 1px solid var(--rule); }
.life-questions h2 { margin-bottom: 12px; }
.life-questions summary { padding: 14px 2px; font-weight: 630; line-height: 1.4; }
.life-questions summary::marker { color: var(--blue); }
.life-questions details p { margin: 0 0 15px; }
.life-guide .life-provenance { border-bottom: 0; }
.life-guide .life-checked { font-size: .88rem; }
@media (max-width: 760px) {
  .life-intro { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .life-intro h1 { max-width: none; }
  .life-horizons { max-width: 35rem; }
}
@media (max-width: 560px) {
  .life-source-ledger > div { grid-template-columns: 1fr; gap: 3px; }
  .life-guide-nav { gap: 0 13px; }
  .life-example-table th, .life-example-table td { padding: 8px 5px; }
}
@media print {
  .life-intro, .life-guide { display: none; }
}
