/**
 * emoswitch blue landing page (page-emoswitch-blue.php).
 *
 * The designed Bluetooth-line look: its own blue accent (#155DFC on
 * #EFF6FF tints over a slate #0F172B trust strip), carried as local
 * --esb-* tokens so the page owns its palette without touching the
 * theme-wide accent. Everything else (spacing, type, motion) derives
 * from tokens.css. Enqueued by inc/emoswitch-blue.php.
 */

:root {
	--esb-accent:        #155dfc;
	--esb-accent-ink:    var(--color-text-inverse);
	--esb-accent-deep:   #0f45c4;
	--esb-tint:          #eff6ff;
	--esb-tint-strong:   #dbe9fe;
	--esb-dark:          #0f172b;
	--esb-dark-ink:      #e2e8f0;
	/* Follows the shared site container (tokens.css) instead of its own
	   narrower 1080px, so the product page fills the page like the rest. */
	--esb-max:           var(--layout-content-max-width);
}

/* ============================================================
 * Shared section scaffolding
 * ============================================================ */

.esb {
	color: var(--color-text-primary);
	font-family: var(--font-sans);
	background: var(--color-bg-base);
}

.esb section {
	padding-block: var(--space-9);
	/* Whichever is larger, the shared gutter floor or the container's own
	 * centering. A plain pad plus margin auto on the inner wrapper does
	 * not work here: --layout-content-max-width has a 1200px floor, so
	 * below about 1244px the cap exceeds the viewport, the auto margins
	 * distribute nothing, and the pad alone is the gutter. */
	padding-inline: max(var(--layout-gutter), calc((100% - var(--esb-max)) / 2));
}

.esb-section-head {
	max-width: 720px;
	margin: 0 auto var(--space-7);
	text-align: center;
}

.esb-section-head h2 {
	margin: 0 0 var(--space-3);
	font-size: var(--font-size-3xl, 2rem);
	letter-spacing: -0.02em;
}

.esb-section-head p {
	margin: 0;
	color: var(--color-text-secondary);
	line-height: 1.6;
}

.esb-section-head--inverse h2,
.esb-section-head--inverse p {
	color: var(--esb-accent-ink);
}

/* The page's two CTA styles.
 *
 * .esb-button, the filled blue pill, is the commit action: the trial
 * section's request button and the form's submit. .esb-link (further
 * down, with the compare section it was written for) is a plain text
 * link with the site's trailing chevron, for a CTA that only moves the
 * reader along.
 *
 * The hero uses the LINK (owner 2026-09-04): its wordmark, tagline and
 * product render already carry the section, and a solid block under
 * them read as a fourth weight competing with all three. Same call the
 * product-line heroes took on 2026-08-31. */
.esb-button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border: 0;
	border-radius: var(--radius-control);
	background: var(--esb-accent);
	color: var(--esb-accent-ink);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition:
		background var(--motion-duration-fast) var(--motion-ease-standard),
		transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.esb-button:hover,
.esb-button:focus-visible {
	background: var(--esb-accent-deep);
	color: var(--esb-accent-ink);
	text-decoration: none;
}

.esb-button:active {
	transform: scale(0.97);
	transition-duration: var(--motion-duration-press);
}

/* ============================================================
 * Hero
 * ============================================================ */

.esb-hero {
	/* Soft diagonal wash instead of a flat tint: the product render carries
	 * its own light-blue studio ground, and on a flat fill its edges read as
	 * a pasted rectangle. The gradient lets the render sit IN the section
	 * the way the live page does. */
	background: linear-gradient(115deg, #e4e9ff 0%, #eaf1ff 42%, #f4f9ff 100%);
	/* The render is wider than its column and bleeds toward the page edge;
	 * clip so that never becomes horizontal page scroll. */
	overflow: clip;
}

.esb-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--space-7);
	align-items: center;
	max-width: var(--esb-max);
	margin: 0 auto;
}

.esb-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-control);
	background: rgb(21 93 252 / 0.1);
	/* Deep accent: the plain accent on the tinted wash is 4.2:1, under the
	 * AA floor for this 14.4px/600 text. */
	color: var(--esb-accent-deep);
	font-size: 0.9em;
	font-weight: 600;
}

.esb-hero__badge-icon svg {
	display: block;
	width: 16px;
	height: 16px;
}

.esb-hero__title {
	margin: 0 0 var(--space-4);
}

/* Wordmark as styled text, mirroring the live logo image
 * (emoswitch_blue_logo_original.png): "emoswitch" in ink, "blue" in
 * white on the rounded teal-to-blue gradient chip with the light sheen
 * across its top. Gradient stops sampled from the live bitmap; the blue
 * family is this page's deliberate product identity, everything else
 * stays on tokens. */
.esb-hero__wordmark {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.22em;
	/* Ceiling raised from 3.3rem: on a 4K screen the wordmark read as small
	 * type in a very wide band. */
	font-size: clamp(2.4rem, 5.5vw, 4.6rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.15;
	color: var(--color-text-primary);
}

.esb-hero__wordmark-blue {
	padding: 0 0.18em 0.05em;
	border-radius: 0.16em;
	color: var(--esb-accent-ink);
	background:
		linear-gradient(180deg, rgb(255 255 255 / 0.5) 0%, rgb(255 255 255 / 0) 55%),
		linear-gradient(101deg, #4fd6d4 0%, #12b0c8 38%, #3f89d8 72%, #5278e1 100%);
}

.esb-hero__tagline {
	margin: 0 0 var(--space-5);
	max-width: 46ch;
	font-size: var(--font-size-lg, 1.15rem);
	color: var(--color-text-secondary);
	line-height: 1.6;
}

.esb-hero__cta-row {
	margin: 0;
}

.esb-hero__media {
	margin: 0;
	/* Let the render overflow its grid cell rather than being boxed by it. */
	min-width: 0;
}

.esb-hero__media img {
	display: block;
	/* Product-shot scale, matching the live page: the render is the hero,
	 * not a thumbnail. Sized as a share of its column (which scales with
	 * the container), NOT to a fixed pixel cap: a 760px cap left the
	 * product at 20% of a 4K screen, an island in a wide empty band. */
	width: 112%;
	max-width: none;
	height: auto;
	margin-inline-start: auto;
}

/* ============================================================
 * Benefits
 * ============================================================ */

/* Six cards, designed as 3 across in 2 rows. The count is FIXED on purpose:
 * an auto-fit track list re-counted itself against the container, and once
 * --layout-content-max-width became clamp(1200px, 70vw, 1800px) the same six
 * cards spread to 5 and then 6 across, leaving an orphan on row two. A wider
 * viewport must widen these columns, never add more of them. */
.esb-benefits__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-5);
	max-width: var(--esb-max);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.esb-benefit {
	padding: var(--space-5);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-panel);
	background: var(--color-bg-elevated);
}

.esb-benefit__icon svg {
	width: 32px;
	height: 32px;
	color: var(--esb-accent);
}

.esb-benefit__title {
	margin: var(--space-3) 0 var(--space-2);
	font-size: 1.05rem;
}

.esb-benefit__text {
	margin: 0;
	color: var(--color-text-secondary);
	line-height: 1.55;
}

/* ============================================================
 * Quality stats
 * ============================================================ */

.esb-stats {
	background: var(--esb-tint);
}

.esb-stats__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-5);
	max-width: 820px;
	margin: 0 auto;
}

.esb-stat {
	text-align: center;
}

.esb-stat dt {
	font-size: var(--font-size-3xl, 2rem);
	font-weight: 700;
	color: var(--esb-accent);
	letter-spacing: -0.02em;
}

.esb-stat dd {
	margin: var(--space-1) 0 0;
	color: var(--color-text-secondary);
}

/* ============================================================
 * Comparison table
 * ============================================================ */

.esb-compare__scroll {
	max-width: var(--esb-max);
	margin: 0 auto;
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.esb-compare__table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.esb-compare__table th,
.esb-compare__table td {
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--color-border-hairline);
	text-align: left;
}

.esb-compare__table thead th {
	font-size: 0.9em;
	color: var(--color-text-secondary);
}

.esb-compare__table tbody tr:last-child th,
.esb-compare__table tbody tr:last-child td {
	border-bottom: 0;
}

/* Way out of the page: quiet chevron links under the comparison table
   to the rest of the footswitch line. */
.esb-compare__more {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3) var(--space-7);
	max-width: var(--esb-max);
	margin: var(--space-5) auto 0;
}

/* Inline flow, NOT inline-flex: the hero's label is a full sentence and
 * wraps to two lines on a phone. As flex items the label and the
 * chevron are siblings on one flex line, which pins the chevron beside
 * the FIRST line and strands the rest under it. Inline lets the chevron
 * follow the last word wherever it falls; the compare links' short
 * labels look identical either way. */
.esb-link {
	display: inline;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	font-weight: 600;
	color: var(--esb-accent-deep);
	text-decoration: none;
	transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

/* The trailing chevron span in every .esb-link. The margin replaces the
   old flex gap; the markup deliberately leaves NO whitespace between
   the two spans, so the chevron cannot break onto a line of its own. */
.esb-link > span + span {
	display: inline-block;
	margin-inline-start: var(--space-2);
	transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

/* Hover moves the arrow, it does not underline (owner 2026-09-04):
   every other chevron CTA in the theme answers a hover that way
   (.product-line__cta, .site-nav__mega-cta), and this page's links
   were the one exception. The colour darkens from --esb-accent-deep,
   so the hover state never drops below the resting contrast. */
.esb-link:hover,
.esb-link:focus-visible {
	color: color-mix(in srgb, var(--esb-accent-deep) 82%, #000);
	text-decoration: none;
}

.esb-link:hover > span + span,
.esb-link:focus-visible > span + span {
	transform: translateX(3px);
}

/* Keyboard focus keeps the ring, which is the affordance the rest of
   the theme uses; the underline is gone with the hover one. */
.esb-link:focus-visible {
	outline: 2px solid var(--esb-accent);
	outline-offset: 4px;
	border-radius: var(--radius-sm);
}

/* Press feedback on pointer-down, under 100ms (spec section 1). */
.esb-link:active {
	opacity: 0.55;
	transition-duration: var(--motion-duration-press);
}

.esb-compare__hero-col {
	background: var(--esb-tint);
	font-weight: 600;
	color: var(--esb-accent-deep);
}

/* ============================================================
 * Steps (solid blue band)
 * ============================================================ */

.esb-steps {
	background: var(--esb-accent);
	color: var(--esb-accent-ink);
}

.esb-steps__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-5);
	max-width: var(--esb-max);
	margin: 0 auto var(--space-6);
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.esb-step {
	text-align: center;
	padding: 0 var(--space-3);
}

.esb-step__number {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.18);
	font-size: 1.2rem;
	font-weight: 700;
}

.esb-step__title {
	margin: var(--space-3) 0 var(--space-2);
	font-size: 1.05rem;
}

.esb-step__text {
	margin: 0;
	/* Solid ink: 0.85-alpha white composites to 4.2:1 on the accent band,
	 * below the 4.5:1 AA floor for 16px text. */
	color: var(--esb-accent-ink);
	line-height: 1.55;
}

.esb-steps__note {
	max-width: 720px;
	margin: 0 auto;
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-lg);
	/* Deep solid panel: a white-alpha wash brightens the backdrop and drops
	 * the inherited white text to ~4.0:1; the deep accent gives 7.9:1. */
	background: var(--esb-accent-deep);
	line-height: 1.55;
}

/* ============================================================
 * In use
 * ============================================================ */

.esb-inuse__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-7);
	align-items: center;
	max-width: var(--esb-max);
	margin: 0 auto;
}

.esb-inuse__media {
	margin: 0;
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--color-bg-base);
}

.esb-inuse__media img {
	display: block;
	width: 100%;
	height: auto;
}

.esb-inuse__points {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.esb-inuse__points li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	line-height: 1.5;
}

.esb-inuse__icon svg,
.esb-trial__icon svg {
	width: 24px;
	height: 24px;
	color: var(--esb-accent);
}

/* ============================================================
 * Trial
 * ============================================================ */

.esb-trial {
	background: var(--esb-tint);
	text-align: center;
}

.esb-trial__points {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-5);
	margin: 0 0 var(--space-6);
	padding: 0;
	list-style: none;
}

.esb-trial__points li {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 600;
}

.esb-trial__cta-row {
	margin: 0;
}

.esb-trial__fineprint {
	max-width: 640px;
	margin: var(--space-5) auto 0;
	color: var(--color-text-secondary);
	font-size: var(--text-sm, 0.875rem);
	line-height: 1.6;
}

.esb-trial__fineprint a {
	color: inherit;
	text-decoration: underline;
}

/* ============================================================
 * FAQ
 * ============================================================ */

.esb-faq__group {
	max-width: 780px;
	margin: var(--space-6) auto var(--space-3);
	font-size: 1.1rem;
}

.esb-faq__list {
	max-width: 780px;
	margin: 0 auto;
}

.esb-faq__item {
	border-bottom: 1px solid var(--color-border-hairline);
}

.esb-faq__question {
	padding: var(--space-4) var(--space-2);
	font-weight: 600;
	cursor: pointer;
	list-style-position: outside;
}

.esb-faq__question:hover {
	color: var(--esb-accent-deep);
}

/* The question text is an <h4> inside the summary so it sits in the
   outline under the group's h3. It must look exactly like the bare
   summary text did: inherit the summary's font and colour, no heading
   margin, and inline so it stays on the marker's line instead of
   pushing the disclosure triangle onto a line of its own. */
.esb-faq__question-title {
	display: inline;
	margin: 0;
	font: inherit;
	color: inherit;
}

.esb-faq__answer {
	margin: 0;
	padding: 0 var(--space-2) var(--space-4);
	color: var(--color-text-secondary);
	line-height: 1.6;
}

.esb-faq__more {
	max-width: 780px;
	margin: var(--space-6) auto 0;
	text-align: center;
	color: var(--color-text-secondary);
}

/* ============================================================
 * 30-Tage-Test lead form (live form layout: Vorname/Nachname as a
 * two-column row, single column below 640px; four consent
 * checkboxes; inline validation via :user-invalid like forms.css)
 * ============================================================ */

.esb-contact {
	background: var(--color-bg-elevated);
}

.esb-contact__fineprint {
	max-width: 640px;
	margin: var(--space-4) auto 0;
	color: var(--color-text-secondary);
	font-size: var(--text-sm, 0.875rem);
	line-height: 1.6;
	text-align: center;
}

.esb-form {
	display: grid;
	gap: var(--space-4);
	max-width: 640px;
	margin: 0 auto;
	padding: var(--space-6);
	box-sizing: border-box;
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-surface);
	background: var(--color-bg-base);
}

.esb-form__field--hp {
	position: absolute;
	left: -9999px;
}

/* Two-up row (Vorname / Nachname), like the live form. */
.esb-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
}

.esb-form__label {
	display: block;
	margin-bottom: var(--space-1);
	font-weight: 600;
	font-size: 0.95em;
}

.esb-form__required {
	color: var(--esb-accent);
	margin-left: 2px;
}

.esb-form__optional {
	margin-left: 2px;
	color: var(--color-text-secondary);
	font-weight: 400;
	font-size: 0.9em;
}

.esb-form__input,
.esb-form__textarea {
	width: 100%;
	/* No global border-box reset in this theme: without this, width 100%
	 * plus 12px padding and the 1px borders made every control 26px wider
	 * than its grid cell, so the Vorname/Nachname pair overlapped and all
	 * fields overran the card. */
	box-sizing: border-box;
	max-width: 100%;
	padding: var(--space-3);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-sm);
	background: var(--color-bg-elevated);
	font: inherit;
	color: inherit;
}

/* Native selects inherit the same skin and the same box model. */
.esb-form select,
.esb-form__select {
	width: 100%;
	box-sizing: border-box;
	max-width: 100%;
	padding: var(--space-3);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-sm);
	background: var(--color-bg-elevated);
	font: inherit;
	color: inherit;
}

.esb-form__input:focus-visible,
.esb-form__textarea:focus-visible {
	outline: 2px solid var(--esb-accent);
	outline-offset: -1px;
}

.esb-form__checks {
	display: grid;
	gap: var(--space-3);
}

.esb-form__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	color: var(--color-text-secondary);
	font-size: 0.9em;
	line-height: 1.5;
}

.esb-form__consent input {
	margin-top: 0.2em;
	flex-shrink: 0;
}

.esb-form__consent a {
	color: inherit;
	text-decoration: underline;
}

/* Inline validation (spec 8): :user-invalid fires only after the user
 * has interacted with a field, never on pristine forms; colors match
 * forms.css. */
.esb-form__input:user-invalid,
.esb-form__textarea:user-invalid {
	border-color: var(--color-danger);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 12%, transparent);
}

.esb-form__consent input:user-invalid {
	outline: 2px solid var(--color-danger);
	outline-offset: 2px;
}

.esb-form__submit {
	justify-self: start;
}

.esb-form__notice {
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	background: var(--esb-tint);
	color: var(--esb-accent-deep);
}

.esb-form__notice--error {
	background: var(--color-danger-soft);
	color: var(--color-danger-ink);
}

/* ============================================================
 * Trust strip
 * ============================================================ */

.esb-trust {
	background: var(--esb-dark);
	color: var(--esb-dark-ink);
}

/* Four badges, now a FIXED four-up. auto-fit with a 200px floor looked
 * safe because it never exceeds the item count, but it undershoots in the
 * tablet band: between roughly 690px and 910px of viewport the track list
 * resolves to exactly 3, which strands the fourth badge alone on row two.
 * A fixed count plus the explicit steps below never produces an orphan. */
.esb-trust__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-5);
	max-width: var(--esb-max);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.esb-trust__item {
	display: grid;
	justify-items: center;
	gap: var(--space-1);
	text-align: center;
}

.esb-trust__icon svg {
	width: 28px;
	height: 28px;
	color: var(--esb-dark-ink);
	opacity: 0.85;
}

.esb-trust__item strong {
	font-size: 1.02rem;
	color: var(--color-text-inverse);
}

.esb-trust__item > span:last-child {
	font-size: 0.9em;
	opacity: 0.75;
}

/* ============================================================
 * Responsive + motion preferences
 * ============================================================ */

/* Responsive ladder:
 *   1100px : benefits 3 -> 2
 *    940px : trust badges 4 -> 2 (below this a fixed 4-up gets too tight
 *            for "Made in Germany" over "Qualität aus Deutschland")
 *    833px : hero and in-use stack, section padding drops. The card grids
 *            deliberately do NOT collapse here, that is what made a 768px
 *            portrait tablet render the six benefit cards one per row.
 *    640px : phone, every grid goes single column.
 */
@media (max-width: 1100px) {
	.esb-benefits__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 940px) {
	.esb-trust__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 833px) {
	.esb section {
		/* Block only. This used to tighten the INLINE gutter to 16px as
		 * well, the one rule in the theme that went under 22px, so on
		 * phones this page's headline sat closer to the edge than the
		 * site logo directly above it. */
		padding-block: var(--space-7);
	}

	.esb-hero__inner,
	.esb-inuse__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.esb-hero__media {
		order: -1;
	}

	/* One column: no bleed, or the section clip would crop the product. */
	.esb-hero__media img {
		width: 100%;
		max-width: 100%;
	}
}

/* ============================================================
 * Phone, 640px. Declared AFTER the 1100px and 940px blocks so the
 * narrower query wins on source order at equal specificity.
 *
 * .esb-steps__list and .esb-stats__row keep their fixed 3-up all the
 * way down to here: three numbered steps split 2/1 would strand the
 * last step, and the three stat pairs ("IP67" / "Wasserdicht") are
 * short enough to hold a 226px column at 768px.
 *
 * .esb-form__row (Vorname / Nachname) is bounded by .esb-form's own
 * 640px max-width, not by the viewport, so above this step the two
 * fields always had ~284px each. Collapsing it at 833px was stacking
 * two name fields that had plenty of room.
 * ============================================================ */

@media (max-width: 640px) {
	.esb-benefits__grid,
	.esb-steps__list,
	.esb-stats__row,
	.esb-form__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The trust strip keeps two badges per row further down than the card
 * grids: its items are short labels, not cards, and one per row across the
 * whole 454 to 640px band wasted the width. */
@media (max-width: 480px) {
	.esb-trust__row {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.esb-button,
	.esb-link,
	.esb-link > span + span {
		transition: none;
	}

	.esb-button:active {
		transform: none;
	}

	.esb-link:hover > span + span,
	.esb-link:focus-visible > span + span {
		transform: none;
	}
}

/* ============================================================
 * In-use video: privacy-first click-to-load embed.
 *
 * The poster is a pure CSS wash on the page's own --esb-* tokens
 * (no hotlinked YouTube thumbnail; that would be a pre-consent
 * request). The inline script in page-emoswitch-blue.php swaps
 * the poster for the youtube-nocookie iframe on click; mirrors
 * the 3D slide's poster affordance (product-3d.css).
 * ============================================================ */

.esb-video {
	position: relative;
	aspect-ratio: 16 / 9;
}

.esb-video__poster {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	width: 100%;
	border: 0;
	padding: var(--space-5);
	background: linear-gradient(160deg, var(--esb-tint) 0%, var(--esb-tint-strong) 100%);
	font: inherit;
	cursor: pointer;
	transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

.esb-video__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-control);
	background: var(--esb-accent);
	color: var(--esb-accent-ink);
	transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.esb-video__play svg {
	width: 30px;
	height: 30px;
}

.esb-video__poster:hover .esb-video__play,
.esb-video__poster:focus-visible .esb-video__play {
	transform: scale(1.06);
}

.esb-video__poster:focus-visible {
	outline: 2px solid var(--esb-accent);
	outline-offset: 2px;
}

/* Pointer-down feedback under 100ms; release keeps the slower ease. */
.esb-video__poster:active {
	opacity: 0.7;
	transition-duration: var(--motion-duration-press);
}

.esb-video__label {
	font-weight: 600;
	/* Deep accent, not plain accent: same AA reasoning as the hero badge. */
	color: var(--esb-accent-deep);
}

.esb-video__privacy {
	max-width: 34em;
	font-size: var(--font-size-14);
	color: var(--color-text-secondary);
}

.esb-video__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.esb-video__poster,
	.esb-video__play {
		transition: none;
	}

	/* The play-disc zoom is decorative; the opacity press stays as the
	 * comprehension feedback spec section 7 keeps. */
	.esb-video__poster:hover .esb-video__play,
	.esb-video__poster:focus-visible .esb-video__play {
		transform: none;
	}
}