/* =====================================================================
   Mobile type scale (17 Oct 2026)
   One heading / sub-heading / body ratio on every page below 782px, fluid
   between a 320px and a 430px phone so small and large phones look the same.
     H1 (page title)   30 -> 36px
     H2 (section)      24 -> 28px
     H3 (card/sub)     19 -> 20px   (small card titles 18px)
     Lead / sub-head   17px
     Body              16px          card text 15px
     Eyebrow / label   12px
   Before this, page titles ranged 30-50px, section heads 22-36px and
   sub-heads sat at 19px, close to the headings above them.
   Selectors carry body:not(#rr) so they outrank the older per-page rules,
   several of which are !important with long class chains.
   ===================================================================== */
@media (max-width: 781px) {
	html:root {
		--rr-m-h1: clamp(30px, 12.55px + 5.45vw, 36px);
		--rr-m-h2: clamp(24px, 12.36px + 3.64vw, 28px);
		--rr-m-h3: clamp(19px, 16.1px + 0.91vw, 20px);
		/* Same scale for sizes set inline through the design tokens. */
		--rr-text-h1: var(--rr-m-h1);
		--rr-text-h2: var(--rr-m-h2);
		--rr-text-h3: var(--rr-m-h3);
		--rr-text-h4: 17px;
		--rr-text-lead: 17px;
		--wp--preset--font-size--h-1: var(--rr-m-h1);
		--wp--preset--font-size--h-2: var(--rr-m-h2);
		--wp--preset--font-size--h-3: var(--rr-m-h3);
		--wp--preset--font-size--h-4: 17px;
		--wp--preset--font-size--lead: 17px;
	}

	/* Page titles. The homepage hero title is an H2 (its H1 is the eyebrow pill). */
	body:not(#rr) main h1:not(.rr-pill),
	body:not(#rr) main .rr-hero__title,
	body:not(#rr) main .rr-ind-hero__title {
		font-size: var(--rr-m-h1) !important;
		line-height: 1.12 !important;
		letter-spacing: -0.015em;
	}

	/* Section headings. */
	body:not(#rr) main h2:not(.rr-hero__title):not(.rr-ind-hero__title):not([class*="card-h"]) {
		font-size: var(--rr-m-h2) !important;
		line-height: 1.18 !important;
	}

	/* Sub-headings and card titles. */
	body:not(#rr) main h3,
	body:not(#rr) main h2[class*="card-h"] {
		font-size: var(--rr-m-h3) !important;
		line-height: 1.25 !important;
	}
	body:not(#rr) main .rr-card__title,
	body:not(#rr) main .rr-svc-why__title { font-size: 18px !important; }
	body:not(#rr) main .rr-svc-faq__q { font-size: 17px !important; line-height: 1.35 !important; }
	body:not(#rr) main h4 { font-size: 17px !important; line-height: 1.3 !important; }

	/* Lead paragraphs under a title or section heading. */
	body:not(#rr) main .rr-hero__sub,
	body:not(#rr) main .rr-section__sub,
	body:not(#rr) main .rr-svc-hero__sub,
	body:not(#rr) main .rr-svc-hero__price,
	body:not(#rr) main .rr-ind-hero__sub,
	body:not(#rr) main .rr-hub-hero-text > p:not(.rr-hub-eyebrow),
	body:not(#rr) main .rr-hub-entity-intro,
	body:not(#rr) main .rr-contact-intro,
	body:not(#rr) main .rr-about-line,
	body:not(#rr) main .rr-svc-cta__sub,
	body:not(#rr) main .rr-kb-lead {
		font-size: 17px !important;
		line-height: 1.55 !important;
	}

	/* Body copy. */
	body:not(#rr) main .rr-about-p:not(.rr-about-line),
	body:not(#rr) main .rr-svc-prose,
	body:not(#rr) main .wp-block-post-content p,
	body:not(#rr) main .wp-block-post-content li { font-size: 16px !important; line-height: 1.65 !important; }
	body:not(#rr) main .rr-card__text,
	body:not(#rr) main .rr-svc-why__text,
	body:not(#rr) main .rr-hub-card-body p,
	body:not(#rr) main .rr-hub-tile p { font-size: 15px !important; line-height: 1.55 !important; }

	/* Eyebrows / small labels. */
	body:not(#rr) main .rr-hub-eyebrow,
	body:not(#rr) main .rr-svc-eyebrow,
	body:not(#rr) main .rr-eyebrow { font-size: 12px !important; }
}

/* Blog posts and knowledge-base articles had no side margin on phones and small
   tablets: text and the featured image ran into the screen edge. */
@media (max-width: 820px) {
	body.single:not(#rr) main#wp--skip-link--target {
		padding-inline: 20px !important;
	}
}