/*
Theme Name: RRWH Projects
Theme URI: https://projects.rrwh.com
Author: RRWH.com
Author URI: https://rrwh.com
Description: Showcase theme for projects.rrwh.com. A child of Twenty Twenty-Five forked from the AccessNow theme, in the RRWH.com colours: charcoal and electric blue, with a hero, accent and pattern that change with each project's type (web app, stand-alone app, SaaS, script).
Template: twentytwentyfive
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rrwh
*/

/* ==========================================================================
   Tokens. RRWH.com colours: #07F blue, #1b1c1d charcoal, #36B steel, #f12222 red.
   The accent family is swapped per project type (see "Project types" at the end).
   ========================================================================== */

:root {
	--rr-primary: #0b4fb3; /* RRWH blue, deepened for text and buttons (7:1 on white) */
	--rr-primary-hover: #093f8f;
	--rr-primary-deep: #141517; /* charcoal, from RRWH's top bar */
	--rr-primary-lift: #0a3a82;
	--rr-accent: #0077ff; /* RRWH's #07F: fills, glows, rules */
	--rr-accent-soft: #a9d0ff;
	--rr-accent-text: #0058c4; /* small accent text on white (AA) */
	--rr-steel: #3366bb;
	--rr-signal: #e5262f; /* RRWH's testimonial red, for small highlights only */
	--rr-ink: #16181c;
	--rr-muted: #59606b;
	--rr-line: rgba(22, 24, 28, 0.09);
	--rr-surface: #f3f5f8;
	--rr-radius: 16px;
	--rr-shadow-sm: 0 1px 2px rgba(22, 24, 28, 0.04), 0 2px 8px rgba(22, 24, 28, 0.04);
	--rr-shadow-lg: 0 18px 40px -12px color-mix(in srgb, var(--rr-primary) 28%, transparent), 0 4px 12px rgba(22, 24, 28, 0.06);
	--rr-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--rr-gutter: max(1.25rem, 4vw);
}

/* The Projects plugin's own colours follow the theme (set on body so a type class there wins). */
body {
	--anp-navy: var(--rr-primary);
	--anp-navy-deep: var(--rr-primary-deep);
	--anp-teal: var(--rr-accent);
	--anp-teal-soft: var(--rr-accent-soft);
	--anp-steel: var(--rr-steel);
	--anp-ink: var(--rr-ink);
	--anp-muted: var(--rr-muted);
	--anp-line: var(--rr-line);
	--anp-bg: var(--rr-surface);
	--anp-radius: var(--rr-radius);
	--anp-shadow-sm: var(--rr-shadow-sm);
	--anp-shadow-lg: var(--rr-shadow-lg);
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--rr-accent-soft);
	color: var(--rr-primary-deep);
}

:where(a, button, input, summary):focus-visible {
	outline: 2px solid var(--rr-accent);
	outline-offset: 3px;
}

/* Templates own their spacing: no gaps between header, main and footer. */
.wp-site-blocks > * + * {
	margin-block-start: 0 !important;
}

.rr-main > * {
	margin-block-start: 0 !important;
}

/* ==========================================================================
   Header
   ========================================================================== */

header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 100;
}

.rr-header {
	padding-inline: var(--rr-gutter) !important;
	border-bottom: 3px solid var(--rr-accent);
	background: rgba(20, 21, 23, 0.92);
	box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.4);
	color: #fff;
	-webkit-backdrop-filter: saturate(1.6) blur(14px);
	backdrop-filter: saturate(1.6) blur(14px);
}

/* Where the browser can follow the scroll position, the shadow fades in as the page moves under
   the bar, so it lifts off white pages without weighing down the very top. */
@supports (animation-timeline: scroll()) {
	.rr-header {
		animation: rr-header-lift linear both;
		animation-timeline: scroll(root);
		animation-range: 0 120px;
	}

	@keyframes rr-header-lift {
		from {
			box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0);
		}

		to {
			box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.45);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.rr-header {
		animation: none;
	}
}

.rr-header__bar {
	padding-block: 0.7rem;
}

/* Wordmark: a blue tile with "R", then RRWH and a small "projects" label (rrwh/brand). */
.rr-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	color: #fff !important;
	text-decoration: none !important;
}

.rr-brand__mark {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--rr-accent), var(--rr-primary));
	box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--rr-accent) 80%, transparent);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.04em;
}

.rr-brand__name {
	display: grid;
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

.rr-brand__name small {
	margin-top: 0.2rem;
	color: var(--rr-accent-soft);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.rr-brand:hover .rr-brand__mark {
	background: linear-gradient(135deg, var(--rr-accent-soft), var(--rr-accent));
}

.rr-header__logo img {
	display: block;
	height: auto;
}

.rr-header__actions {
	gap: 0.75rem !important;
}

.rr-nav .wp-block-navigation-item__content {
	padding: 0.45rem 0.85rem;
	border-radius: 999px;
	color: #e9edf3;
	transition: background 0.2s, color 0.2s;
}

.rr-nav .wp-block-navigation-item__content:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.rr-nav .current-menu-item > .wp-block-navigation-item__content,
.rr-nav .wp-block-navigation-item__content[aria-current="page"] {
	background: var(--rr-primary);
	color: #fff;
}

/* The phone menu overlay is white: links go back to ink. */
.rr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--rr-ink);
}

.rr-nav .wp-block-navigation__responsive-container-open {
	color: #fff;
}

.rr-nav .wp-block-navigation__container {
	gap: 0.25rem;
}

.rr-header__search .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

.rr-header__search .wp-block-search__button:hover {
	background: rgba(255, 255, 255, 0.16);
}

.rr-header__search .wp-block-search__input {
	border-radius: 999px;
}

/* ==========================================================================
   Heroes
   ========================================================================== */

.rr-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(2.5rem, 5vw, 4rem) var(--rr-gutter) clamp(2.25rem, 4vw, 3.25rem) !important;
	background:
		radial-gradient(55% 80% at 88% 8%, color-mix(in srgb, var(--rr-accent) 50%, transparent), transparent 60%),
		radial-gradient(45% 70% at 5% 100%, color-mix(in srgb, var(--rr-steel) 55%, transparent), transparent 60%),
		linear-gradient(135deg, var(--rr-primary-deep) 0%, var(--rr-primary) 58%, var(--rr-primary-lift) 100%);
	color: #fff;
}

.rr-hero::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
	content: "";
}

.rr-hero::after {
	position: absolute;
	z-index: -1;
	top: -20%;
	right: 8%;
	width: 28rem;
	height: 28rem;
	border-radius: 50%;
	background: var(--rr-accent);
	filter: blur(80px);
	opacity: 0.35;
	content: "";
}

.rr-hero.is-compact {
	padding-block: clamp(2.25rem, 4.5vw, 3.5rem) clamp(2rem, 4vw, 2.75rem) !important;
}

.rr-hero > *,
.rr-hero__inner > * {
	margin-block: 0;
}

.rr-hero :where(h1, h2, h3, p, a) {
	color: inherit;
}

.rr-eyebrow {
	display: inline-flex !important;
	align-items: center;
	gap: 0.55rem;
	width: fit-content;
	max-width: 100%;
	margin: 0 0 1.1rem !important;
	padding: 0.35rem 0.85rem 0.35rem 0.65rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	/* Half the one-line height: a pill on one line, a rounded box if it has to wrap. */
	border-radius: 1.1em;
	background: rgba(255, 255, 255, 0.07);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--rr-accent-soft) !important;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.rr-eyebrow::before {
	flex-shrink: 0;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: #34d399;
	box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.25);
	content: "";
}

.rr-hero__title {
	max-width: 18ch;
	margin: 0 !important;
	padding-bottom: 0.08em;
	background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--rr-accent) 30%, #fff) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	font-size: clamp(2.3rem, 4.2vw, 3.75rem) !important;
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1.02;
}

.rr-hero.is-compact .rr-hero__title,
.rr-hero.is-post .rr-hero__title {
	max-width: 22ch;
	font-size: clamp(2rem, 3.4vw, 2.9rem) !important;
}

.rr-hero__subtitle,
.rr-hero .wp-block-post-excerpt__excerpt,
.rr-hero .wp-block-term-description {
	max-width: 42rem;
	margin: 1rem 0 0 !important;
	color: rgba(226, 236, 248, 0.86) !important;
	font-size: clamp(1rem, 1.25vw, 1.15rem);
	line-height: 1.55;
}

.rr-hero .wp-block-post-excerpt {
	margin: 0 !important;
}

.rr-hero__count {
	margin-top: 1rem !important;
	color: var(--rr-accent-soft);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rr-hero__actions {
	gap: 0.75rem !important;
	margin-top: 1.6rem !important;
}

/* Buttons for dark sections */
.rr-btn-light .wp-block-button__link {
	background: #fff !important;
	box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--rr-accent) 80%, transparent);
	color: var(--rr-primary) !important;
	transition: transform 0.2s var(--rr-ease), box-shadow 0.2s;
}

.rr-btn-ghost .wp-block-button__link {
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	background: rgba(255, 255, 255, 0.06) !important;
	color: #fff !important;
	transition: transform 0.2s var(--rr-ease), background 0.2s;
}

.rr-btn-light .wp-block-button__link:hover,
.rr-btn-ghost .wp-block-button__link:hover {
	transform: translateY(-2px);
}

.rr-btn-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.14) !important;
}

/* Category pills (Categories block on the blog hero) */
.rr-hero .rr-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 2rem 0 0 !important;
	padding: 0;
	list-style: none;
}

.rr-pills li {
	margin: 0;
}

.rr-pills a {
	display: inline-flex;
	padding: 0.5rem 0.95rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	color: #e6eef9 !important;
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s;
}

.rr-pills a:hover,
.rr-pills .current-cat a {
	border-color: #fff;
	background: #fff;
	color: var(--rr-primary) !important;
}

/* Breadcrumbs */
.rr-crumbs {
	margin-bottom: 1.5rem !important;
	color: rgba(226, 236, 248, 0.6);
	font-size: 0.88rem;
}

.rr-crumbs a {
	color: rgba(226, 236, 248, 0.85) !important;
	text-decoration: none;
}

.rr-crumbs a:hover {
	color: #fff !important;
	text-decoration: underline;
}

/* Post hero details */
.rr-hero__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1rem !important;
}

.rr-hero__cats a {
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--rr-accent) 22%, transparent);
	color: var(--rr-accent-soft) !important;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

.rr-hero__cats .wp-block-post-terms__separator {
	display: none;
}

.rr-byline {
	gap: 0.4rem 1.1rem !important;
	margin-top: 2rem !important;
	color: rgba(226, 236, 248, 0.8);
	font-size: 0.92rem;
}

.rr-byline__avatar img {
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
}

.rr-byline__name {
	color: #fff;
	font-weight: 700;
}

.rr-byline .wp-block-post-date,
.rr-byline__time {
	color: rgba(226, 236, 248, 0.75) !important;
}

.rr-byline > * {
	margin: 0 !important;
}

.rr-byline__time::before {
	margin-right: 1.1rem;
	color: rgba(226, 236, 248, 0.45);
	content: "•";
}

/* Search in heroes */
.rr-hero__search {
	max-width: 36rem;
	margin-top: 2rem !important;
}

.rr-hero__search .wp-block-search__inside-wrapper {
	padding: 0.35rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.rr-hero__search .wp-block-search__input {
	border: 0;
	background: transparent;
	color: #fff;
}

.rr-hero__search .wp-block-search__input::placeholder {
	color: rgba(226, 236, 248, 0.6);
}

.rr-hero__search .wp-block-search__button {
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: var(--rr-primary);
	font-weight: 700;
}

/* ==========================================================================
   Home hero with orbiting app icons
   ========================================================================== */

.rr-hero.is-home {
	padding-block: clamp(2.5rem, 5vw, 4.25rem) !important;
}

.rr-home-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: center;
}

.rr-home-hero__text > * {
	margin-block: 0;
}

.rr-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2.5rem;
	margin: 2rem 0 0;
}

.rr-stats > div {
	display: flex;
	flex-direction: column-reverse;
}

.rr-stats dd {
	margin: 0;
	font-size: clamp(1.6rem, 2.4vw, 2.1rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.rr-stats dt {
	margin-top: 0.35rem;
	color: var(--rr-accent-soft);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.rr-orbit {
	position: relative;
	width: min(100%, 25rem);
	margin-inline: auto;
	aspect-ratio: 1;
}

.rr-orbit__ring {
	position: absolute;
	inset: 12%;
	border: 1px dashed color-mix(in srgb, var(--rr-accent-soft) 35%, transparent);
	border-radius: 50%;
}

.rr-orbit__ring.is-outer {
	inset: -2%;
	border-style: solid;
	border-color: rgba(255, 255, 255, 0.08);
}

.rr-orbit__mark {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 42%;
	height: auto;
	border-radius: 22%;
	box-shadow: 0 30px 80px -20px color-mix(in srgb, var(--rr-accent) 75%, transparent), 0 0 0 10px rgba(255, 255, 255, 0.05);
	transform: translate(-50%, -50%);
}

.rr-orbit__app {
	position: absolute;
	width: 17%;
	aspect-ratio: 1;
	overflow: hidden;
	border: 3px solid rgba(255, 255, 255, 0.85);
	border-radius: 24%;
	background: #fff;
	box-shadow: 0 16px 36px -12px rgba(2, 6, 23, 0.6);
	transition: transform 0.3s var(--rr-ease);
}

.rr-orbit__app img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rr-orbit__app:hover {
	transform: scale(1.08);
}

.rr-orbit__app.is-0 { top: 2%; left: 40%; }
.rr-orbit__app.is-1 { top: 22%; right: 0; }
.rr-orbit__app.is-2 { right: 6%; bottom: 14%; }
.rr-orbit__app.is-3 { bottom: 0; left: 36%; }
.rr-orbit__app.is-4 { bottom: 18%; left: 2%; }
.rr-orbit__app.is-5 { top: 18%; left: 4%; }

/* ==========================================================================
   Sections
   ========================================================================== */

.rr-section {
	padding: clamp(3rem, 5.5vw, 4.75rem) var(--rr-gutter) !important;
}

.rr-section.is-surface {
	background: var(--rr-surface);
}

.rr-section > * + * {
	margin-block-start: 2rem !important;
}

.rr-section__head {
	gap: 1rem !important;
}

.rr-section__head h2,
.rr-section__title {
	margin-block: 0 !important;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem) !important;
}

.rr-kicker {
	margin: 0 0 0.5rem !important;
	color: var(--rr-accent-text);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.rr-more-link {
	margin: 0 !important;
}

.rr-more-link a {
	color: var(--rr-primary);
	font-weight: 700;
	text-decoration: none;
}

.rr-more-link a:hover {
	color: var(--rr-accent);
}

/* Platform tiles */
.rr-platforms {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
}

.rr-platform {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
	background: #fff;
	box-shadow: var(--rr-shadow-sm);
	color: var(--rr-ink);
	text-decoration: none;
	transition: transform 0.35s var(--rr-ease), box-shadow 0.35s, border-color 0.35s;
}

.rr-platform:hover {
	border-color: color-mix(in srgb, var(--rr-accent) 35%, transparent);
	box-shadow: var(--rr-shadow-lg);
	transform: translateY(-4px);
}

.rr-platform__icon {
	display: grid;
	width: 3rem;
	height: 3rem;
	margin-bottom: 0.5rem;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--rr-primary), var(--rr-accent));
	box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--rr-accent) 70%, transparent);
	color: #fff;
	place-items: center;
}

.rr-platform__icon svg {
	width: 1.5rem;
	height: 1.5rem;
}

.rr-platform__name {
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.rr-platform__blurb {
	color: var(--rr-muted);
	font-size: 0.93rem;
	line-height: 1.5;
}

.rr-platform__count {
	margin-top: auto;
	padding-top: 0.75rem;
	color: var(--rr-primary);
	font-size: 0.85rem;
	font-weight: 700;
}

/* Call-to-action band */
.rr-section.is-cta {
	padding-top: 0 !important;
	background: var(--rr-surface);
}

.rr-cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	gap: 1.5rem !important;
	padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.5rem) !important;
	border-radius: 28px;
	box-shadow: var(--rr-shadow-lg);
	background:
		radial-gradient(50% 120% at 100% 0%, color-mix(in srgb, var(--rr-accent) 55%, transparent), transparent 60%),
		linear-gradient(120deg, var(--rr-primary) 0%, var(--rr-primary-hover) 100%);
	color: #fff;
}

.rr-cta h2 {
	margin: 0 0 0.5rem !important;
	color: #fff;
	font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
}

.rr-cta p {
	margin: 0;
	color: rgba(226, 236, 248, 0.85);
}

/* ==========================================================================
   Post cards (match the project cards)
   ========================================================================== */

.rr-posts {
	gap: 1.75rem !important;
}

.rr-posts > .wp-block-post {
	display: flex;
	margin: 0 !important;
}

.rr-card {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	margin: 0 !important;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
	background: #fff;
	box-shadow: var(--rr-shadow-sm);
	transition: transform 0.35s var(--rr-ease), box-shadow 0.35s var(--rr-ease), border-color 0.35s;
}

.rr-card:hover,
.rr-card:focus-within {
	border-color: color-mix(in srgb, var(--rr-accent) 35%, transparent);
	box-shadow: var(--rr-shadow-lg);
	transform: translateY(-5px);
}

.rr-card:focus-within {
	outline: 3px solid color-mix(in srgb, var(--rr-accent) 55%, transparent);
	outline-offset: 2px;
}

.rr-card > * {
	margin: 0 !important;
}

.rr-card__media {
	overflow: hidden;
	max-width: 100%;
	margin: 0 !important;
}

.rr-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--rr-ease);
}

.rr-card:hover .rr-card__media img:not(.rr-fallback__mark) {
	transform: scale(1.04);
}

.rr-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.2rem 1.35rem 1.15rem !important;
}

.rr-card__body > * {
	margin: 0 !important;
}

.rr-card__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.rr-card__cats a,
.rr-card__label {
	position: relative;
	z-index: 2;
	display: inline-block;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--rr-accent) 12%, #fff);
	color: var(--rr-accent-text) !important;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.5;
	text-decoration: none;
	text-transform: uppercase;
}

.rr-card__cats a:hover {
	background: color-mix(in srgb, var(--rr-accent) 20%, #fff);
}

.rr-card__cats .wp-block-post-terms__separator {
	display: none;
}

.rr-card__title {
	font-size: 1.15rem !important;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

.rr-card__title a::after {
	position: absolute;
	z-index: 1;
	inset: 0;
	content: "";
}

.rr-card__title a:focus-visible {
	outline: none;
}

.rr-card__excerpt .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	color: var(--rr-muted);
	font-size: 0.97rem;
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.rr-card__meta {
	gap: 0.3rem 0.6rem !important;
	line-height: 1.4;
	margin-top: auto !important;
	padding-top: 0.9rem;
	border-top: 1px solid var(--rr-line);
	color: var(--rr-muted);
	font-size: 0.85rem;
}

.rr-card__meta > * {
	margin: 0 !important;
	font-size: 0.85rem !important;
	line-height: 1.4;
}

.rr-card__meta .wp-block-post-time-to-read::before {
	margin-right: 0.6rem;
	color: #94a3b8;
	content: "•";
}

/* Featured first post on the blog's first page */
@media (min-width: 900px) {
	.is-first-page .is-featured-first .rr-posts > .wp-block-post:first-child {
		grid-column: 1 / -1;
	}

	.is-first-page .is-featured-first .rr-posts > .wp-block-post:first-child .rr-card {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	}

	.is-first-page .is-featured-first .rr-posts > .wp-block-post:first-child .rr-card__media {
		/* The column sets the width and the row sets the height. Keeping the card's 16/9
		   ratio here would turn min-height into a width (22rem × 16/9), which overflows the
		   column and covers the text as soon as the reader's font size grows. */
		aspect-ratio: auto !important;
		width: 100%;
		height: 100%;
		/* Height tracks the viewport, with a floor, rather than the font size. */
		min-height: max(16rem, min(25rem, 28vw));
	}

	.is-first-page .is-featured-first .rr-posts > .wp-block-post:first-child .rr-card__body {
		justify-content: center;
		padding: 2.5rem !important;
	}

	.is-first-page .is-featured-first .rr-posts > .wp-block-post:first-child .rr-card__title {
		font-size: clamp(1.5rem, 2.2vw, 2rem) !important;
		letter-spacing: -0.03em;
	}

	.is-first-page .is-featured-first .rr-posts > .wp-block-post:first-child .rr-card__meta {
		margin-top: 0.5rem !important;
	}
}

/* Branded placeholder for posts without a featured image */
.rr-fallback {
	position: relative;
	overflow: hidden;
	margin: 0;
	background: linear-gradient(135deg, var(--rr-from, var(--rr-primary)), var(--rr-to, var(--rr-accent)));
	isolation: isolate;
	container-type: inline-size;
}

.rr-fallback > a {
	display: block;
	width: 100%;
	height: 100%;
}

.rr-fallback::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1.4px);
	background-size: 18px 18px;
	-webkit-mask-image: linear-gradient(160deg, #000 10%, transparent 70%);
	mask-image: linear-gradient(160deg, #000 10%, transparent 70%);
	content: "";
}

.rr-fallback__word {
	position: absolute;
	right: 0;
	bottom: -0.14em;
	left: 0.3em;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 95%);
	mask-image: linear-gradient(90deg, #000 55%, transparent 95%);
	color: rgba(255, 255, 255, 0.12);
	font-size: 17cqw;
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 1;
	white-space: nowrap;
}

.rr-fallback__mark {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22% !important;
	height: auto !important;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 22%;
	box-shadow: 0 20px 40px -12px rgba(2, 6, 23, 0.45);
	transform: translate(-50%, -50%);
}

/* ==========================================================================
   Articles and pages
   ========================================================================== */

.rr-article {
	padding: 0 var(--rr-gutter) clamp(2rem, 4vw, 3.5rem) !important;
}

.rr-article > * + * {
	margin-block-start: 2.5rem !important;
}

.rr-article__media {
	position: relative;
	z-index: 2;
	margin-top: clamp(2rem, 4vw, 3rem) !important;
	overflow: hidden;
	border-radius: 24px;
	box-shadow: var(--rr-shadow-lg);
}

.rr-article__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rr-article > .rr-prose:first-child,
.rr-article > .rr-fallback + .rr-prose {
	margin-top: clamp(2.5rem, 5vw, 4rem) !important;
}

.rr-article > .rr-prose {
	margin-top: clamp(2.5rem, 5vw, 3.5rem) !important;
}

/* Single posts with no image: no placeholder under the hero. */
.rr-article > .rr-fallback.rr-article__media {
	display: none;
}

.rr-prose {
	font-size: 1.0625rem;
	line-height: 1.75;
}

.rr-prose > * + * {
	margin-block-start: 1.35em;
}

.rr-prose :where(h2, h3, h4) {
	margin-block-start: 2em;
	scroll-margin-top: 6rem;
}

.rr-prose h2 {
	font-size: clamp(1.6rem, 2.6vw, 2rem);
}

.rr-prose h3 {
	font-size: clamp(1.3rem, 2vw, 1.5rem);
}

.rr-prose a {
	color: var(--rr-primary);
	text-decoration-color: color-mix(in srgb, var(--rr-accent) 60%, transparent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.rr-prose a:hover {
	color: var(--rr-accent);
}

.rr-prose :where(ul, ol) {
	padding-left: 1.4em;
}

.rr-prose li + li {
	margin-top: 0.4em;
}

.rr-prose li::marker {
	color: var(--rr-accent);
}

.rr-prose img,
.rr-prose .wp-block-image img {
	border-radius: 16px;
}

.rr-prose .wp-block-image figcaption {
	text-align: center;
}

.rr-prose :not(pre) > code {
	padding: 0.15em 0.4em;
	border-radius: 6px;
	background: #eef2f8;
	color: var(--rr-primary);
	font-size: 0.9em;
}

.rr-prose pre,
.rr-prose pre code {
	white-space: pre !important;
	word-break: normal;
	overflow-wrap: normal;
}

.rr-prose pre {
	overflow-x: auto;
	font-size: 0.92rem;
	line-height: 1.6;
}

.rr-prose blockquote {
	margin-inline: 0;
	color: var(--rr-ink);
}

.rr-prose hr {
	margin-block: 3rem;
}

/* Tags */
.rr-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	align-items: center;
	color: var(--rr-muted);
	font-size: 0.85rem !important;
}

.rr-tags a {
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: #eef2f8;
	color: #334155 !important;
	font-weight: 600;
	text-decoration: none;
}

.rr-tags a:hover {
	background: #dfe7f3;
}

.rr-tags .wp-block-post-terms__separator {
	display: none;
}

/* Author box (hidden until the author has a biography in their profile) */
.rr-author:not(:has(.wp-block-post-author-biography)) {
	display: none;
}

.rr-author {
	gap: 1.25rem !important;
	padding: 1.5rem;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
	background: var(--rr-surface);
}

.rr-author img {
	border-radius: 50%;
}

.rr-author__label {
	margin: 0 !important;
	color: var(--rr-muted);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.rr-author__name {
	margin: 0.15rem 0 0 !important;
	font-size: 1.2rem;
	font-weight: 800;
}

.rr-author__bio {
	margin-top: 0.5rem !important;
	color: var(--rr-muted);
	font-size: 0.97rem;
}

/* Previous / next */
.rr-post-nav {
	gap: 1rem !important;
	align-items: stretch !important;
}

.rr-post-nav > div {
	display: flex;
	flex: 1 1 18rem;
	flex-direction: column;
	justify-content: center;
	padding: 1.1rem 1.3rem;
	border: 1px solid var(--rr-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--rr-shadow-sm);
	transition: border-color 0.2s, transform 0.2s var(--rr-ease);
}

.rr-post-nav > div:hover {
	border-color: color-mix(in srgb, var(--rr-accent) 40%, transparent);
	transform: translateY(-2px);
}

.rr-post-nav > div:empty {
	visibility: hidden;
}

.rr-post-nav .post-navigation-link-next {
	text-align: right;
}

.rr-post-nav a {
	color: var(--rr-ink);
	font-weight: 700;
	text-decoration: none;
}

.rr-post-nav__prev .post-navigation-link__label::before {
	content: "← ";
}

.rr-post-nav__next .post-navigation-link__label::after {
	content: " →";
}

.rr-post-nav .post-navigation-link__label {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--rr-muted);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Comments */
.rr-article .wp-block-comments {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
	background: #fff;
}

.rr-article .wp-block-comments :where(input[type="text"], input[type="email"], input[type="url"], textarea) {
	padding: 0.75rem 1rem;
	border: 1px solid #d5dce8;
	border-radius: 12px;
	font: inherit;
}

.rr-article .wp-block-comments :where(input, textarea):focus {
	border-color: var(--rr-accent);
	outline: 3px solid color-mix(in srgb, var(--rr-accent) 20%, transparent);
}

.rr-comments > :first-child {
	margin-top: 0 !important;
}

.rr-comments .wp-block-comments-title {
	font-size: 1.4rem;
}

.rr-comments .comment-reply-title {
	margin-top: 0;
	font-size: 1.4rem;
}

.rr-comment {
	gap: 1rem !important;
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--rr-line);
}

.rr-comment img {
	border-radius: 50%;
}

.rr-comment__meta {
	gap: 0.5rem 0.75rem !important;
	font-size: 0.9rem;
}

.rr-comment__meta .wp-block-comment-author-name {
	font-weight: 700;
}

.rr-comment__meta .wp-block-comment-date {
	color: var(--rr-muted);
}

.rr-comments input[type="checkbox"] {
	accent-color: var(--rr-accent);
	width: 1.1rem;
	height: 1.1rem;
}

.rr-comments .comment-form-cookies-consent {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	color: var(--rr-muted);
	font-size: 0.9rem;
}

/* Related projects appended under posts by the Projects plugin */
.rr-prose .anp-more {
	margin-top: 3.5rem !important;
}

/* ==========================================================================
   Pagination and empty states
   ========================================================================== */

.rr-pagination {
	gap: 0.5rem !important;
	margin-top: 3rem !important;
}

.rr-pagination :where(a, .page-numbers) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	white-space: nowrap;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.85rem;
	border: 1px solid var(--rr-line);
	border-radius: 999px;
	background: #fff;
	color: var(--rr-ink);
	font-weight: 600;
	text-decoration: none;
	place-items: center;
}

.rr-pagination .page-numbers.current {
	border-color: var(--rr-primary);
	background: var(--rr-primary);
	color: #fff;
}

.rr-empty {
	padding: 3rem 1rem;
	color: var(--rr-muted);
	font-size: 1.1rem;
	text-align: center;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.rr-footer {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(3.5rem, 7vw, 5.5rem) var(--rr-gutter) 2rem !important;
	background:
		radial-gradient(40% 70% at 100% 0%, color-mix(in srgb, var(--rr-accent) 28%, transparent), transparent 60%),
		radial-gradient(40% 70% at 0% 100%, color-mix(in srgb, var(--rr-steel) 30%, transparent), transparent 60%),
		var(--rr-primary-deep);
	color: rgba(226, 236, 248, 0.8);
	font-size: 0.95rem;
}

.rr-footer::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
	mask-image: linear-gradient(180deg, #000, transparent 80%);
	content: "";
}

.rr-footer a {
	color: #e6eef9;
	text-decoration: none;
}

.rr-footer a:hover {
	color: var(--rr-accent-soft);
}

.rr-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 0.8fr)) minmax(0, 1.3fr);
	gap: 2.5rem;
}

.rr-footer__top > * {
	margin: 0 !important;
}

.rr-footer__logo {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

.rr-footer__logo img {
	border-radius: 12px;
	box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--rr-accent) 70%, transparent);
}

.rr-footer__logo span {
	color: #fff;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.rr-footer__logo small {
	color: var(--rr-accent-soft);
	font-size: 0.85rem;
	font-weight: 600;
}

.rr-footer__tagline {
	max-width: 22rem;
	margin: 1rem 0 1.5rem !important;
	line-height: 1.6;
}

.rr-footer__heading {
	margin: 0 0 1rem !important;
	color: #fff !important;
	font-size: 0.8rem !important;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.rr-footer__links {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rr-footer__posts {
	display: grid;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rr-footer__posts li {
	margin: 0;
}

.rr-footer__posts a {
	display: block;
	font-weight: 600;
	line-height: 1.4;
}

.rr-footer__posts time {
	color: rgba(226, 236, 248, 0.55);
	font-size: 0.8rem;
}

.rr-footer__bottom {
	margin-top: 3.5rem !important;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(226, 236, 248, 0.55);
	font-size: 0.85rem;
}

.rr-footer__bottom p {
	margin: 0;
}

/* ==========================================================================
   Motion
   ========================================================================== */

@keyframes rr-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes rr-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}
}

@keyframes rr-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.rr-hero__inner > *,
	.rr-home-hero__text > *,
	.rr-hero.is-post > *,
	.rr-hero.is-compact > *,
	.rr-hero.is-404 > * {
		animation: rr-rise 0.8s var(--rr-ease) both;
	}

	.rr-hero__inner > :nth-child(2),
	.rr-home-hero__text > :nth-child(2),
	.rr-hero > :nth-child(2) {
		animation-delay: 0.06s;
	}

	.rr-hero__inner > :nth-child(3),
	.rr-home-hero__text > :nth-child(3),
	.rr-hero > :nth-child(3) {
		animation-delay: 0.12s;
	}

	.rr-hero__inner > :nth-child(n+4),
	.rr-home-hero__text > :nth-child(n+4),
	.rr-hero > :nth-child(n+4) {
		animation-delay: 0.18s;
	}

	.rr-posts > .wp-block-post {
		animation: rr-rise 0.7s var(--rr-ease) both;
	}

	.rr-posts > .wp-block-post:nth-child(2) {
		animation-delay: 0.06s;
	}

	.rr-posts > .wp-block-post:nth-child(n+3) {
		animation-delay: 0.12s;
	}

	.rr-orbit__app {
		animation: rr-float 6s ease-in-out infinite;
	}

	.rr-orbit__app.is-1 { animation-delay: -1s; }
	.rr-orbit__app.is-2 { animation-delay: -2s; }
	.rr-orbit__app.is-3 { animation-delay: -3s; }
	.rr-orbit__app.is-4 { animation-delay: -4s; }
	.rr-orbit__app.is-5 { animation-delay: -5s; }

	.rr-orbit__ring {
		animation: rr-spin 60s linear infinite;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
	.rr-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	/* minmax(0, …): a long word or the eyebrow must not widen the column past the screen. */
	.rr-home-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.rr-orbit {
		width: min(100%, 22rem);
	}
}

@media (max-width: 600px) {
	.rr-header__logo img {
		width: 150px !important;
	}

	.rr-footer__top {
		grid-template-columns: 1fr;
	}

	.rr-stats {
		gap: 0.75rem 1.75rem;
	}

	.rr-post-nav .post-navigation-link-next {
		text-align: left;
	}
}

/* ==========================================================================
   Review fixes: layout glue, counts, blog filters
   ========================================================================== */

/* Footer always reaches the bottom on short pages. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main,
.wp-site-blocks > .rr-main {
	flex: 1 0 auto;
}

.rr-results-count {
	margin: 0 0 1.25rem !important;
	color: var(--rr-muted);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* "Uncategorized" is not a real topic. */
.rr-pills .cat-item-1 {
	display: none;
}

.rr-home-hero .rr-hero__title {
	max-width: 17ch;
}

@media (max-width: 900px) {
	.rr-platforms {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.rr-platforms {
		grid-template-columns: 1fr;
	}

	.rr-orbit {
		width: min(100%, 15rem);
		margin-top: 0.5rem;
	}

	/* No nowrap: with a larger phone text size the line is wider than the screen. */
	.rr-eyebrow {
		font-size: 0.68rem;
		letter-spacing: 0.06em;
	}

	.rr-crumbs li:last-child {
		display: none;
	}

	.rr-byline__time::before {
		display: none;
	}
}

/* ==========================================================================
   Landing pages (Work with us)
   ========================================================================== */

.rr-landing > * {
	margin-block: 0 !important;
}

.rr-landing > .alignfull {
	max-width: none;
}

.rr-work-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: center;
}

.rr-work-hero > * {
	margin: 0 !important;
}

.rr-mosaic {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.75rem 1rem;
	max-width: 22rem;
	margin-inline: auto !important;
	transform: rotate(-4deg);
}

.rr-mosaic figure {
	margin: 0 !important;
	overflow: hidden;
	border: 3px solid rgba(255, 255, 255, 0.85);
	border-radius: 24%;
	background: #fff;
	box-shadow: 0 16px 36px -12px rgba(2, 6, 23, 0.6);
	aspect-ratio: 1;
}

.rr-mosaic figure:nth-child(3n+2) {
	transform: translateY(1.25rem);
}

.rr-mosaic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Feature cards with CSS icons */
.rr-features {
	gap: 1.25rem !important;
}

.rr-feature {
	margin: 0 !important;
	padding: 1.6rem;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
	background: #fff;
	box-shadow: var(--rr-shadow-sm);
}

.rr-feature > * {
	margin-block: 0 !important;
}

.rr-feature > * + * {
	margin-block-start: 0.6rem !important;
}

.rr-feature::before {
	display: block;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1.1rem;
	border-radius: 14px;
	background:
		var(--rr-icon) center / 1.5rem no-repeat,
		linear-gradient(135deg, var(--rr-primary), var(--rr-accent));
	box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--rr-accent) 70%, transparent);
	content: "";
}

.rr-feature h3 {
	font-size: 1.2rem !important;
}

.rr-feature p {
	color: var(--rr-muted);
	font-size: 0.97rem;
	line-height: 1.6;
}

.rr-feature .rr-feature__eg {
	color: var(--rr-accent-text);
	font-size: 0.85rem;
	font-weight: 700;
}

.rr-feature.is-web { --rr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='16' rx='2.5'/%3E%3Cpath d='M2.5 9h19M6 6.5h.01M9 6.5h.01'/%3E%3C/svg%3E"); }
.rr-feature.is-mobile { --rr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E"); }
.rr-feature.is-plugin { --rr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v5M15 2v5M6 7h12v4a6 6 0 0 1-12 0V7zM12 17v5'/%3E%3C/svg%3E"); }
.rr-feature.is-key { --rr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.rr-feature.is-shield { --rr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.rr-feature.is-bolt { --rr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
.rr-feature.is-flag { --rr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E"); }
.rr-feature.is-chat { --rr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); }

/* Process steps */
.rr-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	max-width: var(--wp--style--global--wide-size);
	margin: 2rem auto 0 !important;
	padding: 0;
	list-style: none;
	counter-reset: rr-step;
}

.rr-steps > li {
	position: relative;
	margin: 0;
	padding: 1.5rem 1.4rem 1.4rem;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
	background: #fff;
	color: var(--rr-muted);
	font-size: 0.95rem;
	line-height: 1.6;
	counter-increment: rr-step;
}

.rr-steps > li::before {
	display: block;
	margin-bottom: 0.9rem;
	background: linear-gradient(135deg, var(--rr-primary), var(--rr-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 2.2rem;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	content: counter(rr-step, decimal-leading-zero);
}

.rr-steps > li strong {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--rr-ink);
	font-size: 1.1rem;
}

/* FAQ */
.rr-faq .wp-block-details {
	margin: 0 !important;
	padding: 1.1rem 1.35rem;
	border: 1px solid var(--rr-line);
	border-radius: 16px;
	background: #fff;
}

.rr-faq .wp-block-details + .wp-block-details {
	margin-top: 0.75rem !important;
}

.rr-faq summary {
	position: relative;
	padding-right: 2rem;
	color: var(--rr-ink);
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

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

.rr-faq summary::after {
	position: absolute;
	top: 50%;
	right: 0;
	color: var(--rr-accent-text);
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1;
	transform: translateY(-50%);
	transition: transform 0.2s;
	content: "+";
}

.rr-faq details[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}

.rr-faq .wp-block-details p {
	margin: 0.75rem 0 0;
	color: var(--rr-muted);
}

/* Enquiry section */
.rr-enquiry-section .rr-enquiry-cols {
	gap: clamp(2rem, 4vw, 4rem) !important;
}

.rr-next-steps {
	margin: 1.5rem 0 0 !important;
	padding: 0;
	list-style: none;
	counter-reset: rr-next;
}

.rr-next-steps li {
	position: relative;
	margin: 0 0 1rem;
	padding-left: 2.75rem;
	color: var(--rr-muted);
	counter-increment: rr-next;
}

.rr-next-steps li::before {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--rr-accent) 12%, #fff);
	color: var(--rr-accent-text);
	font-size: 0.85rem;
	font-weight: 800;
	place-items: center;
	content: counter(rr-next);
}

.rr-next-steps li strong {
	display: block;
	color: var(--rr-ink);
}

/* Header call to action */
.rr-nav .rr-nav-cta > .wp-block-navigation-item__content {
	margin-left: 0.25rem;
	background: var(--rr-primary);
	color: #fff;
}

.rr-nav .rr-nav-cta > .wp-block-navigation-item__content:hover,
.rr-nav .rr-nav-cta.current-menu-item > .wp-block-navigation-item__content {
	background: var(--rr-primary-hover);
	color: #fff;
}

@media (max-width: 1000px) {
	.rr-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.rr-work-hero {
		grid-template-columns: 1fr;
	}

	.rr-mosaic {
		max-width: 16rem;
	}
}

@media (max-width: 600px) {
	.rr-steps {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Second review fixes
   ========================================================================== */

.rr-header__search .wp-block-search__button svg {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
}

/* Main column fills the page so short pages end on the footer, not a white band. */
.rr-main {
	display: flex;
	flex-direction: column;
}

.rr-main > :last-child {
	flex-grow: 1;
}

/* Feature grids: always fill the row. */
.rr-features {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)) !important;
}

.rr-feature {
	display: flex;
	flex-direction: column;
}

.rr-feature .rr-feature__eg {
	margin-top: auto !important;
	padding-top: 0.6rem;
}

/* FAQ: one left edge. */
.rr-faq > * {
	max-width: 820px;
	margin-inline: 0 !important;
}

.rr-faq h2 {
	margin: 0 0 1.5rem !important;
}

.rr-faq {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto !important;
}

/* Enquiry: keep the intro beside the form while scrolling. */
@media (min-width: 782px) {
	.rr-enquiry-cols > .wp-block-column:first-child {
		position: sticky;
		top: 6rem;
		align-self: flex-start;
	}
}

/* Comments: even padding. */
.rr-comments > :empty {
	display: none;
}

.rr-comments .comment-respond {
	margin: 0;
}

.rr-comments .form-submit {
	margin-bottom: 0;
}

.rr-comments .comment-reply-title {
	margin-top: 0 !important;
}

/* Single post hero lines up with the reading column; images break out wider. */
.rr-hero.is-post .rr-hero__inner {
	max-width: 720px;
	margin-inline: auto !important;
}

@media (max-width: 600px) {
	.rr-crumbs li:nth-last-child(2)::after {
		content: none;
	}

	.rr-orbit {
		width: min(100%, 11rem);
	}
}

.rr-comments .wp-block-post-comments-form {
	padding-block: 0 !important;
}

.rr-pagination .wp-block-query-pagination-numbers {
	display: inline-flex;
	gap: 0.5rem;
}

.rr-project-cover > a {
	display: block;
}

.rr-project-cover .anp-cover {
	aspect-ratio: 16 / 9;
}

/* ------------------------------------------------------------------
   Plans: a product's pricing cards (Site Replica Pro sales page).
   One card per plan, each linking to its own checkout. .is-featured
   marks the one most people should buy.
   ------------------------------------------------------------------ */
.rr-plans {
	gap: 1.25rem !important;
	align-items: stretch;
}

.rr-plan {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	padding: 1.8rem 1.6rem;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
	background: #fff;
	box-shadow: var(--rr-shadow-sm);
}

.rr-plan > * {
	margin-block: 0 !important;
}

.rr-plan > * + * {
	margin-block-start: 0.7rem !important;
}

.rr-plan.is-featured {
	border: 2px solid var(--rr-accent);
	box-shadow: var(--rr-shadow-lg);
}

.rr-plan__badge {
	align-self: flex-start;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: var(--rr-accent-soft);
	color: var(--rr-primary-deep);
	font-size: 0.8rem;
	font-weight: 600;
}

.rr-plan__price {
	color: var(--rr-primary);
	font-size: clamp(2.2rem, 4vw, 2.8rem);
	font-weight: 700;
	line-height: 1.1;
}

.rr-plan__price small {
	color: var(--rr-muted);
	font-size: 1rem;
	font-weight: 500;
}

.rr-plan__note {
	color: var(--rr-muted);
	font-size: 0.95rem;
}

.rr-plan .wp-block-buttons {
	margin-block-start: auto !important;
	padding-top: 1rem;
}

.rr-plan .wp-block-button,
.rr-plan .wp-block-button__link {
	width: 100%;
	text-align: center;
}

/* Buttons in a plan card: filled for the featured plan, outlined for the others, whatever the
   global button style (whose text colour can match the card's navy). */
.rr-plan .wp-block-button__link {
	border: 2px solid var(--rr-primary);
	border-radius: 12px;
	background: #fff;
	color: var(--rr-primary);
	font-weight: 600;
}

.rr-plan.is-featured .wp-block-button__link {
	background: var(--rr-primary);
	color: #fff;
}

.rr-plan .wp-block-button__link:hover,
.rr-plan .wp-block-button__link:focus-visible {
	background: var(--rr-accent);
	border-color: var(--rr-accent);
	color: var(--rr-primary-deep);
}

.rr-plans-foot {
	color: var(--rr-muted);
	font-size: 0.95rem;
	text-align: center;
}

/* Free vs Pro: a plain table with ticks. */
.rr-compare table {
	border-collapse: collapse;
	background: #fff;
	border-radius: var(--rr-radius);
	overflow: hidden;
	box-shadow: var(--rr-shadow-sm);
}

.rr-compare th,
.rr-compare td {
	padding: 0.85rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--rr-line);
	text-align: left;
}

.rr-compare th:not(:first-child),
.rr-compare td:not(:first-child) {
	width: 7rem;
	text-align: center;
}

.rr-compare thead th {
	background: var(--rr-surface);
	color: var(--rr-primary);
}

/* Three across on wide screens (six features make two even rows), one on phones. */
.rr-plans,
.rr-features.is-three {
	grid-template-columns: 1fr !important;
}

@media (min-width: 900px) {
	.rr-plans,
	.rr-features.is-three {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {
	.rr-compare th:not(:first-child),
	.rr-compare td:not(:first-child) {
		width: 4.5rem;
		padding-inline: 0.4rem;
	}
}

/* Comparison with other products: many columns, so it scrolls sideways on narrow screens, and our
   own row stands out. */
.rr-rivals {
	overflow-x: auto;
}

.rr-rivals table {
	min-width: 960px;
	font-size: 0.92rem;
}

.rr-rivals th:not(:first-child),
.rr-rivals td:not(:first-child) {
	width: auto;
}

.rr-rivals tr.is-us td {
	background: color-mix(in srgb, var(--rr-accent) 10%, transparent);
	color: var(--rr-primary-deep);
	font-weight: 600;
}

.rr-rivals__intro {
	max-width: 820px;
	margin-bottom: 1.5rem !important;
}

.rr-rivals figcaption {
	color: var(--rr-muted);
	font-size: 0.85rem;
}

/* Launch offer: the line in the hero, and list prices struck through on plan cards. */
.rr-launch {
	display: inline-block;
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	background: var(--rr-accent-soft);
	color: var(--rr-primary-deep);
	font-size: 0.98rem;
}

.rr-plan__price s {
	margin-right: 0.35rem;
	color: var(--rr-muted);
	font-size: 0.55em;
	font-weight: 500;
}

/* Comparison with one competitor at a time: a "Compare with" picker (assets/js/versus.js) above
   one table per competitor, features down the side and at most four editions across. Without
   the script every table shows under its own h3. */
.rr-versus__picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1rem;
}

.rr-versus__picker label {
	color: var(--rr-primary);
	font-weight: 600;
}

.rr-versus__picker select {
	min-width: 16rem;
	padding: 0.55rem 2rem 0.55rem 0.8rem;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
	background-color: #fff;
	color: var(--rr-primary-deep);
	font: inherit;
}

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

.rr-versus figure[hidden],
.rr-versus .rr-versus__label[hidden] {
	display: none;
}

/* The comparison sizes itself to its own column (project pages give it ~770px; sales pages more),
   so the narrow layout below is a container query, not a media query. */
.rr-versus {
	container: versus / inline-size;
}

.rr-versus .rr-compare {
	overflow-x: auto;
}

.rr-versus .rr-compare table {
	font-size: 0.92rem;
}

.rr-versus .rr-compare th,
.rr-versus .rr-compare td {
	padding: 0.65rem 0.75rem;
	vertical-align: top;
}

.rr-versus .rr-compare th:not(:first-child),
.rr-versus .rr-compare td:not(:first-child) {
	width: auto;
	text-align: left;
}

.rr-versus .rr-compare th:first-child,
.rr-versus .rr-compare td:first-child {
	width: 22%;
	color: var(--rr-primary);
	font-weight: 600;
}

/* A cell is a short value, with any qualifier on a quieter line under it. */
.rr-versus .rr-compare td small {
	display: block;
	margin-top: 0.2rem;
	color: var(--rr-muted);
	font-size: 0.8rem;
	line-height: 1.35;
}

/* Our plugin is always the second column, and the third too when it has a Pro edition (.has-pro). */
.rr-versus .rr-compare tr > :nth-child(2),
.rr-versus.has-pro .rr-compare tr > :nth-child(3) {
	background: color-mix(in srgb, var(--rr-accent) 10%, transparent);
	color: var(--rr-primary-deep);
}

/* Narrow: each feature becomes a card, one line per edition, labelled from the header (versus.js
   copies it into data-label). Nothing scrolls sideways. */
@container versus (max-width: 600px) {
	.rr-versus .rr-compare {
		overflow: visible;
	}

	.rr-versus .rr-compare table,
	.rr-versus .rr-compare tbody,
	.rr-versus .rr-compare tr,
	.rr-versus .rr-compare td {
		display: block;
		width: auto !important;
	}

	.rr-versus .rr-compare table {
		background: none;
		box-shadow: none;
		border-radius: 0;
		overflow: visible;
	}

	.rr-versus .rr-compare thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.rr-versus .rr-compare tr {
		margin-bottom: 0.75rem;
		border: 1px solid var(--rr-line);
		border-radius: var(--rr-radius);
		background: #fff;
		overflow: hidden;
	}

	.rr-versus .rr-compare td {
		padding: 0.45rem 0.75rem;
		border-bottom: 0;
	}

	.rr-versus .rr-compare td:first-child {
		padding-block: 0.6rem;
		border-bottom: 1px solid var(--rr-line);
		background: var(--rr-surface);
		font-weight: 700;
	}

	.rr-versus .rr-compare td:last-child {
		padding-bottom: 0.65rem;
	}

	/* The edition's name on the left, its value (with any detail line) on the right; the row is
	   as tall as whichever wraps more. versus.js wraps each value in .rr-versus__value. */
	.rr-versus .rr-compare td[data-label]:not(:first-child) {
		display: grid;
		grid-template-columns: 40% 1fr;
		gap: 0.75rem;
	}

	.rr-versus .rr-compare td[data-label]:not(:first-child)::before {
		content: attr(data-label);
		color: var(--rr-primary);
		font-weight: 600;
	}
}

/* "Need another plugin supported?" under a comparison: a request link, set apart from the note. */
.rr-versus__ask {
	margin-top: 1rem !important;
	padding: 0.85rem 1rem;
	border-left: 4px solid var(--rr-accent);
	border-radius: var(--rr-radius);
	background: var(--rr-accent-soft);
	color: var(--rr-primary-deep);
}

.rr-versus__ask a {
	color: var(--rr-primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rr-versus__note {
	color: var(--rr-muted);
	font-size: 0.85rem;
}

/* Launch countdown ([an_launch_countdown], accessnow-projects): one row of four boxes that shrink
   with the space, numbers scaled to the row (container units), so nothing wraps on a phone. Adapted
   from sck-blocks' countdown. Works on the dark hero and on light sections (colours from currentColor). */
.rr-countdown {
	display: grid;
	gap: 0.6rem;
	margin-block: 1.25rem 0.5rem !important;
}

.rr-countdown[hidden] {
	display: none;
}

.rr-countdown__label {
	margin: 0 !important;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.rr-countdown__timer {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.3rem, 2cqi, 0.5rem);
	width: 100%;
	max-width: 24rem;
	container-type: inline-size;
}

.rr-countdown__unit {
	display: grid;
	min-width: 0;
	padding: 0.55rem 0.25rem 0.45rem;
	border-radius: 14px;
	background: rgba(127, 127, 127, 0.12);
	box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.35);
	text-align: center;
}

.rr-countdown__unit b {
	font-size: clamp(1.25rem, 9cqi, 2.1rem);
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.rr-countdown__unit span {
	font-size: clamp(0.625rem, 3cqi, 0.75rem);
	font-weight: 600;
	opacity: 0.8;
}

.rr-countdown__date {
	margin: 0 !important;
	font-size: 0.875rem;
	opacity: 0.85;
}

.rr-hero .rr-countdown__unit {
	background: rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
	color: #fff;
}

.rr-plans + .rr-countdown,
.rr-section__head + .rr-countdown {
	justify-items: center;
	text-align: center;
	margin-inline: auto;
}

/* ==========================================================================
   RRWH: the plugin's project hero matches the theme's heroes
   ========================================================================== */

.anp-hero {
	border-bottom: 4px solid var(--rr-accent); /* the bip draft's accent rule under the hero */
	background:
		radial-gradient(55% 80% at 88% 8%, color-mix(in srgb, var(--rr-accent) 45%, transparent), transparent 60%),
		radial-gradient(45% 70% at 5% 100%, color-mix(in srgb, var(--rr-steel) 50%, transparent), transparent 60%),
		linear-gradient(135deg, var(--rr-primary-deep) 0%, #1b1c1d 45%, var(--rr-primary-lift) 100%);
}

.rr-hero {
	border-bottom: 4px solid var(--rr-accent);
	background:
		radial-gradient(55% 80% at 88% 8%, color-mix(in srgb, var(--rr-accent) 45%, transparent), transparent 60%),
		radial-gradient(45% 70% at 5% 100%, color-mix(in srgb, var(--rr-steel) 50%, transparent), transparent 60%),
		linear-gradient(135deg, var(--rr-primary-deep) 0%, #1b1c1d 45%, var(--rr-primary-lift) 100%);
}

.anp-hero__bg span:nth-child(1) {
	background: var(--rr-accent);
}

.anp-hero__bg span:nth-child(2) {
	background: var(--rr-steel);
}

.anp-hero__bg span:nth-child(3) {
	background: var(--rr-primary);
}

.anp-hero__title {
	background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--rr-accent) 30%, #fff) 100%);
	-webkit-background-clip: text;
	background-clip: text;
}

/* RRWH's red as the live dot: the one place the signal colour appears in a hero. */
.rr-eyebrow::before,
.anp-eyebrow__dot {
	background: var(--rr-signal);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--rr-signal) 25%, transparent);
}

/* ==========================================================================
   Project types: each type swaps the accent family and the hero pattern.
   Body class rr-type-{slug} (a project or its type archive) and core's
   accessnow_project_type-{slug} class on cards. Web App is the RRWH default.
   Colours come from RRWH.com's plan boxes: #07F blue, #3dffd7 mint,
   #ffd73d yellow, #3dd7ff cyan, deepened where text sits on them.
   ========================================================================== */

.rr-type-web-app,
.accessnow_project_type-web-app {
	--rr-accent: #0077ff;
	--rr-accent-soft: #a9d0ff;
	--rr-accent-text: #0058c4;
	--rr-hero-pattern:
		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	--rr-hero-pattern-size: 56px 56px;
}

.rr-type-standalone-app,
.accessnow_project_type-standalone-app {
	--rr-accent: #12b886;
	--rr-accent-soft: #a6f2d8;
	--rr-accent-text: #0a7356;
	--rr-steel: #2a8a74;
	--rr-primary-lift: #0b4a43;
	--rr-hero-pattern: radial-gradient(rgba(255, 255, 255, 0.14) 1.2px, transparent 1.6px);
	--rr-hero-pattern-size: 22px 22px;
}

.rr-type-saas,
.accessnow_project_type-saas {
	--rr-accent: #f5b400;
	--rr-accent-soft: #ffe28a;
	--rr-accent-text: #8a5a00;
	--rr-steel: #3366bb;
	--rr-primary-lift: #1d3570;
	--rr-hero-pattern: repeating-radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 34px);
	--rr-hero-pattern-size: auto;
}

.rr-type-php-script,
.accessnow_project_type-php-script {
	--rr-accent: #06b6d4;
	--rr-accent-soft: #a5f0fc;
	--rr-accent-text: #0b6f85;
	--rr-steel: #2c7da0;
	--rr-primary-lift: #0b3e5a;
	--rr-hero-pattern: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 26px);
	--rr-hero-pattern-size: auto;
}

/* The pattern layer over the hero (plugin hero and theme heroes). */
:where([class*="rr-type-"]) .anp-hero__bg,
:where([class*="rr-type-"]) .rr-hero::before {
	background-image: var(--rr-hero-pattern);
	background-size: var(--rr-hero-pattern-size);
}

/* Cards: a thin top rule in the type's colour, so a mixed grid reads by type at a glance. */
.anp-cards > li[class*="accessnow_project_type-"] .anp-card {
	box-shadow: inset 0 3px 0 var(--rr-accent), var(--rr-shadow-sm);
}

/* var() resolves where a property is declared, so the plugin's colours are declared again here
   for anything inside a typed card or page. */
[class*="rr-type-"],
[class*="accessnow_project_type-"] {
	--anp-teal: var(--rr-accent);
	--anp-teal-soft: var(--rr-accent-soft);
	--anp-steel: var(--rr-steel);
}

/* ==========================================================================
   RRWH footer: the old site's blue copyright bar, full width
   ========================================================================== */

.rr-footer {
	padding-bottom: 0 !important;
	background:
		radial-gradient(40% 70% at 100% 0%, color-mix(in srgb, var(--rr-accent) 22%, transparent), transparent 60%),
		var(--rr-primary-deep);
}

.rr-footer__bottom {
	position: relative;
	padding-block: 1rem;
	border-top: 0;
	color: #fff;
}

/* The bar bleeds to both edges behind the constrained row. */
.rr-footer__bottom::before {
	position: absolute;
	z-index: -1;
	inset: 0 calc(50% - 50vw);
	background: var(--rr-primary);
	content: "";
}

.rr-footer__bottom a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.4);
}

.rr-footer__logo .rr-brand__mark {
	width: 2.75rem;
	height: 2.75rem;
	color: #fff;
}

/* The plugin gives each project a random gradient pair (inline --anp-from/--anp-to) for its hero
   and cover art. Here they follow the project's type instead, so a SaaS project is always amber. */
[style*="--anp-from"] {
	--anp-from: var(--rr-primary-lift) !important;
	--anp-to: var(--rr-accent) !important;
}

/* ==========================================================================
   Project page content (the bip hero page): lead text, feature cards, comparison table
   ========================================================================== */

.anp-phero {
	border-bottom: 4px solid var(--rr-accent);
	background:
		radial-gradient(55% 80% at 88% 8%, color-mix(in srgb, var(--rr-accent) 45%, transparent), transparent 60%),
		linear-gradient(135deg, var(--rr-primary-deep) 0%, #1b1c1d 45%, var(--rr-primary-lift) 100%) !important;
}

.rr-lead {
	color: var(--rr-muted);
	font-size: 1.1rem;
}

.rr-feature-cards {
	gap: 1.25rem;
	margin-block: 1.5rem;
}

.rr-card {
	height: 100%;
	padding: 1.5rem;
	border: 1px solid var(--rr-line);
	border-top: 3px solid var(--rr-accent);
	border-radius: var(--rr-radius);
	background: #fff;
	box-shadow: var(--rr-shadow-sm);
}

.rr-card h3 {
	margin-top: 0;
	font-size: 1.15rem;
}

.rr-card p {
	margin-bottom: 0;
	color: var(--rr-muted);
	font-size: 0.95rem;
}

.rr-compare {
	overflow-x: auto;
	margin-block: 1.5rem;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius);
	background: #fff;
	box-shadow: var(--rr-shadow-sm);
}

.rr-compare table {
	min-width: 40rem;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.rr-compare th,
.rr-compare td {
	padding: 0.9rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--rr-line);
	text-align: left;
	vertical-align: top;
}

.rr-compare thead th {
	background: var(--rr-surface);
	color: var(--rr-primary);
}

.rr-compare tbody tr:last-child td {
	border-bottom: 0;
}

.rr-compare .rr-compare__bip {
	background: color-mix(in srgb, var(--rr-accent) 9%, #fff);
}

.rr-compare thead .rr-compare__bip {
	background: color-mix(in srgb, var(--rr-accent) 18%, #fff);
	color: var(--rr-accent-text);
}

/* The table sits in a 68% column: keep it readable by letting it scroll sideways rather than squash. */
.wp-block-table.rr-compare table {
	width: 100%;
	min-width: 44rem;
	table-layout: auto;
}

.wp-block-table.rr-compare :is(th, td) {
	text-align: left !important;
	vertical-align: top;
}

.wp-block-table.rr-compare thead {
	border-bottom: 0;
}

.rr-feature-cards .rr-card > * + * {
	margin-top: 0.6rem;
}

.wp-block-table.rr-compare table {
	min-width: 44rem;
}

.wp-block-table.rr-compare :is(th, td):first-child {
	width: 9rem;
}

.wp-block-table.rr-compare :is(th, td):not(:first-child) {
	width: calc((100% - 9rem) / 3);
}