/* ============================================================
   HODOS — STYLES
   Edit this file for: layout, colors, fonts, spacing, animations
   ============================================================ */

:root {
  --sage: #4A7C59;
  --sage-light: #6A9E79;
  --sage-pale: #d4e8da;
  --sage-mid: #b8d4c2;
  --white: #FFFFFF;
  --off-white: #F8FAF9;
  --ink: #000000;
  --muted: #1a3326;
  --border: #3a6b48;
  --red: #C0392B;
  --red-pale: #FDECEA;
  --green: #2d5c3e;
  --green-pale: #d0ead9;
  --amber: #b85d00;
  --amber-pale: #FEF3C7;
  --radius: 12px;
  --radius-sm: 8px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #4A7C59;
  color: #000000;
  font-family: 'Syne', sans-serif;
  font-weight: 400;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
  line-height: 1.6;
}
/* Bold text must always be dark enough to read regardless of parent color */
strong, b {
  font-weight: 700;
  color: #1a2420;
}
/* Keep code/pre in monospace but still readable */
code, pre {
  font-family: 'Courier New', monospace;
  color: #1a3326;
}
input, textarea, select {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
/* Prevent accidental text selection on purely interactive UI elements */
nav, .nav-links, .nav-hamburger, .nav-mobile-menu,
.decision-card, .phil-btn, .life-pill, .goal-chip,
.analyze-btn, .goals-analyze-btn, .calc-back,
.show-math-btn, .faq-q, .calc-explain-toggle,
.calc-explain-glossary-toggle, .kofi-btn, .suggest-btn,
.results-cta-primary, .results-cta-secondary,
.risk-retake, .lp-btn-primary, .lp-btn-ghost {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* NAV */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: rgba(255,255,255,0.94);
backdrop-filter: blur(14px);
border-bottom: 1px solid #ddeee5;
height: 100px;
display: flex; align-items: center; justify-content: space-between;
padding: 0 32px;
}
.nav-logo {
font-family: ‘Syne’, sans-serif;
font-size: 20px; font-weight: 800;
color: #1a3326; cursor: pointer;
letter-spacing: -0.3px;
}
.nav-links { display: flex; gap: 2px; }
.nav-links a {
font-size: 13px; font-weight: 500;
color: #4a6a55; text-decoration: none;
padding: 6px 13px; border-radius: 20px;
cursor: pointer; transition: all 0.18s cubic-bezier(.22,.68,0,1.2);
}
.nav-links a:hover { color: #0d1814; background: #e0ede6; transform: translateY(-1px); }
.nav-links a:active { transform: translateY(0); }
.nav-links a.active { color: #0d1814; background: #e0ede6; font-weight: 600; }

/* HAMBURGER */
.nav-hamburger {
display: none;
flex-direction: column; justify-content: center; gap: 5px;
width: 36px; height: 36px; cursor: pointer;
background: none; border: none; padding: 4px;
border-radius: 8px; transition: background 0.15s;
position: absolute; right: 16px;
}
.nav-hamburger:hover { background: #c8ddd0; }
.nav-hamburger span {
display: block; height: 2px; width: 22px;
background: #1a3326; border-radius: 2px;
transition: all 0.22s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* MOBILE DROPDOWN MENU */
.nav-mobile-menu {
display: none;
position: fixed; top: 100px; left: 0; right: 0; z-index: 99;
background: rgba(255,255,255,0.97);
backdrop-filter: blur(12px);
border-bottom: 1px solid #c0d8c8;
padding: 12px 0 16px;
flex-direction: column; gap: 2px;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a {
font-size: 15px; font-weight: 500; color: #1a3326;
text-decoration: none; padding: 13px 24px;
cursor: pointer; transition: background 0.15s;
}
.nav-mobile-menu a:hover, .nav-mobile-menu a.active {
background: #d4e8da; color: #000; font-weight: 600;
}

@media (max-width: 700px) {
nav { height: 64px; padding: 0 16px; justify-content: center; }
.nav-logo { position: absolute; left: 50%; transform: translateX(-50%); }
.nav-links { display: none; }
.nav-hamburger { display: flex; }
.page { padding-top: 64px !important; }
body.has-banner .page { padding-top: calc(64px + 46px) !important; }
.nav-mobile-menu { top: 64px; }
.api-banner { top: 64px; }
}

/* API BANNER */
.api-banner {
position: fixed; top: 100px; left: 0; right: 0; z-index: 99;
background: #3a6b48;
padding: 10px 32px;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.api-banner.hidden { display: none; }
.api-banner-label {
font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8);
white-space: nowrap;
}
.api-banner-input {
flex: 1; min-width: 200px;
background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
border-radius: 8px; padding: 7px 14px;
font-family: ‘Syne’, sans-serif; font-size: 13px; color: white; outline: none;
}
.api-banner-input::placeholder { color: rgba(255,255,255,0.4); }
.api-banner-input:focus { border-color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.2); }
.api-save-btn {
background: white; color: #4A7C59;
border: none; border-radius: 8px;
padding: 7px 18px; font-family: ‘Syne’, sans-serif;
font-size: 13px; font-weight: 600; cursor: pointer;
white-space: nowrap; transition: opacity 0.15s;
}
.api-save-btn:hover { opacity: 0.9; }
.api-status { font-size: 12px; color: rgba(255,255,255,0.9); }
.api-dismiss { background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer; font-size: 18px; margin-left: auto; }
.api-dismiss:hover { color: rgba(255,255,255,0.9); }
.api-hint { font-size: 11px; color: rgba(255,255,255,0.5); width: 100%; margin-top: -4px; }
.api-hint a { color: rgba(255,255,255,0.8); }
/* Skeleton loader shimmer for AI result loading */
@keyframes shimmer {
  0% { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #e8f0eb 25%, #d4e8da 50%, #e8f0eb 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 10px;
}
.skeleton-block {
  height: 18px;
  margin-bottom: 10px;
  border-radius: 8px;
}
.skeleton-block.tall { height: 80px; }
.skeleton-block.short { width: 60%; }
.skeleton-block.xshort { width: 35%; }

/* Toast notifications */
#hodos-toast {
position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
z-index: 9999; padding: 13px 22px; border-radius: 10px;
font-family: ‘Syne’, sans-serif; font-size: 14px; font-weight: 600;
box-shadow: 0 8px 28px rgba(0,0,0,0.18); pointer-events: none;
opacity: 0; transition: opacity 0.22s ease, transform 0.22s ease;
max-width: calc(100vw - 40px); text-align: center;
}
#hodos-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
#hodos-toast.success { background: #1a3326; color: #fff; }
#hodos-toast.error   { background: #C0392B; color: #fff; }
#hodos-toast.info    { background: #4A7C59; color: #fff; }

/* API key notice banner */
#apiSecurityBanner {
position: fixed; top: 100px; left: 0; right: 0; z-index: 98;
background: #fffbf0; border-bottom: 1px solid #f0d080;
padding: 10px 24px; display: flex; align-items: center; gap: 10px;
font-family: ‘Syne’, sans-serif; font-size: 12px; color: #7a5800;
}
#apiSecurityBanner.hidden { display: none; }
#apiSecurityBanner svg { flex-shrink: 0; }
#apiSecurityBanner a { color: #4A7C59; font-weight: 600; text-decoration: none; }
#apiSecurityBanner button {
margin-left: auto; background: none; border: none; cursor: pointer;
color: #b08030; font-size: 18px; line-height: 1; padding: 0 4px;
}
@media (max-width: 700px) {
#apiSecurityBanner { top: 64px; font-size: 11px; }
}

body.has-banner .page { padding-top: calc(100px + 52px); }

/* PAGES */
.page { display: none; padding-top: 100px; min-height: 100vh; background: #ffffff; }
.page.active { display: block; }

/* ============================================================
HOME / DECISIONS PAGE
============================================================ */
.hero {
max-width: 760px; margin: 0 auto;
padding: 68px 32px 36px;
text-align: center;
}
.hero-badge {
display: inline-flex; align-items: center; gap: 6px;
background: #e4f0e8; color: #2d5c3e;
font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
padding: 5px 14px; border-radius: 20px;
margin-bottom: 22px;
}
.hero h1 {
font-family: ‘Syne’, sans-serif;
font-size: 36px;
font-weight: 800; line-height: 1.15;
letter-spacing: -0.5px;
color: #0d1814; margin-bottom: 16px;
}
.hero h1 span { color: #4A7C59; }
.hero p {
font-size: 15px; color: #505850; line-height: 1.75;
max-width: 460px; margin: 0 auto 30px;
}
.phil-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.phil-chip {
background: white; border: 1px solid #d4e4da;
color: #3a5a45; font-size: 12px; font-weight: 500;
padding: 5px 12px; border-radius: 20px;
}

.grid-label {
text-align: center;
font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
text-transform: uppercase; color: #7a9e87;
margin-bottom: 18px;
}
.decision-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
gap: 14px;
max-width: 1080px; margin: 0 auto;
padding: 0 32px 80px;
}
.decision-card {
background: white;
border: 1px solid #e0ede6;
border-radius: 16px;
padding: 26px 22px;
cursor: pointer;
transition: all 0.22s cubic-bezier(.22,.68,0,1.2);
display: flex; flex-direction: column; gap: 10px;
box-shadow: 0 1px 3px rgba(74,124,89,0.06);
}
.decision-card:hover {
border-color: #4A7C59;
box-shadow: 0 8px 28px rgba(74,124,89,0.14);
transform: translateY(-3px);
}
.card-icon {
width: 42px; height: 42px;
background: linear-gradient(135deg, #d4e8da 0%, #c0dbc8 100%);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.card-title { font-family: ‘Syne’, sans-serif; font-size: 19px; font-weight: 700; color: #4A7C59; }
.card-meta { font-size: 12px; color: #6A9E79; line-height: 1.6; }
.card-arrow { font-size: 15px; color: #4A7C59; align-self: flex-end; margin-top: auto; opacity: 0.7; transition: opacity 0.18s, transform 0.18s; }
.decision-card:hover .card-arrow { opacity: 1; transform: translateX(3px); }

/* ============================================================
CALCULATOR PAGE
============================================================ */
.calc-header {
background: #ffffff; color: #000000;
padding: 48px 32px 40px;
}
.calc-back {
font-size: 13px; font-weight: 500; color: #3a6b48;
cursor: pointer; background: none; border: none;
display: inline-flex; align-items: center; gap: 6px;
margin-bottom: 20px; transition: color 0.15s;
}
.calc-back:hover { color: #1a3326; }
.calc-back { transition: color 0.15s, gap 0.15s; }
.calc-title { font-family: ‘Syne’, sans-serif; font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -0.3px; color: #1a3326; text-align: center; }
.calc-subtitle { font-size: 14px; color: #556a5e; margin-top: 8px; line-height: 1.65; }
.calc-body {
max-width: 860px; margin: 0 auto;
padding: 44px 32px;
display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
}
@media (max-width: 680px) {
.calc-body { grid-template-columns: 1fr; padding: 28px 20px; }
.hero { padding: 52px 20px 28px; }
.decision-grid { padding: 0 16px 64px; gap: 10px; }
nav { padding: 0 16px; }
.calc-header { padding: 32px 20px 24px; }
.nav-links a { padding: 6px 10px; font-size: 12px; }
.about-grid, .risk-body { padding: 32px 20px; }
.faq-body, .support-body { padding: 32px 20px; }
}

.form-section h3 {
font-family: ‘Syne’, sans-serif; font-size: 16px; font-weight: 700;
margin-bottom: 22px; padding-bottom: 12px;
border-bottom: 1px solid #e4ede8;
color: #1a2c22;
}
.form-group { margin-bottom: 16px; }
.slider-group { margin-bottom: 20px; }

/* ── CURRENCY INPUT WRAPPER ── */
.currency-wrap {
position: relative;
display: flex;
align-items: center;
}
.currency-wrap .currency-prefix {
position: absolute;
left: 14px;
font-family: ‘Syne’, sans-serif;
font-size: 15px;
font-weight: 600;
color: #4A7C59;
pointer-events: none;
z-index: 1;
line-height: 1;
}
.currency-wrap input {
padding-left: 28px !important;
}

/* ── GOALS PROFILE CARDS ── */
.goals-profile-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 24px;
}
@media(max-width:500px){ .goals-profile-grid { grid-template-columns: 1fr; } }

/* ── CALCULATOR FIELDS GRID ── */
.calc-input-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 20px;
}
@media(max-width:540px){ .calc-input-grid { grid-template-columns: 1fr; } }

.profile-input-card {
background: #f4f7f5;
border: none;
border-radius: 16px;
padding: 14px 16px 14px;
transition: background 0.18s;
cursor: text;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 96px;
}
.profile-input-card:focus-within {
background: #edf3ef;
}
.profile-input-card[style*=“cursor:default”] {
cursor: default;
justify-content: flex-start;
align-items: center;
}
.profile-input-card[style*=“cursor:default”] > div[style*=“display:flex”] {
justify-content: center;
}
.profile-input-card .card-label {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
text-transform: uppercase;
color: #9bb5a7;
margin-bottom: 2px;
}
.profile-input-card .card-hint {
font-size: 11px;
color: #b0c8bb;
margin-bottom: 8px;
line-height: 1.4;
}
.profile-input-card .currency-wrap input {
width: 100%;
background: transparent;
border: none;
outline: none;
font-family: ‘Syne’, sans-serif;
font-size: 28px;
font-weight: 400;
text-align: center;
color: #1a2420;
padding: 0 0 0 26px !important;
line-height: 1.15;
letter-spacing: -0.4px;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
.profile-input-card .currency-wrap input::placeholder {
color: #c8c8c8;
font-weight: 600;
}
.profile-input-card input:not([class])::placeholder { color: #c8c8c8; font-weight: 400; font-size: 28px; }
.profile-input-card .currency-wrap .currency-prefix {
left: 0;
font-size: 20px;
color: #9bb5a7;
}

/* Keyboard focus rings — accessibility */
.decision-card:focus,
.phil-btn:focus,
.life-pill:focus,
.goal-chip:focus,
.faq-q:focus,
.risk-option:focus,
.wellness-opt:focus {
  outline: 2.5px solid #4A7C59;
  outline-offset: 2px;
}
.analyze-btn:focus {
  outline: 2.5px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(74,124,89,0.4);
}

input[type=range] {
-webkit-appearance: none;
height: 5px;
border-radius: 4px;
background: #c0d8c8;
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px; height: 20px;
border-radius: 50%;
background: #4A7C59;
cursor: pointer;
box-shadow: 0 1px 4px rgba(74,124,89,0.3);
transition: transform 0.15s;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
input[type=range]::-moz-range-thumb {
width: 20px; height: 20px;
border-radius: 50%; border: none;
background: #4A7C59; cursor: pointer;
}

.form-group input {
width: 100%; background: #f4f7f5; border: none;
border-radius: 12px; padding: 12px 14px;
font-family: ‘Syne’, sans-serif; font-size: 15px; font-weight: 400; color: #1a2420;
outline: none; transition: background 0.15s;
-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
}
.form-group input:focus { background: #edf3ef; box-shadow: none; }
.form-group .currency-wrap { display:flex; align-items:center; position:relative; }
.form-group .currency-wrap input { padding-left: 28px !important; }

.philosophy-select { margin-bottom: 24px; }
.philosophy-select label {
display: flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 500;
letter-spacing: 0;
color: #9bb5a7; margin-bottom: 8px;
}
.risk-tol-info-icon {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
flex-shrink: 0;
}
.risk-tol-info-icon svg { transition: stroke 0.15s; }
.risk-tol-info-icon:hover svg,
.risk-tol-info-icon:focus svg { stroke: #4A7C59; outline: none; }
.risk-tol-tooltip {
display: none;
position: absolute;
left: 50%; transform: translateX(-50%);
bottom: calc(100% + 8px);
background: #1a3326;
color: #e8f4ed;
font-size: 12px;
font-weight: 400;
line-height: 1.55;
padding: 10px 14px;
border-radius: 10px;
width: 240px;
white-space: normal;
z-index: 200;
box-shadow: 0 4px 16px rgba(0,0,0,0.18);
pointer-events: none;
}
.risk-tol-tooltip::after {
content: “”;
position: absolute;
top: 100%; left: 50%; transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #1a3326;
}
.risk-tol-info-icon:hover .risk-tol-tooltip,
.risk-tol-info-icon:focus .risk-tol-tooltip { display: block; }
.phil-options { display: flex; gap: 6px; flex-wrap: wrap; }
.phil-btn {
padding: 7px 14px; border: 1px solid #c0d8c8;
background: white; border-radius: 20px;
font-size: 12px; font-weight: 500; cursor: pointer;
color: #444444; transition: all 0.18s cubic-bezier(.22,.68,0,1.2);
}
.phil-btn.active {
background: #4A7C59; color: #ffffff;
border-color: #4A7C59;
box-shadow: 0 2px 8px rgba(74,124,89,0.2);
}
.phil-btn:hover:not(.active) {
border-color: #4A7C59; color: #2d5c3e;
transform: translateY(-1px);
}

/* Unified profile grid — 3 columns, all field types in one flow */
.unified-profile-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
margin-bottom: 20px;
}
@media (max-width: 640px) {
.unified-profile-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
.unified-profile-grid { grid-template-columns: 1fr; }
}
.life-pill {
padding: 7px 14px; border: 1.5px solid #c0d8c8;
background: white; border-radius: 20px;
font-family: ‘Syne’, sans-serif;
font-size: 13px; font-weight: 600; cursor: pointer;
color: #556a5e; transition: all 0.15s cubic-bezier(.22,.68,0,1.2);
}
.life-pill.active {
background: #4A7C59; color: #fff;
border-color: #4A7C59;
box-shadow: 0 2px 6px rgba(74,124,89,0.22);
}
.life-pill:hover:not(.active) {
border-color: #4A7C59; color: #2d5c3e;
}

.analyze-btn {
width: 100%;
background: linear-gradient(135deg, #4A7C59 0%, #3a6b48 100%);
color: #ffffff;
border: none;
border-radius: 12px;
padding: 15px;
font-family: ‘Syne’, sans-serif;
font-size: 15px;
font-weight: 700;
cursor: pointer;
letter-spacing: 0.02em;
transition: all 0.2s cubic-bezier(.22,.68,0,1.2);
margin-top: 6px;
box-shadow: 0 2px 8px rgba(74,124,89,0.22);
}
.analyze-btn:hover {
background: linear-gradient(135deg, #3d6b4a 0%, #2e5839 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(74,124,89,0.3);
}
.analyze-btn:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(74,124,89,0.2); }

/* ── GOAL SAVINGS PLANNER ── */
.goal-savings-planner {
background: linear-gradient(135deg, #f0f9f4 0%, #e8f4ec 100%);
border: 1.5px solid #b8d4c2;
border-radius: 16px;
padding: 22px 20px 20px;
margin-top: 24px;
transition: all 0.22s ease;
}
.goal-savings-planner-title {
font-family: ‘Syne’, sans-serif;
font-size: 13px;
font-weight: 700;
color: #2d5c3e;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 7px;
}
.goal-savings-planner-sub {
font-size: 12px;
color: #6a8c78;
margin-bottom: 16px;
line-height: 1.5;
}
.planner-input-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 14px;
}
@media(max-width:480px){ .planner-input-row { grid-template-columns: 1fr; } }
.planner-input-card {
background: white;
border: 1px solid #d4e8da;
border-radius: 12px;
padding: 12px 14px;
cursor: text;
}
.planner-input-card:focus-within {
border-color: #4A7C59;
box-shadow: 0 0 0 2px rgba(74,124,89,0.10);
}
.planner-input-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
color: #9bb5a7;
margin-bottom: 6px;
display: block;
}
.planner-input-wrap {
display: flex;
align-items: center;
gap: 0;
}
.planner-prefix {
font-size: 16px;
font-weight: 600;
color: #4A7C59;
margin-right: 3px;
flex-shrink: 0;
}
.planner-input-wrap input {
border: none;
outline: none;
background: transparent;
font-family: ‘Syne’, sans-serif;
font-size: 20px;
font-weight: 500;
color: #1a2420;
width: 100%;
-webkit-user-select: text;
user-select: text;
}
.planner-input-wrap input::placeholder { color: #c8c8c8; }

/* Rate slider row */
.planner-rate-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.planner-rate-label {
font-size: 11px;
color: #6a8c78;
font-weight: 500;
white-space: nowrap;
flex-shrink: 0;
}
.planner-rate-row input[type=range] {
flex: 1;
accent-color: #4A7C59;
}
.planner-rate-val {
font-size: 13px;
font-weight: 700;
color: #4A7C59;
width: 44px;
text-align: right;
flex-shrink: 0;
}

/* Result display */
.planner-result {
display: none;
background: white;
border: 1px solid #b8d4c2;
border-radius: 12px;
padding: 16px 18px;
margin-top: 2px;
}
.planner-result.visible { display: block; }
.planner-result-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 10px;
margin-bottom: 10px;
}
.planner-result-card {
background: #f4f7f5;
border-radius: 10px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 3px;
}
.planner-result-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.3px;
text-transform: uppercase;
color: #9bb5a7;
}
.planner-result-value {
font-family: ‘Syne’, sans-serif;
font-size: 18px;
font-weight: 700;
color: #1a2420;
line-height: 1.15;
}
.planner-result-value.highlight { color: #4A7C59; }
.planner-result-hint {
font-size: 10px;
color: #8aaa97;
line-height: 1.4;
}
.planner-progress-bar-wrap {
margin-top: 8px;
}
.planner-bar-label-row {
display: flex;
justify-content: space-between;
font-size: 11px;
color: #8aaa97;
margin-bottom: 4px;
}
.planner-bar-track {
background: #e0ede6;
border-radius: 6px;
height: 8px;
overflow: hidden;
}
.planner-bar-fill {
height: 100%;
border-radius: 6px;
background: linear-gradient(90deg, #6aaf85, #4A7C59);
transition: width 0.5s cubic-bezier(.22,.68,0,1.2);
}
.planner-note {
font-size: 11px;
color: #8aaa97;
line-height: 1.5;
margin-top: 8px;
}
.planner-unreachable {
background: #fff4f4;
border: 1px solid #f5c0ba;
border-radius: 10px;
padding: 12px 14px;
font-size: 13px;
color: #7a1c1c;
line-height: 1.6;
}

/* RESULTS */
/* ── RESULTS PAGE: Inline Goal Savings Planner ── */
.rg-planner {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(0,0,0,0.07);
}
.rg-planner-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #7a9889;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.rg-planner-inputs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.rg-planner-field {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1;
min-width: 110px;
}
.rg-planner-label {
font-size: 10px;
color: #9bb5a7;
font-weight: 600;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.rg-planner-input-wrap {
display: flex;
align-items: center;
background: white;
border: 1.5px solid #d4e8da;
border-radius: 8px;
padding: 7px 10px;
gap: 3px;
transition: border-color 0.15s;
}
.rg-planner-input-wrap:focus-within {
border-color: #4A7C59;
box-shadow: 0 0 0 2px rgba(74,124,89,0.10);
}
.rg-planner-prefix {
font-size: 13px;
font-weight: 600;
color: #4A7C59;
flex-shrink: 0;
}
.rg-planner-input-wrap input {
border: none;
outline: none;
background: transparent;
font-family: ‘Syne’, sans-serif;
font-size: 14px;
font-weight: 600;
color: #1a2420;
width: 100%;
min-width: 60px;
}
.rg-planner-input-wrap input::placeholder { color: #c8d8d0; }
.rg-planner-rate-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.rg-planner-rate-label { font-size: 11px; color: #8aaa97; white-space: nowrap; flex-shrink: 0; }
.rg-planner-rate-row input[type=range] { flex: 1; accent-color: #4A7C59; height: 4px; }
.rg-planner-rate-val { font-size: 12px; font-weight: 700; color: #4A7C59; width: 38px; text-align: right; flex-shrink: 0; }
.rg-planner-result {
background: white;
border-radius: 10px;
padding: 12px 14px;
border: 1px solid #d4e8da;
display: none;
}
.rg-planner-result.visible { display: block; }
.rg-result-reach {
font-size: 11px;
font-weight: 700;
color: #4A7C59;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 5px;
}
.rg-result-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.rg-result-chip {
background: #f0f7f3;
border-radius: 8px;
padding: 6px 10px;
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
min-width: 80px;
}
.rg-chip-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: #5a7a68; }
.rg-chip-val { font-size: 14px; font-weight: 700; color: #1a2420; font-family: ‘Syne’, sans-serif; }
.rg-chip-val.accent { color: #4A7C59; }
.rg-bar-wrap { margin-top: 6px; }
.rg-bar-track { background: #e0ede6; border-radius: 6px; height: 6px; overflow: hidden; }
.rg-bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg,#6aaf85,#4A7C59); transition: width 0.5s; }
.rg-planner-note { font-size: 10px; color: #8aaa97; line-height: 1.5; margin-top: 6px; }
.rg-unreachable { background:#fff4f4; border:1px solid #f5c0ba; border-radius:8px; padding:10px 12px; font-size:12px; color:#7a1c1c; line-height:1.5; font-family: ‘Syne’, sans-serif; }

.result-section { display: none; position: sticky; top: 120px; align-self: start; }
.result-section.visible { display: block; }
.result-section.visible .verdict-box,
.result-section.visible .result-section-title,
.result-section.visible .metric-row,
.result-section.visible .phil-verdict,
.result-section.visible .alternatives-box,
.result-section.visible .disclaimer-inline {
animation: pageFadeUp 0.38s cubic-bezier(.22,.68,0,1.1) both;
}
.result-section.visible .verdict-box       { animation-delay: 0.00s; }
.result-section.visible .result-section-title:nth-of-type(1) { animation-delay: 0.10s; }
.result-section.visible .metric-row:nth-child(1) { animation-delay: 0.14s; }
.result-section.visible .metric-row:nth-child(2) { animation-delay: 0.18s; }
.result-section.visible .metric-row:nth-child(3) { animation-delay: 0.22s; }
.result-section.visible .metric-row:nth-child(4) { animation-delay: 0.26s; }
.result-section.visible .metric-row:nth-child(5) { animation-delay: 0.30s; }
.result-section.visible .metric-row:nth-child(6) { animation-delay: 0.34s; }
.result-section.visible .alternatives-box  { animation-delay: 0.42s; }
.result-section.visible .disclaimer-inline { animation-delay: 0.50s; }
.verdict-box {
border-radius: 16px;
padding: 28px 28px 24px;
margin-bottom: 20px;
border-left: 4px solid transparent;
}
.verdict-box.yes {
background: #f0f7fa;
border-left-color: #2980B9;
border-top: 1px solid #c8ebd6;
border-right: 1px solid #c8ebd6;
border-bottom: 1px solid #c8ebd6;
}
.verdict-box.no {
background: #f5f5f7;
border-left-color: #5d6b7a;
border-top: 1px solid #f5c0ba;
border-right: 1px solid #f5c0ba;
border-bottom: 1px solid #f5c0ba;
}
.verdict-box.caution {
background: #fdfaf0;
border-left-color: #c28a00;
border-top: 1px solid #fcd48a;
border-right: 1px solid #fcd48a;
border-bottom: 1px solid #fcd48a;
}
.verdict-label {
font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
margin-bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
padding: 4px 12px; border-radius: 20px;
}
.verdict-box.yes .verdict-label { color: #2471a3; background: rgba(41,128,185,0.12); }
.verdict-box.no .verdict-label { color: #4a5568; background: rgba(93,107,122,0.1); }
.verdict-box.caution .verdict-label { color: #9a6e00; background: rgba(194,138,0,0.1); }
.verdict-title { font-family: ‘Syne’, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; color: #0d1814; letter-spacing: -0.2px; margin-top: 2px; }
.verdict-sub { font-size: 14px; font-weight: 400; color: #2a3830; margin-top: 10px; line-height: 1.75; }
.result-section-title {
font-family: ‘Syne’, sans-serif; font-size: 10px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase;
color: #1a3326; margin: 28px 0 14px;
display: flex; align-items: center; gap: 10px;
}
.result-section-title::after {
content: ‘’;
flex: 1;
height: 1px;
background: #e2ece7;
}
#metricsBox {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
margin-bottom: 4px;
}
.metric-row {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 16px 14px;
background: #f4f7f5;
border: none;
border-radius: 16px;
transition: transform 0.18s ease, background 0.18s ease;
}
.metric-row:hover {
transform: translateY(-2px);
background: #edf3ef;
}
.metric-row:last-child { border-bottom: none; }
.metric-label {
color: #5a7a6a;
font-size: 11px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
line-height: 1.3;
order: 1;
}
.metric-value {
font-family: ‘Syne’, sans-serif;
font-weight: 700;
font-size: 22px;
letter-spacing: -0.5px;
line-height: 1.1;
order: 2;
}
.metric-value.good { color: #1a7a4a; }
.metric-value.bad  { color: #8b2c1a; }
.metric-value.neutral { color: #1a2420; }
.metric-row:has(.metric-value.good)  { background: #f0faf4; }
.metric-row:has(.metric-value.bad)   { background: #fdf4f2; }
.metric-row:has(.metric-value.neutral) { background: #f4f7f5; }
.metric-hint {
font-size: 11px; color: #8aaa97; line-height: 1.4; order: 3;
margin-top: 1px;
}

/* ── METRIC TOOLTIP ICON ── */
.metric-label-wrap {
display: flex; align-items: center; gap: 5px; order: 1;
}
.metric-tip-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 15px; height: 15px; border-radius: 50%;
background: #d4e8da; color: #4A7C59;
font-size: 9px; font-weight: 800; font-family: ‘Syne’, sans-serif;
cursor: help; flex-shrink: 0;
position: relative;
transition: background 0.15s;
font-style: normal;
line-height: 1;
}
.metric-tip-icon:hover { background: #4A7C59; color: white; }
.metric-tip-icon .tip-bubble {
display: none;
position: absolute;
bottom: calc(100% + 7px);
left: 50%;
transform: translateX(-50%);
background: #1a2420;
color: white;
font-family: ‘Syne’, sans-serif;
font-size: 11.5px;
font-weight: 400;
font-style: normal;
line-height: 1.55;
padding: 10px 13px;
border-radius: 10px;
width: 220px;
z-index: 200;
box-shadow: 0 4px 18px rgba(0,0,0,0.22);
pointer-events: none;
white-space: normal;
}
.metric-tip-icon .tip-bubble::after {
content: ‘’;
position: absolute;
top: 100%; left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #1a2420;
}
.metric-tip-icon:hover .tip-bubble { display: block; }
/* Prevent tooltip from clipping off right edge */
.metric-row:last-child .metric-tip-icon .tip-bubble,
.metric-row:nth-last-child(-n+2) .metric-tip-icon .tip-bubble {
left: auto; right: 0; transform: none;
}
.metric-row:last-child .metric-tip-icon .tip-bubble::after,
.metric-row:nth-last-child(-n+2) .metric-tip-icon .tip-bubble::after {
left: auto; right: 12px; transform: none;
}

.phil-verdict {
background: #fafcfb;
border: 1px solid #ddeee5;
border-radius: 12px;
padding: 18px 20px;
margin-bottom: 8px;
}
.phil-verdict-name {
font-size: 10px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; color: #4A7C59; margin-bottom: 6px;
display: inline-block; padding: 2px 8px; background: #e8f4ee;
border-radius: 10px;
}
.phil-verdict-text { font-size: 13px; line-height: 1.7; color: #1a2420; margin-top: 6px; font-family: ‘Syne’, sans-serif; }

.alternatives-box {
background: linear-gradient(135deg, #f0f9f4 0%, #e8f4ec 100%);
border: 1px solid #c8e8d4;
border-radius: 14px;
padding: 22px 24px;
margin-top: 20px;
}
.alternatives-box h4 {
font-family: ‘Syne’, sans-serif; font-size: 14px; font-weight: 700;
color: #2d5c3e; margin-bottom: 14px;
}
.alt-item {
display: flex; gap: 10px; padding: 10px 0;
border-bottom: 1px solid #c8e8d4; font-size: 13px; line-height: 1.65;
color: #1a2c22;
}
.alt-item:last-child { border-bottom: none; }
.alt-icon { flex-shrink: 0; }

/* ── GOAL PRIORITY RESULTS ── */
.goal-priority-card {
background: white; border: 1.5px solid #c0d8c8; border-radius: 12px;
padding: 18px 20px; margin-bottom: 10px;
display: flex; align-items: center; gap: 16px;
cursor: pointer; transition: all 0.18s cubic-bezier(.22,.68,0,1.2);
position: relative;
}
.goal-priority-card:hover {
border-color: #4A7C59;
box-shadow: 0 4px 16px rgba(74,124,89,0.13);
transform: translateY(-2px);
}
.goal-priority-card.done {
border-color: #4A7C59; background: #f0f9f3;
}
.goal-priority-rank {
width: 32px; height: 32px; border-radius: 50%;
background: #d4e8da; color: #2d5c3e;
font-family: ‘Syne’, sans-serif; font-size: 14px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.goal-priority-card.done .goal-priority-rank {
background: #4A7C59; color: white;
}
.goal-priority-icon { font-size: 20px; flex-shrink: 0; display: flex; align-items: center; width: 20px; height: 20px; }
.goal-priority-label { font-family:‘Syne’,sans-serif; font-size:15px; font-weight:700; color:#1a2420; }
.goal-priority-reason { font-size:12px; color:#6b7d74; line-height:1.5; margin-top:2px; }
.goal-priority-arrow {
margin-left: auto; font-size: 18px; color: #4A7C59;
flex-shrink: 0; transition: transform 0.18s;
}
.goal-priority-card:hover .goal-priority-arrow { transform: translateX(4px); }
.goal-priority-card.done .goal-priority-arrow { color: #4A7C59; }
.goal-priority-drag-handle {
cursor: grab; flex-shrink: 0; padding: 4px 6px 4px 0;
opacity: 0.4; transition: opacity 0.15s;
touch-action: none;
}
.goal-priority-card:hover .goal-priority-drag-handle { opacity: 0.8; }
.goal-priority-drag-handle:active { cursor: grabbing; }
.goal-priority-card.drag-over {
border-color: #4A7C59;
background: #f0f9f3;
box-shadow: 0 0 0 2px rgba(74,124,89,0.25);
}
.goal-priority-card.dragging {
opacity: 0.4;
transform: scale(0.98);
}
.goal-priority-done-badge {
position: absolute; top: 10px; right: 14px;
font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
background: #E8F5EE; color: #4A7C59;
border: 1px solid #A8D5B5; border-radius: 20px;
padding: 2px 8px;
}

/* ── CALC GOAL STEP PILLS ── */
.goal-step-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 20px;
font-size: 12px; font-weight: 600;
border: 1.5px solid #c0d8c8; background: white; color: #888;
cursor: pointer; transition: all 0.15s;
}
.goal-step-pill.active {
border-color: #4A7C59; background: #d4e8da; color: #1a3326;
}
.goal-step-pill.done {
border-color: #4A7C59; background: #4A7C59; color: white;
}

.page-header {
background: #ffffff; color: #000000;
padding: 48px 32px 40px;
text-align: center;
}
.page-header h1 { font-family: ‘Syne’, sans-serif; font-size: 36px; font-weight: 500; letter-spacing: -0.5px; line-height: 1.15; color: #1a3326; }
.page-header p { font-size: 15px; color: #3a5a45; margin-top: 10px; max-width: 480px; margin-left: auto; margin-right: auto; }

.risk-body {
max-width: 660px; margin: 0 auto;
padding: 32px 32px 80px;
}
.risk-progress {
display: flex; gap: 5px; margin-bottom: 36px;
}
.risk-progress-dot {
height: 3px; flex: 1; border-radius: 6px;
background: #e4efea; transition: background 0.4s ease;
}
.risk-progress-dot.done { background: #6A9E79; }
.risk-progress-dot.active { background: #4A7C59; }

.risk-question-card {
background: #fafcfb; border: 1px solid #e8f0eb;
border-radius: 16px; padding: 32px 32px 28px;
margin-bottom: 20px;
}
.risk-q-num { font-size: 11px; font-weight: 500; color: #6A9E79; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; }
.risk-q-text { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 500; line-height: 1.4; color: #1e3a2a; margin-bottom: 24px; }
.risk-options { display: flex; flex-direction: column; gap: 8px; }
.risk-option {
display: flex; align-items: center; gap: 14px;
padding: 13px 16px; border: 1px solid #ddeae2;
border-radius: 10px; cursor: pointer;
transition: all 0.16s ease;
font-size: 14px; line-height: 1.5; color: #2c4a36; background: #fff;
}
.risk-option:hover {
border-color: #6A9E79; background: #f2f8f4;
transform: translateX(2px);
}
.risk-option.selected { border-color: #4A7C59; background: #edf7f1; }
.risk-option-letter {
width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
background: #eaf2ec; display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 500; color: #4A7C59; transition: all 0.15s;
}
.risk-option.selected .risk-option-letter { background: #4A7C59; color: #fff; }

.risk-nav { display: flex; gap: 10px; margin-top: 24px; }
.risk-btn-prev {
flex: 1; padding: 14px; border: 1px solid #ddeae2;
background: white; border-radius: 10px;
font-size: 14px; font-weight: 400; color: #6a8f7a; cursor: pointer; transition: all 0.15s;
}
.risk-btn-prev:hover { border-color: #4A7C59; color: #4A7C59; background: #f2f8f4; }
.risk-btn-next {
flex: 2; padding: 14px; background: #4A7C59;
border: none; border-radius: 10px;
font-size: 14px; font-weight: 500; color: white; cursor: pointer; transition: all 0.15s; letter-spacing: 0.2px;
}
.risk-btn-next:hover { background: #5a8f6a; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(74,124,89,0.2); }
.risk-btn-next:disabled { opacity: 0.35; cursor: default; transform: none; box-shadow: none; }

.risk-result-card {
background: #fafcfb; border: 1px solid #e8f0eb;
border-radius: 16px; padding: 36px;
text-align: center; display: none;
}
.risk-result-card.visible { display: block; }
.risk-profile-badge {
display: inline-block;
background: #edf7f1; color: #2d5c3e;
font-size: 11px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase;
padding: 6px 16px; border-radius: 20px; margin-bottom: 16px;
}
.risk-profile-title { font-family: 'Syne', sans-serif; font-size: 30px; font-weight: 600; margin-bottom: 12px; }
.risk-profile-desc { font-size: 15px; color: #4a6b57; line-height: 1.75; max-width: 440px; margin: 0 auto 24px; }
.risk-spectrum {
display: flex; gap: 4px; margin: 24px 0;
}
.risk-spec-item {
flex: 1; padding: 8px 4px; border-radius: 8px;
font-size: 10px; font-weight: 600; text-align: center;
color: #ffffff;
border: 1.5px solid transparent; transition: all 0.2s;
}
.risk-spec-item.current { outline: 2px solid #4A7C59; outline-offset: 2px; }
.risk-retake {
background: none; border: 1px solid #ddeae2; border-radius: 10px;
padding: 10px 24px; font-size: 14px; font-weight: 400; color: #4a6b57;
cursor: pointer; transition: all 0.15s; margin-top: 8px;
}
.risk-retake:hover { border-color: #4A7C59; color: #4A7C59; background: #f2f8f4; }

/* ============================================================
FAQ PAGE
============================================================ */
.faq-body {
max-width: 680px; margin: 0 auto;
padding: 48px 32px 80px;
}
.faq-item {
background: white; border: 1px solid #c0d8c8;
border-radius: 12px; margin-bottom: 10px; overflow: hidden;
}
.faq-q {
display: flex; justify-content: space-between; align-items: center;
padding: 20px 24px; cursor: pointer;
font-family: ‘Syne’, sans-serif; font-size: 16px; font-weight: 700;
color: #000000; transition: background 0.15s;
}
.faq-q:hover { background: #d4e8da; }
.faq-icon { color: #4A7C59; font-size: 20px; transition: transform 0.2s; flex-shrink: 0; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a {
display: none; padding: 0 24px 20px;
font-size: 14px; color: #444444; line-height: 1.8;
border-top: 1px solid #c0d8c8;
padding-top: 16px;
}
.faq-item.open .faq-a {
display: block;
animation: faqSlideDown 0.28s cubic-bezier(.22,.68,0,1.1) both;
}
@keyframes faqSlideDown {
from { opacity: 0; transform: translateY(-8px); }
to   { opacity: 1; transform: translateY(0); }
}
.faq-highlight {
background: #d4e8da; border-left: 3px solid #4A7C59;
padding: 12px 16px; border-radius: 0 8px 8px 0;
margin-top: 12px; font-size: 13px; color: #4A7C59; font-weight: 500;
}

/* ============================================================
SUPPORT PAGE
============================================================ */
.support-body {
max-width: 640px; margin: 0 auto;
padding: 48px 32px 80px;
text-align: center;
}
.support-heart { font-size: 48px; margin-bottom: 16px; }
.support-title { font-family: ‘Syne’, sans-serif; font-size: 36px; font-weight: 400; margin-bottom: 12px; letter-spacing: -0.3px; }
.support-subtitle { font-size: 16px; color: #333333; line-height: 1.7; max-width: 460px; margin: 0 auto 40px; }
.support-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 36px; text-align: center; }
@media (max-width: 500px) { .support-cards { grid-template-columns: 1fr; } }
.support-card {
background: white; border: 1px solid #c0d8c8;
border-radius: 12px; padding: 24px;
}
.support-card-icon { font-size: 24px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; }
.support-card-title { font-family: ‘Syne’, sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 6px; color: #1a3326; }
.support-card-desc { font-size: 13px; color: #3a5a45; line-height: 1.5; }
.support-btn-row {
display: flex; gap: 12px; justify-content: center;
flex-wrap: wrap; margin-bottom: 16px;
}
.kofi-btn {
display: inline-flex; align-items: center; gap: 10px;
background: #6A9E79; color: white;
padding: 16px 28px; border-radius: 8px;
font-family: ‘Syne’, sans-serif; font-size: 15px; font-weight: 700;
text-decoration: none; transition: opacity 0.15s;
}
.kofi-btn:hover { opacity: 0.88; }
.suggest-btn {
display: inline-flex; align-items: center; gap: 10px;
background: #6A9E79; color: white;
padding: 16px 28px; border-radius: 8px;
font-family: ‘Syne’, sans-serif; font-size: 15px; font-weight: 700;
text-decoration: none; transition: opacity 0.15s; cursor: pointer;
border: none;
}
.suggest-btn:hover { opacity: 0.88; }
.support-no-pressure {
font-size: 13px; color: #333333; font-weight: 400;
padding: 16px 24px; background: #d4e8da;
border-radius: 8px; max-width: 400px; margin: 0 auto;
}

/* ============================================================
ABOUT PAGE
============================================================ */
.about-grid {
max-width: 860px; margin: 0 auto;
padding: 48px 32px 80px;
display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
}
@media (max-width: 680px) { .about-grid { grid-template-columns: 1fr; gap: 32px; } }
.about-section h2 { font-family: ‘Syne’, sans-serif; font-size: 36px; font-weight: 800; margin-bottom: 16px; letter-spacing: -0.3px; color: #1a3326; }
.about-section p { font-size: 15px; color: #3a5a45; line-height: 1.8; margin-bottom: 14px; }
.creator-card {
background: #ffffff; color: #000000;
border-radius: 12px; padding: 32px;
}
.creator-avatar {
width: 72px; height: 72px; background: #c8ddd0;
border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-family: ‘Syne’, sans-serif; font-size: 26px; font-weight: 800;
margin-bottom: 0; overflow: hidden; flex-shrink: 0;
border: 2px solid #d4e8da;
}
.creator-avatar img {
width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.creator-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.creator-name-block { display: flex; flex-direction: column; gap: 6px; }
.creator-name { font-family: ‘Syne’, sans-serif; font-size: 22px; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.creator-role { font-size: 12px; color: #6b7d74; font-weight: 500; letter-spacing: 0.5px; }
.creator-bio { font-size: 14px; color: #444444; line-height: 1.7; margin-bottom: 20px; }
.creator-link {
display: inline-flex; align-items: center; gap: 8px;
background: white; color: #4A7C59;
padding: 10px 20px; border-radius: 20px;
font-size: 13px; font-weight: 700; text-decoration: none; transition: opacity 0.15s;
}
.creator-link:hover { opacity: 0.9; }
.claude-credit {
background: white; border: 1px solid #c0d8c8;
border-radius: 12px; padding: 22px 24px; margin-top: 16px;
}
.claude-credit h4 { font-family: ‘Syne’, sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.claude-credit p { font-size: 13px; color: #444444; line-height: 1.6; margin-bottom: 0; }
.claude-badge {
display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
background: #1a3326; color: white; padding: 6px 14px; border-radius: 20px;
font-size: 12px; font-weight: 500;
}

/* DISCLAIMER */
.disclaimer-bar {
background: #f0f7f3; border-top: 1px solid #c0d8c8; border-bottom: 1px solid #c0d8c8;
padding: 10px 32px; text-align: center;
font-size: 11px; color: #5a7a68; line-height: 1.5;
}
.disclaimer-bar strong { color: #3a6b48; }
.disclaimer-inline {
background: #f8fbf9;
border: 1px solid #d8ebe0;
border-left: 3px solid #4A7C59;
border-radius: 0 10px 10px 0;
padding: 12px 16px;
font-size: 12px;
color: #607870;
line-height: 1.65;
margin-top: 20px;
}
.disclaimer-inline strong { color: #3a6b48; }

/* HOW WE CALCULATED THIS */

/* ============================================================
CALCULATION EXPLAINER — mobile-first, skimmable
============================================================ */
.calc-explain {
background: white;
border: 1px solid #e0ede6;
border-radius: 16px;
margin-top: 20px;
overflow: hidden;
}
.calc-explain-toggle {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 16px 18px; cursor: pointer;
font-family: ‘Syne’, sans-serif; font-size: 14px; font-weight: 700;
color: #2d5c3e; background: none; border: none; width: 100%;
text-align: left; transition: background 0.15s;
}
.calc-explain-toggle:hover { background: #f4faf7; }
.calc-explain-toggle-icon {
width: 32px; height: 32px; border-radius: 50%;
background: #e8f5ee; display: flex; align-items: center; justify-content: center;
flex-shrink: 0; font-size: 16px;
}
.calc-explain-toggle-label { flex: 1; }
.calc-explain-toggle-sub {
font-size: 11px; font-weight: 500; color: #9bb5a7; margin-top: 1px; line-height: 1.3;
}
.calc-explain-chevron {
font-size: 11px; color: #6b9c7a; transition: transform 0.2s;
flex-shrink: 0; width: 20px; text-align: center;
}
.calc-explain.open .calc-explain-chevron { transform: rotate(180deg); }
.calc-explain-body {
display: none; padding: 0 16px 20px;
}
.calc-explain.open .calc-explain-body { display: block; }
.calc-explain-intro {
font-size: 13.5px; color: #5a7a68; line-height: 1.75; margin-bottom: 16px;
padding: 12px 14px;
background: #f8fdf9; border-radius: 10px;
border-left: 3px solid #b8d4c2;
}
.calc-explain-step {
display: flex; gap: 14px; align-items: flex-start;
padding: 14px 0; border-bottom: 1px solid #edf5f0;
}
.calc-explain-step:last-child { border-bottom: none; }
.calc-explain-num {
width: 28px; height: 28px; border-radius: 50%;
background: #d4e8da; color: #7aab8a;
font-size: 12px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 2px;
}
.calc-explain-text { flex: 1; min-width: 0; }
.calc-explain-text .step-title {
font-family: ‘Syne’, sans-serif;
font-size: 14px; font-weight: 700; color: #1a2420; margin-bottom: 3px; line-height: 1.3;
}
.calc-explain-text .step-desc {
font-size: 13px; color: #5a7a68; line-height: 1.65;
}
.calc-explain-text strong { color: #2d5c3e; }
.show-math-btn {
display: inline-flex; align-items: center; gap: 5px;
margin-top: 8px;
font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
color: #4A7C59; background: #e8f5ee; border: none;
border-radius: 20px; padding: 4px 10px; cursor: pointer;
transition: background 0.15s; -webkit-user-select: none; user-select: none;
}
.show-math-btn:hover { background: #d4e8da; }
.show-math-btn.open { background: #d4e8da; }
.calc-explain-formula {
margin-top: 8px; background: #f4f8f5; border: 1px solid #d4e8da;
border-radius: 10px; padding: 10px 12px; font-size: 12px; color: #2d5c3e;
line-height: 1.7; font-family: ‘Courier New’, monospace; word-break: break-word;
}
.calc-explain-formula strong {
color: #2d5c3e; font-family: ‘Syne’, sans-serif; font-size: 13px;
}
.calc-explain-glossary {
background: #f0f7f3; border: 1px solid #c8e0d0;
border-radius: 12px; padding: 0; margin-bottom: 14px; overflow: hidden;
}
.calc-explain-glossary-toggle {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px; cursor: pointer;
font-size: 12px; font-weight: 700; color: #3a6b48;
background: none; border: none; width: 100%; text-align: left;
}
.calc-explain-glossary-body { display: none; padding: 0 14px 12px; }
.calc-explain-glossary.open .calc-explain-glossary-body { display: block; }
.calc-explain-glossary-title {
font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
text-transform: uppercase; color: #4A7C59; margin-bottom: 10px;
}
.calc-explain-glossary-item {
display: grid; grid-template-columns: auto 1fr; gap: 8px;
padding: 6px 0; border-bottom: 1px solid #d8ece2; font-size: 12.5px; align-items: baseline;
}
.calc-explain-glossary-item:last-child { border-bottom: none; }
.calc-explain-glossary-term {
font-weight: 700; color: #2d5c3e; white-space: nowrap;
background: #e8f5ee; border-radius: 6px; padding: 2px 7px; font-size: 11.5px;
}
.calc-explain-glossary-def { color: #4a6a55; line-height: 1.55; font-size: 12.5px; }

/* ── CELEBRATION ── */
@keyframes celebFadeIn {
from { opacity: 0; transform: translateY(-12px) scale(0.95); }
to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes confettiFall {
0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
@keyframes celebPop {
0%   { transform: scale(0.3) rotate(-10deg); opacity: 0; }
60%  { transform: scale(1.18) rotate(3deg); opacity: 1; }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes celebShimmer {
0%,100% { opacity: 0; } 50% { opacity: 1; }
}
.confetti-piece {
position: fixed; width: 9px; height: 9px; border-radius: 2px;
pointer-events: none; z-index: 9999;
animation: confettiFall linear forwards;
}
.celebration-banner {
position: relative; overflow: hidden;
background: linear-gradient(135deg, #f0faf4 0%, #e6f5ee 100%);
border: 1.5px solid #a8d8ba; border-radius: 16px;
padding: 22px 20px 18px; margin-bottom: 18px;
animation: celebFadeIn 0.5s cubic-bezier(.22,.68,0,1.2) both;
text-align: center;
}
.celebration-banner::after {
content: ‘’; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
animation: celebShimmer 2s ease-in-out 3;
}
.celebration-emoji {
font-size: 36px; display: block; margin-bottom: 10px;
animation: celebPop 0.6s cubic-bezier(.22,.68,0,1.2) 0.15s both;
}
.celebration-title {
font-family: ‘Syne’, sans-serif; font-size: 19px; font-weight: 800;
color: #2d5c3e; margin-bottom: 7px; line-height: 1.25;
}
.celebration-sub {
font-size: 13.5px; color: #3a6b48; line-height: 1.7;
max-width: 300px; margin: 0 auto;
}
.celebration-badge {
display: inline-flex; align-items: center; gap: 5px; margin-top: 12px;
font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
background: rgba(74,124,89,0.12); color: #2d5c3e; padding: 5px 12px; border-radius: 20px;
}

/* ── MOBILE RESULT FIXES ── */
@media (max-width: 680px) {
.calc-body { grid-template-columns: 1fr !important; }
.result-section { position: static !important; margin-top: 24px; }
.verdict-box { padding: 20px 16px 18px; }
.verdict-title { font-size: 18px; }
.metric-row { padding: 12px 12px 10px; }
.metric-value { font-size: 18px; }
.calc-explain-toggle { padding: 14px 14px; }
.calc-explain-body { padding: 0 12px 16px; }
.calc-explain-glossary-item { grid-template-columns: 1fr; gap: 3px; }
}
footer {
background: #2d4a38;
color: rgba(255,255,255,0.65);
text-align: center;
padding: 28px;
font-size: 12px;
letter-spacing: 0.01em;
border-top: 3px solid #4A7C59;
}
footer span { color: #7fc098; }

/* LOADING */
.loading-overlay {
display: none; position: fixed; inset: 0;
background: rgba(26,36,32,0.7); z-index: 200;
align-items: center; justify-content: center; flex-direction: column; gap: 16px;
}
.loading-overlay.active { display: flex; }
.loading-spinner {
width: 36px; height: 36px;
border: 2px solid rgba(74,124,89,0.3); border-top-color: #4A7C59;
border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
PAGE ENTRY ANIMATIONS — applied to all pages
============================================================ */
@keyframes pageFadeUp {
from { opacity: 0; transform: translateY(22px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes pageCardIn {
from { opacity: 0; transform: translateY(16px) scale(0.97); }
to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroBadgeIn {
from { opacity: 0; transform: translateY(-10px); }
to   { opacity: 1; transform: translateY(0); }
}

.page.active .page-header,
.page.active .howto-board,
.page.active .howto-trust,
.page.active .map-hero-fg,
.page.active .risk-body,
.page.active .about-grid,
.page.active .faq-body,
.page.active .support-body,
.page.active .goals-body,
.page.active .hero,
.page.active #panel-goals {
animation: pageFadeUp 0.45s cubic-bezier(.22,.68,0,1.1) both;
}
.page.active .page-header { animation-delay: 0.02s; }
.page.active .hero        { animation-delay: 0.02s; }
.page.active .map-hero-fg { animation-delay: 0.05s; }
.page.active .howto-board { animation-delay: 0.08s; }
.page.active .howto-trust { animation-delay: 0.18s; }
.page.active .risk-body   { animation-delay: 0.06s; }
.page.active .about-grid  { animation-delay: 0.06s; }
.page.active .faq-body    { animation-delay: 0.06s; }
.page.active .support-body { animation-delay: 0.06s; }
.page.active .goals-body  { animation-delay: 0.08s; }
.page.active #panel-goals { animation-delay: 0.08s; }

/* Decision cards staggered entrance */
.page.active .decision-card {
animation: pageCardIn 0.4s cubic-bezier(.22,.68,0,1.15) both;
}
.page.active .decision-card:nth-child(1)  { animation-delay: 0.10s; }
.page.active .decision-card:nth-child(2)  { animation-delay: 0.14s; }
.page.active .decision-card:nth-child(3)  { animation-delay: 0.18s; }
.page.active .decision-card:nth-child(4)  { animation-delay: 0.22s; }
.page.active .decision-card:nth-child(5)  { animation-delay: 0.26s; }
.page.active .decision-card:nth-child(6)  { animation-delay: 0.30s; }
.page.active .decision-card:nth-child(7)  { animation-delay: 0.34s; }
.page.active .decision-card:nth-child(8)  { animation-delay: 0.38s; }
.page.active .decision-card:nth-child(9)  { animation-delay: 0.42s; }
.page.active .decision-card:nth-child(10) { animation-delay: 0.46s; }
.page.active .decision-card:nth-child(11) { animation-delay: 0.50s; }
.page.active .decision-card:nth-child(12) { animation-delay: 0.54s; }

/* FAQ items — accordion open animation kept via faqSlideDown */

/* Risk Tolerance — task-focused, no entrance animation */

/* Calc page */
.page.active .calc-header,
.page.active .calc-body {
animation: pageFadeUp 0.4s cubic-bezier(.22,.68,0,1.1) both;
}
.page.active .calc-header { animation-delay: 0.02s; }
.page.active .calc-body   { animation-delay: 0.10s; }

/* Support & About — body fades in via global .support-body / .about-grid rule */

/* Grid label */
.page.active .grid-label {
animation: heroBadgeIn 0.4s ease both;
animation-delay: 0.08s;
}

/* Hero badge */
.page.active .hero-badge {
animation: heroBadgeIn 0.35s ease both;
animation-delay: 0.0s;
}

.loading-text { font-size: 13px; font-weight: 500; color: white; }

/* ============================================================
DISCLAIMER MODAL (first-visit)
============================================================ */
#disclaimerModal {
display: none;
position: fixed; inset: 0; z-index: 9999;
background: rgba(15, 30, 20, 0.62);
align-items: center; justify-content: center;
padding: 20px;
backdrop-filter: blur(4px);
}
#disclaimerModal.open { display: flex; }
#disclaimerModal .dm-box {
background: #fff;
border-radius: 20px;
max-width: 500px; width: 100%;
padding: 36px 32px 28px;
box-shadow: 0 24px 64px rgba(0,0,0,0.22);
position: relative;
font-family: ‘Syne’, sans-serif;
}
#disclaimerModal .dm-icon {
width: 52px; height: 52px; border-radius: 14px;
background: #fef3c7; display: flex; align-items: center; justify-content: center;
font-size: 26px; margin-bottom: 18px;
}
#disclaimerModal h2 {
font-size: 20px; font-weight: 800; color: #1a2c22;
margin-bottom: 10px; line-height: 1.2;
}
#disclaimerModal .dm-body {
font-size: 13.5px; color: #444; line-height: 1.75;
margin-bottom: 20px;
}
#disclaimerModal .dm-body strong { color: #1a2c22; }
#disclaimerModal .dm-list {
background: #f8faf9; border: 1px solid #e0ede6;
border-radius: 10px; padding: 14px 16px;
margin-bottom: 20px; font-size: 13px; color: #4a6a55;
line-height: 1.9;
}
#disclaimerModal .dm-list span { display: block; }
#disclaimerModal .dm-list span::before { content: ’✓ ’; color: #4A7C59; font-weight: 700; }
#disclaimerModal .dm-accept {
width: 100%; background: #4A7C59; color: white;
border: none; border-radius: 12px; padding: 14px;
font-family: ‘Syne’, sans-serif; font-size: 15px; font-weight: 700;
cursor: pointer; transition: background 0.15s, transform 0.15s;
margin-bottom: 10px;
}
#disclaimerModal .dm-accept:hover { background: #3a6b48; transform: translateY(-1px); }
#disclaimerModal .dm-accept:disabled {
background: #b8d4c2; color: #fff; cursor: not-allowed;
transform: none; box-shadow: none; opacity: 1;
}
#disclaimerModal .dm-checkbox-label {
display: flex; align-items: flex-start; gap: 10px;
background: #f8faf9; border: 1.5px solid #c0d8c8; border-radius: 10px;
padding: 12px 14px; margin-bottom: 14px; cursor: pointer;
font-size: 13px; color: #2d4a38; line-height: 1.55;
transition: border-color 0.15s, background 0.15s;
}
#disclaimerModal .dm-checkbox-label:hover { border-color: #4A7C59; background: #eef7f1; }
#disclaimerModal .dm-checkbox-label input[type=checkbox] {
flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px;
accent-color: #4A7C59; cursor: pointer;
}
#disclaimerModal .dm-fine {
font-size: 11.5px; color: #8aaa97; text-align: center; line-height: 1.6;
}
#disclaimerModal .dm-fine a { color: #4A7C59; text-decoration: underline; cursor: pointer; }

/* ============================================================
RESULT-PAGE DISCLAIMER STRIP
============================================================ */
.result-disclaimer-strip {
background: #fffbeb; border: 1px solid #fde68a;
border-radius: 10px; padding: 10px 14px;
font-size: 12px; color: #78350f;
line-height: 1.6; margin-bottom: 18px;
display: flex; gap: 8px; align-items: flex-start;
}
.result-disclaimer-strip svg { flex-shrink: 0; margin-top: 1px; }

/* ============================================================
FOOTER LINKS
============================================================ */
footer a.footer-link {
color: rgba(255,255,255,0.65);
text-decoration: none;
transition: color 0.15s;
border-bottom: 1px solid rgba(255,255,255,0.2);
padding-bottom: 1px;
}
footer a.footer-link:hover { color: white; }

/* ============================================================
PLAN MY GOALS PAGE
============================================================ */
.goals-body {
max-width: 680px; margin: 0 auto;
padding: 40px 32px 80px;
}
.goals-intro {
background: white; border: 1px solid #c0d8c8; border-radius: 12px;
padding: 24px 28px; margin-bottom: 28px;
}
.goals-intro h3 { font-family: ‘Syne’, sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.goals-intro p { font-size: 14px; color: #6b7d74; line-height: 1.7; }

.goals-profile { margin-bottom: 28px; }
.goals-profile h3 { font-family:‘Syne’,sans-serif;font-size:15px;font-weight:700;margin-bottom:14px;color:#1a3326; }
.goals-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media(max-width:500px){ .goals-row { grid-template-columns: 1fr; } }

.goals-select-title { font-family:‘Syne’,sans-serif;font-size:15px;font-weight:700;margin-bottom:14px;color:#1a3326; }
.goals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 28px; }
@media(max-width:500px){ .goals-grid { grid-template-columns: 1fr; } }
.goal-chip {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px; background: white;
border: 2px solid #c0d8c8; border-radius: 10px;
cursor: pointer; transition: all 0.18s cubic-bezier(.22,.68,0,1.2);
font-size: 14px; font-weight: 500; color: #6b7b72;
}
.goal-chip:hover {
border-color: #4A7C59; background: #f0f9f3;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(74,124,89,0.12);
}
.goal-chip.selected {
border-color: #4A7C59; background: #d4e8da; font-weight: 600;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(74,124,89,0.15);
}
.goal-chip-icon { font-size: 20px; flex-shrink: 0; display: flex; align-items: center; width: 20px; height: 20px; pointer-events: none; color: #4A7C59; }

.goals-analyze-btn {
width: 100%; background: #4A7C59; color: white;
border: none; border-radius: 8px; padding: 14px;
font-family: ‘Syne’, sans-serif; font-size: 16px; font-weight: 700;
cursor: pointer; transition: background 0.18s, transform 0.15s, box-shadow 0.15s;
margin-bottom: 28px;
}
.goals-analyze-btn:hover {
background: #3d6b4a;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(74,124,89,0.25);
}
.goals-analyze-btn:active { transform: translateY(0); box-shadow: none; }
.goals-analyze-btn:disabled { opacity: 0.4; cursor: default; transform: none; box-shadow: none; }

.goals-result { display: none; }
.goals-result.visible { display: block; }
.goals-result.visible .goals-summary-box {
animation: pageCardIn 0.42s cubic-bezier(.22,.68,0,1.15) both;
animation-delay: 0.05s;
}
.goals-result.visible .goal-result-card {
animation: pageCardIn 0.38s cubic-bezier(.22,.68,0,1.15) both;
}
.goals-result.visible .goal-result-card:nth-child(2) { animation-delay: 0.12s; }
.goals-result.visible .goal-result-card:nth-child(3) { animation-delay: 0.18s; }
.goals-result.visible .goal-result-card:nth-child(4) { animation-delay: 0.24s; }
.goals-result.visible .goal-result-card:nth-child(5) { animation-delay: 0.30s; }
.goals-result.visible .goal-result-card:nth-child(6) { animation-delay: 0.36s; }
.goals-result.visible .goal-result-card:nth-child(7) { animation-delay: 0.42s; }
.goals-result.visible .goal-result-card:nth-child(8) { animation-delay: 0.48s; }

.goal-result-card {
background: white; border: 1px solid #c0d8c8; border-radius: 12px;
padding: 20px 22px; margin-bottom: 12px;
display: flex; align-items: flex-start; gap: 16px;
}
.goal-result-icon { font-size: 28px; flex-shrink: 0; margin-top: 2px; width: 28px; height: 28px; display: flex; align-items: center; }
.goal-result-badge {
display: inline-block; padding: 3px 10px; border-radius: 20px;
font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
margin-bottom: 6px;
}
.badge-yes { background: #EBF5FB; color: #2471a3; }
.badge-caution { background: #FEF3C7; color: #D97706; }
.badge-no { background: #F0F0F2; color: #4a5568; }
.goal-result-title { font-family:‘Syne’,sans-serif;font-size:15px;font-weight:700;margin-bottom:4px; }
.goal-result-reason { font-size:13px;color:#3a5a48;line-height:1.6; }

.goals-summary-box {
background: #1a2420; color: white; border-radius: 12px;
padding: 24px 28px; margin-bottom: 20px;
}
.goals-summary-box h4 { font-family:‘Syne’,sans-serif;font-size:18px;font-weight:800;margin-bottom:8px;color:white; }
.goals-summary-box p { font-size:14px;color:rgba(255,255,255,0.95);line-height:1.7; }
.goals-dti-bar-wrap { margin: 16px 0; }
.goals-dti-label { font-size:12px;color:rgba(255,255,255,0.6);margin-bottom:6px; }
.goals-dti-bar { height:10px;background:rgba(255,255,255,0.15);border-radius:10px;overflow:hidden; }
.goals-dti-fill { height:100%;border-radius:10px;transition:width 0.8s ease; }

/* ============================================================
HOW IT WORKS PAGE — MINIMALIST PATHWAY
============================================================ */

/* Path board */
.howto-board {
max-width: 680px; margin: 0 auto;
padding: 56px 32px 80px;
}
.howto-board-title {
text-align: center; font-family: ‘Syne’, sans-serif;
font-size: 11px; font-weight: 700; letter-spacing: 2.5px;
text-transform: uppercase; color: #4A7C59;
margin-bottom: 48px;
}

/* The minimalist pathway */
.howto-path {
display: flex; flex-direction: column;
position: relative;
}

/* Slim continuous vertical line */
.howto-path::before {
content: ‘’;
position: absolute;
left: 27px; top: 0; bottom: 0;
width: 2px;
background: linear-gradient(to bottom, #4A7C59 0%, #b8d4c2 100%);
z-index: 0;
}

/* Each step row */
.howto-step {
display: flex; align-items: flex-start; gap: 24px;
margin-bottom: 40px;
position: relative; z-index: 1;
animation: stepSlideIn 0.5s cubic-bezier(.22,.68,0,1.2) both;
}
.howto-step:last-child { margin-bottom: 0; }
.howto-step:nth-child(1) { animation-delay: 0.05s; }
.howto-step:nth-child(2) { animation-delay: 0.18s; }
.howto-step:nth-child(3) { animation-delay: 0.31s; }
.howto-step:nth-child(4) { animation-delay: 0.44s; }

@keyframes stepSlideIn {
from { opacity: 0; transform: translateY(20px); }
to   { opacity: 1; transform: translateY(0); }
}

/* Icon node on the line */
.howto-step-node {
width: 56px; height: 56px; border-radius: 50%;
background: white; border: 2px solid #d4e8da;
display: flex; align-items: center; justify-content: center;
font-size: 24px; flex-shrink: 0;
box-shadow: 0 0 0 6px white;
animation: iconPop 0.4s cubic-bezier(.34,1.56,.64,1) both;
transition: transform 0.2s, box-shadow 0.2s;
}
.howto-step-node:hover {
transform: scale(1.1);
box-shadow: 0 0 0 6px white, 0 4px 16px rgba(74,124,89,0.18);
}
@keyframes iconPop {
from { transform: scale(0.5); opacity: 0; }
to   { transform: scale(1); opacity: 1; }
}
.howto-step:nth-child(1) .howto-step-node { animation-delay: 0.1s; }
.howto-step:nth-child(2) .howto-step-node { animation-delay: 0.23s; }
.howto-step:nth-child(3) .howto-step-node { animation-delay: 0.36s; }
.howto-step:nth-child(4) .howto-step-node { animation-delay: 0.49s; }
.howto-step:nth-child(5) .howto-step-node { animation-delay: 0.62s; }

/* Step text */
.howto-step-body { flex: 1; padding-top: 10px; }
.howto-step-label {
font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
text-transform: uppercase; color: #4A7C59; margin-bottom: 4px;
}
.howto-step-title {
font-family: ‘Syne’, sans-serif; font-size: 18px; font-weight: 500;
letter-spacing: -0.3px;
color: #1a3326; margin-bottom: 6px; line-height: 1.2;
}
.howto-step-desc {
font-family: ‘Syne’, sans-serif; font-size: 14px; font-weight: 400;
color: #3a5a45; line-height: 1.7;
}
.howto-step-action {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 12px; background: none; border: none;
font-family: ‘Syne’, sans-serif; font-size: 13px; font-weight: 700;
color: #4A7C59; cursor: pointer; padding: 0;
transition: gap 0.18s, color 0.15s;
}
.howto-step-action:hover { gap: 11px; color: #2d5c3e; }

/* Verdict preview */
.howto-verdict-row {
display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.howto-verdict-chip {
padding: 4px 12px; border-radius: 20px;
font-size: 12px; font-weight: 700;
}
.howto-verdict-chip.yes  { background: #EBF5FB; color: #2471a3; }
.howto-verdict-chip.caution { background: #FEF3C7; color: #D97706; }
.howto-verdict-chip.no   { background: #F0F0F2; color: #4a5568; }

/* Social proof strip */
.howto-trust {
display: flex; gap: 20px; justify-content: center;
padding: 32px 32px 48px;
background: #f8faf9;
border-top: 1px solid #e0ede5;
flex-wrap: wrap;
}
.trust-item {
display: flex; align-items: center; gap: 8px;
font-size: 12px; color: #3a6b48; font-weight: 600;
}
.trust-icon { font-size: 15px; display: flex; align-items: center; }

@media (max-width: 600px) {
.howto-board { padding: 36px 20px 64px; }
.howto-step { gap: 16px; }
.howto-step-node { width: 44px; height: 44px; font-size: 18px; }
.howto-path::before { left: 21px; }
}

/* ============================================================
FINANCIAL WELLNESS PAGE
============================================================ */
.wellness-header { background:#fff; padding:52px 32px 28px; text-align:center; }
.wellness-header h1 { font-family:'Syne',sans-serif; font-size:38px; font-weight:400; color:#2a4a36; letter-spacing:-0.8px; line-height:1.15; }
.wellness-header p { font-size:15px; color:#7a9a87; margin-top:10px; max-width:440px; margin-left:auto; margin-right:auto; line-height:1.75; font-weight:400; }
.wellness-body { max-width:660px; margin:0 auto; padding:32px 32px 80px; }
.wellness-progress { display:flex; gap:5px; margin-bottom:36px; }
.wellness-dot { height:3px; flex:1; border-radius:6px; background:#e4efea; transition:background 0.4s ease; }
.wellness-dot.done { background:#6A9E79; }
.wellness-dot.active { background:#4A7C59; }
.wellness-q-card { background:#fafcfb; border:1px solid #e8f0eb; border-radius:16px; padding:32px 32px 28px; margin-bottom:20px; }
.wellness-q-num { font-size:11px; font-weight:500; color:#6A9E79; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:12px; }
.wellness-q-text { font-family:'Syne',sans-serif; font-size:20px; font-weight:500; line-height:1.4; color:#1e3a2a; margin-bottom:24px; }
.wellness-options { display:flex; flex-direction:column; gap:8px; }
.wellness-opt { display:flex; align-items:center; gap:14px; padding:13px 16px; border:1px solid #ddeae2; border-radius:10px; cursor:pointer; transition:all 0.16s ease; font-size:14px; line-height:1.5; color:#2c4a36; background:#fff; }
.wellness-opt:hover { border-color:#6A9E79; background:#f2f8f4; transform:translateX(2px); }
.wellness-opt.selected { border-color:#4A7C59; background:#edf7f1; }
.wellness-opt-letter { width:26px; height:26px; border-radius:50%; flex-shrink:0; background:#eaf2ec; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:500; color:#4A7C59; transition:all 0.15s; }
.wellness-opt.selected .wellness-opt-letter { background:#4A7C59; color:#fff; }
.wellness-nav { display:flex; gap:10px; margin-top:24px; }
.wellness-btn-prev { flex:1; padding:14px; border:1px solid #ddeae2; background:white; border-radius:10px; font-size:14px; font-weight:400; color:#6a8f7a; cursor:pointer; transition:all 0.15s; }
.wellness-btn-prev:hover { border-color:#4A7C59; color:#4A7C59; background:#f2f8f4; }
.wellness-btn-next { flex:2; padding:14px; background:#4A7C59; border:none; border-radius:10px; font-size:14px; font-weight:500; color:white; cursor:pointer; transition:all 0.15s; letter-spacing:0.2px; }
.wellness-btn-next:hover { background:#5a8f6a; transform:translateY(-1px); box-shadow:0 4px 14px rgba(74,124,89,0.2); }
.wellness-btn-next:disabled { opacity:0.35; cursor:default; transform:none; box-shadow:none; }
.wellness-skip-link { text-align:center; margin-top:16px; font-size:13px; color:#a0bfad; cursor:pointer; font-weight:400; }
.wellness-skip-link:hover { color:#4A7C59; }
.wellness-result { background:white; border:1px solid #c0d8c8; border-radius:12px; padding:36px; text-align:center; display:none; }
.wellness-result.visible { display:block; }
.wellness-score-ring { width:96px; height:96px; border-radius:50%; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; font-family:‘Syne’,sans-serif; font-size:28px; font-weight:800; border:4px solid; }
.wellness-score-label { font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:8px; }
.wellness-score-title { font-family:‘Syne’,sans-serif; font-size:26px; font-weight:800; margin-bottom:12px; }
.wellness-score-desc { font-size:14px; color:#444; line-height:1.7; max-width:440px; margin:0 auto 24px; }
.wellness-score-bars { display:flex; flex-direction:column; gap:10px; text-align:left; margin:24px 0; }
.wellness-bar-row { display:flex; align-items:center; gap:12px; font-size:13px; }
.wellness-bar-label { width:140px; flex-shrink:0; color:#444; }
.wellness-bar-track { flex:1; height:6px; background:#e0ede5; border-radius:4px; overflow:hidden; }
.wellness-bar-fill { height:100%; border-radius:4px; transition:width 0.6s ease; }
.wellness-cta-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
.wellness-cta-btn { padding:12px 22px; border-radius:8px; font-family:‘Syne’,sans-serif; font-size:14px; font-weight:600; cursor:pointer; transition:all 0.15s; }
.wellness-cta-primary { background:#4A7C59; color:white; border:none; }
.wellness-cta-primary:hover { background:#3a6b48; transform:translateY(-1px); }
.wellness-cta-secondary { background:white; color:#4A7C59; border:1.5px solid #c0d8c8; }
.wellness-cta-secondary:hover { border-color:#4A7C59; transform:translateY(-1px); }
.wellness-banner { display:none; background:#f0f7f3; border:1px solid #b8d4c2; border-radius:10px; padding:12px 16px; margin-bottom:16px; font-size:13px; color:#2d5c3e; line-height:1.6; }
.wellness-banner.visible { display:flex; gap:10px; align-items:flex-start; }
.wellness-banner-icon { font-size:18px; flex-shrink:0; margin-top:1px; }
@media(max-width:600px) { .wellness-body { padding:24px 16px 64px; } .wellness-header { padding:36px 20px 24px; } }

/* ── RESULT ACTION ROW ── */
#resultActionRow {
margin-top: 20px;
display: none;
flex-direction: column;
gap: 10px;
}
#resultActionRow.visible {
display: flex;
}
.export-pdf-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
background: white;
border: 1.5px solid #c8ddd0;
border-radius: 12px;
font-family: ‘Syne’, sans-serif;
font-size: 13px;
font-weight: 600;
color: #4A7C59;
cursor: pointer;
transition: all 0.18s cubic-bezier(.22,.68,0,1.2);
box-shadow: 0 1px 4px rgba(74,124,89,0.08);
width: fit-content;
}
.export-pdf-btn:hover {
background: #f0f7f3;
border-color: #4A7C59;
color: #1a3326;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(74,124,89,0.15);
}
.export-pdf-btn:active { transform: translateY(0); }

.next-goal-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 24px;
background: linear-gradient(135deg, #4A7C59 0%, #3a6b48 100%);
border: none;
border-radius: 12px;
font-family: ‘Syne’, sans-serif;
font-size: 14px;
font-weight: 700;
color: white;
cursor: pointer;
transition: all 0.2s cubic-bezier(.22,.68,0,1.2);
box-shadow: 0 2px 8px rgba(74,124,89,0.25);
width: fit-content;
}
.next-goal-btn:hover {
background: linear-gradient(135deg, #3d6b4a 0%, #2e5839 100%);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(74,124,89,0.3);
}
.next-goal-btn:active { transform: translateY(0); }

/* ============================================================
FINAL RESULTS PAGE
============================================================ */
.results-body {
max-width: 860px; margin: 0 auto; padding: 48px 32px 80px;
}
.results-section-head {
font-size: 10px; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; color: #4A7C59;
margin-bottom: 16px; margin-top: 40px;
display: flex; align-items: center; gap: 10px;
}
.results-section-head::after {
content: ‘’; flex: 1; height: 1px; background: #e0ede6;
}
.results-section-head:first-of-type { margin-top: 0; }

/* Snapshot strip */
.results-snapshot-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px; margin-bottom: 8px;
}
.results-snap-card {
background: #f4f7f5; border-radius: 14px; padding: 18px 16px 14px;
display: flex; flex-direction: column; gap: 4px;
}
.results-snap-val {
font-family: ‘Syne’, sans-serif; font-size: 26px; font-weight: 500;
color: #1a2420; letter-spacing: -0.5px; line-height: 1.1;
}
.results-snap-label { font-size: 11px; color: #9bb5a7; font-weight: 500; }
.results-snap-sub { font-size: 11px; color: #b0c8bb; }

/* Cashflow Statement */
.cashflow-card {
background: white; border: 1px solid #e0ede6; border-radius: 16px;
overflow: hidden; margin-bottom: 8px;
}
.cashflow-table {
width: 100%; border-collapse: collapse; font-size: 13px;
table-layout: fixed;
}
.cashflow-table th:first-child,
.cashflow-table td:first-child { width: 68%; }
.cashflow-table th:last-child,
.cashflow-table td:last-child { width: 32%; white-space: nowrap; }
.cashflow-table th {
background: #f4f7f5; padding: 10px 18px;
font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
text-transform: uppercase; color: #7a9e87; text-align: left;
}
.cashflow-table th:last-child { text-align: right; }
.cashflow-table td { padding: 10px 18px; color: #1a2420; border-top: 1px solid #f0f7f3; }
.cashflow-table td:last-child { text-align: right; font-weight: 600; font-family: ‘Syne’, sans-serif; }
.cashflow-table tr.cashflow-subtotal td {
background: #f8fdf9; font-weight: 700; color: #2d5c3e;
border-top: 1px solid #d4e8da;
}
.cashflow-table tr.cashflow-subtotal td:last-child { font-size: 15px; }
.cashflow-table tr.cashflow-total td {
background: #e6f0ea; color: #1a3326; font-weight: 700;
border-top: 2px solid #b8d4c2;
}
.cashflow-table tr.cashflow-total td:last-child { font-size: 16px; }
.cashflow-table tr.cashflow-total td.accounting-total {
border-bottom: 3px double #4A7C59;
padding-bottom: 4px;
}
.cashflow-table tr.cashflow-outflow td:last-child { color: #C0392B; }
.cashflow-table tr.cashflow-section-head td {
background: #f4f7f5; font-size: 10px; font-weight: 700;
letter-spacing: 1px; text-transform: uppercase; color: #9bb5a7;
padding: 8px 18px; border-top: 1px solid #e0ede6;
}
.cashflow-note { font-size: 11px; color: #9bb5a7; padding: 10px 18px; border-top: 1px solid #f0f7f3; font-style: italic; }

/* Wellness & risk row */
.results-wellness-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px;
}
@media(max-width:600px){ .results-wellness-row { grid-template-columns: 1fr; } }
.results-wellness-card {
background: white; border: 1px solid #e0ede6; border-radius: 14px;
padding: 20px 22px; display: flex; align-items: center; gap: 16px;
}
.results-wellness-ring {
width: 64px; height: 64px; border-radius: 50%;
border: 4px solid; display: flex; align-items: center; justify-content: center;
font-family: ‘Syne’, sans-serif; font-size: 18px; font-weight: 800;
flex-shrink: 0;
}
.results-wellness-info { flex: 1; }
.results-wellness-title { font-family: ‘Syne’, sans-serif; font-size: 15px; font-weight: 700; }
.results-wellness-sub { font-size: 12px; color: #7a9889; margin-top: 2px; }
.results-risk-badge {
display: inline-block; padding: 4px 12px; border-radius: 20px;
font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
text-transform: uppercase; background: #d4e8da; color: #2d5c3e;
margin-bottom: 6px;
}
.results-risk-name { font-family: ‘Syne’, sans-serif; font-size: 16px; font-weight: 800; }
.results-risk-desc { font-size: 12px; color: #556a5e; margin-top: 4px; line-height: 1.55; }

/* Goal summary cards */
.results-goal-card {
background: white; border: 1.5px solid #e0ede6; border-radius: 14px;
padding: 20px 22px; margin-bottom: 10px;
display: flex; align-items: flex-start; gap: 14px;
}
.results-goal-verdict-dot {
width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
}
.results-goal-info { flex: 1; }
.results-goal-title { font-family: ‘Syne’, sans-serif; font-size: 16px; font-weight: 700; color: #0d1814; }
.results-goal-verdict { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-top: 2px; }
.results-goal-summary { font-size: 13px; color: #2a4035; line-height: 1.6; margin-top: 6px; font-family: ‘Syne’, sans-serif; }
.results-goal-metrics {
display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.results-goal-metric {
background: #f4f7f5; border-radius: 8px; padding: 6px 12px;
font-size: 12px; color: #2a3f30; font-family: ‘Syne’, sans-serif;
}
.results-goal-metric span { font-weight: 700; color: #1a2420; }

/* Alternatives section */
.results-alts-card {
background: linear-gradient(135deg, #f0f9f4 0%, #e8f4ec 100%);
border: 1px solid #c8e8d4; border-radius: 14px; padding: 20px 22px; margin-bottom: 10px;
}
.results-alts-goal-label { font-size: 11px; font-weight: 700; color: #4A7C59; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 10px; }
.results-alt-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #c8e8d4; font-size: 13px; line-height: 1.65; color: #1a2c22; font-family: ‘Syne’, sans-serif; }
.results-alt-item:last-child { border-bottom: none; padding-bottom: 0; }

/* Next steps section */
.results-nextsteps-card {
background: white; border: 1px solid #e0ede6; border-radius: 14px;
padding: 20px 22px; margin-bottom: 10px;
}
.results-nextsteps-goal-label { font-size: 11px; font-weight: 700; color: #4A7C59; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 12px; }
.results-step-row { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #f0f7f3; }
.results-step-row:last-child { border-bottom: none; padding-bottom: 0; }
.results-step-icon { flex-shrink: 0; margin-top: 1px; width: 20px; height: 20px; display: flex; align-items: center; }
.results-step-body { flex: 1; }
.results-step-title { font-family: ‘Syne’, sans-serif; font-size: 13px; font-weight: 700; color: #1a2420; }
.results-step-detail { font-size: 12px; color: #4a6b5a; line-height: 1.55; margin-top: 2px; font-family: ‘Syne’, sans-serif; }

/* CTA row */
.results-cta-row {
display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px;
padding-top: 28px; border-top: 1px solid #e0ede6; justify-content: center;
}
.results-cta-primary {
display: inline-flex; align-items: center; gap: 8px;
background: linear-gradient(135deg, #4A7C59 0%, #3a6b48 100%);
color: white; border: none; border-radius: 12px;
padding: 14px 28px; font-family: ‘Syne’, sans-serif;
font-size: 14px; font-weight: 700; cursor: pointer;
transition: all 0.2s cubic-bezier(.22,.68,0,1.2);
box-shadow: 0 2px 10px rgba(74,124,89,0.28);
}
.results-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(74,124,89,0.35); }
.results-cta-secondary {
display: inline-flex; align-items: center; gap: 8px;
background: white; color: #4A7C59;
border: 1.5px solid #c8ddd0; border-radius: 12px;
padding: 13px 24px; font-family: ‘Syne’, sans-serif;
font-size: 14px; font-weight: 600; cursor: pointer;
transition: all 0.18s cubic-bezier(.22,.68,0,1.2);
}
.results-cta-secondary:hover { border-color: #4A7C59; transform: translateY(-1px); }

@media(max-width:640px) {
.results-body { padding: 32px 16px 64px; }
}

/* ── MOBILE FORM IMPROVEMENTS ── */
@media (max-width: 480px) {
/* ── INPUTS: prevent iOS zoom (font-size must be ≥16px on focus) ── */
.form-group input,
.planner-input-wrap input,
.rg-planner-input-wrap input,
input[type=text],
input[type=number] {
font-size: 16px !important;
}
.form-group input { padding: 14px !important; min-height: 48px; }
.profile-input-card .currency-wrap input { font-size: 22px !important; }

/* ── TOUCH TARGETS ── */
.analyze-btn   { padding: 17px !important; font-size: 16px !important; min-height: 52px; }
.calc-back     { padding: 8px 0; min-height: 44px; font-size: 13px; }
.phil-btn      { padding: 9px 16px; min-height: 40px; font-size: 13px; }
.life-pill     { padding: 9px 16px; min-height: 40px; }
.risk-option   { padding: 16px 14px; }
.wellness-opt  { padding: 16px 14px; }
.risk-btn-prev, .risk-btn-next,
.wellness-btn-prev, .wellness-btn-next { padding: 15px !important; min-height: 50px; }
.faq-q         { padding: 18px 16px; }

/* ── RANGE SLIDERS: bigger thumb for fat fingers ── */
input[type=range] { height: 8px; }
input[type=range]::-webkit-slider-thumb { width: 28px; height: 28px; }
input[type=range]::-moz-range-thumb     { width: 28px; height: 28px; }
.currency-wrap .currency-prefix { font-size: 15px; }
}

/* ── COMPREHENSIVE MOBILE LAYOUT ── */
@media (max-width: 640px) {
/* — Page headers — */
.page-header { padding: 32px 20px 24px !important; }
.page-header h1 { font-size: 26px !important; letter-spacing: -0.2px; }
.page-header p  { font-size: 14px; }

/* — Wellness header — */
.wellness-header { padding: 32px 20px 24px !important; }
.wellness-header h1 { font-size: 26px !important; }
.wellness-body  { padding: 20px 16px 64px !important; }

/* — Risk page — */
.risk-body { padding: 28px 16px 64px !important; }
.risk-question-card { padding: 22px 18px !important; }
.risk-q-text { font-size: 18px !important; }
.risk-result-card { padding: 24px 18px !important; }
.risk-profile-title { font-size: 26px !important; }

/* — Calc page — */
.calc-header  { padding: 24px 16px 20px !important; }
.calc-title   { font-size: 22px !important; }
.calc-subtitle { font-size: 13px; }
.calc-body    { padding: 20px 16px !important; gap: 28px; }
.form-section h3 { font-size: 14px; margin-bottom: 16px; }
.form-group   { margin-bottom: 14px; }

/* — Result panel (stacks below inputs on mobile) — */
.result-section { position: static !important; top: auto !important; }
.verdict-box    { padding: 18px 16px 16px !important; }
.verdict-title  { font-size: 18px !important; }
.verdict-sub    { font-size: 13px; }
#metricsBox { grid-template-columns: 1fr 1fr !important; }
.metric-value { font-size: 18px !important; }
.metric-row { padding: 12px 12px 10px !important; }
.alternatives-box { padding: 18px 16px !important; }

/* — Action row buttons: stack, full-width on mobile — */
#resultActionRow { flex-direction: column !important; }
.export-pdf-btn, .next-goal-btn {
width: 100% !important;
justify-content: center;
}

/* — Calc explainer — */
.calc-explain-toggle { padding: 14px !important; }
.calc-explain-body   { padding: 0 12px 16px !important; }
.calc-explain-glossary-item { grid-template-columns: 1fr; gap: 3px; }

/* — Goals page — */
.goals-body   { padding: 20px 16px 64px !important; }
.goals-intro  { padding: 18px 16px !important; }
.goals-intro h3 { font-size: 16px; }

/* — FAQ & Support — */
.faq-body     { padding: 24px 16px 64px !important; }
.faq-q        { font-size: 14px !important; }
.support-body { padding: 32px 16px 64px !important; }
.support-title { font-size: 28px !important; }
.support-subtitle { font-size: 14px; }

/* — About — */
.about-grid   { padding: 28px 16px 64px !important; }
.creator-card { padding: 22px 18px !important; }

/* — Disclaimer modal: don’t let it overflow tiny screens — */
#disclaimerModal .dm-box {
padding: 24px 20px 20px !important;
border-radius: 16px;
max-height: 90vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#disclaimerModal h2 { font-size: 18px !important; }
#disclaimerModal .dm-body { font-size: 13px; }

/* — Final results page — */
.results-body { padding: 24px 16px 64px !important; }
.results-snap-val { font-size: 22px !important; }
.results-wellness-ring { width: 52px !important; height: 52px !important; font-size: 15px !important; }
.results-goal-card { padding: 16px 14px !important; gap: 10px; }
.results-goal-title { font-size: 14px; }
.results-cta-row { flex-direction: column; }
.results-cta-primary, .results-cta-secondary { width: 100%; justify-content: center; }
.cashflow-table td, .cashflow-table th { padding: 9px 12px !important; font-size: 12px; }

/* — Wellness score bars: label was fixed 140px, shrinks to auto — */
.wellness-bar-label { width: auto !important; min-width: 90px; font-size: 12px; }

/* — How It Works trust strip — */
.howto-trust { padding: 24px 16px 40px !important; gap: 14px; }

/* — Footer: readable on narrow screens — */
footer { padding: 20px 16px !important; font-size: 11px; line-height: 1.7; }

/* — Map-hero: prevent 5-bubble row from overflowing — */
.map-icon-bubble { width: 44px !important; height: 44px !important; font-size: 18px !important; }
.map-arrow { padding: 0 1px !important; }
.map-arrow svg { width: 12px !important; height: 12px !important; }
.map-hero-title { font-size: 20px !important; margin-bottom: 20px !important; }
.map-step-label { display: none; } /* hide text labels under icons at this width */

/* — Snapshot grid: use 2 columns at narrow width — */
.results-snapshot-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── VERY SMALL SCREENS (iPhone SE, 375px) ── */
@media (max-width: 390px) {
.map-icon-bubble { width: 38px !important; height: 38px !important; font-size: 15px !important; }
.map-arrow { padding: 0 !important; }
.map-arrow svg { width: 10px !important; height: 10px !important; }
.hero h1 { font-size: 26px !important; }
.decision-grid { gap: 8px !important; }
.decision-card { padding: 18px 16px !important; }
.card-title { font-size: 16px !important; }
.results-snapshot-grid { grid-template-columns: 1fr !important; }
#metricsBox { grid-template-columns: 1fr !important; }
.phil-options { gap: 4px; }
.phil-btn { font-size: 11px !important; padding: 7px 11px !important; }
}

/* ── PRINT / PDF STYLES ── */
@media print {
nav, .api-banner, .nav-mobile-menu, footer,
.analyze-btn, .export-pdf-btn, .calc-back,
.phil-options, .philosophy-select,
.howto-trust, .disclaimer-bar,
.page:not(.active) { display: none !important; }

body { background: #fff !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.page { display: block !important; padding-top: 0 !important; min-height: unset; }
.calc-body { grid-template-columns: 1fr !important; }
.form-section:first-child { display: none; }

/* Print header */
.result-section::before {
content: ‘Hodos — Financial Decision Report’;
display: block;
font-family: ‘Syne’, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #4A7C59;
margin-bottom: 20px;
}

.verdict-box { border-radius: 8px !important; }
.metric-row { break-inside: avoid; border-radius: 8px !important; }
#metricsBox { grid-template-columns: repeat(3, 1fr) !important; }
.disclaimer-inline { font-size: 10px !important; margin-top: 24px; }
}

.skip-link {
  position: absolute; top: -48px; left: 8px; z-index: 9999;
  background: #1a3326; color: white; padding: 10px 18px;
  border-radius: 0 0 8px 8px; font-family: 'Syne', sans-serif;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus { top: 0; }
@media (max-width: 800px) {
  .howto-board > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .howto-board > div[style*="grid-template-columns"] > div:last-child {
    position: static !important;
  }
}
/* ============================================================
   TREASURE MAP / BOARD GAME HERO
   ============================================================ */
/* ============================================================
   ROADMAP HERO — full-bleed, animated SVG background
   ============================================================ */
.map-hero {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 32px 52px;
  background: #ffffff;
  border-bottom: 1px solid #e0ede5;
}

/* Animated SVG roadmap in the background */
.map-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.18;
}

/* Foreground content sits above the SVG */
.map-hero-fg {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
}

.map-hero-label {
  font-size: 10px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: #4A7C59;
  margin-bottom: 10px;
}

.map-hero-title {
  font-family: 'Syne', sans-serif; font-size: 36px;
  font-weight: 800; color: #000; line-height: 1.15;
  letter-spacing: -0.3px; margin-bottom: 40px;
}

/* Icon-only step row */
.map-path {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.map-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  animation: mapStepIn 0.55s cubic-bezier(.22,.68,0,1.2) both;
}
.map-step:nth-child(1) { animation-delay: 0.05s; }
.map-step:nth-child(3) { animation-delay: 0.18s; }
.map-step:nth-child(5) { animation-delay: 0.31s; }
.map-step:nth-child(7) { animation-delay: 0.44s; }
.map-step:nth-child(9) { animation-delay: 0.57s; }

@keyframes mapStepIn {
  from { opacity: 0; transform: translateY(20px) scale(0.88); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Icon bubble */
.map-icon-bubble {
  width: 72px; height: 72px;
  background: white;
  border: 2px solid #d4e8da;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  box-shadow: 0 4px 20px rgba(74,124,89,0.10);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.map-icon-bubble:hover {
  transform: translateY(-6px) scale(1.08);
  border-color: #4A7C59;
  box-shadow: 0 10px 32px rgba(74,124,89,0.22);
}
.map-step:nth-child(1) .map-icon-bubble { border-color: #4A7C59; }
.map-step:nth-child(3) .map-icon-bubble { border-color: #4A7C59; }
.map-step:nth-child(5) .map-icon-bubble { border-color: #4A7C59; }
.map-step:nth-child(7) .map-icon-bubble { border-color: #4A7C59; }
.map-step:nth-child(9) .map-icon-bubble { border-color: #4A7C59; }
.map-arrow {
  flex: 0 0 auto;
  display: flex; align-items: center;
  padding: 0 8px;
  color: #b8d4c2;
  opacity: 0.6;
}
.map-arrow svg { width: 24px; height: 24px; }

@media (max-width: 640px) {
  .map-hero { padding: 32px 16px 36px; min-height: auto; }
  .map-icon-bubble { width: 52px; height: 52px; font-size: 20px; }
  .map-arrow svg { width: 16px; height: 16px; }
  .map-arrow { padding: 0 2px; }
  .map-hero-title { font-size: 24px; margin-bottom: 24px; line-height: 1.2; }
  /* Collapse the two-column howto layout to single column */
  .howto-board { padding: 32px 16px 56px !important; }
  .howto-col-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }
  /* Un-sticky the right demo cards column */
  .howto-col-right {
    position: static !important;
    top: auto !important;
  }
}

/* Start Now button — desktop/mobile visibility */
.start-now-mobile { display: none; }
.start-now-desktop { display: block; }
@media (max-width: 768px) {
  .start-now-desktop { display: none; }
  .start-now-mobile { display: block; }
}

/* ================================================================
   GOAL DETAIL PAGE — VISUAL IMPROVEMENTS
   ================================================================ */

/* Header: cleaner, more centered feel */
.calc-header {
  background: linear-gradient(160deg, #f6fbf8 0%, #ffffff 100%) !important;
  border-bottom: 1px solid #e0ede6;
  text-align: center;
  padding: 48px 40px 36px !important;
}

.calc-back {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4A7C59 !important;
  letter-spacing: 0.1px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid #c8ddd0 !important;
  background: white !important;
  transition: all 0.15s !important;
}
.calc-back:hover {
  background: #f0f9f3 !important;
  border-color: #4A7C59 !important;
}

.calc-title {
  font-size: 30px !important;
  font-weight: 700 !important;
  margin-top: 16px;
}

.calc-subtitle {
  font-size: 14px !important;
  color: #7a9a85 !important;
  margin-top: 6px !important;
}

/* Goal progress bar pill */
#goalProgressBar {
  background: linear-gradient(135deg, #f0f9f3, #e8f4ec) !important;
  border: 1.5px solid #b8d4c2 !important;
  border-radius: 14px !important;
  padding: 14px 20px !important;
  max-width: 480px;
  margin: 16px auto 0 !important;
}

/* Body: single column, centered, wider */
.calc-body {
  max-width: 600px !important;
  margin: 0 auto !important;
  padding: 40px 32px !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

/* Your Numbers heading */
.form-section h3 {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #9bb5a7 !important;
  margin-bottom: 18px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* Input cards: bigger, more polished */
.planner-input-card {
  background: white !important;
  border: 1.5px solid #d4e8da !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  box-shadow: 0 2px 8px rgba(74,124,89,0.06) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.planner-input-card:focus-within {
  border-color: #4A7C59 !important;
  box-shadow: 0 0 0 3px rgba(74,124,89,0.12) !important;
}

.profile-input-card {
  border-radius: 16px !important;
  padding: 16px 20px !important;
  box-shadow: 0 2px 8px rgba(74,124,89,0.06) !important;
}

/* Slider section spacing */
.slider-group {
  background: white;
  border: 1.5px solid #d4e8da;
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 8px rgba(74,124,89,0.06);
}

/* Risk tolerance section */
.philosophy-select {
  background: white;
  border: 1.5px solid #d4e8da;
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 24px !important;
  box-shadow: 0 2px 8px rgba(74,124,89,0.06);
}

.phil-options {
  gap: 8px !important;
  margin-top: 10px;
}

.phil-btn {
  padding: 8px 16px !important;
  font-size: 13px !important;
  border-radius: 22px !important;
  font-weight: 600 !important;
}

/* Get My Answer button */
.analyze-btn {
  border-radius: 14px !important;
  padding: 16px !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
  box-shadow: 0 4px 18px rgba(74,124,89,0.25) !important;
}

@media (max-width: 680px) {
  .calc-body { padding: 24px 16px !important; }
  .calc-header { padding: 32px 16px 24px !important; }
}