/* ===========================================================================
   Homepage "Main features" showcase (Oda's design, 2026-10-26)
   ===========================================================================
   Loaded only where the content has `.cq-feature__detail` groups (see
   inc/home-features.php). assets/js/home-features.js builds the parts:

   - desktop (1024px and up): a navy stage (module, intro, Book a demo,
     screenshot) above a row of thumbnail tabs, in place of the card grid;
   - tablet and phone: the cards open a modal <dialog>, a centred popup on
     tablet and a bottom sheet on phone, as on /product/.

   Without the script the card grid shows as before and the details stay
   hidden; "View all features" leads to /product/, which has them all.

   Also the homepage industry cards (wave design), as this file loads on
   the homepage only. */

.cq-main {
	--cq-feat-peach: #fff3eb;
	--cq-feat-peach-wash: #fffaf6;
	--cq-feat-peach-edge: #f6d9c7;
	--cq-feat-peach-deep: #ffe2cc;
	--cq-feat-clay: #b8471a;
	--cq-feat-soft-white: #e8ecf8;
	--cq-feat-line: rgba(188, 207, 252, .18);
}

.cq-feature__detail,
.cq-feat-show,
.cq-feat-dialog:not([open]) {
	display: none !important;
}

/* --- Icons --------------------------------------------------------------- */

.cq-feat-dialog {
	--cq-feat-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5l14 14'/%3E%3Cpath d='M19 5L5 19'/%3E%3C/svg%3E");
	--cq-feat-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.cq-feat-show {
	--cq-feat-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	--cq-feat-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='4' width='4' height='16' rx='1'/%3E%3Crect x='14' y='4' width='4' height='16' rx='1'/%3E%3C/svg%3E");
	--cq-feat-playicon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15a1 1 0 001.5.9l12-7.5a1 1 0 000-1.7l-12-7.5A1 1 0 007 4.5z'/%3E%3C/svg%3E");
}

/* Peach tile with a clay glyph, as on the cards; `--cq-icon` comes from the
   module's `.cq-icon--*` class. */
.cq-main .cq-feat-tile {
	align-items: center;
	background-color: var(--cq-feat-peach);
	border-radius: 10px;
	color: var(--cq-feat-clay);
	display: flex;
	flex: none;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.cq-main .cq-feat-tile::after {
	background-color: currentColor;
	content: "";
	height: 20px;
	-webkit-mask: var(--cq-icon) center / contain no-repeat;
	mask: var(--cq-icon) center / contain no-repeat;
	width: 20px;
}

.cq-main .cq-feat-tile--lg {
	border-radius: var(--cq-radius-md);
	height: 48px;
	width: 48px;
}

.cq-main .cq-feat-tile--lg::after {
	height: 24px;
	width: 24px;
}

/* On the navy stage and popup head the icon is white on a faint white tile
   (Oda, 2026-10-26; was clay on peach). */
.cq-main .cq-feat-stage .cq-feat-tile,
.cq-main .cq-feat-dialog__head .cq-feat-tile {
	background-color: rgba(255, 255, 255, .12);
	color: #ffffff;
}

/* --- Industries: wave cards -------------------------------------------- */
/* Each industry is a light blue card: the name in dark ink on top, then the
   photo, joined by a soft wave (Oda, 2026-10-27, design canvas). The
   caption follows the photo in the markup, so flex `order` puts it first.
   The wave is the photo's own top edge, cut with a mask (the card's light
   blue shows above it), so there is no overlay and no seam: one clean line
   (Oda, 2026-10-27: an overlaid wave left a hairline at some widths). */
.cq-main .cq-industries .cq-industry {
	--cq-wave: 22px;
	--cq-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M0 19C52 5 112 -2 162 6C205 13 250 25 300 21V24H0Z'/%3E%3C/svg%3E");
	background-color: var(--cq-mist);
	border-radius: var(--cq-radius-lg);
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0 !important;
	overflow: hidden;
}

.cq-main .cq-industries .cq-industry .wp-element-caption {
	color: var(--cq-ink); /* dark, not blue (Oda, 2026-10-27) */
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 !important;
	order: -1;
	padding: 28px 20px 6px;
}

/* Wave on top (stretched to the card's width), photo solid below it. */
.cq-main .cq-industries .cq-industry img {
	border: 0 !important;
	border-radius: 0 !important;
	flex: 1 1 auto;
	-webkit-mask:
		var(--cq-wave-mask) top / 100% var(--cq-wave) no-repeat,
		linear-gradient(#000, #000) 0 var(--cq-wave) / 100% calc(100% - var(--cq-wave)) no-repeat;
	mask:
		var(--cq-wave-mask) top / 100% var(--cq-wave) no-repeat,
		linear-gradient(#000, #000) 0 var(--cq-wave) / 100% calc(100% - var(--cq-wave)) no-repeat;
}

@container (max-width: 599.98px) {
	.cq-main .cq-industries .cq-industry {
		--cq-wave: 14px;
	}

	.cq-main .cq-industries .cq-industry .wp-element-caption {
		font-size: 15px;
		padding: 18px 14px 4px;
	}
}

/* --- Desktop: stage and thumbnail tabs ---------------------------------- */

@media (min-width: 1024px) {
	/* Outranks the theme's `.cq-main .wp-block-columns.cq-features` grid. */
	.cq-main .cq-feat-enhanced > .wp-block-columns.cq-features {
		display: none !important;
	}

	.cq-feat-enhanced > .cq-feat-show {
		display: flex !important;
		flex-direction: column;
		gap: 20px;
		margin-block: 48px var(--wp--style--block-gap, 24px) !important;
	}
}

.cq-main .cq-feat-stage {
	align-items: center;
	background-color: var(--cq-indigo-900);
	border-radius: 20px;
	box-shadow: var(--cq-shadow-lg);
	color: #ffffff;
	display: grid;
	gap: 32px;
	/* The 16:9 screenshot sets the height (about 460px at 1440px wide). The
	   screenshot gets most of the width and the padding is kept tight (Oda:
	   bigger images, they were hard to see). The floor keeps narrow
	   desktops from collapsing (394px went to about 300px, Oda) and every
	   module the same height there. */
	grid-template-columns: minmax(0, 4fr) minmax(0, 11fr);
	box-sizing: border-box;
	min-height: 360px;
	padding: 32px;
}

.cq-main .cq-feat-stage:focus {
	outline: none;
}

.cq-main .cq-feat-stage__copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cq-main .cq-feat-stage__copy > * {
	margin: 0 !important;
}

.cq-main .cq-feat-stage__kicker {
	align-items: center;
	color: var(--cq-feat-soft-white);
	display: flex;
	font-size: 13px;
	font-weight: 600;
	gap: 20px;
	letter-spacing: 0.08em;
	margin-bottom: 8px !important;
	text-transform: uppercase;
}

.cq-main .cq-feat-stage__name {
	color: #ffffff;
	font-size: clamp(22px, 1.9vw, 28px); /* long names stay within the 440px stage on narrower windows */
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.3;
}

.cq-main .cq-feat-stage__intro {
	color: var(--cq-feat-soft-white);
	font-size: 16px;
	line-height: 1.6;
}

/* Screenshot on a light blue card (Oda, 2026-10-26; also tried a white
   frame, none, and light orange). One fixed 16:9 shape, so the stage keeps
   its height from module to module. */
.cq-main .cq-feat-stage__shot {
	aspect-ratio: 16 / 9;
	background-color: var(--cq-mist);
	border-radius: var(--cq-radius-lg);
	box-sizing: border-box;
	overflow: hidden;
	padding: 6px;
}

.cq-main .cq-feat-stage__shot img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.cq-main .cq-feat-stage__shot.is-empty,
.cq-main .cq-feat-tab__thumb.is-empty,
.cq-main .cq-feat-dialog__shot.is-empty {
	align-items: center;
	aspect-ratio: 16 / 10;
	background-color: var(--cq-mist);
	display: flex;
	justify-content: center;
}

.cq-main .cq-feat-stage__shot.is-empty {
	aspect-ratio: 16 / 9;
}

.cq-main .cq-feat-tab__thumb.is-empty .cq-feat-tile,
.cq-main .cq-feat-dialog__shot.is-empty .cq-feat-tile {
	background-color: #ffffff;
}

.cq-main .cq-feat-tabs {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(8, minmax(0, 1fr));
}

/* Each tab is a white card that lifts on hover, so it reads as clickable
   (Oda, 2026-10-26); the selected one has the blue edge. */
.cq-main .cq-feat-tab {
	align-items: stretch;
	background-color: #ffffff;
	border: 1.5px solid var(--cq-border);
	border-radius: 10px;
	box-shadow: var(--cq-shadow-sm);
	color: var(--cq-ink);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font: inherit;
	gap: 10px;
	padding: 8px 8px 10px;
	text-align: left;
	transition: border-color 160ms var(--cq-ease), box-shadow 160ms var(--cq-ease), transform 160ms var(--cq-ease);
}

.cq-main .cq-feat-tab:hover {
	border-color: var(--cq-sky);
	box-shadow: var(--cq-shadow-md);
	transform: translateY(-3px);
}

.cq-main .cq-feat-tab.is-selected {
	border-color: var(--cq-blue);
	box-shadow: var(--cq-shadow-md);
}

.cq-main .cq-feat-tab:not(.is-selected) .cq-feat-tab__label {
	color: #3f4947;
}

.cq-main .cq-feat-tab:hover .cq-feat-tab__label {
	color: var(--cq-blue);
}

/* Progress bar along the bottom of the selected thumbnail while the stage
   changes by itself; the script sets `--cq-feat-p` (0–1) as time passes. */
.cq-main .cq-feat-tab__thumb {
	position: relative;
}

.cq-main .cq-feat-tab__progress {
	bottom: 0;
	height: 3px;
	left: 0;
	position: absolute;
	right: 0;
}

.cq-main .cq-feat-show.is-auto .cq-feat-tab.is-selected .cq-feat-tab__progress {
	background-color: rgba(31, 59, 244, .15);
}

.cq-main .cq-feat-show.is-auto .cq-feat-tab.is-selected .cq-feat-tab__progress::after {
	background-color: var(--cq-blue);
	content: "";
	display: block;
	height: 100%;
	transform: scaleX(var(--cq-feat-p, 0));
	transform-origin: left center;
	transition: transform 100ms linear;
}

/* Round Previous / Next arrows half over the stage's edges. */
/* Faded slivers of the neighbouring modules, so it is clear you can move
   both ways (Oda, 2026-10-26, after a carousel reference). The first module
   starts flush left with only the next one peeking in on the right; from
   the second module on, the stage moves in and the previous one peeks in on
   the left. The stage keeps one width throughout and slides between the two
   positions.

   Stage and slivers sit in a track that clips sideways at the content edges
   (no page scroll); it reaches 48px past the left edge so the stage's shadow
   is not cut. The arrows and the pause button sit in the frame, outside the
   clip, and follow the stage. */
.cq-main .cq-feat-frame {
	--cq-feat-peek: 56px;  /* visible sliver */
	--cq-feat-gap: 16px;   /* between stage and sliver */
	--cq-feat-step: calc(var(--cq-feat-peek) + var(--cq-feat-gap));
	--cq-feat-shift: var(--cq-feat-step); /* stage offset from the left edge */
	position: relative;
}

.cq-main .cq-feat-frame.is-first {
	--cq-feat-shift: 0px;
}

.cq-main .cq-feat-track {
	margin-left: -48px;
	overflow-x: clip;
	padding-left: 48px;
	position: relative;
}

.cq-main .cq-feat-track > .cq-feat-stage:not(.cq-feat-peek) {
	margin-left: var(--cq-feat-shift);
	transition: margin-left 380ms var(--cq-ease);
	width: calc(100% - 2 * var(--cq-feat-step));
}

.cq-main .cq-feat-peek {
	bottom: 0;
	box-shadow: none;
	cursor: pointer;
	opacity: .35;
	position: absolute;
	top: 0;
	transition: opacity 160ms var(--cq-ease), left 380ms var(--cq-ease);
	/* Same width as the stage; 100% here includes the track's 48px. */
	width: calc(100% - 48px - 2 * var(--cq-feat-step));
}

.cq-main .cq-feat-peek:hover {
	opacity: .6;
}

/* Ends `peek` px into the content; only that sliver shows (the track's
   extra 48px on the left is for the stage's shadow, not for this). */
.cq-main .cq-feat-peek--prev {
	clip-path: inset(0 0 0 calc(100% - var(--cq-feat-peek)) round 0 20px 20px 0);
	left: calc(48px + var(--cq-feat-peek) - (100% - 48px - 2 * var(--cq-feat-step)));
}

.cq-main .cq-feat-frame.is-first .cq-feat-peek--prev {
	display: none;
}

/* Starts one gap after the stage. */
.cq-main .cq-feat-peek--next {
	left: calc(48px + var(--cq-feat-shift) + (100% - 48px - 2 * var(--cq-feat-step)) + var(--cq-feat-gap));
}

@media (prefers-reduced-motion: reduce) {
	.cq-main .cq-feat-track > .cq-feat-stage:not(.cq-feat-peek),
	.cq-main .cq-feat-peek {
		transition: none;
	}
}

/* Switching cards: the whole card slides. The new stage comes in from the
   side the module comes from, where its faded sliver was; a copy of the old
   one (`.cq-feat-ghost`, added by the script) slides out the other way and
   fades towards a sliver (Oda, 2026-10-26: make it clear we move between
   cards). Both sit above the slivers while they move; the track clips them
   at the content edges. */
.cq-main .cq-feat-track > .cq-feat-stage:not(.cq-feat-peek) {
	z-index: 1;
}

.cq-main .cq-feat-ghost {
	margin: 0 !important;
	pointer-events: none;
	position: absolute !important;
	z-index: 2;
}

.cq-main .cq-feat-stage.is-from-next {
	animation: cq-feat-in-next 520ms var(--cq-ease);
}

.cq-main .cq-feat-stage.is-from-prev {
	animation: cq-feat-in-prev 520ms var(--cq-ease);
}

.cq-main .cq-feat-ghost.is-to-prev {
	animation: cq-feat-out-prev 520ms var(--cq-ease) forwards;
}

.cq-main .cq-feat-ghost.is-to-next {
	animation: cq-feat-out-next 520ms var(--cq-ease) forwards;
}

@keyframes cq-feat-in-next {
	from {
		transform: translateX(calc(100% + var(--cq-feat-gap)));
	}
}

@keyframes cq-feat-in-prev {
	from {
		transform: translateX(calc(-100% - var(--cq-feat-gap)));
	}
}

@keyframes cq-feat-out-prev {
	to {
		opacity: .35;
		transform: translateX(calc(-100% - var(--cq-feat-gap)));
	}
}

@keyframes cq-feat-out-next {
	to {
		opacity: .35;
		transform: translateX(calc(100% + var(--cq-feat-gap)));
	}
}

@media (prefers-reduced-motion: reduce) {
	.cq-main .cq-feat-stage.is-from-next,
	.cq-main .cq-feat-stage.is-from-prev {
		animation: none;
	}

	.cq-main .cq-feat-ghost {
		display: none;
	}
}

.cq-main .cq-feat-arrow {
	align-items: center;
	background-color: #ffffff;
	border: 1px solid var(--cq-border);
	border-radius: 50%;
	box-shadow: var(--cq-shadow-md);
	color: var(--cq-ink);
	cursor: pointer;
	display: flex;
	height: 52px;
	justify-content: center;
	margin-top: -26px;
	padding: 0;
	position: absolute;
	top: 50%;
	transition: background-color 160ms var(--cq-ease), color 160ms var(--cq-ease), transform 160ms var(--cq-ease);
	width: 52px;
	z-index: 1;
}

.cq-main .cq-feat-arrow--prev {
	left: calc(var(--cq-feat-shift) - 26px);
	transition: left 380ms var(--cq-ease), background-color 160ms var(--cq-ease), color 160ms var(--cq-ease), transform 160ms var(--cq-ease);
}

.cq-main .cq-feat-arrow--next {
	right: calc(2 * var(--cq-feat-step) - var(--cq-feat-shift) - 26px);
	transition: right 380ms var(--cq-ease), background-color 160ms var(--cq-ease), color 160ms var(--cq-ease), transform 160ms var(--cq-ease);
}

.cq-main .cq-feat-arrow::after {
	background-color: currentColor;
	content: "";
	height: 22px;
	-webkit-mask: var(--cq-feat-chevron) center / contain no-repeat;
	mask: var(--cq-feat-chevron) center / contain no-repeat;
	width: 22px;
}

.cq-main .cq-feat-arrow--prev::after {
	transform: scaleX(-1);
}

/* Same hover as the site's white outline buttons (mist fill, sky edge,
   blue glyph; Oda, 2026-10-26). */
.cq-main .cq-feat-arrow:hover {
	background-color: var(--cq-mist);
	border-color: var(--cq-sky);
	color: var(--cq-blue);
}

.cq-main .cq-feat-arrow:focus-visible,
.cq-main .cq-feat-play:focus-visible {
	outline: 2px solid var(--cq-blue);
	outline-offset: 3px;
}

/* Pause / play: small, pinned to the stage's bottom-left corner so it sits
   in the same place for every module (Oda, 2026-10-26). */
.cq-main .cq-feat-stage:not(.cq-feat-peek) {
	position: relative;
}

.cq-main .cq-feat-play {
	align-items: center;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	bottom: 20px;
	color: var(--cq-feat-soft-white);
	cursor: pointer;
	display: flex;
	height: 28px;
	justify-content: center;
	left: 32px;
	padding: 0;
	position: absolute;
	transition: background-color 120ms var(--cq-ease);
	width: 28px;
	z-index: 1;
}

.cq-main .cq-feat-play:hover {
	background-color: rgba(255, 255, 255, .1);
}

.cq-main .cq-feat-play:focus-visible {
	outline-color: var(--cq-sky);
}

.cq-main .cq-feat-play::after {
	background-color: currentColor;
	content: "";
	height: 11px;
	-webkit-mask: var(--cq-feat-pause) center / contain no-repeat;
	mask: var(--cq-feat-pause) center / contain no-repeat;
	width: 11px;
}

.cq-main .cq-feat-play.is-stopped::after {
	-webkit-mask-image: var(--cq-feat-playicon);
	mask-image: var(--cq-feat-playicon);
}

@media (prefers-reduced-motion: reduce) {
	.cq-main .cq-feat-tab,
	.cq-main .cq-feat-arrow {
		transition: none;
	}

	.cq-main .cq-feat-tab:hover {
		transform: none;
	}
}

.cq-main .cq-feat-tab:focus {
	outline: none;
}

.cq-main .cq-feat-tab:focus-visible {
	outline: 2px solid var(--cq-blue);
	outline-offset: 2px;
}

.cq-main .cq-feat-tab__thumb {
	aspect-ratio: 16 / 10;
	background-color: var(--cq-mist);
	border-radius: 6px;
	overflow: hidden;
}

.cq-main .cq-feat-tab__thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: left top;
	width: 100%;
}

.cq-main .cq-feat-tab__thumb .cq-feat-tile {
	height: 32px;
	width: 32px;
}

.cq-main .cq-feat-tab__thumb .cq-feat-tile::after {
	height: 16px;
	width: 16px;
}

.cq-main .cq-feat-tab__label {
	/* 13px at 1024px so "Compliance" / "Sjekkliste" fit the narrowest tabs. */
	font-size: clamp(13px, 1.15vw, 15px);
	font-weight: 500;
	line-height: 1.3;
}

/* --- Buttons under the section ----------------------------------------- */
/* On a phone "View all features" and "Book a demo" stack full width, like
   the hero's buttons, instead of wrapping at two different widths. */
@container (max-width: 599.98px) {
	.cq-main .cq-features ~ .wp-block-buttons {
		flex-direction: column;
		gap: 12px;
	}

	.cq-main .cq-features ~ .wp-block-buttons .wp-block-button,
	.cq-main .cq-features ~ .wp-block-buttons .wp-block-button__link {
		text-align: center;
		width: 100%;
	}
}

/* --- Tablet and phone: clickable cards ---------------------------------- */

/* The title becomes a button stretched over the whole card. */
.cq-main .cq-feature__toggle {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	padding: 0;
	text-align: left;
}

.cq-main .cq-feature__toggle::before {
	border-radius: var(--cq-radius-lg);
	content: "";
	inset: -1px;
	position: absolute;
	z-index: 1;
}

.cq-main .cq-feature__toggle:focus {
	outline: none;
}

.cq-main .cq-feature__toggle:focus-visible::before {
	outline: 2px solid var(--cq-blue);
	outline-offset: 2px;
}

/* Warm hover matching the peach/clay icon tile, as on /product/. */
.cq-main .cq-features.is-clickable .cq-feature:hover {
	background-color: var(--cq-feat-peach-wash);
	border-color: var(--cq-feat-peach-edge) !important;
	box-shadow: var(--cq-shadow-sm);
}

.cq-main .cq-features.is-clickable .cq-feature:hover::before {
	background-color: var(--cq-feat-peach-deep);
}

/* --- Module popup -------------------------------------------------------- */
/* The head stays put, the body scrolls, and the nav row steps to the
   previous / next module. */

html.cq-feat-dialog-open {
	overflow: hidden;
}

.cq-main .cq-feat-dialog {
	background: transparent;
	border: 0;
	box-sizing: border-box;
	color: #ffffff;
	margin: auto;
	max-height: calc(100dvh - 48px);
	max-width: 640px;
	overflow: visible;
	padding: 0;
	width: calc(100% - 48px);
}

.cq-main .cq-feat-dialog::backdrop {
	background: rgba(6, 12, 49, .55);
}

.cq-main .cq-feat-dialog__panel {
	background-color: var(--cq-indigo-900);
	border-radius: var(--cq-radius-lg);
	box-shadow: var(--cq-shadow-lg);
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - 48px);
	overflow: hidden;
}

.cq-main .cq-feat-dialog__head {
	align-items: flex-start;
	border-bottom: 1px solid var(--cq-feat-line);
	display: flex;
	flex: none;
	gap: 16px;
	padding: 20px 24px;
}

.cq-main .cq-feat-dialog__text {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 4px;
	min-width: 0;
}

.cq-main .cq-feat-dialog__text > * {
	margin: 0 !important;
}

.cq-main .cq-feat-dialog__name {
	color: #ffffff;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
}

.cq-main .cq-feat-dialog__intro {
	color: var(--cq-feat-soft-white);
	font-size: 15px;
	line-height: 1.55;
}

.cq-main .cq-feat-dialog__close {
	align-items: center;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: var(--cq-radius-sm);
	color: #ffffff;
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	height: 44px;
	justify-content: center;
	padding: 0;
	transition: background-color 120ms var(--cq-ease);
	width: 44px;
}

.cq-main .cq-feat-dialog__close::after {
	background-color: currentColor;
	content: "";
	height: 20px;
	-webkit-mask: var(--cq-feat-x) center / contain no-repeat;
	mask: var(--cq-feat-x) center / contain no-repeat;
	width: 20px;
}

.cq-main .cq-feat-dialog__close:hover {
	background-color: rgba(255, 255, 255, .08);
}

.cq-main .cq-feat-dialog__close:focus-visible,
.cq-main .cq-feat-dialog__step:focus-visible {
	outline: 2px solid var(--cq-sky);
	outline-offset: 2px;
}

.cq-main .cq-feat-dialog__body {
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 24px 24px 28px;
}

.cq-main .cq-feat-dialog__body > * {
	margin: 0 !important;
}

/* Light blue card, as on the desktop stage. */
.cq-main .cq-feat-dialog__shot {
	background-color: var(--cq-mist);
	border-radius: var(--cq-radius-md);
	flex: none;
	margin-top: 8px !important;
	overflow: hidden;
	padding: 12px;
}

.cq-main .cq-feat-dialog__shot img {
	display: block;
	height: auto;
	width: 100%;
}

.cq-main .cq-feat-dialog__body .cq-feature__label {
	color: var(--cq-sky);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cq-main .cq-feat-dialog__body ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	padding: 0;
}

.cq-main .cq-feat-dialog__body ul + .cq-feature__label {
	margin-top: 8px !important;
}

.cq-main .cq-feat-dialog__body li {
	color: #ffffff;
	font-size: 15px;
	line-height: 1.55;
	padding-left: 28px;
	position: relative;
}

.cq-main .cq-feat-dialog__body li::before {
	background-color: var(--cq-sky);
	content: "";
	height: 16px;
	left: 0;
	-webkit-mask: var(--cq-feat-tick) center / contain no-repeat;
	mask: var(--cq-feat-tick) center / contain no-repeat;
	position: absolute;
	top: 3px;
	width: 16px;
}

.cq-main .cq-feat-dialog__nav {
	align-items: center;
	border-top: 1px solid var(--cq-feat-line);
	display: grid;
	flex: none;
	gap: 8px;
	grid-template-columns: 1fr auto 1fr;
	padding: 12px 16px;
}

.cq-main .cq-feat-dialog__count {
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.cq-main .cq-feat-dialog__step {
	align-items: flex-start;
	background: transparent;
	border: 0;
	border-radius: var(--cq-radius-sm);
	color: #ffffff;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font: inherit;
	gap: 2px;
	min-height: 48px;
	min-width: 0;
	padding: 6px 10px;
	text-align: left;
	transition: background-color 120ms var(--cq-ease);
}

.cq-main .cq-feat-dialog__step--next {
	align-items: flex-end;
	justify-self: end;
	text-align: right;
}

.cq-main .cq-feat-dialog__step:hover {
	background-color: rgba(255, 255, 255, .08);
}

.cq-main .cq-feat-dialog__step-label {
	color: var(--cq-sky);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cq-main .cq-feat-dialog__step--prev .cq-feat-dialog__step-label::before {
	content: "\2039\00a0";
}

.cq-main .cq-feat-dialog__step--next .cq-feat-dialog__step-label::after {
	content: "\00a0\203A";
}

.cq-main .cq-feat-dialog__step-name {
	font-size: 15px;
	font-weight: 600;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Phone: a bottom sheet, full width, sliding up, with a grab handle. */
@media (max-width: 599.98px) {
	.cq-main .cq-feat-dialog {
		margin: auto 0 0;
		max-height: 90dvh;
		max-width: none;
		width: 100%;
	}

	.cq-main .cq-feat-dialog__panel {
		border-radius: 20px 20px 0 0;
		max-height: 90dvh;
		padding-bottom: env(safe-area-inset-bottom, 0);
		position: relative;
	}

	.cq-main .cq-feat-dialog__panel::before {
		background-color: rgba(255, 255, 255, .35);
		border-radius: 2px;
		content: "";
		height: 4px;
		left: 50%;
		position: absolute;
		top: 8px;
		transform: translateX(-50%);
		width: 40px;
	}

	.cq-main .cq-feat-dialog__head {
		padding: 24px 16px 20px 20px;
	}

	.cq-main .cq-feat-dialog__body {
		padding: 20px 20px 24px;
	}

	.cq-main .cq-feat-dialog[open] {
		animation: cq-feat-sheet-up 200ms var(--cq-ease);
	}
}

@keyframes cq-feat-sheet-up {
	from {
		transform: translateY(24px);
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cq-main .cq-feat-dialog[open] {
		animation: none;
	}
}