/* Public planning stories: typography and data carry the illustration. */
.planning-workspace .sample-story { --sample-green:var(--link-color); --sample-warn:#ffc98b; max-width:1144px; margin:32px auto 0; font-size:1rem; line-height:1.7; overflow-wrap:break-word; }
[data-theme="light"] .sample-story { --sample-warn:#8b4613; }
.sample-story a:not(.btn) { text-decoration:underline; text-underline-offset:.22em; }
.sample-story .sample-breadcrumb { font-size:.875rem; color:var(--text-secondary); margin-bottom:32px; }
.sample-story .sample-kicker { font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sample-green); margin:0 0 16px; }
.sample-story h1 { font:400 clamp(2.45rem,4.8vw,4.35rem)/1.07 Georgia,serif; letter-spacing:-.045em; color:var(--workspace-ink); margin:0 0 24px; }
.sample-story h1 em { font-weight:400; color:var(--sample-green); }
.sample-story h2 { font:400 clamp(1.7rem,3vw,2.4rem)/1.2 Georgia,serif; letter-spacing:-.025em; color:var(--workspace-ink); margin:0 0 20px; }
.sample-story h3 { font-size:1.125rem; margin:0 0 12px; line-height:1.4; }
.sample-story .sample-deck { font-size:1.125rem; color:var(--text-secondary); line-height:1.65; max-width:39rem; }
.sample-story .sample-hero { display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:clamp(28px,5vw,68px); align-items:start; }
.sample-story .sample-household { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 20px; padding:24px 0; margin:20px 0 0; border-block:1px solid var(--border-color); }
.sample-story .sample-household div { min-width:0; }
.sample-story dt { color:var(--text-secondary); font-size:.875rem; font-weight:400; }
.sample-story dd { font-size:1.2rem; color:var(--workspace-ink); margin:2px 0 0; font-variant-numeric:tabular-nums; }
.sample-story .sample-small { font-size:.875rem; color:var(--text-secondary); line-height:1.6; }
.sample-story .sample-widget { padding:28px; background:var(--card-bg); border:1px solid var(--border-color); border-radius:18px; box-shadow:var(--workspace-shadow); min-width:0; }
.sample-story .sample-widget h2 { font-family:inherit; font-size:1.125rem; font-weight:600; line-height:1.4; margin-bottom:20px; }
.sample-story .sample-widget-title { display:flex; align-items:center; gap:10px; font-size:.875rem; color:var(--text-secondary); margin:0 0 22px; }
.sample-story .sample-dot { width:8px; height:8px; border-radius:100%; background:var(--sample-green); display:inline-block; }
.sample-story .sample-controls label { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.9375rem; font-weight:600; }
.sample-story .sample-controls output { color:var(--sample-green); font-variant-numeric:tabular-nums; }
.sample-story input[type="range"] { width:100%; accent-color:var(--primary-color); min-height:44px; cursor:pointer; display:block; margin:0; }
.sample-story .sample-range-ends { display:flex; justify-content:space-between; color:var(--text-secondary); font-size:.8rem; margin-top:-3px; }
.sample-story select { width:100%; min-height:44px; padding:8px 36px 8px 12px; border:1px solid var(--border-color); background:var(--input-bg); color:var(--text-color); border-radius:8px; font:inherit; font-size:.9rem; margin:8px 0 0; }
.sample-story .sample-stress { margin-top:18px; }
.sample-story .sample-result { padding:24px 0 16px; margin-top:18px; border-top:1px solid var(--border-color); }
.sample-story .sample-result-label { font-size:.875rem; color:var(--text-secondary); margin:0; }
.sample-story .sample-result-number { display:block; font-size:clamp(2.25rem,4vw,3.15rem); letter-spacing:-.045em; font-weight:650; font-variant-numeric:tabular-nums; color:var(--workspace-ink); line-height:1.3; }
.sample-story .sample-result-unit { font-size:.875rem; font-weight:400; letter-spacing:0; color:var(--text-secondary); }
.sample-story .sample-verdict { border-left:3px solid var(--sample-green); padding:12px 14px; background:var(--workspace-accent-soft); margin:16px 0 0; font-size:.9375rem; }
.sample-story .sample-verdict[data-state="gap"] { border-color:var(--sample-warn); }
.sample-story .sample-verdict strong { color:var(--workspace-ink); }
.sample-story .sample-mini-metrics { display:grid; grid-template-columns:1fr 1fr; gap:16px; border-top:1px solid var(--border-color); padding-top:18px; margin:18px 0 0; }
.sample-story .sample-mini-metrics dd { font-size:1.075rem; }
.sample-story .sample-budget { margin-top:12px; }
.sample-story .sample-bar-label { display:flex; justify-content:space-between; gap:8px; font-size:.875rem; margin:12px 0 5px; }
.sample-story .sample-bar { height:10px; background:var(--workspace-soft); border-radius:2px; overflow:hidden; }
.sample-story .sample-bar span { display:block; height:100%; width:var(--bar-width); background:var(--sample-green); transition:width .18s ease; }
.sample-story .sample-bar.sample-bar-budget span { background:var(--text-secondary); }
.sample-story .sample-widget-note { font-size:.8rem; color:var(--text-secondary); margin:18px 0 0; }
.sample-story .sample-reveal { margin:68px 0; padding:30px 0; border-block:1px solid var(--border-color); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr); gap:40px; align-items:center; }
.sample-story .sample-reveal-number { font:400 clamp(2.8rem,6vw,5rem)/1.1 Georgia,serif; color:var(--sample-green); letter-spacing:-.04em; margin:0 0 8px; }
.sample-story .sample-reveal p:last-child { margin-bottom:0; }
.sample-story .sample-chapter { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start; margin:64px 0; }
.sample-story .sample-section-number { font-size:.8rem; color:var(--sample-green); font-weight:650; letter-spacing:.07em; margin:0 0 12px; }
.sample-story .sample-chart { padding:28px; border-radius:12px; background:var(--workspace-soft); margin:0; }
.sample-story .sample-chart figcaption { font-size:.875rem; font-weight:600; margin-bottom:24px; }
.sample-story .sample-chart-row { margin-bottom:22px; }
.sample-story .sample-chart-row:last-child { margin-bottom:0; }
.sample-story .sample-chart-row .sample-bar { height:22px; background:var(--card-bg); }
.sample-story .sample-chart-row .sample-bar-label { margin-top:0; }
.sample-story .sample-caption { font-size:.875rem; line-height:1.65; color:var(--text-secondary); margin:16px 0 0; }
.sample-story .sample-timeline { display:flex; height:24px; gap:3px; margin:16px 0; }
.sample-story .sample-timeline span:first-child { background:var(--sample-green); width:var(--working-width); }
.sample-story .sample-timeline span:last-child { background:var(--text-secondary); flex:1; }
.sample-story .sample-timeline-legend { display:flex; justify-content:space-between; gap:16px; font-size:.875rem; }
.sample-story .sample-allocation { display:flex; height:24px; overflow:hidden; border-radius:3px; margin:16px 0; }
.sample-story .sample-allocation span { min-width:0; }
.sample-story .sample-allocation .living { background:#71858d; width:38.8889%; }
.sample-story .sample-allocation .retirement { background:#287e69; width:13.8889%; }
.sample-story .sample-allocation .emi { background:#669fcc; }
.sample-story .sample-allocation .remaining { background:#c6a04f; }
.sample-story .sample-legend { display:grid; gap:8px; font-size:.875rem; }
.sample-story .sample-legend div { display:flex; justify-content:space-between; gap:12px; }
.sample-story .sample-legend i { display:inline-block; width:10px; height:10px; margin-right:8px; }
.sample-story .sample-warning { color:var(--sample-warn); }
.sample-story .sample-proof { margin:64px 0 0; padding-top:30px; border-top:1px solid var(--border-color); }
.sample-story details { border-bottom:1px solid var(--border-color); margin:0; }
.sample-story summary { padding:20px 0; font-size:1.0625rem; font-weight:600; cursor:pointer; color:var(--workspace-ink); }
.sample-story details > div { padding:0 0 24px; max-width:58rem; }
.sample-story .sample-table-scroll { max-width:100%; overflow:auto; }
.sample-story table { width:100%; min-width:620px; border-collapse:collapse; font-size:.9rem; }
.sample-story th,.sample-story td { text-align:left; border-bottom:1px solid var(--border-color); padding:12px; font-variant-numeric:tabular-nums; }
.sample-story td { white-space:nowrap; }
.sample-story caption { caption-side:top; color:var(--text-secondary); }
.sample-story .sample-cta { background:var(--workspace-accent-soft); padding:clamp(24px,5vw,48px); border-radius:16px; margin:64px 0 28px; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:32px; align-items:center; }
.sample-story .sample-cta h2 { margin:0 0 16px; }
.sample-story .sample-cta p { margin:0; }
.sample-story .sample-cta .btn { padding:14px 20px; white-space:normal; font-size:1rem; }
.sample-story .sample-cta-action { text-align:center; }
.sample-story .sample-cta-action p { margin-top:10px; font-size:.875rem; color:var(--text-secondary); }
.sample-story .sample-byline { color:var(--text-secondary); font-size:.875rem; }
.sample-story .sample-product { margin:64px 0; }
.sample-story .sample-product img { width:100%; height:auto; border:1px solid var(--border-color); border-radius:12px; display:block; }
.sample-story .sample-product figcaption { font-size:.875rem; color:var(--text-secondary); margin-top:12px; }
.sample-story .sample-index-intro { max-width:760px; margin-bottom:56px; }
.sample-story .sample-index-item { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:48px; padding:40px 0; border-top:1px solid var(--border-color); align-items:center; }
.sample-story .sample-index-item h2 a { color:var(--workspace-ink); text-decoration:none; }
.sample-story .sample-index-item h2 a:hover { text-decoration:underline; }
.sample-story .sample-index-preview { padding:24px; background:var(--workspace-soft); border-radius:12px; }
.sample-story .sample-index-preview strong { font-size:2rem; font-variant-numeric:tabular-nums; letter-spacing:-.04em; color:var(--sample-green); }
.sample-story .sample-index-arrow { color:var(--sample-green); font-size:1.2rem; margin:0 12px; }
.sample-story .sample-sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.sample-story [hidden] { display:none !important; }
@media (max-width:800px) {
 .planning-workspace .sample-story { margin-top:24px; }
 .sample-story .sample-hero,.sample-story .sample-chapter,.sample-story .sample-index-item { grid-template-columns:1fr; gap:28px; }
 .sample-story .sample-hero h1 { max-width:650px; }
 .sample-story .sample-household { grid-template-columns:repeat(2,minmax(0,1fr)); margin:20px 0 4px; }
 .sample-story .sample-reveal { grid-template-columns:1fr; gap:20px; margin:44px 0; }
 .sample-story .sample-chapter,.sample-story .sample-product { margin:44px 0; }
 .sample-story .sample-cta { grid-template-columns:1fr; gap:24px; margin-top:44px; }
 .sample-story .sample-cta-action { text-align:left; }
 .sample-story .sample-widget,.sample-story .sample-chart { padding:22px; }
 .sample-story .sample-breadcrumb { margin-bottom:24px; }
 .sample-story .sample-index-preview { order:0; }
}
@media (max-width:420px) {
 .sample-story .sample-widget,.sample-story .sample-chart { padding:18px; }
 .sample-story .sample-mini-metrics { gap:12px; }
 .sample-story .sample-result-number { font-size:2.35rem; }
 .sample-story .sample-household dd { font-size:1.125rem; }
}
@media (prefers-reduced-motion:reduce) { .sample-story .sample-bar span { transition:none; } }
@media print { .sample-story .sample-controls { display:none !important; } .sample-story details > div { display:block; } .sample-story .sample-hero,.sample-story .sample-chapter { display:block; } }