/* Rays Room — content page layout (service + resources pages), Oct 2026 */

.rays-room .factcard__title { color: var(--dark); }

/* Hero */
.rp-hero__lede { max-width: 46rem; }
.rp-hero__media {
	margin: clamp(1.75rem, 4vw, 3rem) 0 0;
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 21 / 9;
	background: var(--tan);
}
.rp-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Shared section bits */
.rp-block.rp-tone--white { background: #fff; }
.rp-h2 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2rem, 3.6vw, 2.875rem);
	line-height: 1.1;
	color: var(--brown);
	margin: 0 0 1rem;
}
.rp-eyebrow {
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--green);
	margin: 0 0 .75rem;
}
.rp-head { max-width: 46rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.rp-lede { color: var(--brown); font-size: 1.0625rem; line-height: 1.65; margin: 0; }

/* Split: heading left, copy right */
.rp-split {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(1.5rem, 5vw, 5rem);
	align-items: start;
}
.rp-split__head { position: sticky; top: calc(var(--header-h, 80px) + 1.5rem); }
.rp-split__body { max-width: 44rem; }
.rp-split__body p, .rp-faq__body p { color: var(--brown); line-height: 1.75; margin: 0 0 1.1rem; }
.rp-split__media {
	margin: 1.25rem 0 0;
	border-radius: 20px;
	overflow: hidden;
	background: var(--tan);
	max-width: 22rem;
}
.rp-split__media img { width: 100%; height: auto; display: block; }
.rp-actions { margin-top: 1.5rem !important; }

.rp-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .85rem; }
.rp-list li {
	position: relative;
	padding-left: 1.6rem;
	color: var(--brown);
	line-height: 1.7;
}
.rp-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--green);
}
.rp-list strong { color: var(--dark); font-weight: 600; }

.rp-quote {
	margin: 0 0 1.75rem;
	padding: 1.5rem 1.75rem;
	background: var(--tan);
	border-radius: var(--r-card, 22px);
}
.rp-quote p {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 2.2vw, 1.65rem) !important;
	line-height: 1.35 !important;
	color: var(--dark) !important;
	margin: 0 0 .75rem !important;
}
.rp-quote cite { font-style: normal; font-size: .85rem; color: var(--brown); }

/* Timeline + numbered steps */
.rp-stages {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
	gap: 1.1rem;
}
.rp-stage {
	background: var(--tan);
	border-radius: var(--r-card, 22px);
	padding: 1.5rem 1.4rem 1.6rem;
	display: flex;
	flex-direction: column;
	gap: .7rem;
}
.rp-tone--white .rp-stage { background: var(--cream); }
.rp-stage__label {
	align-self: flex-start;
	background: var(--green);
	color: #fff;
	border-radius: 999px;
	padding: .3rem .85rem;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .04em;
}
.rp-stages--steps .rp-stage__label {
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-size: 1.15rem;
}
.rp-stage__title { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.2; color: var(--dark); margin: 0; }
.rp-stage p { color: var(--dark); line-height: 1.6; font-size: .95rem; margin: 0; }

/* Checks */
.rp-checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: .85rem;
}
.rp-checks li {
	display: flex;
	align-items: center;
	gap: .8rem;
	background: var(--cream);
	border-radius: 16px;
	padding: 1rem 1.15rem;
	color: var(--dark);
	font-weight: 500;
}
.rp-checks li::before {
	content: "";
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* FAQ */
.rp-faq { display: grid; gap: .75rem; }
.rp-faq__item { background: #fff; border-radius: 16px; overflow: hidden; }
.rp-tone--white .rp-faq__item { background: var(--cream); }
.rp-faq__item summary {
	list-style: none;
	cursor: pointer;
	padding: 1.15rem 3.25rem 1.15rem 1.35rem;
	position: relative;
	font-weight: 600;
	color: var(--dark);
	line-height: 1.45;
}
.rp-faq__item summary::-webkit-details-marker { display: none; }
.rp-faq__item summary::after {
	content: "+";
	position: absolute;
	right: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--brown);
	transition: transform var(--t, .28s);
}
.rp-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.rp-faq__item summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.rp-faq__body { padding: 0 1.35rem 1.1rem; }

/* Cards (infographics, downloads) */
.rp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; }
.rp-card {
	background: var(--tan);
	border-radius: var(--r-card, 22px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.rp-tone--white .rp-card { background: var(--cream); }
.rp-card__media { margin: 0; background: #fff; aspect-ratio: 4 / 3; overflow: hidden; }
.rp-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rp-card__body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .75rem; flex: 1; }
.rp-card__title { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.15; color: var(--dark); margin: 0; }
.rp-card__body p { color: var(--dark); line-height: 1.6; font-size: .95rem; margin: 0; }
.rp-card__btn { align-self: flex-start; margin-top: auto; }

/* Related services re-use the homepage .scard */
.rp-links { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)) !important; }
.rp-links .scard { min-height: 15rem; }
.rp-links .scard__title { margin-top: 0; }

/* Video */
.rp-video { aspect-ratio: 16 / 9; overflow: hidden; }
.rp-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Product */
.rp-product { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.rp-product__media { margin: 0; border-radius: 20px; overflow: hidden; background: var(--tan); max-width: 26rem; }
.rp-product__media img { width: 100%; height: auto; display: block; }
.rp-product__body p { color: var(--brown); line-height: 1.75; }
.rp-price { font-family: var(--font-display); font-size: 2rem !important; color: var(--dark) !important; margin: 0 0 1rem !important; }

/* Embedded tools */
.rp-tool { background: #fff; border-radius: var(--r-card, 22px); padding: clamp(1rem, 3vw, 2rem); }
.rp-tone--white .rp-tool { background: var(--cream); }
.rp-tool iframe { max-width: 100%; }
.rp-note { margin-top: 1rem; font-size: .875rem; color: var(--brown); }

@media (max-width: 900px) {
	.rp-split, .rp-product { grid-template-columns: 1fr; }
	.rp-split__head { position: static; }
	.rp-hero__media { aspect-ratio: 16 / 10; }
	.rp-split__media { max-width: 100%; }
}

/* QA pass */
.rp-stage { color: var(--dark); }
.rp-quote cite { color: var(--dark); }
.rp-hero__media { max-height: 26rem; }
.rp-video { max-width: 56rem; }
@media (min-width: 901px) {
	.rp-stages:has(> li:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.rays-room .nav__parent--button { line-height: 1.6; }
.rays-room .scard, .rays-room .rp-links .scard { min-height: 0; }

/* Team carousel arrows */
.team-carousel__controls { display: flex; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.rays-room .team-carousel__btn { width: 3rem; height: 3rem; padding: 0; border-radius: 50%; border: 1.5px solid var(--brown); background: transparent; color: var(--brown); display: grid; place-items: center; cursor: pointer; line-height: 0; box-shadow: none; transition: background var(--t, .28s), color var(--t, .28s), transform var(--t, .28s); }
.rays-room .team-carousel__btn:hover { background: var(--brown); color: var(--cream); }
.rays-room .team-carousel__btn:active { transform: scale(.94); }
.rays-room .team-carousel__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }