@font-face {
  font-family: "BLIS Sans";
  src: url("blis-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BLIS Sans";
  src: url("blis-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BLIS Serif";
  src: url("blis-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BLIS Serif";
  src: url("blis-serif-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ivory: #f8f4ea;
  --ivory-deep: #efe4d1;
  --paper: #fffdf7;
  --forest: #163c35;
  --forest-2: #2f5d50;
  --navy: #0b2f63;
  --ink: #29383a;
  --muted: #616862;
  --sage: #d7e0d9;
  --sage-light: #eaf0eb;
  --gold: #b7863b;
  --gold-light: #e6d2a6;
  --terracotta: #c41230;
  --line: #ded3c1;
  --line-dark: #c8bba7;
  --success: #2f5d50;
  --warning: #8e1025;
  --shadow: 0 24px 70px rgba(22, 60, 53, 0.12);
  --radius: 18px;
  --background: var(--ivory);
  --foreground: var(--ink);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: "BLIS Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

button,
input {
  font: inherit;
}

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

button {
  cursor: pointer;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid #c41230;
  outline-offset: 3px;
}

::selection {
  background: var(--gold-light);
  color: var(--ink);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  transform: translateY(-150%);
  border-radius: 8px;
  background: var(--forest);
  color: white;
  padding: 10px 16px;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid rgba(222, 211, 193, 0.9);
  background: rgba(248, 244, 234, 0.94);
  backdrop-filter: blur(16px);
}

.header-inner {
  width: min(1440px, calc(100% - 48px));
  min-height: 78px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 34px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.wordmark img {
  display: block;
  width: 202px;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-header nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 14px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}

.site-header nav a:hover {
  background: rgba(255, 255, 255, 0.64);
  color: var(--forest);
}

.privacy-chip {
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--forest);
  font-size: 13px;
  font-weight: 700;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 80px 24px 104px;
  background:
    radial-gradient(circle at 84% 12%, rgba(230, 210, 166, 0.52), transparent 23rem),
    linear-gradient(180deg, #fffdf7 0%, var(--ivory) 80%);
}

.hero::after {
  content: "";
  position: absolute;
  top: 82px;
  right: -116px;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(179, 135, 58, 0.26);
  border-radius: 50%;
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  top: 212px;
  left: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(47, 93, 80, 0.14);
  filter: blur(60px);
}

.hero-copy,
.planner-shell {
  position: relative;
  z-index: 1;
  width: min(1320px, 100%);
  margin-inline: auto;
}

.hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 0.83fr) minmax(460px, 1.17fr);
  align-items: center;
  gap: 46px;
  margin-bottom: 48px;
}

.hero-message {
  position: relative;
  z-index: 2;
}

.hero-copy h1 {
  max-width: 720px;
  margin: 18px 0 0;
  font-family: "BLIS Serif", Georgia, serif;
  font-size: clamp(48px, 5.9vw, 86px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.98;
  color: var(--forest);
}

.hero-lede {
  margin: 24px 0 0;
  max-width: 630px;
  color: #4f5b57;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.7;
}

.hero-visual {
  position: relative;
  min-height: 480px;
  margin: 0;
  overflow: hidden;
  border-radius: 32px 32px 110px 32px;
  background: var(--sage);
  box-shadow: 0 30px 80px rgba(22, 60, 53, 0.2);
}

.hero-visual::after,
.story-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(14, 45, 39, 0.84) 100%);
}

.hero-visual img,
.story-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hero-visual img {
  position: absolute;
  inset: 0;
}

.hero-visual figcaption,
.story-image figcaption {
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 26px;
  left: 28px;
  color: white;
}

.hero-visual figcaption span,
.story-image figcaption span {
  display: block;
  color: #f0ddb2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.hero-visual figcaption strong,
.story-image figcaption strong {
  display: block;
  max-width: 520px;
  margin-top: 4px;
  font-family: "BLIS Serif", Georgia, serif;
  font-size: clamp(20px, 2vw, 29px);
  font-weight: 400;
  line-height: 1.25;
}

.eyebrow,
.step-label,
.chart-kicker {
  margin: 0;
  color: var(--terracotta);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.17em;
  line-height: 1.4;
  text-transform: uppercase;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 26px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.planner-shell {
  display: grid;
  grid-template-columns: minmax(330px, 0.76fr) minmax(0, 1.4fr);
  overflow: clip;
  border: 1px solid rgba(22, 60, 53, 0.15);
  border-radius: 28px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.planner-inputs {
  padding: 34px;
  border-right: 1px solid var(--line);
  background: linear-gradient(160deg, #fbf6ea, #efe2cd);
}

.planner-results {
  min-width: 0;
  padding: 38px 40px 34px;
}

.panel-heading,
.result-intro,
.chart-heading,
.plan-card-topline,
.fund-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.panel-heading h2,
.result-intro h2,
.section-heading h2,
.assumption-layout h2,
.discussion-section h2 {
  margin: 8px 0 0;
  font-family: "BLIS Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.12;
  color: var(--forest);
}

.panel-heading h2,
.result-intro h2 {
  font-size: 34px;
}

.quiet-button {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 700;
}

.quiet-button:hover {
  background: rgba(255, 255, 255, 0.7);
  color: var(--forest);
}

.field-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 14px;
}

.field-group {
  margin-top: 24px;
}

.field-group > label,
fieldset legend {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.number-shell {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: var(--paper);
  padding: 0 14px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.number-shell:focus-within {
  border-color: var(--forest-2);
  box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.12);
}

.number-shell span {
  color: var(--muted);
  font-size: 14px;
}

.number-shell input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.field-hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

fieldset {
  margin: 26px 0 0;
  padding: 0;
  border: 0;
}

.choice-stack {
  display: grid;
  gap: 8px;
}

.choice-card {
  position: relative;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.74);
  padding: 9px 12px;
  cursor: pointer;
}

.choice-card:hover,
.choice-card.is-selected {
  border-color: rgba(47, 93, 80, 0.62);
  background: var(--paper);
}

.choice-card input,
.segmented-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-indicator {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line-dark);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
}

.choice-card.is-selected .choice-indicator {
  border-color: var(--terracotta);
  background: var(--terracotta);
}

.choice-card strong,
.choice-card small {
  display: block;
}

.choice-card strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.choice-card small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #efe4d1;
  padding: 4px;
}

.segmented-control label {
  position: relative;
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.segmented-control label.is-active {
  background: var(--paper);
  color: var(--forest);
  box-shadow: 0 2px 8px rgba(22, 60, 53, 0.09);
}

.assumption-control {
  margin-top: 26px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.assumption-control summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}

.assumption-control summary::-webkit-details-marker {
  display: none;
}

.assumption-control summary strong,
.assumption-control summary small {
  display: block;
}

.assumption-control summary strong {
  font-size: 13px;
}

.assumption-control summary small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.summary-cue {
  color: var(--forest);
  font-size: 12px;
  font-weight: 700;
}

.assumption-body {
  padding-top: 12px;
}

.scenario-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.scenario-row button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  padding: 7px;
  font-size: 12px;
  font-weight: 700;
}

.scenario-row button:hover,
.scenario-row button.is-active {
  border-color: var(--terracotta);
  background: linear-gradient(135deg, #c41230, #d12d4e);
  color: white;
}

.range-grid {
  margin-top: 16px;
  display: grid;
  gap: 14px;
}

.range-grid label span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.range-grid input {
  width: 100%;
  margin-top: 8px;
  accent-color: var(--forest);
}

.income-choice {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.inline-caution {
  margin: 14px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.inline-caution svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.result-intro {
  margin-top: 14px;
  align-items: flex-end;
}

.result-intro > div:first-child {
  max-width: 470px;
}

.result-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.result-intro p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.hero-number {
  min-width: 210px;
  text-align: right;
}

.hero-number strong,
.hero-number span {
  display: block;
}

.hero-number strong {
  font-family: "BLIS Serif", Georgia, serif;
  color: var(--forest);
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.hero-number span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.goal-pulse {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 14px;
  padding: 14px 16px;
}

.goal-pulse.is-on-track {
  background: var(--sage-light);
  color: #214b3b;
}

.goal-pulse.is-gap {
  background: #fff0ee;
  color: #8e1025;
}

.pulse-icon {
  flex: 0 0 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
}

.pulse-icon svg {
  width: 18px;
}

.goal-pulse strong {
  font-size: 13px;
}

.goal-pulse p {
  margin: 2px 0 0;
  font-size: 12px;
}

.chart-card {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffdf7;
  padding: 20px 20px 12px;
}

.chart-heading h3 {
  margin: 5px 0 0;
  font-family: "BLIS Serif", Georgia, serif;
  color: var(--forest);
  font-size: 22px;
  font-weight: 400;
}

.chart-heading > p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.chart-wrap {
  width: 100%;
  height: 330px;
  margin-top: 12px;
}

.recharts-default-legend {
  padding-top: 8px !important;
  color: var(--muted);
  font-size: 12px;
}

.table-toggle {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--forest);
  padding: 6px 0;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.projection-table-wrap {
  max-height: 280px;
  overflow: auto;
  border-top: 1px solid var(--line);
}

.projection-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.projection-table-wrap caption {
  padding: 12px 0;
  color: var(--muted);
  text-align: left;
}

.projection-table-wrap th,
.projection-table-wrap td {
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
  text-align: right;
}

.projection-table-wrap th:first-child,
.projection-table-wrap td:first-child {
  text-align: left;
}

.milestone-strip {
  position: relative;
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.milestone-strip::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 8px;
  left: 10px;
  right: 10px;
  height: 1px;
  background: var(--gold-light);
}

.milestone-strip div {
  position: relative;
  z-index: 1;
  padding-top: 22px;
}

.milestone-strip div::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 11px;
  height: 11px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--paper);
}

.milestone-strip div:last-child::before {
  background: var(--gold);
}

.milestone-strip span,
.milestone-strip strong {
  display: block;
}

.milestone-strip span {
  color: var(--terracotta);
  font-size: 12px;
  font-weight: 700;
}

.milestone-strip strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}

.section {
  padding: 108px 24px;
}

.section > *,
.discussion-section,
footer {
  width: min(1240px, 100%);
  margin-inline: auto;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
  align-items: end;
  gap: 40px 80px;
  margin-bottom: 40px;
}

.section-heading h2,
.assumption-layout h2,
.discussion-section h2 {
  max-width: 760px;
  font-size: clamp(38px, 4.6vw, 64px);
}

.section-heading > p,
.assumption-lede,
.discussion-section > div > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

.life-section {
  background: var(--paper);
}

.life-heading {
  margin-bottom: 34px;
}

.life-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(330px, 0.78fr);
  grid-template-rows: 260px 260px;
  gap: 18px;
}

.story-image {
  position: relative;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background: var(--sage);
}

.story-image-primary {
  grid-row: 1 / -1;
}

.story-image-primary figcaption strong {
  font-size: clamp(28px, 3vw, 43px);
}

.story-image-secondary figcaption {
  right: 22px;
  bottom: 20px;
  left: 22px;
}

.goal-story-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(179, 135, 58, 0.36);
  border-radius: 24px;
  background: linear-gradient(150deg, #fbf6ea, #efe2cd);
  padding: 26px;
}

.goal-story-panel h3 {
  margin: 8px 0 18px;
  color: var(--forest);
  font-family: "BLIS Serif", Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.goal-story-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.goal-story-choices button {
  min-height: 94px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 7px;
  border: 1px solid var(--line-dark);
  border-radius: 13px;
  background: rgba(255, 253, 248, 0.72);
  color: var(--muted);
  padding: 12px;
  text-align: left;
}

.goal-story-choices button:hover,
.goal-story-choices button.is-active {
  border-color: var(--terracotta);
  background: linear-gradient(135deg, #c41230, #d12d4e);
  color: white;
}

.goal-story-choices strong,
.goal-story-choices small {
  display: block;
}

.goal-story-choices strong {
  font-size: 13px;
}

.goal-story-choices small {
  margin-top: 2px;
  color: inherit;
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.76;
}

.goal-story-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 17px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.goal-story-note svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.paths-section {
  background: #efe4d1;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.plan-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper);
  padding: 30px;
}

.plan-card.is-fit {
  border-color: rgba(47, 93, 80, 0.62);
  box-shadow: 0 18px 44px rgba(22, 60, 53, 0.1);
}

.plan-card.is-fit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--terracotta), var(--gold));
}

.plan-kicker,
.fit-badge,
.objective-badge,
.fund-topline > span:first-child {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plan-kicker {
  color: var(--muted);
}

.fit-badge,
.objective-badge {
  border-radius: 999px;
  background: var(--sage-light);
  color: var(--forest);
  padding: 5px 9px;
}

.plan-card h3 {
  margin: 24px 0 0;
  font-family: "BLIS Serif", Georgia, serif;
  color: var(--forest);
  font-size: 34px;
  font-weight: 400;
}

.plan-name {
  min-height: 26px;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.plan-amount {
  margin-top: 28px;
}

.plan-amount strong,
.plan-amount span {
  display: block;
}

.plan-amount strong {
  color: var(--ink);
  font-family: "BLIS Serif", Georgia, serif;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.plan-amount span,
.monthly-equivalent {
  color: var(--muted);
  font-size: 12px;
}

.plan-amount span {
  margin-top: 7px;
}

.monthly-equivalent {
  margin: 2px 0 0;
}

.contribution-visual {
  margin-top: 22px;
  border-radius: 15px;
  background: #fbf6ea;
  padding: 15px 16px 13px;
}

.contribution-visual-heading,
.contribution-legend {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.contribution-visual-heading {
  align-items: baseline;
  color: var(--muted);
  font-size: 12px;
}

.contribution-visual-heading strong {
  color: var(--forest);
  font-size: 12px;
}

.contribution-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.contribution-track::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: 5px;
  left: 5px;
  height: 2px;
  background: var(--line-dark);
}

.contribution-track span {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  justify-self: center;
  border: 2px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line-dark);
}

.contribution-track .is-contribution {
  background: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}

.contribution-track .is-growth {
  background: var(--sage);
}

.contribution-legend {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.comfort-note {
  margin: 22px 0 0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
}

.comfort-note.is-within {
  background: var(--sage-light);
  color: var(--success);
}

.comfort-note.is-over {
  background: #fff0ee;
  color: var(--warning);
}

.plan-stats {
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.plan-stats div {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px;
}

.plan-stats dt {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.plan-stats dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.plan-explain {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.plan-explain p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.plan-explain strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.plan-source-link {
  min-height: 44px;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--forest);
  font-size: 12px;
  font-weight: 700;
  text-underline-offset: 4px;
}

.source-note {
  margin: 22px auto 0;
  color: var(--muted);
  font-size: 12px;
}

.funds-section {
  background: var(--paper);
}

.fund-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.fund-card {
  display: flex;
  flex-direction: column;
  min-height: 350px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffdf7;
  padding: 26px;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.fund-card:hover,
.fund-card.is-match {
  border-color: rgba(47, 93, 80, 0.52);
  box-shadow: 0 14px 34px rgba(22, 60, 53, 0.09);
  transform: translateY(-3px);
}

.fund-topline {
  min-height: 48px;
}

.fund-topline > span:first-child {
  max-width: 150px;
  color: var(--terracotta);
  line-height: 1.45;
}

.objective-badge {
  max-width: 110px;
  text-align: center;
  letter-spacing: 0.03em;
  text-transform: none;
}

.fund-card h3 {
  margin: 26px 0 0;
  font-family: "BLIS Serif", Georgia, serif;
  color: var(--forest);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.25;
}

.fund-card > p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.fund-card .fee-note {
  margin-top: auto;
  padding-top: 22px;
  font-size: 12px;
}

.fund-card a,
footer > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--forest);
  font-size: 12px;
  font-weight: 700;
  text-underline-offset: 4px;
}

.risk-banner {
  margin: 24px auto 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-left: 4px solid var(--terracotta);
  background: #fff0ee;
  padding: 18px 20px;
  color: #704130;
}

.risk-banner svg {
  flex: 0 0 auto;
}

.risk-banner strong {
  font-size: 13px;
}

.risk-banner p {
  margin: 2px 0 0;
  font-size: 12px;
}

.assumptions-section {
  color: white;
  background: var(--forest);
}

.assumption-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 70px 110px;
}

.assumption-layout .eyebrow {
  color: var(--gold-light);
}

.assumption-layout h2 {
  color: white;
}

.assumption-lede {
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.76);
}

.assumption-list {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.assumption-list article {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding: 19px 0;
}

.assumption-list article > span {
  color: var(--gold-light);
  font-family: "BLIS Serif", Georgia, serif;
  font-size: 15px;
}

.assumption-list strong {
  font-size: 14px;
}

.assumption-list p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
}

.discussion-section {
  margin-block: 88px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 36px 64px;
  border: 1px solid rgba(179, 135, 58, 0.42);
  border-radius: 22px;
  background: linear-gradient(135deg, #fffdf7, #efe2cd);
  padding: 42px;
}

.discussion-section h2 {
  max-width: 700px;
  font-size: clamp(34px, 4vw, 54px);
}

.discussion-section > div > p:last-child {
  max-width: 680px;
  margin-top: 16px;
}

.discussion-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-width: 320px;
}

.discussion-actions button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 11px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
}

.primary-action {
  grid-column: 1 / -1;
  border: 1px solid var(--terracotta);
  background: linear-gradient(135deg, #c41230, #d12d4e);
  color: white;
}

.primary-action:hover {
  background: linear-gradient(135deg, #a90f29, #c41230);
}

.secondary-action {
  border: 1px solid var(--line-dark);
  background: #f4e8d3;
  color: var(--forest);
}

.secondary-action:hover {
  border-color: var(--forest-2);
}

.copy-status {
  grid-column: 1 / -1;
  min-height: 22px;
  margin: -18px 0 0;
  color: var(--forest);
  font-size: 12px;
  font-weight: 700;
}

footer {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 28px;
  border-top: 1px solid var(--line);
  padding: 34px max(24px, calc((100vw - 1240px) / 2));
  color: var(--muted);
  background: #efe4d1;
  font-size: 12px;
}

.footer-brand img {
  display: block;
  width: 176px;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.footer-brand p,
.footer-copy p {
  margin: 4px 0 0;
}

footer > a {
  justify-self: end;
}

@media (max-width: 1100px) {
  .hero-copy {
    grid-template-columns: minmax(0, 0.75fr) minmax(420px, 1.25fr);
  }

  .hero-visual {
    min-height: 430px;
  }

  .planner-shell {
    grid-template-columns: minmax(310px, 0.85fr) minmax(0, 1.15fr);
  }

  .planner-inputs {
    padding: 28px;
  }

  .planner-results {
    padding: 32px 28px;
  }

  .result-intro {
    display: block;
  }

  .hero-number {
    margin-top: 20px;
    text-align: left;
  }

  .fund-grid {
    grid-template-columns: 1fr 1fr;
  }

  .fund-card:last-child {
    grid-column: 1 / -1;
    min-height: 280px;
  }
}

@media (max-width: 820px) {
  .header-inner {
    width: min(100% - 32px, 720px);
  }

  .site-header nav {
    display: none;
  }

  .privacy-chip {
    font-size: 12px;
  }

  .hero {
    padding: 62px 16px 78px;
  }

  .hero-copy,
  .section-heading,
  .assumption-layout,
  .discussion-section {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    gap: 24px;
  }

  .hero-copy h1 {
    margin-top: 14px;
  }

  .hero-visual {
    min-height: 430px;
    border-radius: 26px 26px 80px 26px;
  }

  .planner-shell {
    display: block;
    overflow: visible;
  }

  .planner-inputs {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .section {
    padding: 80px 18px;
  }

  .section-heading {
    align-items: start;
    gap: 22px;
  }

  .plan-grid,
  .fund-grid,
  .assumption-layout {
    grid-template-columns: 1fr;
  }

  .life-story-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 420px auto 330px;
  }

  .story-image-primary {
    grid-row: auto;
  }

  .fund-card:last-child {
    grid-column: auto;
  }

  .discussion-section {
    width: calc(100% - 32px);
    margin-block: 64px;
    padding: 30px;
  }

  .discussion-actions {
    min-width: 0;
  }

  footer {
    grid-template-columns: 1fr;
    align-items: start;
  }

  footer > a {
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .wordmark img {
    width: 170px;
  }

  .privacy-chip {
    width: 44px;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
  }

  .privacy-chip svg {
    flex: 0 0 auto;
  }

  .hero-copy h1 {
    font-size: 47px;
  }

  .hero-lede {
    font-size: 16px;
  }

  .hero-visual {
    min-height: 310px;
    border-radius: 20px 20px 56px 20px;
  }

  .hero-visual figcaption,
  .story-image figcaption {
    right: 18px;
    bottom: 17px;
    left: 18px;
  }

  .hero-visual figcaption strong {
    font-size: 20px;
  }

  .life-story-grid {
    grid-template-rows: 310px auto 260px;
  }

  .goal-story-panel {
    padding: 22px 18px;
  }

  .goal-story-choices {
    grid-template-columns: 1fr;
  }

  .goal-story-choices button {
    min-height: 68px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .planner-inputs,
  .planner-results {
    padding: 24px 18px;
  }

  .field-grid,
  .income-choice,
  .plan-explain,
  .discussion-actions {
    grid-template-columns: 1fr;
  }

  .scenario-row {
    grid-template-columns: 1fr;
  }

  .result-intro,
  .chart-heading {
    display: block;
  }

  .chart-heading > p {
    margin-top: 8px;
    text-align: left;
  }

  .chart-wrap {
    height: 280px;
  }

  .milestone-strip {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .milestone-strip::before {
    top: 0;
    bottom: 0;
    left: 5px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .milestone-strip div {
    padding: 0 0 0 24px;
  }

  .milestone-strip div::before {
    top: 4px;
  }

  .section-heading h2,
  .assumption-layout h2,
  .discussion-section h2 {
    font-size: 38px;
  }

  .plan-card,
  .fund-card {
    padding: 24px 20px;
  }

  .plan-card-topline,
  .fund-topline {
    display: block;
  }

  .fit-badge,
  .objective-badge {
    display: inline-block;
    margin-top: 10px;
  }

  .plan-stats {
    grid-template-columns: 1fr;
  }

  .discussion-actions .primary-action {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header,
  .planner-inputs,
  .discussion-actions,
  .table-toggle,
  .fund-card a,
  footer > a {
    display: none !important;
  }

  body,
  .hero,
  .paths-section,
  .funds-section,
  .assumptions-section {
    background: white !important;
    color: black !important;
  }

  .hero,
  .section {
    padding: 24px 0;
  }

  .hero-copy,
  .planner-shell,
  .section > *,
  .discussion-section {
    width: 100%;
  }

  .planner-shell {
    display: block;
    border: 0;
    box-shadow: none;
  }

  .planner-results {
    padding: 0;
  }

  .plan-grid,
  .fund-grid {
    grid-template-columns: 1fr;
  }

  .plan-card,
  .fund-card,
  .discussion-section {
    break-inside: avoid;
    box-shadow: none;
  }
}


/* ------------------------------------------------------------------
   pathfinder.betterlifesg.com — post-build corrections
   ------------------------------------------------------------------ */

/* The privacy chip was clamped to a 44px box while still centring its
   contents, so on narrow phones it showed the middle of the sentence
   ("igures") instead of the padlock. Collapse the label to the icon and
   leave the wording for assistive technology. */
@media (max-width: 560px) {
  .privacy-chip {
    width: auto;
    gap: 0;
    font-size: 0;
    overflow: visible;
  }

  .privacy-chip svg {
    width: 18px;
    height: 18px;
  }
}

/* Reserve the intrinsic aspect ratio of every illustration so nothing
   reflows as the images arrive. */
.hero-visual img,
.story-image img {
  background: var(--sage);
}

/* Long product and fund names must wrap rather than push a card wide. */
.plan-card-topline h3,
.fund-card h3 {
  overflow-wrap: anywhere;
}

/* Print: drop the sticky header so it cannot repeat over the summary. */
@media print {
  .site-header {
    position: static;
  }
}