/* ===================================================================
   RETIREMENT PLAN — "แก่ตัวไป มีเงินใช้เท่าไหร่ดี?"
   Page-scoped styles. Loaded AFTER /styles.min.css so it inherits the
   WealthBuddy design tokens (:root) and only overrides what it needs.
   Scope: body.retirement-page
   =================================================================== */

body.retirement-page {
  /* page tokens */
  --rp-bg: #f4f9fe;
  --rp-card: #ffffff;
  --rp-border: #dbe6f4;
  --rp-border-strong: #c3d7ef;
  --rp-ink: #0b367b;
  --rp-body: #3c4a63;
  --rp-muted: #64769a;
  --rp-accent: #1d57b8;
  --rp-accent-soft: #e8f2fd;
  --rp-good: #2b8534;
  --rp-good-soft: #ebf6e8;
  --rp-warn: #b4562f;
  --rp-warn-soft: #fdf1e9;

  /* 8px spacing scale */
  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --s6: 48px;
  --s7: 64px;

  --rp-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rp-dur: 0.42s;

  --bar-h: 0px;
  padding-bottom: 0;
  background: var(--rp-bg);
  color: var(--rp-body);
  font-family: var(--font, 'Sarabun', sans-serif);
}

body.retirement-page *,
body.retirement-page *::before,
body.retirement-page *::after {
  box-sizing: border-box;
}

.rp-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px;
}

.rp-main {
  padding: var(--s5) 0 var(--s7);
}

/* ---------- HERO ---------------------------------------------------- */

.rp-hero {
  margin-bottom: var(--s6);
}

.rp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--rp-accent);
  background: var(--rp-accent-soft);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: var(--s3);
}

.rp-title {
  font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.6rem);
  line-height: 1.25;
  font-weight: 800;
  color: var(--rp-ink);
  margin: 0 0 var(--s3);
  letter-spacing: -0.01em;
}

.rp-lede {
  max-width: 620px;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--rp-body);
  margin: 0;
}

.rp-hero-rule {
  height: 3px;
  width: 72px;
  margin-top: var(--s4);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rp-accent), #7cbdf1);
}

/* ---------- SECTION HEADINGS ---------------------------------------- */

.rp-section {
  margin-bottom: var(--s6);
}

.rp-section-head {
  margin-bottom: var(--s4);
}

.rp-step-tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rp-muted);
  margin-bottom: var(--s2);
}

.rp-section-head h2 {
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--rp-ink);
  margin: 0 0 var(--s2);
  line-height: 1.4;
}

.rp-section-head p {
  max-width: 620px;
  margin: 0;
  font-size: 0.94rem;
  color: var(--rp-muted);
  line-height: 1.75;
}

/* ---------- STEP 1 · INPUT CARDS (ข้อ 1–4) ---------------------------- */

/* friendly permission line + progress, sits above the cards */
.rp-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.rp-invite-hint {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--s2);
  padding: 11px 16px;
  font-size: 0.87rem;
  font-weight: 500;
  line-height: 1.65;
  color: #4a6a52;
  background: var(--rp-good-soft);
  border-radius: 14px;
}

@media (min-width: 40rem) {
  .rp-invite-hint {
    align-items: center;
    border-radius: 999px;
  }
}

.rp-invite-hint svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--rp-good);
}

@media (min-width: 40rem) {
  .rp-invite-hint svg {
    margin-top: 0;
  }
}

.rp-progress {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rp-muted);
  white-space: nowrap;
}

.rp-dots {
  display: inline-flex;
  gap: 5px;
}

.rp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cfdcee;
  transition: background 0.32s var(--rp-ease), transform 0.32s var(--rp-ease);
}

.rp-dot.is-on {
  background: var(--rp-accent);
  transform: scale(1.18);
}

/* the grid */
.rp-input-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
}

@media (min-width: 40rem) {
  .rp-input-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
  }
}

/* the card */
.rp-field {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s4);
  background:
    linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  border: 1px solid var(--rp-border);
  border-radius: 22px;
  box-shadow: 0 2px 10px rgba(11, 54, 123, 0.04);
  transition: border-color 0.34s var(--rp-ease),
              box-shadow 0.34s var(--rp-ease),
              transform 0.34s var(--rp-ease);
}

@media (min-width: 60rem) {
  .rp-field:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(11, 54, 123, 0.08);
  }
}

.rp-field:focus-within {
  border-color: var(--rp-accent);
  box-shadow: 0 0 0 4px rgba(29, 87, 184, 0.09),
              0 10px 28px rgba(11, 54, 123, 0.08);
}

.rp-field.is-filled {
  border-color: #bcd9c4;
  background: linear-gradient(180deg, #ffffff 0%, #f7fcf6 100%);
}

/* header row: number · question · icon */
.rp-field-top {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.rp-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--rp-accent-soft);
  color: var(--rp-accent);
  font-size: 0.86rem;
  font-weight: 700;
  transition: background 0.34s var(--rp-ease), color 0.34s var(--rp-ease);
}

.rp-field.is-filled .rp-num {
  background: var(--rp-good);
  color: #fff;
}

.rp-field-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.rp-field-title {
  display: block;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--rp-ink);
  line-height: 1.5;
  cursor: pointer;
}

.rp-field-note {
  display: block;
  margin-top: 5px;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--rp-muted);
}

.rp-field-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: #b7cbe6;
  opacity: 0.85;
  transition: color 0.34s var(--rp-ease);
}

.rp-field.is-filled .rp-field-icon {
  color: #9ec9a6;
}

/* the money card reads as the odd one out — on purpose */
.rp-field[data-field="monthly"] .rp-num {
  background: var(--rp-good-soft);
  color: var(--rp-good);
}

/* input row: −  [ input ]  + */
.rp-input-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: auto;
}

.rp-step {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  color: var(--rp-accent);
  background: #f2f7fd;
  border: 1px solid var(--rp-border);
  border-radius: 14px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background 0.18s var(--rp-ease), transform 0.18s var(--rp-ease),
              border-color 0.18s var(--rp-ease);
}

.rp-step:hover {
  background: var(--rp-accent-soft);
  border-color: var(--rp-border-strong);
}

.rp-step:active {
  transform: scale(0.93);
}

.rp-step svg {
  width: 16px;
  height: 16px;
}

.rp-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

/* Mobile-first: the number starts at the left edge so it can never be
   clipped behind the unit on a narrow phone. Wider screens get the
   nicer centred treatment between the two steppers. */
.rp-input {
  width: 100%;
  min-height: 54px;
  padding: 12px 52px 12px 16px;
  font-family: inherit;
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--rp-ink);
  text-align: left;
  background: #fbfdff;
  border: 1.5px solid var(--rp-border);
  border-radius: 14px;
  outline: none;
  transition: border-color 0.18s var(--rp-ease), background 0.18s var(--rp-ease);
  -moz-appearance: textfield;
  appearance: textfield;
}

@media (min-width: 40rem) {
  .rp-input {
    min-height: 56px;
    padding: 12px 62px;
    font-size: 1.3rem;
    text-align: center;
  }
}

.rp-input::-webkit-outer-spin-button,
.rp-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.rp-input:focus {
  border-color: var(--rp-accent);
  background: #fff;
}

.rp-input::placeholder {
  color: #b9c5d9;
  font-weight: 500;
}

.rp-unit {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--rp-muted);
  pointer-events: none;
}

/* quick-pick chips — one swipeable row on phones, wrapped on desktop */
.rp-chips {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s3);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.rp-chips::-webkit-scrollbar {
  display: none;
}

@media (min-width: 40rem) {
  .rp-chips {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.rp-chip {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--rp-body);
  background: #f4f8fd;
  border: 1px solid var(--rp-border);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s var(--rp-ease), background 0.18s var(--rp-ease),
              color 0.18s var(--rp-ease), border-color 0.18s var(--rp-ease);
}

.rp-chip:hover {
  background: var(--rp-accent-soft);
  border-color: var(--rp-border-strong);
}

.rp-chip:active {
  transform: scale(0.96);
}

.rp-chip.is-active {
  background: var(--rp-accent);
  border-color: var(--rp-accent);
  color: #fff;
}

.rp-field[data-field="monthly"] .rp-chip.is-active {
  background: var(--rp-good);
  border-color: var(--rp-good);
}

/* live echo — a small "อ๋อ" the moment an answer makes sense */
/* Space is reserved whether or not there's a message, so the card never
   jumps when an echo appears — nothing is more unsettling than a layout
   that moves under your thumb mid-tap. */
.rp-echo {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-height: 23px;
  margin: var(--s3) 0 0;
  font-size: 0.87rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--rp-good);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.36s var(--rp-ease), transform 0.36s var(--rp-ease);
}

.rp-echo::before {
  content: "→";
  flex: 0 0 auto;
  opacity: 0.65;
}

.rp-echo.is-on {
  opacity: 1;
  transform: none;
}

.rp-error {
  display: none;
  margin: var(--s3) 0 0;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--rp-warn);
  line-height: 1.6;
}

.rp-field.has-error {
  border-color: #e2b39c;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf7 100%);
}

.rp-field.has-error .rp-input {
  border-color: #d98a6a;
}

.rp-field.has-error .rp-num {
  background: var(--rp-warn-soft);
  color: var(--rp-warn);
}

.rp-field.has-error .rp-error {
  display: block;
}

.rp-field.has-error .rp-echo {
  display: none;
}

/* phone-only shortcut down to the answer, once all four are in */
.rp-jump {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  min-height: 52px;
  margin-top: var(--s4);
  padding: 12px 20px;
  font-family: inherit;
  font-size: 0.96rem;
  font-weight: 600;
  color: #fff;
  background: var(--rp-accent);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(29, 87, 184, 0.22);
}

.rp-jump svg {
  width: 17px;
  height: 17px;
}

.rp-jump.is-on {
  display: flex;
}

@media (min-width: 40rem) {
  .rp-jump.is-on {
    display: none;
  }
}

/* ---------- CALC LADDER (ข้อ 5–9) ------------------------------------ */

.rp-ladder {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rp-ladder::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--rp-border);
  border-radius: 2px;
}

.rp-rung {
  position: relative;
  display: flex;
  gap: var(--s3);
  padding: 0 0 var(--s4) 0;
}

.rp-rung:last-child {
  padding-bottom: 0;
}

.rp-rung-num {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--rp-border);
  color: var(--rp-muted);
  font-size: 0.9rem;
  font-weight: 700;
  transition: border-color var(--rp-dur) var(--rp-ease),
              color var(--rp-dur) var(--rp-ease),
              background var(--rp-dur) var(--rp-ease);
}

.rp-rung-body {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 2px;
}

.rp-rung-title {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--rp-ink);
  line-height: 1.6;
  margin: 0 0 var(--s2);
}

.rp-rung-math {
  display: block;
  font-family: var(--font-en, 'Inter', sans-serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--rp-muted);
  letter-spacing: 0.01em;
  line-height: 1.7;
  word-break: break-word;
}

.rp-rung-math .rp-eq {
  color: var(--rp-ink);
  font-weight: 700;
}

.rp-rung-math .rp-op {
  color: #9aa9c4;
  padding: 0 2px;
}

.rp-rung-unit {
  font-family: var(--font, 'Sarabun', sans-serif);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--rp-muted);
  margin-left: 4px;
}

/* filled state */
.rp-rung.is-ready .rp-rung-num {
  border-color: var(--rp-accent);
  background: var(--rp-accent);
  color: #fff;
}

.rp-rung.is-ready .rp-rung-math {
  color: var(--rp-body);
}

/* waiting state */
.rp-ladder.is-waiting {
  opacity: 0.55;
}

.rp-waiting-note {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s4);
  padding: 12px 16px;
  font-size: 0.9rem;
  color: var(--rp-muted);
  background: #eef4fb;
  border-radius: 12px;
  line-height: 1.6;
}

.rp-waiting-note[hidden] {
  display: none;
}

/* ---------- WALK MODE · "ดูทีละขั้น" ---------------------------------- */
/* Built for a table with two people at it: one step lit at a time, big
   enough to read across a desk, advanced by tap or arrow key. */

.rp-walk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s4);
}

.rp-walk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 46px;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--rp-accent);
  background: #fff;
  border: 1px solid var(--rp-border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s var(--rp-ease), transform 0.18s var(--rp-ease),
              border-color 0.18s var(--rp-ease), opacity 0.18s var(--rp-ease);
}

.rp-walk-btn svg {
  width: 16px;
  height: 16px;
}

.rp-walk-btn:hover {
  background: var(--rp-accent-soft);
  border-color: var(--rp-accent);
}

.rp-walk-btn:active {
  transform: scale(0.98);
}

.rp-walk-btn.is-primary {
  background: var(--rp-accent);
  border-color: var(--rp-accent);
  color: #fff;
}

.rp-walk-btn.is-primary:hover {
  background: #164fa8;
}

.rp-walk-btn[disabled] {
  opacity: 0.4;
  cursor: default;
}

.rp-walk-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  width: 100%;
}

.rp-walk-count {
  flex: 1 1 auto;
  min-width: 92px;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--rp-accent);
}

.rp-walk-hint {
  font-size: 0.83rem;
  color: var(--rp-muted);
  line-height: 1.6;
}

@media (max-width: 39.99rem) {
  .rp-walk-hint {
    display: none;
  }
}

[hidden] {
  display: none !important;
}

/* dim what isn't being talked about */
.rp-ladder.is-walking .rp-rung {
  transition: opacity 0.42s var(--rp-ease);
}

.rp-ladder.is-walking .rp-rung.is-future {
  opacity: 0.26;
}

.rp-ladder.is-walking .rp-rung.is-past {
  opacity: 0.5;
}

.rp-ladder.is-walking .rp-rung.is-active {
  opacity: 1;
}

/* the lit step */
.rp-ladder.is-walking .rp-rung.is-active .rp-rung-body {
  padding: var(--s3) var(--s4);
  margin-top: -6px;
  background: #fff;
  border: 1px solid var(--rp-border-strong);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(11, 54, 123, 0.1);
}

.rp-ladder.is-walking .rp-rung.is-active .rp-rung-title {
  font-size: 1.04rem;
  color: var(--rp-accent);
}

.rp-ladder.is-walking .rp-rung.is-active .rp-rung-math {
  font-size: clamp(1.24rem, 1rem + 1.6vw, 1.56rem);
  line-height: 1.75;
}

.rp-ladder.is-walking .rp-rung.is-active .rp-rung-num {
  transform: scale(1.14);
  box-shadow: 0 0 0 5px rgba(29, 87, 184, 0.12);
}

.rp-rung-num {
  transition: transform 0.42s var(--rp-ease), box-shadow 0.42s var(--rp-ease),
              border-color var(--rp-dur) var(--rp-ease),
              color var(--rp-dur) var(--rp-ease),
              background var(--rp-dur) var(--rp-ease);
}

/* ---------- RESULT --------------------------------------------------- */

.rp-result {
  background: linear-gradient(160deg, #17418f 0%, #1d57b8 100%);
  border-radius: 24px;
  padding: var(--s5) var(--s4);
  color: #fff;
  text-align: center;
  box-shadow: 0 18px 44px rgba(11, 54, 123, 0.22);
}

@media (min-width: 40rem) {
  .rp-result {
    padding: var(--s6) var(--s5);
  }
}

.rp-result-label {
  font-size: 0.94rem;
  font-weight: 600;
  color: #c9dcf7;
  margin: 0 0 var(--s2);
  letter-spacing: 0.02em;
}

.rp-result-value {
  font-family: var(--font-en, 'Inter', sans-serif);
  font-size: clamp(2.3rem, 1.4rem + 4.6vw, 3.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
}

.rp-result-value .rp-baht {
  font-family: var(--font, 'Sarabun', sans-serif);
  font-size: 0.36em;
  font-weight: 600;
  margin-left: 8px;
  color: #c9dcf7;
  letter-spacing: 0;
}

.rp-result-sub {
  margin: var(--s4) auto 0;
  max-width: 460px;
  font-size: 0.96rem;
  line-height: 1.8;
  color: #dbe9fb;
}

/* three across on every width — even a 320px phone */
.rp-result-split {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s1);
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.rp-split-item {
  min-width: 0;
  padding: var(--s2) 2px;
}

.rp-split-item + .rp-split-item {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.rp-split-num {
  display: block;
  font-family: var(--font-en, 'Inter', sans-serif);
  font-size: clamp(1.05rem, 0.85rem + 1vw, 1.32rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.rp-split-cap {
  display: block;
  font-size: 0.82rem;
  color: #b9d2f4;
  margin-top: 2px;
}

.rp-result.is-empty {
  background: #eef4fb;
  color: var(--rp-muted);
  box-shadow: none;
  border: 1px dashed var(--rp-border-strong);
}

.rp-result.is-empty .rp-result-label,
.rp-result.is-empty .rp-result-sub {
  color: var(--rp-muted);
}

.rp-result.is-empty .rp-result-value {
  color: #b6c4dc;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem);
}

.rp-result.is-empty .rp-result-split {
  display: none;
}

/* ---------- ADVANCED PANEL ------------------------------------------ */

.rp-advanced {
  margin-top: var(--s5);
  background: var(--rp-card);
  border: 1px solid var(--rp-border);
  border-radius: 18px;
  overflow: hidden;
}

.rp-advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  width: 100%;
  min-height: 60px;
  padding: var(--s3) var(--s4);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--rp-ink);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.rp-advanced-toggle small {
  display: block;
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--rp-muted);
  margin-top: 2px;
  line-height: 1.6;
}

.rp-caret {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: var(--rp-accent);
  transition: transform 0.3s var(--rp-ease);
}

.rp-advanced.is-open .rp-caret {
  transform: rotate(180deg);
}

.rp-advanced-body {
  display: none;
  padding: 0 var(--s4) var(--s4);
  border-top: 1px solid var(--rp-border);
}

.rp-advanced.is-open .rp-advanced-body {
  display: block;
}

.rp-advanced-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin: var(--s4) 0;
}

@media (min-width: 40rem) {
  .rp-advanced-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.rp-mini-field .rp-field-title {
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--rp-ink);
  line-height: 1.5;
}

.rp-mini-field .rp-field-top {
  margin-bottom: var(--s3);
}

.rp-mini-field .rp-input {
  font-size: 1.14rem;
  min-height: 52px;
}

.rp-adjusted {
  background: var(--rp-good-soft);
  border-radius: 14px;
  padding: var(--s4);
}

.rp-adjusted-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  padding: 10px 0;
  font-size: 0.94rem;
  line-height: 1.6;
  border-bottom: 1px dashed rgba(43, 133, 52, 0.22);
}

.rp-adjusted-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.rp-adjusted-row .rp-k {
  color: #3f5a42;
}

.rp-adjusted-row .rp-v {
  font-family: var(--font-en, 'Inter', sans-serif);
  font-weight: 700;
  color: var(--rp-good);
  font-size: 1.06rem;
}

.rp-adjusted-row.is-headline {
  padding-top: var(--s3);
}

.rp-adjusted-row.is-headline .rp-v {
  font-size: 1.42rem;
}

.rp-adjusted-note {
  margin: var(--s3) 0 0;
  font-size: 0.85rem;
  line-height: 1.75;
  color: #5c6f79;
}

/* ---------- TOOLBAR -------------------------------------------------- */

/* 2×2 on phones (no ragged wrapping), one row on wider screens */
.rp-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
  margin-top: var(--s5);
}

@media (min-width: 40rem) {
  .rp-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.rp-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--rp-accent);
  background: #fff;
  border: 1px solid var(--rp-border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.18s var(--rp-ease), background 0.18s var(--rp-ease),
              border-color 0.18s var(--rp-ease);
}

.rp-tool:hover {
  background: var(--rp-accent-soft);
  border-color: var(--rp-accent);
}

.rp-tool:active {
  transform: scale(0.98);
}

.rp-tool svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.rp-tool.is-done {
  background: var(--rp-good-soft);
  border-color: #9ecb96;
  color: var(--rp-good);
}

/* email is the main way a plan travels now — give it the weight */
.rp-tool.is-primary {
  grid-column: 1 / -1;
  background: var(--rp-accent);
  border-color: var(--rp-accent);
  color: #fff;
  box-shadow: 0 8px 22px rgba(29, 87, 184, 0.2);
}

.rp-tool.is-primary:hover {
  background: #164fa8;
  border-color: #164fa8;
}

.rp-tool.is-primary.is-done {
  background: var(--rp-good);
  border-color: var(--rp-good);
  color: #fff;
}

/* ---------- DISCLAIMER + CTA ---------------------------------------- */

.rp-note {
  display: flex;
  gap: var(--s3);
  margin-top: var(--s6);
  padding: var(--s4);
  background: #eef4fb;
  border-radius: 16px;
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--rp-muted);
}

.rp-note svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--rp-accent);
}

.rp-note p {
  margin: 0;
}

.rp-note p + p {
  margin-top: var(--s2);
}

.rp-cta {
  margin-top: var(--s5);
  padding: var(--s5) var(--s4);
  background: var(--rp-card);
  border: 1px solid var(--rp-border);
  border-radius: 20px;
  text-align: center;
}

.rp-cta h3 {
  margin: 0 0 var(--s2);
  font-size: 1.14rem;
  font-weight: 700;
  color: var(--rp-ink);
}

.rp-cta p {
  max-width: 520px;
  margin: 0 auto var(--s4);
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--rp-muted);
}

.rp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
}

.rp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 50px;
  padding: 12px 26px;
  font-family: inherit;
  font-size: 0.96rem;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--rp-ease), box-shadow 0.18s var(--rp-ease),
              background 0.18s var(--rp-ease);
}

.rp-btn-primary {
  background: var(--rp-accent);
  border: 1px solid var(--rp-accent);
  color: #fff;
  box-shadow: 0 8px 24px rgba(29, 87, 184, 0.24);
}

.rp-btn-primary:hover {
  background: #164fa8;
}

.rp-btn-ghost {
  background: #fff;
  border: 1px solid var(--rp-border-strong);
  color: var(--rp-accent);
}

.rp-btn-ghost:hover {
  background: var(--rp-accent-soft);
}

.rp-btn:active {
  transform: scale(0.98);
}

/* ---------- FOOTER --------------------------------------------------- */

.rp-footer {
  padding: var(--s5) 0 var(--s6);
  border-top: 1px solid var(--rp-border);
  margin-top: var(--s7);
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--rp-muted);
}

.rp-footer a {
  color: var(--rp-accent);
  text-decoration: none;
  font-weight: 600;
}

.rp-footer a:hover {
  text-decoration: underline;
}

.rp-footer p {
  margin: 0 0 var(--s2);
}

/* ---------- TOAST ---------------------------------------------------- */

.rp-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  z-index: 60;
  padding: 12px 22px;
  background: var(--rp-ink);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(11, 54, 123, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--rp-ease), transform 0.28s var(--rp-ease);
}

.rp-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- MOTION --------------------------------------------------- */

.rp-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--rp-ease), transform 0.5s var(--rp-ease);
}

.rp-reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  body.retirement-page *,
  body.retirement-page *::before,
  body.retirement-page *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  .rp-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- PRINT SHEET ----------------------------------------------
   Printing does NOT screenshot the web page. The interactive page is
   hidden and a purpose-built one-page handout is printed instead —
   something an advisor can hand across a table, or a customer can keep.
   ------------------------------------------------------------------- */

.rp-print-sheet {
  display: none;
}

@media print {
  body.retirement-page {
    background: #fff;
    color: #1a2230;
    padding: 0;
  }

  body.retirement-page .rp-main,
  body.retirement-page .rp-footer,
  body.retirement-page .rp-toast {
    display: none !important;
  }

  .rp-print-sheet {
    display: block;
    font-family: var(--font, 'Sarabun', sans-serif);
    /* Thai faces carry tall default line boxes; capping this here is what
       keeps the sheet from creeping onto a second page. */
    line-height: 1.35;
    color: #1a2230;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Everything below is tuned so a completed plan lands on ONE A4 page,
     including the inflation block. Nothing here is decorative — each
     size was pulled down until the whole sheet cleared a single page. */
  @page {
    size: A4;
    margin: 12mm 13mm;
  }

  .ps-head {
    padding-bottom: 7px;
    border-bottom: 2px solid #0b367b;
  }

  .ps-brand {
    font-size: 10pt;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #1d57b8;
  }

  .ps-head h1 {
    margin: 3px 0 1px;
    font-size: 18pt;
    font-weight: 800;
    color: #0b367b;
    line-height: 1.2;
  }

  .ps-meta {
    font-size: 9pt;
    color: #5a6a86;
  }

  .ps-block {
    margin-top: 10px;
    break-inside: avoid;
  }

  .ps-h {
    margin: 0 0 5px;
    font-size: 9pt;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #5a6a86;
    text-transform: uppercase;
  }

  .ps-given {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .ps-given div {
    padding: 6px 9px;
    background: #f1f6fc;
    border-radius: 6px;
  }

  .ps-given .k {
    display: block;
    font-size: 8pt;
    color: #5a6a86;
    line-height: 1.35;
  }

  .ps-given .v {
    display: block;
    margin-top: 1px;
    font-size: 12pt;
    font-weight: 700;
    color: #0b367b;
  }

  .ps-step {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 4px 0;
    border-bottom: 1px dotted #c8d6ea;
  }

  .ps-step:last-child {
    border-bottom: 0;
  }

  .ps-step .n {
    flex: 0 0 20px;
    height: 20px;
    font-size: 8.5pt;
    font-weight: 700;
    color: #fff;
    background: #1d57b8;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
  }

  .ps-step .t {
    flex: 1 1 auto;
    font-size: 9pt;
    color: #4a5a75;
    line-height: 1.45;
  }

  .ps-step .m {
    flex: 0 0 auto;
    font-size: 10.5pt;
    font-weight: 700;
    color: #0b367b;
    white-space: nowrap;
  }

  .ps-answer {
    margin-top: 11px;
    padding: 11px 14px;
    border: 2px solid #0b367b;
    border-radius: 10px;
    text-align: center;
    break-inside: avoid;
  }

  .ps-answer .lab {
    font-size: 9.5pt;
    color: #4a5a75;
  }

  .ps-answer .big {
    margin: 2px 0 1px;
    font-size: 26pt;
    font-weight: 800;
    line-height: 1.1;
    color: #0b367b;
  }

  .ps-answer .big small {
    font-size: 11pt;
    font-weight: 600;
    color: #5a6a86;
  }

  .ps-answer .sub {
    font-size: 9pt;
    color: #4a5a75;
    line-height: 1.55;
  }

  .ps-split {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid #c8d6ea;
  }

  .ps-split div + div {
    border-left: 1px solid #dde7f4;
  }

  .ps-split .v {
    display: block;
    font-size: 13pt;
    font-weight: 700;
    color: #0b367b;
  }

  .ps-split .k {
    display: block;
    font-size: 8.5pt;
    color: #5a6a86;
  }

  /* two columns halves the height of this block */
  .ps-adj {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
    padding: 8px 11px;
    background: #f2f8f0;
    border-radius: 8px;
  }

  .ps-adj-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
    font-size: 8.5pt;
    color: #3f5a42;
    line-height: 1.5;
  }

  .ps-adj-row b {
    color: #2b6b33;
    white-space: nowrap;
  }

  .ps-adj-note {
    grid-column: 1 / -1;
    margin: 3px 0 0;
    font-size: 7.5pt;
    line-height: 1.45;
    color: #5f7562;
  }

  /* signature lines and the small print share one row — the last thing
     standing between this and a second page */
  .ps-foot {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 16px;
    margin-top: 11px;
    padding-top: 7px;
    border-top: 1px solid #c8d6ea;
  }

  .ps-sign {
    display: grid;
    gap: 9px;
    align-content: start;
  }

  .ps-sign div {
    padding-top: 15px;
    border-top: 1px solid #9fb3cf;
    font-size: 8pt;
    color: #5a6a86;
  }

  .ps-note {
    margin: 0;
    font-size: 8pt;
    line-height: 1.55;
    color: #5a6a86;
  }

  .ps-note b {
    color: #1a2230;
  }

  .ps-link {
    margin-top: 4px;
    font-size: 7.5pt;
    color: #1d57b8;
    word-break: break-all;
  }
}