/* FGO calculator pages, v1 chassis (Claude Design handoff, 11 Jun 2026).
   Self-contained on assets/css/tokens.css. Replaces the dd pillar chrome on
   calculator pages: sticky topbar, control rail left, living results pane right,
   what-if cards, dynamic glance table, schedule, CTA strip, charcoal footer.
   Source design: Repayment Calculator v1.html (proto.css + proto-d.jsx). */

/* ============================================================
   calc-v1 theme tokens - promoted literals + chart split.
   Light values mirror tokens.css so light rendering is unchanged.
   Dark values are overridden under html[data-theme="dark"].
   tokens.css is deliberately untouched (site-wide neutrality).
   ============================================================ */
body.calc-v1 {
  /* chart green, split from UI --dark-green (light = identical value) */
  --chart-green: #2c4a3e;

  /* promoted literals (light values = exact current literals) */
  --accent-ring:       rgba(181, 112, 63, 0.15);
  --btn-sec-hover:     rgba(22, 20, 15, 0.04);
  --fade-cream-0:      rgba(245, 242, 236, 0);
  --on-dark-dim:       rgba(245, 242, 236, 0.55);
  --on-green-sub:      rgba(244, 242, 236, 0.75);
  --glass-pop:         rgba(255, 253, 248, 0.86);
  --glass-event:       rgba(255, 253, 248, 0.90);
  --footer-link:       rgba(255, 255, 255, 0.70);
  --footer-rule:       rgba(255, 255, 255, 0.10);
  --footer-legal:      rgba(255, 255, 255, 0.50);
  --shadow-soft:       rgba(0, 0, 0, 0.14);
  --shadow-event:      rgba(0, 0, 0, 0.16);
  --shadow-strong:     rgba(0, 0, 0, 0.18);
  --on-strip-border:   rgba(244, 242, 236, 0.4);

  /* text-on-dark-green surface (CTA strip / green buttons). In light this
     equals --cream so existing on-green text is unchanged. In dark it stays
     a true cream rather than following --cream (which becomes a dark surface). */
  --cream-text: var(--cream);

  /* the missing token bug - define it for both themes */
  --dark-green-hover: #20382E;

  /* meta theme-color mirror (used by JS, not CSS) */
  --theme-color: #F4F2EC;
}

html[data-theme="dark"] body.calc-v1,
html[data-theme="dark"] .calc-v1 {
  /* base remaps (tokens.css equivalents, scoped to calc pages only) */
  --paper:          #101714;
  --cream:          #16201C;
  --white:          #1A2521;
  --off-white:      #ECE7DB;
  --charcoal:       #0B100E;
  --ink:            #ECE7DB;
  --text-primary:   #ECE7DB;
  --text-secondary: #B7B1A4;
  --muted:          #9A958A;
  --body-grey:      #A39E92;
  --ink-faint:      #857F73;
  --text-light:     #6F6A60;
  --line:           #33413B;
  --clay:           #D08A55;
  --accent:         #D08A55;
  --accent-deep:    #E0A06B;
  --accent-soft:    rgba(208, 138, 85, 0.16);
  --dark-green:     #3E6354;
  --mist:           #1E2A25;
  --sage:           #243430;
  --warm-beige:     #C2A878;
  --light-orange:   #FFC98F;

  /* chart-stroke green (lifted, separate from UI green) */
  --chart-green:    #7FB59E;

  /* promoted-literal dark values */
  --accent-ring:    rgba(208, 138, 85, 0.22);
  --btn-sec-hover:  rgba(236, 231, 219, 0.06);
  --fade-cream-0:   rgba(16, 23, 20, 0);
  --on-dark-dim:    rgba(236, 231, 219, 0.55);
  --on-green-sub:   rgba(236, 231, 219, 0.78);
  --glass-pop:      rgba(26, 37, 33, 0.86);
  --glass-event:    rgba(26, 37, 33, 0.92);
  --footer-link:    rgba(236, 231, 219, 0.72);
  --footer-rule:    rgba(236, 231, 219, 0.12);
  --footer-legal:   rgba(236, 231, 219, 0.52);
  --shadow-soft:    rgba(0, 0, 0, 0.45);
  --shadow-event:   rgba(0, 0, 0, 0.50);
  --shadow-strong:  rgba(0, 0, 0, 0.55);
  --on-strip-border: rgba(236, 231, 219, 0.4);

  --cream-text:     #ECE7DB;
  --dark-green-hover: #4C7565;
  --theme-color:    #101714;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.calc-v1 {
  margin: 0; background: var(--cream); color: var(--text-primary);
  font-family: var(--font-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
body.calc-v1 * { box-sizing: border-box; }
/* author display rules (flex/grid on stats, buttons, mode rows) would otherwise
   defeat the hidden attribute; same lesson as the duty page state toggles */
body.calc-v1 [hidden] { display: none !important; }

.fgo-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 720px) { .fgo-container { padding: 0 24px; } }

/* ---------- type roles (design-system base) ---------- */
.t-eyebrow {
  font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
  display: inline-flex; align-items: center; gap: 9px;
}
.t-eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--clay); flex: none; }
.t-section { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); }
.t-body { font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: var(--lh-body); color: var(--text-secondary); }
.t-small { font-family: var(--font-body); font-weight: 400; font-size: 0.875rem; line-height: var(--lh-small); }
.c-label {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}

/* interactive controls never trigger iOS double-tap zoom */
.fgo-btn, .c-seg button, .c-range, .rc-chip, .rc-step, .pd-card, .rc-disclose-btn, .c-field-input { touch-action: manipulation; }

/* ---------- buttons (design-system pill) ---------- */
.fgo-btn {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 50px;
  font-family: var(--font-body); font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  padding: 10px 18px; font-size: 0.9375rem; border: 1px solid var(--dark-green);
  background: var(--dark-green); color: var(--cream);
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.fgo-btn:hover { transform: translateY(-2px); background: var(--dark-green-hover); }
.fgo-btn-sm { padding: 8px 16px; font-size: 0.8125rem; }
.fgo-btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.fgo-btn-secondary:hover { background: var(--btn-sec-hover); border-color: var(--muted); }
.fgo-btn-ondark { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.fgo-btn-ondark:hover { background: var(--white); }
.fgo-btn:focus-visible { outline: 1px solid var(--clay); outline-offset: 3px; }

/* ---------- topbar ---------- */
.rc-topbar { border-bottom: 1px solid var(--line); background: var(--cream); position: sticky; top: 0; z-index: 80; transition: transform 0.28s ease; }
.rc-topbar.rc-topbar-hidden { transform: translateY(-100%); }
.rc-topbar-in { display: flex; align-items: center; gap: 18px; padding: 14px clamp(24px, 3.5vw, 56px); }
.rc-topbar-back { text-decoration: none; }
.rc-topbar-back:hover { color: var(--clay); }
/* brand mark, far left, links home. Two images theme-swapped (the mark's
   dark lettering vanishes on the dark theme; the cream variant keeps the
   orange arrow). No display rule on the shared img selector: it would
   outrank the per-image visibility rules, the sun/moon lesson */
.rc-topbar-logo { display: inline-flex; align-items: center; flex: none; }
.rc-topbar-logo img { height: 30px; width: auto; }
.rc-logo-dark { display: none; }
html[data-theme="dark"] .rc-logo-light { display: none; }
html[data-theme="dark"] .rc-logo-dark { display: inline-block; }
/* narrow screens: the back label never wraps mid-name; below the width where
   label + CTA + toggle genuinely fit on one line (421px, measured), the
   label collapses to its arrow */
.rc-topbar-back { white-space: nowrap; }
@media (max-width: 640px) {
  .rc-topbar-back { font-size: 0.7rem; letter-spacing: 0.08em; }
  .rc-topbar-in { gap: 8px; padding-left: 24px; padding-right: 16px; }
  .rc-topbar .fgo-btn-sm { padding: 8px 13px; }
  .rc-topbar-logo img { height: 26px; }
}
@media (max-width: 470px) {
  .rc-topbar-back-label { display: none; }
  /* arrow-only state: a 44px circle matching the theme toggle, so the bar
     reads as a balanced pair rather than a stray glyph. The double selector
     outranks the later mobile .c-label font-size rule */
  .rc-topbar .rc-topbar-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    border: 1px solid var(--line); border-radius: 50px;
    font-size: 1.45rem; line-height: 1; letter-spacing: 0;
    padding-bottom: 2px; /* optical centre: the arrow glyph sits high in its em box */
  }
}

/* ---------- hero (slim, SEO h1) ---------- */
.rc-hero { padding: clamp(16px, 2vw, 24px) clamp(24px, 3.5vw, 56px) clamp(14px, 1.6vw, 20px); max-width: 1200px; }
.rc-hero h1 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.05; color: var(--ink); margin: 0 0 14px;
}
.rc-hero .lede { max-width: none; margin: 0; font-size: 1.0625rem; }

/* ---------- shell: rail + pane ---------- */
.rc-shell { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; align-items: start; border-top: 1px solid var(--line); }
.rc-rail {
  border-right: 1px solid var(--line); position: sticky; top: 53px;
  max-height: calc(100vh - 53px); overflow-y: auto;
  padding: 12px clamp(24px, 3vw, 44px) 0 clamp(24px, 3.5vw, 56px);
}
.rc-pane { padding: 34px clamp(24px, 3.5vw, 56px) 64px; min-width: 0; }
.rc-rail-fields { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
/* rail header: eyebrow left, quiet full-reset right. Same component sits in
   the mobile sentence foot; sizes per breakpoint below. */
.rc-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rc-reset {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 500; color: var(--muted);
  background: transparent; border: 1px solid var(--line); border-radius: 50px;
  padding: 6px 12px; cursor: pointer; white-space: nowrap; flex: none;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.rc-reset:hover { color: var(--clay); border-color: var(--clay); }
.rc-reset:focus-visible { outline: 1px solid var(--clay); outline-offset: 2px; }
.rc-sentence-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
/* scroll cue: fades the rail's bottom edge whenever content hides below it */
.rc-rail-fade {
  position: sticky; bottom: 0; height: 42px; margin-top: -42px; flex: none;
  background: linear-gradient(var(--fade-cream-0), var(--cream));
  pointer-events: none; display: none;
}
.rc-rail.has-overflow .rc-rail-fade { display: block; }

/* ---------- field: editable figure + slider ---------- */
.c-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.c-field-value { display: flex; align-items: baseline; gap: 2px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.c-field-value:focus-within { border-bottom-color: var(--clay); }
.c-field-prefix, .c-field-suffix { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink-faint); font-weight: 400; }
.c-field-input {
  font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; letter-spacing: -0.01em;
  color: var(--ink); background: transparent; border: none; outline: none;
  width: 100%; min-width: 0; padding: 0;
}
.c-field-note { font-size: 0.875rem; color: var(--text-secondary); font-family: var(--font-body); line-height: 1.4; }

.c-range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; margin: 0; --fill: 50%; }
.c-range::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(to right, var(--dark-green) var(--fill), var(--line) var(--fill)); }
.c-range::-moz-range-track { height: 2px; border-radius: 2px; background: var(--line); }
.c-range::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--dark-green); }
.c-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--dark-green); margin-top: -10px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.c-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--cream); border: 2px solid var(--dark-green); transition: border-color 0.2s ease, transform 0.2s ease; }
.c-range:hover::-webkit-slider-thumb, .c-range:focus-visible::-webkit-slider-thumb { border-color: var(--clay); transform: scale(1.12); }
.c-range:hover::-moz-range-thumb, .c-range:focus-visible::-moz-range-thumb { border-color: var(--clay); transform: scale(1.12); }
.c-range:active::-webkit-slider-thumb { border-color: var(--clay); transform: scale(1.4); box-shadow: 0 0 0 8px var(--accent-ring); }
.c-range:active::-moz-range-thumb { border-color: var(--clay); transform: scale(1.4); box-shadow: 0 0 0 8px var(--accent-ring); }
.rc-step:active { transform: scale(1.12); }
.c-range:focus { outline: none; }
.c-range:focus-visible { outline: 1px solid var(--clay); outline-offset: 6px; border-radius: 4px; }

/* ---------- segmented control ---------- */
.c-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 50px; padding: 3px; gap: 2px; background: transparent; flex-wrap: nowrap; }
.c-seg button {
  font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.005em;
  border: none; background: transparent; color: var(--muted);
  padding: 8px 14px; border-radius: 50px; cursor: pointer; white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}
.c-seg button:hover { color: var(--clay); }
.c-seg button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.c-seg button:focus-visible { outline: 1px solid var(--clay); outline-offset: 2px; }
/* rail variant: stretch to the rail width, equal buttons */
.c-seg-fill { display: flex; width: 100%; }
.c-seg-fill button { flex: 1; text-align: center; padding: 8px 6px; }
.rc-seg-group { display: flex; flex-direction: column; gap: 10px; }

/* ---------- disclosure row: prominent, clearly pressable ---------- */
.rc-disclose { border-top: 1px solid var(--line); padding-top: 14px; }
.rc-disclose-btn {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  background: transparent; border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; cursor: pointer; font-family: var(--font-body);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.rc-disclose-btn:hover { border-color: var(--clay); }
.rc-disclose-btn:focus-visible { outline: 1px solid var(--clay); outline-offset: 3px; }
.rc-disclose-plus {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--clay);
  color: var(--clay); display: flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1; transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.rc-disclose-btn[aria-expanded="true"] .rc-disclose-plus { background: var(--dark-green); border-color: var(--dark-green); color: var(--cream); transform: rotate(45deg); }
.rc-disclose-label { font-weight: 600; font-size: 0.9rem; color: var(--ink); display: block; }
.rc-disclose-hint { font-size: 0.875rem; color: var(--text-secondary); display: block; margin-top: 3px; line-height: 1.4; }
.rc-disclose-live { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chart-green); display: none; margin-top: 6px; }
.rc-disclose-live.on { display: block; }
.rc-disclose-fields { display: none; flex-direction: column; gap: 18px; margin: 18px 0 22px; }
.rc-disclose-fields.open { display: flex; }

/* ---------- stats ---------- */
.rc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: clamp(18px, 3vw, 40px); }
.c-stat { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.c-stat-figure {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1; font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-variant-numeric: tabular-nums;
}
.c-stat-figure.hero-figure { font-size: clamp(2rem, 3vw, 2.8rem); }
.c-stat-figure em { font-style: normal; color: var(--clay); }
.c-stat-figure em.good { color: var(--dark-green); }
.c-stat-figure .unit { font-size: 0.45em; color: var(--ink-faint); letter-spacing: 0; }
.c-stat-sub { font-size: 0.875rem; color: var(--text-secondary); font-family: var(--font-body); }

/* ---------- principal / interest split (slim summary, not a second chart) ---------- */
.rc-split { margin: 26px 0 2px; }
.rc-split .c-label { display: block; margin-bottom: 12px; }
.rc-split-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line); }
.rc-split-fill { height: 100%; }
.rc-split-principal { background: var(--ink); }
.rc-split-interest { background: var(--clay); }
/* fixed two-column grid, not flex-wrap: the dollar figures change width as the
   sliders move, and content-driven wrapping made the legend jump between one
   and two rows on every drag, shoving the chart below it up and down. */
.rc-split-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; margin-top: 14px; }
.rc-split-legend > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.rc-split-legend b { font-family: var(--font-display); font-weight: 400; font-size: 1.0625rem; letter-spacing: -0.01em; text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.rc-split-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.rc-split-dot-principal { background: var(--ink); }
.rc-split-dot-interest { background: var(--clay); }
/* reserve two lines so the insight changing length (crossover year, or the
   from-first-year wording) never reflows the block height mid-drag. */
.rc-split-insight { margin: 14px 0 0; min-height: 2.8em; font-size: 0.875rem; line-height: 1.55; color: var(--text-secondary); max-width: 70ch; }
@media (max-width: 520px) { .rc-split-legend { grid-template-columns: 1fr; } }
.rc-split-insight b { color: var(--ink); font-weight: 600; }

/* ---------- chart ---------- */
.rc-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 38px; flex-wrap: wrap; }
.rc-chart-actions { display: flex; gap: 8px; }
.c-chart { position: relative; width: 100%; margin-top: 14px; }
.c-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.c-chart-tip {
  position: absolute; pointer-events: none; transform: translate(-50%, -130%);
  background: var(--ink); color: var(--cream); border-radius: 10px;
  padding: 7px 11px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em;
  white-space: nowrap; z-index: 3;
}
.c-chart-tip .dim { color: var(--on-dark-dim); }
/* moving principal/interest split: a mini bar inside the scrubber tooltip that
   rebalances from interest-heavy (early) to principal-heavy (late) as you scrub. */
.rc-tip-split { display: flex; height: 7px; border-radius: 4px; overflow: hidden; margin-top: 8px; min-width: 150px; }
.rc-tip-si { background: var(--clay); }
.rc-tip-sp { background: var(--cream); }
.rc-tip-splitlbl { display: flex; justify-content: space-between; gap: 16px; margin-top: 5px; font-size: 0.6rem; }
.rc-tip-splitlbl .si, .rc-tip-splitlbl .sp { color: var(--cream); }
.rc-impact { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); margin-top: 10px; }
.rc-impact .worse { color: var(--clay); }
.rc-impact .better { color: var(--dark-green); }
.rc-negam {
  border: 1px solid var(--clay); border-radius: 14px; background: var(--accent-soft);
  padding: 14px 18px; font-size: 0.875rem; line-height: 1.55; color: var(--ink); margin-top: 16px;
}
.rc-modechips { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.rc-node-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-node-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 50px; padding: 6px 8px 6px 12px; color: var(--ink);
}
.rc-node-chip button {
  border: none; background: transparent; color: var(--clay); cursor: pointer;
  font-size: 0.85rem; line-height: 1; padding: 2px 4px; border-radius: 50%;
}
.rc-node-chip button:hover { color: var(--accent-deep); }
/* the pill's label is a tappable rc-chip. The x-button rule above
   (.rc-node-chip button: border none, clay text) outranks .rc-chip and was
   stripping the underline, the sun/moon specificity lesson a third time, so
   the affordance is restated at higher specificity. Only the RATE carries
   the underline: it is the value you edit. */
.rc-node-chip button.rc-chip { color: var(--ink); padding: 0; font-size: inherit; letter-spacing: inherit; border-radius: 0; }
.rc-node-chip button.rc-chip .rc-node-rate { border-bottom: 1px solid var(--clay); padding-bottom: 1px; }
.rc-node-chip button.rc-chip:hover { color: var(--clay); }
.rc-node-chip button.rc-chip[aria-expanded="true"] { background: var(--accent-soft); }
/* tap-to-edit editor: typed rate + sliders for people stacking several rate
   changes who want precision without fighting the chart drag */
.rc-node-editor {
  display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap;
  margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px;
  max-width: 560px;
}
.rc-node-editor .c-field { flex: 1 1 180px; margin: 0; }
.rc-node-editor .rc-reset { margin-bottom: 4px; }

/* SVG element classes */
.rc-paper-minor { stroke: var(--line); stroke-width: 0.5; opacity: 0.22; fill: none; }
.rc-paper-major { stroke: var(--line); stroke-width: 0.75; opacity: 0.45; fill: none; }
.rc-grid-line { stroke: var(--line); stroke-width: 1; }
.rc-grid-text { font-family: var(--font-mono); font-size: 0.6875rem; fill: var(--ink-faint); letter-spacing: 0.06em; }
.rc-balance-line { fill: none; stroke: var(--chart-green); stroke-width: 2; }
.rc-balance-area { fill: var(--sage); opacity: 0.5; }
.rc-effective-line { fill: none; stroke: var(--chart-green); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0.7; }
.rc-term-marker { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 2 5; }
.rc-rate-line { fill: none; stroke: var(--clay); stroke-width: 1.5; opacity: 0.85; }
.rc-rate-text { font-family: var(--font-mono); font-size: 0.6875rem; fill: var(--clay); letter-spacing: 0.06em; }
/* touch-action: none is the load-bearing part: without it iOS treats the
   finger movement as a page pan after ~10px, fires pointercancel and kills
   the drag mid-gesture. Scoped to the handles so the rest of the chart
   still scrolls the page normally. */
.rc-rate-node { fill: var(--clay); stroke: var(--cream); stroke-width: 2; cursor: grab; touch-action: none; }
.rc-rate-node.dragging { cursor: grabbing; }
.rc-rate-hit { fill: transparent; cursor: grab; touch-action: none; }
.rc-node-tip { font-family: var(--font-mono); font-size: 0.6875rem; fill: var(--ink); letter-spacing: 0.04em; }
.rc-ball { fill: var(--clay); stroke: var(--cream); stroke-width: 2.5; }
.rc-payoff-text { font-family: var(--font-mono); font-size: 0.6875rem; fill: var(--clay); letter-spacing: 0.08em; }
.rc-scrub-line { stroke: var(--clay); stroke-width: 1; stroke-dasharray: 2 4; }
.rc-scrub-dot { fill: var(--clay); stroke: var(--cream); stroke-width: 2; }
.rc-legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.rc-legend .key { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 7px; }

/* ---------- what-if cards ---------- */
.rc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 18px; }
.pd-card {
  border: 1px solid var(--line); border-radius: 20px; padding: 22px; cursor: pointer;
  background: transparent; text-align: left; font-family: var(--font-body);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  display: flex; flex-direction: column; gap: 9px;
}
.pd-card:hover { transform: translateY(-2px); border-color: var(--clay); }
.pd-card[aria-pressed="true"] { background: var(--sage); border-color: var(--dark-green); }
.pd-card:focus-visible { outline: 1px solid var(--clay); outline-offset: 3px; }
.pd-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pd-card-title { font-weight: 600; font-size: 0.95rem; line-height: 1.25; color: var(--ink); }
.pd-card-state { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay); flex: none; font-weight: 500; }
.pd-card[aria-pressed="true"] .pd-card-state { color: var(--dark-green); }
.pd-card-body { font-size: 0.875rem; line-height: var(--lh-body); color: var(--text-secondary); }
.pd-card-delta { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }
.pd-card-delta .saved { color: var(--dark-green); }
.pd-card-delta .over { color: var(--clay); }
.pd-card-delta .dim { color: var(--ink-faint); }

/* ---------- mist CTA card ---------- */
.rc-mistcard {
  background: var(--mist); border-radius: 20px; padding: clamp(22px, 3vw, 32px); margin: 36px auto 0;
  max-width: 780px;
  display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap;
}
/* text column sized in rem (not the wrapper's body-ch, which squashed the larger
   title onto three lines) so the heading wraps to at most two lines. */
.rc-mistcard-text { max-width: 30rem; min-width: 0; }
.rc-mistcard-title { font-family: var(--font-display); font-size: clamp(1.4rem, 4.2vw, 1.7rem); line-height: 1.12; color: var(--ink); margin-bottom: 6px; }
.rc-mistcard p { margin: 0; font-size: 0.88rem; }

/* ---------- glance + schedule sections ---------- */
.rc-band { border-top: 1px solid var(--line); padding: clamp(56px, 8vw, 90px) 0; }
.rc-band .intro { max-width: 70ch; margin: 18px 0 30px; }
.rc-tablewrap { overflow-x: auto; }
/* cap the eight-states compare table and keep it left-aligned (flush with the
   section header) so the four columns pack together instead of spreading the
   full content width with a big empty middle. */
#compareWrap { max-width: 880px; }
table.rc-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.rc-table th {
  text-align: left; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.rc-table td { padding: 18px 12px 18px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.rc-table th.num, .rc-table td.num { text-align: right; }
.rc-table td.figure { font-family: var(--font-display); font-size: 1.05rem; }
.rc-table td.mono { font-family: var(--font-mono); font-size: 0.85rem; }
.rc-table td.mono .dim, .rc-table td .dim { color: var(--ink-faint); }
.rc-table th.yours { color: var(--clay); }
.rc-table td.yours { background: var(--mist); }
.rc-table-note { margin-top: 16px; font-size: 0.875rem; color: var(--text-secondary); }
.rc-band-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.rc-band-head .stack { display: flex; flex-direction: column; gap: 14px; }

/* schedule body capped + scrollable in monthly mode */
.rc-schedule-scroll { max-height: 560px; overflow-y: auto; }
.rc-schedule-scroll table.rc-table { min-width: 640px; }
.rc-schedule-scroll thead th { position: sticky; top: 0; background: var(--cream); z-index: 1; }
/* horizontal-scroll affordance: the first column holds still while the rest
   slides under it, and the right edge fades until you reach the end */
.rc-scroll-shell { position: relative; }
.rc-scroll-shell::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 64px;
  background: linear-gradient(to right, var(--fade-cream-0), var(--cream) 80%);
  box-shadow: inset -26px 0 22px -18px var(--shadow-soft);
  pointer-events: none; opacity: 0; transition: opacity 0.25s ease;
}
.rc-scroll-shell.has-more::after { opacity: 1; }
/* the unmissable part: a chevron badge that nudges right until the end */
.rc-scroll-shell::before {
  content: "\2192"; position: absolute; right: 6px; top: 50%; z-index: 2;
  width: 34px; height: 34px; margin-top: -17px; border-radius: 50%;
  background: var(--ink); color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.9rem;
  box-shadow: 0 4px 12px var(--shadow-strong);
  pointer-events: none; opacity: 0; transition: opacity 0.25s ease;
  animation: rc-nudge 1.6s ease-in-out infinite alternate;
}
.rc-scroll-shell.has-more::before { opacity: 0.92; }
@keyframes rc-nudge { from { transform: translateX(0); } to { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .rc-scroll-shell::before { animation: none; } }
.rc-schedule-scroll th:first-child, .rc-schedule-scroll td.figure {
  position: sticky; left: 0; background: var(--cream); z-index: 2;
}
.rc-schedule-scroll thead th:first-child { z-index: 3; }
tr.rc-yearsep td { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 16px 12px 6px 0; border-bottom: none; }

/* ---------- article (SEO body, design language) ----------
   Editorial two-column: heading column left (sticky), prose right.
   Uses the full container width on large screens while the line length
   stays inside a readable measure. */
.rc-article { border-top: 1px solid var(--line); }
.rc-article section {
  display: grid; grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 18px clamp(32px, 5vw, 72px);
  padding: clamp(44px, 6vw, 72px) 0; border-bottom: 1px solid var(--line);
}
.rc-article section:last-child { border-bottom: none; }
.rc-art-head { position: sticky; top: 77px; align-self: start; display: flex; flex-direction: column; gap: 14px; }
.rc-art-body { min-width: 0; }
.rc-article h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.01em; line-height: 1.12; color: var(--ink); margin: 0; }
.rc-article p { max-width: 70ch; margin: 0 0 16px; font-size: 1rem; line-height: var(--lh-body); color: var(--text-secondary); }
@media (max-width: 920px) {
  .rc-article section { grid-template-columns: 1fr; gap: 18px; }
  .rc-art-head { position: static; }
}
.rc-article p:last-child { margin-bottom: 0; }
.rc-article .formula {
  font-family: var(--font-mono); font-size: 0.8125rem; background: var(--mist);
  border-radius: 14px; padding: 14px 18px; margin: 16px 0; overflow-x: auto; color: var(--ink);
}
.rc-article table { width: 100%; border-collapse: collapse; margin: 8px 0 4px; }
.rc-article table th { text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.rc-article table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; color: var(--ink); }
.faq-item { border-bottom: 1px solid var(--line); padding: 20px 0; max-width: 70ch; }
.faq-item:last-of-type { border-bottom: none; }
.faq-item h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; color: var(--ink); margin: 0 0 8px; }
.faq-item p { margin: 0; }

/* ---------- CTA strip (design-system, dark green) ---------- */
.fgo-ctastrip { max-width: 1120px; margin: 0 auto; background: var(--dark-green); border-radius: 24px; padding: 64px 40px; text-align: center; }
.fgo-ctastrip h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--cream-text); margin: 0 0 16px; }
.fgo-ctastrip .sub { max-width: 520px; margin: 0 auto 30px; color: var(--on-green-sub); font-size: 1rem; line-height: 1.6; }
.fgo-ctastrip .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.rc-ctaband { padding: clamp(56px, 8vw, 90px) 24px; border-top: 1px solid var(--line); }

/* ---------- disclaimer ---------- */
.calc-disclaimer {
  font-size: 0.8125rem; color: var(--text-secondary); max-width: 86ch; line-height: 1.65;
  border: 1px solid var(--line); border-radius: 14px; padding: 22px 26px; margin: 0 auto;
}

/* ---------- footer (charcoal, site pattern) ---------- */
.rc-footer { background: var(--charcoal); color: var(--off-white); padding: 56px 0 40px; margin-top: clamp(48px, 7vw, 80px); font-family: var(--font-body); }
.rc-footer-logo { display: block; height: 44px; width: auto; margin: 0 auto 36px; }
.rc-footer-links { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.rc-footer-links a { color: var(--footer-link); font-size: 0.875rem; text-decoration: none; transition: color 0.2s ease; }
.rc-footer-links a:hover { color: var(--off-white); }
.rc-footer-legal { border-top: 1px solid var(--footer-rule); padding-top: 30px; }
.rc-footer-legal p { color: var(--footer-legal); font-size: 0.75rem; line-height: 1.65; margin: 0; max-width: 90ch; }

/* ---------- mobile results bar ---------- */
.rc-mobilebar { display: none; }
@media (max-width: 920px) {
  .rc-shell { grid-template-columns: 1fr; }
  .rc-rail { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--line); overflow: visible; }
  .rc-pane { padding-bottom: 40px; }
  body.calc-v1 { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .rc-mobilebar {
    display: flex; position: fixed; left: 0; right: 0; z-index: 90;
    width: calc(100vw - 40px); max-width: 560px; margin: 0 auto;
    /* lowest point matches the homepage sticky CTA (flat 16px, no safe-area
       term): when Safari's toolbar collapses the safe-area inset is ~34px on
       Face ID phones and a max() against it left the bar floating visibly
       high (Gabe, 13 Jun). 16px hugs the home-indicator zone without
       touching the indicator itself, exactly like the CTA pill. */
    bottom: 16px;
    background: var(--ink); color: var(--cream); border-radius: 18px;
    padding: 10px 20px 12px; align-items: center; gap: 12px;
    box-shadow: 0 8px 24px var(--shadow-strong);
  }
  /* the two columns spread across the bar, so width never reads as dead space */
  .rc-mobilebar .mb-grid { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 4px 26px; width: 100%; min-width: 0; }
  .rc-mobilebar .cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .rc-mobilebar .c-label { color: var(--on-dark-dim); font-size: 0.64rem; letter-spacing: 0.12em; }
  .rc-mobilebar .val { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rc-mobilebar .val .good { color: var(--sage); }
  .rc-mobilebar .val .bad { color: var(--light-orange); }
  /* the floating bar IS the results surface on phones; the in-page stats
     block hides so the sentence and the chart share the first screen */
  .rc-stats { display: none; }
  .rc-mobile-notes { margin-top: 14px; }
}
@media (max-width: 374px) {
  .rc-mobilebar .val { font-size: 1.05rem; }
  .rc-mobilebar { padding: 10px 14px; }
}
@media (min-width: 921px) {
  .rc-mobile-notes { display: none; }
}

/* ---------- the sentence: mobile input mode (Prototype C concept) ----------
   Desktop keeps the control rail; under 920px the rail is replaced by one
   editable sentence whose values are tappable chips. Same canonical inputs
   underneath, so the engine wiring never forks. */
.rc-sentence-block { display: none; }
.rc-sentence {
  font-family: var(--font-display); font-weight: 400; color: var(--ink);
  font-size: clamp(1.5rem, 6.2vw, 2.1rem); line-height: 1.5; letter-spacing: -0.01em; margin: 0;
}
.rc-chip {
  display: inline; cursor: pointer; border: none; background: transparent;
  font: inherit; color: var(--ink); padding: 0 2px;
  border-bottom: 2px solid var(--clay); border-radius: 6px 6px 0 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.rc-chip[aria-expanded="true"], .rc-chip:active { background: var(--accent-soft); color: var(--accent-deep); }
.rc-chip:focus-visible { outline: 1px solid var(--clay); outline-offset: 3px; }
.rc-pop {
  position: absolute; left: 0; right: 0; top: 0; z-index: 95;
  background: var(--glass-pop);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 22px; padding-right: 56px; box-shadow: 0 12px 32px var(--shadow-soft);
  animation: rc-pop 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.rc-pop-close {
  position: absolute; top: 10px; right: 10px; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid var(--line); background: transparent;
  color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; touch-action: manipulation;
}
.rc-pop-close:active { background: var(--sage); }
@keyframes rc-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rc-pop-panel { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 920px) {
  .rc-rail { display: none; }
  .rc-sentence-block { display: block; position: relative; padding: 0 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
  .rc-pane { padding-top: 18px; }
  /* every vertical pixel between the sentence and the chart is chart room:
     the sentence already says what the chart shows, so its label goes */
  .rc-chart-head { margin-top: 10px; }
  .rc-chart-head > .c-label { display: none; }
  .c-chart { margin-top: 6px; }
  .rc-hero .lede { font-size: 1rem; }

  /* mobile type bump: small text was unreadable on phones */
  .rc-reset { font-size: 0.72rem; padding: 9px 14px; min-height: 38px; }
  .c-label { font-size: 0.78rem; }
  .c-field-note { font-size: 0.875rem; }
  .c-field-input { font-size: 1.5rem; }
  .c-seg button { font-size: 0.875rem; }
  .c-stat-figure { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  .c-stat-figure.hero-figure { font-size: clamp(2.2rem, 10vw, 2.9rem); }
  .c-stat-sub { font-size: 0.875rem; }
  .pd-card-title { font-size: 1.05rem; }
  .pd-card-body { font-size: 0.95rem; }
  .pd-card-delta { font-size: 0.78rem; }
  .pd-card-state { font-size: 0.72rem; }
  .rc-impact { font-size: 0.8rem; }
  .rc-node-chip { font-size: 0.72rem; }
  .rc-legend { font-size: 0.72rem; }
  .rc-table th { font-size: 0.72rem; }
  .rc-table td.mono { font-size: 0.95rem; }
  .rc-table-note { font-size: 0.875rem; }
  /* in-chart labels: the 480-wide mobile viewBox renders at ~390px, scaling
     SVG text by ~0.82, so these sit larger than desktop to land readable */
  .rc-grid-text, .rc-rate-text, .rc-payoff-text, .rc-lvr-text, .rc-equity-text { font-size: 0.9375rem; }
  /* the glance table fits the phone whole: your rate is visible without
     a sideways scroll (headers drop "p.a.", "yours" stacks underneath) */
  #examples table.rc-table { min-width: 0; }
  #examples .rc-table th { font-size: 0.6rem; letter-spacing: 0.06em; padding: 10px 6px 10px 0; }
  #examples .rc-table th .pa { display: none; }
  #examples .rc-table th .yours-tag { display: block; }
  #examples .rc-table td { padding: 13px 6px 13px 0; }
  #examples .rc-table td.figure { font-size: 0.85rem; }
  #examples .rc-table td.mono { font-size: 0.72rem; }
}

/* ---------- LVR setter: a second handle on the property value ---------- */
.rc-lvrset { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 6px; }
.rc-lvrset-out { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--chart-green); text-transform: uppercase; }

/* ---------- clear actions: one tap back to zero ---------- */
.rc-clear {
  align-self: flex-start; border: none; background: transparent; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--clay); padding: 4px 0; touch-action: manipulation;
  transition: color 0.2s ease;
}
.rc-clear:hover { color: var(--accent-deep); text-decoration: underline; }
.rc-clear:focus-visible { outline: 1px solid var(--clay); outline-offset: 3px; }

/* ---------- loan events: editor overlay, chips, curve markers ---------- */
.rc-event-pop {
  position: fixed; top: clamp(12px, 6vh, 90px); left: 12px; right: 12px;
  max-width: 460px; margin: 0 auto; z-index: 96;
  background: var(--glass-event);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 22px; box-shadow: 0 12px 32px var(--shadow-event);
  display: flex; flex-direction: column; gap: 14px;
  animation: rc-pop 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.rc-event-pop[hidden] { display: none; }
.rc-event-pop .rc-pop-close { top: 12px; right: 12px; }
.rc-event-pop .fgo-btn { align-self: flex-start; }
.rc-tx-chips { margin-top: 12px; }
.rc-node-chip.rc-tx-in { border-color: var(--chart-green); color: var(--chart-green); }
.rc-node-chip.rc-tx-out { border-color: var(--clay); color: var(--clay); }
.rc-ev-in { fill: var(--chart-green); stroke: var(--cream); stroke-width: 1.5; }
.rc-ev-out { fill: var(--clay); stroke: var(--cream); stroke-width: 1.5; }

/* ---------- property value, equity and LVR overlay ---------- */
/* decorative layers never intercept the pointer: rate nodes stay draggable
   no matter what grows over the chart */
.rc-prop-line, .rc-equity-fill, .rc-equity-text, .rc-lvr-tick, .rc-lvr-dot, .rc-lvr-text { pointer-events: none; }
.rc-prop-line { fill: none; stroke: var(--warm-beige); stroke-width: 1.5; }
.rc-equity-fill { fill: var(--mist); opacity: 0.45; }
.rc-equity-text { font-family: var(--font-mono); font-size: 0.6875rem; fill: var(--muted); letter-spacing: 0.14em; }
.rc-lvr-tick { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 2 5; }
.rc-lvr-dot { fill: var(--cream); stroke: var(--chart-green); stroke-width: 2; }
.rc-lvr-text { font-family: var(--font-mono); font-size: 0.6875rem; fill: var(--ink); letter-spacing: 0.06em; }

/* ---------- steppers: one-tap fine adjustment in the control cards ---------- */
.rc-step-row { display: flex; align-items: center; gap: 14px; }
.rc-step-row .c-field-value { flex: 1; min-width: 0; }
.rc-step {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  font-size: 1.25rem; line-height: 1; cursor: pointer; font-family: var(--font-body);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.rc-step:active { background: var(--sage); border-color: var(--dark-green); }
.rc-step:focus-visible { outline: 1px solid var(--clay); outline-offset: 2px; }

@media (max-width: 920px) {
  /* thumb-sized slider targets (Apple HIG 44px zone, 28px thumb) */
  .c-range { height: 44px; }
  .c-range::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -13px; }
  .c-range::-moz-range-thumb { width: 26px; height: 26px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fgo-btn:hover, .pd-card:hover, .team-card-button:hover { transform: none; }
}

/* ---------- calculators hub: card grid ---------- */
.rc-hub { max-width: 1200px; margin-inline: auto; padding: clamp(4px, 1vw, 12px) 40px 0; }
/* hub page: center hero + card grid to the same 1200px column as the article band */
.rc-hero-hub { max-width: 1200px; margin-inline: auto; padding-left: 40px; padding-right: 40px; }
@media (max-width: 720px) {
  .rc-hub, .rc-hero-hub { padding-left: 24px; padding-right: 24px; }
}
.rc-hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 720px) { .rc-hub-grid { grid-template-columns: 1fr; } }
.rc-hub-card {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--line); border-radius: 20px; padding: 28px 26px;
  text-decoration: none; background: var(--white);
  box-shadow: 0 1px 2px var(--shadow-soft), 0 12px 28px -16px var(--shadow-soft);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
a.rc-hub-card:hover {
  transform: translateY(-2px); border-color: var(--clay);
  box-shadow: 0 2px 4px var(--shadow-soft), 0 18px 36px -16px var(--shadow-strong);
}
a.rc-hub-card:focus-visible { outline: 1px solid var(--clay); outline-offset: 3px; }
.rc-hub-card .k { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chart-green); font-weight: 500; }
.rc-hub-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; letter-spacing: -0.01em; line-height: 1.15; color: var(--ink); margin: 0; }
.rc-hub-card p { margin: 0; font-size: 0.9rem; line-height: var(--lh-body); color: var(--text-secondary); flex: 1; }
.rc-hub-card .go { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay); font-weight: 500; margin-top: 6px; }
a.rc-hub-card:hover .go { text-decoration: underline; }
/* coming-soon stays flat so the live tools visibly stand off the page */
.rc-hub-card.soon { border-style: dashed; background: transparent; box-shadow: none; }
.rc-hub-card.soon .k { color: var(--ink-faint); }
.rc-hub-card.soon h3 { color: var(--muted); }
.rc-hub-card.soon .go { color: var(--ink-faint); }

/* ---------- plain tool wrapper: duty / borrowing pages without the rail shell ---------- */
.rc-tool { max-width: 1060px; padding: 0 clamp(24px, 3.5vw, 56px) clamp(28px, 4vw, 44px); }

/* ---------- sources dropdown (rate tables, verification dates) ---------- */
details.rc-sources { margin-top: 10px; border-top: 1px solid var(--line); }
details.rc-sources summary {
  cursor: pointer; list-style: none; padding: 16px 0;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--chart-green); font-weight: 500;
}
details.rc-sources summary::-webkit-details-marker { display: none; }
details.rc-sources summary::after { content: " +"; }
details.rc-sources[open] summary::after { content: " \2212"; }
details.rc-sources td { font-size: 0.875rem; color: var(--text-secondary); }

/* ---------- borrowing power: two-headline layout, detail toggle, levers ---------- */

/* Two headline blocks side by side: range (left) and monthly repayment (right).
   On phones they stack vertically with a divider between them. */
.bp-headlines {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}
.bp-headline-block { min-width: 0; }
.bp-headline-repay {
  border-left: 1px solid var(--line);
  padding-left: clamp(20px, 3vw, 48px);
}
@media (max-width: 640px) {
  .bp-headlines { grid-template-columns: 1fr; gap: 24px; }
  .bp-headline-repay { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 20px; }
}

/* /mo unit tag -- uses the same "to" sizing idiom as the range */
.bp-repay-unit {
  font-family: var(--font-body);
  font-size: 0.45em;
  color: var(--ink-faint);
  padding-left: 0.15em;
  vertical-align: baseline;
}
/* sub-note under the repayment figure */
.bp-repay-sub {
  display: block;
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-family: var(--font-body);
  line-height: 1.4;
}

/* Assumptions detail row: a quiet toggle that expands/collapses the stats block */
.bp-detail-row { border-top: 1px solid var(--line); }
.bp-detail-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 10px;
  font-family: var(--font-mono);
}
.bp-detail-toggle:focus-visible { outline: 1px solid var(--clay); outline-offset: 3px; border-radius: 4px; }
.bp-detail-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.bp-detail-arrow {
  font-size: 1rem;
  color: var(--clay);
  flex: none;
  line-height: 1;
  transition: transform 0.2s ease;
}
.bp-detail-toggle[aria-expanded="true"] .bp-detail-arrow { transform: rotate(45deg); }
.bp-detail-panel { padding-bottom: 8px; }

.bp-range-figure {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em;
  font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.05; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bp-range-figure .to { font-family: var(--font-body); font-size: 0.45em; color: var(--ink-faint); padding: 0 0.3em; }
.bp-track { position: relative; height: 12px; background: var(--mist); border-radius: 999px; margin: 20px 0 8px; overflow: hidden; }
.bp-band { position: absolute; top: 0; bottom: 0; background: var(--dark-green); border-radius: 999px; transition: left 0.3s ease, right 0.3s ease; }
.bp-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-faint); }
.bp-zero, .rc-loancap {
  margin-top: 18px; padding: 14px 18px; border: 1px solid var(--clay); border-radius: 14px;
  background: var(--accent-soft); font-size: 0.9rem; line-height: var(--lh-body); color: var(--text-secondary);
}
.rc-loancap { margin-bottom: 6px; }
.bp-zero strong { color: var(--accent-deep); }
.bp-check { display: flex; align-items: center; gap: 9px; font-size: 0.875rem; color: var(--text-secondary); cursor: pointer; }
.bp-check input { width: 17px; height: 17px; accent-color: var(--dark-green); margin: 0; cursor: pointer; }
.bp-levers { margin-top: 10px; }
.bp-lever { display: grid; grid-template-columns: minmax(170px, 250px) 1fr 110px; gap: 16px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.bp-lever:last-child { border-bottom: none; }
.bp-lever .name { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.35; }
.bp-lever .bar-track { height: 8px; background: var(--mist); border-radius: 999px; overflow: hidden; }
.bp-lever .bar { height: 100%; background: var(--dark-green); border-radius: 999px; transition: width 0.35s ease; }
.bp-lever .delta { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--dark-green); text-align: right; }
@media (max-width: 640px) {
  .bp-lever { grid-template-columns: 1fr 96px; gap: 8px 14px; padding: 14px 0; }
  .bp-lever .name { grid-column: 1 / -1; }
}
/* the borrowing page keeps its input rail as a normal stacked block on phones
   (no sentence mode here; the floating bar keeps the live range on screen) */
@media (max-width: 920px) {
  .rc-rail.rc-rail-stack { display: block; position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--line); padding: 18px clamp(24px, 3.5vw, 56px) 26px; overflow: visible; }
  .rc-rail.rc-rail-stack .rc-rail-fade { display: none !important; }
  .rc-shell.rc-shell-stack { display: block; }
}

/* hold-vs-reset toggle on phones: full-width pills that wrap instead of
   bleeding past the right edge */
@media (max-width: 920px) {
  .rc-modechips { gap: 8px; }
  .rc-modechips .c-seg { display: flex; width: 100%; }
  .rc-modechips .c-seg button { flex: 1; white-space: normal; line-height: 1.3; padding: 8px 10px; }
}

/* prevailing-rate indicator: pulsing clay dot on the chart's right edge */
.rc-rate-dot { fill: var(--clay); }
.rc-rate-pulse {
  fill: var(--clay); opacity: 0.5;
  transform-box: fill-box; transform-origin: center;
  animation: rc-rate-pulse 2.4s ease-out infinite;
}
@keyframes rc-rate-pulse {
  0% { transform: scale(1); opacity: 0.5; }
  70% { transform: scale(3); opacity: 0; }
  100% { transform: scale(3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .rc-rate-pulse { animation: none; opacity: 0; } }

/* tiny axis caption (the dollar scale names itself on phones) */
.rc-axis-cap { font-family: var(--font-mono); font-size: 0.56rem; fill: var(--ink-faint); letter-spacing: 0.16em; }
@media (max-width: 920px) { .rc-axis-cap { font-size: 0.78rem; } }

/* ---------- on-strip button class (replaces inline rgba) ---------- */
.fgo-btn-onstrip { color: var(--cream-text); border-color: var(--on-strip-border); }

/* ---------- theme toggle (topbar, right of CTA) ---------- */
.rc-theme-toggle {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin: 0;
  border: 1px solid var(--line); border-radius: 50px;
  background: transparent; color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.rc-theme-toggle:hover { border-color: var(--clay); color: var(--clay); }
.rc-theme-toggle:focus-visible { outline: 1px solid var(--clay); outline-offset: 3px; }
/* light theme shows the moon (action = go dark); dark shows the sun */
.rc-theme-moon { display: block; }
.rc-theme-sun  { display: none; }
html[data-theme="dark"] .rc-theme-moon { display: none; }
html[data-theme="dark"] .rc-theme-sun  { display: block; }
@media (prefers-reduced-motion: reduce) { .rc-theme-toggle { transition: none; } }

/* primary button text must stay cream in dark mode: --cream flips to the page
   background there, which left dark text on the green CTA */
html[data-theme="dark"] .fgo-btn { color: var(--cream-text); }

/* ---------- mobilebar dark overrides (§4.6) ---------- */
/* the bar keeps color: var(--cream) from its base rule, which flips to the
   page background in dark mode; the figures need the dark text token */
html[data-theme="dark"] .rc-mobilebar { background: var(--sage); color: var(--ink); }
html[data-theme="dark"] .rc-mobilebar .val .good { color: var(--chart-green); }
html[data-theme="dark"] .rc-mobilebar .c-label { color: rgba(236, 231, 219, 0.6); }

/* ============================================================
   Stamp duty calculator: tool-internal reskin (calculators.css retirement).
   This page is the only consumer; selectors are sd-/#curve scoped so the
   borrowing-power and repayment pages are untouched. Tokens only.
   Dark mode: every surface verified under html[data-theme="dark"].
   ============================================================ */

/* 2.1 - Control rows (replaces .segrow) */
.sd-controlrow { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding: 8px 0 0; }

/* 2.2 - Settlement-date inline control (replaces .ctx) */
.sd-ctx {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.sd-ctx input[type="date"] {
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0;
  color: var(--ink); background: transparent;
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px;
  text-transform: none; color-scheme: light dark;
}
.sd-ctx input[type="date"]:focus-visible { outline: 1px solid var(--clay); outline-offset: 2px; border-color: var(--clay); }

/* 2.3 - Section blocks (replaces section.block) */
.sd-block { margin-top: clamp(48px, 7vw, 72px); }
.sd-block > h2 { margin: 0; }
.sd-block > .sub { margin: 14px 0 0; max-width: 70ch; }
.sd-block .rc-tablewrap, .sd-block #curve { margin-top: 24px; }

/* 2.4 - Comparison table add-ons (on top of .rc-table) */
#compare td:first-child, #compare th:first-child { text-align: left; }
#compare th, #compare td { text-align: right; font-family: var(--font-mono); font-size: 0.85rem; }
#compare th { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; }
#compare td { font-variant-numeric: tabular-nums; }
#compare td:first-child { color: var(--clay); font-family: var(--font-mono); }
#compare tr.current td { background: var(--mist); }
#compare td.zero { color: var(--dark-green); font-weight: 600; }
#compare td .b {
  display: block; font-family: var(--font-body); font-size: 0.78rem;
  color: var(--ink-faint); font-weight: 400; letter-spacing: 0; max-width: 30ch; margin-top: 4px;
}

/* 2.5 - Dashed legend swatch (on top of .rc-legend) */
.rc-legend .sd-key-dashed {
  background: repeating-linear-gradient(to right, var(--ink-faint) 0 6px, transparent 6px 11px);
}

/* 2.6 - Chart SVG element styles (moved from calculators.css, scoped to #curve) */
#curve { width: 100%; height: auto; display: block; margin-top: 20px; overflow: visible; }
#curve .axis text { font-family: var(--font-mono); font-size: 0.6875rem; fill: var(--ink-faint); letter-spacing: 0.06em; }
#curve .axis line { stroke: var(--line); stroke-width: 1; opacity: 0.45; }
.duty-line { fill: none; stroke: var(--chart-green); stroke-width: 2.5; }
.ref-line { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; stroke-dasharray: 5 5; }
.zone-exempt { fill: var(--sage); opacity: 0.5; }
.zone-taper { fill: var(--mist); opacity: 0.7; }
.zone-label { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; fill: var(--chart-green); letter-spacing: 0.06em; }
.threshold-line { stroke: var(--clay); stroke-width: 1; stroke-dasharray: 2 4; }
.threshold-label { font-family: var(--font-mono); font-size: 0.6875rem; fill: var(--clay); font-weight: 600; }
.you-marker { fill: var(--clay); }
.you-label { font-family: var(--font-mono); font-size: 0.6875rem; fill: var(--clay); font-weight: 600; }

/* 3 - Zero-state green on the total figure */
.sd-results .c-stat-figure.zero-good { color: var(--dark-green); }

/* 2.7 - Mobile overrides for chart and table (under 760px) */
@media (max-width: 760px) {
  #curve .axis text, #curve .threshold-label, #curve .you-label { font-size: 0.9375rem; }
  #curve .zone-label { display: none; }
  #compare td .b { display: none; }
  #compare th, #compare td { font-size: 0.72rem; padding: 11px 8px 11px 0; }
}

/* state selector: always-visible grid with real touch targets.
   Desktop = one row of 8; mobile = 4x2. Buttons echo the c-seg look so the
   selector reads as family with the buyer/property segments below it.
   Buttons are JS-created bare <button>s; keep the descendant selector. */
.sd-statebar { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; padding: 26px 0 0; max-width: 720px; }
.sd-statebar button {
  font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.005em;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  min-height: 40px; padding: 8px 4px; border-radius: 50px; cursor: pointer;
  touch-action: manipulation;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.sd-statebar button:hover { color: var(--clay); border-color: var(--clay); }
.sd-statebar button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.sd-statebar button:focus-visible { outline: 1px solid var(--clay); outline-offset: 2px; }
@media (max-width: 640px) {
  .sd-statebar { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .sd-statebar button { min-height: 46px; font-size: 0.9rem; }
}

/* foreign purchaser: rare case, so it parks quietly at the row's right edge
   instead of crowding the property-type segments */
.sd-foreign { margin-left: auto; font-size: 0.8rem; color: var(--muted); }
.sd-foreign input { width: 15px; height: 15px; }

/* content links on calculator pages: the site convention (.blog-content a)
   is dark-green underlined; without this rule new in-prose links render
   browser-default blue (live-caught by Gabe 13 Jun). Buttons excluded. */
.rc-article a:not(.fgo-btn), .rc-art-body a:not(.fgo-btn), .sd-block a:not(.fgo-btn), .bp-zero a, .rc-loancap a, .c-field-note a:not(.fgo-btn), .rc-mistcard a:not(.fgo-btn) {
  color: var(--clay); text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.3s ease;
}
.rc-article a:not(.fgo-btn):hover, .rc-art-body a:not(.fgo-btn):hover, .sd-block a:not(.fgo-btn):hover, .bp-zero a:hover, .rc-loancap a:hover, .c-field-note a:not(.fgo-btn):hover, .rc-mistcard a:not(.fgo-btn):hover { color: var(--accent-deep); }

/* ---------- desktop shell (13 Jun): inputs in the rail, live results and the
   cliffs curve in the pane, the same one-screen experience as the repayment
   calculator. Comparison table and articles stay full-width below. ---------- */
.sd-shell .sd-statebar { grid-template-columns: repeat(4, 1fr); max-width: none; padding: 6px 0 0; gap: 8px; }
.sd-shell .sd-statebar button { min-height: 38px; padding: 8px 2px; }
.sd-shell .c-seg-fill button { padding: 8px 4px; }
.sd-shell .sd-foreign { margin-left: 2px; padding: 4px 0 8px; }
.sd-shell .sd-controlrow { padding: 0; }
.sd-cliffs { margin-top: 30px; }
.sd-cliffs #curve { width: 100%; height: auto; display: block; margin-top: 14px; }
/* the global mobile rule hides .rc-rail in favour of the repayment page's
   sentence block; this page has no sentence, the rail IS the mobile UI */
.sd-shell .rc-rail { display: block; }
/* mobile bar, stamp variant: four short values in one row read tighter than
   the repayment bar's 2x2, whose long values fill the width naturally */
@media (max-width: 920px) {
  .sd-bar .mb-grid { grid-template-columns: repeat(4, max-content); gap: 4px 10px; }
  .sd-bar .c-label { white-space: nowrap; }
  .sd-bar .val { overflow: visible; }
  .sd-shell .sd-statebar button { min-height: 46px; font-size: 0.9rem; }
}
/* sub-360px devices (iPhone SE 1st gen, small Androids): the seg capsules'
   no-wrap buttons otherwise force a ~347px minimum page width, overflowing
   the screen and dragging the fixed bar partially offscreen */
@media (max-width: 359px) {
  .sd-shell .c-seg-fill { flex-wrap: wrap; }
  .sd-shell .c-seg-fill button { flex: 1 1 auto; }
  /* tighten the floating-bar columns so 3 longer-value cells (NG) fit at 320px */
  .sd-bar .mb-grid { gap: 4px 6px; }
  .sd-bar .val { font-size: 1rem; }
}
/* narrow screens, foreign mode: four cells in one row overflow at <=375px,
   so the bar folds to 2x2 only while the Total cell is present (JS toggles
   has-total; :has() is avoided for old-Safari support) */
@media (max-width: 389px) {
  .sd-bar.has-total .mb-grid { grid-template-columns: repeat(2, max-content); justify-content: space-between; gap: 4px 18px; }
}