:root {
  color-scheme: light;
  --ink: #17231d;
  --muted: #617067;
  --paper: #f6f3ea;
  --card: #fffefa;
  --line: #d8ddd5;
  --green: #17664c;
  --green-dark: #104733;
  --green-soft: #e4f1e9;
  --gold: #c88924;
  --gold-soft: #fff2d8;
  --rose: #b85252;
  --blue: #316ca8;
  --shadow: 0 20px 60px rgba(35, 50, 41, .09);
  --page-pad: clamp(24px, 5vw, 76px);
}

/* Chapter 7: evidence first, then a simple retirement sequence. */
.investment-block { padding: clamp(24px, 4vw, 48px) var(--page-pad); border-bottom: 1px solid var(--line); }
.investment-comparison-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.realestate-comparison { margin-top: 24px; }
.realestate-comparison > summary { width: fit-content; padding: 12px 18px; border: 1px solid var(--green); border-radius: 12px; color: var(--green-dark); background: var(--green-soft); font-weight: 750; cursor: pointer; }
.realestate-comparison-body { margin-top: 18px; }
.investment-options.realestate-options { min-width: 580px; }
.investment-options.realestate-options th:first-child { width: 23%; }
.investment-options { width: 100%; min-width: 740px; border-collapse: collapse; table-layout: fixed; font-size: 1rem; }
.investment-options th, .investment-options td { padding: 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.investment-options thead th { background: var(--green-soft); color: var(--green-dark); font-size: 1.1rem; }
.investment-options th:first-child { width: 19%; }
.investment-options tbody th { background: var(--paper); }
.investment-options td { background: var(--card); }
.investment-options td.comparison-advantage::before { content: '✓'; display: inline; color: #17664c; font-size: 1.15em; font-weight: 900; margin-right: .35em; }
.investment-options tr:last-child > * { border-bottom: 0; }
.investment-options tr > :last-child { border-right: 0; }
.investment-comparison-takeaway { padding: 20px 24px; margin-top: 24px; background: var(--green-soft); border-radius: 16px; }
.investment-comparison-takeaway h3 { margin: 0 0 8px; }
.investment-comparison-takeaway p { margin: 0; }
@media (max-width: 600px) {
  .investment-options { min-width: 680px; font-size: .95rem; }
  .investment-options th, .investment-options td { padding: 12px; }
}
.how-section > h2 { padding: 24px var(--page-pad) 0; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.learn-hub { margin-top: 28px; }
.learn-hub select { width: 100%; min-height: 48px; margin: 10px 0 18px; }
.learn-hub details { border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin: 8px 0 20px; }
.learn-hub summary { cursor: pointer; color: var(--green-dark); font-weight: 800; }
.learn-questions { display: grid; gap: 12px; margin: 18px 0; }
.learn-questions button { text-align: left; white-space: normal; }
.intro-welcome { max-width: 900px; }
.intro-market-layout { display: grid; grid-template-columns: 1fr; align-items: start; gap: 32px; }  /* outline removed 2026-09-20; the chart owns the page */
.market-overview { min-width: 0; margin: 0; padding: 16px 22px 14px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.market-overview figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px; margin-bottom: 6px; }
.market-overview h2 { margin: 0; font-size: clamp(1.5rem, 2.3vw, 2rem); }
.market-overview figcaption h2 + h2 { font-size: clamp(1.25rem, 1.9vw, 1.65rem); }
#marketOverviewPeriod { white-space: nowrap; }
.market-overview svg { display: block; width: 100%; touch-action: pan-y; }
.market-overview svg { cursor: zoom-in; }
.market-overview svg[data-zoomed="true"] { cursor: zoom-out; }
.market-zoom-preview { visibility: hidden; }
@media (hover: hover) {
  .market-overview svg:hover .market-zoom-preview { visibility: visible; }
}
.market-overview svg text { font-family: inherit; fill: var(--muted); font-size: 15px; }
.market-overview svg .market-panel-label { fill: var(--ink); font-weight: 800; font-size: 17px; }
.market-overview svg .market-cagr-watermark { fill: #6c9782; font-size: 88px; font-weight: 850; letter-spacing: -4px; }
.market-overview svg .market-cagr-caption { fill: var(--green-dark); font-size: 18px; }
.market-year-detail { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.market-year-detail > strong { font-size: 1.3rem; }
.market-year-detail span span { color: var(--muted); font-size: .85rem; }
.market-year-detail b { white-space: nowrap; }
.market-overview-note { color: var(--muted); font-size: .8rem; margin: 6px 0 0; }
@media (max-width: 1100px) { .intro-market-layout { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .market-overview { padding: 14px 8px; } }
.intro-welcome > p:first-child { color: var(--green); font-weight: 800; }
.intro-welcome h1 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.1; letter-spacing: -.04em; margin: 16px 0 24px; }
.intro-welcome > p { font-size: 1.1rem; }
.intro-message { margin: 28px 0 36px; color: var(--green-dark); font-size: clamp(1.8rem, 4vw, 2.7rem); }
.intro-details { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; border-top: 1px solid var(--line); padding-top: 24px; }
.intro-details h2 { font-size: 1.15rem; }
.intro-agenda { display: flex; flex-wrap: wrap; list-style: none; padding: 0; gap: 10px 20px; color: var(--green-dark); font-weight: 800; }
.intro-footnote { margin-top: 32px; color: var(--muted); font-size: .9rem; max-width: 850px; }
@media (max-width: 650px) { .intro-details { grid-template-columns: 1fr; gap: 12px; } .intro-message { margin: 24px 0; } }
.retirement-spark { display: block; width: 100%; max-height: 260px; margin: 20px auto; overflow: visible; }
.spark-axis { fill: none; stroke: var(--line); stroke-width: 2; }
.spark-line, .spark-tip { fill: none; stroke: var(--green); stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
.down .spark-line, .down .spark-tip { stroke: var(--rose); }
.retirement-flow { display: flex; align-items: center; gap: 14px; margin: 24px 0; }
.retirement-flow strong { flex: 1; padding: 20px 14px; background: var(--green-soft); border-radius: 14px; text-align: center; font-size: clamp(.95rem, 2vw, 1.3rem); }
.flow-arrow { color: var(--green); font-size: 2rem; }
.market-story { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 36px 0; }
.market-stage { min-width: 0; border-top: 2px solid var(--line); padding-top: 24px; }
.visual-retirement small { display: block; color: var(--muted); margin-top: 20px; }
.visual-retirement > h2:not(:first-child) { margin-top: 44px; }
@media (max-width: 700px) {
  .market-story { grid-template-columns: 1fr; gap: 16px; }
  .retirement-flow { gap: 7px; }
  .retirement-flow strong { padding: 15px 8px; font-size: .85rem; }
  .flow-arrow { font-size: 1.4rem; }
}
.investment-block h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.25; margin-top: 0; }
.company-choice-intro { padding: clamp(24px, 4vw, 40px) var(--page-pad); border-bottom: 1px solid var(--line); background: #fffefa; }
.company-choice-intro h2 { margin: 0; font-size: clamp(1.4rem, 2.5vw, 2rem); }
.company-mosaic { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 16px; margin: 28px 0; padding: 0; }
.company-mosaic li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 0; text-align: center; }
.company-mosaic img { display: block; width: 64px; height: 48px; object-fit: contain; }
.company-mosaic span { font-size: .85rem; font-weight: 700; color: var(--ink); }
.company-choice-intro > p { margin: 0; font-weight: 750; color: var(--green-dark); }
@media (max-width: 700px) {
  .company-choice-intro { padding: 26px 18px; }
  .company-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 10px; }
  .company-mosaic img { width: 58px; height: 42px; }
}
.investment-block p, .investment-block li { max-width: 960px; }
.retirement-advice { padding-left: 1.2em; margin: 0 0 24px; }
.retirement-advice li { padding-left: .25em; margin: 0 0 20px; line-height: 1.6; }
.retirement-advice li::marker { color: var(--green); }
.retirement-advice strong { color: var(--green-dark); }
.market-stage .retirement-advice { margin-top: 20px; }
.investment-block.investment-answer { margin: 0; border-radius: 0; }
.investment-stat { display: flex; gap: 24px; align-items: center; padding: 24px; background: var(--gold-soft); border-radius: 18px; margin: 24px 0; }
.investment-stat > strong { font-size: clamp(2.8rem, 7vw, 4.5rem); color: var(--green-dark); }
.investment-stat p { margin: 0; font-weight: 750; }
.investment-source { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.investment-source a { color: inherit; text-underline-offset: 3px; }
.jpm-bars { display: grid; gap: 24px; margin: 24px 0; }
.jpm-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 8px 16px; }
.jpm-values { display: grid; grid-template-columns: 9rem 11rem; gap: 16px; align-items: baseline; font-variant-numeric: tabular-nums; }
.jpm-values b { font-size: clamp(1.4rem, 3vw, 2rem); text-align: right; white-space: nowrap; }
.jpm-values span { font-weight: 700; }
.jpm-values .jpm-negative { color: #b42318; }
.jpm-track { position: relative; grid-column: 1 / -1; height: 24px; background: #ecefe9; border-radius: 5px; }
.jpm-track::after { content: ""; position: absolute; left: 12.403%; top: -6px; bottom: -6px; border-left: 2px dashed #4f5d55; pointer-events: none; }
.jpm-track > div { height: 100%; background: var(--green); }
.jpm-row:not(.jpm-initial) ~ .jpm-row .jpm-track > div { background: var(--gold); }
.investment-takeaway { border-left: 5px solid var(--gold); background: var(--gold-soft); padding: 18px 22px; font-weight: 800; }
.jpm-bars + .investment-takeaway { border-left-color: #78847d; background: #ecefe9; color: var(--ink); }
.allocation-story { list-style: none; counter-reset: allocation; margin: 24px 0 36px; padding: 0; }
.allocation-story > li { counter-increment: allocation; border-left: 3px solid var(--green); padding: 4px 0 20px 24px; }
.allocation-story h3 { margin: 0; }
.allocation-story h3::before { content: counter(allocation) '. '; color: var(--green); }
.allocation-story p { margin-bottom: 0; }
@media (max-width: 600px) {
  .investment-stat { display: block; padding: 20px; }
  .jpm-row { grid-template-columns: 1fr; }
  .jpm-values { grid-template-columns: minmax(0, 1fr) 10rem; gap: 10px; }
  .jpm-values b { text-align: left; }
  .investment-block { padding: 26px 18px; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(210, 233, 216, .82), transparent 34rem),
    radial-gradient(circle at 95% 12%, rgba(255, 229, 177, .6), transparent 30rem),
    var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

button, input, select, textarea { font: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

button:focus-visible, a:focus-visible, input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(29, 124, 89, .24);
  outline-offset: 2px;
}

.topbar {
  position: static;  /* unpinned 2026-09-20: the presenter scrolls to the chart and needs the whole screen */
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 10px 28px;
  border-bottom: 1px solid rgba(194, 204, 195, .82);
  background: rgba(250, 248, 240, .9);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 850;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  background: var(--green);
  color: white;
  font-family: Georgia, serif;
  font-size: 1.25rem;
}

.language-switch {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
}

.language-switch button {
  padding: 7px 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 800;
}

.language-switch button.active { background: var(--green); color: white; }

.app-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  width: min(1440px, 100%);
  margin: 0 auto;
}

.chapter-rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: calc(100vh - 72px);
  padding: 34px 20px 24px;
  border-right: 1px solid rgba(194, 204, 195, .75);
}

.rail-label, .eyebrow {
  margin: 0 0 12px;
  color: var(--green);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.chapter-rail nav { display: grid; gap: 5px; }

.chapter-link {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 7px 9px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
}

.chapter-link span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid #cbd3cc;
  border-radius: 50%;
  font-size: .75rem;
}

.chapter-link b { font-size: .82rem; white-space: nowrap; }
.chapter-link:hover { background: rgba(255, 255, 255, .6); color: var(--ink); }
.chapter-link.active { background: white; color: var(--green); box-shadow: 0 7px 24px rgba(38, 59, 47, .07); }
.chapter-link.active span { border-color: var(--green); background: var(--green); color: white; }

.plan-nav-group { display: grid; gap: 3px; margin-top: 3px; }
.plan-subnav { display: grid; gap: 2px; margin-left: 21px; padding-left: 9px; border-left: 2px solid #d4dcd5; }
.plan-parent-link { color: var(--ink); }
.plan-nav-group.active-family .plan-parent-link { color: var(--green); }
.chapter-link.subpage-link { grid-template-columns: 1fr; min-height: 38px; padding: 5px 8px; }
.subpage-link span { width: 20px; height: 20px; border: 0; background: #e4e8e3; font-size: .65rem; }
.subpage-link b { font-size: .76rem; }

.progress-wrap { margin-top: 26px; color: var(--muted); }
.progress-track { height: 5px; margin-bottom: 8px; overflow: hidden; border-radius: 99px; background: #dfe4de; }
.progress-track span { display: block; width: 16.67%; height: 100%; border-radius: inherit; background: var(--green); transition: width .25s; }

main { min-width: 0; padding: 54px var(--page-pad) 40px; }
.chapter { display: none; animation: appear .22s ease-out; }
.chapter.active { display: block; }
@keyframes appear { from { opacity: 0; transform: translateY(5px); } }

.chapter-heading { max-width: 900px; margin-bottom: 24px; }
.chapter-heading h1 { max-width: 900px; margin: 0 0 13px; font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.02; letter-spacing: -.04em; }  /* was 5vw/5rem: two-line titles on the MacBook, 2026-09-20 */
.chapter-heading > p:last-child { max-width: 760px; margin: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.65; }
.section-heading { margin-top: 64px; }
.section-heading h2 { max-width: 780px; margin: 0 0 10px; font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1; letter-spacing: -.045em; }

.lesson-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.lesson-strip div { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.58); }
.lesson-strip span { display: grid; flex: 0 0 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green); font-weight: 900; }
.lesson-strip p { margin: 0; font-size: .86rem; font-weight: 750; }

.plan-breadcrumb { margin: 0 0 12px !important; color: var(--green) !important; font-size: .74rem !important; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.plan-overview { display: grid; gap: 14px; }
.plan-decision {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 150px;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 254, 250, .94);
  color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  text-align: left;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.plan-decision:hover { border-color: #91bea5; transform: translateY(-3px); box-shadow: 0 24px 64px rgba(35, 50, 41, .13); }
.plan-decision-number { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; background: var(--green); color: white; font-size: 1.2rem; font-weight: 950; }
.plan-decision h2 { margin: 0 0 4px; font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -.035em; }
.plan-decision p { max-width: 720px; margin: 0; color: var(--muted); font-size: 1rem; }
.plan-decision > strong { color: var(--green); font-size: 2rem; }
.plan-example { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 22px; margin-top: 24px; padding: clamp(22px, 4vw, 38px); border-radius: 24px; background: var(--green-dark); color: white; }
.plan-example > span { color: #9bd7b8; font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.plan-example p { grid-column: 1; max-width: 830px; margin: 0; color: #e4f2e9; font-size: clamp(1.15rem, 2.2vw, 1.65rem); font-weight: 750; line-height: 1.4; }
.plan-example .primary-button { grid-column: 2; grid-row: 1 / 3; background: white; color: var(--green-dark); }

.tool-card {
  min-width: 0;
  margin-bottom: 22px;
  padding: clamp(19px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 254, 250, .94);
  box-shadow: var(--shadow);
}

.tool-card.full { width: 100%; }
.calculator-stage {
  width: calc(100% + (2 * var(--page-pad))) !important;
  margin-left: calc(-1 * var(--page-pad));
  padding: clamp(24px, 4vw, 54px) var(--page-pad);
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: rgba(255, 254, 250, .78);
  box-shadow: none;
}
.calculator-stage > .tool-header { max-width: 1180px; }
.tool-card h2 { margin: 3px 0 6px; font-size: clamp(1.25rem, 2vw, 1.65rem); letter-spacing: -.025em; }
.tool-card > p, .tool-header p { max-width: 720px; margin: 0; color: var(--muted); }
.tool-number { color: var(--green); font-size: .73rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

.tool-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }

.primary-button, .secondary-button, .ask-button, .text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 15px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 850;
  text-decoration: none;
}

.primary-button { border: 1px solid var(--green); background: var(--green); color: white; }
.primary-button:hover { background: var(--green-dark); }
.secondary-button { border: 1px solid #bcc7bf; background: white; color: var(--ink); }
.ask-button { flex: 0 0 auto; gap: 7px; border: 1px solid #b7d1c1; background: var(--green-soft); color: var(--green-dark); }
.ask-button:hover { border-color: var(--green); }
.text-button { min-height: 34px; padding: 0 6px; border: 0; background: transparent; color: var(--green); }
.wide-button { width: 100%; margin-top: 16px; }

.native-calculator-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 1200px; }
.assistant-only-header { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.native-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 14px; padding: 20px; border-radius: 20px; background: #edf1ec; }
.native-controls > label, .native-controls > .native-field { display: grid; gap: 6px; color: #39463e; font-size: .8rem; font-weight: 850; }
.stepper { display: flex; align-items: stretch; gap: 8px; }
.stepper input { min-width: 0; flex: 1 1 auto; text-align: center; font-size: 1.1rem; }
.step-btn { flex: 0 0 clamp(56px, 20%, 82px); min-height: 56px; padding: 0; border: 1px solid #bcc7bf; border-radius: 11px; background: white; color: var(--green-dark); font-size: 1.8rem; font-weight: 700; line-height: 1; cursor: pointer; user-select: none; transition: border-color .15s, background .15s, transform .08s; }
.step-btn:hover:not(:disabled) { border-color: var(--green); background: var(--green-soft); }
.step-btn:active:not(:disabled) { transform: translateY(1px); background: #dcebe0; }
.step-btn:disabled { opacity: .35; cursor: default; }
.stepper input[type=number]::-webkit-outer-spin-button, .stepper input[type=number]::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.stepper input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.asset-picks { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 2px 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.asset-picks legend { padding: 0 5px; color: var(--muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.asset-picks label { display: flex; align-items: center; gap: 8px; font-size: .77rem; font-weight: 750; cursor: pointer; }.asset-picks input { width: 17px; min-height: 17px; margin: 0; }
.native-controls > .toggle-row { grid-column: 1 / -1; }
.native-results { min-width: 0; }
.history-summary { display: grid; grid-template-columns: minmax(180px, 320px); gap: 10px; margin-bottom: 12px; }.history-summary > div { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: white; }.history-summary span { color: var(--muted); font-size: .68rem; font-weight: 900; text-transform: uppercase; }.history-summary strong { font-size: 1.25rem; }
.native-chart { position: relative; min-width: 0; min-height: 370px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg,#f5f7f3,#fff9ed); }
.native-chart svg { display: block; width: 100%; height: auto; min-height: 360px; }.chart-grid line { stroke: #d6dcd6; stroke-dasharray: 5 5; }.chart-grid text, .native-chart svg > text { fill: #6c776f; font-size: 18px; font-weight: 700; }.zero-line { stroke: #59665e; stroke-width: 2; }
.chart-grid .year-grid-line { opacity: .55; stroke-dasharray: 3 8; }
.chart-grid .year-axis-label { fill: #39483f; font-size: 26px; font-weight: 900; }
.history-point { cursor: help; transition: r .12s, stroke-width .12s; }
.history-point:hover, .history-point:focus { r: 7px; stroke-width: 3; outline: none; }
.chart-tooltip { position: absolute; z-index: 3; max-width: min(290px, calc(100% - 16px)); padding: 9px 11px; border-radius: 10px; background: #102b21; color: white; font-size: .76rem; font-weight: 750; line-height: 1.35; box-shadow: 0 8px 24px rgba(16,43,33,.24); pointer-events: none; }
.history-results { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin-top: 12px; }.history-results article { display: grid; gap: 5px; padding: 14px; border-left: 5px solid var(--series); border-radius: 13px; background: white; }.history-results span { color: var(--muted); font-size: .8rem; font-weight: 850; }.history-results strong { font-size: 1.35rem; }.history-results small { display: block; color: #46534b; font-size: .9rem; line-height: 1.45; font-weight: 750; }.history-results .contribution-caption { color: var(--green-dark); font-size: .84rem; font-weight: 850; }.calculation-note { margin: 12px 0 0; color: var(--muted); font-size: .76rem; }
.history-results .negative-return { color: #b42318; font-weight: 900; }
.risk-workspace { display: grid; gap: 18px; max-width: 1200px; }.risk-control { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: white; }.risk-control > label:first-child { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 12px; color: var(--muted); font-weight: 850; }.risk-control strong { color: var(--green-dark); font-size: 1.1rem; }.risk-control input[type="range"] { accent-color: var(--green); }.risk-control .toggle-row { margin-top: 14px; color: var(--muted); font-size: .78rem; font-weight: 800; }
.risk-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }.risk-stats > div { display: grid; gap: 8px; min-height: 100px; align-content: center; padding: 16px; border-radius: 16px; background: var(--green-soft); }.risk-stats span { color: var(--green-dark); font-size: .68rem; font-weight: 900; text-transform: uppercase; }.risk-stats strong { color: var(--green-dark); font-size: clamp(1rem,1.35vw,1.2rem); }
.risk-stats #riskNegative { white-space: nowrap; }
.risk-stats small { font-size: .8rem; line-height: 1.4; color: var(--muted); }
@media (max-width: 1200px) { .risk-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 400px) { .risk-stats { grid-template-columns: 1fr; } }
#riskWorst, #riskBest { display: grid; gap: 5px; }
#riskWorst .risk-worst-row, #riskBest .risk-worst-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; color: inherit; font-size: inherit; font-weight: 850; line-height: 1.15; text-transform: none; }
#riskWorst .risk-worst-row > span, #riskBest .risk-worst-row > span { color: inherit; font-size: inherit; font-weight: inherit; text-transform: none; }
#riskWorst .risk-worst-return.negative, #riskBest .risk-worst-return.negative { color: #b42318; }
#riskWorst .risk-worst-years, #riskBest .risk-worst-years { justify-self: end; white-space: nowrap; font-size: .88rem; }
.risk-conclusion { margin: 0; padding: 18px 20px; border-radius: 16px; background: var(--gold-soft); color: #704d16; font-weight: 850; }

.wait-workspace { display: grid; gap: 18px; max-width: 1200px; }
.wait-controls { display: grid; gap: 18px; padding: 20px; border: 1px solid #b8d3c2; border-radius: 18px; background: var(--green-soft); }
.wait-basics { display: grid; grid-template-columns: repeat(3, minmax(210px, 1fr)); gap: 14px; }
.wait-basics > label, .wait-basics > .native-field { display: grid; align-content: start; gap: 7px; color: var(--green-dark); font-size: .82rem; font-weight: 800; }
.wait-basics .wide { grid-column: 1 / -1; }
.wait-sliders { display: grid; gap: 14px; }
@media (min-width: 900px) { .wait-sliders { grid-template-columns: 1fr 1fr; } }
.delay-control { padding: 18px; border: 1px solid #d9c69e; border-radius: 16px; background: var(--gold-soft); }
.delay-control > label { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 14px; color: #6f5323; font-size: .84rem; font-weight: 850; }
.delay-control strong { color: #714506; font-size: 1.08rem; }
.delay-control input[type="range"] { accent-color: var(--gold); }
.later-contribution-control { padding: 18px; border: 1px solid #d9c69e; border-radius: 16px; background: var(--gold-soft); }
.later-contribution-heading { margin-bottom: 12px; color: #6f5323; font-size: .84rem; font-weight: 850; }
.later-contribution-control input[type="range"] { accent-color: var(--gold); }
.later-contribution-control input[type="range"]:disabled { opacity: .45; }
.wait-chart { padding-top: 44px; background: linear-gradient(145deg,#f5f7f3,#fff9ed); }  /* height follows the 1000×300 viewBox (2026-09-20) */
.wait-chart .year-axis-label { font-size: 20px; }
.wait-legend { position: absolute; z-index: 2; top: 14px; right: 18px; left: 18px; display: flex; flex-wrap: wrap; gap: 8px 18px; color: #39483f; font-size: .76rem; font-weight: 850; }
.wait-legend span { display: inline-flex; align-items: center; gap: 7px; }
.wait-legend span::before { width: 30px; height: 0; border-top: 4px solid; content: ""; }
.wait-legend .now-line::before { border-color: var(--green); }
.wait-legend .later-line::before { border-color: var(--gold); border-top-style: dashed; }
.wait-line-now, .wait-line-later { fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.wait-line-now { stroke: var(--green); }
.wait-line-later { stroke: var(--gold); stroke-dasharray: 12 9; }
.wait-delay-line { stroke: #9b6b20; stroke-width: 2; stroke-dasharray: 5 6; }
.wait-delay-label { fill: #795019 !important; font-size: 17px !important; font-weight: 900 !important; }
.wait-comparison-wrap { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; }
.wait-comparison-table { display: grid; grid-template-columns: minmax(150px, .82fr) minmax(0, 1fr) 58px minmax(0, 1fr) minmax(0, 1fr); width: 100%; border-collapse: collapse; }
.wait-comparison-table thead, .wait-comparison-table tbody, .wait-comparison-table tr { display: contents; }
.wait-comparison-table th, .wait-comparison-table td { display: grid; min-width: 0; min-height: 72px; align-content: center; padding: 14px 17px; border-bottom: 1px solid var(--line); }
.wait-comparison-table thead th { min-height: 70px; color: var(--ink); font-size: .96rem; font-weight: 900; text-align: left; }
.wait-comparison-table thead th + th, .wait-comparison-table tbody td + td { border-left: 1px solid var(--line); }
.wait-comparison-table tbody td:first-of-type { border-left: 1px solid var(--line); }
.wait-comparison-table .now-heading { background: var(--green-soft); color: var(--green-dark); }
.wait-comparison-table .equality-heading { background: linear-gradient(90deg, var(--green-soft), var(--gold-soft)); }
.wait-comparison-table .later-heading { background: var(--gold-soft); color: #704d16; }
.wait-comparison-table .difference-heading { background: #edf0ed; color: #435048; }
.wait-comparison-table .difference-heading span, .wait-comparison-table .difference-heading small { display: block; }
.wait-comparison-table .difference-heading small { margin-top: 2px; font-size: .7rem; font-weight: 800; }
.wait-comparison-wrap.wait-delay-zero .wait-comparison-table { grid-template-columns: minmax(150px, .82fr) minmax(0, 1fr); }
.wait-comparison-wrap.wait-delay-zero .equality-heading,
.wait-comparison-wrap.wait-delay-zero .later-heading,
.wait-comparison-wrap.wait-delay-zero .difference-heading,
.wait-comparison-wrap.wait-delay-zero .equality-cell,
.wait-comparison-wrap.wait-delay-zero .later-value,
.wait-comparison-wrap.wait-delay-zero .difference-value { display: none; }
.wait-comparison-table tbody th { color: var(--muted); font-size: .78rem; font-weight: 850; text-align: left; }
.wait-comparison-table tbody td { justify-content: end; color: var(--ink); font-size: clamp(.95rem, 1.7vw, 1.18rem); font-weight: 900; text-align: right; }
.wait-comparison-table .final-row th, .wait-comparison-table .final-row td { min-height: 88px; border-bottom: 0; background: #f8faf7; }
.wait-comparison-table .final-row td { color: var(--green-dark); font-size: clamp(1.25rem, 2.5vw, 2rem); letter-spacing: -.04em; }
.wait-comparison-table .difference-value.negative { color: #b42318; }
.wait-comparison-table .difference-value.positive { color: #815818; }
.wait-comparison-table .difference-value.zero { color: #566159; }
.wait-comparison-table td.matching-value { color: var(--green-dark); }
.wait-comparison-table .equality-cell { position: relative; justify-content: center; padding: 8px; }
.wait-equality-button { position: relative; z-index: 5; display: grid; width: 36px; min-height: 36px; padding: 0; place-items: center; border: 2px solid #4c826a; border-radius: 50%; background: white; color: var(--green-dark); cursor: pointer; font-size: 1.25rem; font-weight: 950; line-height: 1; transition: color .15s, background .15s, border-color .15s, box-shadow .15s, transform .08s; }
.wait-equality-button:hover { border-color: var(--green); background: var(--green-soft); }
.wait-equality-button:active { transform: translateY(1px); }
.wait-equality-button.active { border-color: var(--green); background: var(--green); color: white; box-shadow: 0 3px 10px rgba(23,102,76,.24); }
.wait-equality-button:disabled { cursor: default; opacity: .38; }
.wait-match-bridge { position: absolute; z-index: 3; border: 4px solid #2a8a62; border-radius: 999px; background: rgba(238,248,242,.28); box-shadow: 0 2px 9px rgba(23,102,76,.1); pointer-events: none; transition: top .22s, left .22s, width .22s, height .22s; }
.wait-match-bridge[hidden] { display: none; }
.wait-lesson { margin: 0; padding: 14px 17px; border-left: 4px solid var(--gold); border-radius: 0 12px 12px 0; background: rgba(255,242,216,.62); color: #654a1b; font-size: .88rem; font-weight: 750; }

.tool-grid { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(330px, 1.28fr); gap: 20px; }
.input-panel { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 14px; padding: 18px; border-radius: 18px; background: #f4f5ef; }
.input-panel label, .tool-card > label, .automation-form label, .dialog-card label { display: grid; align-content: start; gap: 7px; color: #39463e; font-size: .82rem; font-weight: 800; }
.input-panel .wide { grid-column: 1 / -1; }

input, select, textarea {
  width: 100%;
  border: 1px solid #bcc7bf;
  border-radius: 11px;
  background: white;
  color: var(--ink);
}

input, select { min-height: 45px; padding: 0 11px; }
textarea { min-height: 270px; padding: 13px; resize: vertical; line-height: 1.52; }
.money-input, .percent-input { display: grid; grid-template-columns: auto 1fr; align-items: center; border: 1px solid #bcc7bf; border-radius: 11px; background: white; }
.money-input > span, .percent-input > span { padding-left: 12px; color: var(--muted); font-weight: 700; }
.money-input input, .percent-input input { border: 0; }
.percent-input { grid-template-columns: 1fr auto; }
.percent-input > span { padding: 0 12px 0 0; }

.hidden { display: none !important; }
.toggle-row { grid-template-columns: auto 1fr !important; align-items: center !important; }
.toggle-row input { width: 18px; min-height: 18px; margin: 0; }
.freelancer-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px; border: 1px solid #e4cc9f; border-radius: 14px; background: var(--gold-soft); }
.freelancer-fields p { grid-column: 1/-1; margin: 0; color: #715018; font-size: .83rem; }

.result-panel { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.assumption { margin-top: 13px; color: var(--muted); font-size: .78rem; }

.hero-result { padding: 19px; border-radius: 17px; background: var(--green-soft); }
.hero-result span { color: var(--green-dark); font-size: .75rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.hero-result strong { display: block; margin: 3px 0; color: var(--green-dark); font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.05; letter-spacing: -.05em; }
.hero-result p { margin: 5px 0 0; color: #3e6753; }

.bucket-chart { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 14px; }
.bucket { display: grid; min-height: 110px; align-content: end; padding: 13px; border-radius: 15px; }
.bucket span { font-size: .72rem; font-weight: 800; }
.bucket b { margin-top: 3px; font-size: 1.15rem; }
.bucket.today { background: #edf0ed; }
.bucket.safety { background: var(--gold-soft); }
.bucket.future { background: #e6eff8; }
.next-info { display: grid; gap: 4px; margin-top: 15px; padding: 13px; border: 1px dashed #bac5bd; border-radius: 13px; color: var(--muted); font-size: .8rem; }

.amount-tool { display: grid; gap: 12px; }
.amount-tool > .tool-header { margin-bottom: 0; }
.amount-tool > .tool-header h2 { margin-bottom: 0; }
.visual-money-flow { display: grid; gap: 22px; }
.money-journey-control { position: sticky; z-index: 9; top: 12px; display: grid; gap: 10px; padding: 16px 20px; border: 2px solid #98bea8; border-radius: 18px; background: rgba(255,254,250,.96); box-shadow: 0 12px 32px rgba(35,50,41,.13); backdrop-filter: blur(14px); }
.money-journey-control label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; color: var(--green-dark); font-size: .83rem; font-weight: 900; }
.money-journey-control label > span { text-transform: uppercase; letter-spacing: .06em; }
.money-journey-control label strong { color: var(--gold); font-size: 1rem; text-align: left; }
.money-journey-control input[type="range"] { min-height: 28px; padding: 0; border: 0; background: transparent; accent-color: var(--green); cursor: grab; }
.money-journey-control input[type="range"]:active { cursor: grabbing; }
.money-cascade { display: grid; gap: 0; }
.cascade-stage { --fill: 0%; position: relative; display: grid; grid-template-columns: 235px minmax(0, 1fr); align-items: center; gap: 26px; min-height: 190px; padding: 24px 72px 24px 24px; border: 1px solid var(--line); border-radius: 22px; background: #fafaf6; transition: border-color .24s, background .24s, box-shadow .24s, transform .24s, opacity .24s; }
.cascade-stage > .priority-bucket { grid-column: 1; grid-row: 1; }
.cascade-stage > .cascade-copy { grid-column: 2; grid-row: 1; }
.cascade-stage.done { border-color: #a8cdb8; background: #eef7f1; }
.cascade-stage.active { border: 3px solid var(--gold); background: var(--gold-soft); box-shadow: 0 14px 34px rgba(106,74,17,.12); transform: translateY(-2px); }
.cascade-stage.future { opacity: .55; }
.cascade-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; }
.cascade-order { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: #e3e8e3; color: #5b675f; font-weight: 950; }
.cascade-stage.done .cascade-order { background: var(--green); color: white; }
.cascade-stage.active .cascade-order { background: var(--gold); color: white; }
.cascade-copy small { display: block; margin-bottom: 4px; color: var(--gold); font-size: .66rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.cascade-copy h3 { margin: 0 0 7px; font-size: clamp(1.08rem, 2vw, 1.45rem); line-height: 1.16; }
.cascade-copy p { margin: 0; color: var(--muted); font-size: .83rem; line-height: 1.55; }
.cascade-status { position: absolute; right: 15px; bottom: 13px; padding: 5px 9px; border-radius: 999px; color: var(--muted); font-size: .66rem; }
.cascade-stage.done .cascade-status { display: grid; width: 27px; height: 27px; padding: 0; place-items: center; border: 2px solid var(--green); border-radius: 50%; background: transparent; color: var(--green); font-size: .9rem; }
.cascade-stage.active .cascade-status { background: var(--gold); color: white; }
.cascade-arrow { position: relative; justify-self: start; width: 235px; height: 54px; overflow: hidden; color: transparent; font-size: 0; background: linear-gradient(90deg, transparent calc(50% - 1px), #b8c4bc calc(50% - 1px), #b8c4bc calc(50% + 1px), transparent calc(50% + 1px)); }
.cascade-arrow::before, .cascade-arrow::after { content: '$'; position: absolute; z-index: 2; top: -25px; left: calc(50% - 12px); display: grid; width: 24px; height: 24px; place-items: center; border: 2px solid #8b5b0d; border-radius: 50%; background: #efc35f; color: #704807; font-size: .72rem; font-weight: 950; opacity: 0; box-shadow: 0 3px 7px rgba(99,68,14,.18); }
.cascade-arrow.flowing::before, .cascade-arrow.flowing::after { opacity: 1; animation: cascade-coin-drop 1.15s linear infinite; }
.cascade-arrow.flowing::after { animation-delay: .575s; }
@keyframes cascade-coin-drop { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(84px) rotate(180deg); } }

.priority-bucket { position: relative; display: grid; width: 100%; height: 135px; overflow: hidden; align-items: end; justify-items: center; padding: 12px; border: 4px solid #809087; border-top-width: 2px; border-radius: 10px 10px 28px 28px; background: rgba(255,255,255,.72); }
.priority-bucket .bucket-liquid { position: absolute; right: 0; bottom: 0; left: 0; height: var(--fill); background: linear-gradient(180deg, #8fc7aa, #2f8562); transition: height .28s ease; }
.priority-bucket > span { position: relative; z-index: 1; padding: 4px 7px; border-radius: 8px; background: rgba(255,255,255,.82); color: var(--green-dark); font-size: .7rem; font-weight: 900; text-align: center; }
.emergency-bucket .bucket-liquid { background: linear-gradient(180deg, #9fb6cd, #4f779f); }
.investment-bucket { overflow: visible; border-color: var(--green); border-top: 0; }
.investment-bucket::before { content: '↑'; position: absolute; top: -21px; left: 50%; color: var(--green); font-size: 1.35rem; font-weight: 950; transform: translateX(-50%); opacity: 0; transition: opacity .2s, transform .2s; }
.investment-cascade-stage.active .investment-bucket::before, .investment-cascade-stage.done .investment-bucket::before { opacity: 1; transform: translate(-50%, -5px); }

.card-cascade-stage { grid-template-columns: 235px minmax(0, 1fr); align-items: start; padding-bottom: 54px; }
.card-phase { margin-top: 12px; padding: 10px 12px; border-left: 4px solid var(--line); border-radius: 0 10px 10px 0; }
.card-phase h4 { margin: 0 0 5px; font-size: .95rem; line-height: 1.35; }
.card-phase.active { border-color: var(--gold); background: #fff1cd; }
.card-phase.done { border-color: var(--green); background: var(--green-soft); }
.card-phase.done h4::before { content: '✓ '; color: var(--green); }
.card-cascade-stage > .cascade-copy { grid-column: 2; grid-row: 1; }
.card-payment-visual { position: relative; z-index: 1; grid-column: 1; grid-row: 1 / 3; display: grid; grid-template-columns: 1fr; gap: 34px; }
.card-payment-visual::before { content: ''; position: absolute; z-index: -1; top: 20px; bottom: 20px; left: 50%; width: 2px; background: #c1cac4; transform: translateX(-50%); }
.credit-card-bucket { --card-fill: 0%; position: relative; z-index: 1; height: 145px; overflow: hidden; border: 3px solid #8a958e; border-radius: 15px; background: #fffefa; }
.card-payment-fill { position: absolute; right: 0; bottom: 0; left: 0; height: var(--card-fill); background: linear-gradient(180deg, #f0c66e, #c88924); transition: height .28s ease; }
.credit-card-bucket .minimum-line, .credit-card-bucket .statement-line, .credit-card-bucket > b { position: absolute; z-index: 1; right: 7px; left: 7px; text-align: center; }
.credit-card-bucket .statement-line { top: 8px; padding-bottom: 5px; border-bottom: 2px dashed #87938b; color: #4f5d55; font-size: .57rem; font-weight: 900; text-transform: uppercase; }
.credit-card-bucket .minimum-line { bottom: 28%; padding-bottom: 3px; border-bottom: 3px solid #9b6310; color: #644414; font-size: .58rem; font-weight: 950; text-transform: uppercase; }
.credit-card-bucket > b { bottom: 7px; padding: 3px 4px; border-radius: 7px; background: rgba(255,255,255,.82); color: #5d4217; font-size: .63rem; }
.card-flow-message { grid-column: 2; grid-row: 2; align-self: start; margin: 14px 0 0; padding: 12px 14px; border-left: 4px solid var(--gold); border-radius: 0 12px 12px 0; background: rgba(255,255,255,.72); color: #704d16; font-size: .8rem; font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .cascade-arrow.flowing::before, .cascade-arrow.flowing::after { animation: none; top: 15px; }
  .cascade-arrow.flowing::after { display: none; }
}
.flow-phase { display: grid; gap: 12px; }
.flow-phase-heading { display: flex; align-items: center; gap: 12px; color: var(--green-dark); font-size: .76rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.flow-phase-heading::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.money-flow { display: grid; align-items: stretch; gap: 10px; }
.pre-cash-flow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.cash-flow { grid-template-columns: 1fr; gap: 0; overflow: visible; padding: 3px 2px 10px; }
.money-step { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 11px; min-height: 185px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fafaf6; transition: opacity .2s, border-color .2s, transform .2s, background .2s; }
.editable-money-step { grid-template-columns: auto minmax(210px, .85fr) minmax(340px, 1.15fr); align-items: center; min-height: 0; padding: 22px 68px 22px 22px; }
.money-step-copy { min-width: 0; }
.money-step-number { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: #e3e8e3; color: #55635b; font-size: .76rem; font-weight: 950; }
.money-step small { display: block; margin-bottom: 5px; color: var(--gold); font-size: .67rem; font-weight: 900; text-transform: uppercase; }
.money-step h3 { margin: 0 0 6px; font-size: .98rem; line-height: 1.18; }
.money-step p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.money-step-status { position: absolute; right: 12px; bottom: 11px; padding: 4px 8px; border-radius: 999px; color: var(--muted); font-size: .65rem; }
.money-step.done { border-color: #afd1bd; background: var(--green-soft); }
.money-step.done .money-step-number { background: var(--green); color: white; }
.money-step.current { border: 3px solid var(--gold); background: var(--gold-soft); transform: translateY(-3px); box-shadow: 0 14px 32px rgba(102, 73, 22, .12); }
.money-step.current .money-step-number { background: var(--gold); color: white; }
.money-step.current .money-step-status { background: var(--gold); color: white; }
.money-step.receiving { border-color: var(--gold); background: var(--gold-soft); }
.money-step.receiving .money-step-number, .money-step.receiving .money-step-status { background: var(--gold); color: white; }
.final-money-step.receiving { border-color: var(--green); background: var(--green-soft); }
.final-money-step.receiving .money-step-number, .final-money-step.receiving .money-step-status { background: var(--green); color: white; }
.money-step.not-applicable { opacity: .4; }
.final-money-step { border-color: #a7cab7; background: #f0f8f3; }
.flow-connector { align-self: center; color: #97a39b; font-size: 1.35rem; font-weight: 950; }
.cash-flow .flow-connector { justify-self: start; margin-left: 25px; line-height: 1.1; }
.money-step-controls { min-width: 0; }
.money-step-controls label { display: grid; gap: 7px; color: #39463e; font-size: .72rem; font-weight: 850; }
.reserve-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.single-money-control { display: grid; grid-template-columns: minmax(180px, 260px); justify-content: end; }
.split-control { display: grid; gap: 10px; }
.split-control > label { display: flex; justify-content: space-between; gap: 12px; }
.split-control > label strong { color: var(--green-dark); font-size: 1rem; }
.split-control input[type="range"] { width: 100%; accent-color: var(--green); }
.split-labels { display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: .66rem; font-weight: 750; }
.final-step-note { justify-self: end; padding: 13px 15px; border: 1px dashed #9fbdaa; border-radius: 13px; color: var(--green-dark); font-size: .76rem; font-weight: 850; }

.allocation-tool { display: grid; gap: 20px; padding: clamp(20px, 3vw, 30px); border: 1px solid #a9cdb8; border-radius: 22px; background: var(--green-soft); }
.allocation-heading > span, .amount-rule > span { color: var(--green-dark); font-size: .69rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.allocation-heading h2 { margin: 5px 0 8px; font-size: clamp(1.55rem, 3vw, 2.35rem); line-height: 1.03; letter-spacing: -.04em; }
.allocation-heading p { margin: 0; color: #496658; }
.allocation-diagram { display: grid; justify-items: center; gap: 9px; }
.allocation-source { display: grid; min-width: min(100%, 300px); justify-items: center; gap: 3px; padding: 17px 22px; border: 2px solid var(--green); border-radius: 18px; background: white; color: var(--green-dark); text-align: center; }
.allocation-source span, .allocation-node span { font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.allocation-source strong { font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1; }
.allocation-source small { color: var(--muted); font-size: .67rem; }
.allocation-arrow { color: var(--green); font-size: 1.55rem; font-weight: 950; line-height: 1; }
.allocation-destinations { position: relative; display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.allocation-destinations::before { content: ''; position: absolute; top: -10px; left: 12.5%; right: 12.5%; height: 10px; border-top: 2px solid #9dbca8; border-left: 2px solid #9dbca8; border-right: 2px solid #9dbca8; }
.allocation-node { display: grid; min-height: 100px; align-content: center; justify-items: center; gap: 5px; padding: 14px 10px; border: 1px solid #b8d3c2; border-radius: 15px; background: rgba(255,255,255,.78); color: #5d6a62; text-align: center; transition: opacity .2s, border-color .2s, background .2s, transform .2s; }
.allocation-node strong { font-size: clamp(1.15rem, 2.3vw, 1.65rem); }
.allocation-node.active { border: 2px solid var(--gold); background: var(--gold-soft); color: #744f11; transform: translateY(-3px); }
.allocation-node.zero { opacity: .5; }
.allocation-node.investment-node.active { border-color: var(--green); background: white; color: var(--green-dark); }
.allocation-summary { width: 100%; padding: 16px 18px; border-radius: 15px; background: white; color: var(--green-dark); }
.allocation-summary > strong { display: block; font-size: 1rem; }
.allocation-summary p { margin: 5px 0 0; color: var(--muted); font-size: .82rem; }
.amount-rule { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 20px; padding: 22px; border-left: 6px solid var(--gold); border-radius: 0 18px 18px 0; background: var(--gold-soft); }
.amount-rule > span, .amount-rule > strong, .amount-rule > p { grid-column: 1; }
.amount-rule > strong { color: #704d16; font-size: 1.08rem; }
.amount-rule > p { margin: 0; color: #79581e; }
.amount-rule .ask-button { grid-column: 2; grid-row: 1 / 4; align-self: center; }

details { margin-top: 4px; }
summary { cursor: pointer; color: var(--green); font-weight: 850; }
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.milestones { display: grid; gap: 10px; margin-top: 14px; }
.milestone { display: grid; grid-template-columns: minmax(90px, .7fr) 1.3fr auto; align-items: center; gap: 10px; font-size: .8rem; }
.meter { height: 9px; overflow: hidden; border-radius: 999px; background: #e4e8e4; }
.meter span { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.milestone b { white-space: nowrap; }
.hysa-result { display: flex; justify-content: space-between; gap: 12px; margin-top: 15px; padding: 13px; border-radius: 13px; background: #f4f5ef; font-size: .83rem; }

.bucket-workspace { display: grid; gap: 26px; max-width: 1180px; }
.journey-control { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.journey-control label { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 14px; color: var(--muted); font-size: .84rem; font-weight: 800; }
.journey-control strong { color: var(--green-dark); }
.journey-control input[type="range"] { accent-color: var(--green); }
.journey-marks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 9px; color: var(--muted); font-size: .68rem; font-weight: 750; text-align: center; }
.visual-buckets { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: end; gap: 18px; padding: 10px 0; }
.visual-bucket { --fill: 0%; position: relative; min-height: 330px; overflow: hidden; border: 5px solid #7e8b82; border-top: 0; border-radius: 12px 12px 48px 48px; background: rgba(255,255,255,.5); transition: transform .3s, border-color .3s; }
.visual-bucket.active { border-color: var(--green); transform: translateY(-6px); }
.bucket-rim { position: absolute; z-index: 3; top: 0; left: -5px; width: calc(100% + 10px); height: 15px; border: 5px solid currentColor; border-radius: 50%; background: var(--paper); color: inherit; }
.bucket-liquid { position: absolute; right: 0; bottom: 0; left: 0; height: var(--fill); background: linear-gradient(180deg, rgba(255,255,255,.15), currentColor); opacity: .36; transition: height .55s cubic-bezier(.2,.8,.2,1); }
.visual-bucket.today { color: #8d9a92; }.visual-bucket.safety { color: var(--gold); }.visual-bucket.future { color: var(--blue); }
.bucket-copy { position: relative; z-index: 2; display: grid; height: 100%; align-content: end; padding: 24px; text-shadow: 0 1px rgba(255,255,255,.8); }
.bucket-copy span { color: var(--ink); font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.bucket-copy b { margin: 4px 0; color: var(--ink); font-size: clamp(1.5rem, 3vw, 2.4rem); }
.bucket-copy small { color: #415047; font-weight: 700; }
.flow-arrow { align-self: center; color: #9ba69f; font-size: 2rem; font-weight: 900; }
.next-dollar { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 20px; border-radius: 18px; background: var(--green-soft); color: var(--green-dark); }
.next-dollar span { font-size: .78rem; font-weight: 900; text-transform: uppercase; }.next-dollar strong { font-size: 1.1rem; }.next-dollar p { grid-column: 1 / -1; margin: 4px 0 0; }
.concept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0 56px; }
.concept-grid article { padding: 21px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.7); }
.concept-grid article > span { color: var(--green); font-weight: 950; }.concept-grid h3 { margin: 8px 0 5px; }.concept-grid p { margin: 0; color: var(--muted); font-size: .84rem; }

.money-ladder { display: grid; grid-template-columns: repeat(7, minmax(115px, 1fr)); gap: 8px; margin: 0; padding: 0; overflow-x: auto; list-style: none; }
.money-ladder button { display: grid; min-height: 130px; align-content: space-between; gap: 10px; width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: #f7f7f2; color: var(--ink); cursor: pointer; text-align: left; }
.money-ladder button > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: #e1e6e1; font-size: .75rem; }
.money-ladder b { font-size: .78rem; }
.money-ladder em { color: #a5aea7; font-size: 1.1rem; font-style: normal; }
.money-ladder li.done button { border-color: #94c5aa; background: var(--green-soft); }
.money-ladder li.done em { color: var(--green); }

.profile-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.profile-filters label { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fafaf7; cursor: pointer; font-size: .78rem; font-weight: 750; }
.profile-filters input { width: 16px; min-height: 16px; margin: 0; }
.profile-filters label:has(input:checked) { border-color: #8ebfa4; background: var(--green-soft); color: var(--green-dark); }
.profile-summary-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; padding: 17px 19px; border: 1px solid #b9d4c3; border-radius: 17px; background: var(--green-soft); }
.profile-summary-card > div { display: grid; gap: 2px; }.profile-summary-card span { color: var(--green-dark); font-size: .7rem; font-weight: 900; text-transform: uppercase; }.profile-summary-card strong { color: var(--green-dark); }.profile-summary-card small { color: #52705f; }
.account-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: var(--muted); font-size: .82rem; }
.account-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 11px; }
.account-groups { display: grid; gap: 30px; }
.local-account-comparison { margin: 16px 0 24px; }
.provider-note { margin: 8px 0; font-size: .85em; }
.provider-links { padding-left: 18px; margin: 8px 0 0; }
.provider-links li { margin: 6px 0; }
.provider-links a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; }
.local-account-comparison .comparison-limit-warning { color: #a82216; background: #fff0ed; border-left: 4px solid #a82216; border-radius: 6px; padding: 10px 14px; font-weight: 850; }
.local-account-comparison .account-toolbar { flex-wrap: wrap; gap: 10px; }
.local-account-comparison th[scope="row"] { text-align: left; }
.account-category > h3, .account-category > summary { margin: 0; font-size: 1.25rem; font-weight: 850; color: var(--green-dark); }
.account-category-description { margin: 8px 0 16px; color: var(--muted); }
.specialized-accounts { border-top: 1px solid var(--line); padding-top: 20px; }
.specialized-accounts > summary { cursor: pointer; padding: 8px 0; }
.account-card { position: relative; display: grid; gap: 8px; min-height: 190px; padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: #fafaf7; }
.account-card.relevant { border-color: #99c5ae; box-shadow: inset 0 0 0 1px #cbe3d5; }
.account-card h3 { margin: 0; font-size: 1rem; }
.account-card-copy h4 { margin: 4px 0; font-size: .78rem; color: var(--green-dark); }
.account-card p { margin: 0; color: var(--muted); font-size: .78rem; }
.account-route { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid var(--line); }.account-route span { color: var(--muted); font-size: .64rem; font-weight: 900; text-transform: uppercase; }.account-route b { font-size: .74rem; }.account-route small { color: var(--muted); font-size: .69rem; }
.account-card .tag { align-self: start; justify-self: start; padding: 4px 7px; border-radius: 6px; background: #e7ebe7; color: #546159; font-size: .66rem; font-weight: 850; text-transform: uppercase; }
.account-card.relevant .tag { background: var(--green-soft); color: var(--green-dark); }
.account-card label { display: flex; align-items: center; gap: 7px; margin-top: auto; color: var(--green); font-size: .76rem; font-weight: 850; cursor: pointer; }
.account-card input { width: 17px; min-height: 17px; margin: 0; }
.comparison-table-wrap { margin-top: 18px; overflow-x: auto; }
.comparison-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.comparison-table th, .comparison-table td { min-width: 160px; padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.comparison-table th:first-child, .comparison-table td:first-child { min-width: 125px; color: var(--muted); font-weight: 800; }
.annual-note, .source-line { margin: 15px 0 0; color: var(--muted); font-size: .74rem; }

.asset-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.asset-controls label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fafaf7; cursor: pointer; font-size: .75rem; font-weight: 800; }
.asset-controls input { width: 15px; min-height: 15px; margin: 0; }
.scatter-shell { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.scatter { position: relative; height: 360px; overflow: hidden; border-left: 2px solid #6a746d; border-bottom: 2px solid #6a746d; border-radius: 4px 14px 4px 4px; background: linear-gradient(135deg, #f1f4ef, #fff9ed); }
.axis-label { color: var(--muted); font-size: .72rem; font-weight: 800; }
.axis-label.y { display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg); }
.axis-label.x { grid-column: 2; padding-top: 6px; text-align: right; }
.grid-line { position: absolute; left: 0; width: 100%; border-top: 1px dashed #d5dbd5; }
.grid-line.y1 { top: 25%; }.grid-line.y2 { top: 50%; }.grid-line.y3 { top: 75%; }
.asset-dot { position: absolute; display: grid; width: 78px; min-height: 54px; place-items: center; padding: 6px; border: 3px solid white; border-radius: 15px; color: white; box-shadow: 0 7px 20px rgba(32,48,38,.2); transform: translate(-50%, 50%); text-align: center; transition: opacity .2s, transform .2s; }
.asset-dot b { font-size: .71rem; line-height: 1.1; }.asset-dot small { font-size: .62rem; }
.asset-dot:hover { z-index: 3; transform: translate(-50%, 50%) scale(1.08); }
.asset-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 9px; margin-top: 17px; }
.asset-detail { padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fafaf7; }
.asset-detail h3 { margin: 0 0 5px; font-size: .85rem; }.asset-detail p { display: grid; grid-template-columns: 1fr auto; gap: 4px; margin: 3px 0; color: var(--muted); font-size: .72rem; }.asset-detail b { color: var(--ink); }

.investment-answer { margin: 0 0 22px; padding: clamp(24px, 5vw, 54px); border-radius: 28px; background: var(--green-dark); color: white; }
.investment-answer a { color: white; text-underline-offset: 4px; }
.global-fund-contents { margin: 24px 0; padding: 12px 0 12px 20px; border-left: 3px solid #9bd7b8; }
.global-fund-contents ul { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.two-fund-jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 28px 0; }
.fund-job { padding: 24px; border-top: 5px solid var(--green); background: var(--green-soft); }
.fund-job h2 { margin: 0 0 8px; font-size: 1.65rem; }
.fund-job h3 { margin: 0 0 12px; font-size: 1rem; }
.fund-job p:last-child { margin-bottom: 0; }
.cash-job { border-color: var(--gold); background: var(--gold-soft); }
.retirement-age-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 850; }
.reserve-story-steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; list-style: none; padding: 0; margin: 5px 0 28px; counter-reset: reserve; }
.reserve-story-steps li { counter-increment: reserve; border-top: 3px solid var(--line); padding-top: 8px; font-size: .8rem; color: var(--muted); }
.reserve-story-steps li::before { content: counter(reserve) '. '; }
.reserve-story-steps li.active { border-color: var(--gold); color: var(--green-dark); font-weight: 900; }
.reserve-story-steps li.done { border-color: var(--green); }
.reserve-buckets { display: grid; grid-template-columns: minmax(0,1fr) 46px minmax(0,1fr); align-items: end; gap: 10px; max-width: 900px; margin: 0 auto; }
.reserve-vessel h3 { min-height: 3.5em; margin: 0 0 12px; font-size: 1rem; line-height: 1.4; }
.reserve-tank { height: clamp(240px, 33vw, 320px); position: relative; overflow: hidden; border: 4px solid #4c8266; border-top-width: 2px; border-radius: 4px 4px 38px 38px; background: #f4f8f3; }
.reserve-tank > strong { position: absolute; left: 8px; right: 8px; bottom: 18px; z-index: 2; padding: 8px; border-radius: 6px; text-align: center; font-size: .88rem; line-height: 1.35; color: #173e2f; background: rgba(255,255,255,.87); }
.reserve-water { position: absolute; bottom: 0; left: 0; right: 0; height: 0; background: #8ac5a4; transition: height .15s linear; }
.cash-tank { border-color: #b78219; background: #fffbef; }
.cash-tank .reserve-water { background: #efcc7e; }
.reserve-target { position: absolute; top: 20%; left: 0; right: 0; border-top: 2px dashed #835d17; text-align: center; }
.reserve-target span { display: inline-block; transform: translateY(-100%); padding: 3px 6px; background: #fffbef; color: #735018; font-size: .8rem; font-weight: 850; }
.reserve-transfer { align-self: center; margin-top: 55px; font-size: 2.8rem; text-align: center; color: #bcc8bd; opacity: .3; }
.reserve-transfer.moving { opacity: 1; color: var(--gold); }
.reserve-movement { min-height: 2.7em; text-align: center; font-weight: 850; color: var(--green-dark); margin: 16px 0 0; }
@media (max-width: 640px) {
  .reserve-buckets { grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr); gap: 6px; }
  .reserve-vessel h3 { min-height: 5.6em; font-size: .85rem; }
  .reserve-tank { border-width: 3px; height: 240px; border-radius: 4px 4px 24px 24px; }
  .reserve-tank > strong { font-size: .72rem; left: 4px; right: 4px; padding: 6px 3px; }
  .reserve-transfer { font-size: 1.7rem; }
  .reserve-target span { font-size: .68rem; }
  .reserve-story-steps li { font-size: .69rem; }
  .retirement-spending-tool .retirement-age-label { display: grid; gap: 4px; }
  .retirement-spending-tool .retirement-age-label strong { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .reserve-water { transition: none; } }
.retirement-age-label strong { color: var(--green); font-size: 1.5rem; }
#investmentAge { width: 100%; min-height: 44px; accent-color: var(--green); }
.retirement-age-ticks { display: flex; justify-content: space-between; gap: 4px; font-size: .75rem; color: var(--muted); }
.retirement-age-ticks strong { color: var(--green-dark); }
.retirement-spending-message { margin: 24px 0; padding: 18px; border-left: 4px solid var(--green); background: var(--green-soft); line-height: 1.5; min-height: 100px; }
.spending-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 16px; font-size: .8rem; font-weight: 750; }
.spending-legend > span:nth-child(1) { color: var(--green); }
.spending-legend > span:nth-child(2) { color: #805700; }
.spending-legend > span:nth-child(3) { color: var(--muted); }
.spending-years { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.spending-year { display: grid; justify-items: center; padding: 12px 3px; border-radius: 4px; background: var(--green-soft); color: var(--green-dark); border-bottom: 4px solid var(--green); }
.spending-year strong { font-size: 1.05rem; }
.spending-year.cash { background: var(--gold-soft); border-color: var(--gold); color: #805700; }
.spending-year.spent { background: #eef0ec; border-color: #b7c0b9; color: #70796f; }
.retirement-spending-tool > p { font-size: .85rem; line-height: 1.5; }
.investment-faq { margin: 28px 0; }
.investment-faq details { padding: 18px 0; border-bottom: 1px solid var(--line); }
.investment-faq summary { cursor: pointer; font-weight: 850; }
.investment-faq p { max-width: 850px; }
@media (max-width: 640px) {
  .two-fund-jobs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fund-job { padding: 18px; }
  .spending-years { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .spending-year { padding: 8px 2px; }
  .retirement-age-ticks { font-size: .64rem; }
}
.investment-answer .eyebrow { color: #9bd7b8; }.investment-answer h2 { max-width: 800px; margin: 0 0 12px; font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1; letter-spacing: -.045em; }.investment-answer > p:not(.eyebrow) { max-width: 860px; color: #d8ebe0; }
.market-pieces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 28px 0 18px; }
.market-pieces span { padding: 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; background: rgba(255,255,255,.08); font-size: .8rem; font-weight: 850; text-align: center; }.market-pieces small { color: #b7d9c5; }.market-pieces strong { grid-column: 1 / -1; padding: 13px; border-radius: 14px; background: white; color: var(--green-dark); text-align: center; }
.example-line { margin-top: 14px !important; font-size: .82rem; }
.reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 50px; }
.reason-grid article { padding: 22px; border: 1px solid var(--line); border-radius: 19px; background: white; }.reason-grid article > span { color: var(--gold); font-size: .72rem; font-weight: 950; }.reason-grid h3 { margin: 8px 0; }.reason-grid p { margin: 0; color: var(--muted); font-size: .84rem; }
.knowledge-check { max-width: 900px; margin: 42px auto 0; }

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sort-game { display: grid; gap: 9px; margin-top: 16px; }
.sort-card { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 7px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: #fafaf7; }
.sort-card b { font-size: .83rem; }.sort-card button { padding: 6px 8px; border: 1px solid #c7d0c9; border-radius: 8px; background: white; cursor: pointer; font-size: .7rem; font-weight: 800; }.sort-card button.correct { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }.sort-card button.wrong { border-color: #dda9a9; background: #fbeaea; color: #8d3f3f; }
.check-list { display: grid; gap: 10px; padding-left: 24px; }.check-list li { padding-left: 3px; }.mini-warning { padding: 11px; border-radius: 12px; background: var(--gold-soft); color: #704d16 !important; font-size: .8rem; font-weight: 800; }

.platform-checks { display: grid; gap: 9px; margin-top: 14px; }
.platform-checks label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; font-size: .78rem; cursor: pointer; }
.platform-checks input { width: 17px; min-height: 17px; margin: 0; }
.automation-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.automation-result { margin: 15px 0; padding: 16px; border-radius: 14px; background: var(--green-soft); color: var(--green-dark); font-weight: 850; }
.action-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px; }
.action-option { min-height: 76px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fafaf7; color: var(--ink); cursor: pointer; text-align: left; font-size: .82rem; font-weight: 800; }
.action-option.selected { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.chosen-action { margin-top: 14px; padding: 16px; border-radius: 14px; background: var(--gold-soft); color: #704d16; font-weight: 850; }

.priority-map { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 24px; }
.priority-step { display: grid; min-height: 105px; align-content: space-between; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #f5f5f0; color: var(--muted); }
.priority-step span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: #e2e6e2; font-size: .72rem; font-weight: 900; }.priority-step b { font-size: .72rem; }.priority-step.done { border-color: #add1bc; background: var(--green-soft); color: var(--green-dark); }.priority-step.current { border: 2px solid var(--gold); background: var(--gold-soft); color: #704d16; transform: translateY(-5px); }.priority-step.current span { background: var(--gold); color: white; }
.next-action-result { padding: clamp(22px, 4vw, 44px); border-radius: 24px; background: var(--green-dark); color: white; }.result-kicker { color: #9bd7b8; font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.next-action-result h3 { max-width: 780px; margin: 8px 0; font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.04em; }.next-action-result > p { max-width: 780px; color: #d8ebe0; }.next-action-result .ask-button { margin-top: 20px; }.where-to-look { display: grid; max-width: 780px; gap: 3px; margin-top: 20px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; background: rgba(255,255,255,.08); }.where-to-look span { color: #9bd7b8; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.automation-card { max-width: 980px; margin: 44px auto 0; }

.chapter-footer { display: flex; justify-content: space-between; gap: 14px; margin-top: 34px; }
.assistant-bar { position: fixed; z-index: 25; right: 18px; bottom: 14px; left: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; max-width: 1180px; min-height: 66px; margin: 0 auto; padding: 8px; border: 1px solid #a9c8b5; border-radius: 20px; background: rgba(255,254,250,.96); box-shadow: 0 18px 48px rgba(21, 60, 42, .22); backdrop-filter: blur(16px); }
.profile-launcher, .assistant-launcher { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 0 14px; border-radius: 13px; cursor: pointer; font-weight: 850; }.profile-launcher { border: 1px solid var(--line); background: white; color: var(--green-dark); }.assistant-launcher { border: 1px solid var(--green); background: var(--green); color: white; }.suggestion-strip { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }.suggestion-strip::-webkit-scrollbar { display: none; }.suggestion-strip button, .dialog-suggestions button { flex: 0 0 auto; min-height: 42px; max-width: 270px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 12px; background: #f6f5ef; color: var(--ink); cursor: pointer; font-size: .72rem; font-weight: 750; text-align: left; }.suggestion-strip button:hover, .dialog-suggestions button:hover { border-color: var(--green); background: var(--green-soft); }.dialog-suggestions { display: flex; gap: 7px; margin-bottom: 14px; overflow-x: auto; }

dialog { width: min(720px, calc(100% - 26px)); padding: 0; border: 0; border-radius: 24px; background: transparent; box-shadow: 0 35px 90px rgba(17, 33, 24, .35); }
dialog::backdrop { background: rgba(20, 28, 23, .58); backdrop-filter: blur(4px); }
#cardExampleDialog { width: min(850px, calc(100% - 26px)); max-height: 90dvh; overflow-y: auto; }
.card-example h2 { padding-right: 35px; }
.card-example-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 20px 0; }
.card-example-options section { display: flex; flex-direction: column; border-radius: 18px; padding: 20px; }
.card-example-options h3 { margin-top: 0; }
.card-example-ontime { background: var(--green-soft); color: var(--green-dark); }
.card-example-late { background: #fff0e8; color: #922e19; }
.card-example-result { display: grid; gap: 4px; margin-top: auto; padding-top: 22px; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; }
.card-example-ontime .card-example-result { color: #25694e; }
.card-example-late .card-example-result { color: #b42318; }
.card-example-assumptions, .card-example-sources { font-size: .8rem; }
.card-example-warning { border-left: 4px solid #c78b09; background: #fff5dd; padding: 14px 18px; margin: 18px 0; }
.card-example-warning h3 { margin-top: 0; }
.card-example-takeaway { font-weight: 800; }
.card-example-difference { display: grid; gap: 8px; padding: 20px; margin: 0 0 20px; border-radius: 16px; background: #fff0e8; color: #922e19; }
.card-example-difference > strong { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.card-example-difference > span:not(.card-example-assumptions) { font-weight: 800; }
@media (max-width: 560px) { .card-example-options { grid-template-columns: 1fr; } }
.dialog-card { position: relative; padding: clamp(21px, 4vw, 34px); border: 1px solid var(--line); border-radius: 24px; background: var(--card); }
.dialog-card h2 { margin: 0 0 6px; font-size: 1.7rem; }.dialog-card > p:not(.eyebrow) { margin: 0 0 17px; color: var(--muted); }.dialog-card label { margin-bottom: 12px; }.dialog-close { position: absolute; top: 13px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #eff1ed; cursor: pointer; font-size: 1.5rem; }.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 13px; }.dialog-card small { display: block; min-height: 20px; margin-top: 8px; color: var(--green); text-align: right; }
.profile-dialog-card { max-height: min(88vh, 900px); overflow-y: auto; }.profile-form { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; }.conditional-fields { display: contents; }
#accountPersonalizeDialog { width: min(640px, calc(100vw - 24px)); max-height: 88dvh; overflow-y: auto; }
#accountPersonalizeDialog h2 { padding-right: 30px; }
#accountPersonalizeDialog .account-question { margin: 22px 0; }
#accountPersonalizeDialog .account-question-child { margin-left: 12px; padding-left: 14px; border-left: 3px solid var(--line); }
#accountPersonalizeDialog small { margin: 0; text-align: left; color: var(--muted); }
.account-filter-controls { margin-bottom: 22px; }
.account-view-switch { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.account-view-switch button { border: 0; border-radius: 12px; padding: 12px 16px; background: transparent; color: var(--muted); font: inherit; font-weight: 800; cursor: pointer; }
.account-view-switch button[aria-pressed="true"] { background: var(--green); color: white; }
.account-view-switch button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
#accountDecisionNotes p { margin: 12px 0; font-size: .8rem; color: var(--muted); }
.account-personal-reason { border-left: 3px solid var(--green); padding-left: 10px; color: var(--green-dark); font-size: .8rem; }

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .chapter-rail { position: sticky; z-index: 15; top: 0; height: auto; padding: 8px 14px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); background: rgba(246,243,234,.94); backdrop-filter: blur(12px); }
  .rail-label, .progress-wrap { display: none; }
  .chapter-rail nav { display: flex; min-width: max-content; }
  .plan-nav-group { display: flex; align-items: center; margin: 0; }
  .plan-subnav { display: flex; margin: 0; padding: 0; border: 0; }
  .chapter-link { grid-template-columns: 28px auto; width: auto; min-height: 42px; }
  main { padding-top: 38px; }
  .tool-grid { grid-template-columns: 1fr; }
  .money-ladder { grid-template-columns: repeat(7, 145px); }
  .priority-map { grid-template-columns: repeat(7, 145px); overflow-x: auto; padding: 6px 0; }
  .visual-bucket { min-height: 280px; }
  .native-calculator-grid { grid-template-columns: 1fr; }
  .native-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wait-basics { grid-template-columns: 1fr 1fr; }
  .money-journey-control { top: 130px; }
}

@media (max-width: 700px) {
  :root { --page-pad: 14px; }
  .topbar { align-items: center; gap: 8px; min-height: 64px; padding: 7px 14px; }
  .brand { margin-top: 0; font-size: .82rem; }
  .brand-mark { width: 34px; height: 34px; border-radius: 11px; }
  .language-switch { flex-wrap: wrap; justify-content: flex-end; max-width: 210px; border-radius: 15px; }
  .language-switch button { padding: 6px 8px; font-size: .7rem; }
  .chapter-rail { top: 0; }
  main { padding: 32px 14px 32px; }
  .chapter-heading h1 { font-size: 2.55rem; }
  .plan-decision { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 125px; gap: 14px; }
  .plan-decision-number { width: 42px; height: 42px; }
  .plan-example { grid-template-columns: 1fr; }
  .plan-example p, .plan-example .primary-button { grid-column: 1; grid-row: auto; }
  .plan-example .primary-button { width: 100%; }
  .lesson-strip { grid-template-columns: 1fr; }
  .tool-header { display: grid; }
  .ask-button { width: 100%; }
  .input-panel { grid-template-columns: 1fr; }
  .native-controls { grid-template-columns: 1fr; }
  .asset-picks { grid-template-columns: 1fr; }
  .input-panel .wide { grid-column: 1; }
  .freelancer-fields { grid-template-columns: 1fr; }
  .freelancer-fields p { grid-column: 1; }
  .amount-tool { gap: 12px; }
  .money-journey-control { top: 122px; padding: 10px 12px; gap: 7px; border-radius: 15px; }
  .money-journey-control label { gap: 5px; }
  .money-journey-control label > span { font-size: .65rem; letter-spacing: .03em; }
  .money-journey-control label strong { font-size: .78rem; line-height: 1.3; }
  .cascade-stage, .card-cascade-stage { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; min-height: 0; padding: 16px 12px 46px; }
  .cascade-copy { display: block; }
  .cascade-copy > div { padding-right: 25px; }
  .cascade-order { position: absolute; top: 10px; right: 10px; width: 29px; height: 29px; font-size: .7rem; }
  .cascade-copy h3 { font-size: 1rem; }
  .cascade-copy p { font-size: .74rem; }
  .priority-bucket { height: 120px; }
  .cascade-arrow { justify-self: start; width: 110px; min-height: 40px; }
  .card-payment-visual { gap: 28px; }
  .credit-card-bucket { height: 135px; }
  .credit-card-bucket .statement-line { font-size: .5rem; }
  .credit-card-bucket .minimum-line { font-size: .51rem; }
  .credit-card-bucket > b { right: 3px; left: 3px; font-size: .56rem; }
  .card-flow-message { font-size: .76rem; }
  .pre-cash-flow, .cash-flow { grid-template-columns: 1fr; overflow: visible; }
  .money-step { min-height: 0; padding: 16px; }
  .flow-connector { justify-self: center; transform: rotate(90deg); }
  .cash-flow .flow-connector { justify-self: start; margin-left: 24px; transform: none; }
  .editable-money-step { grid-template-columns: auto minmax(0, 1fr); padding: 16px 16px 42px; }
  .editable-money-step .money-step-controls { grid-column: 1 / -1; margin-top: 5px; }
  .reserve-band { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .reserve-band label { font-size: .62rem; }
  .reserve-band .money-input > span { padding-left: 7px; }
  .reserve-band input { min-height: 41px; padding: 0 5px; }
  .single-money-control { grid-template-columns: 1fr; justify-content: stretch; }
  .final-step-note { justify-self: stretch; }
  .allocation-tool { padding: 18px 14px; }
  .allocation-destinations { grid-template-columns: 1fr 1fr; }
  .allocation-destinations::before { display: none; }
  .amount-rule { grid-template-columns: 1fr; }
  .amount-rule .ask-button { grid-column: 1; grid-row: auto; margin-top: 10px; }
  .wait-controls { padding: 14px; }
  .wait-basics { grid-template-columns: 1fr; }
  .wait-basics .wide { grid-column: 1; }
  .delay-control { padding: 14px; }
  .delay-control > label { display: grid; gap: 4px; }
  .wait-comparison-table { grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr) minmax(0, 1fr); }
  .wait-comparison-wrap.wait-delay-zero .wait-comparison-table { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wait-comparison-wrap.wait-delay-zero .now-heading,
  .wait-comparison-wrap.wait-delay-zero tbody .now-value { grid-column: 1 / -1; }
  .wait-comparison-table thead th:first-child { display: none; }
  .wait-comparison-table thead th { min-height: 62px; padding: 9px 6px; font-size: .7rem; text-align: center; }
  .wait-comparison-table .difference-heading small { font-size: .6rem; }
  .wait-comparison-table tbody th { grid-column: 1 / -1; min-height: 42px; padding: 8px 12px; border-top: 1px solid var(--line); border-bottom: 0; background: #f1f3ef; font-size: .68rem; }
  .wait-comparison-table tbody td { min-height: 60px; padding: 9px 6px; font-size: .82rem; text-align: center; }
  .wait-comparison-table tbody td:first-of-type { border-left: 0; }
  .wait-comparison-table .equality-cell { padding: 4px; }
  .wait-equality-button { width: 30px; min-height: 30px; font-size: 1rem; }
  .wait-comparison-table .final-row th { min-height: 42px; }
  .wait-comparison-table .final-row td { min-height: 68px; font-size: 1.05rem; }
  .later-contribution-heading { display: grid; gap: 3px; }
  .wait-chart { padding-top: 64px; }
  .bucket-chart { grid-template-columns: 1fr; }
  .bucket { min-height: 78px; }
  .milestone { grid-template-columns: 1fr auto; }.milestone .meter { grid-column: 1/-1; grid-row: 2; }
  .two-up { grid-template-columns: 1fr; gap: 0; }
  .calculator-stage { padding-top: 28px; padding-bottom: 28px; }
  .history-results { grid-template-columns: 1fr; }
  .native-chart { min-height: 300px; }.native-chart svg { min-height: 300px; }
  .visual-buckets { grid-template-columns: 1fr; gap: 10px; }
  .visual-bucket { min-height: 175px; border-radius: 10px 10px 30px 30px; }
  .flow-arrow { justify-self: center; transform: rotate(90deg); font-size: 1.4rem; }
  .bucket-copy { padding: 18px; }
  .journey-control label { display: grid; }
  .journey-marks { font-size: .58rem; }
  .concept-grid, .reason-grid { grid-template-columns: 1fr; }
  .market-pieces { grid-template-columns: 1fr 1fr; }
  .profile-summary-card { align-items: stretch; flex-direction: column; }
  .profile-summary-card button { width: 100%; }
  .profile-form { grid-template-columns: 1fr; }
  .scatter { height: 320px; }
  .asset-dot { width: 66px; }
  .automation-form { grid-template-columns: 1fr; }
  .chapter-footer { padding-bottom: 35px; }
  .assistant-bar { right: 8px; bottom: 7px; left: 8px; min-height: 58px; border-radius: 17px; }
  .profile-launcher, .assistant-launcher { width: 46px; min-height: 44px; padding: 0; }
  .profile-launcher b, .assistant-launcher b { display: none; }
  .suggestion-strip button { max-width: 220px; min-height: 40px; }
  .dialog-actions { display: grid; grid-template-columns: 1fr; }.dialog-actions button { width: 100%; }
}

/* Page 9 — first steps + FAQ launcher (2026-09-19) */
.first-steps-list { display: grid; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.first-steps-list li { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.first-steps-list .text-button { margin-top: 8px; padding: 0; font-weight: 800; }
.faq-list { display: grid; gap: 22px; margin-top: 18px; }
.faq-topic h3 { margin: 0 0 8px; font-size: 1rem; color: var(--green-dark); }
.faq-topic .learn-questions { margin: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#assistantDialog .dialog-card { max-height: min(88vh, 900px); overflow-y: auto; }
#assistantDialog details { margin: 6px 0 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; }
#assistantDialog summary { cursor: pointer; color: var(--green-dark); font-weight: 800; }
#assistantDialog details > p { margin: 10px 0 12px; color: var(--muted); font-size: .85rem; }
#assistantDialog .dialog-actions { flex-wrap: wrap; }
#assistantDialog .preferred-assistant { box-shadow: 0 0 0 3px var(--gold); }

/* Page 9 — recap of the talk (2026-09-20) */
.recap-list { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.recap-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; }
.recap-num { display: grid; width: 30px; height: 30px; place-items: center; margin-top: 4px; border-radius: 50%; background: var(--gold-soft); color: var(--green-dark); font-size: .8rem; font-weight: 950; }
.recap-link { padding: 0; border: 0; background: transparent; color: var(--green-dark); font: inherit; font-size: 1.02rem; font-weight: 800; text-align: left; cursor: pointer; }
.recap-link:hover, .recap-link:focus-visible { text-decoration: underline; outline: none; }
.recap-list p { margin: 3px 0 0; color: var(--ink); font-size: .9rem; line-height: 1.5; }

/* Intro must fit a MacBook Air (1470×956) even with Chrome's tab bar showing (~846px) — 2026-09-20 */
.intro-page .chapter-heading { margin-bottom: 12px; }
.intro-page .chapter-heading h1 { margin-bottom: 8px; }
.intro-page .chapter-heading > p:last-child { max-width: 1100px; }
.market-overview p.market-overview-note { display: inline-block; margin: 6px 18px 0 0; }

/* Presenter full screen (2026-09-20): F key or this button → Fullscreen API, no browser toolbar */
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.fullscreen-button { padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--muted); font-size: .78rem; font-weight: 800; cursor: pointer; }
.fullscreen-button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: white; }
:fullscreen .topbar { min-height: 60px; }
@media (max-width: 700px) { .fullscreen-button { display: none; } }

/* Page 9 — static prompting tips (2026-09-20; the FAQ launcher is parked, its code stays) */
.learn-tips { display: grid; gap: 12px; margin: 16px 0 0; padding-left: 1.4em; }
.learn-tips li { line-height: 1.55; }
.learn-tips li::marker { color: var(--green); font-weight: 900; }
.learn-tips strong { color: var(--green-dark); }

.sample-prompt { margin-top: 22px; }
.sample-prompt h3 { margin: 0 0 4px; font-size: 1.02rem; color: var(--green-dark); }
.sample-prompt > p { margin: 0 0 10px; color: var(--muted); font-size: .9rem; }
.sample-prompt blockquote { margin: 0; padding: 14px 18px; border-left: 4px solid var(--gold); border-radius: 0 12px 12px 0; background: var(--gold-soft); color: var(--ink); font-size: .95rem; line-height: 1.55; user-select: all; }

/* Buttons carry display:flex, which beats the UA [hidden] rule; the end-of-run nav buttons need this (2026-09-20) */
#previousChapter[hidden], #nextChapter[hidden] { display: none !important; }