/*
Theme Name: Rank Rebels
Theme URI: http://82.29.152.79
Author: Rank Rebels
Author URI: http://82.29.152.79
Description: Custom block theme for Rank Rebels — a dark, brand-driven SEO agency site. Design tokens live in theme.json.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 0.8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rank-rebels
Tags: block-theme, full-site-editing, custom-colors, custom-menu
*/

/* ================================================================== *
 * Direction 1B — Header, footer, dropdown, mobile menu.
 * Palette: slate-950 #0F1A20 · slate-900 #14222A · slate #1C2C34 ·
 * lime #C3FF32 · lime-600 #A9E81C · grey-50 #F6F8F8 · grey-300 #C2CACD ·
 * grey-400 #9AA4A9 · grey-500 #717C81 · legal-bar #0B141A.
 * Focus ring: 0 0 0 3px rgba(195,255,50,.55).
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * Header shell
 * ------------------------------------------------------------------ */
.rr-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #0F1A20;
	border-bottom: 1px solid rgba(195, 255, 50, 0.14);
	box-shadow: 0 4px 12px rgba(16, 26, 32, 0.10);
}
.rr-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
	padding: 0 32px;
}
.rr-header__left {
	display: flex;
	align-items: center;
	gap: 44px;
}
.rr-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	line-height: 0;
}
.rr-logo__img {
	display: block;
	height: 30px;
	width: auto;
}
.rr-logo:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(195, 255, 50, 0.55);
	border-radius: 6px;
}

/* ------------------------------------------------------------------ *
 * Primary desktop nav
 * ------------------------------------------------------------------ */
.rr-nav__list {
	display: flex;
	align-items: center;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.rr-nav__item {
	position: relative;
}
.rr-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	color: #C2CACD;
	text-decoration: none;
	background: none;
	border: 0;
	padding: 8px 0;
	cursor: pointer;
	position: relative;
}
.rr-nav__link:hover {
	color: #F6F8F8;
}
.rr-nav__link.is-active {
	color: #C3FF32;
}
.rr-nav__link.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 3px;
	background: #C3FF32;
	border-radius: 2px;
}
.rr-nav__link:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(195, 255, 50, 0.55);
	border-radius: 4px;
}
.rr-chevron {
	width: 12px;
	height: 12px;
	color: #C3FF32;
	transition: transform 0.14s ease;
}
.rr-dropdown__toggle[aria-expanded="true"] .rr-chevron {
	transform: rotate(180deg);
}

/* ------------------------------------------------------------------ *
 * Services dropdown panel
 * ------------------------------------------------------------------ */
.rr-dropdown__panel {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	width: 340px;
	background: #14222A;
	border: 1px solid rgba(195, 255, 50, 0.18);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(16, 26, 32, 0.16);
	padding: 10px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(5px);
	transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
}
/* Invisible bridge over the 10px gap between "Services" and the panel, so the
   pointer never leaves the menu on its way down. */
.rr-dropdown__panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
}
.rr-has-dropdown.is-open .rr-dropdown__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}
.rr-dropdown__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: #C3FF32;
	color: #1C2C34;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 11px;
	padding: 12px 14px;
}
.rr-dropdown__all:hover {
	background: #A9E81C;
	color: #1C2C34;
}
.rr-dropdown__arrow {
	width: 16px;
	height: 16px;
}
.rr-dropdown__divider {
	border: 0;
	border-top: 1px solid rgba(195, 255, 50, 0.12);
	margin: 10px 4px;
}
.rr-dropdown__link {
	display: block;
	color: #E0E5E7;
	font-size: 15px;
	text-decoration: none;
	border-radius: 11px;
	padding: 12px 14px;
}
.rr-dropdown__link:hover {
	background: rgba(246, 248, 248, 0.06);
	color: #F6F8F8;
}
.rr-dropdown__panel a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(195, 255, 50, 0.55);
}

/* ------------------------------------------------------------------ *
 * Auth actions (right cluster)
 * ------------------------------------------------------------------ */
.rr-header__right {
	display: flex;
	align-items: center;
	gap: 14px;
}
.rr-auth-login {
	color: #C2CACD;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	padding: 8px 6px;
}
.rr-auth-login:hover {
	color: #F6F8F8;
}
.rr-auth-register {
	background: #C3FF32;
	color: #1C2C34;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 999px;
	padding: 11px 20px;
}
.rr-auth-register:hover {
	background: #A9E81C;
	color: #1C2C34;
}
.rr-auth-login:focus-visible,
.rr-auth-register:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(195, 255, 50, 0.55);
	border-radius: 999px;
}

/* ------------------------------------------------------------------ *
 * Mobile bar + panel (hidden on desktop)
 * ------------------------------------------------------------------ */
.rr-burger {
	display: none;
}
.rr-mobile {
	display: none;
}

@media (max-width: 940px) {
	.rr-header__inner {
		padding: 0 20px;
	}
	.rr-nav,
	.rr-header__right {
		display: none;
	}
	.rr-burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: 0;
		border-radius: 999px;
		background: #C3FF32;
		color: #1C2C34;
		cursor: pointer;
	}
	.rr-burger svg {
		width: 20px;
		height: 20px;
	}
	.rr-burger:focus-visible {
		outline: none;
		box-shadow: 0 0 0 3px rgba(195, 255, 50, 0.55);
	}
	.rr-mobile {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 72px;
		background: #0F1A20;
		border-top: 1px solid rgba(195, 255, 50, 0.14);
		border-bottom: 1px solid rgba(195, 255, 50, 0.14);
		box-shadow: 0 12px 32px rgba(16, 26, 32, 0.30);
		padding: 8px 20px 24px;
		max-height: calc(100vh - 72px);
		overflow-y: auto;
	}
	.rr-mobile[hidden] {
		display: none;
	}
}

.rr-mobile__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.rr-mobile__list > li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.rr-mobile__link,
.rr-mobile__accordion {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	color: #F6F8F8;
	text-decoration: none;
	background: none;
	border: 0;
	padding: 16px 2px;
	cursor: pointer;
}
.rr-mobile__link.is-active {
	color: #C3FF32;
}
.rr-mobile__link:focus-visible,
.rr-mobile__accordion:focus-visible,
.rr-mobile__sublink:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(195, 255, 50, 0.55);
	border-radius: 4px;
}
.rr-mobile__accordion[aria-expanded="true"] .rr-chevron {
	transform: rotate(180deg);
}
.rr-mobile__sub {
	padding: 4px 0 12px 14px;
	margin: 0 0 12px;
	border-left: 2px solid #C3FF32;
}
.rr-mobile__sub[hidden] {
	display: none;
}
.rr-mobile__sublink {
	display: block;
	font-size: 15.5px;
	color: #C2CACD;
	text-decoration: none;
	padding: 10px 2px;
}
.rr-mobile__sublink:hover {
	color: #F6F8F8;
}
.rr-mobile__sublink.is-all {
	color: #C3FF32;
	font-weight: 700;
}
.rr-mobile__auth {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
}
.rr-mobile__auth a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border-radius: 999px;
	font-size: 16px;
	text-decoration: none;
}
.rr-mobile__register {
	background: #C3FF32;
	color: #1C2C34;
	font-weight: 700;
}
.rr-mobile__register:hover {
	background: #A9E81C;
}
.rr-mobile__login {
	background: transparent;
	color: #F6F8F8;
	border: 1px solid #374F5A;
	font-weight: 600;
}
body.rr-menu-open {
	overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Footer — Section 1 (Discovery)
 * ------------------------------------------------------------------ */
.rr-footer {
	position: relative;
	background: #0F1A20;
}
.rr-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #C3FF32, transparent);
}
.rr-footer__discovery {
	max-width: 1280px;
	margin: 0 auto;
	padding: 56px;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 48px;
}
.rr-footer__col {
	display: flex;
	flex-direction: column;
}
.rr-footer__brand-logo {
	display: block;
	height: 30px;
	width: auto;
	margin-bottom: 20px;
}
.rr-footer__blurb {
	color: #9AA4A9;
	max-width: 340px;
	line-height: 1.65;
	font-size: 15px;
	margin: 0;
}
.rr-foot-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.10em;
	font-weight: 600;
	color: #717C81;
	margin: 0 0 14px;
}
.rr-foot-label + .rr-foot-list {
	margin-bottom: 28px;
}
.rr-foot-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.rr-foot-list a {
	color: #C2CACD;
	font-size: 14.5px;
	text-decoration: none;
}
.rr-foot-list a:hover {
	color: #F6F8F8;
}
.rr-foot-list a:focus-visible,
.rr-footer__legal a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(195, 255, 50, 0.55);
	border-radius: 3px;
}

/* ------------------------------------------------------------------ *
 * Footer — Section 2 (Legal bar)
 * ------------------------------------------------------------------ */
.rr-footer__legal {
	background: #0B141A;
}
.rr-footer__legal-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.rr-footer__legal-links {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.rr-footer__legal-links a {
	color: #717C81;
	font-size: 13px;
	text-decoration: none;
}
.rr-footer__legal-links a:hover {
	color: #C2CACD;
}
.rr-footer__copy {
	color: #717C81;
	font-size: 13px;
	margin: 0;
}

@media (max-width: 940px) {
	.rr-footer__discovery {
		grid-template-columns: 1fr 1fr;
		padding: 40px 20px;
		gap: 32px;
	}
	.rr-footer__legal-inner {
		padding: 20px;
	}
}
@media (max-width: 560px) {
	.rr-footer__discovery {
		grid-template-columns: 1fr;
	}
	.rr-footer__legal-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ================================================================== *
 * Front page — homepage sections (Thread B).
 * FIDELITY PASS: restyled to the approved mockup. Literal hex values
 * below are mockup-specific and intentionally not in the token palette.
 * has-*-background-color / has-*-color preset classes carry !important,
 * so section backgrounds and light-section text overrides use elevated
 * specificity + !important to win.
 * ================================================================== */

/* Footer sits flush under the last section */
.wp-site-blocks > footer { margin-block-start: 0; }

/* ---------- Section rhythm ---------- */
.rr-section {
	padding-top: clamp(64px, 9vw, 128px) !important;
	padding-bottom: clamp(64px, 9vw, 128px) !important;
	padding-left: 32px !important;
	padding-right: 32px !important;
}
.rr-section.rr-hero    { background:
	linear-gradient(90deg, rgba(12,21,26,0.92) 0%, rgba(12,21,26,0.65) 30%, rgba(12,21,26,0.15) 52%, rgba(12,21,26,0) 66%),
	url('assets/img/rr-hero-map.webp') center center / cover no-repeat,
	#0c151a !important; }
.no-webp .rr-section.rr-hero { background:
	linear-gradient(90deg, rgba(12,21,26,0.92) 0%, rgba(12,21,26,0.65) 30%, rgba(12,21,26,0.15) 52%, rgba(12,21,26,0) 66%),
	url('/wp-content/uploads/2026/07/rank-rebels-hero-map-2560x1440-1.png') center center / cover no-repeat,
	#0c151a !important; }
.rr-section.rr-problem { background: #0F1A20 !important; }
.rr-section.rr-services{ background: #F6F8F8 !important; }
.rr-section.rr-steps   { background: #1C2C34 !important; }
.rr-section.rr-audit   { background: #0F1A20 !important; }
.rr-section.rr-proof   { background: #1C2C34 !important; }
.rr-section.rr-guides  { background: #F6F8F8 !important; }
.rr-section.rr-cta     { background: #0F1A20 !important; }

/* Section heads (centred intro blocks) */
.rr-section__head { text-align: center; margin-bottom: 48px; }
.rr-section__sub { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------- Heading scale ---------- */
.rr-section h2.wp-block-heading {
	font-size: clamp(1.9rem, 3.4vw, 2.25rem) !important;
	line-height: 1.15 !important;
	text-wrap: balance;
}
.rr-hero .rr-hero__title {
	font-size: clamp(2.3rem, 4.8vw, 4rem) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.02em !important;
	text-wrap: balance;
}
.rr-section.rr-cta h2.wp-block-heading {
	font-size: clamp(2rem, 3.8vw, 2.6rem) !important;
	line-height: 1.1 !important;
}
/* Heading colour: light on dark, dark on light */
.rr-hero h2, .rr-problem h2, .rr-steps h2, .rr-audit h2, .rr-proof h2, .rr-cta h2,
.rr-problem .rr-card__title, .rr-steps .rr-card__title { color: #F6F8F8; }
.rr-services :is(h2, h3), .rr-guides :is(h2, h3) { color: #14222A; }

/* Pill — the hero H1, styled as a lime chip but semantically the page H1 */
.rr-pill {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--slate);
	border-radius: var(--wp--preset--spacing--md);
	padding: 6px 14px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	margin: 0;
}

/* ---------- Buttons ---------- */
.is-style-lime-cta .wp-block-button__link {
	background: #C3FF32;
	color: #1C2C34;
	border-radius: 12px;
	padding: 16px 30px;
	font-weight: 600;
	box-shadow: 0 12px 32px rgba(195, 255, 50, 0.18);
	transition: filter 0.18s ease, transform 0.18s ease;
}
.is-style-lime-cta .wp-block-button__link:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
	color: #1C2C34;
}
.rr-hero__cta .is-style-lime-cta .wp-block-button__link,
.rr-cta .is-style-lime-cta .wp-block-button__link {
	padding: 17px 34px;
	font-size: 1.05rem;
}
.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: #C3FF32;
	border: 1px solid #C3FF32;
	border-radius: 12px;
	padding: 14px 26px;
	transition: background 0.18s ease, transform 0.18s ease;
}
.is-style-ghost .wp-block-button__link:hover {
	background: rgba(195, 255, 50, 0.08);
	color: #C3FF32;
	transform: translateY(-1px);
}

/* ---------- Hero ---------- */
.rr-hero__grid { align-items: center; }
.rr-hero__copy { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--md); }
.rr-hero__title { margin: 0; }
.rr-hero__sub { margin: 0; max-width: 46ch; color: #c7d0d4 !important; }
.rr-hero__panel {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}
.rr-hero__canvas-wrap { display: flex; justify-content: center; width: 100%; }
.rr-hero__canvas-wrap canvas { display: block; width: 100%; max-width: 600px; height: auto; }
.rr-accent { color: var(--wp--preset--color--lime); }
.rr-hero__auditform { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 560px; padding: 8px; background: rgba(20,34,42,0.72); border: 1px solid #283C46; border-radius: 14px; }
.rr-hero__auditinput { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; color: #F6F8F8; font-family: inherit; font-size: 1rem; padding: 12px 14px; }
.rr-hero__auditinput::placeholder { color: #7c8b92; }
.rr-hero__auditbtn { flex: none; display: inline-flex; align-items: center; gap: 8px; background: var(--wp--preset--color--lime); color: #1C2C34; border: 0; border-radius: 10px; padding: 13px 22px; font-family: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.rr-hero__auditbtn:hover { filter: brightness(1.06); transform: translateY(-1px); }
@media (max-width: 600px) { .rr-hero__auditform { flex-direction: column; align-items: stretch; } .rr-hero__auditbtn { justify-content: center; } }
.rr-section.rr-hero { padding-top: clamp(24px, 3vw, 52px) !important; }
.rr-hero__trust { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--wp--preset--font-size--small); color: #9fb0b7; }
.rr-hero__trust::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background-color: rgba(195,255,50,0.16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5 5-5.5' fill='none' stroke='%23C3FF32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }

/* ---------- Equal-height card rows (problem 3-up) ---------- */
.equal-cards > .wp-block-column { display: flex; flex-direction: column; flex-grow: 0; }
.equal-cards > .wp-block-column > .wp-block-group { display: flex; flex-direction: column; flex-grow: 1; }

/* ---------- Shared card bits ---------- */
.rr-card, .rr-service-card, .rr-step, .rr-guide-card {
	border-radius: 14px;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.rr-card__icon { line-height: 0; margin-bottom: var(--wp--preset--spacing--2xs); }
.rr-card__icon svg { width: 48px; height: 48px; }
.rr-card__title { margin: 0; }
.rr-card__text { margin: 0; line-height: 1.6; }
/* Problem cards: breathing room between the heading and its text */
.rr-problem .rr-card__title { margin-bottom: 12px; }

/* Dark-section cards — Problem (#0F1A20 section) and Steps (#1C2C34 section) */
.rr-card { background: #14222A !important; border: 1px solid #283C46; padding: 30px 28px !important; }
.rr-step { background: #22343d !important; border: 1px solid #283C46; padding: 30px 28px !important; }
.rr-card:hover, .rr-step:hover {
	transform: translateY(-4px);
	border-color: rgba(195, 255, 50, 0.35);
	box-shadow: 0 12px 32px rgba(16, 26, 32, 0.35);
}

/* Light-section cards — Services and Guides */
.rr-service-card, .rr-guide-card {
	background: #FFFFFF !important;
	border: 1px solid #E0E5E7;
	box-shadow: 0 1px 3px rgba(16, 26, 32, 0.06);
}
.rr-service-card { padding: 30px 28px !important; }
.rr-service-card:hover, .rr-guide-card:hover {
	transform: translateY(-4px);
	border-color: #C3D94F;
	box-shadow: 0 8px 24px rgba(16, 26, 32, 0.12);
}
/* Readable dark body text on the light sections */
.rr-services p.rr-card__text, .rr-services p.rr-section__sub,
.rr-guides p.rr-card__text, .rr-guides p.rr-section__sub { color: #4a5a62 !important; }

/* ---------- Services (auto-fit grid) ---------- */
.rr-services-grid, .rr-steps-grid, .rr-guides-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: var(--wp--preset--spacing--md);
}
/* WP flow-layout blockGap injects margin-block-start on non-first children;
   inside our grid that shoves cards 2..n down 24px and misaligns card 1. Zero it. */
.rr-services-grid > *, .rr-steps-grid > *, .rr-guides-grid > * { margin-block-start: 0 !important; }
.rr-service-card { position: relative; display: flex; flex-direction: column; }
.rr-stretch { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.rr-service-card > *:not(.rr-stretch) { position: relative; z-index: 2; pointer-events: none; }
.rr-price { margin: var(--wp--preset--spacing--sm) 0 0; margin-top: auto; padding-top: var(--wp--preset--spacing--sm); color: #55666e; font-size: var(--wp--preset--font-size--small); }

/* Chips (both appear on light sections) */
.rr-chip {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	margin: 0;
	padding: 5px 12px;
	border-radius: 12px;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.rr-chip--branded { background: rgba(195, 255, 50, 0.25); border: 1px solid rgba(163, 215, 30, 0.5); color: #14222A; }
.rr-chip--muted { background: #EEF1F2; border: 1px solid #E0E5E7; color: #55666e; }

/* ---------- How We Help (steps) ---------- */
.rr-step { display: flex; flex-direction: column; }
.rr-step__head { display: flex; align-items: center; gap: var(--wp--preset--spacing--sm); margin-bottom: var(--wp--preset--spacing--xs); color: var(--wp--preset--color--lime); }
.rr-step__num { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.6875rem; color: #374F5A; line-height: 1; }
.rr-step__icon { line-height: 0; color: var(--wp--preset--color--lime); }
.rr-step__icon svg { width: 30px; height: 30px; }
/* Step cards: even spacing number row -> title -> body */
.rr-step .rr-step__head { margin-bottom: 20px; }
.rr-step .rr-card__title { margin-bottom: 12px; }

/* ---------- Local Visibility Audit ---------- */
.rr-audit__grid { align-items: center; }
.rr-audit__copy { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--md); }
.rr-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--xs); }
.rr-trust li { position: relative; padding-left: 30px; color: var(--wp--preset--color--grey-200); }
.rr-trust li::before {
	content: "";
	position: absolute; left: 0; top: 2px;
	width: 20px; height: 20px; border-radius: 999px;
	background: var(--wp--preset--color--lime);
}
.rr-trust li::after {
	content: ""; position: absolute; left: 6px; top: 8px;
	width: 8px; height: 4px;
	border-left: 2px solid var(--wp--preset--color--slate);
	border-bottom: 2px solid var(--wp--preset--color--slate);
	transform: rotate(-45deg);
}

.rr-audit-card {
	background: #14222A;
	border: 1px solid #283C46;
	border-radius: 20px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
	padding: clamp(24px, 3vw, 36px);
	position: relative;
}
.rr-audit-form { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--md); }
.rr-field { display: flex; flex-direction: column; gap: 6px; }
.rr-label { font-size: var(--wp--preset--font-size--small); font-weight: 600; color: #9fb0b7; margin-bottom: 0; }
.rr-req { color: #C3FF32; }
.rr-input {
	width: 100%;
	background: #0F1A20;
	color: #F6F8F8;
	border: 1px solid #374F5A;
	border-radius: 10px;
	padding: 13px 15px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
}
.rr-input::placeholder { color: var(--wp--preset--color--grey-500); }
.rr-input:focus-visible { outline: none; border-color: #C3FF32; box-shadow: 0 0 0 3px rgba(195, 255, 50, 0.35); }
.rr-textarea { resize: vertical; min-height: 84px; }
.rr-hint { margin: 6px 0 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--grey-400); }

/* Target-area two-path toggle */
.rr-audit-tabs {
	display: flex; gap: 4px;
	background: #0F1A20;
	border: 1px solid #374F5A;
	border-radius: 10px;
	padding: 5px;
	margin-bottom: 6px;
}
.rr-audit-tab {
	flex: 1; cursor: pointer;
	background: transparent; border: 0;
	border-radius: 8px; padding: 9px 10px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small); font-weight: 600;
	color: #9fb0b7;
}
.rr-audit-tab.is-active { background: #C3FF32; color: #1C2C34; }
.rr-audit-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(195, 255, 50, 0.55); }

/* GBP inline help accordion */
.rr-audit-help__toggle {
	align-self: flex-start; margin-top: 6px;
	background: none; border: 0; padding: 0; cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem; font-weight: 600;
	color: #C3FF32; text-decoration: underline; text-underline-offset: 3px;
}
.rr-audit-help__toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(195, 255, 50, 0.55); border-radius: 4px; }
.rr-audit-help__panel {
	margin-top: var(--wp--preset--spacing--2xs);
	background: rgba(195, 255, 50, 0.06);
	border: 1px solid rgba(195, 255, 50, 0.25);
	border-radius: 10px;
	padding: 14px 16px;
}
.rr-help-steps { margin: 0 0 var(--wp--preset--spacing--sm); padding-left: 20px; color: var(--wp--preset--color--grey-300); font-size: var(--wp--preset--font-size--small); display: flex; flex-direction: column; gap: 6px; }
.rr-help-figure {
	display: flex; align-items: center; justify-content: center;
	min-height: 96px;
	background: repeating-linear-gradient(135deg, #0c151a 0 10px, #101d24 10px 20px);
	border: 1px dashed #374F5A;
	border-radius: 8px; color: #9fb0b7;
	font-size: var(--wp--preset--font-size--small);
}
.rr-audit-sanity { margin: 6px 0 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--error); }

.rr-audit-submit, .rr-audit-modal__continue {
	width: 100%; cursor: pointer;
	background: #C3FF32;
	color: #1C2C34;
	border: 0; border-radius: 12px;
	padding: 16px 18px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.05rem; font-weight: 600;
	box-shadow: 0 12px 32px rgba(195, 255, 50, 0.18);
	transition: filter 0.18s ease, transform 0.18s ease;
}
.rr-audit-submit:hover:not(:disabled), .rr-audit-modal__continue:hover { filter: brightness(1.06); transform: translateY(-1px); }
.rr-audit-submit:disabled { opacity: 0.45; box-shadow: none; cursor: not-allowed; }
.rr-audit-submit:focus-visible, .rr-audit-modal__continue:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(195, 255, 50, 0.55); }

/* Registration popup overlay (stub) */
.rr-audit-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: var(--wp--preset--spacing--md); }
.rr-audit-modal[hidden] { display: none; }
.rr-audit-modal__backdrop { position: absolute; inset: 0; background: rgba(6, 12, 15, 0.7); }
.rr-audit-modal__dialog {
	position: relative; z-index: 1; width: 100%; max-width: 420px;
	display: flex; flex-direction: column; gap: var(--wp--preset--spacing--xs);
	background: #14222A;
	border: 1px solid #283C46;
	border-radius: 20px;
	box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
	padding: var(--wp--preset--spacing--lg);
}
.rr-audit-modal__close {
	position: absolute; top: 10px; right: 12px;
	background: none; border: 0; cursor: pointer;
	color: var(--wp--preset--color--grey-400); font-size: 26px; line-height: 1;
}
.rr-audit-modal__close:hover { color: var(--wp--preset--color--grey-50); }
.rr-audit-modal__title { margin: 0; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--h4); color: var(--wp--preset--color--grey-50); }
.rr-audit-modal__help { margin: 0; color: var(--wp--preset--color--grey-300); font-size: var(--wp--preset--font-size--small); }
.rr-audit-modal__fineprint { margin: 0; color: var(--wp--preset--color--grey-500); font-size: var(--wp--preset--font-size--caption); }
body.rr-modal-open { overflow: hidden; }

/* ---------- Placeholders (proof + guides) ---------- */
.rr-placeholder {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	background: repeating-linear-gradient(135deg, #0c151a 0 10px, #101d24 10px 20px);
	border: 1px dashed #374F5A;
	border-radius: 8px;
	color: #9fb0b7;
	text-align: center;
}
.rr-placeholder__tag { font-weight: 600; font-size: var(--wp--preset--font-size--small); }
.rr-placeholder__note { font-size: var(--wp--preset--font-size--caption); }
.rr-proof__slot { aspect-ratio: 4 / 3; }
.rr-proof__figure { margin: 0; }
.rr-proof__figure img { display: block; width: 100%; height: auto; max-width: 560px; margin-inline: auto; }

/* Guide media placeholder — light equivalent on the light Guides section */
.rr-guide-card__media.rr-placeholder {
	background: repeating-linear-gradient(135deg, #EEF1F2 0 10px, #dfe5e7 10px 20px);
	border: 0;
	border-bottom: 1px dashed #cfd6d9;
	border-radius: 0;
	color: #8a969c;
	aspect-ratio: 16 / 9;
}

/* ---------- Guides ---------- */
.rr-guide-card { overflow: hidden; display: flex; flex-direction: column; }
.rr-guide-card__body { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--2xs); padding: 30px 28px; flex-grow: 1; }
.rr-readmore { margin: var(--wp--preset--spacing--2xs) 0 0; margin-top: auto; padding-top: var(--wp--preset--spacing--2xs); font-weight: 600; }
.rr-readmore a { color: #14222A; text-decoration: none; }
.rr-readmore a:hover { text-decoration: underline; }

/* ---------- Final CTA ---------- */
.rr-cta { text-align: center; border-top: 1px solid rgba(195, 255, 50, 0.14); }
.rr-cta__sub { max-width: 56ch; }

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
	.rr-hero__copy { gap: var(--wp--preset--spacing--sm); }
	.rr-hero__media { margin-top: var(--wp--preset--spacing--lg); }
	.rr-audit__form-col { margin-top: var(--wp--preset--spacing--lg); }
	.rr-proof__media { margin-top: var(--wp--preset--spacing--lg); }
	.rr-hero__canvas-wrap { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 781px) {
	/* Hero on mobile: portrait city map background only, NO animation. */
	.rr-section.rr-hero {
		min-height: 86vh;
		background:
			linear-gradient(180deg, #0c151a 0%, rgba(12,21,26,0.88) 20%, rgba(12,21,26,0.22) 42%, rgba(12,21,26,0) 60%),
			url('assets/img/rr-hero-map-mobile.webp') center top / cover no-repeat,
			#0c151a !important;
		padding-top: var(--wp--preset--spacing--xl) !important;
		padding-bottom: var(--wp--preset--spacing--xl) !important;
	}
	.no-webp .rr-section.rr-hero {
		background-image:
			linear-gradient(180deg, #0c151a 0%, rgba(12,21,26,0.88) 20%, rgba(12,21,26,0.22) 42%, rgba(12,21,26,0) 60%),
			url('/wp-content/uploads/2026/07/rank-rebels-hero-map-mobile-1080x1920-1.png') !important;
	}
	.rr-hero__grid { align-items: flex-start; }
	.rr-hero__media { display: none !important; }
	.rr-hero__sub { max-width: none; }
}
@media (max-width: 560px) {
	.rr-section { padding-left: 20px !important; padding-right: 20px !important; }
}

/* Respect reduced motion for card/hover transitions (hero canvas self-handles) */
@media (prefers-reduced-motion: reduce) {
	.rr-card, .rr-service-card, .rr-step, .rr-guide-card { transition: none !important; }
	.rr-card:hover, .rr-service-card:hover, .rr-guide-card:hover { transform: none !important; }
}

/* ================================================================== *
 * C1: Branded Cloud Website service page (Thread C1)
 * 10 patterns rr/svc-cloud-*, composed by page-branded-cloud-website.
 * Reuses .rr-section rhythm + token palette from theme.json.
 * ================================================================== */

/* ---------- Section backgrounds (mockup light/dark rhythm) ---------- *
 * Only three surfaces in the mockup: slate #1C2C34, off-white #F6F8F8, white #FFFFFF.
 * Dark: hero · pages · cta.   Light: what · why · features · pricing · deliverables · report · faq. */
.rr-section.rr-svc-hero         { background: var(--wp--preset--color--slate) !important; }
.rr-section.rr-svc-what         { background: #FFFFFF !important; }
.rr-section.rr-svc-why          { background: var(--wp--preset--color--grey-50) !important; }
.rr-section.rr-svc-features     { background: #FFFFFF !important; }
.rr-section.rr-svc-pages        { background: var(--wp--preset--color--slate) !important; }
.rr-section.rr-svc-pricing      { background: var(--wp--preset--color--grey-50) !important; }
.rr-section.rr-svc-deliverables { background: #FFFFFF !important; }
.rr-section.rr-svc-report       { background: var(--wp--preset--color--grey-50) !important; }
.rr-section.rr-svc-faq          { background: #FFFFFF !important; }
.rr-section.rr-svc-cta          { background: var(--wp--preset--color--slate) !important; }

/* Dark sections (hero/pages/cta) keep the global light text. Light sections need
   explicit dark text because the global text colour is grey-50. */
.rr-svc-what :is(h2, h3), .rr-svc-why :is(h2, h3),
.rr-svc-features :is(h2, h3), .rr-svc-pricing :is(h2, h3),
.rr-svc-deliverables :is(h2, h3), .rr-svc-report :is(h2, h3),
.rr-svc-faq :is(h2, h3) { color: var(--wp--preset--color--slate); }

/* Light-section body text (headings excluded, component colours preserved). */
.rr-svc-features p, .rr-svc-features li,
.rr-svc-pricing p, .rr-svc-pricing li,
.rr-svc-report p, .rr-svc-report td { color: #4a5a62; }
.rr-svc-what p,
.rr-svc-why p,
.rr-svc-deliverables .rr-section__sub,
.rr-svc-faq .rr-svc-faq__a,
.rr-svc-faq .rr-svc-faq__list,
.rr-svc-faq .rr-svc-faq__addons { color: #5a6a71 !important; }

/* ---------- Shared bits ---------- */
.rr-svc-eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	color: var(--wp--preset--color--lime);
}
.rr-svc-eyebrow::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 2px;
	margin-right: 9px;
	vertical-align: middle;
	background: var(--wp--preset--color--lime);
}
.rr-svc-eyebrow--light { color: var(--wp--preset--color--slate) !important; }
/* Primary lime CTA — mockup weight/size (scoped to this page). */
[class*="rr-svc-"] .is-style-lime-cta .wp-block-button__link {
	font-weight: 700;
	font-size: 1.02rem;
	border-radius: 10px;
}
.rr-svc-head { text-align: center; margin-bottom: var(--wp--preset--spacing--xl); }
.rr-svc-head .rr-section__sub { max-width: 760px; margin-left: auto; margin-right: auto; }
[class*="rr-svc-"] figure.wp-block-image { margin: 0; }

/* ---------- Section 1 — Hero ---------- */
.rr-svc-hero__grid { align-items: center; }
.rr-svc-hero__copy { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--md); }
.rr-svc-hero__title { margin: 0; letter-spacing: -0.01em; }
.rr-svc-hero .rr-svc-hero__title {
	font-size: clamp(2.1rem, 4.2vw, 3.125rem) !important;
	line-height: 1.08 !important;
	text-wrap: balance;
}
.rr-svc-hero__sub { margin: 0; max-width: 52ch; }
.rr-svc-hero__cta { margin-top: var(--wp--preset--spacing--2xs); }
.rr-svc-hero__img img { display: block; width: 100%; height: auto; max-width: 460px; margin-inline: auto; }

/* ---------- Section 2.1 — What ---------- */
.rr-svc-prose { max-width: 700px; margin-left: auto; margin-right: auto; }

/* ---------- Section 2.2 — Why ---------- */
.rr-svc-why__grid,
.rr-svc-features__grid,
.rr-svc-deliverables__grid { max-width: 1160px; margin-inline: auto; }
.rr-svc-why__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--md);
	align-items: stretch;
}
.rr-svc-why__grid > * { margin-block-start: 0 !important; }
.rr-svc-why .rr-svc-why__card {
	height: 100%;
	background: #FFFFFF !important;
	border: 1px solid var(--wp--preset--color--grey-300);
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	flex-direction: column;
}
.rr-svc-why__title { margin: 0; color: var(--wp--preset--color--slate); }
.rr-svc-why__text { margin: 0; }
.rr-svc-pull { margin-top: var(--wp--preset--spacing--xl); }
.rr-svc-pull__text {
	margin: 0 auto;
	max-width: 860px;
	color: var(--wp--preset--color--grey-50);
	text-wrap: balance;
	border-top: 1px solid rgba(195, 255, 50, 0.22);
	padding-top: var(--wp--preset--spacing--lg);
}

/* ---------- Section 2.3 — Features (compact 3-up) ---------- */
.rr-svc-features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--md);
	align-items: stretch;
}
.rr-svc-features__grid > * { margin-block-start: 0 !important; }
.rr-svc-feature {
	height: 100%;
	background: var(--wp--preset--color--grey-50);
	border: 1px solid var(--wp--preset--color--grey-300);
	border-radius: 16px;
	box-shadow: none;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.rr-svc-feature__img { line-height: 0; background: #FFFFFF; border-bottom: 1px solid var(--wp--preset--color--grey-300); }
.rr-svc-feature__img img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	display: block;
}
.rr-svc-feature__body { flex: 1 1 auto; padding: 24px 24px 26px; }
.rr-svc-feature__title { font-size: 1.12rem; line-height: 1.22; margin: 0 0 10px; letter-spacing: -0.01em; }
.rr-svc-feature__hook {
	font-style: italic;
	color: var(--wp--preset--color--slate) !important;
	font-size: 0.94rem;
	line-height: 1.4;
	margin: 0 0 16px;
}
.rr-svc-feature__list {
	list-style: none;
	margin: 0;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.rr-svc-feature__list li {
	position: relative;
	padding-left: 20px;
	color: #5a6a71;
	font-size: 0.9rem;
	line-height: 1.45;
}
.rr-svc-feature__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--wp--preset--color--lime);
	border: 1px solid var(--wp--preset--color--slate);
}

/* ---------- Section 2.4 — Pages (alternating rows) ---------- */
.rr-svc-row { align-items: center; gap: clamp(32px, 5vw, 72px) !important; }
.rr-svc-row--flip { flex-direction: row-reverse; }
.rr-svc-row__copy { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--xs); }
.rr-svc-row__title { margin: 14px 0 16px; color: var(--wp--preset--color--grey-50); font-size: clamp(22px, 2.5vw, 30px); }
.rr-svc-row__text { margin: 0; max-width: 46ch; font-size: clamp(16px, 1.35vw, 18px); }
.rr-svc-row__media { display: flex; justify-content: center; }
.rr-svc-row__img,
.rr-svc-row__media figure {
	background: var(--wp--preset--color--grey-50);
	border-radius: 18px;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8%;
	max-width: 520px;
	width: 100%;
	margin: 0 auto;
}
.rr-svc-row__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	max-width: none;
	aspect-ratio: auto;
}

/* ---------- Section 3 — Pricing ---------- */
.rr-svc-price-panel {
	margin-inline: auto;
	max-width: 640px;
	border: 1px solid var(--wp--preset--color--grey-200);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--custom--shadow--lg);
	text-align: center;
}
.rr-svc-price__amount {
	margin: var(--wp--preset--spacing--2xs) 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	color: var(--wp--preset--color--slate-900) !important;
	line-height: 1;
}
.rr-svc-price__note { margin: 0; color: var(--wp--preset--color--grey-500) !important; }
.rr-svc-price__value { max-width: 46ch; margin-inline: auto; }
.rr-svc-checklist {
	list-style: none;
	margin: var(--wp--preset--spacing--2xs) 0 0;
	padding: 0;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
}
.rr-svc-checklist li {
	position: relative;
	padding-left: 34px;
	color: #3a4a52 !important;
	line-height: 1.5;
}
.rr-svc-checklist li::before {
	content: "";
	position: absolute; left: 0; top: 1px;
	width: 22px; height: 22px; border-radius: 999px;
	background: var(--wp--preset--color--lime);
}
.rr-svc-checklist li::after {
	content: "";
	position: absolute; left: 7px; top: 8px;
	width: 8px; height: 4px;
	border-left: 2px solid var(--wp--preset--color--slate);
	border-bottom: 2px solid var(--wp--preset--color--slate);
	transform: rotate(-45deg);
}
.rr-svc-price__cta { margin-top: var(--wp--preset--spacing--xs); }

/* ---------- Section 4 — Deliverables (icon grid) ---------- */
.rr-svc-deliverables__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
	align-items: stretch;
}
.rr-svc-deliverables__grid > * { margin-block-start: 0 !important; }
.rr-svc-deliverable {
	background: var(--wp--preset--color--grey-50);
	border: 1px solid var(--wp--preset--color--grey-300);
	border-radius: 14px;
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.rr-svc-deliverable__icon { line-height: 0; }
.rr-svc-deliverable__icon img { width: 64px; height: 64px; margin-bottom: 18px; }
.rr-svc-deliverable__title { font-size: 1.12rem; margin: 0 0 8px; letter-spacing: -0.01em; color: var(--wp--preset--color--slate-900); }
.rr-svc-deliverable__text { margin: 0; color: #5a6a71; font-size: 0.92rem; line-height: 1.5; }

/* ---------- Section 5 — Sample report (spreadsheet preview) ---------- */
.rr-svc-sheet { width: 100%; }
.rr-sheet {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--grey-300);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: none;
	overflow: hidden;
}
.rr-sheet__bar {
	display: flex; align-items: center; gap: 8px;
	padding: 11px 14px;
	background: var(--wp--preset--color--grey-50);
	border-bottom: 1px solid var(--wp--preset--color--grey-200);
}
.rr-sheet__dot { width: 11px; height: 11px; border-radius: 999px; display: inline-block; }
.rr-sheet__dot--r { background: #EC6A5E; }
.rr-sheet__dot--y { background: #F2C14E; }
.rr-sheet__dot--g { background: #61C554; }
.rr-sheet__name {
	margin-left: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--grey-500);
}
.rr-sheet__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rr-sheet__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
	min-width: 640px;
}
.rr-sheet__table th, .rr-sheet__table td {
	text-align: left;
	padding: 11px 14px;
	border-bottom: 1px solid var(--wp--preset--color--grey-200);
	border-right: 1px solid var(--wp--preset--color--grey-200);
	white-space: nowrap;
}
.rr-sheet__table th {
	background: var(--wp--preset--color--slate);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: #FFFFFF !important;
	padding: 13px 16px;
}
.rr-sheet__table th:last-child, .rr-sheet__table td:last-child { border-right: 0; }
.rr-sheet__table tbody tr:last-child td { border-bottom: 0; }
.rr-sheet__url { font-family: var(--wp--preset--font-family--mono); font-size: 0.8rem; color: #4a5a62; }
.rr-sheet__status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #2c7a4d !important; }
.rr-sheet__check {
	display: inline-flex; align-items: center; justify-content: center;
	width: 17px; height: 17px; border-radius: 999px;
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--slate);
	font-size: 11px; line-height: 1;
}
.rr-sheet__tabs {
	display: flex; gap: 2px;
	padding: 0 8px;
	background: var(--wp--preset--color--grey-50);
	border-top: 1px solid var(--wp--preset--color--grey-200);
}
.rr-sheet__tab {
	padding: 9px 16px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--grey-500);
	border-right: 1px solid var(--wp--preset--color--grey-200);
	white-space: nowrap;
}
.rr-sheet__tab--active {
	background: #FFFFFF;
	color: var(--wp--preset--color--slate-900);
	border-top: 2px solid var(--wp--preset--color--lime);
	margin-top: -1px;
}
.rr-svc-sheet__caption { color: var(--wp--preset--color--grey-500) !important; margin: 0; }
.rr-svc-report__cta { margin-top: var(--wp--preset--spacing--xs); }
.rr-svc-report .is-style-ghost .wp-block-button__link {
	color: var(--wp--preset--color--slate);
	border: 1.5px solid var(--wp--preset--color--grey-300);
	font-weight: 600;
	font-size: 0.98rem;
	padding: 13px 24px;
}
.rr-svc-report .is-style-ghost .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--slate);
	background: rgba(28, 44, 52, 0.06);
	color: var(--wp--preset--color--slate);
}

/* ---------- Section 6 — FAQ (details accordion) ---------- */
.rr-svc-faq { }
.rr-svc-faq__cluster {
	margin: var(--wp--preset--spacing--lg) 0 var(--wp--preset--spacing--3xs);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--lime-600);
}
.rr-svc-faq__cluster:first-of-type { margin-top: 0; }
.rr-svc-faq__item {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--grey-300);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
}
.rr-svc-faq__item summary {
	list-style: none;
	cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 16px 20px;
}
.rr-svc-faq__item summary::-webkit-details-marker { display: none; }
.rr-svc-faq__item summary::after {
	content: "";
	flex: none;
	width: 12px; height: 12px;
	border-right: 2px solid var(--wp--preset--color--lime);
	border-bottom: 2px solid var(--wp--preset--color--lime);
	transform: rotate(45deg);
	transition: transform 0.18s ease;
}
.rr-svc-faq__item[open] summary::after { transform: rotate(225deg); }
.rr-svc-faq__q {
	margin: 0;
	font-size: var(--wp--preset--font-size--h4);
	color: var(--wp--preset--color--slate);
	line-height: 1.3;
}
.rr-svc-faq__item summary:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px rgba(195, 255, 50, 0.55);
}
.rr-svc-faq__a, .rr-svc-faq__list, .rr-svc-faq__addons {
	margin: 0 20px 14px;
	color: #5a6a71;
	line-height: 1.6;
}
.rr-svc-faq__item summary + * { margin-top: 4px; }
.rr-svc-faq__list, .rr-svc-faq__addons { padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.rr-svc-faq__addons strong { color: var(--wp--preset--color--slate); }

/* ---------- Section 7 — Final CTA ---------- */
.rr-svc-cta { text-align: center; border-top: 1px solid rgba(195, 255, 50, 0.14); }
.rr-svc-cta__eyebrow { margin-bottom: var(--wp--preset--spacing--2xs); }
.rr-svc-cta h2.wp-block-heading {
	font-size: clamp(2rem, 3.8vw, 2.8rem) !important;
	color: var(--wp--preset--color--grey-50);
}
.rr-svc-cta__sub { max-width: 60ch; margin-inline: auto; }
.rr-svc-cta__btns { margin-top: var(--wp--preset--spacing--xs); }

/* ---------- C1 responsive ---------- */
@media (max-width: 1024px) {
	.rr-svc-features__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 781px) {
	.rr-svc-why__grid { grid-template-columns: 1fr; }
	.rr-svc-features__grid { grid-template-columns: 1fr; }
	.rr-svc-hero__media, .rr-svc-hero__copy { flex-basis: 100% !important; }
	.rr-svc-hero__img img { max-width: 380px; }
	/* Alternating rows collapse to single column — always text first, motion second */
	.rr-svc-row, .rr-svc-row--flip { flex-direction: column !important; gap: var(--wp--preset--spacing--lg); }
	.rr-svc-row__copy, .rr-svc-row__media { flex-basis: 100% !important; }
	.rr-svc-row__text { max-width: none; }
}
@media (max-width: 560px) {
	.rr-svc-deliverables__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.rr-svc-faq__item summary::after { transition: none !important; }
}


/* --- mockup parity: 2.4 row stack spacing --- */
.rr-svc-pages .rr-svc-row + .rr-svc-row { margin-top: clamp(48px, 7vw, 104px) !important; }
.rr-svc-pages .rr-svc-row:first-of-type { margin-top: 64px !important; }

/* ============================================================
   C1 — EXACT MOCKUP PARITY: 2.2 Why · 3 Pricing · 6 FAQ
   ============================================================ */

/* ---------- shared: eyebrow with lime dash ---------- */
.rr-svc-eyebrow {
	display: inline-flex; align-items: center; gap: 9px;
	font-weight: 600; font-size: .78rem;
	letter-spacing: .16em; text-transform: uppercase;
}
.rr-svc-eyebrow::before {
	content: ""; width: 22px; height: 2px;
	background: var(--wp--preset--color--lime); display: inline-block;
}

/* ---------- 2.2 Why ---------- */
.rr-svc-head--left,
.rr-svc-head--left h2,
.rr-svc-head--left p { text-align: left !important; margin-left: 0 !important; }
.rr-svc-head--left { max-width: 760px; margin-inline: 0 !important; }

.rr-svc-why__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px !important; }
.rr-svc-why__card {
	background: #FFFFFF !important;
	border: 1px solid var(--wp--preset--color--grey-300);
	border-radius: 14px;
	padding: 34px 30px !important;
	display: flex; flex-direction: column;
}
.rr-svc-why__num {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700; font-size: .9rem; letter-spacing: .05em;
	color: var(--wp--preset--color--lime-600) !important;
}
.rr-svc-why__title { margin: 14px 0 12px !important; color: var(--wp--preset--color--slate) !important; }
.rr-svc-why__text  { margin: 0 !important; color: #5a6a71 !important; font-size: .98rem; }

.rr-svc-pull { max-width: 900px; margin-inline: 0 !important; }
.rr-svc-pull__text {
	margin: 40px 0 0 !important;
	border-left: 3px solid var(--wp--preset--color--lime);
	padding: 6px 0 6px 26px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: clamp(18px, 1.9vw, 23px) !important;
	line-height: 1.4;
	color: var(--wp--preset--color--slate) !important;
	text-align: left !important;
}

/* ---------- 3 Pricing ---------- */
.rr-svc-price-panel {
	max-width: 820px; margin: 0 auto;
	background: #FFFFFF !important;
	border: 1px solid var(--wp--preset--color--grey-300);
	border-radius: 20px;
	padding: clamp(32px, 5vw, 56px) !important;
	text-align: center;
}
.rr-svc-price__role {
	font-size: clamp(19px, 2.2vw, 26px) !important;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; line-height: 1.25;
	max-width: 24ch; margin: 18px auto 30px !important;
	color: var(--wp--preset--color--slate) !important;
}
.rr-svc-price__amount {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(52px, 9vw, 84px) !important;
	line-height: 1; letter-spacing: -.02em;
	color: var(--wp--preset--color--slate) !important;
	margin: 0 !important;
}
.rr-svc-price__note  { color: #5a6a71 !important; font-size: .95rem !important; margin-top: 12px !important; }
.rr-svc-price__value { color: #5a6a71 !important; margin-top: 24px !important; }
.rr-svc-checklist {
	list-style: none !important;
	max-width: 560px; margin: 34px auto 0 !important; padding: 0 !important;
	display: flex; flex-direction: column; gap: 14px;
	text-align: left;
}
.rr-svc-checklist li {
	display: flex; gap: 14px; align-items: flex-start;
	font-size: 1rem; color: var(--wp--preset--color--slate) !important;
}
.rr-svc-price__cta { margin-top: 38px !important; }
.rr-svc-price__cta .wp-block-button__link { width: min(100%, 340px); }

/* ---------- 6 FAQ ---------- */
.rr-svc-faq__cluster {
	font-weight: 600; font-size: .75rem;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--wp--preset--color--lime-600) !important;
	margin: 40px 0 8px !important;
}
.rr-svc-faq__cluster:first-of-type { margin-top: 0 !important; }
.rr-svc-faq__list { max-width: 820px; margin: 0 auto; }

.rr-svc-faq__item {
	border: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--grey-300) !important;
	border-radius: 0 !important;
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.rr-svc-faq__item summary {
	list-style: none; cursor: pointer;
	display: flex; justify-content: space-between; align-items: flex-start;
	gap: 24px; padding: 22px 0 !important;
}
.rr-svc-faq__item summary::-webkit-details-marker,
.rr-svc-faq__item summary::marker { display: none; content: ""; }
.rr-svc-faq__q {
	font-size: clamp(17px, 1.7vw, 20px) !important;
	font-weight: 600; letter-spacing: -.01em;
	margin: 0 !important;
	color: var(--wp--preset--color--slate) !important;
}
.rr-svc-faq__mark {
	flex: none; width: 26px; height: 26px;
	border: 1.5px solid var(--wp--preset--color--grey-300);
	border-radius: 50%; position: relative; margin-top: 2px;
	transition: border-color .2s ease;
}
.rr-svc-faq__mark::before,
.rr-svc-faq__mark::after {
	content: ""; position: absolute;
	background: var(--wp--preset--color--slate); border-radius: 2px;
}
.rr-svc-faq__mark::before { width: 11px; height: 1.5px; top: 11.5px; left: 6.5px; }
.rr-svc-faq__mark::after  { width: 1.5px; height: 11px; top: 6.5px; left: 11.5px; transition: opacity .2s ease; }
.rr-svc-faq__item[open] .rr-svc-faq__mark { border-color: var(--wp--preset--color--slate); }
.rr-svc-faq__item[open] .rr-svc-faq__mark::after { opacity: 0; }

.rr-svc-faq__a {
	padding: 0 50px 26px 0;
	color: #5a6a71 !important;
	font-size: 1rem;
	margin-top: 14px !important;
}
.rr-svc-faq__a:first-of-type { margin-top: 0 !important; }
.rr-svc-faq__addons li::before { background: var(--wp--preset--color--lime); }

@media (max-width: 781px) {
	.rr-svc-why__grid { grid-template-columns: 1fr; }
	.rr-svc-faq__a { padding-right: 20px; }
}

/* ============================================================
   C1 — CORRECTIONS: 2.2 alignment + lime numbers · FAQ marks
   ============================================================ */

/* --- 2.2: head + pull share the SAME left edge as the 1160px card grid --- */
.rr-svc-head--left {
	max-width: 1160px !important;
	margin-inline: auto !important;
	text-align: left !important;
}
.rr-svc-head--left h2,
.rr-svc-head--left p {
	max-width: 760px;
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-align: left !important;
}
.rr-svc-pull {
	max-width: 1160px !important;
	margin-inline: auto !important;
}
.rr-svc-pull__text { max-width: 900px; }

/* --- 2.2: numbers must be LIME (beat `.rr-svc-why p`, which is class+element) --- */
.rr-svc-why p.rr-svc-why__num,
.rr-section.rr-svc-why .rr-svc-why__num {
	color: var(--wp--preset--color--lime-600) !important;
}

/* --- FAQ: kill the old chevron; keep only the circular +/- mark --- */
.rr-svc-faq__item summary::after,
.rr-svc-faq__item[open] summary::after {
	content: none !important;
	display: none !important;
}

/* --- FAQ: restore centring (my earlier `margin:0` killed WP's auto side-margins) --- */
.rr-svc-faq__cluster {
	margin: 40px auto 8px !important;
	max-width: 820px;
}
.rr-svc-faq__cluster:first-of-type { margin-top: 0 !important; }
.rr-svc-faq__item {
	margin-block: 0 !important;
	margin-inline: auto !important;
	max-width: 820px;
}
/* answer bullet lists must NOT inherit the 820px container rule */
.rr-svc-faq__a + .rr-svc-faq__list,
.rr-svc-faq__item .rr-svc-faq__list,
.rr-svc-faq__item .rr-svc-faq__addons {
	max-width: none !important;
	margin-inline: 0 !important;
}

/* --- 2.1 prose: eyebrow + uniform paragraph size (mockup .prose) --- */
.rr-svc-what__eyebrow {
	justify-content: center;
	margin: 0 0 16px !important;
	color: var(--wp--preset--color--slate) !important;
}
.rr-svc-what h2 { margin-bottom: 8px !important; }
.rr-svc-what p.rr-svc-prose {
	margin-top: 22px !important;
	font-size: clamp(16px, 1.35vw, 18px) !important;
	color: var(--wp--preset--color--slate) !important;
	max-width: 720px;
	margin-inline: auto !important;
}

/* --- section eyebrows: centred by default, left in 2.2 --- */
.rr-svc-features__eyebrow,
.rr-svc-pages__eyebrow,
.rr-svc-deliverables__eyebrow,
.rr-svc-report__eyebrow,
.rr-svc-faq__eyebrow { justify-content: center; margin: 0 0 16px !important; }
.rr-svc-why__eyebrow { justify-content: flex-start; margin: 0 0 16px !important; }
.rr-svc-eyebrow--light { color: var(--wp--preset--color--slate) !important; }
.rr-svc-pages__eyebrow { color: var(--wp--preset--color--lime) !important; }

/* --- FIX: eyebrow is inline-flex, so it must be centred with auto margins,
       not justify-content (which only centres its own contents) --- */
.rr-svc-eyebrow {
	display: flex !important;
	width: fit-content;
	align-items: center;
	gap: 9px;
}
/* centred sections */
.rr-svc-what__eyebrow,
.rr-svc-features__eyebrow,
.rr-svc-pages__eyebrow,
.rr-svc-deliverables__eyebrow,
.rr-svc-report__eyebrow,
.rr-svc-faq__eyebrow,
.rr-svc-pricing .rr-svc-eyebrow,
.rr-svc-cta .rr-svc-eyebrow {
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: 16px !important;
}
/* left-aligned: 2.2 (matches its left-aligned head) and the hero */
.rr-svc-why__eyebrow,
.rr-svc-hero .rr-svc-eyebrow {
	margin-left: 0 !important;
	margin-right: auto !important;
	margin-bottom: 16px !important;
}

/* --- FIX: head, card grid and pull-quote must share ONE 1160px container.
       The alignwide grid was falling back to wideSize (1280px), so the cards
       sat 60px further left than the heading. Force all three to 1160. --- */
.rr-svc-why .rr-svc-head--left,
.rr-svc-why .rr-svc-why__grid,
.rr-svc-why .rr-svc-pull,
.rr-svc-features__grid,
.rr-svc-deliverables__grid {
	max-width: 1160px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ================================================================== *
 * Thread D — Hub pages
 * Design tokens (--rr-*) + namespaced hub classes (.rr-hub-*).
 * Classes are namespaced because .rr-pill, .rr-service-card, .rr-chip,
 * .rr-guide-card and .rr-section already exist above with DIFFERENT
 * meanings. Do not un-namespace them.
 * ================================================================== */

:root {
  --rr-slate-950:#0F1A20; --rr-slate-900:#14222A; --rr-slate:#1C2C34;
  --rr-slate-700:#283C46; --rr-slate-600:#374F5A; --rr-slate-500:#4A6572;
  --rr-lime:#C3FF32; --rr-lime-600:#A9E81C;
  --rr-grey-50:#F6F8F8; --rr-grey-200:#E0E5E7; --rr-grey-300:#C2CACD;
  --rr-grey-400:#9AA4A9; --rr-grey-500:#717C81; --rr-grey-700:#45504F;
  --rr-white:#FFFFFF;
  --rr-success:#2FB877; --rr-warning:#F2A93B; --rr-error:#EC4D4D;
  --rr-font-head:'Space Grotesk', system-ui, sans-serif;
  --rr-font-body:'Inter', system-ui, sans-serif;
  --rr-text-caption:0.75rem; --rr-text-small:0.875rem; --rr-text-base:1rem;
  --rr-text-lead:1.1875rem; --rr-text-h4:1.3125rem; --rr-text-h3:1.6875rem;
  --rr-text-h2:2.25rem; --rr-text-h1:3.125rem; --rr-text-display:4.25rem;
  --rr-lh-tight:1.05; --rr-lh-heading:1.15; --rr-lh-body:1.6;
  --rr-radius-sm:6px; --rr-radius-md:10px; --rr-radius-lg:14px;
  --rr-radius-xl:20px; --rr-radius-full:999px;
  --rr-shadow-sm:0 1px 2px rgba(16,26,32,.06), 0 1px 3px rgba(16,26,32,.10);
  --rr-shadow-md:0 4px 12px rgba(16,26,32,.10);
  --rr-shadow-lg:0 12px 32px rgba(16,26,32,.16);
  --rr-focus-ring:0 0 0 3px rgba(195,255,50,.55);
}

/* NOTE (Thread D, PROMPT 1): the namespaced hub classes (.rr-hub-*) that follow
 * this token block per §8 are NOT yet appended. Their source — the Thread-D hub
 * `mockup-reference.css` (the one with .rr-wrap / .rr-tile / .rr-citation and the
 * .rr-eyebrow-num rule at line 122) — was not present anywhere on this box at
 * build time. The only mockup-reference.css files found are an unrelated
 * services-page mockup (.card22 / .feat / .hero). Append the hub classes here,
 * with the §8 rename map applied and the dead .rr-eyebrow-num rule dropped, once
 * the correct source file is supplied. No visual regression results from the gap:
 * no shipped template references .rr-hub-* (those arrive in PROMPT 2). */
/* ================================================================== *
 * THREAD D — HUB PAGES
 * Namespaced .rr-hub-* classes. DO NOT un-namespace these.
 * .rr-pill, .rr-service-card, .rr-chip and .rr-guide-card already exist
 * ABOVE with DIFFERENT meanings (.rr-pill IS the homepage hero H1).
 * .rr-section is deliberately REUSED from the theme for vertical rhythm.
 * Generated from mockup-reference.css with the rename map applied.
 * ================================================================== */

/* ============================================================================
   Rank Rebels — Hub Pages · mockup-reference.css
   Every NEW class introduced by the hub-page mockups, so the build translates
   1:1 rather than being reinterpreted.

   Assumes tokens.css is loaded (the --rr-* custom properties).
   FOUR values below intentionally OVERRIDE the brand kit to match the LIVE
   build (homepage + service pages). Those lines are marked  LIVE OVERRIDE
   ========================================================================== */

/* ---- Layout primitives ------------------------------------------------- */
.rr-hub-wrap        { max-width: 1160px; margin-inline: auto; }   /* LIVE OVERRIDE: 1160, not 1280 */
.rr-hub-section--tight { padding-block: clamp(48px, 6vw, 80px); }

/* Section surfaces — only these four are ever used, never two identical adjacent */
.rr-hub-surface-slate-950 { background: var(--rr-slate-950); color: var(--rr-grey-50); }
.rr-hub-surface-slate     { background: var(--rr-slate);     color: var(--rr-white); }
.rr-hub-surface-grey-50   { background: var(--rr-grey-50);   color: var(--rr-slate); }
.rr-hub-surface-white     { background: var(--rr-white);     color: var(--rr-slate); }

/* ---- Focus ring (HARD RULE 8): every interactive element ---------------- */
.rr-hub-focus:focus-visible { outline: 0; box-shadow: var(--rr-focus-ring); }   /* 0 0 0 3px rgba(195,255,50,.55) */

/* ---- Buttons ----------------------------------------------------------- */
.rr-hub-btn-primary {                                    /* LIVE OVERRIDE block */
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rr-lime); color: var(--rr-slate);   /* lime NEVER carries white text */
  font-family: var(--rr-font-body); font-weight: 600; font-size: 1rem;
  border: 0; border-radius: 12px;                    /* LIVE OVERRIDE: 12, not 10 */
  padding: 16px 30px;                                /* LIVE OVERRIDE: 16x30, not 12x22 */
  box-shadow: 0 12px 32px rgba(195, 255, 50, 0.18);  /* LIVE OVERRIDE: lime-tinted */
  text-decoration: none; cursor: pointer;
  transition: background .15s ease;
}
.rr-hub-btn-primary:hover         { background: var(--rr-lime-600); color: var(--rr-slate); }
.rr-hub-btn-primary:focus-visible { outline: 0; box-shadow: var(--rr-focus-ring); }

.rr-hub-btn-ghost {                                      /* NEW — not defined in brand kit */
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--rr-lime);
  border: 1px solid var(--rr-lime); border-radius: 12px;
  padding: 14px 26px;
  font-family: var(--rr-font-body); font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease;
}
.rr-hub-btn-ghost:hover         { background: rgba(195, 255, 50, .10); }
.rr-hub-btn-ghost:focus-visible { outline: 0; box-shadow: var(--rr-focus-ring); }

/* ---- Eyebrow — the site's signature device ----------------------------- */
.rr-hub-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--rr-font-body); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rr-lime);
}
.rr-hub-eyebrow::before {                 /* the 22x2 lime dash */
  content: ""; width: 22px; height: 2px; background: var(--rr-lime); flex: none;
}
.rr-hub-eyebrow--on-light { color: var(--rr-slate); }   /* text -> slate; dash STAYS lime */

/* ---- Card grid --------------------------------------------------------- */
.rr-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.rr-hub-grid--wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }   /* 3-up article rows */

/* ---- The card (extends the homepage .rr-hub-card) -------------------- */
.rr-hub-card {
  display: flex; flex-direction: column;
  background: var(--rr-white); border: 1px solid var(--rr-grey-200);
  border-radius: var(--rr-radius-lg);            /* 14px */
  overflow: hidden; text-decoration: none;
  box-shadow: 0 1px 3px rgba(16, 26, 32, .06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.rr-hub-card:hover {
  transform: translateY(-4px);
  border-color: #C3D94F;                         /* lime-grey */
  box-shadow: 0 8px 24px rgba(16, 26, 32, .12);  /* LIVE OVERRIDE: not --rr-shadow-lg */
}
.rr-hub-card:focus-visible { outline: 0; box-shadow: var(--rr-focus-ring); }
.rr-hub-card-media { aspect-ratio: 16 / 9; }                    /* flush to top edge, no padding */
/* Service illustrations used as card art (page-services.php): keep their padding inside the 16:9 box. */
.rr-hub-card-media img[src*="/illustrations/"] { box-sizing: border-box; }
.rr-hub-card-body  { padding: 30px 28px; display: flex; flex-direction: column; flex: 1; }
.rr-hub-card-more  { margin-top: auto; padding-top: 22px; }     /* read-more pinned to bottom edge */

/* Missing-image placeholder — load-bearing, must look intentional */
.rr-hub-card-media--placeholder {
  border-bottom: 1px dashed var(--rr-grey-300);
  background-image: repeating-linear-gradient(45deg,
    #EEF1F2 0, #EEF1F2 10px, #dfe5e7 10px, #dfe5e7 20px);
  display: flex; align-items: center; justify-content: center;
}

/* ---- The chip (type label) --------------------------------------------- */
.rr-hub-chip {
  display: inline-block; font-family: var(--rr-font-body); font-weight: 600;
  font-size: 0.72rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 12px;
}
.rr-hub-chip--muted   { background: #EEF1F2; border: 1px solid var(--rr-grey-200); color: #55666e; }
.rr-hub-chip--branded { background: rgba(195,255,50,.25); border: 1px solid rgba(163,215,30,.5); color: var(--rr-slate-900); }

/* ---- Category tile — the icon-less / image-less problem ----------------- */
.rr-hub-tile {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--rr-white); border: 1px solid var(--rr-grey-200);
  border-radius: var(--rr-radius-lg); padding: 30px 28px 26px; min-height: 230px;
  box-shadow: 0 1px 3px rgba(16,26,32,.06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.rr-hub-tile:hover { transform: translateY(-4px); border-color: #C3D94F; box-shadow: 0 8px 24px rgba(16,26,32,.12); }
.rr-hub-tile:focus-visible { outline: 0; box-shadow: var(--rr-focus-ring); }
.rr-hub-tile-index { font-family: var(--rr-font-head); font-weight: 500; font-size: 46px; line-height: 1; color: var(--rr-grey-300); letter-spacing: -.02em; }
.rr-hub-tile-rule  { width: 34px; height: 2px; background: var(--rr-lime); margin: 20px 0 16px; }
.rr-hub-tile-arrow { transition: transform .18s ease; }
.rr-hub-tile:hover .rr-hub-tile-arrow { transform: translateX(6px); }

/* ---- Entity block ------------------------------------------------------- */
.rr-hub-entity-intro     { font-size: var(--rr-text-lead); line-height: var(--rr-lh-body); color: var(--rr-slate-600); max-width: 64ch; }
.rr-hub-entity-intro em  { font-style: normal; font-weight: 600; color: var(--rr-slate); box-shadow: inset 0 -.5em 0 rgba(195,255,50,.35); }  /* the emphasized variable, e.g. DISTANCE */
.rr-hub-entity-grid      { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; margin-top: 48px; }

/* Citation card — a considered reference rendered as UI (NOT a disclaimer). */
.rr-hub-citation {
  display: block; text-decoration: none;
  background: var(--rr-slate-900); border: 1px solid var(--rr-slate-700);
  border-left: 3px solid var(--rr-lime); border-radius: var(--rr-radius-lg);
  padding: 26px 28px; transition: border-color .18s ease;
}
.rr-hub-citation:hover { border-color: var(--rr-slate-500); }
.rr-hub-citation:focus-visible { outline: 0; box-shadow: var(--rr-focus-ring); }
.rr-hub-citation-label { color: var(--rr-lime); }             /* uses .rr-hub-eyebrow sizing */
.rr-hub-citation-title { font-family: var(--rr-font-head); font-weight: 600; font-size: 1.15rem; color: var(--rr-white); }
.rr-hub-citation-src   { color: var(--rr-lime); font-weight: 600; }

/* Quick fact — lighter callout, visually distinct from the citation card. */
.rr-hub-quickfact {
  background: rgba(195,255,50,.12); border: 1px solid rgba(163,215,30,.45);
  border-radius: var(--rr-radius-lg); padding: 26px 28px;
}
.rr-hub-quickfact-text { color: var(--rr-slate); font-weight: 500; font-size: 1.0625rem; line-height: 1.55; }

/* ---- Empty state — honest, no "coming soon", no fake count -------------- */
.rr-hub-empty {
  background: var(--rr-grey-50); border: 1px solid var(--rr-grey-200);
  border-radius: var(--rr-radius-xl); padding: 64px 48px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.rr-hub-empty-pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---- Related-topics pill strip (lateral navigation) --------------------- */
.rr-hub-pill {
  font-family: var(--rr-font-body); font-weight: 600; font-size: 0.95rem;
  color: var(--rr-slate); text-decoration: none;
  background: var(--rr-white); border: 1px solid var(--rr-grey-200);
  border-radius: var(--rr-radius-full); padding: 11px 22px;
  transition: border-color .15s ease, transform .15s ease;
}
.rr-hub-pill:hover { border-color: #C3D94F; transform: translateY(-2px); }
.rr-hub-pill:focus-visible { outline: 0; box-shadow: var(--rr-focus-ring); }

/* ---- Pagination — numbered, crawlable, 12 per page ---------------------- */
.rr-hub-pagination { display: flex; align-items: center; gap: 8px; font-family: var(--rr-font-body); }
.rr-hub-page {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 6px; border-radius: var(--rr-radius-md);
  border: 1px solid var(--rr-grey-200); background: var(--rr-white);
  color: var(--rr-slate-500); font-weight: 600; font-size: 0.95rem;
  text-decoration: none; transition: border-color .15s ease, color .15s ease;
}
.rr-hub-page:hover           { border-color: var(--rr-grey-300); color: var(--rr-slate); }
.rr-hub-page:focus-visible   { outline: 0; box-shadow: var(--rr-focus-ring); }
.rr-hub-page--current {                                        /* lime fill, slate text */
  background: var(--rr-lime); border-color: var(--rr-lime); color: var(--rr-slate);
  box-shadow: 0 6px 18px rgba(195,255,50,.22);
}

/* ---- Service card (dark surface, name + one line + link) ---------------- */
.rr-hub-service-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--rr-slate-700); border: 1px solid var(--rr-slate-600);
  border-radius: var(--rr-radius-lg); padding: 28px 26px; min-height: 180px;
  transition: border-color .18s ease, transform .18s ease;
}
.rr-hub-service-card:hover { border-color: var(--rr-slate-500); transform: translateY(-4px); }
.rr-hub-service-card:focus-visible { outline: 0; box-shadow: var(--rr-focus-ring); }

/* ================================================================== *
 * About page (/about/) — page-about.php
 * Namespaced .rr-about-* only. Does NOT reuse .rr-pill / .rr-service-card /
 * .rr-chip / .rr-guide-card / any .rr-hub-* (all taken, different meanings).
 * Uses the global --rr-* tokens. Self-contained prose layout.
 * ================================================================== */
.rr-about-wrap    { max-width: 1160px; margin-inline: auto; padding-inline: 32px; }
.rr-about-hero    { background: var(--rr-slate-950); color: var(--rr-grey-50); padding-block: clamp(64px, 9vw, 120px); }
.rr-about-h1      { font-family: var(--rr-font-head); font-weight: 700; color: var(--rr-white); font-size: clamp(2rem, 4.4vw, 3.125rem); line-height: var(--rr-lh-tight); letter-spacing: -0.02em; text-wrap: balance; }
.rr-about-body    { background: var(--rr-white); color: var(--rr-slate); padding-block: clamp(56px, 8vw, 104px); }
.rr-about-prose   { max-width: 720px; }
.rr-about-p       { font-size: var(--rr-text-lead); line-height: var(--rr-lh-body); color: var(--rr-slate-600); margin-top: 22px; }
.rr-about-p:first-child { margin-top: 0; }
.rr-about-p em    { font-style: normal; font-weight: 600; color: var(--rr-slate); box-shadow: inset 0 -.5em 0 rgba(195,255,50,.35); }
.rr-about-p strong { font-weight: 700; color: var(--rr-slate); }
.rr-about-line    { font-family: var(--rr-font-head); font-weight: 500; font-size: var(--rr-text-h4); color: var(--rr-slate); line-height: var(--rr-lh-heading); }
.rr-about-block   { margin-top: clamp(40px, 5vw, 64px); }
.rr-about-h2      { font-family: var(--rr-font-head); font-weight: 700; color: var(--rr-slate); font-size: var(--rr-text-h2); line-height: var(--rr-lh-heading); letter-spacing: -0.015em; margin-bottom: 4px; text-wrap: balance; }
.rr-about-cta     { margin-top: clamp(40px, 5vw, 56px); }
.rr-about-btn     { display: inline-flex; align-items: center; justify-content: center; background: var(--rr-lime); color: var(--rr-slate); font-family: var(--rr-font-body); font-weight: 600; font-size: 1rem; border: 0; border-radius: 12px; padding: 16px 30px; box-shadow: 0 12px 32px rgba(195, 255, 50, 0.18); text-decoration: none; cursor: pointer; transition: background .15s ease; }
.rr-about-btn:hover         { background: var(--rr-lime-600); color: var(--rr-slate); }
.rr-about-btn:focus-visible { outline: 0; box-shadow: var(--rr-focus-ring); }
@media (max-width: 640px) { .rr-about-wrap { padding-inline: 20px; } }

/* ================================================================== *
 * Industry pages — Law Firms (/industries/legal/law-firms-seo/),
 * patterns ind-law-*. PARITY build: section structure and every checked
 * visual value below is copied verbatim from the approved mockup
 * /root/industry-build/law-firms-design.html (gate: check_parity.py).
 * Namespaced .rr-ind-* only; homepage vocabulary reused solely for the
 * hero audit form/canvas chrome (.rr-hero__audit*, canvas-wrap).
 * POLISH (owner redlines, 2026-07-17): five approved deviations from the
 * mockup — full-background map hero (homepage treatment), centred what-is
 * column (callout removed), practice closing note removed, fuller AI-answer
 * panel, FAQ aligned to NW PAA (8 items). Each is documented at its rule
 * and encoded in /root/industry-build/scripts/check_parity.py.
 * ================================================================== */

/* ---------- Section bands (mockup backgrounds, exact) ---------- */
.rr-ind-sec      { margin: 0; }
/* POLISH-1: full-background map hero — the homepage hero treatment
   (map bleeds across the whole section behind a left readability gradient;
   values copied from .rr-section.rr-hero, shared CSS untouched). */
.rr-ind-hero     { background:
	linear-gradient(90deg, rgba(12,21,26,0.92) 0%, rgba(12,21,26,0.65) 30%, rgba(12,21,26,0.15) 52%, rgba(12,21,26,0) 66%),
	url('assets/img/rr-hero-map.webp') center center / cover no-repeat,
	#0c151a; }
.no-webp .rr-ind-hero { background:
	linear-gradient(90deg, rgba(12,21,26,0.92) 0%, rgba(12,21,26,0.65) 30%, rgba(12,21,26,0.15) 52%, rgba(12,21,26,0) 66%),
	url('/wp-content/uploads/2026/07/rank-rebels-hero-map-2560x1440-1.png') center center / cover no-repeat,
	#0c151a; }
.rr-ind-what     { background: #0F1A20; border-top: 1px solid #283C46; }
.rr-ind-why      { background: #1C2C34; }
.rr-ind-services { background: #F6F8F8; color: #14222A; }
.rr-ind-factors  { background: #1C2C34; }
.rr-ind-practice { background: #F6F8F8; color: #14222A; }
.rr-ind-ai       { background: #1C2C34; }
.rr-ind-agency   { background: #0F1A20; border-top: 1px solid #283C46; }
.rr-ind-faq      { background: #1C2C34; }

/* ---------- Inner wraps (mockup max-width + padding, exact) ---------- */
.rr-ind-wrap       { max-width: 1280px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) 32px; }
.rr-ind-wrap--hero { padding: clamp(48px, 7vw, 96px) 32px; }
.rr-ind-wrap--faq  { max-width: 860px; }

/* ---------- Two-column split sections (hero / what / ai) ---------- */
.rr-ind-split { display: flex; align-items: center; gap: clamp(32px, 5vw, 64px); flex-wrap: wrap; }
.rr-ind-hero .rr-ind-split { gap: clamp(32px, 5vw, 72px); }
.rr-ind-split__copy  { flex: 1 1 440px; min-width: 300px; }
.rr-ind-ai .rr-ind-split__copy { flex: 1 1 420px; }
.rr-ind-split__media { flex: 1 1 380px; min-width: 300px; display: flex; justify-content: center; }
.rr-ind-ai .rr-ind-split__media { flex: 1 1 360px; display: block; }

/* ---------- Headings (mockup type scale) ---------- */
.rr-ind-sec h2 {
	margin: 0 0 18px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(1.9rem, 3.4vw, 2.25rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #F6F8F8;
	text-wrap: balance;
}
.rr-ind-services h2, .rr-ind-practice h2 { color: #14222A; }

/* ---------- Centred section heads ---------- */
.rr-ind-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.rr-ind-head--tight { margin-bottom: 44px; }
.rr-ind-head h2 { margin: 0 0 16px; }
.rr-ind-head p  { margin: 0; }
.rr-ind-sec .rr-ind-lead    { font-size: 1.1875rem; line-height: 1.6; color: #9AA4A9; }
.rr-ind-sec .rr-ind-sublead { margin-top: 14px; font-size: 1rem; line-height: 1.6; color: #9AA4A9; }
.rr-ind-services .rr-ind-lead, .rr-ind-practice .rr-ind-lead { color: #45504F; }

/* ---------- Two-column prose (what / ai) ---------- */
.rr-ind-split__copy h2 { margin: 0 0 18px; }
.rr-ind-sec .rr-ind-split__copy p.rr-ind-lead { margin: 0 0 18px; max-width: 560px; }
.rr-ind-sec p.rr-ind-body { margin: 0 0 18px; font-size: 1rem; line-height: 1.6; color: #717C81; max-width: 560px; }
.rr-ind-sec .rr-ind-split__copy p:last-child { margin-bottom: 0; }
.rr-ind-ai .rr-ind-split__copy p { max-width: 520px; }

/* ---------- Closing notes under card grids ---------- */
.rr-ind-note { max-width: 760px; margin: 48px auto 0; text-align: center; }
.rr-ind-note p { margin: 0; font-size: 1rem; line-height: 1.6; color: #9AA4A9; }
.rr-ind-services .rr-ind-note p, .rr-ind-practice .rr-ind-note p { color: #45504F; }

/* ---------- Card grids (mockup grid-template-columns/gap, exact) ---------- */
.rr-ind-grid { display: grid; }
.rr-ind-grid--why      { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.rr-ind-grid--svc      { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.rr-ind-grid--factors  { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.rr-ind-grid--practice { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }

/* ---------- Cards (mockup card containers, exact) ---------- */
.rr-ind-card    { background: #14222A; border: 1px solid #283C46; border-radius: 14px; padding: 34px 30px; }
.rr-ind-svccard { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E0E5E7; border-radius: 14px; padding: 30px 28px; box-shadow: 0 1px 3px rgba(16,26,32,0.06); }
.rr-ind-factor  { position: relative; background: #22343d; border: 1px solid #283C46; border-radius: 14px; padding: 30px 26px; }
.rr-ind-pacard  { background: #FFFFFF; border: 1px solid #E0E5E7; border-radius: 14px; padding: 24px 24px; box-shadow: 0 1px 3px rgba(16,26,32,0.06); }

/* Card titles are styled paragraphs, not headings (locked outline) */
.rr-ind-sec .rr-ind-cardtitle {
	margin: 18px 0 10px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.3125rem;
	line-height: 1.3;
	color: #F6F8F8;
}
.rr-ind-svccard .rr-ind-cardtitle { color: #14222A; }
.rr-ind-factor .rr-ind-cardtitle  { margin: 14px 0 10px; font-size: 1.25rem; }
.rr-ind-pacard .rr-ind-cardtitle  { margin: 0 0 8px; font-size: 1.15rem; color: #14222A; }
.rr-ind-sec .rr-ind-cardtext { margin: 0; font-size: 1rem; line-height: 1.6; color: #9AA4A9; }
.rr-ind-svccard .rr-ind-cardtext { color: #45504F; flex: 1; }
.rr-ind-factor .rr-ind-cardtext  { font-size: 0.95rem; }
.rr-ind-pacard .rr-ind-cardtext  { font-size: 0.95rem; color: #45504F; }
.rr-ind-factor__num { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.6875rem; color: #374F5A; }

/* Service-card chips (mockup eyebrow treatment) */
.rr-ind-chip {
	align-self: flex-start;
	margin: 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: 999px;
}
.rr-ind-chip--branded { color: #14222A; background: #C3FF32; }
.rr-ind-chip--muted   { color: #45504F; background: #EDF1F1; border: 1px solid #E0E5E7; }

/* ---------- Hero (mockup two-column hero) ---------- */
.rr-ind-hero__pill {
	display: inline-block;
	margin: 0 0 24px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #C3FF32;
	background: rgba(195,255,50,0.1);
	border: 1px solid rgba(195,255,50,0.35);
	padding: 8px 16px;
	border-radius: 999px;
}
.rr-ind-hero__title {
	margin: 0 0 22px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(2.3rem, 4.8vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #F6F8F8;
	text-wrap: balance;
}
.rr-ind-hero__sub { margin: 0 0 34px; font-size: clamp(1.05rem, 1.4vw, 1.1875rem); line-height: 1.6; color: #C2CACD; max-width: 560px; }
/* Trust chips under the CTA — locked trust-line copy split into chips,
   styled with the mockup's pill/badge treatment (hero kicker pill values) */
.rr-ind-hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rr-ind-hero__chip {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #C3FF32;
	background: rgba(195,255,50,0.1);
	border: 1px solid rgba(195,255,50,0.35);
	padding: 8px 16px;
	border-radius: 999px;
}
/* POLISH-1: the framed 460px canvas panel is gone — the transparent pulse
   canvas sits directly on the section's map background, exactly like the
   homepage hero (layout comes from the shared .rr-hero__canvas-wrap). */

/* ---------- What-is centred column ----------
   POLISH-2: the right callout/placeholder card is removed; the section is a
   single centred column using the .rr-ind-head treatment shared by the other
   sections (body paragraphs keep their prose rhythm, full head width). */
.rr-ind-what .rr-ind-head--what { margin-bottom: 0; }
.rr-ind-what .rr-ind-head p.rr-ind-lead,
.rr-ind-what .rr-ind-head p.rr-ind-body { margin: 0 0 18px; max-width: none; }
.rr-ind-what .rr-ind-head p:last-child { margin-bottom: 0; }

/* ---------- AI search panel ----------
   POLISH-4: stylised AI-answer mockup — question bubble, AI answer block
   carrying the locked chip line, and generic source-cite rows. Neutral UI
   labels only; container keeps the mockup's checked values (bg/border/
   radius/padding), aspect-ratio dropped for the fuller content. */
.rr-ind-ai__panel {
	position: relative;
	background: #22343d;
	border: 1px dashed #374F5A;
	border-radius: 18px;
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.rr-ind-ai__bubble {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	align-self: flex-end;
	max-width: 88%;
	background: #0F1A20;
	border: 1px solid #283C46;
	border-radius: 12px;
	border-bottom-right-radius: 4px;
	padding: 14px 16px;
	font-size: 0.9rem;
	color: #C2CACD;
	line-height: 1.5;
}
.rr-ind-ai__bubble svg { flex: none; }
.rr-ind-ai__answer {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #1C2C34;
	border: 1px solid #283C46;
	border-radius: 12px;
	border-top-left-radius: 4px;
	padding: 16px;
}
.rr-ind-ai__anslabel,
.rr-ind-ai__srclabel {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #717C81;
}
.rr-ind-ai__sources {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-top: 1px solid #283C46;
	padding-top: 12px;
}
.rr-ind-ai__source {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.85rem;
	color: #9AA4A9;
	line-height: 1.4;
}
.rr-ind-ai__source::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #C3FF32;
	opacity: 0.7;
}
.rr-ind-ai__chip {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #0F1A20;
	border: 1px solid #283C46;
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 0.9rem;
	color: #C2CACD;
	line-height: 1.5;
}
.rr-ind-ai__chip svg { flex: none; }

/* ---------- Agency checklist (mockup 2-col check grid) ---------- */
.rr-ind-checklist {
	max-width: 820px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 16px 32px;
}
.rr-ind-check { display: flex; align-items: flex-start; gap: 14px; }
.rr-ind-check svg { flex: none; margin-top: 2px; }
.rr-ind-check__text { margin: 0; font-size: 1rem; line-height: 1.55; color: #C2CACD; }
.rr-ind-check__text strong { color: #F6F8F8; font-weight: 600; }
.rr-ind-agency__hire { max-width: 760px; margin: 64px auto 0; }
.rr-ind-agency__hire h3 {
	margin: 0 0 18px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.2;
	color: #F6F8F8;
	text-wrap: balance;
}
.rr-ind-agency__hire p { margin: 0 0 18px; font-size: 1rem; line-height: 1.6; color: #9AA4A9; }
.rr-ind-agency__hire p:last-child { margin-bottom: 0; }

/* ---------- FAQ accordion (mockup card vocabulary) ---------- */
.rr-ind-faq__list { display: flex; flex-direction: column; gap: 14px; }
.rr-ind-faq__item { margin: 0; background: #14222A; border: 1px solid #283C46; border-radius: 14px; overflow: hidden; }
.rr-ind-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	list-style: none;
	cursor: pointer;
	padding: 22px 24px;
	text-align: left;
}
.rr-ind-faq__item summary::-webkit-details-marker { display: none; }
.rr-ind-faq__q {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.3;
	color: #F6F8F8;
}
.rr-ind-faq__body { padding: 0 24px 24px; }
.rr-ind-faq__a { margin: 0; font-size: 1rem; line-height: 1.65; color: #9AA4A9; }
/* Toggle caret: the mockup's chevron SVG, rotated 180° when open */
.rr-ind-faq__caret { flex: none; transition: transform 0.2s ease; }
.rr-ind-faq__item[open] .rr-ind-faq__caret { transform: rotate(180deg); }
.rr-ind-faq__item summary:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(195, 255, 50, 0.55); border-radius: 8px; }

/* ---------- Responsive / motion ---------- */
@media (max-width: 640px) {
	.rr-ind-wrap { padding-left: 20px; padding-right: 20px; }
}
/* POLISH-1: hero on mobile mirrors the homepage — portrait map background,
   no canvas animation (values copied from the homepage 781px rules). */
@media (max-width: 781px) {
	.rr-ind-hero { min-height: 86vh; background:
		linear-gradient(180deg, #0c151a 0%, rgba(12,21,26,0.88) 20%, rgba(12,21,26,0.22) 42%, rgba(12,21,26,0) 60%),
		url('assets/img/rr-hero-map-mobile.webp') center top / cover no-repeat,
		#0c151a; }
	.no-webp .rr-ind-hero { background-image:
		linear-gradient(180deg, #0c151a 0%, rgba(12,21,26,0.88) 20%, rgba(12,21,26,0.22) 42%, rgba(12,21,26,0) 60%),
		url('/wp-content/uploads/2026/07/rank-rebels-hero-map-mobile-1080x1920-1.png'); }
	.rr-ind-hero .rr-ind-split__media { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.rr-ind-faq__caret { transition: none !important; }
}

/* ---------- Service pages — five-block feature grid: centre the second row ---------- */
@media (min-width: 1025px) {
	.rr-svc-features__grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); }
	.rr-svc-features__grid:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
	.rr-svc-features__grid:has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: 2 / span 2; }
	.rr-svc-features__grid:has(> :nth-child(5):last-child) > :nth-child(5) { grid-column: 4 / span 2; }
}

/* ================================================================== *
 * Contact page (/contact-us/) - page-contact-us.php
 * Namespaced .rr-contact-*; the hero, wrap, h2 and button reuse .rr-about-*.
 * ================================================================== */
.rr-contact-intro { margin-top: 20px; max-width: 640px; font-size: var(--rr-text-lead); line-height: var(--rr-lh-body); color: var(--rr-grey-300); }
.rr-contact-grid  { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.rr-contact-form-col .rr-about-h2 { margin-bottom: 20px; }
.rr-contact-form  { display: flex; flex-direction: column; gap: 20px; }
.rr-contact-field { display: flex; flex-direction: column; gap: 6px; }
.rr-contact-field label { font-family: var(--rr-font-body); font-weight: 600; font-size: var(--rr-text-small); color: var(--rr-slate); }
.rr-contact-field :is(input, select, textarea) { width: 100%; box-sizing: border-box; font-family: var(--rr-font-body); font-size: var(--rr-text-base); color: var(--rr-slate); background: var(--rr-white); border: 1px solid var(--rr-grey-300); border-radius: var(--rr-radius-md); padding: 12px 14px; }
.rr-contact-field textarea { resize: vertical; min-height: 160px; line-height: var(--rr-lh-body); }
.rr-contact-field :is(input, select, textarea):focus { outline: 0; border-color: var(--rr-slate); box-shadow: var(--rr-focus-ring); }
.rr-contact-hp    { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rr-contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.rr-contact-fine  { margin: 0; font-size: var(--rr-text-small); color: var(--rr-grey-500); }
.rr-contact-status:empty { display: none; }
.rr-contact-note  { margin: 0 0 20px; padding: 14px 16px; border-radius: var(--rr-radius-md); font-size: var(--rr-text-base); line-height: 1.5; border: 1px solid; }
.rr-contact-note--ok  { background: #EAF8F1; border-color: var(--rr-success); color: #14452E; }
.rr-contact-note--err { background: #FDEDED; border-color: var(--rr-error); color: #6B1B1B; }
.rr-contact-aside { display: flex; flex-direction: column; gap: 20px; }
.rr-contact-card  { background: var(--rr-grey-50); border: 1px solid var(--rr-grey-200); border-radius: var(--rr-radius-lg); padding: 24px; }
.rr-contact-card p { margin: 8px 0 0; color: var(--rr-slate-600); line-height: 1.5; }
.rr-contact-card-h { margin: 0; font-family: var(--rr-font-head); font-weight: 700; font-size: var(--rr-text-h4); color: var(--rr-slate); line-height: var(--rr-lh-heading); }
.rr-contact-mail  { font-weight: 600; color: var(--rr-slate); text-decoration: underline; text-decoration-color: var(--rr-lime-600); text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.rr-contact-mail:hover { text-decoration-color: var(--rr-slate); }
.rr-contact-mail:focus-visible { outline: 0; box-shadow: var(--rr-focus-ring); border-radius: 2px; }
@media (max-width: 860px) { .rr-contact-grid { grid-template-columns: 1fr; } }

/* ================================================================== *
 * Legal pages (/privacy-policy/, /terms/, /refund-policy/,
 * /results-disclaimer/) — inc/legal.php, rendered by page-*.php.
 * Namespaced .rr-legal-* / .rr-legal__* only. Reading-width prose on
 * white, dark hero, matching the About page's proportions.
 * ================================================================== */
.rr-legal-wrap        { max-width: 1160px; margin-inline: auto; padding-inline: 32px; }
.rr-legal-hero        { background: var(--rr-slate-950); color: var(--rr-grey-50); padding-block: clamp(56px, 7.5vw, 96px); }
.rr-legal__h1         { font-family: var(--rr-font-head); font-weight: 700; color: var(--rr-white); font-size: clamp(2rem, 4.4vw, 3.125rem); line-height: var(--rr-lh-tight); letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
.rr-legal__intro      { max-width: 720px; margin: 18px 0 0; font-size: var(--rr-text-lead); line-height: var(--rr-lh-body); color: var(--rr-grey-300); }
.rr-legal-body        { background: var(--rr-white); color: var(--rr-slate); padding-block: clamp(48px, 7vw, 88px); }
.rr-legal-body .rr-legal-wrap > * { max-width: 820px; }
.rr-legal__meta       { margin: 0 0 8px; font-size: var(--rr-text-small); color: var(--rr-slate-500); }
.rr-legal__entity     { margin: 0 0 8px; font-size: var(--rr-text-small); color: var(--rr-slate-500); }
.rr-legal__h2         { font-family: var(--rr-font-head); font-weight: 700; color: var(--rr-slate); font-size: var(--rr-text-h4); line-height: var(--rr-lh-heading); letter-spacing: -0.01em; margin: clamp(32px, 4vw, 48px) 0 10px; }
.rr-legal__p          { margin: 0 0 16px; line-height: var(--rr-lh-body); color: var(--rr-slate-600); }
.rr-legal__list       { margin: 0 0 16px; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; color: var(--rr-slate-600); line-height: var(--rr-lh-body); }
.rr-legal__list strong,
.rr-legal__p strong   { font-weight: 700; color: var(--rr-slate); }
.rr-legal code        { font-family: var(--wp--preset--font-family--mono, monospace); font-size: 0.9em; background: var(--rr-grey-100, #EEF1F2); border-radius: 4px; padding: 1px 5px; }
.rr-legal a           { color: var(--rr-slate); text-decoration: underline; text-underline-offset: 2px; }
.rr-legal a:hover     { color: var(--rr-slate-600); }
.rr-legal a:focus-visible { outline: 0; box-shadow: var(--rr-focus-ring); border-radius: 3px; }
.rr-legal__tablewrap  { overflow-x: auto; margin: 0 0 20px; }
.rr-legal__table      { width: 100%; border-collapse: collapse; font-size: var(--rr-text-small); }
.rr-legal__table th,
.rr-legal__table td   { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--rr-grey-200, #E0E5E7); line-height: var(--rr-lh-body); }
.rr-legal__table th   { font-weight: 700; color: var(--rr-slate); white-space: nowrap; }
.rr-legal__table td   { color: var(--rr-slate-600); }
.rr-legal-more        { background: var(--rr-grey-50, #F6F8F8); padding-block: clamp(32px, 4vw, 48px); }
.rr-legal-more .rr-legal-wrap > * { max-width: 820px; }
.rr-legal__morelabel  { margin: 0 0 10px; font-size: var(--rr-text-caption); letter-spacing: 1.5px; text-transform: uppercase; color: var(--rr-slate-500); }
.rr-legal__morelist   { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.rr-legal__morelist a { color: var(--rr-slate); font-weight: 600; }
@media (max-width: 640px) { .rr-legal-wrap { padding-inline: 20px; } }

/* ==================================================================
 * RESULTS BAND (homepage, patterns/results-band.php)
 * Live counters and the latest readings, rendered from the results feed
 * (inc/results/). The /results/ board has its own file, assets/css/results.css.
 * Lime only appears as the highlighted figure in the readings list.
 * ================================================================== */
.rr-section.rr-results-band { background: var(--rr-slate) !important; }
.rr-results-band h2 { color: var(--rr-grey-50); }
.rr-results-band__grid { gap: var(--wp--preset--spacing--xl); }
.rr-results-band__fine { margin-top: 16px; }
.rr-rb__eyebrow {
	display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
	font-family: var(--wp--preset--font-family--mono); font-size: var(--rr-text-caption);
	letter-spacing: 0.1em; text-transform: uppercase; color: var(--rr-grey-300);
}
.rr-rb__eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--rr-success); animation: rr-rb-pulse 2.2s infinite; }
@keyframes rr-rb-pulse {
	0% { box-shadow: 0 0 0 0 rgba(47, 184, 119, 0.6); }
	70% { box-shadow: 0 0 0 8px rgba(47, 184, 119, 0); }
	100% { box-shadow: 0 0 0 0 rgba(47, 184, 119, 0); }
}
@media (prefers-reduced-motion: reduce) { .rr-rb__eyebrow i { animation: none; } }

.rr-rb__panel { background: var(--rr-slate-900); border: 1px solid var(--rr-slate-600); border-radius: var(--rr-radius-xl); padding: 22px; display: grid; gap: 18px; min-width: 0; }
.rr-rb__panel--empty { color: var(--rr-grey-300); }
.rr-rb__panel--empty p { margin: 0; }
.rr-rb__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rr-slate-600); border-radius: var(--rr-radius-lg); overflow: hidden; border: 1px solid var(--rr-slate-600); }
.rr-rb__tile { background: var(--rr-slate-900); padding: 14px 16px; display: grid; gap: 2px; min-width: 0; align-content: start; }
.rr-rb__v { font-family: var(--rr-font-head); font-size: var(--rr-text-h2); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--rr-grey-50); font-variant-numeric: tabular-nums; }
.rr-rb__v small { font-size: var(--rr-text-base); color: var(--rr-grey-400); font-weight: 500; margin-left: 3px; }
.rr-rb__l { font-size: 12.5px; color: var(--rr-grey-300); line-height: 1.3; }
.rr-rb__gate { margin: 0; font-size: 12.5px; color: var(--rr-grey-400); border-left: 2px solid var(--rr-slate-500); padding-left: 10px; }
.rr-rb__feedh { margin: 0 0 8px; font-family: var(--wp--preset--font-family--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rr-grey-400); font-weight: 500; line-height: 1.3; }
.rr-rb__feed ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rr-rb__feed li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; font-size: var(--rr-text-small); color: var(--rr-grey-200); border-top: 1px solid var(--rr-slate-700); padding-top: 8px; }
.rr-rb__feed li:first-child { border-top: 0; padding-top: 0; }
.rr-rb__who { font-family: var(--rr-font-head); font-weight: 600; color: var(--rr-grey-50); white-space: nowrap; font-size: 13.5px; }
.rr-rb__who small { display: block; color: var(--rr-grey-400); font-weight: 400; font-family: var(--rr-font-body); font-size: 12px; }
.rr-rb__feed .up { color: var(--rr-lime); font-weight: 600; }
.rr-rb__feed li { grid-template-columns: 1fr auto; align-items: center; }
.rr-rb__what { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rr-rb__lab { color: var(--rr-grey-300); }
.rr-rb__from { color: var(--rr-grey-400); }
.rr-rb__arrow { color: var(--rr-grey-500); }
.rr-rb__what small { color: var(--rr-grey-400); font-size: 11.5px; margin-left: 4px; }
.rr-rb__stamp { display: flex; justify-content: space-between; font-family: var(--wp--preset--font-family--mono); font-size: 11.5px; color: var(--rr-grey-400); gap: 12px; flex-wrap: wrap; }
@media (max-width: 781px) {
	.rr-results-band__media { margin-top: var(--wp--preset--spacing--lg); }
}
@media (max-width: 560px) {
	.rr-rb__tiles { grid-template-columns: 1fr 1fr; }
	.rr-rb__tile:first-child { grid-column: 1 / -1; }
	.rr-rb__feed li { grid-template-columns: 1fr; gap: 2px; }
	.rr-rb__what { white-space: normal; flex-wrap: wrap; }
}