:root {
--dark-teal: #004A5C;
--mid-teal: #00738F;
--bright-teal: #038EB5;
--light-teal: #7FC6DC;
--orange: #E37A1C;
--orange-dark: #B85A0E; /* a11y-safe on peach/white; also matches unlocked accent bar */
--orange-soft: #FDEEDC;
--base-ref-bg: #F9D6B4;
--base-ref-border: #E0A775;
--green-olive: #9EA617;
--gold: #E4A025;
--ink: #1A2A2F;
--ink-soft: #4A5B60;
--paper: #FBFAF6;
--paper-2: #FFFFFF;
--line: #E6E4DB;
--highlight: #FFF4E8;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: 'Roboto', system-ui, sans-serif;
background: var(--paper);
color: var(--ink);
line-height: 1.5;
min-height: 100vh;
padding: 12px 24px 20px;
}
.app {
max-width: 1360px;
margin: 0 auto;
}
/* ---------- Unlock-mode status banner ----------
Shows when body has .rmo-unlock-mode. Hidden otherwise. */
.rmo-unlock-banner {
display: none;
align-items: center;
gap: 14px;
background: linear-gradient(90deg, var(--orange) 0%, #F09240 100%);
color: #fff;
padding: 11px 18px;
border-radius: 8px;
margin: 0 0 20px;
font-size: 13px;
box-shadow: 0 3px 10px -3px rgba(227, 122, 28, 0.5);
animation: rmoBannerSlideIn .35s ease-out;
}
body.rmo-unlock-mode .rmo-unlock-banner { display: flex; }
@keyframes rmoBannerSlideIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.rmo-unlock-banner-icon {
background: #fff;
color: var(--orange);
width: 22px; height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
}
.rmo-unlock-banner-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 1px;
line-height: 1.3;
}
.rmo-unlock-banner-text strong {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 11px;
font-weight: 700;
}
.rmo-unlock-banner-text span {
font-size: 12.5px;
opacity: 0.95;
}
.rmo-unlock-banner-reset {
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.5);
color: #fff;
padding: 7px 13px;
border-radius: 5px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background .15s, border-color .15s;
white-space: nowrap;
letter-spacing: 0.02em;
}
.rmo-unlock-banner-reset:hover {
background: rgba(255, 255, 255, 0.3);
border-color: #fff;
}
.intro {
text-align: center;
margin: 0 auto 14px;
padding: 0 16px 0;
}
.intro h1 {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 32px;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--dark-teal);
margin: 0 0 8px;
white-space: nowrap;
}
.intro p {
font-size: 15px;
line-height: 1.5;
color: var(--ink-soft);
max-width: 760px;
margin: 0 auto;
}
.intro p strong {
color: var(--ink);
font-weight: 600;
}
@media (max-width: 1060px) {
.intro h1 { font-size: 30px; white-space: normal; }
.intro p { font-size: 15px; }
}
@media (max-width: 560px) {
.intro h1 { font-size: 24px; }
}
.grid {
display: grid;
/* Re-weighted toward the chart: chart panel is the answer (the
thing the user came here to see), Assumptions is the inputs.
Narrowing the left panel from 440px to 360px gives the chart
~80px more horizontal room \u2014 fatter bars, more headline
gravity \u2014 while still leaving the profile-bar 3-col grid
and the levers table readable on the left. */
grid-template-columns: 360px 1fr;
/* Two rows: row 1 holds the Assumptions panel + Chart panel
side-by-side (assumptions stretches to match chart-panel
height); row 2 holds the KPI strip in the right column only
so the KPIs sit directly below the chart, not below the
assumptions panel. */
grid-template-rows: auto auto;
column-gap: 28px;
row-gap: 18px;
align-items: stretch;
}
/* Place direct grid children explicitly so the assumption panel
(row 1 col 1) stretches only to the chart panel's height (row
1 col 2), not the chart + KPI strip together. The KPI strip
sits in row 2 spanning BOTH columns so the "result" reveal
uses the full page width below the assumptions + chart row. */
.grid > aside.panel { grid-column: 1; grid-row: 1; }
.grid > .chart-panel { grid-column: 2; grid-row: 1; }
.grid > .summary-section { grid-column: 1 / -1; grid-row: 2; }
/* ---------- Assumptions Panel ---------- */
/* Flex-column so the trailing .panel-footer-spacer can grow and
absorb whatever leftover height the grid hands us — keeps the
bottom edge aligned with the chart panel without stretching
any of the content rows. */
.panel {
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.panel-title {
text-align: center;
padding: 6px 20px 4px;
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 17px;
color: var(--ink);
letter-spacing: -0.01em;
line-height: 1.2;
}
.panel-title small {
display: block;
font-family: 'Roboto', sans-serif;
font-weight: 500;
color: var(--ink-soft);
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 4px;
}
.table {
width: calc(100% - 32px);
margin: 12px 16px 20px;
border-collapse: separate;
border-spacing: 0;
border: 2px solid var(--orange);
border-radius: 4px;
overflow: hidden;
table-layout: fixed;
}
.table col.col-factor { width: 40%; }
.table col.col-base { width: 30%; }
.table col.col-scenario { width: 30%; }
.table thead th {
padding: 10px 14px;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.02em;
text-align: center;
line-height: 1.2;
vertical-align: top;
}
/* All three headers share a single dark-teal background so the header
row reads as one unified band. Column identity is carried by the
cells below (peach Base Case, teal-tinted Scenario) plus the orange
separator borders — not by the header colors themselves. */
.table thead th.h-factor {
background: var(--dark-teal);
color: #fff;
text-align: left;
vertical-align: middle;
border-right: 2px solid var(--orange);
}
.table thead th.h-base {
background: var(--dark-teal);
color: #fff;
}
.table thead th.h-scenario {
/* Dark-teal background like the other headers, but with a thin
light-teal accent band along the bottom edge that matches the
"Increase over base case" segment in the chart. The accent is
subtle enough not to disrupt the header row, but it visually
hooks the Scenario column to the impact data — these inputs
drive that lighter slice. */
background: var(--dark-teal);
color: #fff;
border-left: 2px solid var(--orange);
box-shadow: inset 0 -4px 0 0 var(--light-teal);
}
.table thead .h-title {
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 12px;
}
.table thead .h-output {
margin-top: 3px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
opacity: 0.92;
font-variant-numeric: tabular-nums;
font-family: 'Roboto', sans-serif;
font-style: italic;
}
.table thead .h-output span {
font-weight: 600;
font-style: normal;
font-family: 'Roboto', sans-serif;
}
.table thead .h-output .h-arrow {
margin-left: 2px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-style: normal;
opacity: 0.7;
}
/* Light-teal chip + "drives Increase" label that names the relationship
between the Scenario column and the chart's lighter bar segment.
Persistent (won't be overwritten when JS updates the +20%-applied
line), and sits between the title and the live value. */
.table thead th.h-scenario .h-scenario-tie {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 4px;
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
letter-spacing: 0.01em;
line-height: 1;
}
.table thead th.h-scenario .h-output-swatch {
width: 10px;
height: 10px;
border-radius: 2px;
background: var(--light-teal);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
flex-shrink: 0;
}
/* Keep the existing .h-output (italic +20% applied) but tighten the
spacing now that it sits below the tie label. */
.table thead th.h-scenario .h-output {
margin-top: 4px;
}
.table tbody tr {
border-bottom: 1px solid var(--orange);
}
.table tbody td {
padding: 0;
font-size: 15px;
border-top: 1px solid var(--orange);
background: #fff;
}
.table tbody td.label {
padding: 0 14px;
color: var(--ink);
font-weight: 500;
border-right: 2px solid var(--orange);
}
.table tbody td.value {
text-align: center;
/* Same peach as the chart's Base Case reference band — ties the
column and the bar's backshade into one visual element. */
background: var(--base-ref-bg);
}
.table tbody td.value .input-wrap {
display: inline-flex;
align-items: baseline;
justify-content: center;
gap: 0;
padding: 8px 8px;
}
.table tbody td.value .input-wrap .prefix,
.table tbody td.value .input-wrap .suffix {
font-size: 15px;
color: var(--ink-soft);
font-weight: 500;
pointer-events: none;
user-select: none;
font-variant-numeric: tabular-nums;
}
.table tbody td.value input {
border: none;
background: transparent;
padding: 0;
margin: 0;
font-family: inherit;
font-size: 15px;
color: var(--ink);
text-align: right;
outline: none;
font-weight: 600;
font-variant-numeric: tabular-nums;
-moz-appearance: textfield;
/* Auto-size to content so the $ sits tight against the digits */
field-sizing: content;
min-width: 1.2ch;
max-width: 9ch;
}
.table tbody td.value input::-webkit-outer-spin-button,
.table tbody td.value input::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.table tbody td.value input:focus {
background: #fff;
border-radius: 3px;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}
/* Static label cell ("Current Rates") — its text styling differs from
numeric inputs: smaller, centred, muted. Targeted by id rather than
[readonly] because Base Case inputs ALSO get readonly toggled on
in Simple mode and we don't want them shrunk + centred. */
.table tbody td.value input#annuitLabel {
text-align: center;
cursor: default;
font-size: 13px;
font-weight: 500;
color: var(--ink-soft);
min-width: 11ch;
}
/* Scenario column — read-only values */
.table tbody td.scenario {
border-left: 2px solid var(--orange);
text-align: center;
/* Faint light-teal wash on the entire scenario column so it visually
reads as the same data as the "Increase over base case" segment
in the chart. Very subtle (~8% tint) — the rows that actually
change get a stronger version below. */
background: rgba(127, 198, 220, 0.08);
}
.table tbody td.scenario .scenario-wrap {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 4px;
}
/* When the row is editable (has a per-var shift chip), stack the
scenario value above the per-var ± chip. Originally the design
placed them side-by-side, but the Scenario column is only ~120px
wide and the chip itself is ~77px — together they overflow. We
keep them in column flow and let the chip sit beneath the value.
`order` lets the value still read first visually even though the
chip comes first in the DOM. */
/* When the per-var chip is shown, stack the result (e.g. "8.4%")
above the chip in a tight column. The cell is only ~120px so
side-by-side overflows; column flow keeps it compact. */
.table tbody td.scenario .scenario-wrap:has(.scenario-shift) {
flex-direction: column;
align-items: center;
gap: 4px;
padding: 6px 4px;
}
.table tbody td.scenario .scenario-wrap:has(.scenario-shift) .scenario-result { order: 0; }
.table tbody td.scenario .scenario-wrap:has(.scenario-shift) .scenario-shift { order: 1; }
/* Per-variable chips USED to live in the Assumptions table's
Scenario column. They've been replaced by the mini-levers grid
in the scenario card hero. The chip inputs remain in the DOM as
the source of truth (calc + reset + persistence read/write
#shiftDeferral / #shiftMatch / #shiftReturns / #shiftRkFees), but
they're permanently hidden from view. */
.table tbody td.scenario .scenario-shift {
display: none !important;
}
/* Per-variable %-shift chip (sits ABOVE the scenario value).
This is the user's per-variable nudge — "Returns +5%", "Fees -30%".
Range -50 to +50. Sign matters and is shown explicitly.
Layout: [ ▼ ][ -20 % ][ ▲ ] — chevron buttons step the value by 1
so the user has a visible affordance instead of relying on keyboard. */
.table tbody td.scenario .scenario-shift {
display: inline-flex;
align-items: stretch;
gap: 0;
padding: 0;
border: 1px solid rgba(0, 74, 92, 0.18);
border-radius: 999px;
background: #fff;
transition: border-color .12s, background .12s, box-shadow .12s;
line-height: 1;
overflow: hidden;
}
.table tbody td.scenario .scenario-shift-step {
appearance: none;
-webkit-appearance: none;
border: none;
background: transparent;
cursor: pointer;
padding: 0 5px;
color: var(--mid-teal);
font-size: 10px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .12s, color .12s;
/* Chevrons are SVGs sized 8x8; this width keeps the chip compact */
min-width: 16px;
}
.table tbody td.scenario .scenario-shift-step:hover {
background: rgba(3, 142, 181, 0.10);
color: var(--bright-teal);
}
.table tbody td.scenario .scenario-shift-step:active {
background: rgba(3, 142, 181, 0.18);
}
.table tbody td.scenario .scenario-shift-step svg {
width: 8px;
height: 8px;
display: block;
}
/* Wrap input + suffix as a centred middle column so the chevrons
hug each end and the number stays optically centred. */
.table tbody td.scenario .scenario-shift-value {
display: inline-flex;
align-items: baseline;
padding: 3px 1px;
cursor: text;
}
.table tbody td.scenario .scenario-shift:hover {
border-color: rgba(0, 74, 92, 0.45);
background: #FCFEFE;
}
.table tbody td.scenario .scenario-shift:focus-within {
border-color: var(--bright-teal);
background: #fff;
box-shadow: 0 0 0 3px rgba(3, 142, 181, 0.16);
}
.table tbody td.scenario .scenario-shift-input {
border: none;
outline: none;
background: transparent;
font: inherit;
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--dark-teal);
width: 3.4ch;
text-align: center;
padding: 0;
/* Hide the native spinner — chevron buttons replace it */
-moz-appearance: textfield;
appearance: textfield;
}
.table tbody td.scenario .scenario-shift-input::-webkit-outer-spin-button,
.table tbody td.scenario .scenario-shift-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.table tbody td.scenario .scenario-shift-suffix {
font-size: 11px;
font-weight: 600;
color: var(--mid-teal);
margin-left: 1px;
}
/* Visual treatment when shift is exactly 0: chip dims out so the
user sees at a glance which variables have actually been moved. */
.table tbody td.scenario .scenario-shift.is-zero {
opacity: 0.55;
}
.table tbody td.scenario .scenario-shift.is-zero .scenario-shift-input {
color: var(--ink-soft);
font-weight: 600;
}
/* Result row (bottom of the cell) — the computed scenario value */
.table tbody td.scenario .scenario-result {
display: inline-flex;
align-items: baseline;
justify-content: center;
gap: 1px;
}
.table tbody td.scenario .scenario-wrap .prefix,
.table tbody td.scenario .scenario-wrap .suffix {
font-size: 15px;
color: var(--mid-teal);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.table tbody td.scenario .scenario-wrap .val {
font-size: 15px;
font-weight: 700;
color: var(--dark-teal);
font-variant-numeric: tabular-nums;
}
/* After unlock: scenario column cells become editable inputs.
The goal is for these to read IMMEDIATELY as "you can type here" —
warmer fill than read-only neighbors, bolder border, focus halo,
and a brief attention-pulse when they first appear on unlock.
The bordered box lives on the .scenario-wrap, NOT the input itself,
so the $ prefix and % suffix sit inside the same visual container
as the typing area. We use a JS-toggled class (.rmo-editable)
rather than :has() for universal browser support. */
/* One-shot "you can type here" pulse, fired on entering unlock mode.
Bound to a transient class (.rmo-pulse-once) — added by JS when
unlock starts, removed in `animationend`, so it can never re-run
on click/focus and can never overlap with subsequent interactions
on neighboring cells. Single short pulse (~0.7s) so the animation
is finished well before the user has time to reach for a cell to
click — long/multi-iteration pulses created the impression that
"the wrong cell pulsed when I clicked." */
@keyframes rmoUnlockAttention {
0% { box-shadow: 0 0 0 0 rgba(227, 122, 28, 0.6); transform: scale(1); }
50% { box-shadow: 0 0 0 10px rgba(227, 122, 28, 0); transform: scale(1.05); }
100% { box-shadow: 0 0 0 0 rgba(227, 122, 28, 0); transform: scale(1); }
}
/* Teal variant — used for the Scenario column's "adjust each lever"
pulse so it matches the column's teal/blue language. The Customize
pulse on the Base Case inputs stays orange (rmoUnlockAttention). */
@keyframes rmoTweakAttention {
0% { box-shadow: 0 0 0 0 rgba(3, 142, 181, 0.6); transform: scale(1); }
50% { box-shadow: 0 0 0 10px rgba(3, 142, 181, 0); transform: scale(1.05); }
100% { box-shadow: 0 0 0 0 rgba(3, 142, 181, 0); transform: scale(1); }
}
.table tbody td.scenario .scenario-wrap.rmo-pulse-once {
/* User feedback: 0.7s felt too quick — slowed to 1.4s so the
cue feels deliberate. Still finished before the user has
time to click anything. Teal halo to match the Scenario column. */
animation: rmoTweakAttention 1.4s ease-out 1;
}
/* Orange pulse, applied to the Base Case input-wraps when the
"Show my fields" tab is clicked — orange halo + 1.05× scale
to draw the eye to the 4 editable inputs. */
.table tbody td.value .input-wrap.rmo-pulse-once {
animation: rmoUnlockAttention 1.4s ease-out 1;
}
/* Clamp feedback — fires when the user types a value above max
(or below min) and the field auto-pins to the boundary on blur.
Different intent from the "unlock" pulse: this is a correction
cue, not an invitation. Soft red halo + a tiny side-to-side
wobble so the eye lands on the field that was adjusted. */
@keyframes rmoClampPulse {
0% { box-shadow: 0 0 0 0 rgba(200, 60, 40, 0); transform: translateX(0); }
15% { box-shadow: 0 0 0 4px rgba(200, 60, 40, 0.45); transform: translateX(-2px); }
35% { transform: translateX(2px); }
55% { transform: translateX(-1px); }
75% { box-shadow: 0 0 0 8px rgba(200, 60, 40, 0); transform: translateX(0); }
100% { box-shadow: 0 0 0 0 rgba(200, 60, 40, 0); transform: translateX(0); }
}
.table tbody td.value .input-wrap.rmo-clamp-flash,
.scenario-shift.rmo-clamp-flash {
animation: rmoClampPulse 0.7s ease-out 1;
}
/* Toast that announces the clamp ("Capped at 100%"). Lives at the
bottom-right, fades in/out, polite aria-live so screen readers
get the same info without it being intrusive. */
.rmo-clamp-toast {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 1000;
padding: 10px 14px;
background: #2A1410;
color: #FFE7DF;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1.3;
border-radius: 8px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}
.rmo-clamp-toast.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Wrap takes on the "editable box" appearance.
Note: previously included a 2.8s "rmoUnlockAttention" pulse
animation (orange halo + 1.06× scale, 2 iterations) that ran on
entering unlock mode. Removed because the pulse was still mid-
cycle when users started clicking values, which made it look
like the wrong cell was responding to their click. The orange
border + row banner already flag editability strongly enough. */
.table tbody td.scenario .scenario-wrap.rmo-editable {
border: 2px solid var(--orange);
border-radius: 5px;
padding: 3px 8px;
/* Fixed width so all 4 editable boxes are visually identical,
regardless of whether they carry a $ prefix or % suffix. */
width: 84px;
justify-content: center;
background: #FFFBEE;
cursor: text;
transition: border-color .1s, box-shadow .1s, background .1s;
}
.table tbody td.scenario .scenario-wrap.rmo-editable:hover {
background: #FFF6DB;
border-color: #C46915;
}
.table tbody td.scenario .scenario-wrap.rmo-editable:focus-within {
background: #fff;
border-color: var(--bright-teal);
box-shadow: 0 0 0 3px rgba(3, 142, 181, 0.22);
}
/* Input is "naked" — styling comes from the bordered wrap around it */
.table tbody td.scenario .scenario-wrap input.val.scenario-custom {
width: auto;
min-width: 1.5ch;
max-width: 6ch;
border: none;
border-radius: 0;
padding: 0;
background: transparent;
font-family: inherit;
font-size: 15px;
font-weight: 700;
color: var(--dark-teal);
text-align: right;
font-variant-numeric: tabular-nums;
outline: none;
field-sizing: content;
}
/* $ prefix and % suffix — now inside the bordered box, slightly muted
so the number stays the focal point. pointer-events:none makes
clicks on $/% fall through to the wrap so the click handler below
can focus the input with the cursor at the end — this lets users
click on $ or % (or any part of the 84px box) and start editing
naturally, instead of the symbols being dead zones. */
.table tbody td.scenario .scenario-wrap.rmo-editable .prefix,
.table tbody td.scenario .scenario-wrap.rmo-editable .suffix {
color: var(--dark-teal);
font-weight: 700;
opacity: 0.7;
pointer-events: none;
}
/* Highlight the 4 rows that actually change under the scenario.
Stronger light-teal tint than the column wash — these rows are
the actual drivers of the "Increase over base case" bar. */
.table tbody td.scenario.changes {
background: rgba(127, 198, 220, 0.28);
}
/* ── Scenario ↔ chart "Increase" hover linking ──
When the user hovers the Scenario column, both the column wash and
the chart's "Increase" segments brighten in lockstep (chart side
is handled in JS via dataset border tweaks). When the user hovers
an "Increase" bar segment in the chart, the body gains
.rmo-impact-hover and the Scenario column gets a soft glowing ring,
making the "this column drives those slices" relationship feel
causal rather than coincidental. */
body.rmo-scenario-hover .table tbody td.scenario {
background: rgba(127, 198, 220, 0.22);
transition: background .12s;
}
body.rmo-scenario-hover .table tbody td.scenario.changes {
background: rgba(127, 198, 220, 0.45);
}
body.rmo-impact-hover .table thead th.h-scenario,
body.rmo-impact-hover .table tbody td.scenario {
box-shadow: inset 2px 0 0 var(--light-teal),
inset -2px 0 0 var(--light-teal);
}
body.rmo-impact-hover .table thead th.h-scenario {
/* Preserve the existing inset bottom-edge accent strip while adding
the side rings; combine into one box-shadow so they don't fight. */
box-shadow: inset 0 -4px 0 0 var(--light-teal),
inset 2px 0 0 var(--light-teal),
inset -2px 0 0 var(--light-teal);
}
.table tbody td.scenario.unchanged .scenario-wrap {
color: var(--ink-soft);
opacity: 0.45;
}
.table tbody td.scenario.unchanged .scenario-wrap .val {
color: var(--ink-soft);
font-weight: 500;
font-size: 15px;
}
/* ─── Profile bar (the 6 employee/timeline fields above the table) ─
Pill-row layout that reads as compact background context, not as
a form. Each pill is `[Label] value`. By default the values
render as static text spans (.profile-display). When the user
activates Customize mode (body.rmo-unlock-base), the static
spans hide and the live s become visible — same DOM
elements the rest of the JS already wires up by id, so nothing
downstream has to change.
The section is intentionally restrained: small caps labels,
light-weight values, no accent fills. It's the table below
(the 4 scenario levers) that should pull focus. */
/* Tiny eyebrow label for the profile bar. Sits flush above the
pill grid as a quiet section header so the strip reads as
"Modeled for: " rather than orphaned chips. Uses
the same small-caps treatment as the .profile-pill
labels
for visual consistency. */
.profile-bar-heading {
margin: 18px 16px 0;
padding: 0;
font-family: 'Inter', sans-serif;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ink-soft);
line-height: 1;
}
/* Profile bar lives BELOW the 4-lever scenario table now, as
background context ("who we modeled this for"). The eyebrow
above carries the section spacing, so the bar itself sits
flush below it (6px) and keeps a 6px tail. */
.profile-bar {
margin: 6px 16px 6px;
padding: 12px 14px 12px;
background: rgba(173, 216, 226, 0.18);
border: 1px solid rgba(0, 74, 92, 0.10);
border-radius: 8px;
/* Grid: 3 columns \u00d7 2 rows for the 6 fields. Each cell stacks
its label above its value (vertical layout) so the value gets
the full cell width \u2014 wide values like "$70,784" or
"Current Rates" no longer collide with their labels. The bar
grows a bit taller than a single-row layout, which is fine:
the levers table next to it has only 4 rows, leaving room. */
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 14px;
}
.profile-pill {
min-width: 0;
padding: 0;
/* Stacked: label on top, value below. */
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
border-left: 0;
}
.profile-pill dt {
font-family: 'Inter', sans-serif;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0;
white-space: nowrap;
text-align: left;
}
.profile-pill dd {
margin: 0;
width: 100%;
min-width: 0;
font-family: 'Roboto', sans-serif;
font-size: 17px;
font-weight: 500;
color: var(--dark-teal);
line-height: 1.15;
font-variant-numeric: tabular-nums;
/* Reserve a tiny bit of vertical space so the pill height doesn't
jump when the display span is swapped for an input chip. */
min-height: 22px;
display: flex;
align-items: center;
/* Allow wrapping so longer text values like "Current Rates" don't
get clipped in a narrow pill. Numerics like "$70,784" are
short enough to stay on one line; long phrases wrap to 2. The
pill heights stay visually aligned because the grid row sizes
to its tallest cell. */
white-space: normal;
overflow-wrap: break-word;
}
/* Profile pills are ALWAYS read-only display, regardless of mode.
The Customize unlock affects ONLY the 4 scenario levers in the
table below \u2014 those are the things the tool is designed to
let users tweak. The 6 profile fields (age, salary, balance,
retirement timing, inflation, annuit. rate) are background
context about the modeled employee, not knobs to turn here.
The original s remain in the DOM (hidden) so the rest of
the JS keeps reading values via getElementById without changes.
If we ever want to expose profile editing again, it'd live in
a separate dialog \u2014 not the same Customize toggle. */
.profile-pill .profile-display { display: inline; }
.profile-pill .profile-input { display: none; }
/* Inputs sit inside the same .input-wrap chrome the table uses, but
scoped tighter so they fit the pill row. */
.profile-pill .input-wrap {
display: inline-flex;
align-items: center;
gap: 1px;
padding: 2px 6px;
border-radius: 5px;
}
.profile-pill .input-wrap input {
border: none;
background: transparent;
font: inherit;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 500;
color: var(--dark-teal);
padding: 0;
width: auto;
field-sizing: content;
min-width: 2ch;
max-width: 9ch;
font-variant-numeric: tabular-nums;
}
.profile-pill .input-wrap input::-webkit-outer-spin-button,
.profile-pill .input-wrap input::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.profile-pill .input-wrap input[type=number] { -moz-appearance: textfield; }
.profile-pill .input-wrap .prefix,
.profile-pill .input-wrap .suffix {
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: var(--ink-soft);
}
/* (Removed: profile-pill Customize-mode swap rules. Customize now
only affects the 4 scenario levers; profile fields stay
read-only in all modes.) */
/* Shared rows are gone */
/* Scenario column header subtitle — only shown in slider mode
(renders "+20% applied"). In unlock mode the row-banner below
the column header already says "Unlocked — edit each variable
below ↓" with full table-width, so we hide this smaller header
line to avoid redundancy. */
.scenario-header-unlocked {
display: none;
}
/* Lever-label tooltip: a small dotted underline on each variable-row
label hints there's a definition; on hover/focus we surface the
unit/meaning in a styled tooltip above the label. CSS-only so it
works without JS and is keyboard-accessible (tabindex=0 on the span). */
.table tbody tr.variable-row td.label .label-tip {
position: relative;
cursor: help;
outline: none;
}
.table tbody tr.variable-row td.label .label-tip:focus-visible {
box-shadow: 0 1px 0 0 var(--orange);
}
.table tbody tr.variable-row td.label .label-tip::after {
content: attr(data-tip);
position: absolute;
left: 0;
bottom: calc(100% + 8px);
width: max-content;
max-width: 240px;
padding: 8px 10px;
background: var(--ink);
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
opacity: 0;
transform: translateY(2px);
pointer-events: none;
transition: opacity .14s ease, transform .14s ease;
z-index: 50;
}
.table tbody tr.variable-row td.label .label-tip::before {
content: "";
position: absolute;
left: 12px;
bottom: calc(100% + 2px);
width: 0;
height: 0;
border: 6px solid transparent;
border-top-color: var(--ink);
opacity: 0;
pointer-events: none;
transition: opacity .14s ease;
z-index: 50;
}
.table tbody tr.variable-row td.label .label-tip:hover::after,
.table tbody tr.variable-row td.label .label-tip:focus-visible::after,
.table tbody tr.variable-row td.label .label-tip:hover::before,
.table tbody tr.variable-row td.label .label-tip:focus-visible::before {
opacity: 1;
transform: translateY(0);
}
/* Editable variable-row inputs (the 4 levers): give them a fixed
content width so all 4 input boxes are visually the same size in
Customize mode, regardless of how many digits the value has. ~3ch
fits 1-3 digit values cleanly; the centered text + bordered
wrap make it read as an input box without taking too much room.
Center-aligned (was right-aligned) so the digit sits visually
at the same x as the read-only values in the rest of the
Base Case column. */
.table tbody tr.variable-row td.value input {
field-sizing: content;
min-width: 1ch;
max-width: 4ch;
text-align: center;
}
/* Variable rows — the 4 levers the scenario changes.
The bold + dark-teal label combined with the orange-bordered
input wrap on the value side carries enough signal; no need for
a backshade on the label cell. */
.table tbody tr.variable-row td.label {
font-weight: 700;
color: var(--dark-teal);
}
/* Lock the 4 variable-row Base Case input wraps to a single shared
width and center their contents, so the column reads as a tidy
vertical stack regardless of digit count. Width is sized to fit
the widest value the user can plausibly type (e.g. "$165" / "100%"
/ "12.5%") with breathing room. */
.table tbody tr.variable-row td.value .input-wrap {
width: 76px;
justify-content: center;
}
/* Optional second line under a variable row's label — used to
disambiguate fields whose value is otherwise ambiguous (e.g.
"Employer Match" at 50% means "50% match per $1 deferred",
not "50% of salary"). Quiet, italic, smaller. */
.table tbody tr.variable-row td.label .label-sub {
display: block;
margin-top: 2px;
font-weight: 500;
font-style: italic;
font-size: 11px;
line-height: 1.25;
color: var(--ink-soft, #6b7a82);
letter-spacing: 0;
}
/* "Add your variables" mode — when toggled on, give the 4 variable
rows' Base Case input wraps visible input-box chrome (border +
white fill + hover/focus states) so it's clear they can be edited.
Off by default; toggled by the body class `rmo-unlock-base`,
set when the user clicks the "Customize" tab. Salary and
other rows are deliberately NOT included — only the 4 variables
the scenario changes get the treatment. */
body.rmo-unlock-base .table tbody tr.variable-row td.value .input-wrap {
border: 1.5px solid rgba(227, 122, 28, 0.55);
border-radius: 5px;
background: #fff;
box-shadow: 0 1px 2px rgba(227, 122, 28, 0.10);
padding: 6px 8px;
transition: border-color .12s, box-shadow .12s, background .12s;
}
body.rmo-unlock-base .table tbody tr.variable-row td.value .input-wrap:hover {
border-color: var(--orange);
background: #FFFCF6;
box-shadow: 0 1px 3px rgba(227, 122, 28, 0.22);
}
body.rmo-unlock-base .table tbody tr.variable-row td.value .input-wrap:focus-within {
border-color: var(--orange);
background: #fff;
box-shadow: 0 0 0 3px rgba(227, 122, 28, 0.20),
0 1px 2px rgba(227, 122, 28, 0.10);
}
/* Full-width scenario control bar — global setting that drives both the
Assumptions table and the bar chart. */
.scenario-card {
/* Hero card \u2014 deeper teal gradient, stronger border, prominent
shadow so this card reads as "the interactive control" rather
than "another KPI card." Padding is generous (18px/22px) so
the hero value typography sits in real whitespace. */
background: linear-gradient(135deg, #D4EAF1 0%, #EAF4F8 100%);
border: 1.5px solid rgba(3, 142, 181, 0.38);
border-radius: 10px;
padding: 10px 20px 12px;
display: flex;
flex-direction: column;
box-shadow: 0 6px 18px -4px rgba(0, 74, 92, 0.22);
position: relative;
overflow: hidden;
}
/* Hero placement: when the scenario card is promoted to sit above
.grid (page hero, not inside summary-strip), give it real breathing
room from the chart/assumptions row below it. */
.scenario-card--hero {
margin: 0 0 12px;
}
/* ---------- Scenario card: mode tabs ----------
Two tabs at the top of the card; one is always active. The active
tab reads as "white pill on tinted track" in slider mode, and as
"orange pill" once direct-edit is selected, matching the unlock
color family used elsewhere when the user is editing their plan. */
/* Card header — sits above the Simple/Customize tabs so the card
reads as a self-contained "Try a scenario" tool, not just an
unlabeled bar of controls. Compact: small kicker + 1-line subtitle. */
.scenario-card-header {
display: flex;
flex-direction: row;
align-items: baseline;
flex-wrap: wrap;
gap: 12px;
margin: 0 0 8px;
}
.scenario-card-header h3 {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 19px;
font-weight: 600;
color: var(--dark-teal);
letter-spacing: -0.01em;
line-height: 1.1;
}
.scenario-card-header p {
margin: 0;
font-size: 12px;
color: var(--ink-soft);
line-height: 1.35;
}
/* Mode tabs split into two semantic groups:
\u2022 Simple % change + Tweak each \u2192 act on the SCENARIO column
(so their active state picks up the teal of that column).
\u2022 Customize \u2192 acts on the BASE CASE column
(so its active state picks up the orange of unlocked-input chrome).
A wider gap between Tweak and Customize, plus the contrasting active
colors, signals the split without needing extra labels. */
.scenario-card-tabs {
display: grid;
grid-template-columns: 1fr 1fr 1px 1.05fr;
gap: 4px;
padding: 3px;
background: rgba(0, 74, 92, 0.07);
border-radius: 6px;
margin-bottom: 6px;
}
/* The 1px column between Tweak and Customize gets a faint vertical
rule, then a slightly larger flanking gap via negative margins on
its neighbours' inner padding. */
.scenario-card-tabs-divider {
align-self: stretch;
background: rgba(0, 74, 92, 0.18);
margin: 4px 4px;
border-radius: 1px;
}
.scenario-card-tab {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: none;
/* Vertical padding tightened a touch and tabs now host TWO lines
(label + sub-line). flex-column lets the sub-line sit centered
under the label with a tight 2px gap. */
padding: 12px 10px;
border-radius: 4px;
font-family: inherit;
color: var(--ink-soft);
cursor: pointer;
transition: background .15s, color .15s, box-shadow .15s;
line-height: 1.1;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
}
/* Primary tab label: original treatment (small caps, bold). */
.scenario-card-tab-label {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
}
/* Tab descriptor sub-line: smaller, sentence case, lighter, so it
reads as helper text. Inherits color from the parent tab so it
follows the active/inactive color shift without separate rules. */
.scenario-card-tab-sub {
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.01em;
text-transform: none;
opacity: 0.78;
line-height: 1.2;
}
.scenario-card-tab:hover {
color: var(--dark-teal);
background: rgba(255, 255, 255, 0.5);
}
/* Default active = teal (Scenario actions). */
.scenario-card-tab.is-active {
background: #fff;
color: var(--dark-teal);
box-shadow: 0 1px 2px rgba(0, 74, 92, 0.15);
}
/* Customize tab, when active, picks up orange to match the Base Case
editable-input chrome it unlocks down below. */
.scenario-card-tab[data-mode="edit"].is-active {
background: var(--orange);
color: #fff;
box-shadow: 0 1px 3px rgba(184, 90, 14, 0.35);
}
.scenario-card-tab[data-mode="edit"]:hover {
color: var(--orange-dark);
}
.scenario-card-tab[data-mode="edit"].is-active:hover {
color: #fff;
}
/* Panes: only the .is-active one shows. */
.scenario-card-pane { display: none; }
.scenario-card-pane.is-active { display: flex; flex-direction: column; }
/* Edit-mode pane: "Your Scenario" KPI shown when Customize is active. */
/* ---------- Mini-levers grid (inside Adjust + Customize panes) ----------
A 2×2 grid of compact sliders, one per lever. Replaces the
in-table chips that used to live in the Scenario column —
editing has all moved into the hero card so the Assumptions
table can stay pure readout. */
/* Caption above the grid — same typography as
.scenario-card-value-eyebrow on the Shift-all pane, so the
"% from base" context is preserved across both modes. */
.mini-levers-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
line-height: 1;
margin-bottom: 12px;
}
.mini-levers {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 22px;
width: 100%;
}
.mini-lever {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.mini-lever-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
}
.mini-lever-label {
font-family: 'Inter', sans-serif;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--ink);
}
.mini-lever-value {
font-family: 'Roboto', sans-serif;
font-weight: 600;
font-size: 16px;
color: var(--dark-teal);
line-height: 1;
/* Tabular-nums so the +/- and digits don't shift width as the
value changes during drag — keeps the right edge stable. */
font-variant-numeric: tabular-nums;
}
/* Reuse the .scenario-card-slider track styling already defined
for the master, but tighten margins for the smaller mini track. */
.mini-lever-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 18px;
background: transparent;
margin: 0;
cursor: pointer;
}
.mini-lever-slider::-webkit-slider-runnable-track {
height: 4px;
background: rgba(0, 74, 92, 0.18);
border-radius: 2px;
}
.mini-lever-slider::-moz-range-track {
height: 4px;
background: rgba(0, 74, 92, 0.18);
border-radius: 2px;
}
.mini-lever-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--orange);
border: 2px solid #FFFFFF;
box-shadow: 0 1px 3px rgba(184, 90, 14, 0.35);
margin-top: -6px;
cursor: pointer;
}
.mini-lever-slider::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--orange);
border: 2px solid #FFFFFF;
box-shadow: 0 1px 3px rgba(184, 90, 14, 0.35);
cursor: pointer;
}
/* When a mini-lever is at exactly 0%, dim it so users can see at
a glance which they've actually moved. Mirrors the .is-zero
treatment that used to be on the in-table chips. */
.mini-lever.is-zero .mini-lever-value {
color: var(--ink-soft);
opacity: 0.7;
}
.mini-lever.is-zero .mini-lever-slider::-webkit-slider-thumb {
background: var(--ink-soft);
box-shadow: none;
}
.mini-lever.is-zero .mini-lever-slider::-moz-range-thumb {
background: var(--ink-soft);
box-shadow: none;
}
.scenario-card-pane-edit {
gap: 4px;
padding: 4px 0 2px;
}
/* Customize tints the value + sub-line orange-dark so the whole
pane reads "this is editing the base case", matching the orange
tab + the orange-bordered base case inputs below. */
body.rmo-unlock-base .scenario-card-your-value,
body.rmo-unlock-base .scenario-card-your-unit,
body.rmo-unlock-base .scenario-card-your-delta {
color: var(--orange-dark);
}
.scenario-card-your-value {
font-family: 'Roboto', sans-serif;
font-weight: 600;
/* Was 56px \u2014 dialed down to 40px after the compare strip was
added below. The strip already gives the user the "base \u2192 your"
readout with a delta pill; the hero number doesn't need to
shout, just anchor the pane. 40px keeps it clearly the most
prominent thing in the card without crowding everything else. */
font-size: 40px;
line-height: 1;
color: var(--dark-teal);
margin-top: 4px;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.scenario-card-your-unit {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 17px;
color: var(--dark-teal);
opacity: 0.7;
margin-left: 4px;
letter-spacing: 0;
}
.scenario-card-your-delta {
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 600;
color: var(--orange);
margin-top: 6px;
letter-spacing: 0.01em;
}
/* ---------- Scenario card: hero pane chrome ---------- */
/* Tiny eyebrow above the hero value: "Monthly income with all 4
scenarios applied" / "Monthly income with your custom base case".
Smallcap-style for tertiary context. Color tints with the active
mode (orange in Customize, teal otherwise). */
.scenario-card-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-soft);
line-height: 1.2;
margin: 4px 0 0;
}
body.rmo-unlock-base .scenario-card-eyebrow {
color: var(--orange-dark);
opacity: 0.9;
}
/* Compare strip: "Base case → Your case" two cells separated by an
arrow, with a delta pill on the right. Lives only in the Tweak /
Customize pane. Visual goal: minimal extra height, but enough
contrast that the user can see "I moved this from X to Y" at a
glance without hunting for the Base Case KPI card. */
.scenario-card-compare {
display: grid;
grid-template-columns: auto auto auto 1fr;
align-items: center;
gap: 12px 14px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(0, 74, 92, 0.16);
}
body.rmo-unlock-base .scenario-card-compare {
border-top-color: rgba(184, 90, 14, 0.22);
}
.scenario-card-compare-cell {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.scenario-card-compare-label {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-soft);
line-height: 1.1;
white-space: nowrap;
}
.scenario-card-compare-value {
font-family: 'Roboto', sans-serif;
font-size: 22px;
font-weight: 600;
color: var(--dark-teal);
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
/* In Customize, the right-hand cell is the user's custom base \u2014
tint orange to keep the "you're editing" cue consistent. The
left-hand cell stays teal as the canonical / reference value. */
body.rmo-unlock-base .scenario-card-compare-cell:nth-child(3) .scenario-card-compare-value {
color: var(--orange-dark);
}
.scenario-card-compare-unit {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 500;
color: inherit;
opacity: 0.65;
margin-left: 2px;
}
.scenario-card-compare-arrow {
font-size: 22px;
color: var(--ink-soft);
opacity: 0.55;
line-height: 1;
align-self: end;
padding-bottom: 2px;
}
.scenario-card-compare-delta {
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 700;
color: var(--orange);
letter-spacing: 0.01em;
justify-self: end;
align-self: center;
text-align: right;
padding: 5px 11px;
background: rgba(227, 122, 28, 0.12);
border-radius: 999px;
line-height: 1.2;
white-space: nowrap;
}
.scenario-card-compare-delta.is-negative {
color: #B85A0E;
background: rgba(227, 122, 28, 0.18);
}
.scenario-card-compare-delta.is-zero {
color: var(--ink-soft);
background: rgba(0, 74, 92, 0.08);
opacity: 0.85;
}
.scenario-card-sub {
font-size: 11.5px;
color: var(--dark-teal);
text-transform: none;
letter-spacing: 0.01em;
line-height: 1.25;
font-weight: 500;
opacity: 0.85;
}
/* Show the right hint per mode — only Simple has a hint (it sits
under the slider). The Tweak/Customize pane now ALSO uses a hint
to point users at the right edit surface, so we scope the hide
to just the Simple pane's hint. */
body.rmo-show-chips .scenario-card-pane-shift .scenario-card-hint { display: none; }
/* Generic mode-conditional visibility helpers. Use these on any
copy that should differ between locked and unlocked base case —
e.g. the Assumptions panel subtitle. `rmo-customize-only` is
visible only in Customize mode (base unlocked); `rmo-simple-only`
hides there. */
.rmo-customize-only { display: none; }
.rmo-tweak-only { display: none; }
body.rmo-unlock-base .rmo-simple-only { display: none; }
body.rmo-unlock-base .rmo-customize-only { display: inline; }
/* Tweak mode = chips visible (rmo-show-chips) AND base case still
locked (NOT rmo-unlock-base). The :not() pins this to Tweak only,
since Customize also has rmo-show-chips. */
body.rmo-show-chips:not(.rmo-unlock-base) .rmo-tweak-only { display: inline; }
.scenario-card-hint {
margin: 10px 0 0;
padding: 0;
font-size: 11.5px;
line-height: 1.45;
/* Match the card subtitle ("Pick a mode, then move things\u2026")
which is --ink-soft. Previously --dark-teal @ .78 opacity, which
read as a muted teal against the card's teal-tinted background
and looked off-key vs. the subtitle right above it. */
color: var(--ink-soft);
}
/* When the card is in "mixed" state (per-var values diverge from
a single shared shift), render the master value as a muted "—"
so it's clear no single number describes the scenario anymore. */
.scenario-card.is-mixed .scenario-card-value {
color: var(--dark-teal);
font-size: 18px;
font-style: italic;
font-weight: 500;
opacity: 0.85;
}
.scenario-card.is-mixed .scenario-card-slider input[type=range] {
opacity: 0.55;
}
/* New row holds the 20% hero value on the left and the reset (↺)
button pushed to the right edge of the card. The button uses
margin-left: auto so it sits at the far right regardless of how
wide the value text is, giving a balanced reading: "this is the
scenario value … and here's how to reset it." */
.scenario-card-value-row {
display: flex;
align-items: baseline;
gap: 12px;
}
/* Eyebrow naming what the live "20%" value means ("Shift levers by").
Sits INLINE with the value (not stacked above it) so the hero
card's overall height doesn't grow. The value remains the
visual anchor — eyebrow is a quiet caption to its left. */
.scenario-card-value-eyebrow {
margin: 0;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
line-height: 1;
/* Inline beside the big serif value, not stacked above. The
value-row is baseline-aligned so this caption sits on the
same baseline as "20%" without growing the card. */
flex: 0 0 auto;
white-space: nowrap;
}
.scenario-card-value-row .scenario-card-reset {
margin-left: auto;
}
/* Wrap reset + mode toggle so they sit on the right together */
.scenario-card-head-actions {
display: inline-flex;
align-items: center;
gap: 10px;
}
/* ── Mode tabs (Slider ↔ Direct edit) ──
Two equal-weight tabs at the top of the Scenario card. Replaces the
contact-gated unlock CTA at the bottom of the page. The active tab
reads as "white pill on tinted track" in slider mode, and as "orange
pill" once direct-edit is selected, matching the unlock color family. */
.scenario-mode-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
padding: 3px;
background: rgba(0, 74, 92, 0.07);
border-radius: 6px;
/* Tightened bottom margin — was 12px when there was a separate
"Scenario Change" header row beneath; that row is gone now. */
margin-bottom: 6px;
}
.scenario-mode-tab {
background: transparent;
border: none;
padding: 7px 10px;
border-radius: 4px;
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink-soft);
cursor: pointer;
transition: background .15s, color .15s, box-shadow .15s;
line-height: 1;
}
.scenario-mode-tab:hover {
color: var(--dark-teal);
background: rgba(255, 255, 255, 0.5);
}
.scenario-mode-tab.is-active {
background: #fff;
color: var(--dark-teal);
box-shadow: 0 1px 2px rgba(0, 74, 92, 0.15);
}
.scenario-card.is-unlocked .scenario-mode-tabs {
background: rgba(184, 90, 14, 0.12);
}
.scenario-card.is-unlocked .scenario-mode-tab.is-active {
background: var(--orange);
color: #fff;
box-shadow: 0 1px 3px rgba(184, 90, 14, 0.35);
}
.scenario-card-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--dark-teal);
font-weight: 700;
white-space: nowrap;
}
.scenario-card-reset {
background: transparent;
border: none;
color: var(--mid-teal);
cursor: pointer;
font-size: 16px;
width: 22px;
height: 22px;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.55;
transition: opacity .15s, color .15s, background .15s;
line-height: 1;
}
.scenario-card-reset:hover {
opacity: 1;
color: var(--orange);
background: rgba(227, 122, 28, 0.12);
}
.scenario-card-value {
font-family: 'Roboto', sans-serif;
font-weight: 600;
/* Simple-mode % readout. Was 56px to match the dollar hero in the
Tweak/Customize panes, but those panes no longer have a hero
number \u2014 so 56px feels oversized here. Pulled down to a more
proportionate scale relative to the card's title + slider. */
font-size: 40px;
color: var(--dark-teal);
line-height: 1;
font-variant-numeric: tabular-nums;
margin-top: 4px;
letter-spacing: -0.02em;
}
.scenario-card-slider {
margin-top: 4px;
position: relative;
}
.scenario-card-slider input[type=range] {
width: 100%;
-webkit-appearance: none;
appearance: none;
background: transparent;
margin: 0;
cursor: grab;
}
.scenario-card-slider input[type=range]:active { cursor: grabbing; }
.scenario-card-slider input[type=range]::-webkit-slider-runnable-track {
height: 6px; background: #CFE1E7; border-radius: 3px;
}
.scenario-card-slider input[type=range]::-moz-range-track {
height: 6px; background: #CFE1E7; border-radius: 3px;
}
@keyframes rmoThumbPulse {
0%, 100% { box-shadow: 0 0 0 1px var(--orange), 0 2px 4px rgba(227,122,28,0.3); }
50% { box-shadow: 0 0 0 1px var(--orange), 0 0 0 6px rgba(227,122,28,0.18), 0 2px 6px rgba(227,122,28,0.4); }
}
.scenario-card-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 18px; height: 18px; border-radius: 50%;
background: var(--orange); border: 3px solid #fff;
box-shadow: 0 0 0 1px var(--orange), 0 2px 4px rgba(227,122,28,0.3);
margin-top: -6px; cursor: grab;
transition: transform .1s;
animation: rmoThumbPulse 1.8s ease-in-out 2 2s both;
}
.scenario-card-slider input[type=range]::-webkit-slider-thumb:hover {
transform: scale(1.1);
animation: none;
}
.scenario-card-slider input[type=range]::-moz-range-thumb {
width: 14px; height: 14px; border-radius: 50%;
background: var(--orange); border: 3px solid #fff;
box-shadow: 0 0 0 1px var(--orange), 0 2px 4px rgba(227,122,28,0.3);
cursor: grab;
animation: rmoThumbPulse 1.8s ease-in-out 2 2s both;
}
.scenario-card-ticks {
position: relative;
height: 10px;
margin-top: 4px;
font-size: 9.5px;
color: var(--ink-soft);
font-weight: 500;
letter-spacing: 0.02em;
}
.scenario-card-ticks span {
position: absolute;
top: 0;
}
.scenario-card-ticks span:nth-child(1) { left: 0; }
.scenario-card-ticks span:nth-child(2) {
left: 50%;
transform: translateX(-50%);
}
.scenario-card-ticks span:nth-child(3) { right: 0; }
/* ---------- Scenario card: unlocked state ----------
When user unlocks custom variable editing, the slider no longer
drives anything, so we swap the card's content from "slider + %"
to a status view that reflects the new mode and offers a way back. */
.scenario-card-unlocked { display: none; }
.scenario-card.is-unlocked {
/* Shift from teal tint to warm peach, matches the orange variables table */
background: linear-gradient(135deg, #FDEEDC 0%, #FFF6EA 100%);
border-color: rgba(227, 122, 28, 0.45);
}
.scenario-card.is-unlocked::before {
/* Darker accent bar so it's visible against the peach gradient */
background: #B85A0E;
}
.scenario-card.is-unlocked .scenario-card-value,
.scenario-card.is-unlocked .scenario-card-slider {
display: none;
}
.scenario-card.is-unlocked .scenario-card-unlocked {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Small uppercase eyebrow label, reused for both Hero and Driver blocks */
.scenario-card-unlocked-eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--orange-dark); /* 5.2:1 on peach — AA pass at this small size */
line-height: 1;
}
/* Hero: the user's combined custom-scenario result vs base case */
.scenario-card-unlocked-hero {
display: flex;
flex-direction: column;
gap: 4px;
}
.scenario-card-unlocked-hero-value {
font-family: 'Roboto', sans-serif;
font-size: 28px;
font-weight: 600;
color: var(--dark-teal);
line-height: 1;
letter-spacing: -0.01em;
}
.scenario-card-unlocked-hero-delta {
font-size: 12.5px;
font-weight: 600;
color: var(--mid-teal);
line-height: 1.3;
}
.scenario-card-unlocked-hero-delta.is-negative {
/* Muted red for "worse than base" cases — still readable on peach */
color: #B5432C;
}
.scenario-card-unlocked-hero-delta.is-neutral {
color: var(--ink);
opacity: 0.65;
}
.scenario-card-unlocked-reset {
background: #fff;
border: 1px solid rgba(227, 122, 28, 0.4);
color: var(--orange);
padding: 7px 12px;
border-radius: 5px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background .15s, border-color .15s;
letter-spacing: 0.02em;
align-self: flex-start;
margin-top: 4px;
}
.scenario-card-unlocked-reset:hover {
background: var(--orange);
color: #fff;
border-color: var(--orange);
}
/* Grows to fill leftover height inside the flex-column .panel
so the panel's bottom edge aligns with the chart panel beside
it. min-height keeps a small visual tail when the panel is
already as tall as the chart. */
.panel-footer-spacer {
flex: 1 1 auto;
min-height: 6px;
}
.reset-btn {
padding: 7px 14px;
background: transparent; color: var(--ink-soft);
border: 1px solid var(--line); border-radius: 5px;
font-family: inherit; font-size: 12px; font-weight: 500;
cursor: pointer; transition: all .15s;
letter-spacing: 0.02em;
}
.reset-btn:hover { color: var(--orange); border-color: var(--orange); }
/* Chart panel and KPI strip used to be wrapped in a .chart-col
flex container; they're now placed as direct grid children of
.grid (see grid-area pinning above) so the assumption panel
can stretch to match the chart panel's height alone. The
row-gap on .grid replaces what used to be .chart-col's gap. */
/* ---------- Chart Panel ---------- */
.chart-panel { padding: 16px 28px 10px; }
.chart-head { text-align: center; margin-bottom: 8px; }
.chart-head .sub {
font-size: 20px;
color: var(--ink);
font-weight: 500;
font-family: 'Roboto', sans-serif;
font-style: italic;
letter-spacing: -0.005em;
}
.chart-head .impact-pill {
/* Emphasis treatment for the word "impact" in the chart headline.
Mid-teal (same family as the chart bars) plus heavier weight so
the word reads clearly across screen brightness conditions while
still tying visually to the data. */
display: inline;
color: var(--mid-teal);
font-weight: 700;
font-style: italic;
font-family: 'Roboto', sans-serif;
}
.chart-wrap {
position: relative;
height: 460px;
margin-top: 14px;
}
.legend {
display: flex; justify-content: center; gap: 28px;
margin-top: 6px; padding-top: 12px;
border-top: 1px solid var(--line);
position: relative;
}
.legend-item {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--ink-soft);
}
.legend-item .swatch {
width: 14px; height: 14px; border-radius: 2px; display: inline-block;
}
/* ---------- Summary Section ----------
Wraps the eyebrow heading + KPI strip into one full-page-width
section. The eyebrow re-uses the same small-caps treatment as
the .profile-bar-heading for visual consistency, signalling
this is the "result" reveal that pays off the chart above. */
.summary-section {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 4px;
}
.summary-section-heading {
margin: 0;
padding: 0;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
line-height: 1;
}
.summary-strip {
/* margin-top is handled by .chart-col's flex gap now \u2014 the
strip sits as a flex child below the chart panel. */
display: grid;
/* The Scenario card is the hero \u2014 the live readout of "what
does my plan produce." It gets a wider proportional cell
(~1.6fr) so the hero value typography can breathe. The 3 KPI
cards fill the remaining columns and remain aligned with the
chart above. */
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.kpi {
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px 14px;
transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
/* Hover state: when a KPI is highlightable (carries data-highlight-bars),
give a subtle elevation so the user reads "this is interactive" before
they notice the chart bars dim. */
.kpi[data-highlight-bars] { cursor: default; }
.kpi[data-highlight-bars]:hover,
.kpi[data-highlight-bars]:focus-within {
border-color: rgba(0, 74, 92, 0.35);
box-shadow: 0 4px 12px -4px rgba(0, 74, 92, 0.18);
}
.kpi .k-label {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
font-weight: 600;
}
.kpi .k-label .k-label-hint {
letter-spacing: inherit;
font-weight: 400;
font-size: 9.5px;
color: var(--ink-soft);
opacity: 0.7;
margin-left: 2px;
}
.kpi .k-value {
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: 600;
color: var(--dark-teal);
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
.kpi .k-sub {
font-size: 12px;
color: var(--ink-soft);
margin-top: 1px;
}
.kpi.highlight {
/* Behavior Impact is the headline result \u2014 it represents the
"Increase over base case" series in the chart (light teal),
not the base case itself. The previous peach background read
as "base case" because it shared a hue family with the chart's
base-case reference band. Switched to a soft light-teal tint so
the visual link points at the right thing. */
background: #E6F4F9; /* tint of --light-teal #7FC6DC */
border-color: var(--bright-teal);
}
.kpi.highlight .k-value { color: var(--dark-teal); } /* 7.4:1 on tint \u2014 AA pass */
.disclosure {
margin-top: 18px;
padding: 12px 16px;
background: var(--paper);
border-left: 2px solid var(--line);
border-radius: 0 4px 4px 0;
font-size: 12px;
font-style: italic;
color: var(--ink-soft);
line-height: 1.6;
}
footer {
margin-top: 32px;
padding-top: 24px;
text-align: center;
}
footer .disclosure-text {
font-size: 13px;
font-style: italic;
color: var(--ink-soft);
line-height: 1.6;
max-width: 760px;
margin: 0 auto 14px;
}
/* Senior/primary disclosure: legally most important, so it leads
the footer with stronger weight and full ink color, no italic. */
footer .disclosure-senior {
font-size: 13.5px;
font-style: normal;
font-weight: 500;
color: var(--ink);
padding: 0;
margin-bottom: 0;
}
footer .footer-fineprint {
font-size: 11px;
color: var(--ink-soft); /* 6.2:1 on white at full opacity — AA pass */
letter-spacing: 0.02em;
line-height: 1.5;
margin: 0;
}
/* ---------- CTA section ----------
Compact: now only one form (lead capture) and tighter spacing
since the subhead paragraph was removed — the form itself makes
the action obvious. */
.cta-section {
margin-top: 24px;
background: linear-gradient(135deg, var(--dark-teal) 0%, var(--mid-teal) 100%);
border-radius: 12px;
padding: 22px 32px 24px;
color: #fff;
box-shadow: 0 8px 24px -12px rgba(0, 74, 92, 0.3);
}
.cta-header {
text-align: center;
margin-bottom: 16px;
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
.cta-eyebrow {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--light-teal);
font-weight: 600;
margin-bottom: 6px;
}
.cta-header h3 {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 24px;
line-height: 1.15;
letter-spacing: -0.015em;
margin: 0;
color: #fff;
}
.cta-header p {
margin: 6px 0 0;
font-size: 13px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.88);
}
/* New single-column form container, replacing the old two-column
options grid. Constrained to a comfortable reading width so the
HubSpot form doesn't sprawl across the full 1200px CTA section. */
.cta-single {
background: #fff;
border-radius: 10px;
padding: 20px 24px 18px;
max-width: 520px;
margin: 0 auto;
box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.25);
}
/* Tighten HubSpot form chrome inside the single card — the form
classes already have rules below; .cta-single passes through. */
.cta-single .cta-option-form { display: block; }
/* Post-submit actions panel — replaces the form via JS once the user
submits. Two buttons: Download PDF of current view + share row.
Sits inside .cta-single so the chrome (white card on teal) is
consistent across pre/post-submit states. */
.cta-actions {
display: flex;
flex-direction: column;
gap: 14px;
align-items: center;
text-align: center;
}
.cta-actions-check {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--mid-teal);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 700;
line-height: 1;
}
.cta-actions-heading {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 22px;
line-height: 1.2;
color: var(--ink);
margin: 0;
}
.cta-actions-sub {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.5;
margin: -4px 0 4px;
max-width: 380px;
}
.cta-actions-pdf {
width: 100%;
background: var(--orange);
color: #fff;
border: none;
border-radius: 6px;
padding: 13px 18px;
font-family: inherit;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.02em;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background .15s, transform .05s;
}
.cta-actions-pdf:hover { background: #C46915; }
.cta-actions-pdf:active { transform: translateY(1px); }
.cta-actions-pdf svg { width: 16px; height: 16px; }
/* Inline share row — same icon vocabulary as the floating share
pill, but always-on and rendered inside the actions panel. */
.cta-actions-share {
display: flex;
align-items: center;
gap: 10px;
padding-top: 2px;
}
.cta-actions-share-label {
font-size: 11px;
font-weight: 600;
color: var(--ink-soft);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.cta-actions-share-btn {
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid var(--line);
background: #fff;
color: var(--mid-teal);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.cta-actions-share-btn:hover {
background: var(--mid-teal);
border-color: var(--mid-teal);
color: #fff;
transform: translateY(-1px);
}
.cta-actions-share-btn:active { transform: translateY(0); }
.cta-actions-share-btn svg { width: 15px; height: 15px; }
.cta-actions-share-btn.is-copied {
background: #10B981;
border-color: #10B981;
color: #fff;
}
/* ---------- Legacy two-up grid (no longer rendered; kept as a
safety net in case any saved markup still references it). The
new layout uses .cta-single above. ---------- */
.cta-options-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.cta-option {
background: #fff;
border-radius: 10px;
padding: 22px 22px 20px;
color: var(--ink);
display: flex;
flex-direction: column;
transition: transform .15s, box-shadow .15s;
}
.cta-option-featured {
outline: 2px solid var(--orange);
outline-offset: -2px;
position: relative;
}
.cta-option-featured::before {
content: 'Recommended';
position: absolute;
top: -10px;
right: 16px;
background: var(--orange);
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.cta-option-head {
display: flex;
gap: 14px;
align-items: flex-start;
margin-bottom: 16px;
}
.cta-option-num {
flex: 0 0 32px;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--mid-teal);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-family: 'Roboto', sans-serif;
font-size: 16px;
}
.cta-option-featured .cta-option-num { background: var(--orange); }
.cta-option-title { flex: 1; }
.cta-option-title h4 {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 18px;
color: var(--dark-teal);
line-height: 1.25;
margin: 2px 0 4px;
letter-spacing: -0.01em;
}
.cta-option-title p {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.45;
margin: 0;
}
.cta-option-form {
flex: 1;
display: flex;
flex-direction: column;
}
/* HubSpot form styling overrides so both embedded forms look native */
.cta-option-form .hs-form-field,
.cta-option-form .hs-form-field { margin-bottom: 10px; }
.cta-option-form label {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--ink-soft);
margin-bottom: 4px;
}
.cta-option-form input[type="text"],
.cta-option-form input[type="email"],
.cta-option-form input[type="tel"],
.cta-option-form input[type="number"],
.cta-option-form select,
.cta-option-form textarea {
width: 100% !important;
padding: 8px 11px;
border: 1px solid var(--line);
border-radius: 5px;
font-family: inherit;
font-size: 13px;
color: var(--ink);
background: #fff;
transition: border-color .15s, box-shadow .15s;
box-sizing: border-box;
}
.cta-option-form input:focus,
.cta-option-form select:focus,
.cta-option-form textarea:focus {
outline: none;
border-color: var(--bright-teal);
box-shadow: 0 0 0 3px rgba(3, 142, 181, 0.15);
}
/* Invalid field styling: red border + small inline error message
under the field. Used by the mock form's submit handler when
a required field is empty or the email fails the regex check. */
.cta-option-form input.is-invalid,
.cta-option-form select.is-invalid,
.cta-option-form textarea.is-invalid {
border-color: #C0392B;
box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}
.cta-option-form .rmo-field-error {
margin-top: 4px;
font-size: 12px;
color: #C0392B;
line-height: 1.3;
}
/* Lighter placeholder text so the mock fields don't look pre-filled. */
.cta-option-form input::placeholder,
.cta-option-form textarea::placeholder {
color: #B5C0C5;
opacity: 1;
}
.cta-option-form .hs-button {
width: 100%;
background: var(--orange);
color: #fff;
border: none;
padding: 10px 16px;
border-radius: 5px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
margin-top: 6px;
transition: background .15s, transform .05s;
}
.cta-option-form .hs-button:hover { background: #C46915; }
.cta-option-form .hs-button:active { transform: translateY(1px); }
.cta-option-form .hs-error-msgs {
list-style: none;
padding: 0;
margin: 3px 0 0;
font-size: 11px;
color: #C0392B;
}
.cta-option-form .hs-form-required { color: var(--orange); margin-left: 2px; }
.cta-option-form .submitted-message { padding: 16px 0; text-align: center; }
/* Demo link — lets a visitor try the action without going through
the gated HubSpot form (internal previews, leadership demos, etc). */
.cta-demo-link {
background: none;
border: none;
color: var(--mid-teal);
font-family: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
margin-top: 10px;
padding: 6px 2px;
text-decoration: underline;
text-decoration-color: rgba(0, 115, 143, 0.35);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
align-self: flex-start;
transition: color .15s, text-decoration-color .15s;
}
.cta-demo-link:hover {
color: var(--orange);
text-decoration-color: var(--orange);
}
.cta-demo-link:disabled {
cursor: default;
color: var(--ink-soft);
text-decoration: none;
font-style: italic;
opacity: 0.85;
}
.cta-demo-link.cta-demo-link-done {
color: var(--bright-teal);
font-style: normal;
}
@media print {
/* Customize-mode chrome-strip — in print, the Base Case input boxes
shouldn't read as clickable. */
body.rmo-unlock-base .table tbody tr.variable-row td.value .input-wrap,
body.rmo-unlock-base .table tbody tr.variable-row td.value .input-wrap:hover,
body.rmo-unlock-base .table tbody tr.variable-row td.value .input-wrap:focus-within {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
}
/* ---------- Floating share pill (bottom-left) ----------
Pill-shaped container with a "Share" label and 4 icon buttons.
Uses inline SVGs for LinkedIn, X, Email, Copy.
Visible to everyone, but gated: buttons dimmed until the user has
submitted either HubSpot form (PDF or Unlock), at which point the
.is-locked class is removed. Clicking a locked button scrolls to
the CTA section and flashes it. Hidden in print; auto-unlocked in
preview mode (see rmoInit for unlock logic). */
.rmo-share {
position: fixed;
left: 16px;
bottom: 16px;
z-index: 9998; /* below test panel */
display: flex;
align-items: center;
gap: 2px;
padding: 5px 8px 5px 14px;
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
box-shadow: 0 4px 14px -3px rgba(0, 74, 92, 0.18);
font-family: 'Roboto', -apple-system, system-ui, sans-serif;
}
/* Locked state — buttons dimmed, small lock glyph on the label so
users instantly understand these aren't yet active. */
.rmo-share.is-locked .rmo-share-label::after {
content: ' \01F512'; /* 🔒 U+1F512 */
margin-left: 3px;
font-size: 10px;
opacity: 0.6;
}
.rmo-share.is-locked .rmo-share-btn {
color: #98A8B0;
opacity: 0.7;
cursor: pointer; /* still clickable → triggers gate */
}
.rmo-share.is-locked .rmo-share-btn:hover {
background: #98A8B0;
color: #fff;
opacity: 1;
}
/* Flash the CTA section briefly when a locked share button is clicked */
@keyframes rmoCtaFlash {
0% { box-shadow: 0 0 0 0 rgba(227, 122, 28, 0); }
30% { box-shadow: 0 0 0 10px rgba(227, 122, 28, 0.38); }
100% { box-shadow: 0 0 0 0 rgba(227, 122, 28, 0); }
}
.cta-section.rmo-flash {
animation: rmoCtaFlash 1.5s ease-out;
}
.rmo-share-label {
font-size: 11px;
font-weight: 600;
color: var(--ink-soft);
margin-right: 6px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.rmo-share-btn {
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: none;
border-radius: 50%;
color: var(--mid-teal);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s, transform .1s;
}
.rmo-share-btn:hover {
background: var(--mid-teal);
color: #fff;
transform: translateY(-1px);
}
.rmo-share-btn:active {
transform: translateY(0);
}
.rmo-share-btn svg {
width: 15px;
height: 15px;
fill: currentColor;
}
/* Visual feedback when Copy Link succeeds — button briefly turns
green and shows a checkmark, then restores. */
.rmo-share-btn.is-copied {
background: #10B981;
color: #fff;
}
.rmo-share-btn.is-copied:hover {
background: #10B981; /* stay green during feedback window */
}
/* Hide in print */
@media print {
.rmo-share { display: none !important; }
}
/* Mobile: scale down slightly so pill doesn't dominate small screens */
@media (max-width: 700px) {
.rmo-share {
left: 10px; bottom: 10px;
padding: 4px 7px 4px 11px;
}
.rmo-share-label { font-size: 10px; margin-right: 4px; }
.rmo-share-btn { width: 28px; height: 28px; }
.rmo-share-btn svg { width: 13px; height: 13px; }
}
.cta-thank-you {
text-align: center;
padding: 16px 8px;
}
.cta-thank-you .check {
width: 40px; height: 40px;
margin: 0 auto 10px;
background: var(--bright-teal);
color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
font-family: 'Roboto', sans-serif;
}
.cta-thank-you h4 {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 18px;
color: var(--dark-teal);
margin: 0 0 6px;
}
.cta-thank-you p {
font-size: 13px;
color: var(--ink-soft);
margin: 0;
line-height: 1.45;
}
@media (max-width: 900px) {
.cta-section { padding: 28px 22px; }
.cta-options-grid { grid-template-columns: 1fr; gap: 20px; }
.cta-header h3 { font-size: 24px; }
}
@media (max-width: 1100px) {
.grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
/* At narrow widths everything stacks in one column \u2014 undo
the desktop grid-area pinning so items flow in source order. */
.grid > aside.panel,
.grid > .chart-panel,
.grid > .summary-section { grid-column: 1; grid-row: auto; }
.summary-strip { grid-template-columns: 1fr; }
}
/* ---------- Laptop-sized viewports ----------
Scale everything down for 15"ish laptops (roughly 1101–1440px wide).
Scoped with min-width so we don't collide with mobile stacking below,
and max-width so external-monitor users keep the original sizes. */
@media (min-width: 1101px) and (max-width: 1440px) {
body { padding: 20px 18px; }
.intro { margin-bottom: 24px; padding: 4px 12px 0; }
.intro h1 {
font-size: 30px;
white-space: normal;
margin-bottom: 10px;
}
.intro p { font-size: 14px; line-height: 1.55; }
.grid { grid-template-columns: 320px 1fr; gap: 20px; }
/* Now that the Scenario card has been promoted to a page-hero
above .grid, the summary-strip only contains the 3 KPIs. Use a
simple 3-col layout aligned with the chart column above (the
3 KPIs were always meant to live "under the chart"). */
.summary-strip { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.panel-title { padding: 8px 16px 5px; font-size: 17px; }
.panel-title small { font-size: 12px; margin-top: 4px; }
/* Assumption table — tighter rows and smaller type */
.table thead th { padding: 7px 10px; font-size: 12px; }
.table thead .h-title { font-size: 11px; }
.table thead .h-output { font-size: 11px; margin-top: 2px; }
.table tbody td.label { padding: 0 11px; font-size: 13px; }
.table tbody td.value { font-size: 13px; }
.table tbody td.value .input-wrap { padding: 9px 6px; }
.table tbody td.value .input-wrap .prefix,
.table tbody td.value .input-wrap .suffix { font-size: 13px; }
.table tbody td.value input { font-size: 13px; max-width: 8ch; }
.table tbody td.value input#annuitLabel { font-size: 12px; min-width: 10ch; }
.table tbody td.scenario .scenario-wrap { padding: 9px 6px; }
.table tbody td.scenario .scenario-wrap .val,
.table tbody td.scenario .scenario-wrap .prefix,
.table tbody td.scenario .scenario-wrap .suffix { font-size: 13px; }
/* Profile bar — compact in print so the panel still fits. */
.profile-bar {
margin: 4px 12px 8px;
padding: 8px 10px 8px;
gap: 6px 10px;
}
.profile-pill { gap: 1px; }
.profile-pill dt { font-size: 8px; letter-spacing: 0.08em; }
.profile-pill dd { font-size: 13px; min-height: 16px; }
/* Scenario card (inside summary-strip) */
.scenario-card { padding: 11px 13px 10px; }
.scenario-card-label { font-size: 10px; }
.scenario-card-value { font-size: 22px; }
.scenario-card-ticks { font-size: 9px; margin-top: 7px; }
.reset-btn { padding: 6px 11px; font-size: 11px; }
/* Chart panel */
.chart-panel { padding: 11px 20px 8px; }
.chart-head .sub { font-size: 16px; }
.chart-wrap { height: 370px; margin-top: 10px; }
.legend { gap: 20px; padding-top: 9px; margin-top: 4px; }
.legend-item { font-size: 12px; }
.legend-item .swatch { width: 12px; height: 12px; }
/* KPI strip */
.summary-strip { margin-top: 14px; gap: 10px; }
.kpi { padding: 10px 12px; border-radius: 6px; }
.kpi .k-label { font-size: 10px; letter-spacing: 0.1em; }
.kpi .k-label .k-label-hint { font-size: 9.5px; }
.kpi .k-value { font-size: 20px; margin-top: 3px; }
.kpi .k-sub { font-size: 11px; }
/* CTA */
.cta-section { padding: 26px 30px; margin-top: 20px; border-radius: 10px; }
.cta-header { margin-bottom: 18px; }
.cta-header h3 { font-size: 24px; }
.cta-header p { font-size: 13px; }
.cta-eyebrow { font-size: 10px; margin-bottom: 8px; }
.cta-options-grid { gap: 14px; }
.cta-option { padding: 16px 16px 14px; border-radius: 8px; }
.cta-option-head { gap: 11px; margin-bottom: 12px; }
.cta-option-num { flex-basis: 28px; width: 28px; height: 28px; font-size: 14px; }
.cta-option-title h4 { font-size: 16px; }
.cta-option-title p { font-size: 12px; }
.cta-option-featured::before { font-size: 9px; padding: 3px 8px; top: -9px; }
/* Footer */
footer .disclosure-text { font-size: 11px; line-height: 1.5; padding: 10px 12px; }
footer .footer-fineprint { font-size: 10.5px; }
}
/* ---------- Print stylesheet (1-page PDF export) ----------
Triggered by generatePdfAndDownload() which calls window.print().
Hides all page chrome and formats the two panels + KPIs to fit on
a single landscape-oriented page. User picks "Save as PDF" in the
browser's print dialog. */
@media print {
@page {
size: letter landscape;
/* Zero top margin — each page wrapper (.app for page 1, .pdf-disclosures
for page 2) provides its OWN padding-top. */
margin: 0 0.5in 0.22in;
}
/* Force html flush — some browsers apply a tiny default padding/margin
on the root that asymmetrically nudges page 1 vs page 2. Zero it. */
html { margin: 0 !important; padding: 0 !important; }
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
body {
background: #fff !important;
padding: 0 !important;
/* Default browser body margin (8px) only applies at the TOP of
page 1 — page 2 doesn't get it because body is one element
spanning all sheets. That asymmetry was making page 1's
pdf-header sit ~8px lower than page 2's. Zero it out so both
pages start flush against the @page top margin. */
margin: 0 !important;
font-size: 10.5px !important;
}
/* Preview-mode body styles (dark backdrop + 80px top padding for the
toolbar) live OUTSIDE @media screen, so they apply to print too,
and they're declared after this @media print block — meaning at
equal specificity, source order makes them win. Bump specificity
with `html body.rmo-pdf-preview-active` so the print rule wins
no matter the source order, regardless of whether the user prints
from preview mode or directly. */
html body.rmo-pdf-preview-active {
background: #fff !important;
padding: 0 !important;
margin: 0 !important;
}
/* Hide the preview toolbar itself (just in case its display rule
got out-specificity'd somewhere). */
.rmo-pdf-preview-toolbar,
html body.rmo-pdf-preview-active .rmo-pdf-preview-toolbar {
display: none !important;
}
/* Hide all of the interactive chrome */
.scenario-card,
.cta-section,
.cta-demo-link,
.rmo-unlock-banner,
footer .footer-fineprint,
footer .disclosure-senior,
footer,
.row-group-header,
.math-modal-trigger-row { display: none !important; }
/* Chart canvas safety net — if the canvas somehow didn't resize
(e.g. an unusual print driver that doesn't fire beforeprint),
prevent it from overflowing and overlapping the KPI strip. */
.chart-wrap canvas {
max-width: 100% !important;
max-height: 100% !important;
}
/* Keep key blocks together on the one page */
/* Page 1 wrapper. NOTE: do NOT make .app a flex column or give it
a min-height — .app spans BOTH printed pages (page 2's
.pdf-disclosures is its child), and turning .app into a flex
container changes how Chrome distributes content across the
page break, which was pushing page 2's header down. Keep .app
as a plain block; the per-page wrappers handle their own
layout. */
.app {
padding: 0.55in 0 0 !important;
max-width: 100% !important;
margin: 0 !important;
position: relative !important;
}
/* Note: .app is INTENTIONALLY excluded from page-break-inside: avoid
below — it spans both PDF pages (page 1 = main; page 2 = the
.pdf-disclosures section), and an "avoid" on .app would try to
force everything onto one sheet, ignoring the page-break-before
on .pdf-disclosures. We only protect the smaller blocks. */
.panel, .summary-strip { page-break-inside: avoid !important; }
.intro { margin: 25px 0 14px !important; padding: 0 !important; text-align: center !important; }
.intro h1 {
font-size: 22px !important;
margin: 0 0 20px !important;
white-space: normal !important;
line-height: 1.18 !important;
}
.intro p { font-size: 11.5px !important; line-height: 1.45 !important; margin: 0 !important; max-width: 100% !important; }
/* Two panels side by side, tight. min-width:0 on grid items is
essential — without it, the chart-panel honors its canvas's
intrinsic 800px width and blows out the 1fr column, pushing
the chart onto a 2nd page. */
.grid {
grid-template-columns: 290px 1fr !important;
gap: 12px !important;
align-items: stretch !important;
margin-bottom: 10px !important;
}
/* Restore the desktop grid-area pinning (mobile-stack rule at
max-width:1100px clears these and the print viewport is ~1056px,
so without !important resets every child stacks into col 1
and the chart drops onto page 2). */
.grid > aside.panel { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; }
.grid > .chart-panel { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; }
.grid > .summary-section { grid-column: 1 / -1 !important; grid-row: 2 !important; min-width: 0 !important; }
.chart-wrap { width: 100% !important; min-width: 0 !important; }
.chart-wrap canvas { width: 100% !important; height: 100% !important; }
.panel {
box-shadow: none !important;
border: 1px solid var(--line) !important;
overflow: visible !important;
}
.panel-title {
padding: 8px 12px 4px !important;
font-size: 13px !important;
line-height: 1.15 !important;
}
.panel-title small { font-size: 9px !important; margin-top: 1px !important; }
/* Chart panel */
.chart-panel { padding: 10px 12px 8px !important; }
.chart-head { margin-bottom: 4px !important; }
.chart-head .sub { font-size: 11px !important; }
.chart-wrap { height: 360px !important; margin-top: 4px !important; overflow: hidden !important; }
.legend { gap: 14px !important; padding-top: 5px !important; margin-top: 2px !important; }
.legend-item { font-size: 9px !important; }
.legend-item .swatch { width: 10px !important; height: 10px !important; }
/* Assumption table */
.table thead th { padding: 4px 6px !important; font-size: 9px !important; }
.table thead .h-title { font-size: 9px !important; }
.table thead .h-output { font-size: 9px !important; margin-top: 1px !important; }
.table tbody td { font-size: 10px !important; }
.table tbody td.label { padding: 0 8px !important; font-size: 10px !important; }
.table tbody td.value .input-wrap,
.table tbody td.scenario .scenario-wrap { padding: 4px 4px !important; }
.table tbody td.value input,
.table tbody td.value .input-wrap .prefix,
.table tbody td.value .input-wrap .suffix,
.table tbody td.scenario .scenario-wrap .val,
.table tbody td.scenario .scenario-wrap .prefix,
.table tbody td.scenario .scenario-wrap .suffix { font-size: 10px !important; }
.table tbody td.value input#annuitLabel { font-size: 9px !important; min-width: 0 !important; }
/* KPI strip — now a full-width sibling of the grid, 3 cards across */
.summary-strip {
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important;
margin-top: 0 !important;
}
.kpi { padding: 8px 12px !important; border-radius: 5px !important; }
.kpi .k-label { font-size: 9px !important; letter-spacing: 0.08em !important; }
.kpi .k-label .k-label-hint { font-size: 8.5px !important; }
.kpi .k-value { font-size: 17px !important; margin-top: 2px !important; }
.kpi .k-sub { font-size: 9.5px !important; margin-top: 1px !important; }
footer { margin-top: 8px !important; padding: 0 !important; }
footer .disclosure-text { font-size: 8.5px !important; line-height: 1.35 !important; padding: 6px 10px !important; margin: 0 !important; }
/* When the user prints while PDF-preview mode is active, the
preview's fixed-sheet sizing (width:11in, min-height:8.5in,
padding:0.5in, box-shadow) fights with @page margins and pushes
content onto a 2nd page. Neutralize those rules in print so the
print layout wins regardless of preview mode. */
body.rmo-pdf-preview-active .app {
width: auto !important;
min-height: 0 !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
/* When printing while preview is active, the preview-mode rules
add a dashed top border and visual margin to .pdf-disclosures
(because preview is one continuous page, not paginated). In real
print we want a clean page break instead — strip the dashed
border and force the page break, but DON'T zero out the print
padding-top above (that's what gives page 2 its breathing room
to match page 1). */
body.rmo-pdf-preview-active .pdf-disclosures {
margin-top: 0 !important;
border-top: 0 !important;
page-break-before: always !important;
break-before: page !important;
}
body.rmo-pdf-preview-toolbar,
.rmo-pdf-preview-toolbar { display: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════
PDF PREVIEW MODE — on-screen preview of what the emailed PDF will look
like. Activated by the "Preview PDF" button in the testing panel. The
rules below mirror @media print above so the screen view matches what
marketing's PDF generator (HubSpot workflow) will produce. The page is
framed inside a white "sheet" sized to landscape Letter (11in × 8.5in)
with the same content margins as @page (0.5in all around).
KEEP IN SYNC with the @media print block above.
─────────────────────────────────────────────────────────────────────── */
/* Toolbar — hidden by default, shown only when preview mode is active */
.rmo-pdf-preview-toolbar {
display: none;
position: fixed;
top: 0; left: 0; right: 0;
z-index: 10000;
padding: 10px 20px;
background: var(--dark-teal);
color: #fff;
font-family: 'Roboto', system-ui, sans-serif;
align-items: center;
justify-content: space-between;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
body.rmo-pdf-preview-active .rmo-pdf-preview-toolbar { display: flex; }
.rmo-pdf-preview-toolbar-info { display: flex; flex-direction: column; line-height: 1.3; }
.rmo-pdf-preview-toolbar-info strong { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.rmo-pdf-preview-toolbar-info span { font-size: 11px; opacity: 0.8; }
.rmo-pdf-preview-toolbar-actions { display: flex; gap: 8px; }
.rmo-pdf-preview-toolbar-actions button {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
padding: 7px 14px;
border-radius: 4px;
font-family: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background .12s, border-color .12s;
}
.rmo-pdf-preview-toolbar-actions button:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
}
.rmo-pdf-preview-toolbar-actions .rmo-pdf-preview-close-btn {
background: var(--orange);
border-color: var(--orange);
}
.rmo-pdf-preview-toolbar-actions .rmo-pdf-preview-close-btn:hover {
background: var(--orange-dark);
border-color: var(--orange-dark);
}
/* Active preview mode: dark backdrop, page frame, hide all interactive chrome */
body.rmo-pdf-preview-active {
background: #2A3A40 !important;
padding: 80px 20px 40px !important;
min-height: 100vh;
overflow-y: auto !important;
}
/* The page itself — landscape Letter at 1:1 with same content margins as @page */
body.rmo-pdf-preview-active .app {
width: 11in !important;
min-height: 8.5in !important;
max-width: 11in !important;
margin: 0 auto !important;
padding: 0.5in 0.5in 0.5in !important;
background: #fff !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
box-sizing: border-box !important;
font-size: 10.5px !important;
}
/* Hide all interactive chrome (mirrors @media print) */
body.rmo-pdf-preview-active .scenario-card,
body.rmo-pdf-preview-active .cta-section,
body.rmo-pdf-preview-active .cta-demo-link,
body.rmo-pdf-preview-active .rmo-unlock-banner,
body.rmo-pdf-preview-active footer .footer-fineprint,
body.rmo-pdf-preview-active footer .disclosure-senior,
body.rmo-pdf-preview-active footer,
body.rmo-pdf-preview-active .row-group-header,
body.rmo-pdf-preview-active .rmo-floating-share-pill,
body.rmo-pdf-preview-active .math-modal-trigger-row { display: none !important; }
/* Chart canvas safety net */
body.rmo-pdf-preview-active .chart-wrap canvas {
max-width: 100% !important;
max-height: 100% !important;
}
/* Intro */
body.rmo-pdf-preview-active .intro { margin: 25px 0 14px !important; padding: 0 !important; text-align: center !important; }
body.rmo-pdf-preview-active .intro h1 {
font-size: 22px !important;
margin: 0 0 20px !important;
white-space: normal !important;
line-height: 1.18 !important;
}
body.rmo-pdf-preview-active .intro p { font-size: 11.5px !important; line-height: 1.45 !important; margin: 0 !important; max-width: 100% !important; }
/* Two-column grid */
body.rmo-pdf-preview-active .grid {
grid-template-columns: 290px 1fr !important;
gap: 12px !important;
align-items: stretch !important;
margin-bottom: 10px !important;
}
/* Re-pin children — at viewports under 1100px the responsive
mobile-stack rule clears grid placement and would put all three
children in col 1. Restore the desktop layout for preview. */
body.rmo-pdf-preview-active .grid > aside.panel { grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important; }
body.rmo-pdf-preview-active .grid > .chart-panel { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; }
body.rmo-pdf-preview-active .grid > .summary-section { grid-column: 1 / -1 !important; grid-row: 2 !important; min-width: 0 !important; }
body.rmo-pdf-preview-active .chart-wrap { width: 100% !important; min-width: 0 !important; }
body.rmo-pdf-preview-active .chart-wrap canvas { width: 100% !important; height: 100% !important; }
body.rmo-pdf-preview-active .panel {
box-shadow: none !important;
border: 1px solid var(--line) !important;
overflow: visible !important;
}
body.rmo-pdf-preview-active .panel-title {
padding: 8px 12px 4px !important;
font-size: 13px !important;
line-height: 1.15 !important;
}
body.rmo-pdf-preview-active .panel-title small { font-size: 9px !important; margin-top: 1px !important; }
/* Profile bar — compact in PDF preview to mirror print. */
body.rmo-pdf-preview-active .profile-bar {
margin: 4px 12px 8px !important;
padding: 8px 10px 8px !important;
gap: 6px 10px !important;
}
body.rmo-pdf-preview-active .profile-pill { gap: 1px !important; }
body.rmo-pdf-preview-active .profile-pill dt {
font-size: 8px !important; letter-spacing: 0.08em !important;
}
body.rmo-pdf-preview-active .profile-pill dd { font-size: 13px !important; min-height: 16px !important; }
/* Chart panel */
body.rmo-pdf-preview-active .chart-panel { padding: 10px 12px 8px !important; }
body.rmo-pdf-preview-active .chart-head { margin-bottom: 4px !important; }
body.rmo-pdf-preview-active .chart-head .sub { font-size: 11px !important; }
body.rmo-pdf-preview-active .chart-wrap { height: 360px !important; margin-top: 4px !important; overflow: hidden !important; }
body.rmo-pdf-preview-active .legend { gap: 14px !important; padding-top: 5px !important; margin-top: 2px !important; }
body.rmo-pdf-preview-active .legend-item { font-size: 9px !important; }
body.rmo-pdf-preview-active .legend-item .swatch { width: 10px !important; height: 10px !important; }
/* Assumption table */
body.rmo-pdf-preview-active .table thead th { padding: 4px 6px !important; font-size: 9px !important; }
body.rmo-pdf-preview-active .table thead .h-title { font-size: 9px !important; }
body.rmo-pdf-preview-active .table thead .h-output { font-size: 9px !important; margin-top: 1px !important; }
body.rmo-pdf-preview-active .table tbody td { font-size: 10px !important; }
body.rmo-pdf-preview-active .table tbody td.label { padding: 0 8px !important; font-size: 10px !important; }
body.rmo-pdf-preview-active .table tbody td.value .input-wrap,
body.rmo-pdf-preview-active .table tbody td.scenario .scenario-wrap { padding: 4px 4px !important; }
body.rmo-pdf-preview-active .table tbody td.value input,
body.rmo-pdf-preview-active .table tbody td.value .input-wrap .prefix,
body.rmo-pdf-preview-active .table tbody td.value .input-wrap .suffix,
body.rmo-pdf-preview-active .table tbody td.scenario .scenario-wrap .val,
body.rmo-pdf-preview-active .table tbody td.scenario .scenario-wrap .prefix,
body.rmo-pdf-preview-active .table tbody td.scenario .scenario-wrap .suffix { font-size: 10px !important; }
body.rmo-pdf-preview-active .table tbody td.value input#annuitLabel { font-size: 9px !important; min-width: 0 !important; }
/* In Customize mode, the 4 variable-row Base Case cells normally get
orange-bordered white "input box" chrome to signal they're editable.
In print / PDF preview the page is static, so that chrome misleads —
it suggests fields a recipient can click into. Strip the box back
down to plain text on the peach column wash so the whole Base Case
column reads as one unified shaded column. */
body.rmo-pdf-preview-active.rmo-unlock-base .table tbody tr.variable-row td.value .input-wrap,
body.rmo-pdf-preview-active.rmo-unlock-base .table tbody tr.variable-row td.value .input-wrap:hover,
body.rmo-pdf-preview-active.rmo-unlock-base .table tbody tr.variable-row td.value .input-wrap:focus-within {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
/* KPI strip */
body.rmo-pdf-preview-active .summary-strip {
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important;
margin-top: 0 !important;
}
body.rmo-pdf-preview-active .kpi { padding: 8px 12px !important; border-radius: 5px !important; }
body.rmo-pdf-preview-active .kpi .k-label { font-size: 9px !important; letter-spacing: 0.08em !important; }
body.rmo-pdf-preview-active .kpi .k-label .k-label-hint { font-size: 8.5px !important; }
body.rmo-pdf-preview-active .kpi .k-value { font-size: 17px !important; margin-top: 2px !important; }
body.rmo-pdf-preview-active .kpi .k-sub { font-size: 9.5px !important; margin-top: 1px !important; }
body.rmo-pdf-preview-active footer { margin-top: 8px !important; padding: 0 !important; }
body.rmo-pdf-preview-active footer .disclosure-text { font-size: 8.5px !important; line-height: 1.35 !important; padding: 6px 10px !important; margin: 0 !important; }
/* ─────────────────────────────────────────────────────────────────
"How is this calculated?" modal — methodology / year-by-year /
assumptions. Triggered from a subtle link below the chart.
Single scrollable column (no tabs) so users see all three
sections in one pass.
───────────────────────────────────────────────────────────── */
.math-modal-trigger-row {
/* Sits at the right end of the legend row. Nudged down a touch so
it visually centers between the legend's top border and the
chart panel's bottom edge, rather than centering on the legend
text alone. */
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-30%);
margin: 0;
}
.math-modal-trigger {
appearance: none;
background: transparent;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink-soft);
font-family: 'Roboto', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.01em;
padding: 5px 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.math-modal-trigger:hover,
.math-modal-trigger:focus-visible {
background: var(--paper-2);
border-color: var(--bright-teal);
color: var(--dark-teal);
outline: none;
}
.math-modal-trigger svg { width: 13px; height: 13px; flex: none; }
.math-modal-backdrop {
position: fixed; inset: 0;
background: rgba(26, 42, 47, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 9000;
display: none;
align-items: flex-start;
justify-content: center;
padding: 40px 20px;
overflow-y: auto;
}
.math-modal-backdrop.is-open { display: flex; }
.math-modal {
background: var(--paper);
border-radius: 14px;
width: 100%;
max-width: 1100px;
box-shadow: 0 20px 60px rgba(0, 74, 92, 0.25);
display: flex;
flex-direction: column;
overflow: hidden;
margin: auto 0;
}
.math-modal-header {
padding: 22px 28px 18px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
background: var(--paper-2);
}
.math-modal-eyebrow {
font-family: 'Roboto', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid-teal);
margin: 0 0 4px;
}
.math-modal-title {
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: 500;
color: var(--ink);
margin: 0;
letter-spacing: -0.01em;
}
.math-modal-close {
appearance: none;
background: transparent;
border: 1px solid var(--line);
border-radius: 8px;
width: 34px; height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-soft);
cursor: pointer;
flex: none;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.math-modal-close:hover { background: var(--paper); color: var(--ink); border-color: var(--ink-soft); }
.math-modal-close svg { width: 16px; height: 16px; }
.math-modal-body { padding: 24px 28px; overflow-y: visible; }
.math-section + .math-section {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.math-section-heading {
font-family: 'Roboto', sans-serif;
font-size: 17px;
font-weight: 500;
color: var(--dark-teal);
margin: 0 0 12px;
letter-spacing: -0.005em;
}
.math-section-heading .math-section-num {
color: var(--orange);
font-weight: 600;
margin-right: 8px;
}
.math-section p {
font-family: 'Roboto', sans-serif;
font-size: 14px;
line-height: 1.55;
color: var(--ink-soft);
margin: 0 0 10px;
}
.math-section p strong { color: var(--ink); font-weight: 600; }
.math-scenario-picker {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 8px 0 14px;
}
.math-scenario-chip {
appearance: none;
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: 999px;
padding: 6px 12px;
font-family: 'Roboto', sans-serif;
font-size: 12px;
font-weight: 500;
color: var(--ink-soft);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.math-scenario-chip:hover { border-color: var(--bright-teal); color: var(--dark-teal); }
.math-scenario-chip.is-active {
background: var(--dark-teal);
border-color: var(--dark-teal);
color: #fff;
}
.math-table-wrap {
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--paper-2);
}
table.math-table {
width: 100%;
border-collapse: collapse;
font-family: 'Roboto', sans-serif;
font-size: 12.5px;
color: var(--ink);
}
table.math-table thead th {
text-align: right;
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-soft);
padding: 10px 12px;
background: var(--paper);
border-bottom: 1px solid var(--line);
white-space: nowrap;
position: sticky;
top: 0;
}
table.math-table thead th:first-child { text-align: left; }
table.math-table tbody td {
padding: 8px 12px;
text-align: right;
border-bottom: 1px solid var(--line);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
table.math-table tbody td:first-child {
text-align: left;
font-weight: 600;
color: var(--dark-teal);
}
table.math-table tbody tr:last-child td {
border-bottom: none;
background: var(--orange-soft);
}
table.math-table tbody tr:last-child td:first-child { color: var(--orange-dark); }
table.math-table tbody tr:hover td:not(:first-child) { background: var(--highlight); }
.math-table-caption {
font-family: 'Roboto', sans-serif;
font-size: 12px;
color: var(--ink-soft);
margin-top: 8px;
line-height: 1.45;
font-style: italic;
}
.math-table-toggle-row {
display: flex;
justify-content: center;
margin-top: 10px;
}
.math-table-toggle {
appearance: none;
background: transparent;
border: 1px solid var(--line);
border-radius: 6px;
color: var(--mid-teal);
font-family: 'Roboto', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 7px 14px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.math-table-toggle:hover,
.math-table-toggle:focus-visible {
background: var(--paper-2);
border-color: var(--bright-teal);
color: var(--dark-teal);
outline: none;
}
.math-table-empty {
padding: 24px;
text-align: center;
color: var(--ink-soft);
font-style: italic;
font-size: 13px;
}
.math-assumptions-list {
list-style: none;
margin: 0;
padding: 0;
}
.math-assumptions-list li {
display: grid;
grid-template-columns: 180px 1fr;
gap: 16px;
padding: 10px 0;
border-bottom: 1px dashed var(--line);
font-family: 'Roboto', sans-serif;
font-size: 13px;
}
.math-assumptions-list li:last-child { border-bottom: none; }
.math-assumptions-list .math-asm-label {
font-weight: 600;
color: var(--ink);
}
.math-assumptions-list .math-asm-value {
color: var(--ink-soft);
line-height: 1.5;
}
.math-assumptions-list .math-asm-value em {
color: var(--mid-teal);
font-style: normal;
font-size: 12px;
display: block;
margin-top: 2px;
}
.math-modal-footer {
padding: 16px 28px;
border-top: 1px solid var(--line);
background: var(--paper-2);
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.math-modal-footer-note {
font-family: 'Roboto', sans-serif;
font-size: 12px;
color: var(--ink-soft);
}
.math-print-btn {
appearance: none;
background: var(--dark-teal);
color: #fff;
border: 1px solid var(--dark-teal);
border-radius: 8px;
font-family: 'Roboto', sans-serif;
font-size: 13px;
font-weight: 600;
padding: 9px 18px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background 0.15s, border-color 0.15s;
}
.math-print-btn:hover { background: var(--mid-teal); border-color: var(--mid-teal); }
.math-print-btn svg { width: 14px; height: 14px; }
@media (max-width: 640px) {
.math-modal { max-width: 100%; border-radius: 10px; }
.math-modal-header, .math-modal-body, .math-modal-footer { padding-left: 18px; padding-right: 18px; }
.math-assumptions-list li { grid-template-columns: 1fr; gap: 2px; }
table.math-table { font-size: 11.5px; }
table.math-table thead th, table.math-table tbody td { padding: 7px 8px; }
}
@media print {
body.math-modal-printing > *:not(.math-modal-backdrop) { display: none !important; }
body.math-modal-printing .math-modal-backdrop {
position: static; background: #fff; padding: 0;
display: block !important; overflow: visible;
}
body.math-modal-printing .math-modal {
box-shadow: none; max-width: 100%; border-radius: 0;
}
body.math-modal-printing .math-modal-close,
body.math-modal-printing .math-print-btn { display: none !important; }
body.math-modal-printing .math-modal-header,
body.math-modal-printing .math-modal-footer { background: #fff; }
body.math-modal-printing table.math-table thead th { position: static; }
}
/* PDF HEADER + DISCLOSURES — hidden on screen, shown in print + PDF preview. */
.pdf-header,
.pdf-disclosures,
.pdf-disc-fineprint,
.pdf-page-num { display: none; }
@media print {
.pdf-header {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 0 0 4px;
margin: 0 0 6px !important;
border-bottom: 2px solid var(--orange);
}
.pdf-header-logo { height: 36px; width: auto; flex: none; }
.pdf-header-meta {
text-align: left;
font-family: 'Roboto', system-ui, sans-serif;
color: var(--dark-teal);
line-height: 1.15;
}
.pdf-header-title { font-size: 13px; font-weight: 700; letter-spacing: -0.005em; }
.pdf-header-sub {
font-size: 9px; color: var(--mid-teal); margin-top: 1px;
letter-spacing: 0.04em; text-transform: uppercase;
}
.pdf-disclosures {
display: flex !important;
flex-direction: column;
page-break-before: always;
break-before: page;
min-height: calc(8.5in - 0.22in);
padding: 0.55in 0 0 !important;
margin: 0 !important;
font-family: 'Roboto', system-ui, sans-serif;
color: var(--dark-teal);
position: relative !important;
}
/* Both .pdf-header instances sit at the top of their respective
printable areas. The @page top margin (0.55in) provides the
breathing room from the physical page edge — no per-element
margin-top hacks needed, which kept producing different results
on page 1 (block container, margin-collapse) vs page 2 (flex
container, no collapse). */
.app > .pdf-header,
.pdf-disclosures > .pdf-header {
margin-top: 0 !important;
padding-top: 0 !important;
}
.pdf-disclosures .pdf-disc-grid { flex: 1 1 auto; align-content: start; }
.pdf-disclosures .pdf-header { margin-bottom: 12px !important; }
/* Page-number footer — in-DOM (NOT @page margin box, which Chrome
renders inconsistently in standard print/save-as-PDF).
• Page 1's "1 of 2" sits in flow at the very end of .app's
page-1 content (right after .summary-strip). It's not pinned
to the page edge — doing that requires making .app a flex
container, which breaks page-2 header alignment.
• Page 2's "2 of 2" pins to the bottom of .pdf-disclosures via
the flex column layout (.pdf-disc-grid has flex:1 and absorbs
space, pushing the page-num below it). */
.pdf-page-num {
display: block !important;
text-align: right;
padding-top: 14px;
margin-bottom: -8px;
font-family: 'Roboto', system-ui, sans-serif;
font-size: 9px;
color: #6B7E85;
letter-spacing: 0.02em;
pointer-events: none;
}
.pdf-disc-title {
font-size: 19px; font-weight: 700; margin: 0 0 5px;
color: var(--dark-teal); letter-spacing: -0.005em;
}
.pdf-disc-sub { font-size: 12px; color: var(--mid-teal); margin: 0 0 14px; line-height: 1.4; }
.pdf-disc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.pdf-disc-section h4 {
font-size: 13px; font-weight: 700; color: var(--dark-teal);
margin: 0 0 6px; padding-bottom: 4px;
border-bottom: 1px solid var(--line);
letter-spacing: 0.02em; text-transform: uppercase;
}
.pdf-disc-section p {
font-size: 12px; line-height: 1.5; margin: 0 0 7px; color: #2A3D45;
}
.pdf-disc-section p:last-child { margin-bottom: 0; }
.pdf-disc-section ul {
margin: 4px 0 0; padding-left: 18px;
font-size: 12px; line-height: 1.45; color: #2A3D45;
}
.pdf-disc-section li { margin-bottom: 3px; }
.pdf-disc-fineprint {
display: block !important;
grid-column: 1 / -1; margin-top: 6px; padding-top: 10px;
border-top: 1px solid var(--line);
font-size: 10px; line-height: 1.45; color: var(--mid-teal);
}
}
/* PDF preview mode mirrors @media print */
body.rmo-pdf-preview-active .pdf-header {
display: flex !important;
align-items: center; justify-content: space-between; gap: 18px;
padding: 0 0 8px; margin: 0 0 8px;
border-bottom: 2px solid var(--orange);
}
body.rmo-pdf-preview-active .pdf-header-logo { height: 36px; width: auto; flex: none; }
body.rmo-pdf-preview-active .pdf-header-meta {
text-align: left; font-family: 'Roboto', system-ui, sans-serif;
color: var(--dark-teal); line-height: 1.15;
}
body.rmo-pdf-preview-active .pdf-header-title { font-size: 13px; font-weight: 700; letter-spacing: -0.005em; }
body.rmo-pdf-preview-active .pdf-header-sub {
font-size: 9px; color: var(--mid-teal); margin-top: 1px;
letter-spacing: 0.04em; text-transform: uppercase;
}
body.rmo-pdf-preview-active .pdf-disclosures {
display: flex !important;
flex-direction: column;
min-height: calc(8.5in - 0.55in);
margin-top: 18px; padding-top: 18px;
border-top: 2px dashed var(--line);
font-family: 'Roboto', system-ui, sans-serif;
color: var(--dark-teal);
}
body.rmo-pdf-preview-active .pdf-disc-title {
font-size: 19px; font-weight: 700; margin: 0 0 5px;
color: var(--dark-teal); letter-spacing: -0.005em;
}
body.rmo-pdf-preview-active .pdf-disc-sub { font-size: 12px; color: var(--mid-teal); margin: 0 0 14px; line-height: 1.4; }
body.rmo-pdf-preview-active .pdf-disc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
body.rmo-pdf-preview-active .pdf-disc-section h4 {
font-size: 13px; font-
weight: 700; color: var(--dark-teal);
margin: 0 0 6px; padding-bottom: 4px;
border-bottom: 1px solid var(--line);
letter-spacing: 0.02em; text-transform: uppercase;
}
body.rmo-pdf-preview-active .pdf-disc-section p {
font-size: 12px; line-height: 1.5; margin: 0 0 7px; color: #2A3D45;
}
body.rmo-pdf-preview-active .pdf-disc-section ul {
margin: 4px 0 0; padding-left: 18px;
font-size: 12px; line-height: 1.45; color: #2A3D45;
}
body.rmo-pdf-preview-active .pdf-disc-section li { margin-bottom: 3px; }
body.rmo-pdf-preview-active .pdf-disc-fineprint {
display: block !important;
grid-column: 1 / -1; margin-top: 6px; padding-top: 10px;
border-top: 1px solid var(--line);
font-size: 10px; line-height: 1.45; color: var(--mid-teal);
}