/* =========================================================================
   BuyTides — Sleep Support landing page
   =========================================================================

   Scoped entirely to `.sl-page`, the wrapper in
   templates/page-sleep-support.html, so nothing here can leak into the shop,
   the product template, or the sitewide chrome.

   The page is built from native Gutenberg blocks. Everything below styles
   those blocks through the classNames set on them in the editor — no block
   output is hand-written, which is what keeps the page visually editable.

   Class names avoid BEM's double hyphen on purpose: the block-comment JSON
   escapes `--` as `u002du002d`, which is easy to break by hand-editing.
   ========================================================================= */

.sl-page {
	--sl-navy: #2b3754;
	--sl-navy-mid: #12406c;
	--sl-navy-deep: #08213a;
	--sl-cyan: #1fc8e3;
	--sl-cyan-soft: #61ddeb;
	--sl-cyan-bright: #6fe4f2;
	--sl-cyan-tint: #eaf9fc;
	--sl-cyan-ink: #9eedf6;
	--sl-teal: #1b7fa8;
	--sl-line: #dde7ee;
	--sl-surface: #f4f7f9;
	--sl-muted: #4b6479;
	--sl-muted-soft: #7c93a3;

	--sl-shell: 1240px;
	--sl-gutter: clamp(20px, 4vw, 48px);

	--sl-sans: "Inter", system-ui, -apple-system, sans-serif;
	--sl-display: "Outfit", "Inter", system-ui, sans-serif;

	background: #fff;
	color: var(--sl-navy);
	font-family: var(--sl-sans);
	line-height: 1.6;
}

/* Twenty Twenty-Five hands every block a vertical block-gap margin, including
   the wrapper itself as a child of .wp-site-blocks. Left in place it opens a
   strip of page background between the announcement marquee and the hero
   video, so it is cleared outside as well as inside. */
.wp-site-blocks > .sl-page {
	margin-block: 0;
}

.sl-page > *,
.sl-page .wp-block-group,
.sl-page .wp-block-cover {
	margin-block: 0;
}

.sl-page h1,
.sl-page h2,
.sl-page h3 {
	font-family: var(--sl-display);
	font-weight: 600;
	letter-spacing: -0.028em;
	margin: 0;
	text-wrap: balance;
}

.sl-page p {
	margin: 0;
	text-wrap: pretty;
}

.sl-page a {
	color: var(--sl-teal);
	text-decoration: none;
}

.sl-page a:hover {
	color: var(--sl-navy);
}

.sl-page ::selection {
	background: var(--sl-cyan-bright);
	color: var(--sl-navy);
}

/* ---- Shared scaffolding ------------------------------------------------ */

.sl-page .sl-wrap {
	max-width: var(--sl-shell);
	margin-inline: auto;
	padding-inline: var(--sl-gutter);
}

.sl-page .sl-sec {
	padding-block: clamp(56px, 7vw, 104px);
}

.sl-page .sl-sec-tint {
	background: var(--sl-surface);
}

.sl-page .sl-sec-navy {
	background: var(--sl-navy);
	color: #fff;
}

.sl-page .sl-h2 {
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.1;
	margin-bottom: 12px;
	max-width: 22ch;
}

.sl-page .sl-kick {
	font-family: var(--sl-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sl-teal);
	margin-bottom: 14px;
}

.sl-page .sl-sec-navy .sl-kick {
	color: var(--sl-cyan-ink);
}

.sl-page .sl-lede {
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--sl-muted);
	max-width: 62ch;
	margin-bottom: 34px;
}

.sl-page .sl-sec-navy .sl-lede {
	color: rgba(255, 255, 255, 0.78);
}

/* Running body copy inside a column, where `.sl-lede` would open too much
   space between consecutive paragraphs. */
.sl-page .sl-body {
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--sl-muted);
	max-width: 62ch;
	margin-bottom: 16px;
}

.sl-page .sl-body:last-of-type {
	margin-bottom: 30px;
}

.sl-page .sl-grid3,
.sl-page .sl-stats,
.sl-page .sl-timeline,
.sl-page .sl-scroll,
.sl-page .sl-faq {
	margin-top: 34px;
}

.sl-page .sl-split {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

/* ---- Buttons ----------------------------------------------------------- */

.sl-page .wp-block-buttons {
	gap: 14px;
	margin: 0;
}

.sl-page .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	padding: 0 26px;
	border: 0;
	border-radius: 12px;
	background: var(--sl-navy);
	color: #fff;
	font-family: var(--sl-display);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.sl-page .wp-block-button__link:hover {
	background: var(--sl-navy-mid);
	color: #fff;
}

.sl-page .wp-block-button__link:active {
	background: var(--sl-navy-deep);
}

.sl-page .sl-btn-cy .wp-block-button__link {
	background: var(--sl-cyan-soft);
	color: var(--sl-navy);
}

.sl-page .sl-btn-cy .wp-block-button__link:hover {
	background: #3ecfe0;
	color: var(--sl-navy);
}

.sl-page .sl-btn-ghost .wp-block-button__link {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.28);
	color: #fff;
}

.sl-page .sl-btn-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.5);
}

/* Card CTA: shorter, cyan, sits on the card's bottom edge. */
.sl-page .sl-btn-sm .wp-block-button__link {
	height: 44px;
	padding: 0 18px;
	font-size: 15px;
	background: var(--sl-cyan-soft);
	color: var(--sl-navy);
}

.sl-page .sl-btn-sm .wp-block-button__link:hover {
	background: #3ecfe0;
}

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

.sl-page .sl-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	padding: clamp(64px, 7.5vw, 116px) 0;
	min-height: 0;
}

.sl-page .sl-hero video.wp-block-cover__video-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Two painted layers over the footage: a navy wash that holds the headline's
   contrast, then a cyan bloom rising from the lower edge. Separate
   pseudo-elements because they use different blend geometry. */
.sl-page .sl-hero::before,
.sl-page .sl-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.sl-page .sl-hero::before {
	background: linear-gradient(
		180deg,
		rgba(6, 26, 45, 0.72) 0%,
		rgba(6, 26, 45, 0.58) 55%,
		rgba(6, 26, 45, 0.78) 100%
	);
}

.sl-page .sl-hero::after {
	background-image:
		radial-gradient(
			60% 60% at 50% 100%,
			rgba(31, 200, 227, 0.34) 0%,
			rgba(31, 200, 227, 0.08) 46%,
			rgba(31, 200, 227, 0) 72%
		),
		radial-gradient(
			55% 55% at 50% 0%,
			rgba(111, 228, 242, 0.28) 0%,
			rgba(31, 200, 227, 0.06) 48%,
			rgba(31, 200, 227, 0) 74%
		);
}

.sl-page .sl-hero > .wp-block-cover__background {
	display: none;
}

.sl-page .sl-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: none;
	padding: 0;
}

.sl-page .sl-hero-body {
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
}

.sl-page .sl-hero-cta {
	justify-content: center;
	margin-top: 34px;
}

.sl-page .sl-hero .sl-kick {
	color: var(--sl-cyan-ink);
	margin-bottom: 14px;
}

/* Rank Math breadcrumb, sitting under the eyebrow. It carries the eyebrow's
   type — Outfit, small, wide-tracked — in the on-navy accent tint. */
.sl-page .sl-hero .rank-math-breadcrumb {
	margin: 0 0 16px;
}

.sl-page .sl-hero .rank-math-breadcrumb p {
	margin: 0;
	font-family: var(--sl-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sl-cyan-ink);
	line-height: 1.5;
}

.sl-page .sl-hero .rank-math-breadcrumb a {
	color: rgba(255, 255, 255, 0.72);
	transition: color 0.15s ease;
}

.sl-page .sl-hero .rank-math-breadcrumb a:hover {
	color: #fff;
}

/* Rank Math marks every UNLINKED crumb `.last`, not just the final one, so
   Health Programs and the page title arrive with the same class. Only the true
   final crumb should read as the current page. */
.sl-page .sl-hero .rank-math-breadcrumb .separator {
	color: rgba(255, 255, 255, 0.42);
	margin: 0 2px;
}

.sl-page .sl-hero .rank-math-breadcrumb .last {
	color: rgba(255, 255, 255, 0.72);
}

.sl-page .sl-hero .rank-math-breadcrumb .last:last-child {
	color: var(--sl-cyan-ink);
}

.sl-page .sl-hero-h1 {
	text-shadow: 0 2px 18px rgba(6, 26, 45, 0.45);
	margin: 0 0 20px;
	font-size: clamp(38px, 5.2vw, 66px);
	line-height: 1.03;
	color: #fff;
	max-width: none;
}

.sl-page .sl-hero-lede {
	text-shadow: 0 1px 12px rgba(6, 26, 45, 0.5);
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
	max-width: 60ch;
	margin-inline: auto;
}

/* Three reassurance pills under the CTAs. They are separate paragraph blocks
   in a flex row, so a fourth can be added in the editor without markup. */
.sl-page .sl-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 38px;
}

.sl-page .sl-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	background: rgba(255, 255, 255, 0.06);
	font-family: var(--sl-display);
	font-size: 13.5px;
	font-weight: 500;
	color: #eaf9fc;
}

.sl-page .sl-pill::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sl-cyan-soft);
}

/* ---- Placeholder art ---------------------------------------------------

   No product photography exists yet. Rather than ship empty frames, each
   image slot renders an on-palette tide gradient with the subject named in
   it, composed at the final image's aspect. Swapping in a real core/image
   block later is a per-card change, not a rebuild.
   ------------------------------------------------------------------------ */

.sl-page .sl-ph {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background:
		radial-gradient(120% 100% at 12% 108%, rgba(31, 200, 227, 0.42) 0%, rgba(31, 200, 227, 0) 62%),
		radial-gradient(90% 90% at 96% -8%, rgba(111, 228, 242, 0.3) 0%, rgba(31, 200, 227, 0) 60%),
		linear-gradient(158deg, #123a60 0%, var(--sl-navy) 52%, var(--sl-navy-deep) 100%);
}

/* A single hairline arc, echoing the tide-gauge mark, so the placeholder
   reads as deliberate art rather than a flat swatch. */
.sl-page .sl-ph::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -46%;
	width: 128%;
	aspect-ratio: 1;
	transform: translateX(-50%);
	border-radius: 50%;
	border: 1px solid rgba(158, 237, 246, 0.28);
	pointer-events: none;
}

.sl-page .sl-ph-label {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 16px 18px;
	font-family: var(--sl-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(234, 249, 252, 0.72);
}

/* ---- Product cards ----------------------------------------------------- */

.sl-page .sl-grid3 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.sl-page .sl-card {
	display: flex;
	flex-direction: column;
	border: 1.5px solid var(--sl-line);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sl-page .sl-card:hover {
	border-color: var(--sl-cyan-soft);
	box-shadow: 0 10px 30px -18px rgba(43, 55, 84, 0.35);
}

.sl-page .sl-card-media {
	height: 210px;
	border-bottom: 1.5px solid var(--sl-line);
}

.sl-page .sl-card-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	margin: 0;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--sl-cyan-soft);
	color: var(--sl-navy);
	font-family: var(--sl-display);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	pointer-events: none;
}

/* Alternating tag treatment keeps the row from reading as one flat repeat. */
.sl-page .sl-card-alt .sl-card-tag {
	background: var(--sl-navy);
	color: #fff;
}

.sl-page .sl-card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	flex: 1;
}

.sl-page .sl-card-body h3 {
	font-size: 21px;
	line-height: 1.2;
}

.sl-page .sl-card-blurb {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--sl-muted);
	flex: 1;
}

/* Delivery and frequency, read as one line: the first token is the form the
   treatment takes, the second how often it is taken. */
.sl-page .sl-card-meta {
	font-size: 13px;
	color: var(--sl-muted-soft);
}

.sl-page .sl-card-meta strong {
	font-weight: 600;
	color: var(--sl-teal);
}

.sl-page .sl-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 6px;
}

.sl-page .sl-card-price {
	font-family: var(--sl-display);
	font-size: 20px;
	font-weight: 600;
}

/* ---- Mechanism steps --------------------------------------------------- */

.sl-page .sl-steps {
	display: grid;
	gap: 16px;
}

.sl-page .sl-step {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 16px;
	padding: 22px;
	border: 1.5px solid var(--sl-line);
	border-radius: 14px;
	background: #fff;
}

.sl-page .sl-step-num {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: var(--sl-cyan-tint);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sl-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--sl-teal);
}

.sl-page .sl-step h3 {
	grid-column: 2;
	font-size: 17.5px;
	margin-bottom: 5px;
}

.sl-page .sl-step-body {
	grid-column: 2;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--sl-muted);
}

/* ---- Reported outcomes -------------------------------------------------

   Survey figures, not trial results, so they sit on tinted panels rather than
   the hairline-ruled treatment used for published literature elsewhere.
   ------------------------------------------------------------------------ */

.sl-page .sl-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}

.sl-page .sl-stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 28px;
	border-radius: 16px;
	background: var(--sl-surface);
}

.sl-page .sl-stat-fig {
	font-family: var(--sl-display);
	font-size: clamp(38px, 4.4vw, 52px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--sl-navy);
	font-variant-numeric: tabular-nums;
}

.sl-page .sl-stat-label {
	font-family: var(--sl-display);
	font-size: 16px;
	font-weight: 600;
	color: var(--sl-teal);
}

.sl-page .sl-stat-note {
	font-size: 14px;
	line-height: 1.55;
	color: var(--sl-muted);
}

.sl-page .sl-fine {
	margin-top: 24px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--sl-muted-soft);
	max-width: 820px;
}

/* ---- Sleep-need calculator --------------------------------------------- */

.sl-page .sl-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.22);
	outline: none;
	margin: 0;
}

.sl-page .sl-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--sl-cyan-soft);
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(43, 55, 84, 0.3);
	cursor: pointer;
}

.sl-page .sl-slider::-moz-range-thumb {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--sl-cyan-soft);
	border: 3px solid #fff;
	cursor: pointer;
}

.sl-page .sl-slider:focus-visible {
	outline: 2px solid var(--sl-cyan-bright);
	outline-offset: 6px;
}

.sl-page .sl-slider-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sl-cyan-ink);
	margin-bottom: 12px;
}

.sl-page .sl-slider-ends {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.5);
}

.sl-page .sl-calc-out {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.sl-page .sl-calc-panel {
	padding: 26px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.06);
}

.sl-page .sl-calc-panel-cy {
	background: var(--sl-cyan-soft);
	border-color: transparent;
	color: var(--sl-navy);
}

.sl-page .sl-calc-label {
	display: block;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.62);
	margin-bottom: 8px;
}

.sl-page .sl-calc-panel-cy .sl-calc-label {
	color: var(--sl-navy-mid);
	font-weight: 600;
}

.sl-page .sl-calc-fig {
	font-family: var(--sl-display);
	font-size: clamp(32px, 3.6vw, 44px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.sl-page .sl-calc-foot {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.62);
}

.sl-page .sl-calc-panel-cy .sl-calc-foot {
	color: var(--sl-navy-mid);
}

/* ---- Timeline ---------------------------------------------------------- */

.sl-page .sl-timeline {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
}

.sl-page .sl-tl {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sl-page .sl-tl-media {
	height: 150px;
	border-radius: 14px;
}

/* The rule above each stage lengthens across the row, so the five columns read
   as one progression rather than five unrelated items. It is drawn on the
   heading rather than as its own element, so the editor holds no empty block. */
.sl-page .sl-tl h3 {
	font-size: 18px;
}

.sl-page .sl-tl h3::before {
	content: "";
	display: block;
	width: var(--sl-tl-bar, 100%);
	height: 3px;
	margin-bottom: 12px;
	border-radius: 2px;
	background: var(--sl-cyan-soft);
}

.sl-page .sl-tl-1 { --sl-tl-bar: 20%; }
.sl-page .sl-tl-2 { --sl-tl-bar: 40%; }
.sl-page .sl-tl-3 { --sl-tl-bar: 60%; }
.sl-page .sl-tl-4 { --sl-tl-bar: 80%; }
.sl-page .sl-tl-5 { --sl-tl-bar: 100%; }

.sl-page .sl-tl-body {
	font-size: 14px;
	line-height: 1.55;
	color: var(--sl-muted);
}

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

.sl-page .sl-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	background: #fff;
	border: 1.5px solid var(--sl-line);
	border-radius: 16px;
}

.sl-page .sl-tbl {
	margin: 0;
}

.sl-page .sl-tbl table {
	width: 100%;
	border-collapse: collapse;
}

.sl-page .sl-tbl th,
.sl-page .sl-tbl td {
	padding: 16px 18px;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--sl-line);
	font-size: 14.5px;
	line-height: 1.5;
	vertical-align: top;
	color: #22384d;
}

.sl-page .sl-tbl tbody tr:last-child th,
.sl-page .sl-tbl tbody tr:last-child td {
	border-bottom: 0;
}

.sl-page .sl-tbl th {
	font-family: var(--sl-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sl-muted-soft);
	white-space: nowrap;
}

/* Column heads name treatments, so they keep sentence case at reading size. */
.sl-page .sl-tbl thead th {
	min-width: 180px;
	font-size: 16px;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--sl-navy);
}

.sl-page .sl-tbl thead th:first-child {
	min-width: 150px;
}

/* ---- Library ----------------------------------------------------------- */

.sl-page .sl-art-media {
	height: 170px;
	border-bottom: 1.5px solid var(--sl-line);
}

.sl-page .sl-art-cat {
	font-family: var(--sl-display);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sl-muted-soft);
}

.sl-page .sl-art-body h3 {
	font-size: 19px;
	line-height: 1.25;
}

.sl-page .sl-art-dek {
	font-size: 14px;
	line-height: 1.55;
	color: var(--sl-muted);
	flex: 1;
}

.sl-page .sl-art-more {
	margin-top: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sl-teal);
}

/* The library row is three equal cards, not the four-up product grid. */
.sl-page .sl-grid-art {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 34px;
}

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

/* The accordion list is capped at 900px and centred, so a full-width heading
   above it would sit off to the left of its own content. */
.sl-page #faq .sl-kick,
.sl-page #faq .sl-h2 {
	max-width: 900px;
	margin-inline: auto;
}

.sl-page .sl-faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 900px;
	margin-inline: auto;
}

.sl-page .sl-faq .wp-block-details {
	border: 1.5px solid var(--sl-line);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	padding: 0;
	margin: 0;
}

.sl-page .sl-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 22px;
	list-style: none;
	cursor: pointer;
	font-family: var(--sl-display);
	font-size: 17.5px;
	font-weight: 600;
	color: var(--sl-navy);
}

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

.sl-page .sl-faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--sl-cyan-tint)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231B7FA8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E")
		center / 14px no-repeat;
	transition: transform 0.18s ease;
}

.sl-page .sl-faq details[open] summary::after {
	transform: rotate(180deg);
}

.sl-page .sl-faq summary:focus-visible {
	outline: 2px solid var(--sl-teal);
	outline-offset: -3px;
}

.sl-page .sl-faq .wp-block-details > :not(summary) {
	padding: 0 22px 22px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--sl-muted);
	margin: 0;
}

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

   The product and timeline grids are locked to 4 and 5 tracks so their rows
   read as intended at desktop; that lock has to be released deliberately as
   the viewport narrows, since fixed tracks cannot reflow the way auto-fill did.
   ------------------------------------------------------------------------ */

@media (max-width: 1180px) {
	.sl-page .sl-grid3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1080px) {
	.sl-page .sl-timeline {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	.sl-page .sl-grid-art {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}
}

@media (max-width: 860px) {
	.sl-page .sl-split {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

@media (max-width: 760px) {
	.sl-page .sl-timeline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.sl-page .sl-grid3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 560px) {
	.sl-page .sl-calc-out {
		grid-template-columns: 1fr;
	}

	.sl-page .sl-hero-h1 {
		font-size: clamp(30px, 8vw, 38px);
	}
}

/* Below this the timeline copy would run at about ten characters a line in two
   tracks, so it stacks rather than squeeze. */
@media (max-width: 520px) {
	.sl-page .sl-timeline {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The hero video plays on every device, including where the OS asks for
   reduced motion: the footage is ambient, muted and loops silently, and the
   brand wants it seen. This gradient is painted underneath it permanently, so
   a browser that refuses to decode or autoplay the file still shows the hero
   as designed rather than an empty band. */
.sl-page .sl-hero {
	background: linear-gradient(158deg, #123a60 0%, var(--sl-navy) 55%, var(--sl-navy-deep) 100%);
}