/* A calmer reading hierarchy; details remain available without dominating the page. */
.wrap{padding-top:20px;padding-bottom:48px}
header{padding-block:18px}
.page-title{margin:12px 0 24px}.page-title h1{margin-top:0}
p{line-height:1.55}
.micro,.planner-note,.planner-bottom,.field small,.performance-asof,.performance-missing{font-size:.875rem;line-height:1.5}
summary{cursor:pointer;line-height:1.5;min-height:24px}
summary:focus-visible{outline:3px solid var(--blue);outline-offset:5px;border-radius:3px}
.button{min-height:44px}
input[type=number],select{font-size:1rem}
input[type=range]{min-height:24px;accent-color:var(--blue)}
.auto-update-note{font-size:.875rem;color:var(--muted);margin:16px 0}
.error:empty{display:none}
/* Bring the first question and its action into a normal laptop viewport. */
.in-journey .wrap{padding-top:6px}
.focused-flow,.entry-page,.direct-page{margin-top:8px}
.flow .progress{margin-bottom:16px}
.flow .flow-top{margin-bottom:8px}
.flow .question>.eyebrow{margin-top:12px}
.flow .question h1{margin-block:8px 10px}
.flow .question .lead{font-size:1rem;margin:8px 0 14px}
.flow .choice strong{font-size:1rem}
.flow .field small{font-size:.875rem}
.flow .field>input,.flow .field>select{min-height:44px}
.flow .flow-actions{margin-top:16px}
.entry-grid article{padding:24px}.entry-grid p{margin-bottom:18px}
/* Compact planner header, with enough room for the chart and key figures. */
.planner-flow .planner-heading{margin:10px 0 16px}
.planner-heading>p:last-child{font-size:1rem;margin:8px 0;max-width:65rem}
.planner-heading .planner-context{font-size:.875rem}
.planner-layout{gap:22px;grid-template-columns:minmax(280px,.82fr) minmax(0,1.3fr)}
.planner-inputs,.planner-chart,.planner-result-top{padding:18px 20px}
.planner-inputs>.field{margin-bottom:12px}
.planner-inputs .field small{font-size:.875rem;line-height:1.4}
.planner-inputs>p.micro{margin-bottom:0}
.planner-result-top>p:not(.eyebrow){margin:7px 0;font-size:.875rem;line-height:1.45}
.planner-result-top>.eyebrow{margin:0 0 8px}
.planner-result-top .planner-explanation{font-size:.875rem;max-width:none}
.planner-result-top>.button{margin-top:5px;min-height:44px;padding:11px 18px}
.planner-chart-heading h2{font-size:1.15rem}
.planner-chart-heading span,.planner-totals span,.planner-note{font-size:.875rem}
.planner-chart .growth-bars{height:170px;max-height:170px}
.planner-chart .growth-key{margin-block:14px 10px;font-size:.875rem}
.planner-totals{margin:16px 0}.planner-target{padding:14px;margin:14px 0}
.planner-actions{position:static;box-shadow:none;margin-top:18px}
/* Selected investment first, with the supporting choices behind a clear control. */
.review-intro{margin:16px 0 20px}.review-intro p{margin-bottom:0}
.review-selected{padding:22px 24px}
.review-selected .review-heading{padding-bottom:12px;margin-bottom:14px}
.review-selected-grid{gap:24px}.review-selected-grid p{margin:8px 0;font-size:1rem}
.review-selected-grid h2{font-size:1.35rem}.review-selected-grid h3{font-size:1.15rem}
.review-at-a-glance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:20px 0 0;padding-top:16px;border-top:1px solid #ffffff30}
.review-at-a-glance dt{font-size:.875rem;color:#e0d9ed}.review-at-a-glance dd{margin:6px 0 0;font-weight:700;font-size:1.1rem;color:#dcfa53}
.review-profile-line{margin:16px 0 12px;padding-top:12px}
.review-alternatives{margin:16px 0;border:1px solid #c9bce6;border-radius:14px;background:#f3efff;overflow:hidden}
.review-alternatives>summary{padding:16px 20px;font-weight:650}
.review-alternatives .fund-choice-panel{margin:0;padding:18px 20px;border:0;border-top:1px solid #d8cdef;border-radius:0}
.review-panel{padding:20px;margin-block:16px}
.review-heading{margin-bottom:12px}.review-heading h2{font-size:1.15rem}
.review-list>div{padding:8px 0}.review-list dt,.review-list dd{font-size:.9375rem}
.review-facts-grid{gap:16px}.review-facts-grid .review-panel{margin-block:0}
.review-plan-facts{margin:16px 0;align-items:start}
.review-personal>details>summary{font-weight:650}.review-personal details[open]>.review-heading{margin-top:16px}
.review-projection-total{padding:0;margin:12px 0}
.review-projection-total strong{font-size:clamp(1.8rem,3vw,2.3rem)}
.review-outcome{padding:14px 16px;margin-block:14px}.review-outcome p{margin:6px 0}
.review-projection-details{margin:14px 0}.review-projection-details>summary{font-weight:650}
.review-projection-details .growth-bars{height:200px}
.review-agreement{padding:22px;margin-top:18px}.review-agreement h2{font-size:1.3rem}
/* Keep the relevant fund facts and dated returns visible. */
.fund-card{padding:20px;min-width:0}
.fund-card h3{font-size:1.25rem;line-height:1.3;margin:10px 0}
.fund-card>.muted{font-size:1rem;margin:10px 0;line-height:1.5}
.fund-card .fund-stats{padding-block:12px;margin-block:12px}
.fund-card .fund-top{margin-bottom:10px}.fund-card .eyebrow{margin-block:10px}
.fund-card .fund-number{font-size:2.1rem}
.fund-card .fund-compare-performance{padding:12px;margin:12px 0;background:#fff}
.fund-card .performance-asof{margin:6px 0}.fund-card .performance-figures{margin:10px 0}
.fund-card .fund-essential-risk{font-size:.875rem;line-height:1.5;margin:10px 0;color:#394668}
.fund-card>details{margin-block:10px}.fund-card>.micro{margin:6px 0 0}
.fund-compare-card .fund-compare-metrics span,.fund-compare-card p,.fund-compare-card details{font-size:.875rem}
.fund-compare-card .tag{font-size:.6875rem}.fund-compare-card .fund-compare-performance{margin-top:0}
.account-card{padding:22px}.account-card h3{font-size:1.4rem;line-height:1.25;margin-block:10px}
.account-card>.muted,.account-card .muted{font-size:1rem;line-height:1.5}
.account-tradeoffs{gap:18px;margin-block:14px}.account-tradeoffs li{font-size:.9375rem;line-height:1.5;margin-bottom:8px}
.account-tradeoffs h4{font-size:1rem;margin-block:0 10px}
/* Learning is skimmable, with examples on demand. */
.learn-intro{padding-block:12px 24px;margin-bottom:20px}
.learn-intro h1{font-size:clamp(2rem,3vw,2.65rem);line-height:1.15}
.learn-concept{padding:22px 24px}.learn-concept h2{font-size:1.55rem;line-height:1.25;margin:12px 0}
.learn-concept p{font-size:1rem;line-height:1.55;margin-block:12px}
.learn-concept .learn-example{margin-block:12px;padding:0;border:0;background:transparent}
.learn-example>summary{font-size:.9375rem;font-weight:600}
.learn-concepts{gap:18px;margin-block:20px}
.learn-compound{padding:24px;gap:24px;margin-block:24px}.learn-compound h2{font-size:2rem}
.learn-practical{margin-block:28px}.learn-finish{padding:24px}
.fee-impact-layout{gap:24px}.fee-impact .section-head{margin-bottom:24px}
.fee-impact-win{padding:18px 22px}.fee-impact-win strong{font-size:clamp(2rem,3vw,2.7rem)}
.fee-graph-card{padding:20px}.fee-scenario{padding:16px}.fee-scenario p{margin-block:10px}
.fee-chart-axis{margin-top:16px}.fee-impact-form input{min-height:44px}
@media(min-width:1000px){.wrap{padding-inline:32px}header{padding-inline:32px}.fund-grid{align-items:start}}
@media(max-width:850px){.planner-layout{grid-template-columns:minmax(230px,.9fr) minmax(0,1.1fr);gap:16px}.review-at-a-glance{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
 .wrap{padding:16px 18px 36px}header{padding:14px 18px}
 .planner-layout{grid-template-columns:1fr}.planner-inputs,.planner-chart,.planner-result-top{padding:18px}
 .planner-heading>p:last-child{font-size:1rem}.planner-actions{padding:12px!important;gap:12px}
 .review-selected{padding:20px}.review-selected-grid,.review-facts-grid{grid-template-columns:1fr}
 .review-at-a-glance{gap:16px 12px}.review-at-a-glance dd{font-size:1rem}
 .review-panel{padding:18px}.review-alternatives>summary{padding:16px}
 .review-projection-total strong{overflow-wrap:anywhere}.review-agreement .button{width:100%;white-space:normal}
 .learn-concept,.learn-compound,.learn-finish{padding:20px}.learn-concept h2{font-size:1.4rem}
 .fee-impact-layout{grid-template-columns:1fr}.fee-impact-win{padding:18px}.fee-graph-card{padding:16px}
 .fund-card,.account-card{padding:20px}.flow .choices{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.fund-card{gap:0}.fund-card .micro{font-size:.875rem;line-height:1.45}.fund-card .fund-top{margin-bottom:8px}.fund-card .eyebrow{margin-block:2px 6px}
.account-card{gap:10px}.account-card p{margin-block:6px}.account-tradeoffs{margin-block:8px}
.fund-compare-card .performance-figures dt span{font-size:.8125rem}
.focused-flow .step-insight{margin-block:10px}
.focused-flow .income-tax-estimate{padding:12px 16px;margin-block:12px}
.focused-flow .income-tax-estimate strong{font-size:1.25rem;margin-block:5px}
.focused-flow .income-tax-estimate p{font-size:.875rem;line-height:1.4;margin-block:4px}
.focused-flow .fields{margin-block:12px;gap:10px 16px}
.focused-flow .field-guide{font-size:.875rem;line-height:1.4;margin-top:4px}
.focused-flow .flow-top{font-size:.8125rem}
.review-contributions>details>summary{font-weight:650}.review-contributions details[open]>.review-heading{margin-top:16px}
.review-plan-facts .review-panel{padding:16px 18px;min-height:0}
.review-selected>details>p{font-size:1rem;line-height:1.55;margin-top:12px}
.fund-card h3{margin:6px 0 10px}.fund-card>.muted{margin:0 0 12px}.fund-card .fund-stats{margin:0 0 12px;padding-block:10px}.fund-card .fund-compare-performance{margin:0 0 10px}.fund-card>details{padding-block:8px;margin:0}.fund-card .fund-essential-risk{margin:4px 0 10px}.fund-card>.micro{margin-top:8px}
.account-card .account-tradeoffs li{margin-bottom:6px}.account-card>details{padding-block:8px}
.focused-flow{margin-bottom:12px}.wrap:has(.focused-flow){padding-bottom:16px}
.focused-flow .question:has(input[name=age])>.eyebrow{display:none}
/* A stronger headline, with a small hand-drawn accent in the brand lime. */
.hero-copy h1.hero-headline{font-size:clamp(3.75rem,6.1vw,5.5rem);font-weight:800;line-height:1;letter-spacing:-.06em;margin:0 0 22px;color:#fff}
.hero-headline .headline-lead{display:table;position:relative;isolation:isolate;padding-bottom:.08em;margin-bottom:.08em;white-space:nowrap}
.hero-headline .headline-lead:after{content:"";position:absolute;left:0;right:-.02em;bottom:0;height:.07em;border-radius:60% 35% 45% 20%;background:var(--lime);transform:rotate(-2deg);z-index:-1}
.hero-headline .headline-investing{display:block;white-space:nowrap;transform:skewX(-5deg);transform-origin:left bottom}
.hero-headline .headline-dot{color:var(--lime)}
.hero-copy>p.hero-tagline{margin-top:0}
@media(max-width:850px){.hero-copy h1.hero-headline{font-size:clamp(3.25rem,7.4vw,4.5rem)}}
@media(max-width:600px){.hero-copy h1.hero-headline{font-size:clamp(2.9rem,13.8vw,4rem);margin-bottom:20px}}