/*
 * 10-service.css
 *
 * The service-page blocks. Everything here is built from the tokens in
 * 01-tokens.css and the components already in 04-ui.css and 06-home.css; the
 * only genuinely new components are the ones the home page has no counterpart
 * for — the comparison table, the signal list, the disqualifier rows, the
 * pricing panel and the related-service shelf.
 *
 * Loaded conditionally from inc/service/register.php rather than from
 * revsculpt_stylesheets(), because only the rs_service and rs_hub pages use it
 * and every other page would be paying for it. It depends on the utilities handle so it still lands last
 * in the cascade.
 *
 * Part of the RevSculpt stylesheet — see style.css for the load order.
 * Media queries live beside the component they modify, not in a trailing block.
 */

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
/* The home hero reserves 170px of top padding for a video slot this page does
   not have, so the service hero sets its own. The breadcrumb trail sits inside
   that padding rather than above it, which keeps the H1 at the same optical
   height as the home page's. */
/* Title across the top over a hairline; the position and the button on the
   left, the page's product visual on the right (the user's comp, chosen in the
   Hero Lab as P03 on 2026-10-15; replaced the centred thesis over one wide
   plate of 2026-09-23). The H1 is one step above the index token on desktop
   (72 / 50 / 40) and in one ink: the comp drops the green accent. A page with
   no visual yet (--bare) keeps the copy column alone. */
/* The cloud band (assets/img/rs-service-hero.webp, 1920 x 285, transparent
   above the clouds) sits on the section's foot, full bleed, never narrower
   than its own 1920px so it is cropped rather than shrunk; the content and
   the visual's white frame paint over it (2026-10-23). */
.rs-svc-hero {
	position: relative;
	padding-block: var(--rs-section-y);
	background: url("../assets/img/rs-service-hero.webp") center bottom / max(100%, 1920px) auto no-repeat, var(--rs-bg);
	z-index: 2;
	overflow: clip;
}

.rs-svc-hero .rs-breadcrumbs {
	padding-top: 0;
}

.rs-svc-hero .rs-breadcrumbs ol {
	gap: var(--rs-s2);
}

.rs-svc-hero .rs-breadcrumbs li + li::before {
	content: ">";
	margin-right: var(--rs-s2);
}

.rs-svc-hero .rs-breadcrumbs a {
	color: var(--rs-grey);
}

.rs-svc-hero .rs-breadcrumbs [aria-current] {
	color: var(--rs-ink);
}

.rs-svc-hero__top {
	display: grid;
	justify-items: start;
	gap: var(--rs-s4);
}

.rs-svc-hero__top .rs-svc-hero__title {
	justify-self: stretch;
}

.rs-svc-hero__title {
	margin: 0;
	font-size: var(--rs-fs-heading-xl);
	font-weight: var(--rs-fw-heading);
	line-height: var(--rs-lh-heading-xl);
	letter-spacing: var(--rs-ls-heading-xl);
	text-wrap: pretty;
}

.rs-svc-hero__title .rs-accent {
	color: inherit;
}

.rs-svc-hero__body {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--rs-s7);
	align-items: start;
	margin-top: var(--rs-s6);
	padding-top: var(--rs-s5);
	border-top: 1px solid var(--rs-line);
}

.rs-svc-hero--bare .rs-svc-hero__body {
	grid-template-columns: minmax(0, 1fr);
}

/* With no visual the section is short, so it takes the cloud band's height
   as extra foot room and the clouds sit under the copy, not behind it. */
.rs-svc-hero--bare {
	padding-bottom: calc(var(--rs-section-y) + 160px);
}

.rs-svc-hero__copy {
	display: grid;
	justify-items: start;
	gap: var(--rs-s6);
}

.rs-svc-hero__sub {
	max-width: 500px;
	margin: 0;
	font-size: var(--rs-fs-text);
	letter-spacing: var(--rs-ls-text);
	line-height: var(--rs-lh-text);
	color: var(--rs-ink);
	text-wrap: pretty;
}

/* .rs-svc-hero__btn: its sand, size and arrow moved to .rs-btn itself on
   2026-10-26, when every booking button took this style. */

@media (max-width: 1199px) {
	.rs-svc-hero__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.rs-svc-hero__visual {
		max-width: 760px;
	}
}

@media (max-width: 809px) {
	.rs-svc-hero__body {
		gap: var(--rs-s6);
		margin-top: var(--rs-s5);
		padding-top: var(--rs-s4);
	}

	.rs-svc-hero__copy {
		gap: var(--rs-s5);
	}
}

/*--------------------------------------------------------------
# Hero visual — the inbox (LinkedIn Outreach Agency)
--------------------------------------------------------------*/
/* A flat product shot: no shadow, a 4px dark frame. Its palette is the Hero
   Lab's, scoped here: sage for the open row, clay for email and the call. Under
   520px of width the open thread drops and the list carries it alone. */
.rs-vis-inbox {
	--vi-frame: #24301f;
	--vi-ink: #0e1f22;
	--vi-ink-2: #55615f;
	--vi-line: #e7e7e2;
	--vi-mist: #f3f3f0;
	--vi-clay: #d4875a;
	--vi-clay-l: #f1c7a6;
	position: relative;
	container-type: inline-size;
	color: var(--vi-ink);
	font-size: 13px;
	line-height: 1.35;
}

.rs-vis-inbox__win {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	min-height: 470px;
	border: 4px solid var(--vi-frame);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
}

.rs-vis-inbox__list {
	padding: 16px 10px;
	border-right: 1px solid var(--vi-line);
}

.rs-vis-inbox__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 0 6px 12px;
}

.rs-vis-inbox__top b {
	font-size: 16px;
	font-weight: 600;
}

.rs-vis-inbox__tabs {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border-radius: 8px;
	background: var(--vi-mist);
	font-size: 11px;
	color: var(--vi-ink-2);
}

.rs-vis-inbox__tabs span {
	padding: 3px 8px;
	border-radius: 6px;
}

.rs-vis-inbox__tabs .is-on {
	background: #fff;
	color: var(--vi-ink);
	box-shadow: 0 1px 2px rgb(14 31 34 / 10%);
}

.rs-vis-inbox__thread {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: start;
	padding: 10px 8px;
	border-radius: 8px;
	font-size: 12px;
	color: var(--vi-ink-2);
}

/* The open row in grey, not sage (2026-10-23). */
.rs-vis-inbox__thread.is-on {
	background: var(--vi-mist);
}

.rs-vis-inbox__t {
	display: grid;
	gap: 2px;
}

.rs-vis-inbox__t b {
	font-size: 13px;
	font-weight: 600;
	color: var(--vi-ink);
}

.rs-vis-inbox__time {
	font-size: 11px;
}

.rs-vis-inbox__face {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--vi-mist);
	object-fit: cover;
}

.rs-vis-inbox__open {
	display: flex;
	flex-direction: column;
	padding: 18px 20px;
}

.rs-vis-inbox__who {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--vi-line);
}

.rs-vis-inbox__who .rs-vis-inbox__face {
	width: 36px;
	height: 36px;
}

.rs-vis-inbox__who span {
	display: grid;
	font-size: 11px;
	color: var(--vi-ink-2);
}

.rs-vis-inbox__who b {
	font-size: 14px;
	font-weight: 600;
	color: var(--vi-ink);
}

.rs-vis-inbox__steps {
	display: grid;
	gap: 12px;
	margin: 16px 0;
	padding: 0;
	list-style: none;
}

.rs-vis-inbox__steps li {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	font-size: 12px;
	color: var(--vi-ink-2);
}

.rs-vis-inbox__steps li span:not(.rs-vis-inbox__ch) {
	display: grid;
}

.rs-vis-inbox__steps b {
	font-size: 13px;
	font-weight: 500;
	color: var(--vi-ink);
}

.rs-vis-inbox__steps i {
	font-size: 11px;
	font-style: normal;
}

.rs-vis-inbox__ch {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 6px;
}

.rs-vis-inbox__ch--li {
	background: var(--vi-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.rs-vis-inbox__ch--mail {
	background: var(--vi-clay-l);
	color: #7a3f1d;
}

.rs-vis-inbox__i {
	width: 14px;
	height: 14px;
}

.rs-vis-inbox__bubble {
	align-self: flex-start;
	max-width: 85%;
	margin: 0;
	padding: 10px 14px;
	border-radius: 12px 12px 12px 4px;
	background: var(--vi-mist);
	font-size: 13px;
}

.rs-vis-inbox__compose {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
	padding: 8px 8px 8px 14px;
	border: 1px solid var(--vi-line);
	border-radius: 10px;
	color: var(--vi-ink-2);
}

.rs-vis-inbox__send {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 7px;
	background: var(--rs-ink);
	color: #fff;
}

@container (max-width: 520px) {
	.rs-vis-inbox__win {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.rs-vis-inbox__list {
		border-right: 0;
		padding-bottom: 28px;
	}

	.rs-vis-inbox__open {
		display: none;
	}
}

/*--------------------------------------------------------------
# Problem — the challenges we solve, a sticky scroll on the dark band
--------------------------------------------------------------*/
/* The user's comp (2026-10-22): heading and image in the middle column, the
   points in a zigzag either side, each a row lower than the last. The image is
   sticky, so it holds the middle of the viewport while the points scroll by.
   Every point is open. Below 1200 it stacks: heading, image, points. */
.rs-svc-problem .rs-section__head {
	align-items: center;
	text-align: center;
}

.rs-svc-problem .rs-section__head h2 {
	max-width: 600px;
	text-wrap: balance;
}

.rs-svc-problem .rs-section__head .rs-accent {
	color: var(--rs-sand);  /* the hero button gold */
}

.rs-svc-chal__plate {
	width: min(100%, 320px);
	margin: 0 auto var(--rs-s7);
}

.rs-svc-chal__img {
	display: block;
	width: 100%;
	height: auto;
}

.rs-svc-chal__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rs-s7) var(--rs-s8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rs-svc-chal__item {
	display: flex;
	flex-direction: column;
	max-width: 400px;
}

.rs-svc-chal__n {
	padding-bottom: var(--rs-s2);
	border-bottom: 1px solid rgb(255 255 255 / 12%);
	font-size: var(--rs-fs-text-caption);
	letter-spacing: var(--rs-ls-text-caption);
	line-height: var(--rs-lh-text-caption);
	color: var(--rs-on-dark-body);
	font-variant-numeric: tabular-nums;
}

.rs-svc-chal__t {
	margin: var(--rs-s4) 0 0;
	font-size: var(--rs-fs-heading-card-lg);
	font-weight: var(--rs-fw-heading);
	line-height: var(--rs-lh-heading-card-lg);
	letter-spacing: var(--rs-ls-heading-card-lg);
	color: var(--rs-on-dark);
	text-wrap: balance;
}

.rs-svc-chal__value {
	margin: var(--rs-s2) 0 0;
	font-size: var(--rs-fs-text);
	letter-spacing: var(--rs-ls-text);
	line-height: var(--rs-lh-text);
	color: var(--rs-on-dark-body);
	text-wrap: pretty;
}

/* The zigzag. The list dissolves into the outer grid so its items can sit
   either side of the middle column; role="list" keeps it a list to a screen
   reader. Each point spans two rows and starts one row below the last, so
   the two sides interleave. */
@media (min-width: 1200px) {
	.rs-svc-chal {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));  /* equal thirds, no gap */
		grid-template-rows: repeat(var(--rs-chal-rows), minmax(240px, auto));
	}

	.rs-svc-chal__centre {
		grid-column: 2;
		grid-row: 1 / -1;
	}

	/* The heading reaches into the gaps either side, so it breaks in two
	   lines as in the comp rather than three. */
	.rs-svc-chal__centre .rs-section__head {
		margin-inline: calc(-1 * var(--rs-s8));
	}

	.rs-svc-chal__plate {
		position: sticky;
		top: max(var(--rs-header-h) + var(--rs-s5), 50vh - 210px);
		width: min(100%, 420px);
		margin: var(--rs-s8) auto 0;
	}

	.rs-svc-chal__list {
		display: contents;
	}

	.rs-svc-chal__item {
		grid-column: 1;
		grid-row: var(--rs-chal-row) / span 2;
		padding-top: var(--rs-s10);  /* the zigzag starts below the heading */
	}

	/* Right-hand points sit against the container's right edge, mirroring
	   the left, so the space either side of the image matches. */
	.rs-svc-chal__item:nth-child(even) {
		grid-column: 3;
		justify-self: end;
		width: 100%;
	}
}

@media (max-width: 809px) {
	.rs-svc-chal__plate {
		width: min(100%, 260px);
		margin-bottom: var(--rs-s6);
	}

	.rs-svc-chal__list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--rs-s6);
	}

	.rs-svc-chal__item {
		max-width: none;
	}
}

/* Points fade in as they rise into the middle of the viewport and fade out as
   they leave the top, so the one being read is the bright one and the image
   stays the still anchor. Driven by the scroll position itself (a scroll-driven
   animation): no script, no change to scroll speed. Browsers without it, and
   visitors who ask for reduced motion, get every point at full strength. The
   range is tuned to where the text sits in each item: from 1200 up the item
   carries 120px of empty top padding. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.rs-svc-chal__item {
			animation: rs-chal-focus linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}
}

@keyframes rs-chal-focus {
	0%,
	20% {
		opacity: 0.15;
		transform: translateY(16px);
	}

	42%,
	70% {
		opacity: 1;
		transform: none;
	}

	92%,
	100% {
		opacity: 0.15;
		transform: none;
	}
}

/*--------------------------------------------------------------
# What you get — tabbed switcher over a drawn workspace (2026-10-22)
--------------------------------------------------------------*/
/* The user's comp: the deliverables as tabs on the left, a view of the client
   workspace on the right. The open tab is a grey card that shows its text; the
   rest are outlined rows with a plus. Below 1200 the tabs sit over the view. */
.rs-pipe {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--rs-gap);
	align-items: start;
}

/* From 1200 up, an eight-column grid (2026-10-23): the heading above it,
   three columns wide and 80px clear of it; under it the tabs in three
   columns and the canvas in five. */
@media (min-width: 1200px) {
	.rs-svc-outcomes .rs-section__head {
		max-width: calc((100% - 7 * var(--rs-gap)) / 8 * 3 + 2 * var(--rs-gap));
		margin-bottom: var(--rs-s9);
	}

	.rs-pipe {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	.rs-pipe__tabs {
		grid-column: 1 / span 3;
	}

	.rs-pipe__panels {
		grid-column: 4 / span 5;
	}
}

.rs-pipe__tabs {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Closed tabs are bare rows on the page, a hairline between two of them,
   inset to the text; the open one is the gold card (2026-10-23, the user's
   comp). */
.rs-pipe__item {
	--rs-pipe-pad: var(--rs-s4);
	border-radius: var(--rs-r);
	transition: background-color 0.3s ease;
}

.rs-pipe__item:not(:has([aria-selected="true"])) + .rs-pipe__item:not(:has([aria-selected="true"]))::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--rs-pipe-pad);
	right: var(--rs-pipe-pad);
	border-top: 1px solid var(--rs-line);
}

/* The open tab in the hero button's gold (2026-10-23, the user's final comp). */
.rs-pipe__item:has([aria-selected="true"]) {
	background: var(--rs-sand);
}

.rs-pipe__tab {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--rs-s4);
	width: 100%;
	padding: var(--rs-s4);
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--rs-fs-heading-card);
	font-weight: var(--rs-fw-heading);
	letter-spacing: var(--rs-ls-heading-card);
	line-height: var(--rs-lh-heading-card);
	color: var(--rs-ink);
	text-align: left;
	cursor: pointer;
}

.rs-pipe__tab[aria-selected="true"] {
	cursor: default;
}

.rs-pipe__tab:focus-visible {
	outline: 2px solid var(--rs-accent);
	outline-offset: -2px;
	border-radius: var(--rs-r);
}

/* A bare plus in ink (was the accent until 2026-10-23); it stays on the open
   tab, as in the comp. */
.rs-pipe__icon {
	position: relative;
	flex: none;
	width: var(--rs-s3);
	height: var(--rs-s3);
}

.rs-pipe__icon::before,
.rs-pipe__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 1.5px;
	background: var(--rs-ink);
	transform: translate(-50%, -50%);
}

.rs-pipe__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

/* Under the open title, a hairline in the gold's own shade (16% ink resolved
   against --rs-sand, solid), inset to the text. */
.rs-pipe__body {
	margin: 0 var(--rs-pipe-pad);
	padding: var(--rs-s5) 0 var(--rs-pipe-pad);
	border-top: 1px solid #c1ae93;
	color: color-mix(in srgb, var(--rs-ink) 66%, transparent);
	text-wrap: pretty;
}

/* With the script running only the open tab's text shows. Without it every
   text stays printed and the first view stands in for all of them.
   The text folds rather than switching (2026-10-23): a one-row grid that
   goes from 1fr to 0fr, the clip inside it at min-height 0 so the body's
   padding and hairline fold with it, and a fade on top. */
.rs-pipe__more {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.35s ease;
}

.rs-pipe__clip {
	min-height: 0;
	overflow: hidden;
}

.rs-pipe.is-ready .rs-pipe__tab[aria-selected="false"] + .rs-pipe__more {
	grid-template-rows: 0fr;
	opacity: 0;
}

/* On a click the graph that was showing fades out under the new one
   (service-ui.js clones it as .is-leaving), so the canvas never blinks. */
.rs-graph__g.is-leaving {
	opacity: 1;
	animation: none;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.rs-graph__g.is-leaving .rs-graph__n,
.rs-graph__g.is-leaving .rs-graph__e {
	animation: none;
}

.rs-pipe__panel[hidden] {
	display: none;
}

@media (max-width: 809px) {
	.rs-pipe__tab {
		padding: var(--rs-s3);
	}

	.rs-pipe__item {
		--rs-pipe-pad: var(--rs-s3);
	}

	.rs-pipe__body {
		padding-top: var(--rs-s4);
	}
}

/*--------------------------------------------------------------
# What you get — one screen, one loop (2026-10-22)
--------------------------------------------------------------*/
/* visual/screen.php. One 16s clock, four beats of 4s. Each beat is a layer
   with --beat 0–3; every animation in it is written for the first beat
   (0–25% of the loop) and delayed by --beat × 4s, so its keyframes hold
   wherever the layer sits. service-ui.js plays, pauses and seeks them all
   together and moves the tabs. Without the script they simply loop. */
.rs-pipe__item {
	position: relative;
	overflow: hidden;
}

/* The progress bar is the hairline under the open title (2026-10-23, the
   user's call): it sits in the tab button, on the body's top border, and
   fills in ink along it. Every tab keeps its bar so the animations stay on
   the clock; only the open tab's shows. */
.rs-pipe__prog {
	position: absolute;
	top: 100%;
	left: var(--rs-pipe-pad);
	right: var(--rs-pipe-pad);
	height: 1px;
	pointer-events: none;
}

.rs-pipe__tab[aria-selected="false"] .rs-pipe__prog {
	visibility: hidden;
}

.rs-pipe__prog b {
	display: block;
	width: 0;
	height: 100%;
	background: var(--rs-ink);
	animation: rs-scr-prog 16s linear infinite both;
	animation-delay: calc(var(--beat) * 4s);
}

@keyframes rs-scr-prog {
	0% { width: 0; }
	25% { width: 100%; }
	25.01%, 100% { width: 0; }
}

/* The frame and palette: the hero inbox's, scoped. Sizes inside are cqi so the
   drawing scales with its frame; a floor keeps text legible on phones. */
.rs-scr {
	--vp-frame: #24301f;
	--vp-ink: #0e1f22;
	--vp-ink-2: #55615f;
	--vp-line: #e7e7e2;
	--vp-mist: #f3f3f0;
	--vp-sage: #e9ecdb;
	--vp-olive: #5f7350;
	--vp-clay: #d4875a;
	--vp-clay-l: #fbe6da;
	container-type: inline-size;
	color: var(--vp-ink);
}

.rs-scr__win {
	display: flex;
	flex-direction: column;
	aspect-ratio: 16 / 10;
	border: 4px solid var(--vp-frame);
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
	font-size: max(10px, 2.3cqi);
	line-height: 1.35;
}

.rs-scr__stage {
	position: relative;
	flex: 1;
	min-height: 0;
	margin: 4cqi 5cqi;
}

.rs-scr__layer {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0;
	animation: rs-scr-layer 16s linear infinite both;
	animation-delay: calc(var(--beat) * 4s);
}

@keyframes rs-scr-layer {
	0% { opacity: 0; }
	1.5%, 23.5% { opacity: 1; }
	25%, 100% { opacity: 0; }
}

/* Parts */
.rs-scr__face {
	width: 1.4em;
	height: 1.4em;
	flex: none;
	fill: var(--vp-ink);
}

.rs-scr__i {
	width: 1.2em;
	height: 1.2em;
	flex: none;
}

.rs-scr__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.3em 0.85em;
	border-radius: 100px;
	background: var(--vp-mist);
	color: var(--vp-ink-2);
	font-size: 0.86em;
	white-space: nowrap;
}

.rs-scr__pill::before {
	content: "";
	width: 0.42em;
	height: 0.42em;
	border-radius: 50%;
	background: currentColor;
}

.rs-scr__pill--held { background: var(--vp-olive); color: #fff; }
.rs-scr__pill--reply { background: var(--vp-clay-l); color: #7a3f1d; }
.rs-scr__pill--ok { background: var(--vp-sage); color: #3f4a3a; }
.rs-scr__pill--cut { background: #f1e1dc; color: #8a3b2a; }

.rs-scr__h {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 1.6cqi;
	font-size: 0.85em;
	color: var(--vp-ink-2);
}

/* Inbox / system activity: rows slide in, then a card drops into the slot. */
.rs-scr__split {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 4cqi;
	align-items: start;
	padding-top: 2cqi;
}

.rs-scr__row {
	display: grid;
	grid-template-columns: 15cqi minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.4cqi;
	padding-block: 1.6cqi;
	border-bottom: 1px solid var(--vp-line);
	font-size: max(10px, 2.5cqi);
	animation: rs-scr-row 16s cubic-bezier(0.16, 1, 0.3, 1) infinite both;
	animation-delay: calc(var(--beat) * 4s + var(--k) * 0.45s);
}

.rs-scr__row > span {
	display: flex;
	align-items: center;
	gap: 0.5em;
	min-width: 0;
	white-space: nowrap;
}

.rs-scr__ch {
	color: var(--vp-ink-2);
	font-size: 0.85em;
}

.rs-scr__row .rs-scr__pill {
	font-size: 0.75em;
}

@keyframes rs-scr-row {
	0%, 1% { opacity: 0; transform: translateX(-6cqi); }
	4%, 100% { opacity: 1; transform: none; }
}

.rs-scr__slot {
	height: 22cqi;
	padding: 1.2cqi;
	border-radius: 1.2cqi;
	background: repeating-linear-gradient(180deg, var(--vp-line) 0 1px, transparent 1px 5.5cqi);
	box-shadow: inset 0 0 0 1px var(--vp-line);
}

.rs-scr__card {
	display: grid;
	gap: 0.3em;
	margin-top: 5cqi;
	padding: 1.4cqi 1.8cqi;
	border-radius: 1cqi;
	background: var(--vp-olive);
	color: #fff;
	font-size: max(10px, 2.2cqi);
	animation: rs-scr-drop 16s cubic-bezier(0.34, 1.4, 0.64, 1) infinite both;
	animation-delay: calc(var(--beat) * 4s);
}

.rs-scr__card b {
	font-size: 1.6em;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1;
}

@keyframes rs-scr-drop {
	0%, 12% { opacity: 0; transform: translateY(-14cqi); }
	15%, 100% { opacity: 1; transform: none; }
}

/* Call: two video tiles, then two bars, then the decisions. */
.rs-scr__call {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 4cqi;
	align-items: center;
	height: 100%;
}

.rs-scr__tiles {
	display: grid;
	gap: 1.4cqi;
}

.rs-scr__tile {
	position: relative;
	display: grid;
	place-items: center;
	height: 17cqi;
	border-radius: 1.4cqi;
	background: #24301f;
	animation: rs-scr-tile 16s cubic-bezier(0.16, 1, 0.3, 1) infinite both;
	animation-delay: calc(var(--beat) * 4s);
}

.rs-scr__tile + .rs-scr__tile {
	animation-delay: calc(var(--beat) * 4s + 0.3s);
}

.rs-scr__tile .rs-scr__face {
	width: 10cqi;
	height: 10cqi;
	fill: #fcfbf4;
}

.rs-scr__tile small {
	position: absolute;
	left: 1.4cqi;
	bottom: 1.2cqi;
	font-size: 0.8em;
	color: rgb(255 255 255 / 75%);
}

@keyframes rs-scr-tile {
	0%, 1% { opacity: 0; transform: scale(0.92); }
	4%, 100% { opacity: 1; transform: none; }
}

.rs-scr__bars {
	display: grid;
	gap: 3cqi;
}

.rs-scr__bars p {
	display: grid;
	grid-template-columns: 14cqi minmax(0, 1fr) 9cqi;
	align-items: center;
	gap: 1.6cqi;
	margin: 0;
	font-size: max(10px, 2.4cqi);
}

.rs-scr__bars b {
	width: var(--w);
	height: 4cqi;
	border-radius: 0.8cqi;
	background: var(--vp-olive);
	animation: rs-scr-bar 16s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
	animation-delay: calc(var(--beat) * 4s);
}

.rs-scr__bars b.is-cut {
	background: #d9a796;
}

@keyframes rs-scr-bar {
	0%, 5% { width: 0; }
	11%, 100% { width: var(--w); }
}

.rs-scr__tag {
	justify-self: start;
	animation: rs-scr-tag 16s cubic-bezier(0.2, 1.4, 0.4, 1) infinite both;
	animation-delay: calc(var(--beat) * 4s);
}

.rs-scr__bars p + p .rs-scr__tag {
	animation-delay: calc(var(--beat) * 4s + 0.5s);
}

@keyframes rs-scr-tag {
	0%, 12% { opacity: 0; transform: scale(0.5); }
	15%, 100% { opacity: 1; transform: none; }
}

/* Engineer: one person, three lines, then the promise. */
.rs-scr__eng {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 4cqi;
	align-items: center;
	height: 100%;
}

.rs-scr__tile--lg {
	height: 30cqi;
}

.rs-scr__tile--lg .rs-scr__face {
	width: 16cqi;
	height: 16cqi;
}

.rs-scr__line {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 1.8cqi;
	font-size: max(10px, 2.6cqi);
	animation: rs-scr-row 16s cubic-bezier(0.16, 1, 0.3, 1) infinite both;
	animation-delay: calc(var(--beat) * 4s + 0.4s + var(--k) * 0.45s);
}

.rs-scr__line .rs-scr__i {
	color: var(--vp-olive);
}

.rs-scr__tag--end {
	margin-top: 1cqi;
	font-size: max(10px, 2.2cqi);
}

/* Counted: the filter switches on, meetings outside the ICP fold away. */
.rs-scr__filter {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-left: auto;
	padding: 0.2em 0.7em;
	border-radius: 100px;
	box-shadow: inset 0 0 0 1px var(--vp-line);
	animation: rs-scr-filter 16s linear infinite both;
	animation-delay: calc(var(--beat) * 4s);
}

@keyframes rs-scr-filter {
	0%, 6% { background: #fff; color: var(--vp-ink-2); }
	7%, 100% { background: var(--vp-olive); color: #fff; box-shadow: none; }
}

.rs-scr__m {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 6.4cqi;
	border-bottom: 1px solid var(--vp-line);
	font-size: max(10px, 2.5cqi);
	overflow: hidden;
}

.rs-scr__m > span {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.rs-scr__m.is-out {
	animation: rs-scr-out 16s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
	animation-delay: calc(var(--beat) * 4s);
}

@keyframes rs-scr-out {
	0%, 8% { opacity: 1; height: 6.4cqi; }
	11% { opacity: 0.2; height: 6.4cqi; }
	14%, 100% { opacity: 0; height: 0; border-bottom-width: 0; }
}

.rs-scr__ok,
.rs-scr__no {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: 0.8em;
	font-weight: 500;
}

.rs-scr__ok {
	color: var(--vp-olive);
	animation: rs-scr-ok 16s cubic-bezier(0.2, 1.4, 0.4, 1) infinite both;
	animation-delay: calc(var(--beat) * 4s);
}

.rs-scr__no {
	color: #8a3b2a;
	font-weight: 400;
}

@keyframes rs-scr-ok {
	0%, 13% { opacity: 0; transform: scale(0.6); }
	16%, 100% { opacity: 1; transform: none; }
}

/* Export: files pack into a folder, it crosses to your side and locks. */
.rs-scr__export {
	position: absolute;
	inset: 0;
}

.rs-scr__export::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	border-left: 1px dashed var(--vp-line);
}

.rs-scr__side {
	position: absolute;
	top: 0;
	left: 4%;
	font-size: 0.85em;
	color: var(--vp-ink-2);
}

.rs-scr__side--you {
	left: auto;
	right: 4%;
	color: var(--vp-ink);
	font-weight: 500;
}

.rs-scr__file {
	--top: calc(14% + var(--k) * (72% / var(--n)));
	position: absolute;
	left: 4%;
	top: var(--top);
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 1.2cqi 1.8cqi;
	border-radius: 1cqi;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--vp-line);
	font-size: max(10px, 2.4cqi);
	animation: rs-scr-file 16s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
	animation-delay: calc(var(--beat) * 4s + var(--k) * 0.2s);
}

@keyframes rs-scr-file {
	0%, 1% { opacity: 0; left: 4%; top: var(--top); transform: none; }
	3%, 5% { opacity: 1; left: 4%; top: var(--top); transform: none; }
	10%, 100% { opacity: 0; left: 28%; top: 42%; transform: scale(0.4); }
}

.rs-scr__box {
	position: absolute;
	left: 26%;
	top: 36%;
	display: grid;
	place-items: center;
	width: 14cqi;
	height: 14cqi;
	border-radius: 2cqi;
	background: var(--vp-olive);
	color: #fff;
	animation: rs-scr-box 16s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
	animation-delay: calc(var(--beat) * 4s);
}

.rs-scr__box > .rs-scr__i {
	width: 7cqi;
	height: 7cqi;
	stroke-width: 1.3;
}

@keyframes rs-scr-box {
	0%, 3% { opacity: 0; left: 26%; transform: scale(0.8); }
	6%, 10% { opacity: 1; left: 26%; transform: none; }
	15%, 100% { opacity: 1; left: 72%; transform: none; }
}

.rs-scr__lock {
	position: absolute;
	right: -1.6cqi;
	bottom: -1.6cqi;
	display: grid;
	place-items: center;
	width: 5.6cqi;
	height: 5.6cqi;
	border: 0.5cqi solid #fff;
	border-radius: 50%;
	background: var(--vp-ink);
	animation: rs-scr-lock 16s cubic-bezier(0.2, 1.4, 0.4, 1) infinite both;
	animation-delay: calc(var(--beat) * 4s);
}

.rs-scr__lock .rs-scr__i {
	width: 3cqi;
	height: 3cqi;
}

@keyframes rs-scr-lock {
	0%, 15% { opacity: 0; transform: scale(0.4) rotate(-20deg); }
	18%, 100% { opacity: 1; transform: none; }
}

/* Narrow frames: the channel column goes so the role and status fit. */
@container (max-width: 520px) {
	.rs-scr__row {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.rs-scr__ch {
		display: none !important;
	}

	.rs-scr__split {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		gap: 3cqi;
	}

	.rs-scr__card {
		margin-top: 2cqi;
	}

	.rs-scr__bars p {
		grid-template-columns: 18cqi minmax(0, 1fr) auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rs-pipe__prog {
		display: none;
	}
}

/* The previous drawn workspace (visual/pipeline.php), no longer printed since
   the one-screen loop; kept for rollback. */
/* The workspace. The hero inbox's palette and frame, scoped here; sizes inside
   the mock are the mock's own, so they stay literals. */
.rs-vis-pipe {
	--vp-frame: #24301f;
	--vp-ink: #0e1f22;
	--vp-ink-2: #55615f;
	--vp-line: #e7e7e2;
	--vp-mist: #f3f3f0;
	--vp-side: #fafaf7;
	--vp-sage: #e9ecdb;
	--vp-olive: #5f7350;
	--vp-clay: #d4875a;
	--vp-clay-l: #fbe6da;
	position: relative;
	container-type: inline-size;
	color: var(--vp-ink);
	font-size: 13px;
	line-height: 1.35;
}

.rs-vis-pipe__win {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	/* The comp's 1060 x 590, off the container width, never under 440. Not
	   aspect-ratio: with a min-height that widens the box instead. */
	height: max(440px, 55.66cqi);
	border: 4px solid var(--vp-frame);
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
}

.rs-vis-pipe__side {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 14px 0;
	border-right: 1px solid var(--vp-line);
	background: var(--vp-side);
	color: var(--vp-ink-2);
}

.rs-vis-pipe__side > .rs-vis-pipe__face {
	width: 30px;
	height: 30px;
	margin-bottom: 12px;
}

.rs-vis-pipe__nav {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
}

.rs-vis-pipe__nav.is-on {
	background: var(--vp-mist);
	color: var(--vp-ink);
}

.rs-vis-pipe__i {
	width: 16px;
	height: 16px;
	flex: none;
}

.rs-vis-pipe__main {
	min-width: 0;
	padding: 22px 24px 0;
}

.rs-vis-pipe__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 16px;
	row-gap: 6px;
	align-items: end;
}

.rs-vis-pipe__caption {
	grid-column: 1 / -1;
	font-size: 11px;
	color: var(--vp-ink-2);
}

.rs-vis-pipe__title {
	font-size: 22px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rs-vis-pipe__meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--vp-ink-2);
	white-space: nowrap;
}

.rs-vis-pipe__meta .rs-vis-pipe__i {
	width: 13px;
	height: 13px;
}

.rs-vis-pipe__tools {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 18px 0 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--vp-line);
	color: var(--vp-ink-2);
}

.rs-vis-pipe__tools span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.rs-vis-pipe__tools .rs-vis-pipe__i {
	width: 14px;
	height: 14px;
}

.rs-vis-pipe__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: auto;
}

.rs-vis-pipe__table th,
.rs-vis-pipe__table td {
	height: 44px;
	padding: 0 14px;
	border-bottom: 1px solid var(--vp-line);
	border-left: 1px solid var(--vp-line);
	text-align: left;
	font-weight: 400;
	white-space: nowrap;
	vertical-align: middle;
}

.rs-vis-pipe__table th:first-child,
.rs-vis-pipe__table td:first-child {
	padding-left: 0;
	border-left: 0;
}

.rs-vis-pipe__table th {
	color: var(--vp-ink-2);
}

.rs-vis-pipe__box {
	display: inline-grid;
	place-items: center;
	width: 14px;
	height: 14px;
	margin-right: 10px;
	vertical-align: -2px;
	border-radius: 3px;
	border: 1px solid var(--vp-line);
}

.rs-vis-pipe__box.is-on {
	border-color: var(--vp-olive);
	background: var(--vp-olive);
	color: #fff;
}

.rs-vis-pipe__box .rs-vis-pipe__i {
	width: 11px;
	height: 11px;
	stroke-width: 2.4;
}

.rs-vis-pipe__box i {
	width: 7px;
	height: 1.5px;
	background: #fff;
}

.rs-vis-pipe__sig,
.rs-vis-pipe__prof {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.rs-vis-pipe__sig .rs-vis-pipe__i {
	width: 13px;
	height: 13px;
	color: var(--vp-clay);
}

.rs-vis-pipe__prof .rs-vis-pipe__face {
	width: 18px;
	height: 18px;
}

.rs-vis-pipe__face {
	fill: var(--vp-ink);
}

.rs-vis-pipe__pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 100px;
	font-size: 11px;
	background: var(--vp-mist);
	color: var(--vp-ink-2);
}

.rs-vis-pipe__pill::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}

.rs-vis-pipe__pill--held {
	background: var(--vp-olive);
	color: #fff;
}

.rs-vis-pipe__pill--reply {
	background: var(--vp-clay-l);
	color: #7a3f1d;
}

.rs-vis-pipe__pill--ok {
	background: var(--vp-sage);
	color: #3f4a3a;
}

.rs-vis-pipe__bar {
	display: inline-block;
	width: 120px;
	height: 6px;
	border-radius: 3px;
	background: var(--vp-mist);
	vertical-align: middle;
	overflow: hidden;
}

.rs-vis-pipe__bar span {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: var(--vp-olive);
}

.rs-vis-pipe__fits {
	display: inline-flex;
	gap: 4px;
}

.rs-vis-pipe__fit {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1px solid var(--vp-line);
}

.rs-vis-pipe__fit.is-on {
	border-color: var(--vp-olive);
	background: var(--vp-olive);
}

/* The toast breaks the frame's top-right corner and lands each time its view
   opens. */
.rs-vis-pipe__toast {
	position: absolute;
	top: 18px;
	right: 28px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px 12px 12px;
	border-radius: 10px;
	background: #eef1e6;
	box-shadow: 0 10px 28px rgb(14 31 34 / 14%), 0 1px 2px rgb(14 31 34 / 8%);
	font-size: 12px;
	color: var(--vp-ink-2);
	animation: rs-vis-pipe-toast 0.5s 0.25s ease both;
}

.rs-vis-pipe__toast > span:last-child {
	display: grid;
}

.rs-vis-pipe__toast b {
	font-size: 15px;
	font-weight: 600;
	color: var(--vp-ink);
}

.rs-vis-pipe__ok {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--vp-olive);
	color: #fff;
}

@keyframes rs-vis-pipe-toast {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rs-vis-pipe__toast {
		animation: none;
	}

	.rs-pipe__item {
		transition: none;
	}
}

/* Narrower frames: the meta goes, then the optional columns, then the sidebar;
   the toast drops to the foot so it never covers the title. */
@container (max-width: 820px) {
	.rs-vis-pipe__meta {
		display: none;
	}

	.rs-vis-pipe__toast {
		top: auto;
		bottom: 18px;
		right: 18px;
	}
}

@container (max-width: 680px) {
	.rs-vis-pipe__table .is-opt {
		display: none;
	}
}

@container (max-width: 460px) {
	.rs-vis-pipe__win {
		grid-template-columns: minmax(0, 1fr);
		height: 420px;
	}

	.rs-vis-pipe__side {
		display: none;
	}

	.rs-vis-pipe__main {
		padding: 18px 16px 0;
	}

	.rs-vis-pipe__title {
		font-size: 18px;
		white-space: normal;
	}

	.rs-vis-pipe__tools {
		gap: 6px 16px;
	}

	.rs-vis-pipe__tools span:nth-child(n + 4) {
		display: none;
	}

	.rs-vis-pipe__toast {
		left: 12px;
		right: 12px;
		bottom: 12px;
	}
}

/* The small drawn card graphics (outcome-graphic.php). Off the service pages
   since 2026-10-22; the What-you-get lab still draws them. */
.rs-og {
	display: block;
	width: 100%;
	height: auto;
	font-family: var(--rs-font);
}

.rs-og__frame {
	fill: var(--rs-bg);
	stroke: var(--rs-line);
}

.rs-og__rule {
	stroke: var(--rs-line);
}

.rs-og__dot,
.rs-og__soft {
	fill: var(--rs-line-card);
}

.rs-og__soft--light {
	fill: var(--rs-bg-panel);
}

.rs-og__ink {
	fill: var(--rs-dark);
}

.rs-og__accent {
	fill: var(--rs-accent);
}

.rs-og__card {
	fill: var(--rs-bg-panel);
	stroke: var(--rs-line);
}

.rs-og__ring {
	fill: none;
	stroke: var(--rs-accent);
	stroke-width: 1.5;
	stroke-dasharray: 3 3;
}

.rs-og__link,
.rs-og__tick {
	fill: none;
	stroke: var(--rs-ink-title);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.rs-og__tick {
	stroke: var(--rs-bg);
}

.rs-og__strike {
	stroke: var(--rs-grey);
}

.rs-og__faded {
	opacity: 0.6;
}

.rs-og__text {
	font-size: 11px;
	fill: var(--rs-grey);
}

.rs-og__text--on {
	fill: var(--rs-bg);
}

/*--------------------------------------------------------------
# Definition and method — the prose blocks
--------------------------------------------------------------*/
/* Both sit on the article measure rather than the full content column: a
   definition set across 1140px stops being readable at exactly the point a
   reader is trying to absorb one. */
.rs-svc-definition__inner,
.rs-svc-fit__inner {
	max-width: 900px;
}

.rs-svc-definition__inner h2 {
	margin: 0 0 var(--rs-s6);
}

/* The signal accordion is the FAQ component. The shared .rs-faq rule in
   08-article.css already puts it on the prose measure (900px, centred), which
   is where the argument above it sits; only the article FAQ's large vertical
   margins are replaced. */
.rs-svc-method .rs-svc-method__signals {
	margin: var(--rs-s6) auto 0;
}

.rs-svc-method__body {
	max-width: 900px;
	margin-top: calc(var(--rs-head-gap) * -1 + var(--rs-s6));
}

/*--------------------------------------------------------------
# Detail panels
--------------------------------------------------------------*/
.rs-svc-detail__head {
	margin-bottom: var(--rs-head-gap);
	display: flex;
	flex-direction: column;
	gap: var(--rs-s3);
}

.rs-svc-detail__head h2 {
	margin: 0;
}

.rs-svc-detail__intro {
	max-width: 640px;
	margin: 0;
	color: var(--rs-ink-body);
}

/*--------------------------------------------------------------
# What is included — sticky lead, vertical list
--------------------------------------------------------------*/
/* The heading, its intro and the button hold still in the left column while
   the list scrolls past on the right. `align-items: start` is what lets the
   left cell be shorter than the right one — stretched to full height, a sticky
   child has no room to travel and never moves.

   The section must not sit inside anything with `overflow` other than visible:
   the nearest such ancestor becomes the scroll container the sticky element
   sticks to, which is why this block does not take .rs-services. */
.rs-svc-included {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--rs-s8);
	align-items: start;
}

.rs-svc-included__lead {
	position: sticky;
	/* Clears the sticky header rather than the viewport top, then holds 80px
	   below it (2026-10-23; was 40). */
	top: calc(var(--rs-header-h) + var(--rs-s9));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--rs-s4);
}

.rs-svc-included__lead h2 {
	margin: 0;
}

/* The eyebrow above both columns on a full-width hairline (2026-10-23, the
   user's comp). */
.rs-svc-included__rule {
	margin-bottom: var(--rs-s5);
	padding-bottom: var(--rs-s3);
	border-bottom: 1px solid var(--rs-line);
}

.rs-svc-included__rule .rs-eyebrow {
	margin: 0;
}

/* Beside the heading the cards start level with it: the slider's own head
   gap is for a heading above it. */
@media (min-width: 810px) {
	.rs-svc-included__items.rs-svc-slider {
		margin-top: 0;
	}
}

/* Desktop: the slider track is a plain vertical stack of equal rows, a grid
   with 1fr auto-rows, so every card takes the tallest card's height. Both
   overflow axes go back to visible together — a box with one axis visible and
   the other hidden computes to auto, which would re-create the scroll container. */
.rs-svc-included__items .rs-svc-slider__track {
	display: grid;
	grid-auto-rows: 1fr;
	flex-direction: column;
	gap: var(--rs-s4);
	overflow-x: visible;
	overflow-y: visible;
	scroll-snap-type: none;
	padding-bottom: 0;
}

.rs-svc-included__items .rs-svc-slider__slide {
	flex: 0 0 auto;
}

/* Light panel card on the white section, number at the top, text at the foot. */
.rs-svc-included__card {
	/* At least 300px (2026-10-23, the user's call); every card in the list
	   takes the tallest one's height, so they stay uniform where a narrow
	   column makes a long card need more. */
	min-height: 300px;
	background: var(--rs-grey-card);
	border-radius: var(--rs-r);
	padding: var(--rs-s4);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--rs-s6);
}

.rs-svc-included__text {
	display: flex;
	flex-direction: column;
	gap: var(--rs-s2);
}

/* The step number as plain text, two digits (was a 44px dark tile until
   2026-10-23). Never the accent: the green has six jobs on this site and
   counting is not one of them. */
.rs-svc-included__number {
	font-size: var(--rs-fs-text-caption);
	letter-spacing: var(--rs-ls-text-caption);
	line-height: var(--rs-lh-text-caption);
	color: var(--rs-grey);
	/* Lining figures, so 1 and 4 sit on the same baseline and share a width. */
	font-variant-numeric: tabular-nums lining-nums;
}

/* The card title at the larger card-heading step, as in the comp; title and
   text in full ink, the number grey (2026-10-23). */
.rs-svc-included__card .rs-card__title,
.rs-svc-included__card .rs-card__text {
	color: var(--rs-ink);
}

.rs-svc-included__card .rs-card__title {
	margin: 0;
	font-size: var(--rs-fs-heading-card-lg);
	font-weight: var(--rs-fw-heading);
	letter-spacing: var(--rs-ls-heading-card-lg);
	line-height: var(--rs-lh-heading-card-lg);
}

/* From 1200 up, the same eight columns as "What you get" (2026-10-23): the
   heading and button in four, one left empty, the cards in three. */
@media (min-width: 1200px) {
	.rs-svc-included {
		grid-template-columns: repeat(8, minmax(0, 1fr));
		gap: var(--rs-gap);
	}

	.rs-svc-included__lead {
		grid-column: 1 / span 4;
	}

	.rs-svc-included__items {
		grid-column: 6 / span 3;
	}
}

@media (max-width: 1199px) {
	.rs-svc-included {
		gap: var(--rs-s6);
	}
}

/* Below 810 the column un-sticks and the list becomes the horizontal
   scroll-snap row, which is where the slider's arrows start earning their
   place. The base .rs-svc-slider rules already describe that layout, so this
   only has to undo the desktop overrides above. */
@media (max-width: 809px) {
	.rs-svc-included {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--rs-s5);
	}

	/* The slider row stretches every card to the tallest, so they stay one
	   height per page here too. */
	.rs-svc-included__card {
		gap: var(--rs-s5);
	}

	.rs-svc-included__items .rs-svc-slider__slide {
		display: flex;
	}

	.rs-svc-included__items .rs-svc-slider__slide > .rs-svc-included__card {
		flex: 1;
	}

	.rs-svc-included__lead {
		position: static;
	}

	.rs-svc-included__items .rs-svc-slider__track {
		display: flex;
		flex-direction: row;
		gap: var(--rs-gap);
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		padding-bottom: var(--rs-s0);
	}

	.rs-svc-included__items .rs-svc-slider__slide {
		flex: 0 0 86%;
	}
}

/*--------------------------------------------------------------
# FAQ — moved to css/04-ui.css on 2026-10-29, when the articles took it
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Tabs
--------------------------------------------------------------*/
/* A row of text buttons over a hairline, not pills. The system has one accent
   and no fills on controls, so the selected tab is marked the way a selected
   thing is marked here: ink goes to full black and a 1px olive rule sits under
   it, overlapping the group's own hairline.

   Everything below is scoped to [data-enhanced="true"], which the script sets
   once it has built the tablist. Without it the panels stay a plain headed
   stack — which is what a crawler and a visitor with no JavaScript get. */
.rs-svc-tabs {
	margin-top: var(--rs-s8);
}

.rs-svc-tabs__list {
	display: flex;
	gap: var(--rs-s6);
	border-bottom: 1px solid var(--rs-line);
	margin-bottom: var(--rs-s7);
	overflow-x: auto;
	scrollbar-width: none;
}

.rs-svc-tabs__list::-webkit-scrollbar {
	display: none;
}

.rs-svc-tabs__tab {
	flex: 0 0 auto;
	appearance: none;
	background: none;
	border: 0;
	padding: 0 0 var(--rs-s2);
	margin-bottom: -1px;   /* the rule below sits on the group's hairline */
	font-family: inherit;
	font-size: var(--rs-fs-text-link);
	font-weight: var(--rs-fw-text-link);
	letter-spacing: var(--rs-ls-text-link);
	line-height: var(--rs-lh-text-link);
	color: var(--rs-ink-body);
	cursor: pointer;
	white-space: nowrap;
	border-bottom: 1px solid transparent;
	transition: color 180ms ease, border-color 180ms ease;
}

.rs-svc-tabs__tab:hover {
	color: var(--rs-ink);
}

.rs-svc-tabs__tab[aria-selected="true"] {
	color: var(--rs-ink);
	border-bottom-color: var(--rs-accent);
}

.rs-svc-tabs__panel {
	max-width: 720px;
}

/* Un-enhanced, the panels are a stack and need separating from each other. */
.rs-svc-tabs:not([data-enhanced="true"]) .rs-svc-tabs__panel + .rs-svc-tabs__panel {
	margin-top: var(--rs-s6);
}

.rs-svc-tabs__panel[hidden] {
	display: none;
}

.rs-svc-tabs__title {
	font-size: var(--rs-fs-heading-card);
	font-weight: var(--rs-fw-heading);
	letter-spacing: var(--rs-ls-heading-card);
	line-height: var(--rs-lh-heading-card);
	color: var(--rs-ink-title);
	margin: 0 0 var(--rs-s2);
}

.rs-svc-tabs__text {
	margin: 0;
	color: var(--rs-ink-title-body);
}

/* On the dark band the same component inverts its inks. */
.rs-section--dark .rs-svc-tabs__list {
	border-bottom-color: var(--rs-line-dark);
}

.rs-section--dark .rs-svc-tabs__tab {
	color: var(--rs-on-dark-body);
}

.rs-section--dark .rs-svc-tabs__tab[aria-selected="true"],
.rs-section--dark .rs-svc-tabs__tab:hover {
	color: var(--rs-on-dark);
}

.rs-section--dark .rs-svc-tabs__title {
	color: var(--rs-bg);
}

.rs-section--dark .rs-svc-tabs__text {
	color: var(--rs-on-dark-body);
}

@media (max-width: 809px) {
	.rs-svc-tabs__list {
		gap: var(--rs-s4);
	}
}

/*--------------------------------------------------------------
# Sub-points
--------------------------------------------------------------*/
/* The list that sits under a card body. Marker is drawn as a rule rather than a
   bullet glyph: a disc at this size reads heavier than the type it belongs to. */
.rs-svc-points {
	list-style: none;
	margin: var(--rs-s2) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--rs-s0);
}

.rs-svc-points li {
	position: relative;
	padding-left: var(--rs-s3);
	font-size: var(--rs-fs-text-caption);
	letter-spacing: var(--rs-ls-text-caption);
	line-height: var(--rs-lh-text-caption);
	color: var(--rs-ink-title-body);
}

.rs-svc-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 1px;
	background: var(--rs-accent);
}

.rs-section--dark .rs-svc-points li {
	color: var(--rs-on-dark-body);
}

/*--------------------------------------------------------------
# Slider
--------------------------------------------------------------*/
/* Scroll-snap, not a library. The row is a real scroll container, so it works
   with a trackpad, a touch drag and a keyboard before any script runs; the
   arrows are added by assets/js/service-ui.js and hide themselves again at any
   width where the row already fits. */
.rs-svc-slider {
	position: relative;
	margin-top: var(--rs-head-gap);
}

.rs-svc-slider__track {
	display: flex;
	gap: var(--rs-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* The cards have a radius and no shadow, so nothing is clipped by hiding
	   the overflow on the cross axis; this only stops a stray vertical wobble. */
	overflow-y: hidden;
	padding-bottom: var(--rs-s0);
}

.rs-svc-slider__track::-webkit-scrollbar {
	display: none;
}

.rs-svc-slider__slide {
	flex: 0 0 calc((100% - var(--rs-gap) * 2) / 3);
	scroll-snap-align: start;
	display: flex;
}

.rs-svc-slider__slide > * {
	width: 100%;
}

.rs-svc-slider__controls {
	display: flex;
	justify-content: flex-end;
	gap: var(--rs-s1);
	margin-top: var(--rs-s4);
}

.rs-svc-slider__controls[hidden] {
	display: none;
}

/* The ghost button's language: a hairline drawn as an inset shadow so the
   stroke stays out of the box model, filling to panel grey on hover. */
.rs-svc-slider__arrow {
	appearance: none;
	background: none;
	border: 0;
	box-shadow: inset 0 0 0 1px var(--rs-line);
	border-radius: var(--rs-r-sm);
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--rs-ink-title);
	cursor: pointer;
	transition: background 180ms ease, color 180ms ease;
}

.rs-svc-slider__arrow:hover:not(:disabled) {
	background: var(--rs-bg-panel);
}

.rs-svc-slider__arrow:disabled {
	color: var(--rs-muted);
	cursor: default;
}

.rs-svc-slider__arrow--prev svg {
	transform: rotate(180deg);
}

/* On the cream band the hover ground has to be something other than the panel
   grey, which is barely distinguishable from it. */
.rs-section--cream .rs-svc-slider__arrow:hover:not(:disabled) {
	background: var(--rs-bg);
}

@media (max-width: 1199px) {
	.rs-svc-slider__slide {
		flex-basis: calc((100% - var(--rs-gap)) / 2);
	}
}

/* A partial third card at the edge is what tells a reader the row scrolls, and
   it does that without an arrow being visible yet. */
@media (max-width: 809px) {
	.rs-svc-slider__slide {
		flex-basis: 86%;
	}
}

/*--------------------------------------------------------------
# Comparison table
--------------------------------------------------------------*/
/* The frame lives on the wrapper: border-collapse ignores border-radius, so a
   radius on the table squares the corners off and lets the cell borders poke
   through them. .rs-table-wrap already does this for article tables. */
.rs-svc-compare__table {
	table-layout: fixed;
}

.rs-svc-compare__table th:first-child {
	width: 26%;
}

/* Our column is tinted, not outlined — a border would sit inside the collapsed
   grid and read as a second table. The tint is the accent at 6%, which is the
   lightest step that survives on both white and the panel grey. */
.rs-svc-compare__table .rs-svc-compare__ours {
	background: rgb(97 126 88 / 6%);
	color: var(--rs-ink-title);
}

.rs-svc-compare__table thead th.rs-svc-compare__ours {
	color: var(--rs-accent-dark);
}

/* Below 640 the article stylesheet already scrolls .rs-table-wrap; a fixed
   layout at four columns would push the last one off-screen instead, so the
   table returns to auto and the wrapper does the scrolling. */
@media (max-width: 639px) {
	.rs-svc-compare__table {
		table-layout: auto;
		min-width: 560px;
	}
}

/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
/* No figures appear here by policy, so the block is built to answer "how does
   this work" rather than "how much": the model on the left, what moves it on
   the right. */
.rs-svc-pricing__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--rs-s8);
	align-items: start;
}

.rs-svc-pricing__lead h2 {
	margin: 0 0 var(--rs-s5);
}

.rs-svc-pricing__factors {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rs-svc-pricing__factor {
	padding-block: var(--rs-s4);
	border-top: 1px solid var(--rs-line);
	display: flex;
	flex-direction: column;
	gap: var(--rs-s1);
}

.rs-svc-pricing__factor:last-child {
	border-bottom: 1px solid var(--rs-line);
}

.rs-svc-pricing__name {
	font-size: var(--rs-fs-heading-card);
	font-weight: var(--rs-fw-heading);
	letter-spacing: var(--rs-ls-heading-card);
	line-height: var(--rs-lh-heading-card);
	color: var(--rs-ink-title);
	margin: 0;
}

.rs-svc-pricing__text {
	margin: 0;
	color: var(--rs-ink-title-body);
}

@media (max-width: 809px) {
	.rs-svc-pricing__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--rs-s6);
	}
}

/*--------------------------------------------------------------
# Case studies
--------------------------------------------------------------*/
.rs-svc-cases__note {
	margin: var(--rs-s6) 0 0;
	max-width: 720px;
	font-size: var(--rs-fs-text-caption);
	letter-spacing: var(--rs-ls-text-caption);
	color: var(--rs-grey);
}

.rs-svc-cases__quote {
	margin-top: var(--rs-s8);
	max-width: 720px;
}

/*--------------------------------------------------------------
# When it does not apply
--------------------------------------------------------------*/
/* Ruled rows, not callout boxes. A disqualifier set in a tinted panel reads as
   a caveat being managed; set as plain ruled prose it reads as the page simply
   telling you. That difference is the whole reason the block exists. */
.rs-svc-fit__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--rs-line);
}

.rs-svc-fit__item {
	padding-block: var(--rs-s5);
	border-bottom: 1px solid var(--rs-line);
	display: grid;
	grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
	gap: var(--rs-s4);
	align-items: start;
}

.rs-svc-fit__title {
	font-size: var(--rs-fs-heading-card);
	font-weight: var(--rs-fw-heading);
	letter-spacing: var(--rs-ls-heading-card);
	line-height: var(--rs-lh-heading-card);
	color: var(--rs-ink);
	margin: 0;
}

.rs-svc-fit__text {
	margin: 0;
	color: var(--rs-ink-body);
}

@media (max-width: 809px) {
	.rs-svc-fit__item {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--rs-s2);
	}
}

/*--------------------------------------------------------------
# Team note
--------------------------------------------------------------*/
.rs-svc-team__note {
	max-width: 640px;
	margin: calc(var(--rs-head-gap) * -1 + var(--rs-s5)) 0 var(--rs-s7);
	color: var(--rs-ink-body);
}

/*--------------------------------------------------------------
# Process — scroll-driven accordion (after BYQ babka-process-3)
--------------------------------------------------------------*/
/* Static first: every phase open, a plain stack of white cards on the cream
   band. .is-pinned (assets/js/service-ui.js, 1200 and up, motion allowed) turns
   it into one screen per phase with a sticky stage. */
.rs-svc-process__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--rs-s3);
}

.rs-svc-process__head .rs-section__head {
	margin-bottom: 0;
}

.rs-svc-process__scroller {
	margin-top: var(--rs-head-gap);
}

.rs-svc-process__tick {
	display: none;
	margin: 0;
	font-size: var(--rs-fs-text-caption);
	letter-spacing: var(--rs-ls-text-caption);
	color: var(--rs-grey);
	font-variant-numeric: tabular-nums lining-nums;
}

.rs-svc-process__tick span {
	color: var(--rs-ink);
}

.rs-svc-process__track {
	display: flex;
	flex-direction: column;
	gap: var(--rs-s2);
}

.rs-svc-phase {
	padding: var(--rs-s4) var(--rs-s5);
	border-radius: var(--rs-r-md);
	background: var(--rs-bg);
	box-shadow: inset 0 0 0 1px var(--rs-line);
}

.rs-svc-phase__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--rs-s0);
	align-items: baseline;
}

.rs-svc-phase__label {
	margin: 0;
	font-size: var(--rs-fs-text-caption);
	letter-spacing: var(--rs-ls-text-caption);
	color: var(--rs-accent-dark);
}

.rs-svc-phase__title {
	margin: 0;
	font-size: var(--rs-fs-heading-card-lg);
	font-weight: var(--rs-fw-heading);
	line-height: var(--rs-lh-heading-card-lg);
	letter-spacing: var(--rs-ls-heading-card-lg);
	color: var(--rs-ink-title);
	transition: color 0.5s ease;
}

.rs-svc-phase__body {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.rs-svc-phase__inner {
	min-height: 0;
	overflow: hidden;
	transition: opacity 0.5s ease;
}

.rs-svc-phase__grid {
	display: grid;
	gap: var(--rs-s4);
	padding-top: var(--rs-s4);
}

.rs-svc-phase__text {
	display: flex;
	flex-direction: column;
	gap: var(--rs-s4);
}

.rs-svc-phase__text p {
	max-width: 36em;
	margin: 0;
	color: var(--rs-ink-title-body);
}

.rs-svc-phase__bar {
	display: none;
	height: 2px;
	max-width: calc(var(--rs-s10) * 3);
	border-radius: var(--rs-r-pill);
	background: var(--rs-line-card);
	overflow: hidden;
}

.rs-svc-phase__bar i {
	display: block;
	height: 100%;
	background: var(--rs-accent);
	transform: scaleX(var(--rs-fill, 0));
	transform-origin: 0 50%;
	transition: transform 0.3s ease;
}

.rs-svc-phase__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--rs-r);
	overflow: hidden;
	background: var(--rs-bg-cream);
}

.rs-svc-phase__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 810px) {
	.rs-svc-phase__grid--media {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--rs-s6);
	}
}

@media (min-width: 1200px) {
	.rs-svc-phase__top {
		grid-template-columns: calc(var(--rs-s10) + var(--rs-s6)) minmax(0, 1fr);
		gap: var(--rs-s4);
	}

	.rs-svc-phase__grid {
		padding-left: calc(var(--rs-s10) + var(--rs-s6) + var(--rs-s4));
	}

	.rs-svc-phase__grid--media {
		gap: var(--rs-s8);
	}
}

/* Pinned mode. */
.rs-svc-process.is-pinned .rs-svc-process__tick {
	display: block;
}

.rs-svc-process.is-pinned .rs-svc-process__scroller {
	height: calc(var(--rs-phases, 4) * 100svh);
}

.rs-svc-process.is-pinned .rs-svc-process__stage {
	position: sticky;
	top: var(--rs-header-h);
	height: calc(100svh - var(--rs-header-h));
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.rs-svc-process.is-pinned .rs-svc-phase__top {
	cursor: pointer;
}

.rs-svc-process.is-pinned .rs-svc-phase__bar {
	display: block;
}

.rs-svc-process.is-pinned .rs-svc-phase:not(.is-on) .rs-svc-phase__body {
	grid-template-rows: 0fr;
}

.rs-svc-process.is-pinned .rs-svc-phase:not(.is-on) .rs-svc-phase__inner {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.rs-svc-process.is-pinned .rs-svc-phase:not(.is-on) .rs-svc-phase__title {
	color: var(--rs-grey);
}

.rs-svc-process.is-pinned .rs-svc-phase:not(.is-on):hover .rs-svc-phase__title {
	color: var(--rs-ink-title);
}

.rs-svc-process.is-pinned .rs-svc-phase__media {
	max-height: calc(100svh - var(--rs-s10) * 4);
}

.rs-svc-process.is-pinned .rs-svc-phase__top:focus-visible {
	outline: 2px solid var(--rs-accent);
	outline-offset: var(--rs-s1);
	border-radius: var(--rs-r-sm);
}

@media (max-width: 809px) {
	.rs-svc-phase {
		padding: var(--rs-s4);
	}
}

/*--------------------------------------------------------------
# Metrics — source links
--------------------------------------------------------------*/
/* A service-page figure links to the case study it comes from. The label keeps
   the home band's colour and size; the underline is the only difference, and it
   sits on the hairline token so the band still reads as figures, not links. */
.rs-metric__source {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--rs-line);
	text-underline-offset: 3px;
	transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.rs-metric__source:hover,
.rs-metric__source:focus-visible {
	color: var(--rs-ink);
	text-decoration-color: currentColor;
}

/*--------------------------------------------------------------
# Hub — channel grid
--------------------------------------------------------------*/
/* The home page's .rs-service cards, three across. The button sits on the card
   floor so a short description does not leave it floating mid-card. */
.rs-svc-channels .rs-service__body {
	flex: 1;
}

.rs-svc-channels__more {
	margin: auto 0 0;
	padding-top: var(--rs-s2);
}

/* 810–1199 is the home page's single column of horizontal cards, not a 2 + 1
   grid with an orphan — the same rule 06-home.css gives .rs-services. */
@media (min-width: 810px) and (max-width: 1199px) {
	.rs-svc-channels .rs-grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*--------------------------------------------------------------
# Related services
--------------------------------------------------------------*/
/* The only route between service pages while the menus still point at home
   page anchors, so each link carries the line that says what it is for. */
.rs-svc-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rs-gap);
}

.rs-svc-related__link {
	display: flex;
	flex-direction: column;
	gap: var(--rs-s1);
	height: 100%;
	padding: var(--rs-s4);
	background: var(--rs-bg);
	border-radius: var(--rs-r);
	text-decoration: none;
	transition: background 180ms ease;
}

.rs-svc-related__link:hover,
.rs-svc-related__link:focus-visible {
	background: var(--rs-bg-panel);
}

.rs-svc-related__label {
	font-size: var(--rs-fs-heading-card);
	font-weight: var(--rs-fw-heading);
	letter-spacing: var(--rs-ls-heading-card);
	line-height: var(--rs-lh-heading-card);
	color: var(--rs-ink-title);
}

.rs-svc-related__note {
	color: var(--rs-ink-title-body);
}

@media (max-width: 809px) {
	.rs-svc-related__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*--------------------------------------------------------------
# What you get — the node canvas (2026-10-23)
--------------------------------------------------------------*/
/* visual/graph.php. The user's final comp: a grey canvas under a dot grid,
   the open deliverable drawn as white node chips around one outlined hub,
   joined by straight dashed wires (the WYG lab's V05, 2026-10-23).
   Each graph is a layer on the same 16s clock as the tabs (--beat 0–3, every
   animation written for the first beat and delayed by --beat × 4s), so
   service-ui.js drives it the way it drove the screen loop. Positions are
   custom properties: --dx/--dy from 810 up, --mx/--my on phones. */
.rs-graph {
	position: relative;
	aspect-ratio: 4 / 3; /* the user's call, 2026-10-23; was 10 / 7 */
	border-radius: 12px;
	background:
		radial-gradient(circle, rgb(14 31 34 / 16%) 1px, transparent 1.4px) 0 0 / 22px 22px,
		var(--rs-grey-card);
	overflow: hidden;
}

.rs-graph__g {
	position: absolute;
	inset: 0;
	opacity: 0;
	animation: rs-scr-graph 16s linear infinite both;
	animation-delay: calc(var(--beat) * 4s);
}

@keyframes rs-scr-graph {
	0% { opacity: 0; }
	2%, 23.5% { opacity: 1; }
	25%, 100% { opacity: 0; }
}

.rs-graph__n {
	--x: var(--dx);
	--y: var(--dy);
	position: absolute;
	left: var(--x);
	top: var(--y);
	display: inline-flex;
	align-items: center;
	gap: var(--rs-s3);
	padding: 6px 18px 6px 6px;
	border-radius: 6px;
	background: #fff;
	color: var(--rs-ink);
	font-size: 16px;
	line-height: 1.2;
	white-space: nowrap;
	translate: -50% -50%;
	animation: rs-scr-node 16s cubic-bezier(0.2, 0.7, 0.2, 1) infinite both;
	animation-delay: calc(var(--beat) * 4s + var(--i) * 70ms);
}

@keyframes rs-scr-node {
	0% { opacity: 0; transform: translateY(8px); }
	3%, 100% { opacity: 1; transform: none; }
}

/* Wires: drawn in the canvas's own field (1000 × 700 wide, 600 × 800 on
   phones), centre to centre under the opaque chips. One solid colour, the
   34% ink tint resolved against the canvas grey, so where wires meet or cross
   the colour holds. The dashes march slowly toward the outcome; the name
   stays off the rs-scr clock, which only drives the per-tab layers. */
.rs-graph__w {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	overflow: visible;
}

.rs-graph__w--m {
	display: none;
}

.rs-graph__e {
	fill: none;
	stroke: #a7acac;
	stroke-width: 1.25;
	stroke-dasharray: 5 6;
	stroke-linecap: butt;
	stroke-linejoin: miter;
	vector-effect: non-scaling-stroke;
	animation: rs-graph-march 1.4s linear infinite;
}

.rs-graph__e--cut {
	stroke: #c8cac9;
}

@keyframes rs-graph-march {
	to { stroke-dashoffset: -11; }
}

.rs-graph__chip {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 4px;
	background: var(--rs-grey-card);
}

.rs-graph__chip svg {
	width: 22px;
	height: 22px;
}

.rs-graph__chip .rs-graph__face {
	width: 30px;
	height: 30px;
	fill: var(--rs-ink);
}

.rs-graph__n--hub {
	z-index: 1;
	box-shadow: inset 0 0 0 1px var(--rs-ink);
}

.rs-graph__n--ok .rs-graph__chip {
	color: var(--rs-accent);
}

.rs-graph__n--cut {
	color: var(--rs-muted);
	text-decoration: line-through;
}

.rs-graph__n--cut .rs-graph__chip {
	color: #b4553a;
}

@media (max-width: 809px) {
	.rs-graph {
		aspect-ratio: 3 / 4;
	}

	.rs-graph__w--d {
		display: none;
	}

	.rs-graph__w--m {
		display: block;
	}

	.rs-graph__n {
		--x: var(--mx);
		--y: var(--my);
		gap: var(--rs-s2);
		padding: 4px 12px 4px 4px;
		font-size: 14px;
	}

	.rs-graph__chip {
		width: 32px;
		height: 32px;
	}

	.rs-graph__chip svg {
		width: 18px;
		height: 18px;
	}

	.rs-graph__chip .rs-graph__face {
		width: 24px;
		height: 24px;
	}
}

/* Reduced motion: 02-base.css cuts every animation to 0.01ms, which would
   leave each layer on its last (hidden) frame. Here the canvas does not
   animate at all; the selected tab picks the graph, still. */
@media (prefers-reduced-motion: reduce) {
	.rs-graph__g,
	.rs-graph__n,
	.rs-graph__e {
		animation: none;
	}

	.rs-pipe:has(.rs-pipe__item:nth-child(1) [aria-selected="true"]) .rs-graph__g:nth-child(1),
	.rs-pipe:has(.rs-pipe__item:nth-child(2) [aria-selected="true"]) .rs-graph__g:nth-child(2),
	.rs-pipe:has(.rs-pipe__item:nth-child(3) [aria-selected="true"]) .rs-graph__g:nth-child(3),
	.rs-pipe:has(.rs-pipe__item:nth-child(4) [aria-selected="true"]) .rs-graph__g:nth-child(4) {
		opacity: 1;
	}
}

/*--------------------------------------------------------------
# No shell rules on service pages (2026-10-23, the user's call)
--------------------------------------------------------------*/
/* The 1440px shell's hairlines are drawn by three overlays (03-layout.css):
   every .rs-frame child's, the dark band's own, and the blank divider's.
   All three are switched off on the two service post types; the rest of the
   site keeps them. */
body.single-rs_service .rs-frame > *::before,
body.single-rs_hub .rs-frame > *::before,
body.single-rs_vertical .rs-frame > *::before,
body.single-rs_service .rs-section--dark::before,
body.single-rs_hub .rs-section--dark::before,
body.single-rs_vertical .rs-section--dark::before,
body.single-rs_service .rs-divider--blank::before,
body.single-rs_hub .rs-divider--blank::before,
body.single-rs_vertical .rs-divider--blank::before {
	display: none;
}

/* Nor the full-width horizontal rules: the edges of the divider strips and
   the top border between two sections that meet without one. The hatch inside
   a strip stays. */
body.single-rs_service .rs-divider,
body.single-rs_hub .rs-divider,
body.single-rs_vertical .rs-divider {
	border-block: 0;
}

body.single-rs_service .rs-section + .rs-section,
body.single-rs_hub .rs-section + .rs-section,
body.single-rs_vertical .rs-section + .rs-section {
	border-top: 0;
}

/* No green accent span in any heading on the service pages (2026-10-23, the
   user's call). The pages' own headings had their [brackets] removed; this
   covers what they borrow, such as the closing block's fallback to the home
   page's heading, which keeps its accent on the home page. */
body.single-rs_service .rs-accent,
body.single-rs_hub .rs-accent,
body.single-rs_vertical .rs-accent {
	color: inherit;
}

/*--------------------------------------------------------------
# Hero screens — the product visuals beside the inbox (2026-10-23)
--------------------------------------------------------------*/
/* template-parts/service/visual/{sequence,email,dialler,lead,records,
   attribution}.php, chosen in the Hero Screen Lab. The inbox's language
   exactly: a 4px #24301f frame at 16px radius, 13px type, 600-weight row
   titles, #f3f3f0 for the selected row, black for the primary button, clay
   only for email. Under 520px of frame the side pane drops. */
.hs {
	--hs-frame: #24301f;
	--hs-ink: #0e1f22;
	--hs-ink-2: #55615f;
	--hs-line: #e7e7e2;
	--hs-mist: #f3f3f0;
	--hs-clay-l: #f1c7a6;
	--hs-ok: #3f5737;
	--hs-ok-l: #e6ebdf;
	--hs-warn: #8a4a22;
	position: relative;
	container-type: inline-size;
	color: var(--hs-ink);
	font-size: 13px;
	line-height: 1.35;
}

.hs-win {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	min-height: 470px;
	border: 4px solid var(--hs-frame);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
}

.hs-win--flip {
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.hs-win--single {
	grid-template-columns: minmax(0, 1fr);
}

.hs-pane {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 16px 10px;
}

.hs-pane + .hs-pane {
	border-left: 1px solid var(--hs-line);
}

.hs-pane--main {
	padding: 18px 20px;
}

.hs-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 0 6px 12px;
}

.hs-pane--main > .hs-top {
	padding-inline: 0;
}

.hs-top b {
	font-size: 16px;
	font-weight: 600;
}

.hs-seg {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border-radius: 8px;
	background: var(--hs-mist);
	font-size: 11px;
	color: var(--hs-ink-2);
}

.hs-seg span {
	padding: 3px 8px;
	border-radius: 6px;
}

.hs-seg .is-on {
	background: #fff;
	color: var(--hs-ink);
	box-shadow: 0 1px 2px rgb(14 31 34 / 10%);
}

/* Rows: the inbox's thread row. */
.hs-row {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: start;
	padding: 10px 8px;
	border-radius: 8px;
	font-size: 12px;
	color: var(--hs-ink-2);
}

.hs-row.is-on {
	background: var(--hs-mist);
}

.hs-row--line {
	grid-template-columns: 10px minmax(0, 1fr) auto;
	align-items: center;
}

.hs-t {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.hs-t b {
	font-size: 13px;
	font-weight: 600;
	color: var(--hs-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hs-time {
	font-size: 11px;
	color: var(--hs-ink-2);
	white-space: nowrap;
}

.hs-face {
	flex: none;
	border-radius: 50%;
	background: var(--hs-mist);
	object-fit: cover;
}

.hs-i {
	width: 14px;
	height: 14px;
	flex: none;
}

.hs-dot {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--hs-mist);
	color: var(--hs-ink);
}

.hs-row--line .hs-dot {
	width: 8px;
	height: 8px;
	background: var(--hs-ink-2);
}

.hs-dot--ok {
	background: var(--hs-ok) !important;
}

.hs-dot--warn {
	background: #d4875a !important;
}

.hs-dot--mute {
	background: #c8cac9 !important;
}

/* The open item's header: the inbox's "who" row. */
.hs-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--hs-line);
}

.hs-head > span:not(.hs-chip):not(.hs-ico):not(.hs-live) {
	display: grid;
	flex: 1;
	min-width: 0;
	font-size: 11px;
	color: var(--hs-ink-2);
}

.hs-head b {
	font-size: 14px;
	font-weight: 600;
	color: var(--hs-ink);
}

.hs-label {
	margin: 16px 0 8px;
	font-size: 11px;
	color: var(--hs-ink-2);
}

.hs-muted {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--hs-ink-2);
}

.hs-mt {
	margin: 8px 0 0;
}

/* Steps: the inbox's sequence list. */
.hs-steps,
.hs-journey {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hs-steps li,
.hs-journey li {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	font-size: 12px;
	color: var(--hs-ink-2);
}

.hs-steps li > span:not(.hs-ch),
.hs-journey li > span:not(.hs-ch) {
	display: grid;
}

.hs-steps b,
.hs-journey b {
	font-size: 13px;
	font-weight: 500;
	color: var(--hs-ink);
}

.hs-steps i,
.hs-journey i {
	font-size: 11px;
	font-style: normal;
}

/* The journey reads as a timeline: a hairline down the badge column. */
.hs-journey {
	position: relative;
	gap: 16px;
}

.hs-journey::before {
	content: "";
	position: absolute;
	top: 11px;
	bottom: 11px;
	left: 10.5px;
	border-left: 1px dashed #c8cac9;
}

.hs-journey .hs-ch {
	position: relative;
}

.hs-journey li.is-on {
	margin-inline: -8px;
	padding: 8px;
	border-radius: 8px;
	background: var(--hs-mist);
}

.hs-ch {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	flex: none;
	border-radius: 6px;
}

.hs-ch--li {
	background: var(--hs-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.hs-ch--mail {
	background: var(--hs-clay-l);
	color: #7a3f1d;
}

.hs-ch--phone,
.hs-ch--form {
	background: var(--hs-mist);
	color: var(--hs-ink);
	box-shadow: inset 0 0 0 1px var(--hs-line);
}

.hs-ch--dark {
	background: var(--hs-ink);
	color: #fff;
}

.hs-row > .hs-ch {
	width: 28px;
	height: 28px;
	border-radius: 8px;
}

/* Chips */
.hs-chip {
	display: inline-flex;
	align-items: center;
	flex: none;
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--hs-mist);
	font-size: 11px;
	font-weight: 500;
	color: var(--hs-ink-2);
	white-space: nowrap;
}

.hs-chip--ok {
	background: var(--hs-ok-l);
	color: var(--hs-ok);
}

.hs-chip--warn {
	background: #f7e3d3;
	color: var(--hs-warn);
}

.hs-chip--dark {
	background: var(--hs-ink);
	color: #fff;
}

.hs-pills {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

/* Footer row and the primary button: the inbox's compose bar and send. */
.hs-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
}

.hs-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 12px;
	border-radius: 7px;
	background: var(--rs-ink);
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	white-space: nowrap;
}

.hs-btn--sm {
	height: 26px;
	padding: 0 9px;
	font-size: 11px;
}

/* Fields */
.hs-fields {
	display: grid;
	gap: 0;
	margin: 0;
}

.hs-fields > div {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	padding: 9px 0;
	border-bottom: 1px solid var(--hs-line);
}

.hs-fields dt {
	font-size: 11px;
	color: var(--hs-ink-2);
}

.hs-fields dd {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	font-size: 13px;
	font-weight: 500;
}

.hs-fields--stack > div {
	grid-template-columns: minmax(0, 1fr);
	gap: 4px;
	padding: 10px 6px;
}

.hs-src {
	padding: 2px 6px;
	border-radius: 5px;
	background: var(--hs-mist);
	font-size: 10px;
	color: var(--hs-ink-2);
}

.hs-src--r {
	background: var(--hs-ink);
	color: #fff;
}

/* Cards */
.hs-card {
	display: grid;
	justify-items: start;
	gap: 2px;
	margin: 0 6px 12px;
	padding: 14px;
	border-radius: 10px;
	background: var(--hs-mist);
}

.hs-card .hs-face {
	margin-bottom: 8px;
}

.hs-card b {
	font-size: 14px;
	font-weight: 600;
}

/* Checks */
.hs-checks {
	display: grid;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.hs-checks li {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	font-size: 13px;
	font-weight: 500;
}

.hs-checks i {
	font-size: 11px;
	font-style: normal;
	font-weight: 400;
	color: var(--hs-ok);
}

.hs-checks--tight {
	margin-top: 0;
}

.hs-ok,
.hs-no {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--hs-ok-l);
	color: var(--hs-ok);
}

.hs-no {
	background: var(--hs-mist);
	color: #9a9d9b;
}

.hs-ico {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--hs-mist);
	color: var(--hs-ink);
}

.hs-ico .hs-i {
	width: 18px;
	height: 18px;
}

.hs-ico--dark {
	background: var(--hs-ink);
	color: #fff;
}

/* Bars and placement */
.hs-bar {
	height: 6px;
	border-radius: 3px;
	background: var(--hs-mist);
	overflow: hidden;
}

.hs-bar i {
	display: block;
	width: var(--w);
	height: 100%;
	background: var(--hs-ink);
}

.hs-place {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}

.hs-place span {
	padding: 10px;
	border: 1px solid var(--hs-line);
	border-radius: 8px;
	font-size: 12px;
	color: var(--hs-ink-2);
	text-align: center;
}

.hs-place .is-on {
	border-color: var(--hs-ink);
	color: var(--hs-ink);
	font-weight: 600;
}

/* Sequence builder */
.hs-flow {
	position: relative;
	display: grid;
	gap: 10px;
}

.hs-node {
	position: relative;
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	padding: 12px;
	border: 1px solid var(--hs-line);
	border-radius: 10px;
	background: #fff;
	font-size: 12px;
	color: var(--hs-ink-2);
}

.hs-node span {
	display: grid;
	gap: 2px;
}

.hs-node b {
	font-size: 13px;
	font-weight: 600;
	color: var(--hs-ink);
}

.hs-node.is-on {
	border-color: var(--hs-ink);
}

/* One branch node since "No answer → Call on Day 4" went (2026-10-26); it runs
   the full width of the flow, like the step cards. */
.hs-branch {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.hs-node--sm {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	padding: 8px 10px;
	border-style: dashed;
}

/* Copy matrix */
.hs-matrix {
	display: grid;
	grid-template-columns: auto repeat(3, minmax(0, 1fr));
	gap: 4px;
	padding: 0 6px;
	font-size: 11px;
}

.hs-matrix b {
	padding: 6px 4px;
	font-weight: 500;
	color: var(--hs-ink-2);
	white-space: nowrap;
}

.hs-matrix i {
	display: grid;
	place-items: center;
	padding: 10px 0;
	border-radius: 6px;
	background: var(--hs-mist);
	font-style: normal;
	color: var(--hs-ink-2);
}

.hs-matrix i.is-on {
	background: var(--hs-ink);
	color: #fff;
}

/* Email */
.hs-mailhead {
	display: grid;
	border-bottom: 1px solid var(--hs-line);
}

.hs-mailhead span {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	border-top: 1px solid var(--hs-line);
	font-size: 12px;
}

.hs-mailhead span:first-child {
	border-top: 0;
	padding-top: 0;
}

.hs-mailhead i {
	width: 52px;
	font-style: normal;
	color: var(--hs-ink-2);
}

.hs-mailbody {
	padding-top: 14px;
	font-size: 13px;
	line-height: 1.5;
}

.hs-mailbody p {
	margin: 0 0 10px;
}

.hs-mailbody mark {
	padding: 1px 3px;
	border-radius: 3px;
	background: var(--hs-clay-l);
	color: inherit;
}

/* Calling */
.hs-call {
	display: grid;
	justify-items: center;
	gap: 2px;
	padding: 10px 0 16px;
	border-bottom: 1px solid var(--hs-line);
	text-align: center;
}

.hs-call .hs-face {
	margin-bottom: 8px;
}

.hs-call b {
	font-size: 15px;
	font-weight: 600;
}

.hs-live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--hs-ok-l);
	font-size: 11px;
	font-weight: 500;
	color: var(--hs-ok);
	font-variant-numeric: tabular-nums;
}

.hs-head .hs-live {
	margin-top: 0;
}

.hs-pulse {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	animation: hs-pulse 1.6s ease-in-out infinite;
}

@keyframes hs-pulse {
	50% { opacity: 0.3; }
}

.hs-brief p:not(.hs-label) {
	margin: 0;
	font-size: 13px;
}

.hs-brief .hs-label:first-child {
	margin-top: 14px;
}

.hs-controls {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
}

.hs-round {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--hs-mist);
	color: var(--hs-ink);
}

.hs-round--end {
	background: var(--rs-ink);
	color: #fff;
}

.hs-script {
	display: grid;
	gap: 10px;
	padding-top: 16px;
}

.hs-say,
.hs-hear {
	display: grid;
	gap: 2px;
	max-width: 88%;
	margin: 0;
	padding: 10px 14px;
	border-radius: 12px 12px 12px 4px;
	background: var(--hs-mist);
	font-size: 13px;
}

.hs-say {
	justify-self: end;
	border-radius: 12px 12px 4px 12px;
	background: var(--hs-ink);
	color: #fff;
}

.hs-say i,
.hs-hear i {
	font-size: 10px;
	font-style: normal;
	opacity: 0.6;
}

.hs-objection {
	display: grid;
	gap: 4px;
	padding: 10px 12px;
	border: 1px dashed #c8cac9;
	border-radius: 10px;
	font-size: 12px;
	color: var(--hs-ink-2);
}

.hs-objection b {
	font-size: 12px;
	font-weight: 600;
	color: var(--hs-ink);
}

/* Inbound */
.hs-route {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding: 12px;
	border-radius: 10px;
	background: var(--hs-mist);
}

.hs-route > span:nth-child(2) {
	display: grid;
	flex: 1;
	font-size: 11px;
	color: var(--hs-ink-2);
}

.hs-route b {
	font-size: 13px;
	font-weight: 600;
	color: var(--hs-ink);
}

.hs-track {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 4px 0 20px;
	padding: 0;
	list-style: none;
}

.hs-track li {
	position: relative;
	display: grid;
	gap: 2px;
	padding: 12px;
	border: 1px solid var(--hs-line);
	border-radius: 10px;
	font-size: 11px;
	color: var(--hs-ink-2);
}

.hs-track li .hs-ico {
	width: 30px;
	height: 30px;
	margin-bottom: 8px;
	border-radius: 8px;
}

.hs-track li b {
	font-size: 13px;
	font-weight: 600;
	color: var(--hs-ink);
}

.hs-track li.is-done .hs-ico {
	background: var(--hs-ok-l);
	color: var(--hs-ok);
}

.hs-track li.is-on {
	border-color: var(--hs-ink);
}

.hs-track li.is-on .hs-ico {
	background: var(--hs-ink);
	color: #fff;
}

.hs-msg {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: start;
	padding: 16px;
	border: 1px solid var(--hs-line);
	border-radius: 12px;
}

.hs-msg b {
	font-size: 14px;
	font-weight: 600;
}

.hs-msg p {
	margin: 4px 0 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--hs-ink-2);
}

/* Enrichment */
.hs-fall {
	position: relative;
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0 6px;
	list-style: none;
}

.hs-fall::before {
	content: "";
	position: absolute;
	top: 11px;
	bottom: 11px;
	left: 16.5px;
	border-left: 1px dashed #c8cac9;
}

.hs-fall li {
	position: relative;
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	column-gap: 10px;
	font-size: 11px;
	color: var(--hs-ink-2);
}

.hs-fall li > span:first-child {
	grid-row: span 2;
}

.hs-fall b {
	font-size: 13px;
	font-weight: 600;
	color: var(--hs-ink);
}

.hs-fields--src > div {
	grid-template-columns: 100px minmax(0, 1fr) auto;
}

.hs-table {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
	column-gap: 10px;
	font-size: 12px;
}

/* Each row is a subgrid of the table, so a wider chip in one row cannot
   shift that row's columns off the header's. */
.hs-tr {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	gap: 10px;
	align-items: center;
	padding: 9px 8px;
	border-bottom: 1px solid var(--hs-line);
}

.hs-tr > span {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
}

.hs-th {
	padding-top: 0;
	font-size: 11px;
	color: var(--hs-ink-2);
}

.hs-tr.is-on {
	border-radius: 8px;
	border-bottom-color: transparent;
	background: var(--hs-mist);
}

.hs-shim {
	display: block;
	width: 70%;
	height: 10px;
	border-radius: 4px;
	background: linear-gradient(90deg, #e7e7e2 25%, #f7f7f4 50%, #e7e7e2 75%) 0 0 / 200% 100%;
	animation: hs-shim 1.6s linear infinite;
}

@keyframes hs-shim {
	to { background-position: -200% 0; }
}

/* Pipeline board */
.hs-board {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	flex: 1;
}

.hs-col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	border-radius: 10px;
	background: var(--hs-mist);
}

.hs-col > b {
	padding: 0 2px 4px;
	font-size: 11px;
	font-weight: 500;
	color: var(--hs-ink-2);
}

.hs-kcard {
	display: grid;
	justify-items: start;
	gap: 6px;
	padding: 10px;
	border: 1px solid var(--hs-line);
	border-radius: 8px;
	background: #fff;
	font-size: 12px;
	font-weight: 600;
}

.hs-kcard.is-on {
	border-color: var(--hs-ink);
}

/* Narrow frames: the second pane goes, the inbox's rule. */
@container (max-width: 520px) {
	.hs-win,
	.hs-win--flip {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.hs-win:not(.hs-win--single) > .hs-pane:not(.hs-pane--main) {
		display: none;
	}

	.hs-pane + .hs-pane {
		border-left: 0;
	}

	.hs-track,
	.hs-board {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The contact column keeps its full role ("Director of Treasury"). */
	.hs-table {
		grid-template-columns: minmax(max-content, 1.6fr) minmax(0, 1fr) auto;
	}

	.hs-tr > span:nth-child(3),
	.hs-tr > span:nth-child(4) {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hs-pulse,
	.hs-shim {
		animation: none;
	}
}

/*--------------------------------------------------------------
# Industry pages — who we reach (2026-10-23)
--------------------------------------------------------------*/
/* template-parts/service/buyers.php. Three segment cards in the "What we do"
   card's material (grey, 24px, caption number on top, title and text at the
   foot), then the titles we reach as quiet tags under a hairline. */
.rs-svc-buyers__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--rs-gap);
	margin: 0;
	padding: 0;
}

.rs-svc-buyers__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--rs-s7);
	min-height: 260px;
	padding: var(--rs-s4);
	border-radius: var(--rs-r);
	background: var(--rs-grey-card);
}

.rs-svc-buyers__num {
	font-size: var(--rs-fs-text-caption);
	letter-spacing: var(--rs-ls-text-caption);
	line-height: var(--rs-lh-text-caption);
	color: var(--rs-grey);
	font-variant-numeric: tabular-nums lining-nums;
}

.rs-svc-buyers__text {
	display: grid;
	gap: var(--rs-s2);
}

.rs-svc-buyers__title {
	margin: 0;
	font-size: var(--rs-fs-heading-card-lg);
	font-weight: var(--rs-fw-heading);
	letter-spacing: var(--rs-ls-heading-card-lg);
	line-height: var(--rs-lh-heading-card-lg);
	color: var(--rs-ink);
}

.rs-svc-buyers__body {
	margin: 0;
	color: var(--rs-ink);
	text-wrap: pretty;
}

.rs-svc-buyers__titles {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: var(--rs-gap);
	align-items: start;
	margin-top: var(--rs-s7);
	padding-top: var(--rs-s3);
	border-top: 1px solid var(--rs-line);
}

.rs-svc-buyers__label {
	grid-column: span 2;
	margin: 0;
	padding-top: 7px;
	font-size: var(--rs-fs-text-caption);
	line-height: var(--rs-lh-text-caption);
	color: var(--rs-grey);
}

.rs-svc-buyers__tags {
	grid-column: span 6;
	display: flex;
	flex-wrap: wrap;
	gap: var(--rs-s1);
	margin: 0;
	padding: 0;
}

.rs-svc-buyers__tags li {
	padding: 6px 14px;
	border: 1px solid var(--rs-line);
	border-radius: 100px;
	font-size: var(--rs-fs-text-caption);
	line-height: var(--rs-lh-text-caption);
	color: var(--rs-ink);
}

@media (max-width: 1199px) {
	.rs-svc-buyers__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.rs-svc-buyers__card {
		min-height: 0;
		gap: var(--rs-s6);
	}

	.rs-svc-buyers__titles {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--rs-s3);
	}

	.rs-svc-buyers__label,
	.rs-svc-buyers__tags {
		grid-column: auto;
	}

	.rs-svc-buyers__label {
		padding-top: 0;
	}
}

/* The method step's service link. */
.rs-svc-method__more {
	display: inline-flex;
	align-items: center;
	gap: var(--rs-s1);
	margin-top: var(--rs-s3);
	color: var(--rs-ink);
	font-size: var(--rs-fs-text-caption);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*--------------------------------------------------------------
# Industry pages — the method as four open steps (2026-10-23)
--------------------------------------------------------------*/
/* template-parts/service/method.php on rs_vertical. One row of four from
   1200 up, two by two below, one column on phones. Each step hangs from a
   hairline (no fill), so the row reads apart from the grey buyer cards above
   it: caption number, card title, text, the service that does the step. */
.rs-svc-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--rs-gap);
	margin: 0;
	padding: 0;
}

.rs-svc-steps__item {
	display: flex;
	flex-direction: column;
	padding-top: var(--rs-s3);
	border-top: 1px solid var(--rs-ink);
}

.rs-svc-steps__num {
	font-size: var(--rs-fs-text-caption);
	letter-spacing: var(--rs-ls-text-caption);
	line-height: var(--rs-lh-text-caption);
	color: var(--rs-grey);
	font-variant-numeric: tabular-nums lining-nums;
}

.rs-svc-steps__title {
	margin: var(--rs-s7) 0 var(--rs-s2);
	font-size: var(--rs-fs-heading-card-lg);
	font-weight: var(--rs-fw-heading);
	letter-spacing: var(--rs-ls-heading-card-lg);
	line-height: var(--rs-lh-heading-card-lg);
}

.rs-svc-steps__body {
	margin: 0;
	color: var(--rs-ink);
	text-wrap: pretty;
}

.rs-svc-steps .rs-svc-method__more {
	margin-top: auto;
	padding-top: var(--rs-s4);
}

@media (max-width: 1199px) {
	.rs-svc-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--rs-s7);
	}
}

@media (max-width: 809px) {
	.rs-svc-steps {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--rs-s6);
	}

	.rs-svc-steps__title {
		margin-top: var(--rs-s4);
	}
}