/* Hambank | Financial goals visual refinement (2026-11-04)
   Scoped to the goals page. No layout, content, or calculation changes. */
body.hb-fin-page {
  --hb-text: #183845;
  --hb-dark: #133947;
  --hb-ink: #1c3c49;
  --hb-muted: #607782;
  --hb-border: #dbe6e7;
  --hb-blue: #20766f;
  --hb-aqua: #e7f3f1;
  --hb-bg: #f5f8f8;
  background: #f5f8f8;
  color: var(--hb-text);
}
.hb-fin-page .goal-main {
  background: linear-gradient(155deg, #f8faf9 0%, #f2f7f7 54%, #f7f8f5 100%);
}
.hb-fin-page .goal-crumb {
  color: #70858b;
  font-size: 12px;
}
.hb-fin-page .goal-heading {
  margin-top: 18px;
  margin-bottom: 30px;
}
.hb-fin-page .goal-heading h1 {
  color: #143744;
  font-weight: 900;
  letter-spacing: -.55px;
}
.hb-fin-page .goal-heading p {
  color: #556e77;
  font-size: 13px;
  line-height: 2.05;
}
.hb-fin-page .goal-label {
  background: #f7f2e8;
  border-color: #e8dac0;
  color: #7d623f;
  font-size: 12px;
  font-weight: 750;
  padding: 9px 15px;
}
.hb-fin-page .goal-card {
  border-radius: 20px;
  border: 1px solid #dce7e8;
  background: #fff;
  padding: 28px;
  box-shadow: 0 15px 44px rgba(21, 55, 67, .065);
}
.hb-fin-page .goal-form { border-top: 3px solid #7aa9a5; }
.hb-fin-page .goal-results {
  border-top: 3px solid #b9945c;
  padding: 28px 30px;
}
.hb-fin-page .goal-card h2 {color: #193d4a; font-size: 19px;}
.hb-fin-page .goal-sub {font-size: 12px; color: #6e8288;}
.hb-fin-page .goal-sub strong {color: #286e67;}
.hb-fin-page .goal-purpose legend {
  color: #254753;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 12px;
}
.hb-fin-page .goal-purpose-grid {gap: 10px;}
.hb-fin-page .goal-purpose-grid button {
  min-height: 42px;
  border-radius: 11px;
  border-color: #dce6e7;
  background: #f7faf9;
  color: #516b72;
  font-size: 12px;
  font-weight: 800;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.hb-fin-page .goal-purpose-grid button:hover:not(.is-active) {
  background: #edf6f4;
  border-color: #9abcb7;
  color: #245f5b;
}
.hb-fin-page .goal-purpose-grid button.is-active {
  border-color: #226e69;
  background: #206d68;
  color: #fff;
  box-shadow: 0 6px 14px rgba(29, 100, 95, .16);
}
.hb-fin-page .goal-fields {gap: 15px;}
.hb-fin-page .goal-field > span:first-child {
  color: #314e5a;
  font-size: 12px;
  font-weight: 800;
}
.hb-fin-page .goal-input-wrap {
  height: 47px;
  border-color: #d7e3e3;
  background: #fbfcfc;
  border-radius: 11px;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.hb-fin-page .goal-input-wrap:hover {border-color: #9cbfba;}
.hb-fin-page .goal-input-wrap:focus-within {
  border-color: #237e75;
  background: white;
  box-shadow: 0 0 0 3px rgba(35, 126, 117, .11);
}
.hb-fin-page .goal-input-wrap input,
.hb-fin-page .goal-input-wrap select {color: #173c48; font-weight: 850; font-size: 14px;}
.hb-fin-page .goal-input-wrap em {color: #6d878c; font-size: 11px;}
.hb-fin-page .goal-assumptions {
  background: #f5f9f8;
  border-color: #dce9e6;
  padding: 13px 15px;
  border-radius: 12px;
}
.hb-fin-page .goal-assumptions summary {color: #2c605d; font-size: 12px;}
.hb-fin-page .goal-assumptions summary span {color: #6f8889; font-size: 11px;}
.hb-fin-page .goal-assumptions p {color: #617d83; font-size: 11px;}
.hb-fin-page .goal-reset {color: #276f68; font-size: 12px;}
.hb-fin-page .goal-results-head {border-bottom: 1px solid #e4ebea; padding-bottom: 21px;}
.hb-fin-page .goal-overline {
  color: #1d8177;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .1px;
}
.hb-fin-page .goal-time {
  background: #f8f3e9;
  border-color: #eadbbc;
  color: #85683c;
  font-size: 12px;
  font-weight: 800;
  border-radius: 10px;
  padding: 8px 13px;
}
.hb-fin-page .goal-summary {
  gap: 13px;
  padding: 22px 0 25px;
}
.hb-fin-page .goal-summary > div:not(.goal-divider) {
  border-radius: 13px;
  border: 1px solid #e0e9ea;
  background: #f5f9fa;
  padding: 15px 17px;
  min-height: 136px;
  justify-content: center;
}
.hb-fin-page .goal-summary > div:not(.goal-divider):last-child {
  background: #f3f9f7;
  border-color: #d8e7e2;
}
.hb-fin-page .goal-summary span {color: #526e78; font-size: 12px; line-height: 1.8;}
.hb-fin-page .goal-summary span small {color: #7b9094; font-size: 10px;}
.hb-fin-page .goal-summary strong {color: #163f4c; font-weight: 900; font-size: clamp(25px,2.75vw,33px);}
.hb-fin-page .goal-summary > div:not(.goal-divider):last-child strong {color: #19776d;}
.hb-fin-page .goal-summary > div > small {color: #6e858a; font-size: 11px;}
.hb-fin-page .goal-divider {height: 80px; background: #dee9e8;}
.hb-fin-page .goal-progress-head {font-size: 12px; color: #4f6972;}
.hb-fin-page .goal-progress-head strong {color: #294a56; font-size: 13px;}
.hb-fin-page .goal-progress-head span {color: #147a70; font-size: 14px; font-weight: 900;}
.hb-fin-page .goal-progress {height: 11px; background: #e8eeef; margin-top: 11px;}
.hb-fin-page .goal-progress > div {background: linear-gradient(90deg, #207e72, #42a495);}
.hb-fin-page .goal-outcome {
  background: #edf7f3;
  color: #225e53;
  border: 1px solid #d4e9e0;
  border-radius: 11px;
  font-size: 12px;
  line-height: 2.05;
  padding: 12px 15px;
  margin: 17px 0 20px;
}
.hb-fin-page .goal-outcome.negative {
  background: #fdf7ed;
  color: #805b30;
  border-color: #eee0c5;
}
.hb-fin-page .goal-recommend {
  background: #183e4b;
  border: 1px solid #27505a;
  border-radius: 15px;
  padding: 21px 22px;
  box-shadow: 0 12px 24px rgba(21, 56, 68, .14);
}
.hb-fin-page .goal-recommend span {color: #d7e6e8; font-size: 12px; font-weight: 750;}
.hb-fin-page .goal-recommend strong {
  color: #eed4a5;
  font-weight: 900;
  font-size: clamp(23px,2.4vw,29px);
  line-height: 1.65;
}
.hb-fin-page .goal-recommend p {color: #d7e4e7; font-size: 11px; line-height: 1.95;}
.hb-fin-page .goal-scenario-title {margin-top: 26px;}
.hb-fin-page .goal-scenario-title h3 {color: #204751; font-size: 14px;}
.hb-fin-page .goal-scenario-title > span {color: #6d848a; font-size: 11px;}
.hb-fin-page .goal-scenarios {gap: 11px; margin-top: 12px;}
.hb-fin-page .goal-scenario {
  background: #f6f9fa;
  border: 1px solid #dfe9e9;
  border-radius: 12px;
  padding: 15px 13px;
}
.hb-fin-page .goal-scenario.central {
  background: #edf7f3;
  border-color: #89bcb2;
  box-shadow: inset 0 3px 0 #2a887d;
}
.hb-fin-page .goal-scenario:last-child {background: #faf8f3; border-color: #ebe1ce;}
.hb-fin-page .goal-scenario > span,
.hb-fin-page .goal-scenario > small {font-size: 11px; color: #55717b; line-height: 1.8;}
.hb-fin-page .goal-scenario > span small {font-size: 10px; color: #71878c;}
.hb-fin-page .goal-scenario strong {color: #1c4955; font-size: 20px; margin: 8px 0 4px;}
.hb-fin-page .goal-scenario.central strong {color: #1a716a;}
.hb-fin-page .goal-disclaimer {color: #667d83; font-size: 11px; border-top-color: #e5ecec;}
.hb-fin-page .goal-next {
  background: #eff5f3;
  border: 1px solid #dbe7e4;
  border-right: 3px solid #af946b;
  padding: 23px 27px;
  border-radius: 14px;
}
.hb-fin-page .goal-next h2 {color: #254b54; font-size: 17px;}
.hb-fin-page .goal-next p {color: #5c7579; font-size: 12px;}
@media (max-width:960px) {
  .hb-fin-page .goal-card {padding: 24px;}
  .hb-fin-page .goal-results {padding: 25px;}
}
@media (max-width:580px) {
  .hb-fin-page .goal-heading {margin-bottom: 20px;}
  .hb-fin-page .goal-card {border-radius: 16px; padding: 18px;}
  .hb-fin-page .goal-results {padding: 20px 16px;}
  .hb-fin-page .goal-card h2 {font-size: 17px;}
  .hb-fin-page .goal-summary {gap: 6px; padding: 18px 0;}
  .hb-fin-page .goal-summary > div:not(.goal-divider) {padding: 12px 9px; min-height: 125px;}
  .hb-fin-page .goal-summary strong {font-size: clamp(19px,5vw,26px);}
  .hb-fin-page .goal-summary span {font-size: 10px;}
  .hb-fin-page .goal-summary > div > small {font-size: 10px;}
  .hb-fin-page .goal-divider {height: 65px;}
  .hb-fin-page .goal-purpose-grid button {font-size: 11px;}
  .hb-fin-page .goal-scenarios {gap: 7px;}
  .hb-fin-page .goal-scenario {padding: 11px 8px;}
  .hb-fin-page .goal-scenario strong {font-size: clamp(14px,4vw,18px);}
  .hb-fin-page .goal-scenario > span,
  .hb-fin-page .goal-scenario > small {font-size: 10px;}
  .hb-fin-page .goal-next {padding: 18px;}
}
@media (prefers-reduced-motion: reduce) {
  .hb-fin-page .goal-purpose-grid button {transition: none;}
}