/**
 * Digicore Solution Finder.
 * Follows the Figma hero ("Website Build", frames 1:166 / 1:19).
 * Tokens are exposed as custom properties so the theme can retheme without
 * touching this file.
 */

.dc-sf {
	--dc-orange: #d8592e;
	--dc-salt: #ebebe5;
	--dc-ink: #1a1d21;
	--dc-grey: #6b7280;
	--dc-line: #d5d8dc;
	--dc-chip-on: #edeff2;
	--dc-white: #fff;
	--dc-r: 6px;
	--dc-r-lg: 16px;
	--dc-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--dc-display: "Circular Std", "Inter", system-ui, -apple-system, sans-serif;

	font-family: var(--dc-ui);
	color: var(--dc-ink);
}

.dc-sf *,
.dc-sf *::before,
.dc-sf *::after { box-sizing: border-box; }

.dc-sf__panel {
	position: relative;
	overflow: hidden;
	padding: 36px 30px;
	border-radius: var(--dc-r-lg);
	background-color: var(--dc-ink);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

	/* The hero runs edge to edge on laptops and only stops growing beyond them,
	   where it would otherwise leave the rail a sliver against a huge field of
	   video. It is deliberately wider than the 1440 content column: capping it at
	   the same width as the breakpoint means nothing jumps as the display grows
	   past it. */
	max-width: var(--dc-hero-max, 1728px);
	margin-inline: auto;
}

/* ---- Background video ----
 * Sits behind the content; the hero image stays as the poster underneath, so
 * it covers the load and is what shows when motion is not wanted.
 */

.dc-sf__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	opacity: 1;
	transition: opacity 2.6s cubic-bezier(0.33, 0, 0.2, 1);
}

/* Dissolves into the hero still once the visitor has answered. */
.dc-sf__bg.is-settling { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.dc-sf__bg { transition: none; }
}

.dc-sf__video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	/* 16:9 cover in both directions */
	min-width: 177.78vh;
	min-height: 56.25vw;
	border: 0;
	transform: translate(-50%, -50%);
}

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

/* ---- Tagline ---- */

.dc-sf__tagline {
	position: relative;
	z-index: 1;
	margin: 24px 0 0;
	color: #fff;
	font-family: var(--dc-display);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	text-align: right;
	text-transform: uppercase;
}

.dc-sf__tagline[hidden] { display: none; }

@media (min-width: 1025px) {
	.dc-sf__tagline {
		position: absolute;
		right: 40px;
		bottom: 28px;
		max-width: 539px;
		margin: 0;
		font-size: 40px;
	}
}

.dc-sf__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: stretch;
	gap: 39px;
}

/* ---- Left rail ---- */

/* Soft depth so the panels sit above the footage rather than on it. */
.dc-sf__rail,
.dc-sf__result {
	box-shadow: 0 1px 2px rgba(26, 29, 33, 0.04), 0 12px 32px rgba(26, 29, 33, 0.10);
}

.dc-sf__card {
	transition: box-shadow 0.25s cubic-bezier(0.32, 0.72, 0, 1), transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.dc-sf__card:hover {
	box-shadow: 0 1px 2px rgba(26, 29, 33, 0.04), 0 8px 24px rgba(26, 29, 33, 0.08);
	transform: translateY(-1px);
}

/* A small give on press, so the controls feel physical. */
.dc-sf .dc-sf__tab:active,
.dc-sf .dc-sf__chip:active,
.dc-sf .dc-sf__enquire:active,
.dc-sf .dc-sf__cta:active { transform: scale(0.985); }

.dc-sf .dc-sf__tab,
.dc-sf .dc-sf__chip,
.dc-sf .dc-sf__enquire,
.dc-sf .dc-sf__cta {
	transition: border-color 0.18s ease, background-color 0.18s ease,
	            transform 0.18s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.18s ease;
}

.dc-sf__rail {
	/* Figma draws the rail at 327px, which stacks the chips into seven rows and
	   pushes the bottom of the rail past the fold on a laptop. It widens with
	   the viewport so fewer rows are needed, capped so the result column keeps
	   its room. */
	flex: 0 0 clamp(327px, 32vw, 440px);
	width: clamp(327px, 32vw, 440px);
	padding: 18px 21px 24px;
	border-radius: var(--dc-r-lg);
	background: var(--dc-salt);
}

.dc-sf__eyebrow {
	margin: 0 0 12px;
	padding-left: 3px;
	color: var(--dc-orange);
	font-family: var(--dc-display);
	font-size: 16px;
	font-weight: 700;
	line-height: 16px;
	text-transform: uppercase;
}

.dc-sf__tabs {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dc-sf__tab {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--dc-line);
	border-radius: var(--dc-r);
	background: var(--dc-white);
	color: var(--dc-grey);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.dc-sf__tab[aria-selected="true"] {
	border-color: var(--dc-grey);
	box-shadow: 0 0 0 0.5px var(--dc-grey);
	background: var(--dc-chip-on);
}

.dc-sf__tab-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}

.dc-sf__tab-desc {
	font-size: 11px;
	font-weight: 400;
	line-height: 1.35;
}

/* Chips size to their content: the tick only takes space once ticked, so an
   unticked chip carries no empty gutter. Selected weight comes from a
   box-shadow rather than a thicker border, so that part adds no width. */
.dc-sf__tick { display: none; font-size: 12px; }
.dc-sf__tab[aria-selected="true"] .dc-sf__tick,
.dc-sf__chip[aria-pressed="true"] .dc-sf__tick { display: inline; }
.dc-sf__chip .dc-sf__tick { margin-right: 4px; }

.dc-sf .dc-sf__divider {
	height: 0;
	margin: 20px 0;
	border: 0;
	border-top: 1px solid var(--dc-line);
	background: none;
}

/* ---- Questions ---- */

.dc-sf__questions {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.dc-sf__group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* display:flex would otherwise defeat the hidden attribute used for the
   progressive disclosure. */
.dc-sf__group[hidden],
.dc-sf__fleet[hidden] { display: none; }

.dc-sf__fleet { animation: dc-sf-reveal 0.42s cubic-bezier(0.32, 0.72, 0, 1) both; }
.dc-sf__group { animation: dc-sf-reveal 0.42s cubic-bezier(0.32, 0.72, 0, 1) both; }

@keyframes dc-sf-reveal {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dc-sf__fleet, .dc-sf__group { animation: none; }
}

/* Always available, whatever the visitor has or has not answered. */
.dc-sf__enquire {
	display: block;
	margin-top: 20px;
	padding: 12px 16px;
	border: 1px solid var(--dc-orange);
	border-radius: var(--dc-r);
	background: var(--dc-orange);
	color: var(--dc-salt);
	font-family: var(--dc-ui);
	font-size: 14px;
	font-weight: 500;
	line-height: 14px;
	text-align: center;
	text-decoration: none;
}

.dc-sf .dc-sf__enquire:hover,
.dc-sf .dc-sf__enquire:focus {
	background: var(--dc-orange);
	color: var(--dc-salt);
	filter: brightness(0.94);
}

.dc-sf__group-label {
	padding: 0;
	color: var(--dc-grey);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
}

.dc-sf__chips {
	display: flex;
	flex-wrap: wrap;
	/* Design has no row gap because its chips never wrap; the 327px rail wraps
	   them, so rows get a tighter gap than the 8px between chips. */
	gap: 6px 8px;
}

.dc-sf__chip {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid var(--dc-line);
	border-radius: var(--dc-r);
	background: var(--dc-white);
	color: var(--dc-grey);
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	white-space: nowrap;
	cursor: pointer;
}

.dc-sf__chip[aria-pressed="true"] {
	border-color: var(--dc-grey);
	box-shadow: 0 0 0 0.5px var(--dc-grey);
	background: var(--dc-chip-on);
}

/* ---- Interaction states ----
 * hello-elementor's reset.css paints every button crimson (#cc3366) with white
 * text on :hover and :focus, and the browser adds its own focus ring. Both are
 * overridden here rather than left to inherit.
 */

.dc-sf .dc-sf__tab,
.dc-sf .dc-sf__chip {
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dc-sf .dc-sf__tab:hover,
.dc-sf .dc-sf__chip:hover,
.dc-sf .dc-sf__tab:focus,
.dc-sf .dc-sf__chip:focus {
	border-color: var(--dc-grey);
	background: var(--dc-white);
	color: var(--dc-grey);
}

.dc-sf .dc-sf__tab[aria-selected="true"]:hover,
.dc-sf .dc-sf__tab[aria-selected="true"]:focus,
.dc-sf .dc-sf__chip[aria-pressed="true"]:hover,
.dc-sf .dc-sf__chip[aria-pressed="true"]:focus {
	border-color: var(--dc-grey);
	background: var(--dc-chip-on);
	color: var(--dc-grey);
}

.dc-sf .dc-sf__tab:focus,
.dc-sf .dc-sf__chip:focus { outline: none; }

.dc-sf .dc-sf__tab:focus-visible,
.dc-sf .dc-sf__chip:focus-visible,
.dc-sf .dc-sf__cta:focus-visible,
.dc-sf a:focus-visible {
	outline: 2px solid var(--dc-orange);
	outline-offset: 2px;
}

.dc-sf .dc-sf__cta:hover,
.dc-sf .dc-sf__cta:focus {
	background: var(--dc-orange);
	color: var(--dc-salt);
	filter: brightness(0.94);
}

.dc-sf .dc-sf__hw-link:hover,
.dc-sf .dc-sf__alt-link:hover,
.dc-sf .dc-sf__proven a:hover {
	color: var(--dc-orange);
	text-decoration: none;
}

/* ---- Result column ---- */

.dc-sf__result {
	flex: 1 1 auto;
	min-width: 0;
	padding: 18px 52px;
	border-radius: var(--dc-r-lg);
	background: var(--dc-salt);
}

.dc-sf__result[hidden] { display: none; }

.dc-sf__stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dc-sf__ct-title {
	margin: 0;
	color: var(--dc-orange);
	font-family: var(--dc-display);
	font-size: 16px;
	font-weight: 700;
	line-height: 16px;
}

.dc-sf__ct-sub {
	margin: 4px 0 0;
	color: var(--dc-grey);
	font-family: var(--dc-display);
	font-size: 14px;
	line-height: 16px;
}

.dc-sf__card {
	padding: 20px;
	border: 1px solid var(--dc-line);
	border-radius: var(--dc-r);
	background: var(--dc-white);
}

.dc-sf__card--rec { padding: 24px; }

.dc-sf__badge {
	display: inline-block;
	padding: 4px 10px;
	background: var(--dc-ink);
	color: var(--dc-white);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
}

.dc-sf__rec-title {
	margin: 10px 0 0;
	color: var(--dc-ink);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
}

.dc-sf__rec-blurb {
	margin: 10px 0 0;
	color: var(--dc-grey);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.35;
}

.dc-sf__card-title {
	margin: 0;
	color: var(--dc-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}

.dc-sf__hw {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 2px;
	border-bottom: 1px solid var(--dc-line);
}

.dc-sf__hw:first-of-type { margin-top: 12px; }

.dc-sf__hw-l {
	display: flex;
	flex: 1 1 auto;
	gap: 12px;
	min-width: 0;
}

.dc-sf__hw-text {
	min-width: 0;
}

.dc-sf__hw-icon {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border: 1px solid var(--dc-line);
	background: var(--dc-chip-on);
}

.dc-sf__hw-name {
	display: block;
	margin: 0;
	color: var(--dc-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.dc-sf__hw-reason {
	display: block;
	margin: 3px 0 0;
	color: var(--dc-grey);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
}

.dc-sf__hw-link {
	flex: 0 0 auto;
	color: var(--dc-ink);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.dc-sf__feature-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.dc-sf__feature {
	padding: 3px 8px;
	background: var(--dc-chip-on);
	color: var(--dc-grey);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
}

.dc-sf__proven {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 16px 20px;
	background: var(--dc-chip-on);
	font-size: 12px;
	line-height: 1.35;
}

.dc-sf__proven-label { color: var(--dc-ink); font-weight: 600; }
.dc-sf__proven-sep   { color: var(--dc-grey); }

.dc-sf__proven a {
	color: var(--dc-ink);
	font-weight: 500;
	text-decoration: none;
}

.dc-sf__alts-title {
	margin: 0 0 10px;
	color: var(--dc-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}

.dc-sf__alt-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.dc-sf__alt {
	display: flex;
	flex: 1 1 380px;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
	border: 1px solid var(--dc-line);
	border-radius: var(--dc-r);
	background: var(--dc-white);
}

.dc-sf__alt-title { margin: 0; color: var(--dc-ink); font-size: 14px; font-weight: 600; line-height: 1.35; }
.dc-sf__alt-blurb { margin: 0; color: var(--dc-grey); font-size: 12px; font-weight: 400; line-height: 1.35; }
.dc-sf__alt-link  { color: var(--dc-ink); font-size: 12px; font-weight: 500; text-decoration: none; }

.dc-sf__fallback {
	margin: 0;
	color: var(--dc-grey);
	font-size: 14px;
	line-height: 1.35;
}

.dc-sf__cta {
	display: inline-block;
	margin-top: 12px;
	padding: 12px 16px;
	border-radius: var(--dc-r);
	background: var(--dc-orange);
	color: var(--dc-salt);
	font-size: 14px;
	font-weight: 500;
	line-height: 14px;
	text-decoration: none;
}

.dc-sf__notice {
	padding: 12px 16px;
	border: 1px dashed currentColor;
	border-radius: var(--dc-r);
	font-size: 14px;
}

/* At the full measure the result column is around 980px, which runs prose to
 * roughly 130 characters a line. The cards still fill the column so the layout
 * reads as designed, but the copy inside them wraps at a comfortable measure.
 */
.dc-sf__ct-sub,
.dc-sf__rec-blurb,
.dc-sf__hw-reason,
.dc-sf__alt-blurb { max-width: 68ch; }

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

/* ---- App-like frame ----
 * Figma draws the panel at a fixed 818px with both columns at 746px. Letting
 * them grow with their content made the whole banner jump every time a question
 * revealed, so on desktop the panel is a fixed frame and each column scrolls
 * inside it. The enquiry CTA sits outside the scrolling area so it is always
 * reachable.
 */
@media (min-width: 1025px) {
	.dc-sf__panel {
		height: min(818px, calc(100vh - 160px));
		min-height: 520px;
	}

	.dc-sf__inner { height: 100%; min-height: 0; }

	.dc-sf__rail {
		display: flex;
		flex-direction: column;
		height: 100%;
		min-height: 0;
	}

	.dc-sf__rail-body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		padding-right: 6px;
	}

	.dc-sf__rail-foot { flex: 0 0 auto; }

	.dc-sf__result {
		height: 100%;
		min-height: 0;
		padding: 24px 40px 56px;
		overflow-y: auto;
		/* Reserve the scrollbar track so content never shifts, and keep the
		   thumb clear of the 16px rounded corners. */
		scrollbar-gutter: stable;
	}

	/* Fades the last few pixels of content so it is obvious there is more to
	   scroll. Removed once the visitor reaches the bottom. */
	.dc-sf__result:not([data-at-end]) {
		-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), rgba(0, 0, 0, 0.15) 100%);
		mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), rgba(0, 0, 0, 0.15) 100%);
	}

	.dc-sf__rail-body,
	.dc-sf__result {
		scrollbar-width: thin;
		scrollbar-color: var(--dc-line) transparent;
	}

	.dc-sf__rail-body::-webkit-scrollbar,
	.dc-sf__result::-webkit-scrollbar { width: 10px; }

	.dc-sf__rail-body::-webkit-scrollbar-track,
	.dc-sf__result::-webkit-scrollbar-track { background: transparent; }

	.dc-sf__rail-body::-webkit-scrollbar-thumb,
	.dc-sf__result::-webkit-scrollbar-thumb {
		border: 3px solid transparent;
		border-radius: 999px;
		background: rgba(26, 29, 33, 0.22);
		background-clip: content-box;
		transition: background-color 0.2s ease;
	}

	.dc-sf__rail-body:hover::-webkit-scrollbar-thumb,
	.dc-sf__result:hover::-webkit-scrollbar-thumb { background: rgba(26, 29, 33, 0.38); background-clip: content-box; }
}

/* Below the breakpoint the columns stack and the page scrolls normally. With
 * script running this is replaced by the sheet further down, so it is really
 * the no-script fallback. */
@media (max-width: 1024px) {
	.dc-sf__inner { flex-direction: column; gap: 24px; }
	.dc-sf__rail  { flex: 1 1 auto; width: 100%; }
	.dc-sf__result { width: 100%; padding: 24px; }
}

@media (max-width: 600px) {
	.dc-sf__panel { padding: 16px 12px; }
	.dc-sf__chip  { white-space: normal; }
}

/* ---- Small screens: the questions live in a sheet ----
 * A rail beside the video does not fit a phone, and stacking it puts the
 * questions above the fold and the video nowhere. So the hero keeps the footage
 * and the tagline, a bar at the bottom opens the questions in a sheet over the
 * top, and minimising drops the answer in below the hero. The rail is moved
 * into the sheet by script rather than duplicated, so it is the same set of
 * controls in both layouts.
 */

.dc-sf__launch { display: none; }
.dc-sf__reveal { display: none; }

/* Holds the page still behind the sheet. */
html.dc-sf-locked,
html.dc-sf-locked body { overflow: hidden; }

.dc-sf__sheet {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: transparent;
}

.dc-sf__sheet[open] {
	display: flex;
	align-items: flex-end;
}

.dc-sf__sheet::backdrop {
	opacity: 0;
	background: rgba(26, 29, 33, 0.55);
	transition: opacity 0.34s ease;
}

.dc-sf__sheet.is-open::backdrop { opacity: 1; }

.dc-sf__sheet-panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
	/* One height throughout. The rail scrolls inside it, so revealing a question
	   never resizes the sheet, which is what makes it read as an app panel
	   rather than a growing page section. */
	height: 86vh;
	height: min(86svh, 720px);
	padding-bottom: env(safe-area-inset-bottom);
	border-radius: 20px 20px 0 0;
	background: var(--dc-salt);
	box-shadow: 0 -8px 40px rgba(26, 29, 33, 0.3);
	transform: translateY(100%);
	transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}

.dc-sf__sheet.is-open .dc-sf__sheet-panel { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	.dc-sf__sheet-panel { transition: none; }
	.dc-sf__sheet::backdrop { transition: none; }
}

.dc-sf__sheet-head {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 16px 12px 4px;
}

/* The usual grab affordance, so it reads as something you pull down. */
.dc-sf__grabber {
	position: absolute;
	top: 8px;
	left: 50%;
	width: 38px;
	height: 4px;
	border-radius: 999px;
	background: rgba(26, 29, 33, 0.2);
	transform: translateX(-50%);
}

.dc-sf .dc-sf__minimise {
	padding: 6px 10px;
	border: 0;
	border-radius: var(--dc-r);
	background: transparent;
	color: var(--dc-grey);
	font-family: var(--dc-ui);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}

.dc-sf .dc-sf__minimise:hover { background: rgba(26, 29, 33, 0.06); color: var(--dc-ink); }

.dc-sf__sheet-body {
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
}

/* On a tablet the sheet is far wider than the questions need, so the contents
 * hold a column rather than stretching the full width of the panel. */
@media (min-width: 620px) {
	.dc-sf__sheet-head,
	.dc-sf.is-sheet .dc-sf__rail {
		width: 100%;
		max-width: 560px;
		margin-inline: auto;
	}
}

@media (max-width: 1024px) {

	/* The hero keeps the footage, the tagline and the launcher, nothing else. */
	.dc-sf.is-sheet .dc-sf__inner { display: none; }

	.dc-sf.is-sheet .dc-sf__panel {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: min(78vh, 620px);
		min-height: min(78svh, 620px);
		padding: 20px 16px;
	}

	.dc-sf.is-sheet .dc-sf__tagline {
		margin: 0 0 14px;
		font-size: clamp(22px, 6.5vw, 34px);
	}

	.dc-sf.is-sheet .dc-sf__launch {
		position: relative;
		z-index: 1;
		display: block;
	}

	.dc-sf .dc-sf__launch-btn {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 13px 14px;
		border: 0;
		border-radius: 14px;
		background: var(--dc-salt);
		box-shadow: 0 8px 30px rgba(26, 29, 33, 0.26);
		font-family: var(--dc-ui);
		text-align: left;
		cursor: pointer;
	}

	.dc-sf__launch-text {
		flex: 1 1 auto;
		min-width: 0;
	}

	.dc-sf__launch-eyebrow {
		display: block;
		color: var(--dc-orange);
		font-family: var(--dc-display);
		font-size: 13px;
		font-weight: 700;
		line-height: 1.2;
		text-transform: uppercase;
	}

	/* One line, ellipsised, so a long set of answers cannot grow the hero. */
	.dc-sf__launch-sub {
		display: block;
		overflow: hidden;
		margin-top: 3px;
		color: var(--dc-ink);
		font-size: 14px;
		line-height: 1.3;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.dc-sf__launch-icon {
		flex: 0 0 auto;
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		border-radius: 999px;
		background: var(--dc-orange);
		color: #fff;
	}

	/* ---- The rail, inside the sheet ---- */

	.dc-sf.is-sheet .dc-sf__rail {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		width: 100%;
		min-height: 0;
		padding: 4px 16px 16px;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.dc-sf.is-sheet .dc-sf__tab,
	.dc-sf.is-sheet .dc-sf__tab-title,
	.dc-sf.is-sheet .dc-sf__tab-desc { white-space: normal; }

	.dc-sf.is-sheet .dc-sf__rail-body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		/* Keeps a flick at the end of the list from scrolling the page behind. */
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding-right: 4px;
	}

	.dc-sf.is-sheet .dc-sf__rail-body {
		scrollbar-width: thin;
		scrollbar-color: var(--dc-line) transparent;
	}

	.dc-sf.is-sheet .dc-sf__rail-body::-webkit-scrollbar { width: 8px; }
	.dc-sf.is-sheet .dc-sf__rail-body::-webkit-scrollbar-track { background: transparent; }

	.dc-sf.is-sheet .dc-sf__rail-body::-webkit-scrollbar-thumb {
		border: 2px solid transparent;
		border-radius: 999px;
		background: rgba(26, 29, 33, 0.2);
		background-clip: content-box;
	}

	.dc-sf.is-sheet .dc-sf__rail-foot {
		flex: 0 0 auto;
		display: grid;
		gap: 8px;
		padding-top: 12px;
		border-top: 1px solid rgba(26, 29, 33, 0.1);
	}

	.dc-sf.is-sheet .dc-sf__enquire { margin-top: 0; }

	.dc-sf.is-sheet .dc-sf__reveal:not([hidden]) { display: block; }

	.dc-sf .dc-sf__reveal {
		width: 100%;
		padding: 13px 16px;
		border: 1px solid var(--dc-orange);
		border-radius: var(--dc-r);
		background: var(--dc-orange);
		color: var(--dc-salt);
		font-family: var(--dc-ui);
		font-size: 14px;
		font-weight: 600;
		line-height: 14px;
		cursor: pointer;
	}

	/* Once there is an answer to go to, that becomes the primary action and the
	   enquiry steps back to an outline. */
	.dc-sf.is-sheet .dc-sf__rail-foot.has-reveal .dc-sf__enquire {
		background: transparent;
		color: var(--dc-orange);
	}

	/* ---- The answer, below the hero ---- */

	.dc-sf.is-sheet > .dc-sf__result {
		width: auto;
		margin-top: 14px;
		padding: 20px 16px 28px;
		border-radius: var(--dc-r-lg);
		background: var(--dc-salt);
		/* Clears the sticky header when the sheet scrolls it into view. */
		scroll-margin-top: 84px;
	}
}

/* ---- Frosted glass ----
 * The panels let the footage read through instead of sitting on it as flat
 * fills. The blur is heavy enough that the background behind the text stays
 * even, so contrast holds wherever the video happens to be light or dark.
 * Set --dc-frost to 1 to go back to the flat Figma fill.
 */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.dc-sf__rail,
	.dc-sf__result {
		background: rgba(235, 235, 229, 0.78);
		-webkit-backdrop-filter: blur(28px) saturate(1.6);
		backdrop-filter: blur(28px) saturate(1.6);
	}

	/* The cards keep a touch of translucency so the frost reads through them
	   too, without costing legibility on the copy inside. */
	.dc-sf__card {
		background: rgba(255, 255, 255, 0.86);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}

	.dc-sf__tab,
	.dc-sf__chip { background: rgba(255, 255, 255, 0.82); }

	.dc-sf .dc-sf__tab[aria-selected="true"],
	.dc-sf .dc-sf__chip[aria-pressed="true"] { background: rgba(237, 239, 242, 0.94); }
}