/* Remotely Outsource theme styles.
   Values come from the Figma file "Main Website Design" (desktop frame 1920, mobile frame 390).
   Fluid values interpolate linearly between those two frames: clamp(mobile, …, desktop). */

/* Tokens ------------------------------------------------------------------ */

:root {
	--ro-lh-display: clamp(48px, 36.78px + 2.876vw, 92px);
	--ro-lh-h1: clamp(42px, 33.84px + 2.092vw, 74px);
	--ro-lh-h2: clamp(36px, 29.88px + 1.569vw, 60px);
	--ro-lh-h3: clamp(32px, 27.92px + 1.046vw, 48px);
	--ro-lh-h4: clamp(28px, 24.94px + 0.784vw, 40px);
	--ro-lh-h5: clamp(28px, 26.47px + 0.392vw, 34px);
	--ro-lh-h6: clamp(26px, 24.98px + 0.261vw, 30px);
	--ro-lh-body-l: clamp(28px, 25.96px + 0.523vw, 36px);
	--ro-lh-body: clamp(26px, 24.47px + 0.392vw, 32px);
	--ro-lh-body-s: clamp(22px, 20.98px + 0.261vw, 26px);
	--ro-lh-body-xs: clamp(18px, 16.98px + 0.261vw, 22px);
	--ro-fs-button: clamp(16px, 15.49px + 0.131vw, 18px);
	--ro-lh-button: clamp(22px, 21.49px + 0.131vw, 24px);

	/* cqw = width of <main>/<footer> without the scrollbar, so the 1440px column stays exact on Windows too. */
	/* 24px on phones (lines up with the section rules), growing to 64px, then Figma's 1440 column. */
	--ro-gutter: max(clamp(24px, 4cqw, 64px), calc(50cqw - 720px));
	/* Slightly roomier sides for text-heavy sections on laptops: ~95px at 1280 (normal gutter is ~50),
	   easing back to the normal gutter below ~1100. From ~1900 up the normal gutter (Figma's 240) takes over. */
	--ro-side-wide: max(var(--ro-gutter), min(7.5cqw, 40cqw - 400px));
	/* Inset of the "wide" elements that reach past the text column (section rules, carousel track): 12.5% of
	   the page up to a 2560px screen, then frozen at a 1920px span and centred, like mainstream sites do on
	   ultra-wide monitors (their layouts stop growing between ~1440 and ~1920px). */
	--ro-wide-inset: max(min(var(--ro-gutter), 12.5cqw), 50cqw - 960px);
	--ro-section-y: clamp(48px, 39.84px + 2.092vw, 80px);
	--ro-section-gap: clamp(32px, 19.76px + 3.137vw, 80px);
	--ro-head-gap: clamp(16px, 13.96px + 0.523vw, 24px);

	--ro-divider: var(--wp--preset--color--divider);
	--ro-glass-border: var(--wp--preset--color--glass-border);

	/* Quick start, long soft landing (ease-out quint), for small UI moves like the header pill. */
	--ro-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	/* Scroll reveals: a gentler ease-out (cubic), so content glides in at a natural pace instead of popping. */
	--ro-ease-reveal: cubic-bezier(0.33, 1, 0.68, 1);
}

/* Base -------------------------------------------------------------------- */

html,
body {
	overflow-x: clip;
}

/* Figma renders DM Sans with automatic optical size (opsz follows font size); this reproduces its line breaks. */
body {
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Open mobile menu: the page behind can't scroll (no rubber-band either), and a desktop scrollbar keeps its
   space so nothing shifts sideways. */
html.ro-lock {
	overflow: hidden;
	overscroll-behavior: none;
	scrollbar-gutter: stable;
}

.wp-site-blocks *,
.wp-site-blocks *::before,
.wp-site-blocks *::after {
	box-sizing: border-box;
}

.wp-site-blocks > * {
	margin-block: 0;
}

.wp-site-blocks > main,
.wp-site-blocks > footer {
	container-type: inline-size;
}

body .ro-header,
body .ro-header *,
body .ro-section,
body .ro-section *,
body .ro-footer,
body .ro-footer * {
	margin-block: 0;
}

:where(.ro-header, .ro-section, .ro-footer) img {
	display: block;
	max-width: 100%;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 3px;
}

/* The forms' bot trap: off screen, out of the tab order and hidden from screen readers, so only a bot fills it. */
.ro-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Buttons: theme.json sets the black pill; these are the size variants. */
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Hover / keyboard focus / press: every button turns Information 400 (theme.json sets the colour);
   the shadow picks up the same hue, as the Figma Button hover variant tints its shadow. */
.wp-element-button:hover,
.wp-element-button:focus-visible,
.wp-element-button:active,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.wp-block-button__link:active {
	box-shadow: 0 2px 8px rgba(129, 51, 255, 0.3);
}

.ro-btn-header .wp-block-button__link {
	padding: 13px 26px;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: -0.2px;
}

.ro-btn-small .wp-block-button__link {
	padding: 12px 24px;
}

/* Logo -------------------------------------------------------------------- */

.ro-logo {
	position: relative;
	display: block;
	flex: none;
	width: 190px;
	aspect-ratio: 189.88 / 39;
}

.ro-logo img {
	position: absolute;
	max-width: none;
}

.ro-logo__mark {
	left: 0;
	top: 0.46%;
	width: 20.35%;
	height: 99.09%;
}

.ro-logo__remotely {
	left: 23.76%;
	top: 0;
	width: 45.94%;
	height: 47.66%;
}

.ro-logo__outsource {
	left: 23.76%;
	top: 44.56%;
	width: 76.24%;
	height: 55.44%;
}

/* Header ------------------------------------------------------------------ */

.ro-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	padding: clamp(12px, 8.94px + 0.784vw, 24px) max(clamp(16px, 3vw, 48px), calc((100% - 1600px) / 2));
	pointer-events: none;
}

.admin-bar .ro-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.ro-nav {
	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 10px 28px;
	border: 1px solid var(--ro-glass-border);
	border-radius: 100px;
	box-shadow: 0 2px 12px rgba(219, 210, 255, 0.08);
	pointer-events: auto;
}

.ro-nav::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0) 100%),
		rgba(218, 219, 221, 0.08);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.ro-nav .ro-logo,
.ro-menu-toggle {
	position: relative;
	z-index: 2;
}

.ro-nav .ro-logo {
	width: 160px;
}

.ro-menu {
	display: flex;
	align-items: center;
	gap: 32px;
}

.ro-menu__nav {
	position: relative;
}

.ro-menu__nav .wp-block-navigation__container {
	gap: 8px;
}

.ro-menu__nav .wp-block-navigation-item {
	position: relative;
	z-index: 1;
}

.ro-menu__nav .wp-block-navigation-item__content {
	display: block;
	padding: 10px 20px;
	border-radius: 100px;
	color: #000;
	font-size: 17px;
	font-weight: 500;
	line-height: 26px;
	text-decoration: none;
}

/* Hover pill that slides between links (theme.js positions it): frosted Brand Blue 100 glass, matching
   the header's translucent treatment. */
.ro-nav-cursor {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	border-radius: 100px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0) 100%),
		rgba(219, 210, 255, 0.28);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	opacity: 0;
	pointer-events: none;
	transition:
		transform 0.35s var(--ro-ease-out),
		width 0.35s var(--ro-ease-out),
		opacity 0.2s ease;
}

.ro-nav-cursor.is-visible {
	opacity: 1;
}

/* Without JavaScript, links still get the same highlight, just without the slide. */
nav.ro-menu__nav:not(.has-cursor) .wp-block-navigation-item__content:hover {
	background-color: rgba(219, 210, 255, 0.28);
}

/* Adaptive contrast (theme.js adds .is-on-dark where the background behind is dark). */
.ro-menu__nav .wp-block-navigation-item__content,
.ro-logo__remotely,
.ro-logo__outsource {
	transition: color 0.25s ease, filter 0.25s ease;
}

@media (min-width: 1100px) {
	.ro-menu__nav .is-on-dark > .wp-block-navigation-item__content {
		color: #fff;
	}
}

.ro-nav .ro-logo.is-on-dark .ro-logo__remotely,
.ro-nav .ro-logo.is-on-dark .ro-logo__outsource {
	filter: invert(1);
}

.ro-menu-toggle.is-on-dark span {
	background-color: #fff;
}

/* The open mobile menu sits on a light panel, so the logo and icon always return to dark there. */
.ro-header.is-menu-open .ro-logo .ro-logo__remotely,
.ro-header.is-menu-open .ro-logo .ro-logo__outsource {
	filter: none;
}

.ro-header.is-menu-open .ro-menu-toggle span {
	background-color: var(--wp--preset--color--headings);
}

.ro-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 5px;
	width: 30px;
	height: 32px;
	padding: 8px 4px;
	border: 0;
	background: none;
	cursor: pointer;
}

.ro-menu-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 1px;
	background: var(--wp--preset--color--headings);
	transition: transform 0.25s ease, opacity 0.2s ease, width 0.25s ease, background-color 0.25s ease;
}

.ro-menu-toggle span:nth-child(3) {
	width: 14px;
}

.ro-header.is-menu-open .ro-menu-toggle span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.ro-header.is-menu-open .ro-menu-toggle span:nth-child(2) {
	opacity: 0;
}

.ro-header.is-menu-open .ro-menu-toggle span:nth-child(3) {
	width: 22px;
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1099px) {
	.ro-nav {
		padding: 11px 24px;
	}

	.ro-nav .ro-logo {
		width: 136px;
	}

	.ro-menu-toggle {
		display: inline-flex;
	}

	/* Opening the menu grows the bar's own glass into a full-screen sheet: Figma "Mobile Header / State=Open" is
	   the closed bar's glass (8% tint, white sheen, blur) over the whole screen. theme.js pins the glass layer
	   exactly over the bar (--ro-pill-*), then lets it spread up, out to both sides and down to the bottom;
	   closing draws it back into the bar. The bar's outline and shadow travel with the layer meanwhile. */
	.ro-header.is-menu-glass .ro-nav {
		border-color: transparent;
		box-shadow: none;
	}

	.ro-header.is-menu-glass .ro-nav::before {
		position: fixed;
		inset: auto;
		top: var(--ro-pill-top);
		left: var(--ro-pill-left);
		width: var(--ro-pill-width);
		height: var(--ro-pill-height);
		border: 1px solid var(--ro-glass-border);
		border-radius: var(--ro-pill-radius);
		box-shadow: 0 2px 12px rgba(219, 210, 255, 0.08);
	}

	/* Closing: the sheet lifts off the bottom first, then narrows back into the bar, rounding as it goes. */
	.ro-header.is-menu-closing .ro-nav::before {
		transition:
			height 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.1s,
			top 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.2s,
			left 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.2s,
			width 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.2s,
			border-radius 0.45s ease 0.2s,
			border-color 0.3s ease 0.4s,
			background-color 0.4s ease 0.25s,
			-webkit-backdrop-filter 0.4s ease 0.25s,
			backdrop-filter 0.4s ease 0.25s;
	}

	/* Opening: out to the edges and up at once, then the sheet runs on down to the bottom; the corners square off
	   as it lands. The glass frosts a little as it grows: Figma's 8% tint alone leaves the links at 1.3:1 over
	   dark photos (the summit card), so the open sheet adds a 40% white wash (Figma's layers + white = #fbfbfb at
	   45%) and a 20px blur — still see-through, and the links keep at least 4.9:1 wherever the menu opens. */
	.ro-header.is-menu-open .ro-nav::before {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-color: transparent;
		border-radius: 0;
		background-color: rgba(251, 251, 251, 0.45);
		-webkit-backdrop-filter: blur(20px) saturate(160%);
		backdrop-filter: blur(20px) saturate(160%);
		transition:
			top 0.45s var(--ro-ease-out),
			left 0.45s var(--ro-ease-out),
			width 0.45s var(--ro-ease-out),
			height 0.7s var(--ro-ease-out) 0.05s,
			border-radius 0.4s ease 0.25s,
			border-color 0.2s ease,
			background-color 0.5s ease,
			-webkit-backdrop-filter 0.5s ease,
			backdrop-filter 0.5s ease;
	}

	/* The menu's content sits on that glass (no background of its own). */
	.ro-menu {
		position: fixed;
		inset: 0;
		z-index: 1;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 112px 16px 32px;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: none;
		visibility: hidden;
		/* Links can't be tapped while they fade out. */
		pointer-events: none;
		transition: visibility 0s linear 0.35s;
	}

	.ro-menu::-webkit-scrollbar {
		display: none;
	}

	.admin-bar .ro-menu {
		top: var(--wp-admin--admin-bar--height, 46px);
	}

	.ro-header.is-menu-open .ro-menu {
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
	}

	/* Links and their dividers run the full width of the sheet (Figma: 358px rows at 390, 16px from each edge). */
	.ro-menu__nav,
	.ro-menu__nav .wp-block-navigation__container {
		width: 100%;
	}

	.ro-menu__nav .wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.ro-menu__nav .wp-block-navigation-item::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		background-color: #dadbdd;
		transform-origin: left center;
	}

	.ro-menu__nav .wp-block-navigation-item__content {
		padding: 16px 24px;
		border-radius: 0;
		color: var(--wp--preset--color--headings);
		font-size: 26px;
		font-weight: 400;
		line-height: 32px;
	}

	.ro-menu__nav .wp-block-navigation-item__content:hover {
		background: none;
	}

	.ro-nav-cursor {
		display: none;
	}

	.ro-menu .ro-menu__cta {
		margin-top: auto;
		padding-top: 32px;
	}

	.ro-menu__cta .wp-block-button,
	.ro-menu__cta .wp-block-button__link {
		width: 100%;
	}

	.ro-menu__cta .wp-block-button__link {
		padding: 12px 24px;
		line-height: 22px;
	}
}

/* The menu's content arrives on the spreading glass: each link fades up in turn while its divider draws across,
   then the button (theme.js numbers them with --i). Closing, they fade out together before the glass draws in. */
@media (max-width: 1099px) and (prefers-reduced-motion: no-preference) {
	.ro-menu__nav .wp-block-navigation-item,
	.ro-menu .ro-menu__cta {
		--ro-menu-in: calc(0.2s + var(--i, 0) * 0.06s);
		opacity: 0;
		translate: 0 16px;
		transition: opacity 0.2s ease, translate 0.25s ease;
	}

	.ro-menu__nav .wp-block-navigation-item::after {
		scale: 0 1;
		transition: scale 0.25s ease;
	}

	.ro-header.is-menu-open .ro-menu__nav .wp-block-navigation-item,
	.ro-header.is-menu-open .ro-menu .ro-menu__cta {
		opacity: 1;
		translate: none;
		transition: opacity 0.45s ease var(--ro-menu-in), translate 0.6s var(--ro-ease-out) var(--ro-menu-in);
	}

	.ro-header.is-menu-open .ro-menu__nav .wp-block-navigation-item::after {
		scale: 1 1;
		transition: scale 0.8s var(--ro-ease-out) calc(var(--ro-menu-in) + 0.1s);
	}
}

/* Sections ---------------------------------------------------------------- */

.ro-section {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ro-section-gap);
	padding: var(--ro-section-y) var(--ro-gutter);
}

/* Up to 1920 the rule spans the content column; on wider screens it keeps Figma's 75% share (1440/1920) up to
   1920px long (a 2560 screen), then stays that length, centred. */
.ro-section + .ro-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--ro-wide-inset);
	right: var(--ro-wide-inset);
	height: 1px;
	background: var(--ro-divider);
}

/* Figma hides the rule directly under the hero (desktop and mobile). */
.ro-hero + .ro-section::before {
	content: none;
}

.ro-section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ro-head-gap);
	width: 100%;
	max-width: 1120px;
	text-align: center;
}

/* Section intros use Body; only the hero lead stays Body Large. The 50em cap stops a line getting
   uncomfortably long. */
.ro-lead {
	max-width: 50em;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--ro-lh-body);
	text-wrap: pretty;
}

/* Centred intros split into even lines rather than leaving a word or two alone on the last line
   (user preference, restored 2026-09-13). */
.ro-section-head .ro-lead {
	text-wrap: balance;
}

.ro-eyebrow {
	color: var(--wp--preset--color--action);
	font-size: var(--wp--preset--font-size--body-s);
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

/* Hero -------------------------------------------------------------------- */

/* In Figma the illustration's top rises 87.5px into the 120px gap, leaving ~37px on desktop; mobile keeps 80px. */
.ro-hero {
	gap: clamp(37.5px, 90.83px - 2.778vw, 80px);
	padding-top: clamp(120px, 89.41px + 7.843vw, 240px);
	padding-bottom: clamp(48px, 23.27px + 6.34vw, 145px);
}

/* Hero side margins scale with the page like Figma's (240 of 1920 = 12.5%), keeping the heading compact. */
@media (min-width: 768px) {
	.ro-hero {
		padding-inline: max(var(--ro-gutter), 12.5cqw);
	}
}

.ro-hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(28px, 22.9px + 1.307vw, 48px);
	width: 100%;
	text-align: center;
}

.ro-hero__title {
	max-width: 1428px;
}

.ro-hero__lead {
	max-width: 1000px;
	font-size: var(--wp--preset--font-size--body-l);
	line-height: var(--ro-lh-body-l);
}

/* Hero request box. theme.js adds the typing examples and the two steps (need -> email -> sent); without
   JavaScript it is a plain form that posts the need to the contact page. */
.ro-prompt {
	--ro-prompt-pt: clamp(8px, 1.88px + 1.569vw, 32px);
	position: relative;
	isolation: isolate; /* keeps the flip's ground shadows (z-index -1) inside the box, above the page */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding-top: var(--ro-prompt-pt);
}

/* Desktop: label and input sit side by side as separate items; mobile turns the wrapper into the pill. */
.ro-prompt__field {
	display: contents;
}

.ro-prompt__label {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--ro-lh-body);
	white-space: nowrap;
}

/* Holds the input plus the typing overlay, so both turn together in the flip. */
.ro-prompt__control {
	--ro-typer-left: 25.5px; /* 1.5px border + 24px padding */
	--ro-typer-right: 25.5px;
	position: relative;
	display: flex;
}

/* Same field as the summit email box (pill like the buttons, 1.5px border, DM Sans Regular 16, light
   placeholder), filled card grey instead of white so it reads against the white hero. */
.ro-prompt__input {
	width: 429px;
	height: 60px;
	padding: 0 24px;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 100px;
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--headings);
	font: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ro-prompt__input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.ro-prompt__input:focus,
.ro-prompt__input:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--action);
	box-shadow: 0 0 0 3px rgba(74, 31, 255, 0.12);
}

.ro-prompt__submit {
	position: relative;
	border: 0;
	font-family: inherit;
}

.ro-prompt__btn-label {
	transition: opacity 0.1s ease;
}

/* Typing examples. The static placeholder is hidden from first paint (the ro-js class is set in <head>)
   while the overlay types, holds and erases each example; focusing the box shows the native placeholder. */
@media (prefers-reduced-motion: no-preference) {
	.ro-js .ro-prompt:not(.is-email) .ro-prompt__input:not(:focus)::placeholder {
		color: transparent;
	}
}

.ro-prompt__typer {
	position: absolute;
	top: 50%;
	right: var(--ro-typer-right);
	left: var(--ro-typer-left);
	display: none;
	overflow: hidden;
	color: var(--wp--preset--color--muted);
	font-size: 16px;
	line-height: 26px;
	text-align: left;
	white-space: pre;
	transform: translateY(-50%);
	pointer-events: none;
}

.ro-prompt.has-typer .ro-prompt__typer {
	display: block;
}

.ro-prompt__typer.is-overflow {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px);
	mask-image: linear-gradient(90deg, transparent 0, #000 16px);
}

.ro-prompt__input:focus ~ .ro-prompt__typer,
.ro-prompt__input:not(:placeholder-shown) ~ .ro-prompt__typer {
	visibility: hidden;
}

.ro-prompt__typer-line {
	display: inline-block;
}

/* "Help me" as the start of the typing line; only used on phones, where the label sits inside the box. */
.ro-prompt__typer-lead {
	display: none;
	color: var(--wp--preset--color--body);
}

/* Thin line cursor in the same grey as the example text. Blinks while idle, stays solid while typing or
   erasing, like a real text cursor. */
.ro-prompt__caret {
	display: inline-block;
	width: 1.5px;
	height: 1.15em;
	margin-left: 1px;
	vertical-align: -0.2em;
	background: currentColor;
	animation: ro-caret-blink 1.05s linear infinite;
}

.ro-prompt__typer.is-active .ro-prompt__caret {
	animation: none;
}

@keyframes ro-caret-blink {
	0%,
	49.9% {
		opacity: 1;
	}

	50%,
	100% {
		opacity: 0;
	}
}

/* Single two-sided flip between steps (theme.js turns each box half a turn). While .is-flipping, the
   current content is the front face and a back face shows the next step exactly as it will look ("Enter
   your email" at the email size, "Send now →"), so the boxes land on it with nothing resizing afterwards.
   The real content is swapped while the boxes are edge-on. */
.ro-prompt.is-flipping .ro-prompt__submit,
.ro-prompt.is-flipping .ro-prompt__control,
.ro-prompt.is-flipping .ro-prompt__field {
	transform-style: preserve-3d;
}

/* The script sets transforms every frame; the buttons' usual transform transition would make the button lag
   and spin back afterwards. */
.ro-prompt.is-flipping .ro-prompt__label,
.ro-prompt.is-flipping .ro-prompt__control,
.ro-prompt.is-flipping .ro-prompt__field,
.ro-prompt.is-flipping .ro-prompt__submit {
	transition: none;
}

.ro-prompt.is-flipping .ro-prompt__label,
.ro-prompt.is-flipping .ro-prompt__input,
.ro-prompt.is-flipping .ro-prompt__typer,
.ro-prompt.is-flipping .ro-prompt__btn-label,
.ro-prompt__back {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.ro-prompt__back {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	transform: rotateX(180deg);
	pointer-events: none;
}

.ro-prompt__back--button {
	justify-content: center;
}

.ro-prompt__back--field {
	padding: 0 24px;
	color: var(--wp--preset--color--muted);
	font-size: 16px;
	line-height: 26px;
	text-align: left;
	white-space: nowrap;
}

/* On desktop the pill is the input itself, so its back face draws the pill too. */
.ro-prompt__control > .ro-prompt__back--field {
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 100px;
	background: var(--wp--preset--color--card);
}

/* Soft shadow on the "ground" under each box while it rises, flips and settles (theme.js drives it). */
.ro-prompt__shadow {
	position: absolute;
	z-index: -1;
	border-radius: 100px;
	background: rgba(17, 18, 21, 0.2);
	opacity: 0;
	filter: blur(12px);
	pointer-events: none;
}

/* Step 2 (email): "Help me" folds away and the field takes its space, so the button doesn't move. */
.ro-prompt.is-email .ro-prompt__label {
	max-width: 0;
	margin-right: -16px;
	overflow: hidden;
	opacity: 0;
}

.ro-prompt.is-email .ro-prompt__input {
	width: calc(429px + var(--ro-email-grow, 0px));
}

/* Sent: the button label gives way to a check mark drawn in white on the button hover blue. */
.ro-prompt__check {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	opacity: 0;
	transform: translate(-50%, -50%);
}

.ro-prompt__check path {
	stroke-dasharray: 24;
	stroke-dashoffset: 24;
}

.ro-prompt.is-sent .ro-prompt__submit {
	background-color: var(--wp--preset--color--highlight);
	box-shadow: 0 2px 8px rgba(129, 51, 255, 0.3);
}

.ro-prompt.is-sent .ro-prompt__btn-label {
	opacity: 0;
}

.ro-prompt.is-sent .ro-prompt__check {
	opacity: 1;
}

.ro-prompt.is-sent .ro-prompt__check path {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.35s 0.1s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Done: the message takes the box's place (same height, so the page doesn't jump) until the page reloads. */
.ro-prompt__done {
	position: absolute;
	top: var(--ro-prompt-pt);
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: var(--wp--preset--color--headings);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	line-height: var(--ro-lh-body);
	text-align: left;
	pointer-events: none;
}

.ro-prompt.is-done > :not(.ro-prompt__done) {
	visibility: hidden;
}

/* The tick sits level with the message's first line, however many lines the message runs to. */
.ro-prompt__done-line,
.ro-signup__done-line {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.ro-prompt__done-icon {
	flex: none;
	width: 28px;
	height: 28px;
	margin-top: calc((var(--ro-lh-body) - 28px) / 2);
}

.ro-prompt__done-icon circle {
	fill: var(--wp--preset--color--highlight);
}

.ro-prompt__done-icon path {
	stroke-dasharray: 20;
	stroke-dashoffset: 20;
	animation: ro-tick-draw 0.4s 0.35s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes ro-tick-draw {
	to {
		stroke-dashoffset: 0;
	}
}

/* Same share of the page as in Figma at every width: 1510 of 1920 = 78.65%. Mobile is full-bleed. */
.ro-hero__img {
	position: relative;
	width: min(1510px, 78.65cqw);
}

.ro-hero__img img {
	width: 100%;
	height: auto;
}

.ro-hero__img::after {
	content: "";
	position: absolute;
	left: -4.5%;
	right: -4.5%;
	bottom: 0;
	height: 25.4%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 71.591%, #fff 100%);
	pointer-events: none;
}

@media (max-width: 767px) {
	/* Figma's phone hero keeps the illustration close under the button (the desktop gap formula gives 80px). */
	.ro-hero {
		gap: 40px;
	}

	/* While the examples type, "Help me" joins the typing line (the fixed label steps aside), so a long example
	   scrolls as one sentence like a real text box. Tapping into the box brings the fixed label back. */
	.ro-prompt.has-typer .ro-prompt__control {
		position: static;
	}

	.ro-prompt.has-typer .ro-prompt__typer {
		right: 24px;
		left: 24px;
	}

	.ro-prompt__typer-lead {
		display: inline;
	}

	.ro-prompt.has-typer .ro-prompt__field:has(.ro-prompt__input:placeholder-shown:not(:focus)) .ro-prompt__label {
		visibility: hidden;
	}

	.ro-prompt {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		width: 100%;
	}

	/* The wrapper becomes the field so "Help me" sits inside it; the typed text continues the sentence. */
	.ro-prompt__field {
		position: relative;
		display: flex;
		align-items: center;
		height: 60px;
		padding: 0 24px;
		border: 1.5px solid var(--wp--preset--color--border);
		border-radius: 100px;
		background: var(--wp--preset--color--card);
		transition: border-color 0.2s ease, box-shadow 0.2s ease;
	}

	.ro-prompt__field:focus-within {
		border-color: var(--wp--preset--color--action);
		box-shadow: 0 0 0 3px rgba(74, 31, 255, 0.12);
	}

	.ro-prompt__label {
		font-size: 16px;
		line-height: 26px;
	}

	.ro-prompt__control {
		--ro-typer-left: 0.3em;
		--ro-typer-right: 0px;
		flex: 1;
		min-width: 0;
	}

	.ro-prompt__input {
		flex: 1;
		width: auto;
		min-width: 0;
		height: auto;
		padding: 0 0 0 0.3em;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.ro-prompt__input:focus,
	.ro-prompt__input:focus-visible {
		outline: none;
		box-shadow: none;
	}

	/* Step 2: the label folds away inside the pill and the email starts at the pill's padding. */
	.ro-prompt.is-email .ro-prompt__label {
		margin-right: 0;
	}

	.ro-prompt.is-email .ro-prompt__input {
		width: auto;
		padding-left: 0;
	}

	.ro-prompt__submit {
		width: 100%;
	}

	/* 125% of the screen width, centred, so the illustration reads larger; the sides run off-screen. */
	.ro-hero__img {
		width: calc((100% + 2 * var(--ro-gutter)) * 1.25);
		max-width: none;
	}
}

/* Challenges carousel ----------------------------------------------------- */

.ro-challenges,
.ro-carousel {
	gap: clamp(48px, 39.84px + 2.092vw, 80px);
}

/* Cards are 80% of the Figma card (560 -> 448, gap 129 -> 103). On wider screens they grow a little with the
   page, but stop at 520px (reached around 2230px) so the photos stay in proportion to the card text, which
   stops growing at 1920. */
.ro-carousel {
	--ro-card-gap: clamp(103px, 5.38cqw, 120px);
	--ro-card-space: 80px;
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* The track runs to both screen edges instead of clipping at the content column; padding keeps the
   first and last card aligned with the column.
   Every card shares the track's rows (heading, text, space, photo) through subgrid, so paragraphs and
   photos line up across the carousel even when one heading runs to two lines. */
.ro-carousel__track {
	--ro-track-inset: var(--ro-wide-inset);
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(448px, 23.33cqw, 520px);
	grid-template-rows: auto auto var(--ro-card-space) auto;
	column-gap: var(--ro-card-gap);
	margin-inline: calc(-1 * var(--ro-gutter));
	padding-inline: var(--ro-track-inset);
	scroll-padding-inline: var(--ro-track-inset);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.ro-carousel__track::-webkit-scrollbar {
	display: none;
}

.ro-card {
	position: relative;
	display: grid;
	grid-row: 1 / -1;
	grid-template-rows: subgrid;
	row-gap: 0;
	scroll-snap-align: start;
}

.ro-card + .ro-card::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(var(--ro-card-gap) / -2);
	width: 1px;
	height: 77.1%;
	background: var(--ro-divider);
	transform: translateY(-50%);
}

/* The wrapper steps aside so heading and text sit directly in the card's shared rows. */
.ro-card__text {
	display: contents;
}

.ro-card__title {
	grid-row: 1;
	padding: 32px 26px 0;
	color: #000;
	font-size: calc(var(--wp--preset--font-size--h-4) * 0.8);
	line-height: calc(var(--ro-lh-h4) * 0.8);
	letter-spacing: -0.005em;
}

/* The card text is the site's regular Body size (the card itself stays 80% of Figma's). */
.ro-card__body {
	grid-row: 2;
	padding: 13px 26px 0;
	color: #000;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--ro-lh-body);
}

.ro-card__img {
	grid-row: 4;
	aspect-ratio: 560 / 487;
	overflow: hidden;
	border-radius: 24px;
}

.ro-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Arrows line up with the (wider-screen) track edge, which matches the section rules. */
.ro-carousel__nav {
	display: flex;
	justify-content: flex-end;
	gap: 24px;
	margin-inline: calc(var(--ro-wide-inset) - var(--ro-gutter));
}

/* The circle is drawn here (the SVG carries only the chevron) so hover can recolour it like the other buttons. */
.ro-carousel__btn {
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--body);
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.ro-carousel__btn:hover:not([disabled]),
.ro-carousel__btn:focus-visible:not([disabled]),
.ro-carousel__btn:active:not([disabled]) {
	background-color: var(--wp--preset--color--highlight);
	box-shadow: 0 2px 8px rgba(129, 51, 255, 0.3);
}

.ro-carousel__btn:hover:not([disabled]) {
	transform: scale(1.05);
}

.ro-carousel__btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

.ro-carousel__btn img {
	width: 100%;
	height: 100%;
}

@media (max-width: 767px) {
	.ro-carousel {
		--ro-card-gap: 33px;
		--ro-card-space: 28px;
	}

	/* 290px cards (Figma), narrower on the smallest screens (fold cover displays) so a whole card still fits. */
	.ro-carousel__track {
		grid-auto-columns: min(290px, 100cqw - 72px);
		padding-inline: 24px;
		scroll-padding-inline: 24px;
	}

	.ro-card + .ro-card::before {
		top: 0;
		height: 100%;
		transform: none;
	}

	.ro-card__title {
		padding: 0;
		font-size: var(--wp--preset--font-size--h-4);
		line-height: var(--ro-lh-h4);
	}

	.ro-card__body {
		padding: 12px 0 0;
	}

	.ro-card__img {
		height: 252px;
		aspect-ratio: auto;
		border-radius: 24px;
	}

	.ro-carousel__nav {
		gap: 12px;
	}

	.ro-carousel__btn {
		width: 44px;
		height: 44px;
	}
}

/* Process (How we make it happen) ---------------------------------------- */

/* Figma: rails span the full content width and the curve hangs 91px past the right edge. Where the page
   margin can't hold the curve (+24px air), the rails end early by the difference and the curve tucks in. */
.ro-process {
	--ro-row-gap: 120px;
	--ro-wrap-w: 91px;
	--ro-wrap-inset: max(0px, var(--ro-wrap-w) + 24px - var(--ro-side-wide));
	padding-inline: var(--ro-side-wide);
}

.ro-process__flow {
	display: flex;
	flex-direction: column;
	gap: var(--ro-row-gap);
	width: 100%;
}

.ro-process__row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(48px, 12vw - 110px, 120px);
	padding-top: 48px;
}

.ro-process__row::before {
	content: "";
	position: absolute;
	top: -1.5px;
	left: 0;
	right: var(--ro-wrap-inset);
	height: 3px;
	background: url("../images/rail-top.svg") repeat-x 0 0 / auto 3px;
}

.ro-process__row:first-child::after {
	content: "";
	position: absolute;
	top: -1.5px;
	right: calc(var(--ro-wrap-inset) - var(--ro-wrap-w));
	width: var(--ro-wrap-w);
	height: calc(100% + var(--ro-row-gap) + 3px);
	background: url("../images/rail-wrap.svg") no-repeat 0 0 / 100% 100%;
}

.ro-process__row--reverse > :nth-child(1) {
	grid-area: 1 / 3;
}

.ro-process__row--reverse > :nth-child(2) {
	grid-area: 1 / 2;
}

.ro-process__row--reverse > :nth-child(3) {
	grid-area: 1 / 1;
}

.ro-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.ro-step::before {
	content: "";
	position: absolute;
	top: -55px;
	left: 50%;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	background: url("../images/step-dot.svg") no-repeat center / contain;
}

/* 80% of the original badge (Body text, 8/16px padding, 12px radius). */
.ro-step__badge {
	display: inline-flex;
	padding: 6.4px 12.8px;
	border: 1px solid var(--ro-divider);
	border-radius: 9.6px;
	background: #fff;
	color: var(--wp--preset--color--headings);
	font-size: calc(var(--wp--preset--font-size--body) * 0.8);
	font-weight: 700;
	line-height: calc(var(--ro-lh-body) * 0.8);
	transition: border-color 0.25s ease, color 0.25s ease;
}

/* Hovering a step turns its badge outline and label the dot's colour (Brand Blue 400, #6e4cff);
   the step heading stays as it is. Mouse only, so a tap on a phone doesn't leave it stuck. */
@media (hover: hover) {
	.ro-step:hover .ro-step__badge {
		border-color: var(--wp--preset--color--action-hover);
		color: var(--wp--preset--color--action-hover);
	}
}

/* Touch screens: the same highlight while a finger is on the step (theme.js adds .is-touched). */
.ro-step.is-touched .ro-step__badge {
	border-color: var(--wp--preset--color--action-hover);
	color: var(--wp--preset--color--action-hover);
}

.ro-step__title {
	font-size: var(--wp--preset--font-size--h-6);
	line-height: var(--ro-lh-h6);
	letter-spacing: 0;
}

.ro-step__body {
	color: var(--wp--preset--color--body);
}

@media (max-width: 1023px) {
	.ro-process__flow {
		gap: 0;
	}

	.ro-process__row {
		display: flex;
		flex-direction: column;
		padding-top: 0;
	}

	.ro-process__row::before,
	.ro-process__row::after {
		display: none;
	}

	.ro-step {
		align-items: flex-start;
		padding: 0 0 32px 30px;
		text-align: left;
	}

	.ro-step::before {
		top: 14px;
		left: 0;
		margin-left: 0;
	}

	/* Mobile rail = Figma's 3px frame with a 2-on / 12-off dashed stroke. */
	.ro-step::after {
		content: "";
		position: absolute;
		top: 36px;
		bottom: 0;
		left: 5.5px;
		width: 3px;
		background: repeating-linear-gradient(to bottom, #d0d1d4 0 2px, transparent 2px 14px);
	}

	.ro-process__row--reverse > :last-child {
		padding-bottom: 0;
	}

	.ro-process__row--reverse > :last-child::after {
		display: none;
	}
}

/* Benefits ---------------------------------------------------------------- */

.ro-benefits {
	padding-inline: var(--ro-side-wide);
}

/* Mobile first: a single list with dividers between items. */
.ro-benefits__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
}

.ro-benefit {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px 0;
}

.ro-benefit:not(:last-child) {
	border-bottom: 1px solid var(--ro-divider);
}

.ro-benefit:first-child {
	padding-top: 8px;
}

.ro-benefit:last-child {
	padding-bottom: 8px;
}

.ro-benefit__num {
	color: var(--wp--preset--color--number);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 500;
	line-height: var(--ro-lh-h3);
	letter-spacing: -0.01em;
	transition: color 0.25s ease;
}

/* Hovering a benefit turns its number the button hover blue (Information 400). Mouse only. */
@media (hover: hover) {
	.ro-benefit:hover .ro-benefit__num {
		color: var(--wp--preset--color--highlight);
	}
}

/* Touch screens: the same highlight while a finger is on the benefit (theme.js adds .is-touched). */
.ro-benefit.is-touched .ro-benefit__num {
	color: var(--wp--preset--color--highlight);
}

/* Same heading style as the Section 1 card titles: full H4 on phones, 80% of H4 from 768px up. */
.ro-benefit__title {
	--ro-benefit-lh: var(--ro-lh-h4);
	font-size: var(--wp--preset--font-size--h-4);
	line-height: var(--ro-benefit-lh);
	letter-spacing: -0.005em;
}

@media (min-width: 768px) {
	.ro-benefit__title {
		--ro-benefit-lh: calc(var(--ro-lh-h4) * 0.8);
		font-size: calc(var(--wp--preset--font-size--h-4) * 0.8);
	}
}

/* Tablet: two columns with a cross of dividers. */
@media (min-width: 700px) and (max-width: 1023px) {
	.ro-benefits__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ro-benefit:nth-child(n) {
		gap: 24px;
		padding: 40px 32px;
		border: 0;
	}

	.ro-benefit:nth-child(odd) {
		border-right: 1px solid var(--ro-divider);
	}

	.ro-benefit:nth-child(-n + 4) {
		border-bottom: 1px solid var(--ro-divider);
	}
}

/* Desktop: the Figma 3 x 2 grid, 96px wider than the content column so cell text aligns with it. */
@media (min-width: 1024px) {
	/* …but never closer than 16px to the screen edges (on 1024–1100px screens the extra width would spill). */
	.ro-benefits__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: min(100% + 96px, 100cqw - 32px);
		max-width: 1536px;
	}

	.ro-benefit:nth-child(n) {
		gap: 24px;
		padding: 64px 48px;
		border: 0;
	}

	.ro-benefit:not(:nth-child(3n)) {
		border-right: 1px solid var(--ro-divider);
	}

	.ro-benefit:nth-child(-n + 3) {
		border-bottom: 1px solid var(--ro-divider);
	}

	.ro-benefit__title {
		min-height: calc(2 * var(--ro-benefit-lh));
	}

	/* Keep number, title and body on shared rows, even when one title wraps longer. */
	@supports (grid-template-rows: subgrid) {
		.ro-benefits__grid {
			grid-template-rows: repeat(6, auto);
		}

		.ro-benefit:nth-child(n) {
			display: grid;
			grid-row: span 3;
			grid-template-rows: subgrid;
			row-gap: 24px;
		}
	}
}

/* Summit ------------------------------------------------------------------ */

.ro-summit__card {
	display: flex;
	align-items: flex-start;
	gap: clamp(28px, 14.75px + 3.399vw, 80px);
	width: 100%;
	padding: clamp(28px, 18.82px + 2.353vw, 64px) clamp(24px, 17.88px + 1.569vw, 48px);
	border-radius: 24px;
	background: var(--wp--preset--color--card);
}

.ro-summit__content {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.ro-summit__wordmark {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	line-height: var(--ro-lh-body);
	text-wrap: pretty;
}

.ro-summit__wordmark strong {
	color: var(--wp--preset--color--headings);
}

.ro-signup {
	--ro-signup-pt: 16px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding-top: var(--ro-signup-pt);
}

.ro-signup__input {
	flex: 1;
	min-width: 0;
	height: 60px;
	padding: 0 24px;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 100px;
	background: #fff;
	color: var(--wp--preset--color--headings);
	font: inherit;
	font-size: 16px;
}

.ro-signup__input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

/* Focus ring sits flush on the border; an offset outline made the field look like it shrank. */
.ro-signup__input:focus,
.ro-signup__input:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--action);
	box-shadow: 0 0 0 3px rgba(74, 31, 255, 0.12);
}

.ro-signup__submit {
	position: relative;
	border: 0;
	font-family: inherit;
}

/* Sent (the same finish as the Home request box): the button label gives way to a check drawn in white on
   Information 400; then the field and button turn away and the confirmation takes their place (same height, so
   the page doesn't move) with the Information 400 tick circle. A failed send shows a line under the field. */
.ro-signup__check {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	color: var(--wp--preset--color--white);
	opacity: 0;
	translate: -50% -50%;
}

.ro-signup__check path {
	stroke-dasharray: 24;
	stroke-dashoffset: 24;
}

.ro-signup.is-sent .ro-signup__submit {
	background-color: var(--wp--preset--color--highlight);
	box-shadow: 0 2px 8px rgba(129, 51, 255, 0.3);
	color: transparent;
}

.ro-signup.is-sent .ro-signup__check {
	opacity: 1;
}

.ro-signup.is-sent .ro-signup__check path {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.35s 0.1s cubic-bezier(0.65, 0, 0.35, 1);
}

.ro-signup__done {
	flex: 1 0 100%;
	color: #be0000;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--ro-lh-body-s);
}

.ro-signup__done:empty {
	display: none;
}

.ro-signup.is-done .ro-signup__done {
	position: absolute;
	top: var(--ro-signup-pt);
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--wp--preset--color--headings);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	line-height: var(--ro-lh-body);
	outline: none;
}

.ro-signup.is-done > :not(.ro-signup__done) {
	visibility: hidden;
}

.ro-signup__done-icon {
	flex: none;
	width: 28px;
	height: 28px;
	margin-top: calc((var(--ro-lh-body) - 28px) / 2);
}

.ro-signup__done-icon circle {
	fill: var(--wp--preset--color--highlight);
}

.ro-signup__done-icon path {
	stroke-dasharray: 20;
	stroke-dashoffset: 20;
	animation: ro-tick-draw 0.4s 0.35s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.ro-summit__img {
	flex: 0 0 min(534px, 40%);
	aspect-ratio: 534 / 372;
	overflow: hidden;
	border-radius: 24px;
}

.ro-summit__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 899px) {
	.ro-summit__card {
		flex-direction: column;
		align-items: stretch;
	}

	.ro-summit__img {
		order: -1;
		flex-basis: auto;
		aspect-ratio: 278 / 205;
		border-radius: 16px;
	}

	.ro-summit__content {
		gap: 16px;
	}

	.ro-signup {
		--ro-signup-pt: 8px;
		flex-direction: column;
		align-items: stretch;
	}

	.ro-signup__input {
		flex: none;
		height: 52px;
	}
}

/* Managed OS -------------------------------------------------------------- */

.ro-os__top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(32px, 27.92px + 1.046vw, 48px);
	width: 100%;
}

/* 80% of the content column up to 1097px (1920); beyond 1920 it grows a little at that share (57.14%) and
   stops at 1280px (around 2240), so it stays in proportion to the section text on ultra-wide screens. */
.ro-os__img {
	width: min(max(min(80%, 1097px), 57.14cqw), 1280px);
}

.ro-os__img img {
	width: 100%;
	height: auto;
}

/* Tilt (mouse only; theme.js drives it): the mockup turns gently to face the cursor, the frame edge
   nearest it catches brand-blue light and a faint grey shadow shifts slightly. The insets and radius
   trace the rounded glass frame inside the image (2742 x 1880 source: 24px sides, 20px top, 30px bottom,
   52px corners) so the light stays on the frame, never on the image's white margin. */
.ro-os__img--desktop {
	position: relative;
}

.ro-os__img--desktop.is-tilting {
	transform: perspective(1800px) rotateX(var(--ro-rx, 0deg)) rotateY(var(--ro-ry, 0deg)) scale(calc(1 + 0.005 * var(--ro-a, 0)));
	will-change: transform;
}

.ro-os__img--desktop::before,
.ro-os__img--desktop::after {
	content: "";
	position: absolute;
	inset: 1.064% 0.875% 1.596%;
	border-radius: 1.93% / 2.842%;
	opacity: var(--ro-a, 0);
	pointer-events: none;
}

/* Edge light: a thin ring on the frame, brightest on the side nearest the cursor. */
.ro-os__img--desktop::before {
	padding: 1.5px;
	background: radial-gradient(circle at var(--ro-gx, 50%) var(--ro-gy, 50%), rgba(110, 76, 255, 0.95) 0, rgba(146, 121, 255, 0.6) 30%, rgba(183, 165, 255, 0) 65%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Surface: the far side shades slightly as it turns away; a very light grey shadow sits under the frame. */
.ro-os__img--desktop::after {
	background: radial-gradient(circle at var(--ro-gx, 50%) var(--ro-gy, 50%), rgba(17, 18, 21, 0) 40%, rgba(17, 18, 21, 0.08) 100%);
	box-shadow: var(--ro-lx, 0px) var(--ro-ly, 10px) 40px -16px rgba(17, 18, 21, 0.1);
}

/* Phone mockup: sized so the visible frame (322 of the image's 344px, the rest is its soft shadow) spans the
   text column edge to edge; capped so it stays phone-sized on small tablets. */
.ro-os__img--mobile {
	display: none;
	width: min(100% * 344 / 322, 440px);
	max-width: none;
}

@media (max-width: 767px) {
	.ro-os__img--desktop {
		display: none;
	}

	.ro-os__img--mobile {
		display: block;
	}
}

/* Comparison -------------------------------------------------------------- */

.ro-compare__title {
	max-width: 1034px;
	text-align: center;
}

.ro-compare__table {
	width: 100%;
	padding-inline: 32px;
}

.ro-compare__head,
.ro-compare__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ro-compare__head {
	padding-inline: 1px;
}

.ro-compare__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 24px;
	border-radius: 16px 16px 0 0;
	background: var(--wp--preset--color--highlight);
}

.ro-compare__brand img {
	width: 64px;
	height: 47px;
}

.ro-compare__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 20px 24px;
	text-align: center;
}

.ro-compare__col-title {
	color: var(--wp--preset--color--headings);
	font-size: var(--wp--preset--font-size--h-6);
	font-weight: 500;
	line-height: var(--ro-lh-h6);
}

.ro-compare__col-sub {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--ro-lh-body-s);
}

.ro-compare__body {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--table-border);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.ro-compare__row > * {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 118px;
	padding: 20px 32px;
	border-bottom: 1px solid var(--wp--preset--color--table-border);
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--ro-lh-body-s);
}

.ro-compare__row > .ro-compare__q {
	padding: 20px 16px 20px 24px;
	color: var(--wp--preset--color--headings);
	letter-spacing: -0.2px;
}

.ro-compare__row > .ro-compare__ro {
	border-bottom-color: #d0d1d4;
	background: var(--wp--preset--color--highlight);
	color: #fff;
}

.ro-compare__row > .ro-compare__a {
	border-right: 1px solid #d0d1d4;
}

.ro-compare__row:last-child > * {
	border-bottom: 0;
}

.ro-compare__row:last-child > .ro-compare__ro {
	border-radius: 0 0 16px 16px;
}

/* Column labels: read by screen readers on desktop, shown on the mobile cards. */
.ro-compare__row > :not(.ro-compare__q)::before {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.ro-compare__ro::before {
	content: "Remotely Outsource: ";
}

.ro-compare__a::before {
	content: "In-house employee: ";
}

.ro-compare__b::before {
	content: "Specialized agencies (marketing, lead gen, etc.): ";
}

@media (max-width: 899px) {
	.ro-compare__table {
		padding-inline: 0;
	}

	.ro-compare__head {
		display: none;
	}

	.ro-compare__body {
		display: flex;
		flex-direction: column;
		gap: 16px;
		overflow: visible;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	.ro-compare__row {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		border: 1px solid #dadbdd;
		border-radius: 16px;
		background: #fff;
	}

	.ro-compare__row > * {
		display: block;
		min-height: 0;
		padding: 0 16px;
		border: 0;
	}

	.ro-compare__row > .ro-compare__q {
		padding: 16px;
		font-size: var(--wp--preset--font-size--h-6);
		font-weight: 500;
		line-height: var(--ro-lh-h6);
		letter-spacing: 0;
	}

	.ro-compare__row > .ro-compare__ro {
		padding: 16px;
	}

	.ro-compare__row:last-child > .ro-compare__ro {
		border-radius: 0;
	}

	.ro-compare__row > .ro-compare__a {
		padding: 16px 16px 12px;
		border-right: 0;
	}

	.ro-compare__row > .ro-compare__b {
		padding: 12px 16px 16px;
		background: linear-gradient(var(--ro-divider), var(--ro-divider)) no-repeat 16px 0 / calc(100% - 32px) 1px;
	}

	.ro-compare__row > :not(.ro-compare__q)::before {
		position: static;
		display: block;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		margin-bottom: 4px;
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--body-xs);
		line-height: var(--ro-lh-body-xs);
		white-space: normal;
	}

	.ro-compare__row > .ro-compare__ro::before {
		margin-bottom: 8px;
		padding-left: 30px;
		background: url("../images/compare-ro.svg") no-repeat left center / 22px 16px;
		color: #fff;
		font-weight: 700;
	}

	.ro-compare__ro::before {
		content: "Remotely Outsource";
	}

	.ro-compare__a::before {
		content: "In-house employee";
	}

	.ro-compare__b::before {
		content: "Specialized agencies (marketing, lead gen, etc.)";
	}
}

/* Phones: the comparison cards stack as you scroll. Each card sticks a little lower than the one before
   (uneven steps, like a hand-stacked pile) so the top edge of every earlier card stays visible; theme.js
   shrinks a covered card slightly as the next one lands on it. The heading sticks too, at its usual distance
   above the first card, and theme.js lines up everyone's release point so heading and stack scroll away as
   one piece. The spacer after the last card lets the full stack rest for a moment first. */
@media (max-width: 767px) {
	/* theme.js adds .is-stacking only when a whole card fits between its resting line and the bottom of the
	   screen; on very short screens the cards stay a normal list so no answer is ever hidden under the pile. */
	.ro-compare.is-stacking .ro-compare__title {
		position: sticky;
	}

	.ro-compare.is-stacking .ro-compare__body::after {
		content: "";
		flex: none;
		height: 96px;
	}

	.ro-compare.is-stacking .ro-compare__row {
		position: sticky;
		top: var(--ro-stack-top);
	}

	.ro-compare__row {
		--ro-stack-top: 96px;
		transform-origin: 50% 0;
	}

	.ro-compare__row:nth-child(2) {
		--ro-stack-top: 110px;
	}

	.ro-compare__row:nth-child(3) {
		--ro-stack-top: 121px;
	}

	.ro-compare__row:nth-child(4) {
		--ro-stack-top: 137px;
	}

	.ro-compare__row:nth-child(5) {
		--ro-stack-top: 148px;
	}

	.ro-compare__row:nth-child(6) {
		--ro-stack-top: 162px;
	}

	.ro-compare__row:nth-child(7) {
		--ro-stack-top: 173px;
	}
}

/* Closing CTA ------------------------------------------------------------- */

.ro-cta {
	gap: clamp(28px, 22.9px + 1.307vw, 48px);
	padding-bottom: clamp(32px, 27.92px + 1.046vw, 48px);
}

.ro-cta__lead {
	max-width: 744px;
}

/* Figma's closing headings sit in a 1034px box: longer ones (About) break onto two lines, Home's stays on one. */
.ro-cta .ro-section-head > h2 {
	max-width: 1034px;
}

/* Inner pages: About, Contact -------------------------------------------- */

/* Figma runs these sections together, without the hairline rule used between the Home sections. */
.ro-section + .ro-section--norule::before {
	content: none;
}

/* Page heroes: the title sits where the Home headline does (240px down at 1920, 120px on phones); the
   section's usual gap (32 -> 80) and bottom padding (48 -> 80) already match Figma. */
.ro-page-hero {
	padding-top: clamp(120px, 89.41px + 7.843vw, 240px);
}

.ro-page-hero__title {
	max-width: 1138px;
	text-align: center;
}

/* Page not found: the same heading treatment as the other pages (clear of the glass header), centred in a screen
   that stays tall enough for the footer illustration not to crowd it. */
.ro-notfound {
	justify-content: center;
	min-height: min(72vh, 640px);
	padding-bottom: clamp(48px, 39.84px + 2.092vw, 80px);
}

/* About: the "where we started" photo in a glass frame (the header bar's treatment: lilac hairline, faint white
   sheen, soft lilac shadow), with the handwritten note tucked under its left edge. */
.ro-about-hero__media {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
}

.ro-framed {
	width: 100%;
	padding: 8px;
	border: 1px solid var(--ro-glass-border);
	border-radius: 24px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0) 100%),
		rgba(218, 219, 221, 0.08);
	box-shadow: 0 2px 12px rgba(219, 210, 255, 0.08);
}

.ro-framed img {
	width: 100%;
	height: auto;
	aspect-ratio: 1199 / 735;
	object-fit: cover;
	border-radius: 16px;
}

.ro-about-hero__note {
	width: clamp(153px, 137.7px + 3.922vw, 213px);
}

.ro-about-hero__note img {
	width: 100%;
	height: auto;
}

/* Figma: the frame is 1236 of the 1440 column (85.8%), with 18/20px of glass around the photo. */
@media (min-width: 768px) {
	.ro-about-hero__media {
		width: min(1236px, 85.8%);
		gap: 0;
	}

	.ro-framed {
		padding: 20px 18px;
		border-radius: 27px;
	}
}

/* About: the story statement in DM Sans Medium Italic (the real italic, self-hosted) with brand-blue quote
   marks; Figma 52/60 at 1920, 24/32 on phones. */
.ro-quote {
	max-width: 1440px;
	color: var(--wp--preset--color--headings);
	font-size: clamp(24px, 16.86px + 1.83vw, 52px);
	font-style: italic;
	font-weight: 500;
	line-height: clamp(32px, 24.86px + 1.83vw, 60px);
	letter-spacing: -0.021em;
	text-align: center;
	text-wrap: balance;
}

.ro-quote__mark {
	color: var(--wp--preset--color--action);
}

/* About: "What we stand for", a white card in a thick card-grey ring (Figma 20px ring, radius 60 and 80px padding
   at 1920; 8px ring, radius 32, 32/24px padding on phones). Each value hangs off a grey bar that turns Brand
   Blue 400 on hover or touch, like the Home steps. Titles use the Home card/benefit title size and the copy uses
   Body, as on Home. */
.ro-values {
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 28.94px + 0.784vw, 44px);
	width: 100%;
	padding: clamp(32px, 19.76px + 3.137vw, 80px) clamp(24px, 9.73px + 3.66vw, 80px);
	border: clamp(8px, 4.95px + 0.785vw, 20px) solid var(--wp--preset--color--card);
	border-radius: clamp(32px, 24.86px + 1.83vw, 60px);
	background: var(--wp--preset--color--white);
}

.ro-values__head {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 6.98px + 0.261vw, 12px);
}

.ro-values__lead,
.ro-value__body {
	max-width: 50em;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--ro-lh-body);
}

.ro-values__list {
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 28.94px + 0.784vw, 44px);
}

.ro-value {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 3.92px + 1.046vw, 24px);
	padding: 4px 0 4px 21px;
}

/* 5px wide with round ends, 16px from the text (Figma). Grey at rest (user: Figma's logo-mark blue #4f3fe8 at 50%
   read as light purple), the same light grey as the FAQ buttons and menu dividers; blue only under the pointer or
   a finger. */
.ro-value::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 5px;
	border-radius: 5px;
	background-color: var(--wp--preset--color--table-border);
	transition: background-color 0.25s ease;
}

@media (hover: hover) {
	.ro-value:hover::before {
		background-color: var(--wp--preset--color--action-hover);
	}
}

.ro-value.is-touched::before {
	background-color: var(--wp--preset--color--action-hover);
}

.ro-value__title {
	font-size: var(--wp--preset--font-size--h-4);
	line-height: var(--ro-lh-h4);
	letter-spacing: -0.005em;
}

@media (min-width: 768px) {
	.ro-value__title {
		font-size: calc(var(--wp--preset--font-size--h-4) * 0.8);
		line-height: calc(var(--ro-lh-h4) * 0.8);
	}
}

/* Contact: heading, then the form in the same ringed white card (Figma 20px ring, radius 24, 40px padding at
   1920; 8px ring, 28/24px padding on phones). Fields use the Home field style: pills with a 1.5px border,
   16px text and the light placeholder; text areas keep the pill's softness with a 24px radius. */
.ro-contact__head {
	max-width: 1138px;
}

.ro-contact-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	max-width: 1206px;
	padding: clamp(28px, 24.94px + 0.784vw, 40px) clamp(24px, 19.92px + 1.046vw, 40px);
	border: clamp(8px, 4.95px + 0.785vw, 20px) solid var(--wp--preset--color--card);
	border-radius: 24px;
	background: var(--wp--preset--color--white);
}

.ro-contact-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 16px;
}

.ro-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ro-field__label {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	line-height: var(--ro-lh-body);
}

/* Required fields: a star after the label in Figma's Text/Error red (Error Red/500 #ee0000, 4.5:1 on white).
   Screen readers hear "required" from the field itself, so the star is hidden from them. */
.ro-field__req {
	margin-left: 0.15em;
	color: var(--wp--preset--color--error);
}

.ro-field__input {
	width: 100%;
	height: 60px;
	padding: 0 24px;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 100px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--headings);
	font: inherit;
	font-size: 16px;
	line-height: 26px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ro-field__input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.ro-field__input:focus,
.ro-field__input:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--action);
	box-shadow: 0 0 0 3px rgba(74, 31, 255, 0.12);
}

/* Text areas grow with what's typed where the browser can (field-sizing), otherwise they can be dragged taller. */
.ro-field__area {
	height: auto;
	min-height: 71px;
	padding: 21px 24px;
	border-radius: 24px;
	field-sizing: content;
	resize: vertical;
}

.ro-field__area--tall {
	min-height: 112px;
}

/* Where the boxes grow by themselves, the drag handle is only clutter. */
@supports (field-sizing: content) {
	.ro-field__area {
		resize: none;
	}
}

.ro-field__select {
	appearance: none;
	padding-right: 56px;
	background-image: url("../images/select-chevron.svg");
	background-repeat: no-repeat;
	background-position: right 24px center;
	background-size: 14px 8px;
	cursor: pointer;
}

.ro-field__select:has(option[value=""]:checked) {
	color: var(--wp--preset--color--muted);
}

/* Dropdowns (theme.js swaps the native select for these; the select stays in the form, hidden). Closed, the field
   is the same pill as the other fields. Open, it takes the focus ring, its chevron turns over in brand blue, and a
   white card drops down with the options: soft-purple highlight under the pointer or keyboard, the chosen one in
   brand blue with a check. The card's 24px corners match the text boxes; the options' 16px corners sit
   concentric inside its 8px padding. */
.ro-select {
	position: relative;
}

.ro-select__field {
	position: relative;
	display: flex;
	align-items: center;
	padding-right: 56px;
	cursor: pointer;
	user-select: none;
}

.ro-select__field.is-placeholder {
	color: var(--wp--preset--color--muted);
}

.ro-select__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ro-select__field::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 24px;
	width: 14px;
	height: 8px;
	margin-top: -4px;
	background-color: var(--wp--preset--color--muted);
	-webkit-mask: url("../images/select-chevron.svg") center / 14px 8px no-repeat;
	mask: url("../images/select-chevron.svg") center / 14px 8px no-repeat;
	transition: rotate 0.3s var(--ro-ease-out), background-color 0.2s ease;
}

.ro-select.is-open .ro-select__field {
	border-color: var(--wp--preset--color--action);
	box-shadow: 0 0 0 3px rgba(74, 31, 255, 0.12);
}

.ro-select.is-open .ro-select__field::after {
	rotate: 180deg;
	background-color: var(--wp--preset--color--action);
}

.ro-select__list {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	left: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 2px;
	/* theme.js fits the height to the room above or below the field; if the list still has to scroll, it scrolls
	   without the browser's scrollbar. */
	max-height: 376px;
	margin: 0;
	padding: 8px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 24px;
	background-color: var(--wp--preset--color--white);
	box-shadow: 0 24px 48px -20px rgba(17, 18, 21, 0.22), 0 4px 14px rgba(17, 18, 21, 0.06);
	list-style: none;
	transform-origin: 50% 0;
	visibility: hidden;
	opacity: 0;
	translate: 0 -8px;
	scale: 0.98;
	/* Not clickable while it fades out, so a quick click on the field underneath can't pick an unseen option. */
	pointer-events: none;
	transition: opacity 0.15s ease, translate 0.2s ease, scale 0.2s ease, visibility 0s linear 0.2s;
}

.ro-select__list::-webkit-scrollbar {
	display: none;
}

/* No room below the field (near the bottom of the screen): the card opens upwards instead. */
.ro-select.is-up .ro-select__list {
	top: auto;
	bottom: calc(100% + 8px);
	transform-origin: 50% 100%;
	translate: 0 8px;
}

.ro-select.is-open .ro-select__list {
	visibility: visible;
	opacity: 1;
	translate: none;
	scale: none;
	pointer-events: auto;
	transition: opacity 0.2s ease, translate 0.35s var(--ro-ease-out), scale 0.35s var(--ro-ease-out), visibility 0s;
}

.ro-select__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 12px 16px;
	border-radius: 16px;
	color: var(--wp--preset--color--body);
	font-size: 16px;
	line-height: 24px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ro-select__option.is-active {
	background-color: var(--wp--preset--color--soft);
	color: var(--wp--preset--color--headings);
}

.ro-select__option[aria-selected="true"] {
	color: var(--wp--preset--color--action);
	font-weight: 500;
}

.ro-select__option[aria-selected="true"]::after {
	content: "";
	flex: none;
	width: 6px;
	height: 11px;
	margin: -3px 4px 0 0;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	rotate: 45deg;
}

.ro-contact-form__submit {
	width: 100%;
	border: 0;
	font-family: inherit;
}

/* Text / Secondary (#6b7280) rather than Figma's #737780, which is a hair under the 4.5:1 minimum on white. */
.ro-contact-form__note {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--body-xs);
	line-height: var(--ro-lh-body-xs);
	letter-spacing: 0.1px;
	text-align: center;
}

.ro-contact-form__note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ro-contact-form__note a:hover {
	color: var(--wp--preset--color--action);
}

.ro-contact-form__status {
	color: var(--wp--preset--color--headings);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--ro-lh-body-s);
	text-align: center;
}

.ro-contact-form__status:empty {
	display: none;
}

/* Figma Error Red/600: readable on white (5.9:1); the brighter Error/500 is not. */
.ro-contact-form__status.is-error {
	color: #be0000;
}

/* Sent: the fields step aside and the thank-you line takes the card. */
.ro-contact-form.is-sent > :not(.ro-contact-form__status) {
	display: none;
}

.ro-contact-form.is-sent .ro-contact-form__status {
	padding: 48px 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	line-height: var(--ro-lh-body);
}

@media (max-width: 767px) {
	.ro-contact-form {
		gap: 28px;
	}

	.ro-contact-form__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	/* Phones: room for the longer placeholders to wrap (Figma 88-110px) where field-sizing isn't supported. */
	.ro-field__area {
		min-height: 96px;
	}
}

/* FAQ --------------------------------------------------------------------- */

/* Figma: 80px under the lead and 80px more above the list at 1920; on phones the list starts 32px under the lead.
   The lead keeps Figma's narrow 578px box, so it breaks into two short lines under the title. */
.ro-faq-hero {
	padding-bottom: clamp(32px, 19.76px + 3.137vw, 80px);
}

.ro-faq-hero .ro-lead {
	max-width: 578px;
}

.ro-faq {
	padding-top: clamp(0px, -20.39px + 5.229vw, 80px);
}

.ro-faq__list {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 10.98px + 0.261vw, 16px);
	width: 100%;
}

/* Each question is a grey card; open, it turns white inside the same grey ring (Figma: 12px ring, radius 32,
   32/48px padding at 1920; 8px ring, radius 24, 28/24px padding on phones). The question is the whole top of the
   card, so all of it opens and closes the answer. Browsers round border widths down to whole pixels, so the ring
   widths here and on the About/Contact cards lean a hair high and let the clamp land on Figma's exact value. */
.ro-faq__item {
	--ro-faq-x: clamp(16px, 10.9px + 1.307vw, 36px);
	--ro-faq-gap: clamp(12px, 8.94px + 0.784vw, 24px);
	padding-bottom: 4px;
	border: clamp(8px, 6.99px + 0.262vw, 12px) solid var(--wp--preset--color--card);
	border-radius: clamp(24px, 21.96px + 0.523vw, 32px);
	background-color: var(--wp--preset--color--card);
	transition: background-color 0.3s ease;
}

.ro-faq__item[open] {
	background-color: var(--wp--preset--color--white);
}

/* At least as tall as the toggle, so a one-line question on a phone keeps Figma's even 28px above and below it. */
.ro-faq__item > summary {
	position: relative;
	display: block;
	min-height: 68px;
	padding: 20px calc(var(--ro-faq-x) + 32px + var(--ro-faq-gap)) 16px var(--ro-faq-x);
	color: var(--wp--preset--color--headings);
	font-size: var(--wp--preset--font-size--h-5);
	line-height: var(--ro-lh-h5);
	cursor: pointer;
}

.ro-faq__item > summary::-webkit-details-marker {
	display: none;
}

/* The round toggle (Figma: 32px, grey #dadbdd; open: lilac #9279ff) and its chevron. The chevron is the Figma
   vector used as a mask, so it can turn white and flip to point up when the answer is open. */
.ro-faq__item > summary::before,
.ro-faq__item > summary::after {
	content: "";
	position: absolute;
	top: 20px;
	right: var(--ro-faq-x);
	width: 32px;
	height: 32px;
}

.ro-faq__item > summary::before {
	border-radius: 50%;
	background-color: #dadbdd;
	transition: background-color 0.3s ease;
}

.ro-faq__item > summary::after {
	background-color: var(--wp--preset--color--headings);
	-webkit-mask: url("../images/faq-chevron.svg") center / 32px 32px no-repeat;
	mask: url("../images/faq-chevron.svg") center / 32px 32px no-repeat;
	transition: background-color 0.3s ease, rotate 0.4s var(--ro-ease-out);
}

@media (hover: hover) {
	.ro-faq__item:not([open]) > summary:hover::before {
		background-color: #cdcfd2;
	}
}

.ro-faq__item[open] > summary::before {
	background-color: #9279ff;
}

.ro-faq__item[open] > summary::after {
	background-color: var(--wp--preset--color--white);
	rotate: 180deg;
}

/* Keyboard focus rings the whole card rather than just the question strip. */
.ro-faq__item > summary:focus-visible {
	outline: none;
}

.ro-faq__item:has(> summary:focus-visible) {
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 3px;
}

/* The answer sits under the question, clear of the toggle, capped at Figma's 960px; each paragraph ends 16px
   above the next (the last one 20px above the card's edge, with the card's own 4px). */
.ro-faq .ro-faq__item > :not(summary) {
	max-width: min(960px, 100% - 2 * var(--ro-faq-x) - 32px - var(--ro-faq-gap));
	margin-inline: var(--ro-faq-x);
	padding-bottom: 16px;
	color: var(--wp--preset--color--body);
	text-wrap: pretty;
}

/* Opening and closing glide instead of snapping, where the browser can animate to the answer's natural height. */
@media (prefers-reduced-motion: no-preference) {
	@supports (interpolate-size: allow-keywords) {
		.ro-faq__item {
			interpolate-size: allow-keywords;
		}

		.ro-faq__item::details-content {
			block-size: 0;
			overflow-y: clip;
			opacity: 0;
			transition: block-size 0.45s var(--ro-ease-out), opacity 0.3s ease, content-visibility 0.45s allow-discrete;
		}

		.ro-faq__item[open]::details-content {
			block-size: auto;
			opacity: 1;
		}
	}
}

/* Legal pages: Privacy policy, Terms of use -------------------------------- */

/* Effective date: Body Small in Text / Secondary (Figma's #737780 is a hair under the 4.5:1 minimum on white). */
.ro-legal__date {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--ro-lh-body-s);
}

/* The privacy request card is the contact form's card, as wide as the policy text under it. */
.ro-privacy-form {
	max-width: 50em;
	gap: clamp(16px, 12.94px + 0.784vw, 24px);
}

.ro-contact-form__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ro-contact-form__title {
	font-size: var(--wp--preset--font-size--h-5);
	font-weight: 400;
	line-height: var(--ro-lh-h5);
	letter-spacing: 0;
}

.ro-contact-form__lead {
	color: var(--wp--preset--color--body);
}

/* Figma sets the policy in a 1440px column; at Body size that's ~150 characters a line, far past comfortable
   reading, so the text keeps the 50em cap the section intros use (1000px at 1920). Figma's 160px from the last
   line to the footer, 96px on phones. */
.ro-legal {
	padding-bottom: clamp(96px, 79.69px + 4.183vw, 160px);
}

.ro-legal__col {
	display: flex;
	flex-direction: column;
	gap: clamp(48px, 43.92px + 1.046vw, 64px);
	width: 100%;
	max-width: 50em;
}

.ro-legal__section,
.ro-legal__body,
.ro-legal__sub {
	display: flex;
	flex-direction: column;
}

.ro-legal__section {
	gap: var(--ro-head-gap);
}

.ro-legal__body {
	gap: 24px;
}

.ro-legal__sub {
	gap: 16px;
}

/* "The short version": a card-grey panel (Figma: radius 24, 32px padding; 24px on phones). */
.ro-legal__summary {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 10.98px + 0.261vw, 16px);
	padding: clamp(24px, 21.96px + 0.523vw, 32px);
	border-radius: 24px;
	background-color: var(--wp--preset--color--card);
}

/* Numbered headings use H4's size (32/40 at 1920), sub-headings and the panel title H6's (22/30). */
.ro-legal h2 {
	font-size: var(--wp--preset--font-size--h-4);
	line-height: var(--ro-lh-h4);
	letter-spacing: -0.005em;
}

.ro-legal h3,
.ro-legal .ro-legal__summary-title {
	font-size: var(--wp--preset--font-size--h-6);
	line-height: var(--ro-lh-h6);
	letter-spacing: 0;
}

.ro-legal [id] {
	scroll-margin-top: 120px;
}

.ro-legal :is(p, li) {
	text-wrap: pretty;
}

/* Bullets hang in the first 1.5em, as in Figma; items run on without extra space. */
.ro-legal ul {
	padding-left: 1.5em;
}

/* Figma's lead-ins ("What this policy covers:", "Service providers") are DM Sans Medium. */
.ro-legal strong {
	font-weight: 500;
}

.ro-legal a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* "How we use it": two even columns in a hairline frame with a card-grey header row (Figma: radius 16, 16/24px
   cells, 16/12px on phones). */
.ro-legal .ro-legal__table {
	overflow-x: auto;
	margin-inline: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
}

.ro-legal .ro-legal__table table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.ro-legal .ro-legal__table thead {
	border: 0;
}

.ro-legal .ro-legal__table tbody tr {
	border-top: 1px solid var(--wp--preset--color--border);
}

.ro-legal .ro-legal__table :is(th, td) {
	padding: 16px clamp(12px, 8.94px + 0.784vw, 24px);
	border: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--ro-lh-body-s);
	text-align: left;
	vertical-align: top;
}

.ro-legal .ro-legal__table th {
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--headings);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
}

/* Footer ------------------------------------------------------------------ */

.ro-footer {
	position: relative;
	padding: clamp(196px, 120.29px + 19.412vw, 493px) var(--ro-gutter) 0;
}

/* The illustration fills the width up to 1920 (its full height there), then stays 1920 wide and centred:
   its white background blends into the page, so wider screens get white margins instead of a stretched,
   blurred crop. */
.ro-footer__bg {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 0;
	width: min(100%, 1920px);
	height: clamp(355px, 197.47px + 40.392vw, 973px);
	transform: translateX(-50%);
}

.ro-footer__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Wider than the illustration: fade its sides and top into the page so its near-white edge never shows. */
@media (min-width: 1921px) {
	.ro-footer__bg {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 8%);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 8%);
		mask-composite: intersect;
	}
}

.ro-footer__card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 23.84px + 2.092vw, 64px);
	max-width: 1440px;
	margin-inline: auto;
	padding: clamp(32px, 23.84px + 2.092vw, 64px) clamp(24px, 9.72px + 3.66vw, 80px) clamp(32px, 27.92px + 1.046vw, 48px);
	border: 1px solid var(--ro-glass-border);
	border-bottom: 0;
	border-radius: 32px 32px 0 0;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 30%, rgba(255, 255, 255, 0) 100%),
		rgba(219, 210, 255, 0.2);
	box-shadow: 0 2px 12px rgba(219, 210, 255, 0.08);
	-webkit-backdrop-filter: blur(25px);
	backdrop-filter: blur(25px);
}

.ro-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 48px;
}

.ro-footer__col {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ro-footer__col p {
	color: #000;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--ro-lh-body);
}

.ro-footer__col .ro-footer__title {
	padding-bottom: 4px;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--h-6);
	font-weight: 500;
	line-height: var(--ro-lh-h6);
}

/* Hover: brand-blue underline draws in from the left while the text turns brand blue. */
.ro-footer__col a {
	padding-bottom: 3px;
	background: linear-gradient(var(--wp--preset--color--action), var(--wp--preset--color--action)) no-repeat 0 100% / 0 2px;
	color: inherit;
	text-decoration: none;
	transition: background-size 0.3s ease-out, color 0.3s ease-out;
}

.ro-footer__col a:hover,
.ro-footer__col a:focus-visible {
	background-size: 100% 2px;
	color: var(--wp--preset--color--action);
}

.ro-footer__divider {
	width: 100%;
	height: 1px;
	border: 0;
	background: var(--ro-divider);
	opacity: 1;
}

.ro-footer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* Figma: Black at 50%, which is only 3.9:1 on the lilac glass; 60% keeps it a quiet grey but passes the WCAG AA
   4.5:1 text minimum (about 5.6:1). */
.ro-footer__copy {
	color: rgba(0, 0, 0, 0.6);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--ro-lh-body-s);
}

@media (max-width: 767px) {
	/* Full-width card with Figma's 32px rounded top corners and 1px glass outline (base rule). */
	.ro-footer {
		padding-inline: 0;
	}

	.ro-footer .ro-logo {
		width: 156px;
	}

	.ro-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 16px;
	}

	.ro-footer__bar {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.ro-footer__bar .wp-block-button,
	.ro-footer__bar .wp-block-button__link {
		width: 100%;
	}
}

/* Motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Scroll reveal (every screen size). theme.js marks each element with data-ro-reveal and plays it once, as it
   comes up into the lower part of the screen:
   - words:  headings rise out of a soft blur one word at a time (sizes in em, so it reads the same at
             every screen width);
   - rise:   text, buttons, process steps and benefits fade up;
   - card:   whole blocks (carousel cards, the summit card, the comparison table) rise from a little further;
   - visual: large images fade up from further still and settle from 97% scale;
   - fade:   the footer illustration simply fades in where it is;
   - line:   a process row's dotted line fades in where it is while its steps rise (the bend between the
             rows comes with the second row).
   Photos inside the carousel cards also settle from a slight zoom within their frame. Reveals use the
   individual translate/scale properties, so they add to the transforms other effects own (the Managed OS
   tilt, the footer illustration's centring) instead of replacing them. When an element has played, theme.js
   removes its reveal styles, so nothing is left blurred or on its own layer. */
.ro-word {
	display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
	/* The hero is hidden from the first paint (.ro-js is set in <head>) so it can't flash before theme.js
	   takes over; if theme.js never runs, it shows anyway after 2.5s. */
	.ro-js:not(.ro-reveal-on) :is(.ro-hero__title, .ro-hero__lead, .ro-prompt, .ro-hero__img, .ro-page-hero__title, .ro-page-hero__lead, .ro-legal__date, .ro-about-hero__media > *, .ro-contact-form) {
		opacity: 0;
		animation: ro-reveal-failsafe 0.01s linear 2.5s forwards;
	}

	[data-ro-reveal] {
		--ro-in-y: 28px;
		--ro-in-s: 1;
		--ro-in-dur: 1100ms;
	}

	[data-ro-reveal="words"] {
		--ro-in-y: 0.32em;
		--ro-in-blur: 0.18em;
		--ro-in-dur: 1200ms;
	}

	[data-ro-reveal="card"] {
		--ro-in-y: 40px;
		--ro-in-dur: 1200ms;
	}

	[data-ro-reveal="visual"] {
		--ro-in-y: 56px;
		--ro-in-s: 0.97;
		--ro-in-dur: 1400ms;
	}

	[data-ro-reveal]:not([data-ro-reveal="words"], [data-ro-reveal="line"]),
	[data-ro-reveal="words"] .ro-word {
		opacity: 0;
	}

	.is-revealing[data-ro-reveal]:not([data-ro-reveal="words"], [data-ro-reveal="line"], [data-ro-reveal="fade"]) {
		animation: ro-in var(--ro-in-dur) var(--ro-ease-reveal) var(--ro-in-delay, 0ms) both;
	}

	/* Fades have no movement, so an even ease-in-out reads calmer than the reveals' quick-start curve. */
	.is-revealing[data-ro-reveal="fade"] {
		animation: ro-fade 1600ms cubic-bezier(0.37, 0, 0.63, 1) var(--ro-in-delay, 0ms) both;
	}

	.ro-process__row[data-ro-reveal="line"]::before,
	.ro-process__flow:has(> .ro-process__row + [data-ro-reveal="line"]) > .ro-process__row:first-child::after {
		opacity: 0;
	}

	.ro-process__row.is-revealing[data-ro-reveal="line"]::before,
	.ro-process__flow:has(> .ro-process__row + .is-revealing[data-ro-reveal="line"]) > .ro-process__row:first-child::after {
		animation: ro-fade 1100ms cubic-bezier(0.37, 0, 0.63, 1) var(--ro-in-delay, 0ms) both;
	}

	.is-revealing[data-ro-reveal="words"] .ro-word {
		animation: ro-in-blur var(--ro-in-dur) var(--ro-ease-reveal) calc(var(--ro-in-delay, 0ms) + var(--i, 0) * var(--ro-word-step, 70ms)) both;
	}

	.is-revealing.ro-card .ro-card__img img {
		animation: ro-settle 1800ms var(--ro-ease-reveal) var(--ro-in-delay, 0ms) both;
	}

	/* Cards rise inside the carousel's scroller; room underneath keeps that from making it scroll vertically. */
	.ro-reveal-on .ro-carousel__track {
		padding-bottom: 40px;
		margin-bottom: -40px;
	}
}

/* Phones: the same timing, with shorter travel for the smaller screen (headings already scale with their size). */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
	[data-ro-reveal="rise"] {
		--ro-in-y: 20px;
	}

	[data-ro-reveal="card"] {
		--ro-in-y: 28px;
	}

	[data-ro-reveal="visual"] {
		--ro-in-y: 36px;
	}
}

@keyframes ro-in {
	from {
		opacity: 0;
		translate: 0 var(--ro-in-y);
		scale: var(--ro-in-s);
	}

	to {
		opacity: 1;
		translate: none;
		scale: none;
	}
}

@keyframes ro-in-blur {
	from {
		opacity: 0;
		translate: 0 var(--ro-in-y);
		filter: blur(var(--ro-in-blur));
	}

	to {
		opacity: 1;
		translate: none;
		filter: none;
	}
}

@keyframes ro-settle {
	from {
		scale: 1.08;
	}

	to {
		scale: none;
	}
}

@keyframes ro-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes ro-reveal-failsafe {
	to {
		opacity: 1;
	}
}

/* Cookie consent ---------------------------------------------------------- */

/* Sits above the header (z-index 100) so it is never half-covered by the pill. Bottom-anchored on
   desktop and phones alike: a top banner competes with the header glass and hides the hero. */
.ro-consent {
	position: fixed;
	z-index: 200;
	inset: auto 0 0;
	display: flex;
	/* Bottom right, out of the reading path: a centred bar sits on top of whatever the visitor came to read. */
	justify-content: flex-end;
	padding: clamp(12px, 8.92px + 1.046vw, 28px);
	pointer-events: none;
}

.ro-consent[hidden] {
	display: none;
}

.ro-consent__card {
	position: relative;
	width: min(100%, 400px);
	padding: clamp(18px, 16.47px + 0.392vw, 24px) clamp(18px, 16.47px + 0.392vw, 24px) clamp(16px, 14.47px + 0.392vw, 22px);
	border: 1px solid var(--ro-glass-border);
	border-radius: clamp(20px, 17.45px + 0.654vw, 30px);
	box-shadow: 0 8px 40px rgba(17, 18, 21, 0.14);
	pointer-events: auto;
	/* Enters from just below the fold; the transition is added once the banner is shown, so a
	   returning visitor's saved choice never animates anything. */
	translate: 0 16px;
	opacity: 0;
}

/* Same glass recipe as the nav pill, over a heavier white wash: this card carries body text that has
   to stay readable over the footer photo, where 8% white measures about 1.3:1. */
.ro-consent__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0) 100%),
		rgba(251, 251, 251, 0.82);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	backdrop-filter: blur(20px) saturate(160%);
}

.ro-consent.is-shown .ro-consent__card {
	translate: none;
	opacity: 1;
	transition: translate 0.5s var(--ro-ease-out), opacity 0.4s ease;
}

.ro-consent.is-leaving .ro-consent__card {
	translate: 0 16px;
	opacity: 0;
	transition: translate 0.35s var(--ro-ease-out), opacity 0.3s ease;
}

.ro-consent__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.ro-consent__title {
	margin: 0 0 4px;
	color: var(--wp--preset--color--headings);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--ro-lh-body-s);
	font-weight: 500;
	letter-spacing: -0.2px;
}

/* The arrow that opens the detail. 32px box for a comfortable target without crowding the title. */
.ro-consent__more {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: -5px -6px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--secondary);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ro-consent__more:hover,
.ro-consent__more:focus-visible {
	background: rgba(17, 18, 21, 0.06);
	color: var(--wp--preset--color--headings);
}

.ro-consent__chevron {
	transition: rotate 0.3s var(--ro-ease-out);
}

.ro-consent.is-choosing .ro-consent__chevron {
	rotate: 180deg;
}

.ro-consent__text {
	margin: 0;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--body-xs);
	line-height: var(--ro-lh-body-xs);
}

.ro-consent__text a {
	color: var(--wp--preset--color--action);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ro-consent__text a:hover {
	color: var(--wp--preset--color--action-hover);
}

/* Choices ----------------------------------------------------------------- */

.ro-consent__options {
	margin-top: 18px;
	border-top: 1px solid var(--wp--preset--color--table-border);
}

.ro-consent__options[hidden] {
	display: none;
}

.ro-consent__row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--table-border);
	cursor: pointer;
}

.ro-consent__row.is-locked {
	cursor: default;
}

.ro-consent__row-text {
	flex: 1;
	display: block;
}

.ro-consent__row-label {
	display: block;
	color: var(--wp--preset--color--headings);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: var(--ro-lh-body-s);
	font-weight: 500;
}

.ro-consent__row-note {
	display: block;
	margin-top: 2px;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--body-xs);
	line-height: var(--ro-lh-body-xs);
}

/* The switch: the real checkbox is laid over the track so it stays the hit target and keeps its own
   focus ring, rather than being replaced by a div that screen readers cannot operate. */
.ro-consent__switch {
	position: absolute;
	width: 44px;
	height: 26px;
	margin: 0;
	opacity: 0;
	cursor: inherit;
}

.ro-consent__track {
	position: relative;
	flex: none;
	width: 44px;
	height: 26px;
	margin-top: 2px;
	border-radius: 100px;
	background: var(--wp--preset--color--divider);
	transition: background-color 0.2s ease;
}

.ro-consent__track::after {
	content: "";
	position: absolute;
	inset: 3px auto 3px 3px;
	width: 20px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	box-shadow: 0 1px 3px rgba(17, 18, 21, 0.24);
	transition: translate 0.2s var(--ro-ease-out);
}

.ro-consent__switch:checked + .ro-consent__track {
	background: var(--wp--preset--color--action);
}

.ro-consent__switch:checked + .ro-consent__track::after {
	translate: 18px 0;
}

.ro-consent__switch:disabled + .ro-consent__track {
	background: var(--wp--preset--color--divider);
	opacity: 0.55;
}

.ro-consent__switch:focus-visible + .ro-consent__track {
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 3px;
}

/* Actions ----------------------------------------------------------------- */

.ro-consent__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
}

/* With the detail open, the toggles are the answer and "Save my choices" commits them, so the blanket
   "Only necessary" button goes: it would just be a third way to say the same thing. */
.ro-consent.is-choosing .ro-consent__btn[data-ro-consent-action="reject"] {
	display: none;
}

.ro-consent__btn {
	flex: 1 1 auto;
	padding: 11px 18px;
	border: 1px solid transparent;
	border-radius: 100px;
	font-family: inherit;
	font-size: var(--ro-fs-button);
	line-height: var(--ro-lh-button);
	font-weight: 500;
	letter-spacing: -0.2px;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ro-consent__btn[hidden] {
	display: none;
}

.ro-consent__btn--solid {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.ro-consent__btn--solid:hover,
.ro-consent__btn--solid:focus-visible {
	background: var(--wp--preset--color--highlight);
	box-shadow: 0 2px 8px rgba(129, 51, 255, 0.3);
}

.ro-consent__btn--ghost,
/* With the choices open, "Save my choices" is the button that finishes the job, so "Accept all" steps
   back to an outline: two solid buttons side by side read as two competing primary actions. */
.ro-consent.is-choosing .ro-consent__btn[data-ro-consent-action="accept"] {
	background: transparent;
	border-color: var(--wp--preset--color--table-border);
	color: var(--wp--preset--color--body);
}

.ro-consent__btn--ghost:hover,
.ro-consent__btn--ghost:focus-visible,
.ro-consent.is-choosing .ro-consent__btn[data-ro-consent-action="accept"]:hover,
.ro-consent.is-choosing .ro-consent__btn[data-ro-consent-action="accept"]:focus-visible {
	background: transparent;
	border-color: var(--wp--preset--color--action);
	color: var(--wp--preset--color--action);
	box-shadow: none;
}

/* On the narrowest phones the two buttons squeezed onto one row invite a mis-tap, so they stack —
   reversed, to keep "Accept all" under the text and the quieter choice below it. */
@media (max-width: 379px) {
	.ro-consent__actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.ro-consent__btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ro-consent__card,
	.ro-consent.is-shown .ro-consent__card,
	.ro-consent.is-leaving .ro-consent__card {
		translate: none;
		transition: opacity 0.2s ease;
	}
}