/*
 * Collect & Showcase – widget sections (Figma 1270:15100 reviewCarousel, 1270:15750 floatingReview,
 * 1270:15940 videoCarousel, 1270:16585 reviewGrid). Patterns cs-carousel, cs-floating, cs-video, cs-grid.
 *
 * One component, `.rs-cs-feature`: Section Divider (24) + 40px + a 1280×714 row of a coloured 620×714 panel
 * (title, lead, product mock) and a 620×714 2×2 feature grid, 40px apart. Each pattern adds the 120px gap
 * to the next section as padding-bottom on its root group (778 + 120).
 *
 * Modifiers on .rs-cs-feature: is-peach | is-mint | is-yellow | is-lavender (panel colours) and
 * is-panel-right (panel on the right on desktop; it stays first in the DOM, so it stacks first).
 * Per-section values (square-grid decoration offset/flip, mock offset) are set on the section root class.
 */

/* ---- Section roots: decoration + mock offsets from Figma ---- */
/* --rs-cs-sq-*: the 925×756 rounded-square grid (x/y in the panel's border box, rotated or mirrored).
   --rs-cs-mock-top: mock top (Figma y) − 200 (title 92 + 16 + lead 52 + 40 top) − 16 (block gap). */
.rs-cs-carousel { --rs-cs-sq-x: -50px; --rs-cs-sq-y: -59px; --rs-cs-sq-t: scale(-1); --rs-cs-mock-top: 88px; }
.rs-cs-floating { --rs-cs-sq-x: -270px; --rs-cs-sq-y: 1px; --rs-cs-sq-t: scaleX(-1); --rs-cs-mock-top: 76px; }
.rs-cs-video { --rs-cs-sq-x: -50px; --rs-cs-sq-y: 91px; --rs-cs-sq-t: scale(-1); --rs-cs-mock-top: 41px; }
.rs-cs-grid { --rs-cs-sq-x: -40px; --rs-cs-sq-y: 1px; --rs-cs-sq-t: scaleX(-1); --rs-cs-mock-top: 66px; }

/* ---- Component ---- */
.rs-cs-feature {
	--rs-cs-divider: rgba(0, 0, 0, 0.1);
	--rs-cs-line: var(--wp--preset--color--border);
	--rs-cs-from: var(--wp--preset--color--white);
	--rs-cs-to: var(--wp--preset--color--white);
	box-sizing: border-box;
	width: 100%;
}

/* Panel colours: 1px border + Figma's radial fill (349×402 ellipse centred at 310,447 of 620×714). */
.rs-cs-feature.is-peach { --rs-cs-line: var(--wp--preset--color--orange-30); --rs-cs-from: #ffa55d; --rs-cs-to: #ffdfc5; }
.rs-cs-feature.is-mint { --rs-cs-line: #67e0c7; --rs-cs-from: #31ffc5; --rs-cs-to: #c6ffe5; }
.rs-cs-feature.is-yellow { --rs-cs-line: #fed94a; --rs-cs-from: #f8f8f8; --rs-cs-to: #ffeba4; }
.rs-cs-feature.is-lavender { --rs-cs-line: var(--wp--preset--color--purple-60); --rs-cs-from: #e58bff; --rs-cs-to: #e7d0ff; }

.rs-cs-feature > .rs-cs-feature__row {
	align-items: stretch;
	width: 100%;
}

.rs-cs-feature.is-panel-right > .rs-cs-feature__row {
	flex-direction: row-reverse;
}

/* ---- Coloured panel ---- */
.rs-cs-feature__row > .rs-cs-feature__panel {
	position: relative;
	isolation: isolate;
	flex: 1 1 620px;
	box-sizing: border-box;
	min-width: 0;
	min-height: 714px;
	margin: 0;
	padding: 39px; /* 40 from the outer edge, inside the 1px border */
	overflow: hidden;
	border: 1px solid var(--rs-cs-line);
	border-radius: 16px;
	background: radial-gradient(56.303% 56.303% at 50% 62.605%, var(--rs-cs-from) 0%, var(--rs-cs-to) 100%) border-box;
	container-type: inline-size;
}

.rs-cs-feature__panel::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: calc(var(--rs-cs-sq-y, 0px) - 1px);
	left: calc(var(--rs-cs-sq-x, 0px) - 1px);
	width: 925px;
	height: 756px;
	background: url("../../images/cs/showcase/grid-squares.svg") 0 0 / 925px 756px no-repeat;
	transform: var(--rs-cs-sq-t, none);
	pointer-events: none;
}

.rs-cs-feature__panel > .rs-cs-feature__title {
	max-width: 515px;
}

.rs-cs-feature__panel > .rs-cs-feature__lead {
	opacity: 0.7;
}

/* Product mock: drawn at Figma size, scaled down with the panel (content box 540 at 1600). */
.rs-cs-feature__panel > .rs-cs-mock {
	position: relative;
	flex: none;
	align-self: center;
	box-sizing: border-box;
	margin-top: var(--rs-cs-mock-top, 0px);
	zoom: min(1, tan(atan2(100cqw, 540px)));
	font-family: var(--wp--preset--font-family--inter);
	letter-spacing: 0;
	line-height: normal;
}

.rs-cs-mock img {
	display: block;
	max-width: none;
	height: auto;
}

.rs-cs-mock i {
	display: block;
	font-style: normal;
}

/* ---- 2×2 feature grid (0.5px #e7e7e7 frame, 1px column and 0.5px row dividers at 10% black) ---- */
.rs-cs-feature__row > .rs-cs-feature__grid {
	display: grid;
	flex: 1 1 620px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: inset 0 0 0 0.5px var(--wp--preset--color--border);
}

.rs-cs-feature__grid > .rs-cs-feature__item {
	--rs-cs-div-v: 0 0 0 transparent;
	--rs-cs-div-h: inset 0 -0.5px 0 var(--rs-cs-divider);
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	/* Figma pads 40; its tallest cells (6-line copy) overflow the 357px row by 1px, so trim the invisible bottom. */
	padding: 40px 40px 38px;
	box-shadow: var(--rs-cs-div-v), var(--rs-cs-div-h);
}

.rs-cs-feature__grid > .rs-cs-feature__item:nth-child(odd):not(:last-child) {
	--rs-cs-div-v: inset -1px 0 0 var(--rs-cs-divider);
}

/* Last row: the last item, and the odd item before it when the count is even. */
.rs-cs-feature__grid > .rs-cs-feature__item:last-child,
.rs-cs-feature__grid > .rs-cs-feature__item:nth-child(odd):nth-last-child(2) {
	--rs-cs-div-h: 0 0 0 transparent;
}

.rs-cs-feature__item > * {
	margin: 0;
}

/* Icon in a 48px ring (1px 10%-black inside stroke, 12px padding). */
.rs-cs-feature__item > .rs-cs-feature__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	border-radius: 50px;
	box-shadow: inset 0 0 0 1px var(--rs-cs-divider);
}

.rs-cs-feature__icon img {
	display: block;
	width: 24px;
	height: 24px;
}

.rs-cs-feature__item > .rs-cs-feature__text {
	align-self: stretch;
}

.rs-cs-feature__text > * {
	margin: 0;
}

/* =====================================================================================================
 * Mock: Review Carousel (Group 95, 524×320 at 48,304) — "Resent Clients Feedback" panel + three cards.
 * ===================================================================================================== */
.rs-cs-rc {
	width: 524px;
	height: 320px;
}

.rs-cs-rc__panel {
	position: absolute;
	top: 0;
	left: 32px;
	box-sizing: border-box;
	width: 460px;
	height: 320px;
	padding: 18px;
	border-radius: 6px;
	background: #f2f2f2;
	box-shadow: -8px -4px 26px 0 rgba(0, 0, 0, 0.15);
}

.rs-cs-rc__head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.rs-cs-rc__title {
	flex: 1 1 0;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--black);
}

.rs-cs-rc__nav {
	display: flex;
	flex: none;
	gap: 6px;
}

.rs-cs-mock .rs-cs-rc__nav img {
	box-sizing: content-box;
	width: 10px;
	height: 10px;
	padding: 4px;
	border-radius: 7px;
	background: var(--wp--preset--color--white);
}

.rs-cs-mock .rs-cs-rc__nav img + img {
	box-shadow: -3px 3px 5.5px 0 rgba(0, 0, 0, 0.03);
}

.rs-cs-rc__cards {
	position: absolute;
	top: 59.695px;
	left: 0;
	display: flex;
	align-items: center;
	gap: 22px;
}

.rs-cs-rc__card {
	display: flex;
	flex: 0 0 160px;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
	padding: 6px;
	border-radius: 5.82px;
	background: var(--wp--preset--color--white);
	/* 0.47px #cececf stroke (takes no space in Figma) + card shadow */
	box-shadow: inset 0 0 0 0.47px var(--wp--preset--color--border-strong), -4px 5px 10px 0 rgba(0, 0, 0, 0.08);
}

.rs-cs-rc__card.is-featured {
	box-shadow: inset 0 0 0 0.47px var(--wp--preset--color--border-strong);
}

.rs-cs-mock .rs-cs-rc__photo {
	width: 148px;
	height: 140px;
	border-radius: 5px;
	background: var(--wp--preset--color--border-strong);
	object-fit: cover;
}

.rs-cs-rc__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	padding-bottom: 8px;
	box-shadow: inset 0 -0.5px 0 #ededed;
}

.rs-cs-rc__author {
	display: flex;
	align-items: center;
	align-self: stretch;
	gap: 3.759px;
	height: 20px;
}

.rs-cs-mock .rs-cs-rc__author img {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
}

.rs-cs-rc__author span,
.rs-cs-rc__lines {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.rs-cs-rc__author i,
.rs-cs-rc__lines i {
	height: 4px;
	border-radius: 7px;
	background: var(--wp--preset--color--border-soft);
}

.rs-cs-rc__author i:first-child { width: 81px; }
.rs-cs-rc__author i:last-child { width: 47px; }
.rs-cs-rc__lines i:first-child { width: 114px; }
.rs-cs-rc__lines i:last-child { width: 100px; }

.rs-cs-mock .rs-cs-rc__stars {
	width: 148px;
	height: 11.398px;
}

.rs-cs-mock .rs-cs-rc__verified {
	width: 28px;
	height: 10px;
}

/* Middle card's photo lifted out: 165×156 with a 3px white stroke outside it (as rendered) and a soft shadow. */
.rs-cs-mock .rs-cs-rc__lift {
	position: absolute;
	top: -6px;
	left: 180px;
	width: 165px;
	height: 156px;
	border-radius: 5px;
	background: var(--wp--preset--color--border-strong);
	box-shadow: 0 0 0 3px var(--wp--preset--color--white), 2px 5px 20px 3px rgba(0, 0, 0, 0.1);
	object-fit: cover;
}

/* =====================================================================================================
 * Mock: Floating Review (Frame 1272639249, 504×364 at 58,292) — page skeleton + floating review card.
 * ===================================================================================================== */
.rs-cs-fr {
	width: 504px;
	height: 364px;
	overflow: hidden;
	border-radius: 8px;
	background: #f8f8f8;
	box-shadow: -8px -4px 52px 0 rgba(0, 0, 0, 0.16);
}

.rs-cs-fr > i {
	position: absolute;
	left: 20px;
	width: 140px;
	height: 25px;
	background: #eaedf8;
}

.rs-cs-fr > i:nth-of-type(1) { top: -35px; }
.rs-cs-fr > i:nth-of-type(2) { top: 3px; }
.rs-cs-fr > i:nth-of-type(3) { top: 41px; }
.rs-cs-fr > i:nth-of-type(4) { top: 79px; }
.rs-cs-fr > i:nth-of-type(5) { top: 117px; }
.rs-cs-fr > i:nth-of-type(6) { top: 155px; }

.rs-cs-fr > i.is-hero {
	top: -18px;
	left: 176px;
	width: 437px;
	height: 198px;
}

.rs-cs-fr > i.is-row { width: 507px; }
.rs-cs-fr > i.is-row:nth-of-type(8) { top: 217px; }
.rs-cs-fr > i.is-row:nth-of-type(9) { top: 262px; }
.rs-cs-fr > i.is-row:nth-of-type(10) { top: 307px; }

.rs-cs-fr__card {
	position: absolute;
	top: 204px;
	left: 19px;
	display: flex;
	gap: 11px;
	box-sizing: border-box;
	width: 312px;
	height: 136px;
	padding: 7px; /* 8 inside the 1px stroke */
	border: 1px solid #eaeaea;
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	box-shadow: 2px 4px 5px 0 rgba(82, 82, 82, 0.1);
}

.rs-cs-mock .rs-cs-fr__product {
	flex: none;
	width: 120px;
	height: 120px;
}

.rs-cs-fr__info {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: 120px;
}

.rs-cs-fr__who {
	position: absolute;
	top: 2px;
	left: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	height: 20px;
}

.rs-cs-mock .rs-cs-fr__who img {
	width: 20px;
	height: 20px;
	border-radius: 60px;
	object-fit: cover;
}

.rs-cs-fr__who span {
	display: flex;
	flex-direction: column;
	gap: 3px;
	white-space: nowrap;
}

.rs-cs-fr__name {
	font-size: 6px;
	font-weight: 600;
	line-height: 7px;
	color: #2c2c2c;
}

.rs-cs-fr__date {
	font-size: 5px;
	font-weight: 500;
	line-height: 6px;
	color: #777;
}

.rs-cs-fr__stars {
	position: absolute;
	top: 6px;
	right: 0;
	width: 60px;
	height: 12px;
	background:
		url("../../images/cs/showcase/floating/star-empty.svg") 48px 0 / 12px 12px no-repeat,
		url("../../images/cs/showcase/floating/star.svg") 0 0 / 12px 12px repeat-x;
	background-clip: border-box, content-box;
	padding-right: 12px;
	box-sizing: border-box;
}

.rs-cs-fr__info > i {
	position: absolute;
	left: 0;
	height: 5px;
	border-radius: 7px;
	background: var(--wp--preset--color--border-soft);
}

.rs-cs-fr__info > i:nth-of-type(1) { top: 32px; width: 154px; height: 5.5px; }
.rs-cs-fr__info > i:nth-of-type(2) { top: 45.5px; width: 126px; }
.rs-cs-fr__info > i:nth-of-type(3) { top: 59px; width: 81px; }

.rs-cs-fr__info > i.is-thumb {
	top: 94px;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	background: #e8eef1;
}

.rs-cs-fr__info > i.is-meta {
	left: 32px;
	width: 54px;
	height: 4.5px;
	border-radius: 5px;
	background: #e8eef1;
}

.rs-cs-fr__info > i.is-meta:nth-of-type(5) { top: 97px; }
.rs-cs-fr__info > i.is-meta:nth-of-type(6) { top: 107.5px; width: 32px; }

.rs-cs-fr__cta {
	position: absolute;
	top: 98.5px;
	right: 0;
	padding: 3px 8px;
	border-radius: 30px;
	background: #f16715;
	font-size: 6px;
	font-weight: 500;
	line-height: 9px;
	color: var(--wp--preset--color--white);
	white-space: nowrap;
}

.rs-cs-mock .rs-cs-fr__close {
	position: absolute;
	top: 187.5px;
	left: 315px;
	box-sizing: content-box;
	width: 16px;
	height: 16px;
	padding: 4px;
	border-radius: 4px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.18);
}

/* =====================================================================================================
 * Mock: Video Carousel (Group 94, 555.77×413 at 32.12,257) — browser skeleton + five video cards.
 * Cards are one design drawn at --s × 113.827×180 (0.7833 / 0.8833 / 1).
 * ===================================================================================================== */
.rs-cs-vc {
	width: 555.765px;
	height: 413px;
}

.rs-cs-vc__window {
	position: absolute;
	top: 0;
	left: 25px;
	width: 504px;
	height: 413px;
	overflow: hidden;
	border-radius: 8px;
	background: #fcfcfc;
	box-shadow: -8px -4px 52px 0 rgba(0, 0, 0, 0.15);
}

.rs-cs-vc__window i {
	position: absolute;
	border-radius: 7px;
	background: #e8eef1;
}

.rs-cs-vc__window i.is-bar { top: 10px; left: 10px; width: 408px; height: 12px; border-radius: 30px; }
.rs-cs-vc__window i.is-dot { top: 10px; width: 12px; height: 12px; border-radius: 9px; }
.rs-cs-vc__window i.is-dot:nth-child(2) { left: 438px; }
.rs-cs-vc__window i.is-dot:nth-child(3) { left: 460px; }
.rs-cs-vc__window i.is-dot:nth-child(4) { left: 482px; }
.rs-cs-vc__window i.is-rule { left: 10px; width: 484px; height: 2px; }
.rs-cs-vc__window i.is-rule:nth-child(5) { top: 46px; }
.rs-cs-vc__window i.is-rule:nth-child(6) { top: 251.304px; }
.rs-cs-vc__window i.is-block { top: 277.304px; left: 10px; width: 234px; height: 120px; }
.rs-cs-vc__window i.is-block:nth-child(8) { left: 260px; }

.rs-cs-vc__card {
	--s: 1;
	position: absolute;
	overflow: hidden;
	width: calc(113.827px * var(--s));
	height: calc(180px * var(--s));
	border-radius: calc(7.589px * var(--s));
	background: var(--wp--preset--color--white);
}

/* Only the centre (active) card casts a shadow in Figma's render (not in its exported code). */
.rs-cs-vc__card:not(.is-s, .is-m) {
	box-shadow: 2px 5px 20px 0 rgba(0, 0, 0, 0.1);
}

.rs-cs-vc__card.is-s { --s: 0.78333; }
.rs-cs-vc__card.is-m { --s: 0.88333; }

.rs-cs-vc__card:nth-child(2) { top: 80.656px; left: 11.001px; }
.rs-cs-vc__card:nth-child(3) { top: 71.66px; left: 110.166px; }
.rs-cs-vc__card:nth-child(4) { top: 61px; left: 220.712px; }
.rs-cs-vc__card:nth-child(5) { top: 71.66px; left: 344.541px; }
.rs-cs-vc__card:nth-child(6) { top: 80.656px; left: 455.087px; }

/* Bottom shade over the photo (#1e1e1e: 0 → 0 at 48% → 30% at 79% → 80%). */
.rs-cs-vc__card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(30, 30, 30, 0) 48.361%, rgba(30, 30, 30, 0.3) 78.631%, rgba(30, 30, 30, 0.8) 100%);
}

.rs-cs-mock .rs-cs-vc__photo {
	width: 100%;
	height: 100%;
}

.rs-cs-vc__card > :not(.rs-cs-vc__photo) {
	position: absolute;
}

.rs-cs-mock .rs-cs-vc__avatar {
	top: calc(4.727px * var(--s));
	left: calc(4.742px * var(--s));
	width: calc(15.177px * var(--s));
	height: calc(15.158px * var(--s));
	border-radius: 50%;
}

.rs-cs-mock .rs-cs-vc__name {
	top: calc(5.719px * var(--s));
	left: calc(23.773px * var(--s));
	width: calc(30.473px * var(--s));
	height: calc(4.303px * var(--s));
}

.rs-cs-mock .rs-cs-vc__role {
	top: calc(13.711px * var(--s));
	left: calc(24.059px * var(--s));
	width: calc(38.664px * var(--s));
	height: calc(3.702px * var(--s));
}

.rs-cs-mock .rs-cs-vc__play {
	top: calc(78.797px * var(--s));
	left: calc(45.746px * var(--s));
	width: calc(22.765px * var(--s));
	height: calc(22.737px * var(--s));
	border-radius: 50%;
	-webkit-backdrop-filter: blur(calc(2px * var(--s)));
	backdrop-filter: blur(calc(2px * var(--s)));
}

.rs-cs-mock .rs-cs-vc__author {
	top: calc(146.449px * var(--s));
	left: calc(27.895px * var(--s));
	width: calc(48.297px * var(--s));
	height: calc(5.464px * var(--s));
}

.rs-cs-mock .rs-cs-vc__verified {
	top: calc(145.664px * var(--s));
	left: calc(80.152px * var(--s));
	width: calc(6.166px * var(--s));
	height: calc(6.158px * var(--s));
}

.rs-cs-mock .rs-cs-vc__stars {
	top: calc(156.484px * var(--s));
	left: calc(29.168px * var(--s));
	width: calc(55.963px * var(--s));
	height: calc(8.171px * var(--s));
}

/* Prev / next buttons: 22.77px white circles (SVG includes their shadow, hence the offsets). */
.rs-cs-mock .rs-cs-vc__arrow {
	position: absolute;
	width: 42.765px;
	height: 42.737px;
}

.rs-cs-mock .rs-cs-vc__arrow.is-prev { top: 131px; left: -10px; }
.rs-cs-mock .rs-cs-vc__arrow.is-next { top: 125.999px; left: 522.999px; }

/* =====================================================================================================
 * Mock: Review Grid (Frame 1272639488, 504×374 at 58,282) — "1,589 Reviews" wall of photo review cards.
 * ===================================================================================================== */
.rs-cs-rg {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 504px;
	height: 374px;
	padding: 12px 10px 0;
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	box-shadow: -8px -4px 26px 0 rgba(0, 0, 0, 0.15);
}

.rs-cs-mock .rs-cs-rg__dots {
	width: 25.629px;
	height: 6.089px;
}

.rs-cs-rg__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 15.223px;
	margin-top: 0;
}

.rs-cs-rg__bar span {
	display: flex;
	align-items: flex-end;
	gap: 7px;
}

.rs-cs-mock .rs-cs-rg__rating { width: 58.284px; height: 9.743px; }
.rs-cs-mock .rs-cs-rg__count { width: 67.697px; height: 7.962px; }
.rs-cs-mock .rs-cs-rg__write { width: 84.203px; height: 15.223px; }

.rs-cs-rg__wall {
	display: grid;
	flex: none;
	grid-template-columns: repeat(4, 114px);
	grid-auto-rows: 159px;
	gap: 11px 9px;
	width: 483px;
	height: 321px;
	overflow: hidden;
}

.rs-cs-rg__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	border-radius: 7px;
	background: #fbf9fb;
	box-shadow: var(--wp--preset--shadow--subtle);
}

/* 0.5px #d7d7d7 stroke, drawn over the photo like Figma's frame stroke. */
.rs-cs-rg__card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 0.5px #d7d7d7;
	pointer-events: none;
}

.rs-cs-mock .rs-cs-rg__photo {
	flex: none;
	width: 114px;
	height: 100px;
	border-radius: 5px;
	object-fit: cover;
}

.rs-cs-rg__body {
	display: flex;
	flex: none;
	flex-direction: column;
	padding: 8px 8px 12px;
}

.rs-cs-mock .rs-cs-rg__stars {
	flex: none;
	width: 47.52px;
	height: 8px;
}

.rs-cs-rg__body i {
	height: 4px;
	border-radius: 7px;
	background: var(--wp--preset--color--border-soft);
}

.rs-cs-rg__body i:nth-of-type(1) { width: 74px; height: 6px; margin-top: 6px; background: #e6e7ea; }
.rs-cs-rg__body i:nth-of-type(2) { width: 98px; margin-top: 7.94px; }
.rs-cs-rg__body i:nth-of-type(3) { width: 31px; margin-top: 4px; }
.rs-cs-rg__body i.is-long { width: 84px; }

/* ---- Responsive ---- */

/* Stack: panel first (whatever side it sits on at desktop), then the feature grid. */
@media (max-width: 1099px) {
	.rs-cs-feature > .rs-cs-feature__row,
	.rs-cs-feature.is-panel-right > .rs-cs-feature__row {
		flex-direction: column;
		gap: 32px;
	}

	.rs-cs-feature__row > .rs-cs-feature__panel,
	.rs-cs-feature__row > .rs-cs-feature__grid {
		flex: none;
		width: 100%;
	}

	.rs-cs-feature__row > .rs-cs-feature__panel {
		min-height: 0;
	}

	.rs-cs-feature__panel > .rs-cs-mock {
		margin-top: 40px;
	}

	.rs-cs-feature__grid > .rs-cs-feature__item {
		padding-bottom: 40px;
	}
}

@media (max-width: 781px) {
	.rs-cs-feature__row > .rs-cs-feature__panel {
		padding: 23px 23px 31px;
	}

	.rs-cs-feature__panel > .rs-cs-mock {
		margin-top: 24px;
	}

	.rs-cs-feature__grid > .rs-cs-feature__item {
		padding: 32px 24px;
	}
}

/* One feature per row on phones; the column divider becomes a row divider. */
@media (max-width: 599px) {
	.rs-cs-feature__row > .rs-cs-feature__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
	}

	.rs-cs-feature__grid > .rs-cs-feature__item,
	.rs-cs-feature__grid > .rs-cs-feature__item:nth-child(odd):not(:last-child),
	.rs-cs-feature__grid > .rs-cs-feature__item:nth-child(odd):nth-last-child(2) {
		--rs-cs-div-v: 0 0 0 transparent;
		--rs-cs-div-h: inset 0 -0.5px 0 var(--rs-cs-divider);
	}

	.rs-cs-feature__grid > .rs-cs-feature__item:last-child {
		--rs-cs-div-h: 0 0 0 transparent;
	}
}