/* ============================================================================
   RetireRange — base typography and components.
   Every value here resolves to a token in tokens.css. If you find yourself
   writing a literal hex or px size, add a token instead.

   Selectors are namespaced under .rr- to avoid specificity fights with Astra's
   own component styles. Astra owns the header, footer, and nav; this file owns
   everything between them.
   ========================================================================= */

/* --- base reset -----------------------------------------------------------
   The theme had been inheriting box-sizing and the body margin reset from
   Astra's base stylesheet without ever saying so. That is a silent dependency
   on a parent sheet this theme now dequeues in places, and would surface as
   every padded .rr- element flipping to content-box wherever Astra's CSS is
   absent.

   Nothing currently depends on it — calculator pages, the only place Astra is
   dequeued, render no theme markup at all (see CLAUDE.md). It is here so the
   theme stands on its own if that ever changes.

   Guarded from the app per the CSS contract in CLAUDE.md. border-box is what
   the app's own preflight sets regardless, so the guard changes nothing inside
   it either way.
   ------------------------------------------------------------------------- */

*:not(.retirement-calc-app *),
*:not(.retirement-calc-app *)::before,
*:not(.retirement-calc-app *)::after {
	box-sizing: border-box;
}

.rr-page {
	margin: 0;
	background: var(--rr-ground);
	color: var(--rr-ink);
	font-family: var(--rr-font-body);
	-webkit-font-smoothing: antialiased;
}

.rr-wrap {
	max-width: var(--rr-max);
	margin-inline: auto;
	padding-inline: var(--rr-pad);
}

/* --- skip link ------------------------------------------------------------ */

.rr-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--rr-accent);
	color: var(--rr-accent-ink);
	font-size: 15px;
	font-weight: 560;
	text-decoration: none;
}

.rr-skip:focus {
	left: 0;
}

/* --- header --------------------------------------------------------------- */

.rr-header {
	border-bottom: 1px solid var(--rr-line);
	background: var(--rr-ground);
}

.rr-header__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	padding-block: 22px;
}

.rr-mark {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--rr-font-display);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--rr-ink);
	text-decoration: none;
	margin-right: auto;
	white-space: nowrap;
}

/* Sized in em so the icon tracks the wordmark if the size is ever retuned. */
.rr-mark__icon {
	width: 1.32em;
	height: 1.32em;
	flex: none;
}

.rr-mark b {
	font-weight: 600;
	color: var(--rr-accent);
	transition: color 120ms ease;
}

/* Astra styles a:hover in its own blue. The wordmark inherits that on the
   "Retire" text node while the <b> keeps its own colour, so hovering split the
   mark into two mismatched halves. Both halves are stated here instead. */
.rr-mark:hover,
.rr-mark:focus {
	color: var(--rr-ink);
}

.rr-mark:hover b,
.rr-mark:focus b {
	color: var(--rr-accent-hi);
}

.rr-mark--sm {
	font-size: 19px;
	margin-right: 0;
}

.rr-nav__list,
.rr-footer__list {
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rr-nav__list a {
	font-size: 14.5px;
	color: var(--rr-ink-2);
	text-decoration: none;
}

.rr-nav__list a:hover,
.rr-nav__list .current-menu-item > a {
	color: var(--rr-ink);
}

.rr-header__actions {
	display: flex;
	gap: 10px;
}

.rr-btn--sm {
	font-size: 14px;
	padding: 9px 16px;
}

/* --- mobile nav ----------------------------------------------------------- */

.rr-nav-toggle {
	display: none;
	order: 3;
	width: 42px;
	height: 42px;
	padding: 0;
	background: none;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius-sm);
	cursor: pointer;
}

.rr-nav-toggle__bars,
.rr-nav-toggle__bars::before,
.rr-nav-toggle__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	margin-inline: auto;
	background: var(--rr-ink);
	content: "";
}

.rr-nav-toggle__bars::before { transform: translateY(-6px); }
.rr-nav-toggle__bars::after  { transform: translateY(4px); }

@media (max-width: 720px) {
	.rr-nav-toggle {
		display: block;
	}

	.rr-header__inner {
		flex-wrap: wrap;
	}

	.rr-nav {
		display: none;
		order: 4;
		flex-basis: 100%;
	}

	.rr-nav.is-open {
		display: block;
	}

	.rr-nav__list {
		flex-direction: column;
		gap: 0;
		padding-block: 8px 16px;
	}

	.rr-nav__list a {
		display: block;
		padding-block: 12px;
		font-size: 16px;
		border-bottom: 1px solid var(--rr-line);
	}
}

/* Below this the mark, two buttons, and the toggle stop fitting on one row.
   Calculator is the one that has to survive; the account page is a click away
   from inside the app. */
@media (max-width: 520px) {
	.rr-header__account {
		display: none;
	}

	.rr-mark {
		font-size: 22px;
	}

	.rr-btn--sm {
		font-size: 13px;
		padding: 8px 13px;
	}

	.rr-header__inner {
		gap: 12px;
	}
}

/* Narrower still, the row can't hold everything and something has to wrap. Left
   alone it was the toggle that dropped — a lone hamburger on its own line, which
   reads as a mistake. Wrapping the buttons as a full-width pair instead keeps
   the toggle beside the mark and looks deliberate. */
@media (max-width: 400px) {
	.rr-header__inner {
		flex-wrap: wrap;
	}

	.rr-nav-toggle {
		order: 2;
	}

	.rr-header__actions {
		order: 5;
		flex-basis: 100%;
		gap: 8px;
	}

	.rr-header__actions .rr-btn {
		flex: 1;
	}
}

/* --- footer --------------------------------------------------------------- */

.rr-footer {
	border-top: 1px solid var(--rr-line);
	background: var(--rr-ground);
	padding-block: 48px 56px;
}

/* Three columns: brand, the two footer menus, and a hand-authored HTML column.
   align-items:start top-aligns them; the two menus sit side by side inside the
   middle track via .rr-footer__nav below. */
.rr-footer__top {
	display: grid;
	grid-template-columns: auto 2fr 1.3fr;
	align-items: start;
	gap: 28px 48px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--rr-line);
}

/* The two footer menus share the middle track as an even two-column grid. Each
   is a real menu with its own location, so authoring decides the split — the
   CSS only places the columns, it no longer flows one flat list across both. */
.rr-footer__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

/* Each footer menu is a plain vertical list, overriding the flex row it shares
   with .rr-nav__list. */
.rr-footer__list {
	display: block;
}

.rr-footer__list li {
	margin: 0 0 10px;
	break-inside: avoid;
}

.rr-footer__list a {
	font-size: 14.5px;
	color: var(--rr-ink-2);
	text-decoration: none;
}

.rr-footer__list a:hover {
	color: var(--rr-ink);
}

.rr-footer__heading {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rr-ink-3);
}

.rr-footer__extra p {
	font-size: 14px;
	line-height: 1.62;
	color: var(--rr-ink-2);
}

.rr-footer__extra p + p {
	margin-top: 10px;
}

/* Stack the three top-level columns on narrow screens; the two menus stay side
   by side until they no longer fit (420px, below). */
@media (max-width: 700px) {
	.rr-footer__top {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

@media (max-width: 420px) {
	.rr-footer__nav {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

.rr-footer__legal {
	padding-top: 26px;
	font-size: 13.5px;
	line-height: 1.62;
	color: var(--rr-ink-3);
}

.rr-footer__legal p {
	max-width: 78ch;
	margin: 0 0 12px;
}

/* These sit inside running paragraphs rather than in a list, so position can't
   signal that they're links the way it does in the footer nav — they carry an
   underline and shift to the accent on hover. */
.rr-footer__legal a {
	color: var(--rr-ink-2);
	text-decoration: underline;
	text-decoration-color: var(--rr-ink-3);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 120ms ease, text-decoration-color 120ms ease;
}

.rr-footer__legal a:hover,
.rr-footer__legal a:focus {
	color: var(--rr-accent-hi);
	text-decoration-color: var(--rr-accent-hi);
}

.rr-section {
	padding-block: var(--rr-section);
}

.rr-section + .rr-section {
	border-top: 1px solid var(--rr-line);
}

/* --- headings ------------------------------------------------------------ */

/* Heading colour is stated, not inherited. Astra emits an inline
   `h1,h2,h3,... { color: #1e293b }` rule; an element selector that matches
   directly always beats a colour inherited from .rr-page, so leaving these to
   inherit rendered every heading in Astra's slate rather than --rr-ink.

   --- the :not() on every rule below -------------------------------------
   `rr-page` is applied to <body> (see header.php), which makes these element
   selectors document-wide — they reached inside the calculator app and
   restyled its headings, including stamping the h2 accent bar after every
   heading in it. The app mounts under .retirement-calc-app, so excluding that
   subtree hands its markup back to Tailwind untouched.

   Exclusion is the right instrument here rather than a reset block inside the
   app: a reset has to out-specify these rules to undo them, and would then
   out-specify the app's own utility classes too. Removing the theme rule
   leaves nothing to fight.

   Anything added below that targets a bare element rather than an .rr- class
   needs the same guard. Class-scoped rules (.rr-prose, .rr-feat, …) do not —
   those classes only exist in this theme's own templates. */
.rr-page :is(h1, h2, h3, h4):not(.retirement-calc-app *) {
	color: var(--rr-ink);
}

.rr-page :is(h1, h2):not(.retirement-calc-app *) {
	font-family: var(--rr-font-display);
	font-weight: 600;
	letter-spacing: -0.022em;
	text-wrap: balance;
	margin: 0 0 20px;
}

.rr-page h1:not(.retirement-calc-app *) {
	font-size: var(--rr-text-h1);
	line-height: 1.03;
	letter-spacing: -0.026em;
	max-width: 15ch;
	margin-bottom: 24px;
}

.rr-page h1:not(.retirement-calc-app *) em {
	font-style: italic;
	color: var(--rr-accent);
}

.rr-page h2:not(.retirement-calc-app *) {
	font-size: var(--rr-text-h2);
	line-height: 1.14;
	max-width: 22ch;
	margin-bottom: 26px;
}

/* An h2 sitting directly above body copy had no tonal separation from it —
   both resolve to --rr-ink, and the serif alone wasn't carrying the break.
   Dimming the paragraph was the other option and is the wrong one; see the ink
   note in tokens.css. A short accent rule separates them without touching the
   readability of either. */
.rr-page h2:not(.retirement-calc-app *)::after {
	display: block;
	width: 46px;
	height: 2px;
	margin-top: 20px;
	border-radius: 2px;
	background: var(--rr-accent);
	content: "";
}

.rr-page h3:not(.retirement-calc-app *) {
	font-family: var(--rr-font-body);
	font-size: var(--rr-text-h3);
	font-weight: 620;
	line-height: 1.3;
	letter-spacing: -0.008em;
	margin: 0 0 9px;
}

/* An h3 that follows content needs to sit closer to what it introduces than to
   what it ends. With no top margin it ran straight into the paragraph above —
   most visible on generated pages, where the publisher's markdown emits p then
   h3, and worst on a phone, where there is no column width to read the break
   from. Written as `* + h3` rather than a plain margin-top because every h3 in
   this theme's own templates (.rr-feat, .rr-step) is its card's first child; a
   flat margin would pad the top of every card in the grid. */
.rr-page * + h3:not(.retirement-calc-app *) {
	margin-top: 1.8em;
}

/* --- running text --------------------------------------------------------
   Body copy stays at --rr-ink, not a muted stop. See the note in tokens.css:
   muted body text on a dark ground is what makes long pages tiring. */

/* :not([class]) scopes this to running text — an unclassed <p> is body copy.
   Written as a bare `.rr-prose p` it also caught <p class="rr-eyebrow">, and at
   0,1,1 it outranked .rr-eyebrow's 0,1,0, so eyebrows inside a prose section
   rendered as body text: white and full size instead of small and accent. That
   is why the eyebrow looked like two different components between sections. */
.rr-prose p:not([class]) {
	max-width: var(--rr-measure);
	font-size: var(--rr-text-body);
	line-height: var(--rr-leading);
	color: var(--rr-ink);
	opacity: 0.88;
	text-wrap: pretty;
	margin: 0;
}

.rr-prose p:not([class]) + p:not([class]) {
	margin-top: 1.1em;
}

.rr-prose em {
	color: var(--rr-ink);
	opacity: 1;
	font-style: italic;
}

/* Running-text links. Without this, inline links fall through to Astra's blue
   at Astra's size — inconsistent with the theme, which uses the accent for
   everything interactive (FAQ markers, footer-legal and breadcrumb hovers).
   --rr-accent-hi is the token's designated link colour. font-size: inherit
   pins the link to the surrounding copy; Astra otherwise sizes it down.
   :not(.rr-btn) leaves a CTA button dropped into a prose block alone — it
   carries its own colour and must not be repainted as a text link. The
   underline is the running-text treatment established by .rr-footer__legal:
   a dim rule at rest that brightens on hover. */
.rr-prose a:not(.rr-btn) {
	color: var(--rr-accent-hi);
	font-size: inherit;
	text-decoration: underline;
	text-decoration-color: var(--rr-line);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: text-decoration-color 120ms ease;
}

.rr-prose a:not(.rr-btn):hover,
.rr-prose a:not(.rr-btn):focus {
	text-decoration-color: var(--rr-accent-hi);
}

.rr-lede {
	font-size: var(--rr-text-lede);
	line-height: 1.6;
	color: var(--rr-ink-2);
	max-width: 54ch;
	margin: 0 0 34px;
	text-wrap: pretty;
}

/* --- mono labels ----------------------------------------------------------
   One treatment, three placements. These had drifted to three sizes and two
   tracking values, which is what made the same idea read as different things in
   different sections. Size and tracking are shared; only colour varies, and it
   varies on a rule: accent means "this labels a section", ink-3 means "this
   labels a control or a figure inside a component". */

.rr-eyebrow,
.rr-fan__label,
.rr-step__n {
	font-family: var(--rr-font-mono);
	font-size: var(--rr-text-label);
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.rr-eyebrow {
	color: var(--rr-accent);
	margin: 0 0 18px;
	font-weight: 500;
}

/* --- buttons -------------------------------------------------------------- */

.rr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 15px;
	font-weight: 560;
	line-height: 1;
	padding: 12px 22px;
	border-radius: var(--rr-radius-sm);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 120ms ease, border-color 120ms ease,
		box-shadow 120ms ease, transform 120ms ease;
}

.rr-btn--primary {
	background: var(--rr-accent);
	color: var(--rr-accent-ink);
}

/* accent → accent-hi alone was too small a step to read as a state change on a
   dark ground. The glow and the 1px lift do most of the work; the colour shift
   is now the smallest part of it. */
.rr-btn--primary:hover,
.rr-btn--primary:focus {
	background: var(--rr-accent-hi);
	color: var(--rr-accent-ink);
	box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.26);
	transform: translateY(-1px);
}

.rr-btn--primary:active {
	transform: translateY(0);
	box-shadow: none;
}

.rr-btn--ghost {
	border-color: var(--rr-line);
	color: var(--rr-ink);
	background: none;
}

.rr-btn--ghost:hover,
.rr-btn--ghost:focus {
	border-color: var(--rr-accent);
	color: var(--rr-ink);
	background: var(--rr-accent-dim);
}

/* The lift is decoration, not information — the colour change carries the state
   on its own for anyone who has asked the OS to stop moving things. */
@media (prefers-reduced-motion: reduce) {
	.rr-btn {
		transition: none;
	}

	.rr-btn--primary:hover,
	.rr-btn--primary:focus {
		transform: none;
	}
}

/* The app draws its own focus rings; ours would sit on top of them. */
.rr-page :is(a, button, input):focus-visible:not(.retirement-calc-app *) {
	outline: 2px solid var(--rr-accent);
	outline-offset: 2px;
}

.rr-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

/* A single-button call to action dropped into published prose. Unlike
   .rr-cta-row it holds one button and centres it on the page, with its own
   vertical space so it stands clear of the surrounding copy. */
.rr-cta {
	display: flex;
	justify-content: center;
	margin: 32px 0;
}

/* Stacked, left-aligned buttons of unequal width read as a ragged column, so
   the call to action gets centred and the pair matches width. The surrounding
   copy stays left-aligned — centring running text would cost more readability
   than the buttons gain. */
@media (max-width: 600px) {
	.rr-cta-row {
		justify-content: center;
	}

	.rr-cta-row .rr-btn,
	.rr-price-box > .rr-btn {
		width: 100%;
		max-width: 340px;
	}

	.rr-price-box > .rr-btn {
		margin-inline: auto;
	}

	.rr-microcopy {
		text-align: center;
	}

	/* A 1px --rr-line border is nearly invisible on a phone, and the ghost
	   button was reading as a link rather than a control. It only needs the
	   stronger edge where it's actually the sole affordance. */
	.rr-btn--ghost {
		border-color: var(--rr-ink-3);
		background: var(--rr-surface);
	}
}

.rr-microcopy {
	font-size: var(--rr-text-small);
	color: var(--rr-ink-3);
	margin: 0;
}

/* --- the fan chart -------------------------------------------------------- */

.rr-fan {
	margin: clamp(40px, 6vw, 66px) 0 0;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
	background: var(--rr-surface);
	overflow: hidden;
}

.rr-fan__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 20px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--rr-line);
}

.rr-fan__label {
	color: var(--rr-ink-3);
	margin-right: auto;
}

.rr-stat {
	font-family: var(--rr-font-mono);
	font-size: 12.5px;
	color: var(--rr-ink-2);
	font-variant-numeric: tabular-nums;
}

.rr-stat b {
	color: var(--rr-accent);
	font-weight: 600;
}

.rr-fan canvas {
	display: block;
	width: 100%;
	height: auto;
}

/* The keys read as words now rather than percentile codes, so they take the body
   face — mono at 11.5px suited "P10–P90" and works against "Middle 80% of
   outcomes". Tabular figures stay for the age range on the right. */
.rr-fan__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	padding: 13px 20px;
	border-top: 1px solid var(--rr-line);
	font-family: var(--rr-font-body);
	font-size: 13px;
	color: var(--rr-ink-2);
	font-variant-numeric: tabular-nums;
}

.rr-key {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.rr-chip {
	width: 22px;
	height: 9px;
	border-radius: 2px;
	background: var(--rr-band-inner);
}

.rr-chip--outer {
	background: var(--rr-band-outer);
}

.rr-chip--median {
	height: 2px;
	border-radius: 0;
	background: var(--rr-accent);
}

/* --- the loop ------------------------------------------------------------- */

.rr-loop {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: 1px;
	background: var(--rr-line);
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
	overflow: hidden;
	margin-top: 40px;
}

.rr-step {
	background: var(--rr-surface);
	padding: 26px 24px 30px;
}

/* Steps 3 and 4 are the ones a subscriber repeats. The tint encodes the cycle
   so the section doesn't read as a funnel with a finish line.

   The tint alone made the pair read as one block: two identically-filled cards
   either side of a 1px divider that the fill swallowed. The accent bar gives
   each card its own top edge, so they stay a pair without merging — and it
   survives the mobile stack, where the divider is weakest. */
.rr-step--cyclical {
	background: var(--rr-accent-dim);
	box-shadow: inset 0 2px 0 0 var(--rr-accent);
}

.rr-step__n {
	display: block;
	color: var(--rr-ink-3);
	margin-bottom: 14px;
}

.rr-step--cyclical .rr-step__n {
	color: var(--rr-accent);
}

/* Stacked, the cards butt against each other and the top bars alone read as
   stripes rather than edges — the gap has to do real work at this width. */
@media (max-width: 460px) {
	.rr-loop {
		gap: 10px;
		background: none;
		border: none;
		border-radius: 0;
		overflow: visible;
	}

	.rr-step {
		border: 1px solid var(--rr-line);
		border-radius: var(--rr-radius-sm);
	}
}

.rr-step p {
	font-size: 14.8px;
	line-height: 1.6;
	color: var(--rr-ink-2);
	margin: 0;
}

.rr-loop__note {
	font-size: 14.5px;
	font-style: italic;
	color: var(--rr-ink-3);
	margin: 18px 0 0;
}

/* --- feature grid --------------------------------------------------------- */

.rr-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
	gap: 38px 44px;
	margin-top: 44px;
}

.rr-feat h3::before {
	content: "";
	display: block;
	width: 26px;
	height: 2px;
	background: var(--rr-accent);
	margin-bottom: 14px;
}

.rr-feat p {
	font-size: 15.4px;
	line-height: 1.6;
	color: var(--rr-ink-2);
	margin: 0;
}

/* --- pricing -------------------------------------------------------------- */

.rr-price-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
	padding: 36px;
	margin-top: 34px;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
	background: var(--rr-surface);
}

/* Wraps the figure and its trial line so the two travel together when the box
   wraps, instead of the trial line being pushed onto its own row. */
.rr-price-box__figure {
	flex: none;
}

.rr-price {
	font-family: var(--rr-font-display);
	font-size: 52px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.rr-price small {
	font-family: var(--rr-font-body);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--rr-ink-3);
}

/* The trial is the offer, so it sits with the figure rather than in the body
   copy — but it stays smaller than the price, because $20/month is the fact a
   reader is actually here to check. */
.rr-price__trial {
	font-family: var(--rr-font-mono);
	font-size: var(--rr-text-label);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--rr-accent);
	margin: 10px 0 0;
}

.rr-price-box__body {
	flex: 1 1 300px;
}

.rr-price-box__body p {
	font-size: 15.4px;
	line-height: 1.6;
	color: var(--rr-ink-2);
	margin: 0 0 6px;
}

/* --- closer --------------------------------------------------------------- */

.rr-closer {
	text-align: center;
}

.rr-closer h2 {
	margin-inline: auto;
}

/* The section is centred, so the accent rule has to be too — it would otherwise
   hang off the left edge of a centred heading. */
.rr-closer h2::after {
	margin-inline: auto;
}

.rr-closer p {
	max-width: 50ch;
	margin: 0 auto 30px;
	font-size: var(--rr-text-body);
	line-height: var(--rr-leading);
	color: var(--rr-ink-2);
}

/* The price moved off the button and onto this line, so it sits under the CTA
   rather than above it — the button makes the offer, this qualifies it. */
.rr-closer__micro {
	margin-top: 16px;
	text-align: center;
}

/* --- wide content --------------------------------------------------------- */

.rr-scroll-x {
	overflow-x: auto;
}

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

/* --- generated pages: prose, help sidebar, and its chrome -----------------
   Everything the publisher writes lands in page.php, which uses .rr-doc as its
   layout wrapper. Help pages add .rr-doc--with-nav and gain a sidebar; every
   other generated page is a single column of prose.
   ------------------------------------------------------------------------- */

.rr-doc {
	display: grid;
	gap: 48px;
}

@media (min-width: 900px) {
	.rr-doc--with-nav {
		grid-template-columns: 232px minmax(0, 1fr);
		gap: 56px;
	}
}

/* The measure belongs on running text, not on the article.
   --rr-measure is 65ch resolved at body size — about 550px. Capping the whole
   column there made every heading wrap at half the width available to it, and
   left the rest of a 1120px page empty. Paragraphs and lists keep the measure
   because that is what it is for; headings, tables, and figures use the column. */
.rr-doc__body {
	min-width: 0;
}

.rr-doc__body :is(p, ul, ol, blockquote, dl) {
	max-width: var(--rr-measure);
}

/* The global h1/h2 rules cap the display headings at 15ch/22ch — right for the
   marketing hero, wrong here, where the title is a document title and wraps to
   two or three lines at that measure inside a full-width column. This is the
   same principle as the paragraph rule above, applied the other way: running
   text keeps the measure, headings take the column. Scoped to .rr-doc__body so
   the front page's tight hero headings are untouched.

   .rr-page is on the selector to match the global heading rules' specificity
   (0,2,1 — .rr-page + the :not() guard + the element); without it this sat at
   0,1,1 and lost, leaving the caps in place. Equal specificity, later in the
   file, so the cascade order carries it. */
.rr-page .rr-doc__body :is(h1, h2, h3, h4) {
	max-width: none;
}

/* Nested lists are already inside a constrained parent; re-applying the measure
   would compound the indent into a progressively narrower column. */
.rr-doc__body :is(ul, ol) :is(ul, ol) {
	max-width: none;
}

/* Section rhythm. Generated pages lean on a markdown `---` (an <hr>) before
   every section heading to space it. The first <h2> has no rule before it — it
   follows the intro paragraph — so it sat tight against the copy (visible on
   /features above "The simulation engine"). A top margin on the content h2
   makes the gap the same with or without a rule; where an <hr> does precede it,
   the two margins collapse in normal flow rather than stacking into a double
   gap. em is wrong here — the h2 font is fluid (clamp 27–40px), so a fixed px
   keeps the break even across viewports and matches the rest of this file.

   `> h2` keeps this to the content's own top-level headings: the "Related"
   label (a grandchild) and the FAQ category headings (their own `.rr-faq h2`
   rule) must not inherit it. Anchored on `.rr-page` to clear the global h1/h2
   rule that zeroes the top margin at (0,2,1); the front page's hand-spaced
   `.rr-prose` sections are untouched because they are not `.rr-doc__body`. */
.rr-page .rr-doc__body:not(.rr-faq) > h2 {
	margin-top: 44px;
}

/* The dividers themselves read as cramped — flagged on /faq. Room on both
   sides; the following h2's top margin collapses into the lower value here
   rather than adding to it, so a rule-plus-heading break stays even. */
.rr-page .rr-doc__body hr {
	margin: 44px 0;
}

/* --- sidebar -------------------------------------------------------------- */

.rr-sidebar {
	font-size: var(--rr-text-small);
}

@media (min-width: 900px) {
	.rr-sidebar {
		position: sticky;
		top: 24px;
		align-self: start;
		/* Six groups and fifty links overflow most screens; scroll the sidebar
		   rather than the page so the current entry stays reachable. */
		max-height: calc(100vh - 48px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* The nav is a <details> disclosure so fifty links don't sit between the
   header and the article at narrow widths. `open` in the markup keeps it
   working without JS (expanded, still collapsible by hand); a parse-time
   script in page.php collapses it by default and nav.js manages it across the
   breakpoint. On desktop the toggle is hidden and the list is always shown. */
.rr-sidebar__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius-sm);
	background: var(--rr-surface);
	color: var(--rr-ink);
	font-size: var(--rr-text-body);
	font-weight: 560;
	cursor: pointer;
	/* Drop the default disclosure triangle; a chevron is drawn below. */
	list-style: none;
}

.rr-sidebar__toggle::-webkit-details-marker {
	display: none;
}

.rr-sidebar__toggle:focus-visible {
	outline: 2px solid var(--rr-accent);
	outline-offset: 2px;
}

/* Chevron at the trailing edge: points down when collapsed, up when open. */
.rr-sidebar__toggle::after {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--rr-ink-2);
	border-bottom: 2px solid var(--rr-ink-2);
	transform: rotate(45deg);
	transition: transform 120ms ease;
}

.rr-sidebar__nav[open] .rr-sidebar__toggle::after {
	transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
	.rr-sidebar__toggle::after {
		transition: none;
	}
}

/* Mobile: space the revealed list off the toggle. */
@media (max-width: 899px) {
	.rr-sidebar__nav[open] > .rr-sidebar__groups {
		margin-top: 14px;
	}
}

/* Desktop: no toggle; the list is always shown (the <details> stays open). */
@media (min-width: 900px) {
	.rr-sidebar__toggle {
		display: none;
	}
}

.rr-sidebar__head {
	margin: 22px 0 8px;
	color: var(--rr-ink-3);
	font-size: var(--rr-text-label);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rr-sidebar__head:first-child {
	margin-top: 0;
}

.rr-sidebar__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rr-sidebar__list a {
	display: block;
	padding: 5px 10px;
	border-left: 2px solid transparent;
	color: var(--rr-ink-2);
	line-height: 1.35;
	text-decoration: none;
}

.rr-sidebar__list a:hover {
	color: var(--rr-ink);
	background: var(--rr-surface);
}

.rr-sidebar__list a.is-current {
	border-left-color: var(--rr-accent);
	color: var(--rr-accent-hi);
	background: var(--rr-surface);
	font-weight: 560;
}

/* --- breadcrumbs ---------------------------------------------------------- */

.rr-crumbs {
	margin: 0 0 20px;
	color: var(--rr-ink-3);
	font-size: var(--rr-text-small);
}

.rr-crumbs a {
	color: var(--rr-ink-3);
	text-decoration: none;
}

.rr-crumbs a:hover {
	color: var(--rr-accent-hi);
	text-decoration: underline;
}

.rr-crumbs__sep {
	margin: 0 8px;
	opacity: 0.5;
}

/* --- related + pager ------------------------------------------------------ */

.rr-related {
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--rr-line);
}

.rr-related h2 {
	margin: 0 0 12px;
	font-size: var(--rr-text-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The section accent bar that .rr-page h2 stamps would read as a new chapter
   here; this heading is a label on a list, not a division of the document. */
.rr-related h2::after {
	content: none;
}

.rr-related ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rr-related li + li {
	margin-top: 6px;
}

.rr-pager {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--rr-line);
}

.rr-pager__link {
	display: block;
	max-width: 48%;
	text-decoration: none;
}

.rr-pager__link--next {
	margin-left: auto;
	text-align: right;
}

.rr-pager__dir {
	display: block;
	color: var(--rr-ink-3);
	font-size: var(--rr-text-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rr-pager__label {
	display: block;
	margin-top: 2px;
	color: var(--rr-accent-hi);
	line-height: 1.35;
}

/* --- generated section index ---------------------------------------------- */

.rr-help-index {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rr-help-index li + li {
	margin-top: 8px;
}

/* --- FAQ accordion --------------------------------------------------------
   Questions are collapsed <details>; see retirerange_faq_accordion(). The h2
   category headings between them are left as ordinary headings.
   ------------------------------------------------------------------------- */

.rr-faq__item {
	border-bottom: 1px solid var(--rr-line);
}

.rr-faq__q {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 16px 0;
	color: var(--rr-ink);
	font-size: var(--rr-text-h3);
	font-weight: 560;
	line-height: 1.35;
	cursor: pointer;
	list-style: none; /* Firefox */
}

/* Safari and Chrome draw their own triangle through ::-webkit-details-marker,
   which ignores list-style and sits at the wrong baseline beside a large label. */
.rr-faq__q::-webkit-details-marker {
	display: none;
}

.rr-faq__q::before {
	content: "+";
	flex: none;
	width: 1em;
	color: var(--rr-accent);
	font-size: 0.9em;
	font-weight: 400;
	text-align: center;
}

.rr-faq__item[open] > .rr-faq__q::before {
	content: "−"; /* U+2212, which matches the plus's width — a hyphen does not. */
}

.rr-faq__q:hover {
	color: var(--rr-accent-hi);
}

.rr-faq__q:focus-visible {
	outline: 2px solid var(--rr-accent);
	outline-offset: 3px;
}

/* Indent the answer to the question's text, past the marker. */
.rr-faq__item > :not(summary) {
	margin-left: calc(1em + 14px);
}

.rr-faq__item > :last-child {
	margin-bottom: 18px;
}

/* The category headings carry the section accent bar by default, which reads as
   a heavier division than a group of questions needs. */
.rr-faq h2 {
	margin-top: 44px;
}

/* --- Restrict Content Pro: register, login, profile, account ---------------
   RCP owns the markup for these pages; we only re-skin it. This is CSS-only by
   design — no template override in `theme/rcp/` — so RCP's field set and the
   element IDs its checkout depends on can never be broken from here, and the
   plugin can update without dragging markup out of sync.

   RCP's own stylesheet (`rcp-form-css`) is left enqueued on purpose: it carries
   the Stripe Element states, the `#rcp-card-element-errors` container, and the
   card-entry modal (`.rcp-modal*`) that some gateway flows depend on. Removing
   it to "own the cascade" the way we do with Astra would take that machinery
   with it. So these rules layer over it instead.

   That sheet prints at wp_footer — after this file — so a handful of its rules
   would win a specificity tie on load order. Every rule below is anchored on
   `.rr-page` (the body class from header.php) to clear RCP's base rules, and
   the three places where RCP itself uses two classes (noted inline) carry an
   extra step to get over them. These are `.rcp_`/`.rcp-` class selectors, which
   exist only where RCP renders and never inside the calculator app, so the
   `:not(.retirement-calc-app *)` guard the bare-element rules need does not
   apply here.

   Boundary with the calculator plugin: the account page runs the plugin's
   `[retirement_account_dashboard]`, whose `.rc-dashboard` markup this file now
   owns the look of (see the "account dashboard" section below) — the plugin
   emits structure and data, the theme supplies the CSS. The one `rc-*` surface
   left alone is the legacy `.rc-referral-account` panel: it only renders on
   installs using RCP's native `[subscription_details]` (Setup A), which this
   site does not, and it still carries its own inline styles.
   ------------------------------------------------------------------------- */

/* Keep the forms to a readable column rather than letting fields stretch the
   full 1120px page. RCP capped inputs at 400px; we cap the form instead so
   labels, level cards, and the submit row all share one edge. */
.rr-page .rcp_form {
	max-width: 520px;
}

.rr-page .rcp_form fieldset {
	margin: 0 0 26px;
	padding: 0;
	border: none;
}

.rr-page .rcp_form legend {
	font-family: var(--rr-font-body);
	font-size: var(--rr-text-h3);
	font-weight: 620;
	color: var(--rr-ink);
	margin-bottom: 14px;
}

/* Field rows. RCP wraps each field in a <p id="rcp_*_wrap">. */
.rr-page .rcp_form p {
	margin: 0 0 18px;
}

.rr-page .rcp_form label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--rr-text-small);
	font-weight: 500;
	color: var(--rr-ink-2);
}

/* Text inputs and the display-name select. RCP's `input.required { color:#000 }`
   is a two-class rule (0,2,1) that loads after us and would paint typed text
   black on the dark fill; `input:not([type=submit])` here is 0,3,1 (the
   attribute :not adds the step) so the ink colour holds. */
.rr-page .rcp_form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.rr-page .rcp_form select {
	width: 100%;
	max-width: 100%;
	padding: 11px 13px;
	font-family: inherit;
	font-size: var(--rr-text-body);
	color: var(--rr-ink);
	background: var(--rr-surface);
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius-sm);
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.rr-page .rcp_form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"])::placeholder {
	color: var(--rr-ink-3);
}

/* Focus: accent border plus the same soft ring the primary button uses. The
   theme's global focus-visible outline still applies for keyboard users; this
   adds the border shift for pointer focus too. */
.rr-page .rcp_form input:not([type="submit"]):focus,
.rr-page .rcp_form select:focus {
	border-color: var(--rr-accent);
	box-shadow: 0 0 0 3px var(--rr-accent-dim);
	outline: none;
}

/* Checkboxes and radios (remember-me, agree-to-terms, auto-renew, gateway and
   level selectors) adopt the accent instead of the UA blue. */
.rr-page .rcp_form input[type="checkbox"],
.rr-page .rcp_form input[type="radio"] {
	accent-color: var(--rr-accent);
}

/* The membership-level chooser — two levels here ($20/mo, $200/yr). RCP emits
   <li class="rcp_subscription_level"> with a radio and a label; we turn each
   into a selectable card. `:has()` lets the whole card react to its own radio,
   with the accent border and tint marking the chosen one. */
.rr-page #rcp_subscription_levels {
	display: grid;
	gap: 12px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.rr-page .rcp_subscription_level {
	margin: 0;
	padding: 16px 18px;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
	background: var(--rr-surface);
	transition: border-color 120ms ease, background-color 120ms ease;
}

.rr-page .rcp_subscription_level:has(input:checked) {
	border-color: var(--rr-accent);
	background: var(--rr-accent-dim);
}

.rr-page .rcp_subscription_level label {
	display: inline;
	margin: 0;
	font-size: var(--rr-text-body);
	color: var(--rr-ink);
}

.rr-page .rcp_price {
	color: var(--rr-accent-hi);
	font-weight: 600;
}

.rr-page .rcp_level_description {
	margin-top: 6px;
	border-left: 2px solid var(--rr-line);
	padding-left: 10px;
	font-size: var(--rr-text-small);
	color: var(--rr-ink-2);
}

/* Discount code row — the field and its Apply button sit together. RCP's Apply
   button is `.rcp_button` (underscore); the form's submit is `.rcp-button`
   (hyphen). We style the discount button as a ghost so the accent stays with
   the one action that matters, the submit. */
.rr-page .rcp_discount_code_field_wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.rr-page .rcp_discount_valid {
	color: var(--rr-accent-hi);
}

.rr-page .rcp_discount_invalid {
	color: var(--rr-danger);
}

/* Submit buttons across all four forms carry `.rcp-button`; some also add
   `.rcp_submit`. Match the primary button without reusing the `.rr-btn` class,
   which RCP's markup can't add. Kept in sync with `.rr-btn--primary` above. */
.rr-page .rcp_form input[type="submit"],
.rr-page .rcp_form .rcp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 15px;
	font-weight: 560;
	line-height: 1;
	padding: 13px 24px;
	border: 1px solid transparent;
	border-radius: var(--rr-radius-sm);
	color: var(--rr-accent-ink);
	background: var(--rr-accent);
	cursor: pointer;
	transition: background-color 120ms ease, box-shadow 120ms ease,
		transform 120ms ease;
}

.rr-page .rcp_form input[type="submit"]:hover,
.rr-page .rcp_form input[type="submit"]:focus,
.rr-page .rcp_form .rcp-button:hover,
.rr-page .rcp_form .rcp-button:focus {
	background: var(--rr-accent-hi);
	box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.26);
	transform: translateY(-1px);
}

/* The discount Apply button is the one secondary action — ghost, not accent. */
.rr-page .rcp_form .rcp_button {
	padding: 11px 16px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 560;
	color: var(--rr-ink);
	background: none;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius-sm);
	cursor: pointer;
	transition: border-color 120ms ease, background-color 120ms ease;
}

.rr-page .rcp_form .rcp_button:hover,
.rr-page .rcp_form .rcp_button:focus {
	border-color: var(--rr-accent);
	background: var(--rr-accent-dim);
}

@media (prefers-reduced-motion: reduce) {
	.rr-page .rcp_form input[type="submit"]:hover,
	.rr-page .rcp_form input[type="submit"]:focus,
	.rr-page .rcp_form .rcp-button:hover,
	.rr-page .rcp_form .rcp-button:focus {
		transform: none;
	}
}

/* Login helpers — the "Lost your password?" and logout links read as
   running-text links (accent, underlined), matching `.rr-prose a`. */
.rr-page .rcp_lost_password a,
.rr-page .rcp_logged_in a {
	color: var(--rr-accent-hi);
	text-decoration: underline;
	text-decoration-color: var(--rr-line);
	text-underline-offset: 3px;
}

/* Notices. RCP paints these light yellow/red with dark text (0,1,1 element+class
   rules); `.rr-page p.rcp_*` is 0,2,1 and clears them. Error takes danger, the
   two positive notices take the accent — consistent with the theme's semantics
   in tokens.css. */
.rr-page p.rcp_error,
.rr-page p.rcp_success,
.rr-page p.rcp_message {
	margin: 0 0 20px;
	padding: 12px 16px;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius-sm);
	background: var(--rr-surface);
	color: var(--rr-ink);
}

.rr-page p.rcp_error {
	border-color: var(--rr-danger);
	color: var(--rr-ink);
}

.rr-page p.rcp_success {
	border-color: var(--rr-accent);
}

.rr-page p.rcp_error span,
.rr-page p.rcp_success span {
	padding: 0;
}

/* RCP's native `.rcp-table` (from `[subscription_details]`) is intentionally
   unstyled: this site's account page runs the calculator plugin's
   `[retirement_account_dashboard]` instead, so that table never renders. If the
   account page ever reverts, a `.rr-page .rcp-table` block wants adding here. */

/* The register form's running total is a *different* `.rcp-table`, and this one
   does render: `[register_form]` fills `.rcp_registration_total` over AJAX with
   a `.rcp_registration_total_details.rcp-table`. RCP's own forms.min.css turns
   its rows into `display:flex` cards pinned to `width:400px` — its mobile
   styling, applied at every width — so each row sizes its own two columns and
   nothing lines up, in a pale palette that fights the dark form. Restore a real
   full-width two-column table in the theme's colours.

   RCP injects the markup with `.rcp_registration_total.html(...)`, and the
   response is itself wrapped in `.rcp_registration_total`, so the div nests.
   `:has(> …)` styles only the inner wrapper — the one actually holding the
   table — so the card border is drawn once, not twice. */
.rr-page .rcp_registration_total:has(> .rcp_registration_total_details) {
	margin: 0 0 22px;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
	overflow: hidden;
	background: var(--rr-surface);
}

.rr-page .rcp_registration_total_details {
	width: 100%;
	margin: 0;
	/* Astra gives the table its own top/left border; the wrapper owns the
	   outline here, so drop it. */
	border: 0;
	border-collapse: collapse;
}

/* Undo the flex-card display forms.min.css forces on the group and rows. */
.rr-page .rcp_registration_total_details thead,
.rr-page .rcp_registration_total_details tbody,
.rr-page .rcp_registration_total_details tfoot {
	display: table-row-group;
}

.rr-page .rcp_registration_total_details thead {
	display: table-header-group;
	/* Border on the row group, not the lone header cell, so the divider spans
	   both columns even though the header row has a single cell. */
	background: var(--rr-ground);
	border-bottom: 1px solid var(--rr-line);
}

.rr-page .rcp_registration_total_details tr {
	display: table-row;
	width: auto;
	max-width: none;
	border: 0;
	padding: 0;
}

.rr-page .rcp_registration_total_details th,
.rr-page .rcp_registration_total_details td {
	display: table-cell;
	margin: 0;
	padding: 11px 16px;
	vertical-align: top;
	text-align: left;
	/* Astra sets `border-width: 0 1px 1px 0` on every cell — the right edge is
	   the stray vertical rule between the columns. Clear all of it and keep
	   only a horizontal divider between rows. */
	border: 0;
	border-bottom: 1px solid var(--rr-line);
	font-size: var(--rr-text-body);
	color: var(--rr-ink);
}

/* The lone header cell labels the block. */
.rr-page .rcp_registration_total_details thead th {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rr-ink-3);
}

/* Quiet label column; the value column carries the figure, right-aligned. */
.rr-page .rcp_registration_total_details tbody td:first-child,
.rr-page .rcp_registration_total_details tfoot td:first-child {
	color: var(--rr-ink-2);
}

.rr-page .rcp_registration_total_details tbody td:last-child,
.rr-page .rcp_registration_total_details tfoot td:last-child {
	text-align: right;
}

/* The foot holds the figures that matter — today's total and the recurring
   charge — so give the values weight. */
.rr-page .rcp_registration_total_details tfoot td:last-child {
	font-weight: 600;
	color: var(--rr-ink);
}

/* The card border closes the final row; no divider under it. Scoped to the
   foot's last row — a bare `tr:last-child` also matches the last row of the
   head and body, which would drop the divider between the body and foot. */
.rr-page .rcp_registration_total_details tfoot tr:last-child th,
.rr-page .rcp_registration_total_details tfoot tr:last-child td {
	border-bottom: 0;
}

/* --- account dashboard ( [retirement_account_dashboard] ) ------------------
   The calculator plugin renders the account page as `.rc-dashboard` — three
   cards (membership, referral credit, quick links) plus a header. The plugin
   used to ship a self-contained <style> block in a light/blue palette; that was
   removed in favour of these rules so the account page matches the rest of the
   site. The plugin owns the markup and its class names; this owns the look. The
   class contract: change a name here only alongside the plugin.
   ------------------------------------------------------------------------- */

.rr-page .rc-dashboard {
	max-width: var(--rr-max);
	margin: 0;
}

.rr-page .rc-dashboard-header {
	margin-bottom: 32px;
}

.rr-page .rc-dashboard-header p {
	color: var(--rr-ink-2);
	margin: 0;
}

.rr-page .rc-dashboard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

/* Cards reuse the panel recipe used by .rr-fan / .rr-price-box: surface fill,
   line border, radius. */
.rr-page .rc-card {
	display: flex;
	flex-direction: column;
	padding: 24px 26px;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
	background: var(--rr-surface);
}

.rr-page .rc-card h3 {
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--rr-line);
}

.rr-page .rc-card-wide {
	grid-column: 1 / -1;
}

/* Label/value rows. */
.rr-page .rc-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 6px 0;
}

.rr-page .rc-label {
	color: var(--rr-ink-2);
	font-size: var(--rr-text-small);
}

.rr-page .rc-value {
	color: var(--rr-ink);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Card CTAs — primary (accent) and secondary (ghost), matching the buttons used
   on the RCP forms above. The plugin renders these as <a> links. */
.rr-page .rc-cta {
	margin-top: auto;
	padding-top: 18px;
}

.rr-page .rc-cta a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 560;
	line-height: 1;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--rr-radius-sm);
	color: var(--rr-accent-ink);
	background: var(--rr-accent);
	text-decoration: none;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.rr-page .rc-cta a:hover,
.rr-page .rc-cta a:focus {
	background: var(--rr-accent-hi);
}

.rr-page .rc-cta a.rc-secondary {
	margin-left: 8px;
	color: var(--rr-ink);
	background: none;
	border-color: var(--rr-line);
}

.rr-page .rc-cta a.rc-secondary:hover,
.rr-page .rc-cta a.rc-secondary:focus {
	border-color: var(--rr-accent);
	background: var(--rr-accent-dim);
}

/* Status badge. The plugin sets a `.rc-status-<state>` modifier; the state
   maps onto the theme's semantic tokens. One neutral chip shape, colour carries
   the meaning — so no new tokens are needed. */
.rr-page .rc-status-badge {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid var(--rr-line);
	border-radius: 999px;
	background: var(--rr-surface-2);
	font-family: var(--rr-font-mono);
	font-size: var(--rr-text-label);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rr-ink-2);
}

.rr-page .rc-status-active {
	color: var(--rr-accent-hi);
	border-color: var(--rr-accent);
}

.rr-page .rc-status-cancelled,
.rr-page .rc-status-expired {
	color: var(--rr-danger);
	border-color: var(--rr-danger);
}

.rr-page .rc-status-pending,
.rr-page .rc-status-trial {
	color: var(--rr-warning);
	border-color: var(--rr-warning);
}

.rr-page .rc-status-free,
.rr-page .rc-status-none {
	color: var(--rr-ink-3);
}

/* Invoice download link on billing-history rows — quieter than the amount it
   sits beside, in the theme's designated link colour. */
.rr-page .rc-invoice-link {
	margin-left: 8px;
	font-size: var(--rr-text-small);
	font-weight: 500;
	color: var(--rr-accent-hi);
	text-decoration: none;
}

.rr-page .rc-invoice-link:hover,
.rr-page .rc-invoice-link:focus {
	text-decoration: underline;
}

/* Referral share row — a read-only link field and a copy button. */
.rr-page .rc-share-note {
	margin: 12px 0 4px;
}

.rr-page .rc-share-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.rr-page .rc-share-row input {
	flex: 1 1 220px;
	min-width: 200px;
	padding: 9px 11px;
	color: var(--rr-ink-2);
	background: var(--rr-surface-2);
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius-sm);
	font-family: var(--rr-font-mono);
	font-size: var(--rr-text-small);
}

.rr-page .rc-share-row button {
	padding: 9px 16px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 560;
	color: var(--rr-ink);
	background: none;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius-sm);
	cursor: pointer;
	transition: border-color 120ms ease, background-color 120ms ease;
}

.rr-page .rc-share-row button:hover,
.rr-page .rc-share-row button:focus {
	border-color: var(--rr-accent);
	background: var(--rr-accent-dim);
}

.rr-page .rc-code-chip {
	display: inline-block;
	padding: 2px 8px;
	background: var(--rr-surface-2);
	border-radius: var(--rr-radius-sm);
	font-family: var(--rr-font-mono);
	letter-spacing: 0.05em;
	color: var(--rr-accent-hi);
}

/* Quick-links list. */
.rr-page .rc-quick-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rr-page .rc-quick-links li {
	padding: 9px 0;
	border-bottom: 1px solid var(--rr-line);
}

.rr-page .rc-quick-links li:last-child {
	border-bottom: none;
}

.rr-page .rc-quick-links a {
	color: var(--rr-accent-hi);
	text-decoration: none;
}

.rr-page .rc-quick-links a:hover,
.rr-page .rc-quick-links a:focus {
	text-decoration: underline;
}

.rr-page .rc-muted {
	color: var(--rr-ink-3);
	font-size: var(--rr-text-small);
}