/*
 * 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 {
	/* was: font-family: var(--font-serif); */
	/* was: font-weight: 500; */
	/* Wordmark -> Alex Brush 2026-08-08. Alex Brush ships 400 only. */
	font-family: var(--font-script);
	font-size: 19px;
	font-weight: 400;
	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). */
/* BEGIN ROLLBACK 2026-09-08 no header brand: empty over-state cannot swallow clicks.
 *
 * With the wordmark disabled (header.php) the header renders EMPTY, but
 * .rnf-site-header__inner keeps its 16px padding, so --over leaves an invisible
 * ~33px absolutely-positioned strip at z-index 5 across the top of the hero.
 * Nothing interactive sits under it today (the hero is min-height:78vh with its
 * content flex-centred), but an invisible layer that eats clicks is worth closing.
 *
 * The second rule is deliberate: if the brand or the disabled Log in / Sign up
 * nav is ever restored, its links stay clickable and this block does not become
 * a hidden footgun.
 *
 * Delete this block to revert. Colour/paint only - no layout property changes.
 */
.rnf-header--over {
	pointer-events: none;
}

.rnf-header--over .rnf-site-header__inner > * {
	pointer-events: auto;
}
/* END ROLLBACK 2026-09-08 no header brand */

.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 {
	/* ROLLBACK 2026-09-08 recolour, was: background: var(--pine); */
	/* ROLLBACK 2026-09-08 footer green, was: background: var(--rnf-sage); */
	/* ROLLBACK 2026-09-08 footer photo, was: background: var(--rnf-footer); */
	/*
	 * background-color + background-image as SEPARATE properties, deliberately NOT
	 * the `background` shorthand: the shorthand resets background-color to
	 * transparent, which would silently wipe the fallback below. Keeping them apart
	 * is what guarantees the footer is never bare while the photo loads or if it 404s.
	 *
	 * Image path is relative to THIS stylesheet (assets/css/ -> ../images/), matching
	 * about.css:15 and home.css:389. No absolute path, no hardcoded URL, no hostname.
	 *
	 * The scrim keeps var(--rnf-cream) text (below, unchanged) legible across the
	 * full width of the photo.
	 */
	/*
	 * ROLLBACK 2026-09-08 cream footer: the forest photo and its scrim are removed;
	 * the footer is now a solid cream panel. The whole previous background stack is
	 * commented in place below - uncomment these five properties and delete the
	 * `background:` line to restore the photo.
	 *
	 * was: background-color: var(--rnf-footer);
	 * was: background-image:
	 * was: 	linear-gradient( rgba(30, 40, 25, 0.62), rgba(30, 40, 25, 0.62) ),
	 * was: 	url(../images/reviews-forest.jpg);
	 * was: background-size: cover;
	 * was: background-position: center;
	 * was: background-repeat: no-repeat;
	 *
	 * --rnf-cream keeps its value (tokens.css:21); the page background reads the
	 * same token via --paper and is unaffected by this rule.
	 */
	background: var(--rnf-cream);
	/* ROLLBACK 2026-09-08 recolour, was: color: var(--on-pine); */
	/* ROLLBACK 2026-09-08 footer fix, was: color: var(--rnf-brown-deep); */
	/* ROLLBACK 2026-09-08 cream footer, was: color: var(--rnf-cream); */
	color: var(--rnf-brown);
}

.rnf-site-footer__inner {
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 44px 26px 28px;
	display: grid;
	/* ROLLBACK 2026-09-08 footer order, was: grid-template-columns: 1.6fr 1fr 1fr 1fr; */
	/* Five tracks, not four: brand + FOUR link columns (Legal, Contact, Follow,
	   Guides). At four the fifth child wrapped to a second row. DESKTOP ONLY - the
	   responsive rules further down are untouched, so small screens keep wrapping
	   exactly as they do today. */
	grid-template-columns: 1.6fr 1fr 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;
	/* ROLLBACK 2026-09-08 recolour, was: color: var(--sage3); */
	/* ROLLBACK 2026-09-08 footer fix, was: color: var(--rnf-brown-deep); */
	/* ROLLBACK 2026-09-08 cream footer, was: color: var(--rnf-cream); */
	color: var(--rnf-brown);
	margin: 0 0 4px;
}

/* BEGIN ROLLBACK 2026-09-08 logo to footer: brand row layout.
 *
 * Lays the logo <img> and the existing .rnf-foot-brand wordmark side by side.
 * The .rnf-foot-brand text rules below are NOT touched - this only adds the row
 * wrapper and sizes the image. Delete this block and the wrapper in
 * template-parts/site-footer.php to revert.
 *
 * height:40px, not 48: the asset is a SQUARE 500x500 with artwork filling almost
 * the whole canvas (bounding box 12..486 of 500), so it reads much larger beside
 * 19px text than a wordmark-shaped logo would. 40px is roughly a 2:1 lockup
 * against the cap height. One value to change if you want it bigger.
 */
.rnf-foot-brand-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.rnf-foot-brand-row img {
	/* Sized 2026-09-15 (local only) via --logo-h-footer in tokens.css. Old value: height: 40px; */
	height: var(--logo-h-footer, 40px);
	width: auto;
	display: block;
}
/* END ROLLBACK 2026-09-08 logo to footer */

/* BEGIN ROLLBACK 2026-09-13 footer brand row: icon beside the blurb.
 *
 * The wordmark was removed from template-parts/site-footer.php, so the brand
 * column is now just the logo and the blurb. This lays those two on ONE row,
 * vertically centred to each other, instead of stacking them.
 *
 * SCOPE: .rnf-foot-col--brand only. The other four footer columns keep the
 * column layout they inherit from .rnf-foot-col, and nothing outside the footer
 * is touched.
 *
 * Must stay AFTER .rnf-foot-col above: that rule sets flex-direction: column at
 * the same specificity (0,1,0), so source order is what lets this win. Moving
 * this block earlier in the file silently reverts the layout.
 *
 * display:flex is restated rather than inherited from .rnf-foot-col so the rule
 * still works if that base rule is ever changed.
 *
 * Delete this whole block to revert to the stacked layout.
 */
.rnf-foot-col--brand {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
}

/* The logo wrapper must not shrink when the blurb wraps, or the icon squashes
   on narrow screens. It holds only the <img> now that the wordmark is gone. */
.rnf-foot-col--brand .rnf-foot-brand-row {
	flex: 0 0 auto;
}

/* .rnf-foot-blurb carries margin: 8px 0 0 for the stacked layout. On one row
   that top margin pushes the text below the icon's centre line, so it is zeroed
   here only. The base rule, its max-width and every type property are untouched. */
.rnf-foot-col--brand .rnf-foot-blurb {
	margin-top: 0;
}
/* END ROLLBACK 2026-09-13 footer brand row */

/* BEGIN ROLLBACK 2026-09-13b footer brand top-align.
 *
 * Top-aligns the brand block with the four link columns, so the tagline's first
 * line sits level with the CONTACT / LEGAL / FOLLOW / CATEGORIES headings.
 *
 * WHY IT SAT LOW. .rnf-site-footer__inner is a GRID (line 169) and never sets
 * align-items, so it uses the default `stretch`: every cell, including this one,
 * is as tall as the tallest column. The four link columns look top-aligned only
 * because .rnf-foot-col stacks their content from the top. This block, by
 * contrast, sets align-items: center on ITSELF (the rule directly above) to centre
 * the icon against the tagline - and in a full-height stretched cell that centred
 * the whole lockup against the tallest column.
 *
 * So the cause was the grid's default stretch meeting this block's own centring,
 * NOT an align-items: center on the row or an align-self: center on the cell.
 * Neither of those exists anywhere in this stylesheet.
 *
 * align-self: start makes this cell size to its own content instead of stretching.
 * Its internal align-items: center is then centring the icon against a box that is
 * exactly as tall as the tagline, which is precisely what it was written to do -
 * so the icon stays centred to the text and only the block's position moves.
 *
 * Applied to the ITEM, not the container: `align-items: start` on the grid would
 * also un-stretch the four link columns. Nothing depends on their stretched height
 * today, but this keeps the change to the one cell that needs it.
 *
 * Mobile is unaffected: at <=760px this cell takes a full-width row of its own
 * (grid-column: 1 / -1, further down), where the row height already equals the
 * content height and start and stretch render identically.
 *
 * Separate from the block above so the two changes revert independently: delete
 * this block to restore the centred brand, or delete both to restore the stacked
 * pre-2026-09-13 footer.
 */
.rnf-foot-col--brand {
	align-self: start;
}
/* END ROLLBACK 2026-09-13b footer brand top-align */

.rnf-foot-brand {
	/* was: font-family: var(--font-serif); */
	/* was: font-weight: 500; */
	/* Wordmark -> Alex Brush 2026-08-08. Alex Brush ships 400 only. */
	font-family: var(--font-script);
	font-size: 19px;
	font-weight: 400;
	/* ROLLBACK 2026-09-08 recolour, was: color: var(--on-pine); */
	/* ROLLBACK 2026-09-08 footer fix, was: color: var(--rnf-brown-deep); */
	/* ROLLBACK 2026-09-08 cream footer, was: color: var(--rnf-cream); */
	color: var(--rnf-brown);
}

.rnf-foot-blurb {
	margin: 8px 0 0;
	max-width: 30ch;
	/* ROLLBACK 2026-09-08 recolour, was: color: var(--sage3); */
	/* ROLLBACK 2026-09-08 footer fix, was: color: var(--rnf-brown-deep); */
	/* ROLLBACK 2026-09-08 cream footer, was: color: var(--rnf-cream); */
	color: var(--rnf-brown);
	line-height: 1.55;
}

.rnf-site-footer a {
	/* ROLLBACK 2026-09-08 recolour, was: color: var(--on-pine); */
	/* ROLLBACK 2026-09-08 footer fix, was: color: var(--rnf-brown-deep); */
	/* ROLLBACK 2026-09-08 cream footer, was: color: var(--rnf-cream); */
	color: var(--rnf-brown);
	text-decoration: none;
	opacity: 0.85;
}

.rnf-site-footer a:hover {
	/* ROLLBACK 2026-09-08 footer fix: added so hover is explicitly cream. This rule
	   previously set opacity only and inherited its colour. Remove this one line to revert. */
	/* ROLLBACK 2026-09-08 cream footer, was: color: var(--rnf-cream); */
	color: var(--rnf-brown);
	opacity: 1;
}

.rnf-site-footer__bottom {
	/* ROLLBACK 2026-09-08 cream footer, was: border-top: 1px solid rgba(246, 242, 232, 0.16); */
	/* Cream at 16% was invisible on a cream panel; this is --rnf-brown #3b2f24 at 18%. */
	border-top: 1px solid rgba(59, 47, 36, 0.18);
}

.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;
	/* ROLLBACK 2026-09-08 recolour, was: color: var(--sage3); */
	/* ROLLBACK 2026-09-08 footer fix, was: color: var(--rnf-brown-deep); */
	/* ROLLBACK 2026-09-08 cream footer, was: color: var(--rnf-cream); */
	color: var(--rnf-brown);
}

/* 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); }

/* 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. */

/* 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. */

/* 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. */

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

.rnf .disp {
	/* was: font-weight: 500; — Montserrat loads 600;700, so a 500 target
	 * resolves up to 600 anyway. Made explicit 2026-08-08.
	 * NOTE: .rnf .h1 below declares no weight of its own and inherits from
	 * here, so it follows to 600. */
	font-family: var(--font-serif);
	font-weight: 600;
	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 {
	/* was: font-weight: 500; */
	font-family: var(--font-serif);
	font-size: 22px;
	line-height: 1.2;
	font-weight: 600;
	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 */
/* Intro paragraph widened to match the chips/cards below (full section inner) */

/* 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 */

/* 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. */




/* ---------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------- */
.rnf-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* ROLLBACK 2026-09-08 recolour, was: background: var(--pine); */
	background: var(--rnf-sage-strong);
	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;
}



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


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








/* ---------------------------------------------------------------------------
 * Grids
 * ------------------------------------------------------------------------- */

   /* always 3-across (one row on mobile; compacted below) */

/* Budget tiers stay one row on phones: compact padding/type so all three fit. */
@media (max-width: 480px) {
					/* 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. */
		}

/* ---------------------------------------------------------------------------
 * Search-engine feature callout (membership section)
 * Distinct sage-tint card; serif headline; reuses .rnf-metric for the accents.
 * ------------------------------------------------------------------------- */





/* Pain section: four compact, title-only cards — 4-up desktop, 2x2 below.
   Reuses .rnf-card / .rnf-card__title; just compacts height + centers title. */





/* ---------------------------------------------------------------------------
 * Video slot (placeholder — real embed added later)
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * "A peek inside" swap example
 * ------------------------------------------------------------------------- */




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



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





/* Small secondary list of the available guides under the Single Guide features. */

/* 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. */

/* 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. */








/* ---------------------------------------------------------------------------
 * Testimonials (placeholders)
 * ------------------------------------------------------------------------- */

.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-stars {
	display: block;
	color: #986c01; /* Brand retune 2026-09-15 (local only): was #e0a83c (2.14:1 on white, failed even the 3:1 graphic minimum). Orange anchor hue+sat, L30% -> 4.69:1. */
	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. */
		/* 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. */
	}

/* ---------------------------------------------------------------------------
 * 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 {
	/* was: font-weight: 500; — one shared declaration, so h2 and h3 move with
	 * h4. Behaviourally a no-op: Montserrat loads 600;700, so a 500 target on
	 * any of the three already resolved up to 600. Made explicit 2026-08-08. */
	font-family: var(--font-serif);
	font-weight: 600;
	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; }
}