/*
 * Roots 'n' Fruits — offer page + shared shell components.
 *
 * Ported from the approved mockup's inline styles into token-referencing
 * classes. No inline styles remain in the markup.
 */

/* ---------------------------------------------------------------------------
 * Shared shell: header + footer (light, conversion-friendly)
 * ------------------------------------------------------------------------- */
.rnf-site-header {
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

.rnf-site-header__inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 16px 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.rnf-brand {
	font-family: var(--font-serif);
	font-size: 19px;
	font-weight: 500;
	color: var(--pine);
	text-decoration: none;
}

.rnf-brand img {
	display: block;
	max-height: 38px;
	width: auto;
}

.rnf-site-nav {
	display: flex;
	align-items: center;
	gap: 18px;
	font-size: 14px;
}

.rnf-site-nav__login {
	color: var(--inks);
	text-decoration: none;
}

.rnf-site-nav__login:hover {
	color: var(--pine);
}

/* Small pill variant of the button for the header Sign up CTA. */
.rnf-btn--pill-sm {
	padding: 8px 18px;
	font-size: 14px;
}

/* Over-hero mode: front page only. Transparent bar over the hero, cream text.
   The hero reserves top space for this (see home.css). */
.rnf-header--over {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
	background: transparent;
	border-bottom: none;
}

.rnf-header--over .rnf-brand {
	color: var(--paper);
}

.rnf-header--over .rnf-site-nav__login {
	color: var(--paper2);
}

.rnf-header--over .rnf-site-nav__login:hover {
	color: #fff;
}

.rnf-header--over .rnf-btn--pill-sm {
	background: var(--paper);
	color: var(--pine);
}

.rnf-header--over .rnf-btn--pill-sm:hover {
	background: #fff;
	color: var(--pine);
}

/* ---------------------------------------------------------------------------
 * Shared footer: four-column layout (site-wide), dark pine surface
 * ------------------------------------------------------------------------- */
.rnf-site-footer {
	background: var(--pine);
	color: var(--on-pine);
}

.rnf-site-footer__inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 44px 26px 28px;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 28px;
	font-size: 13.5px;
}

.rnf-foot-col {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.rnf-foot-head {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sage3);
	margin: 0 0 4px;
}

.rnf-foot-brand {
	font-family: var(--font-serif);
	font-size: 19px;
	font-weight: 500;
	color: var(--on-pine);
}

.rnf-foot-blurb {
	margin: 8px 0 0;
	max-width: 30ch;
	color: var(--sage3);
	line-height: 1.55;
}

.rnf-site-footer a {
	color: var(--on-pine);
	text-decoration: none;
	opacity: 0.85;
}

.rnf-site-footer a:hover {
	opacity: 1;
}

.rnf-site-footer__bottom {
	border-top: 1px solid rgba(246, 242, 232, 0.16);
}

.rnf-site-footer__bottom-inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 16px 26px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	justify-content: space-between;
	font-size: 12.5px;
	color: var(--sage3);
}

/* Footer bottom bar (added 2026-07-26, local only): copyright to the RIGHT; the affiliate
   disclosure (when present, i.e. non-home pages) sits to the LEFT, so they never overlap.
   Additive/reversible: delete this block to restore copyright-left / disclosure-right. */
.rnf-site-footer__bottom-inner > span:not(.rnf-foot-affiliate) { order: 2; margin-left: auto; }
.rnf-site-footer__bottom-inner > .rnf-foot-affiliate { order: 1; }

@media (max-width: 760px) {
	/* BEGIN rnf footer mobile 3col */
	/* Superseded 2026-07-30 (local only): was 1fr 1fr, which put Explore and Legal
	   side by side and left Follow alone on a second row. Going three-across here
	   covers the whole sub-760 range in one place. Reversible: delete this block
	   and uncomment the rule below.
	.rnf-site-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}
	*/
	.rnf-site-footer__inner {
		grid-template-columns: repeat(3, 1fr);
		gap: 18px;
	}
	/* END rnf footer mobile 3col */
	.rnf-foot-col--brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 460px) {
	/* BEGIN rnf footer mobile 3col */
	/* Superseded 2026-07-30 (local only): was 1fr, which re-collapsed the three
	   link sections on phones. Staying three-across with a tighter gap. The brand
	   keeps its own full-width row via the cascaded grid-column above.
	.rnf-site-footer__inner {
		grid-template-columns: 1fr;
	}
	*/
	.rnf-site-footer__inner {
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
	}

	/* Let the narrow columns shrink and wrap rather than overflow. word-break stays
	   normal so labels break at spaces, not mid-word. */
	.rnf-site-footer__inner .rnf-foot-col {
		min-width: 0;
	}

	.rnf-site-footer__inner .rnf-foot-col a,
	.rnf-site-footer__inner .rnf-foot-head {
		overflow-wrap: break-word;
		word-break: normal;
	}
	/* END rnf footer mobile 3col */
}

/* ---------------------------------------------------------------------------
 * Offer page wrapper + section rhythm
 * ------------------------------------------------------------------------- */
.rnf {
	color: var(--ink);
	line-height: 1.6;
}

.rnf-sec {
	padding: 30px 26px;
}

.rnf-sec__inner {
	max-width: var(--content-max);
	margin: 0 auto;
}

/* Background bands */
.rnf-sec--cream  { background: var(--paper); }
.rnf-sec--sage   { background: var(--sage2); }
.rnf-sec--paper2 { background: var(--paper2); }
.rnf-sec--center { text-align: center; }

/* Added 2026-07-27 (local only, reversible): faded forest photo behind the reviews
   section. URL + sage wash are set inline on the section (esc_url pattern); this rule
   only sizes/positions the photo. Remove to revert. */
.rnf-sec--reviews-photo {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Added 2026-07-27 (local only, reversible): faded flowers photo behind the Bottlenecks
   section. Same treatment as .rnf-sec--reviews-photo. URL + sage wash set inline on the
   section; this rule only sizes/positions the photo. Remove to revert. */
.rnf-sec--bottlenecks-photo {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Added 2026-07-27 (local only, reversible): faded bumblebee photo behind the Our Standards
   section. Same treatment as .rnf-sec--reviews-photo / .rnf-sec--bottlenecks-photo. URL +
   sage wash set inline on the section; this rule only sizes/positions the photo. Remove to revert. */
.rnf-sec--standards-photo {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* ---------------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------------- */
.rnf-kick {
	font-size: 12px;
	color: var(--kick);
	letter-spacing: 0.05em;
	font-weight: 500;
	margin: 0 0 9px;
}

.rnf .disp {
	font-family: var(--font-serif);
	font-weight: 500;
	color: var(--ink);
	margin: 0;
}

.rnf .h1 {
	font-family: var(--font-serif);
	font-size: 32px;
	line-height: 1.16;
	letter-spacing: -0.01em;
	text-wrap: balance;
	text-align: center;
	margin-inline: auto;
}

.rnf .h2 {
	font-family: var(--font-serif);
	font-size: 22px;
	line-height: 1.2;
	font-weight: 500;
	margin: 0 0 8px;
	color: var(--ink);
}

.rnf .lead {
	font-size: 15.5px;
	color: var(--inks);
	line-height: 1.62;
}

/* Constrained measure helpers */
/* .rnf-measure-h1  { max-width: 680px; margin: 0 auto 14px; }  <-- prior width; too narrow, line 1 self-wrapped before the forced break */
.rnf-measure-h1  { max-width: 920px; margin: 0 auto 14px; }
.rnf-measure-sub { max-width: 600px; margin: 0 auto 22px; }
.rnf-measure-lead { max-width: 560px; margin-bottom: 16px; }
/* Intro paragraph widened to match the chips/cards below (full section inner) */
.rnf-measure-lead--wide { max-width: none; margin-bottom: 16px; }

/* Forced hero-headline break; collapses to natural wrapping when line 1 no longer fits on one line */
/* @media (max-width: 460px) { .rnf-h1-br { display: none; } }  <-- prior breakpoint; too low for the widened container */
@media (max-width: 980px) {
	.rnf-h1-br { display: none; }
}

/* Offer hero subhead as a 3-item list: a centered, width-constrained block with
   left-aligned text and quiet dot markers. Color/type inherit from .lead. */
.rnf-hero-list {
	list-style: none;
	width: fit-content;      /* shrink to the longest bullet so the centered block reads centered */
	max-width: 100%;         /* never overflow; on narrow screens lines wrap, still centered */
	margin: 0 auto 22px;     /* center the block; same 22px lead-out as the old subhead */
	padding: 0;
	text-align: left;        /* left-align text within the centered block */
}

.rnf-hero-list li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 9px;      /* comfortable spacing between items */
}

.rnf-hero-list li:last-child { margin-bottom: 0; }

.rnf-hero-list li::before { /* modest dot marker — quiet, not heavy */
	content: "";
	position: absolute;
	left: 3px;
	top: 0.6em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sage);
}

/* ---------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------- */
.rnf-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--pine);
	color: var(--on-pine);
	border: none;
	border-radius: var(--radius-pill);
	padding: 13px 26px;
	font-size: 15px;
	font-weight: 500;
	font-family: var(--font-sans);
	cursor: pointer;
	text-decoration: none;
}

.rnf-btn:hover { background: var(--ink); color: var(--on-pine); }

.rnf-btn.ghost {
	background: transparent;
	color: var(--pine);
	border: 1.5px solid var(--pine);
}

.rnf-btn.ghost:hover { background: var(--sage2); color: var(--pine); }

.rnf-btn--block {
	width: 100%;
	justify-content: center;
	margin-top: 12px;
}

.rnf-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.rnf-reassure {
	font-size: 13px;
	color: var(--inks);
	margin-top: 12px;
}

/* ---------------------------------------------------------------------------
 * Cards, pills, metrics
 * ------------------------------------------------------------------------- */
.rnf-card {
	background: var(--paper2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 17px;
}

.rnf-card--center { text-align: center; }
.rnf-card--paper  { background: var(--paper); }

.rnf-card__title {
	font-weight: 500;
	margin: 9px 0 5px;
}

.rnf-card__body {
	font-size: 13.5px;
	color: var(--inks);
}

.rnf-tier {
	font-family: var(--font-serif);
	font-size: 19px;
	color: var(--pine);
}

.rnf-tier__label {
	font-size: 13px;
	color: var(--inks);
	margin-top: 4px;
}

.rnf-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--sage2);
	color: var(--pine);
	border-radius: var(--radius-pill);
	padding: 6px 13px;
	font-size: 13px;
}

.rnf-metric {
	background: var(--paper2);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 16px 10px;
	text-align: center;
}

.rnf-metric .n {
	font-family: var(--font-serif);
	font-size: 28px;
	color: var(--pine);
	line-height: 1;
}

.rnf-metric .l {
	font-size: 12.5px;
	color: var(--inks);
	margin-top: 7px;
	line-height: 1.3;
}

/* ---------------------------------------------------------------------------
 * Grids
 * ------------------------------------------------------------------------- */
.rnf-grid {
	display: grid;
	gap: 12px;
	margin-top: 16px;
}

.rnf-grid--cards    { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
.rnf-grid--tiers    { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 0; }   /* always 3-across (one row on mobile; compacted below) */
.rnf-grid--metrics  { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 14px; }
.rnf-grid--plans    { grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 14px; margin-top: 20px; }
.rnf-grid--quotes   { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 8px; }

/* Budget tiers stay one row on phones: compact padding/type so all three fit. */
@media (max-width: 480px) {
	.rnf-grid--tiers { gap: 7px; }
	.rnf-grid--tiers .rnf-card { padding: 11px 7px; }
	.rnf-grid--tiers .rnf-tier { font-size: 15px; }
	.rnf-grid--tiers .rnf-tier__label { font-size: 10.5px; line-height: 1.25; margin-top: 3px; }
	/* Six guide chips -> clean 2x3 grid on mobile (2026-07-27, local): was flex-wrap, which wrapped 2/3/1 and left
	   Motherhood alone. Chip order fills row 1 then row 2 via normal grid flow. Chips stretch to equal cells; content
	   centered; long labels (Kitchen & Dining, Personal Care) wrap inside the chip (never overflow).
	   NOTE (2026-07-27 fix): prefixed with `.rnf ` to out-specify the LATER base `.rnf-pill-row { display:flex }`
	   further down this file (~line 507) — media queries add no specificity, so the equal-specificity base rule
	   was winning by source order and the grid never applied. (0,2,0) > (0,1,0); no !important needed.
	   Originals: .rnf-pill-row = flex/flex-wrap:wrap/justify-content:center/gap:8px; .rnf-pill padding 6px 13px.
	   Reversible: delete these two rules. */
	.rnf .rnf-pill-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.rnf .rnf-pill { justify-content: center; text-align: center; min-width: 0; padding: 6px 8px; }
}

/* ---------------------------------------------------------------------------
 * Search-engine feature callout (membership section)
 * Distinct sage-tint card; serif headline; reuses .rnf-metric for the accents.
 * ------------------------------------------------------------------------- */
.rnf-search-feature {
	background: var(--sage2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px;
	margin-top: 18px;
}

.rnf-search-feature__title {
	font-family: var(--font-serif);
	font-weight: 500;
	color: var(--pine);
	font-size: clamp(20px, 3.2vw, 26px);
	line-height: 1.22;
	margin: 0 0 12px;
	max-width: 28ch;
}

.rnf-search-feature__body {
	font-size: 15px;
	color: var(--inks);
	line-height: 1.6;
	max-width: 560px;
	margin: 0 0 18px;
}

.rnf-search-feature__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	max-width: 320px;
}

@media (max-width: 480px) {
	.rnf-search-feature { padding: 20px; }
}

/* Pain section: four compact, title-only cards — 4-up desktop, 2x2 below.
   Reuses .rnf-card / .rnf-card__title; just compacts height + centers title. */
.rnf-grid--pain { grid-template-columns: repeat(4, 1fr); }

.rnf-grid--pain .rnf-card {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 92px; /* compact — not half-empty — with .rnf-card's 17px padding */
}

.rnf-grid--pain .rnf-card__title { margin: 0; }

@media (max-width: 900px) {
	.rnf-grid--pain { grid-template-columns: repeat(2, 1fr); }
}

.rnf-pill-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;   /* center chips as a row; wrap behavior preserved */
	gap: 8px;
	margin-bottom: 20px;
}

/* ---------------------------------------------------------------------------
 * Video slot (placeholder — real embed added later)
 * ------------------------------------------------------------------------- */
.rnf-video {
	max-width: 600px;
	margin: 0 auto 22px;
	aspect-ratio: 16 / 9;
	background: var(--sage2);
	border: 1px dashed var(--sage);
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--inks);
	font-size: 13px;
}

/* ---------------------------------------------------------------------------
 * "A peek inside" swap example
 * ------------------------------------------------------------------------- */
.rnf-swap-card {
	max-width: 600px;
	margin-inline: auto;
}

.rnf-swap__head {
	font-weight: 500;
	margin-bottom: 12px;
}

.rnf-swap__row {
	display: grid;
	grid-template-columns: 42px 1fr 72px;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-top: 1px solid var(--line);
	max-width: 540px;
}

.rnf-swap__price {
	font-family: var(--font-serif);
	color: var(--pine);
	width: 42px;
}

.rnf-swap__name {
	font-weight: 500;
}

.rnf-swap__tier {
	font-size: 12px;
	color: var(--inks);
}

.rnf-swap__note {
	font-size: 12.5px;
	color: var(--inks);
	margin-top: 12px;
	border-top: 1px solid var(--line);
	padding-top: 12px;
}

/* ---------------------------------------------------------------------------
 * Pricing / Choose Your Access
 * ------------------------------------------------------------------------- */
.rnf-plan__name { font-weight: 500; }

.rnf-plan__price {
	font-family: var(--font-serif);
	font-size: 33px;
	color: var(--ink);
	margin: 4px 0;
}

.rnf-plan__price--pine { color: var(--pine); }

.rnf-plan__price .per {
	font-size: 15px;
	color: var(--inks);
}

.rnf-plan__meta {
	font-size: 13px;
	color: var(--inks);
	margin-bottom: 10px;
}

/* Small secondary list of the available guides under the Single Guide features. */
.rnf-plan__guides {
	font-size: 12px;
	color: var(--inks);
	line-height: 1.5;
	margin: 10px 0 0;
}

/* Added 2026-07-27 (local only, reversible): subtle breathing room between the last
   guides line and the pinned CTA in the Whole-House card only. Original: no bottom
   gap defined (.rnf-plan__guides is `margin: 10px 0 0`); the Single Guide card's
   apparent gap is flexbox auto-margin slack, not a fixed value. Remove this rule to revert. */
.rnf-plan--featured .rnf-plan__guides:last-of-type {
	margin-bottom: 10px;
}

/* Balance the two plan cards: equal height (grid), content top-aligned, and the
   CTA pinned to the bottom so both buttons line up despite different list lengths. */
.rnf-grid--plans .rnf-card {
	display: flex;
	flex-direction: column;
}

.rnf-grid--plans .rnf-btn--block {
	margin-top: auto;
}

.rnf-plan--featured {
	border: 2px solid var(--pine);
	position: relative;
}

.rnf-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--clay);
	color: var(--on-pine);
	font-size: 12px;
	padding: 4px 13px;
	border-radius: 20px;
	white-space: nowrap;
}

.rnf-li {
	font-size: 13px;
	color: var(--inks);
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 7px 0;
}

.rnf-li .rnf-ico {
	color: var(--kick);
	flex-shrink: 0;
	margin-top: 2px;
}

.rnf-pill .rnf-ico { color: var(--pine); }

.rnf-reassure--center {
	text-align: center;
	margin-top: 14px;
}

/* ---------------------------------------------------------------------------
 * Testimonials (placeholders)
 * ------------------------------------------------------------------------- */
.rnf-quote {
	color: var(--inks);
	font-style: italic;
	margin: 6px 0 10px;
	font-size: 13.5px;
	line-height: 1.55;
}

.rnf-attrib {
	font-size: 12.5px;
	color: var(--kick);
	font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * Member reviews — added 2026-07-29.
 *
 * Only real, approved member reviews carry a star row and feed the average line.
 * The four placeholder quotes above deliberately have neither: they are layout
 * social proof, not ratings, and giving them stars would present a fabricated
 * rating. The visual difference between the two is intentional.
 *
 * This rides in offer.css, which functions.php enqueues on every front-end page,
 * so no new enqueue or template gate was needed.
 * ------------------------------------------------------------------------- */
.rnf-rating-summary {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 14px;
}

.rnf-rating-summary__score {
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	color: var(--inks);
}

.rnf-rating-summary__outof,
.rnf-rating-summary__count {
	font-size: 13px;
	color: var(--kick);
}

.rnf-stars {
	display: block;
	color: #e0a83c;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 1px;
	margin-bottom: 4px;
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.rnf-sec { padding: 56px 26px; }
	.rnf .h1 { font-size: 40px; }
	.rnf .h2 { font-size: 28px; }
}

@media (max-width: 520px) {
	/* Superseded 2026-08-01: the header nav was hidden outright on phones, so
	   there was no way to log in or sign up from mobile — and header.php has no
	   mobile menu to fall back to. Old line kept, commented, so this is
	   reversible in one edit:
	       .rnf-site-nav { display: none; }
	   Instead, keep it visible and compact it so it fits beside the wordmark.
	   All of these are scoped inside this max-width:520px block; desktop is
	   unchanged. Base values they override: .rnf-site-nav gap 18px / 14px (:40-45),
	   .rnf-site-header__inner padding 16px 26px (:16-24), .rnf-brand 19px (:26-32),
	   .rnf-btn--pill-sm 8px 18px / 14px (:57-60). */
	.rnf-site-nav           { gap: 12px; font-size: 13px; }
	.rnf-site-header__inner { padding: 12px 18px; gap: 10px; }
	.rnf-brand              { font-size: 17px; }
	.rnf-btn--pill-sm       { padding: 7px 14px; font-size: 13px; }
	/* Offer hero headline — MOBILE ONLY (2026-07-27, local): modest size reduction so the long headline wraps
	   cleanly and stays centered on phones once the forced .rnf-h1-br is hidden (see @media max-width:980px above).
	   Desktop is untouched: >=768px stays 40px and the two-line forced break at >980px is unchanged. Scoped to the
	   hero headline via .rnf-measure-h1. Original mobile values (from .rnf .h1): font-size 32px; line-height 1.16.
	   Reversible: delete the rule below. */
	.rnf .h1.rnf-measure-h1 { font-size: 28px; line-height: 1.2; }
	/* Hero eyebrow — MOBILE ONLY (2026-07-27, local): fluidly shrink just enough to sit on one line ~400px once the
	   line no longer fits at 12px. Scoped to the hero (first section) so the other .rnf-kick lines are untouched.
	   Centered (inherits .rnf-sec--center); no white-space:nowrap, so it still WRAPS (never overflows) on very narrow
	   phones. Original: font-size 12px (from .rnf-kick). Reversible: delete the rule below. */
	.rnf-sec:first-of-type .rnf-kick { font-size: clamp(9px, 2.6vw, 12px); }
	/* Hero bullets — MOBILE ONLY (2026-07-27, local): fluidly shrink so the longest bullet ("Based on 7+ years of
	   product and toxicology research") sits on one line ~400px; the shorter two follow. Scoped to .rnf-hero-list
	   (hero only). Keeps left-aligned markers, comfortable line-height (inherits 1.62), and spacing. No
	   white-space:nowrap, so it still WRAPS (never overflows) on very narrow phones. Original: 15.5px (inherited
	   from .rnf .lead). Reversible: delete the rule below. */
	.rnf-hero-list li { font-size: clamp(10px, 3vw, 15.5px); }
}

/* ---------------------------------------------------------------------------
 * Standard Page (page.php) — readable prose
 *
 * Shared shell for any standard WordPress Page (legal pages and future Pages).
 * Centered, comfortable reading measure so long-form copy (e.g. 6,800 words of
 * Terms) is not full-bleed. Token-based; no per-page styling. Also wraps the
 * inline-styled Terms/Privacy HTML gracefully without altering it.
 * ------------------------------------------------------------------------- */
.rnf-page {
	background: var(--paper);
	padding: 40px 26px 64px;
}

.rnf-prose {
	max-width: 720px;
	margin: 0 auto;
}

.rnf-page__title {
	font-size: 30px;
	line-height: 1.2;
	color: var(--ink);
	margin: 0 0 24px;
}

.rnf-prose__body {
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--ink);
}

.rnf-prose__body p {
	margin: 0 0 16px;
}

.rnf-prose__body h2,
.rnf-prose__body h3,
.rnf-prose__body h4 {
	font-family: var(--font-serif);
	font-weight: 500;
	color: var(--ink);
	line-height: 1.25;
	margin: 32px 0 12px;
}

.rnf-prose__body h2 { font-size: 24px; }
.rnf-prose__body h3 { font-size: 20px; }
.rnf-prose__body h4 { font-size: 17px; }

.rnf-prose__body a {
	color: var(--pine);
	text-decoration: underline;
}

.rnf-prose__body ul,
.rnf-prose__body ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

.rnf-prose__body li {
	margin: 6px 0;
}

.rnf-prose__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 16px;
}

.rnf-prose__body th,
.rnf-prose__body td {
	border: 1px solid var(--line);
	padding: 8px 10px;
	text-align: left;
	vertical-align: top;
}

.rnf-prose__body img {
	height: auto;
}

@media (min-width: 768px) {
	.rnf-page { padding: 56px 26px 80px; }
	.rnf-page__title { font-size: 38px; }
}