/* ============================================================
   BEEVOICE — f-offer.php stylesheet
   Clean 2026 build: semantic HTML, fluid clamp() type, design
   tokens, no Bootstrap/jQuery. Visual spec mirrors ClipBee's
   f-offer page (sizes ported from its breakpoint ladder into
   fluid scales), re-skinned to the BeeVoice purple palette.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
	/* Page-wide gutter: the FAQ box's edge (96.25% of a padded
	   container-fluid). Every inset box aligns to the same edges. */
	--gutter: 1.875vw;
	--bv-black: #0d0618;
	--bv-deep: #1a0b2e;
	--violet-700: #3B1178;
	--violet-600: #4C1D95;
	--violet-500: #6D28D9;
	--violet-400: #8B5CF6;
	--violet-300: #A78BFA;
	--lavender: #DDD6FE;

	/* Action ramp: buttons and large type. White on the lightest stop
	   is 4.18:1, above the 3:1 large-text floor. */
	--grad-action: linear-gradient(180deg, var(--violet-600) 0%, var(--violet-500) 51%, var(--violet-400) 100%);
	/* Badge ramp: small white labels. Stops a step earlier so the
	   lightest stop still carries white at 7.2:1. */
	--grad-badge: linear-gradient(180deg, var(--violet-700) 0%, var(--violet-600) 55%, var(--violet-500) 100%);

	--text-hi: #EDE7FB;      /* bright, just under white */
	--text-body: #ADA0C4;    /* card body copy */
	--text-cue: #D2C6EF;

	/* Offer colours — warm amber reads as "value" and sits opposite violet on
	   the wheel, so it pops without the traffic-light clash green had.
	   Swap these two to restyle the whole offer block. */
	/* The price line on white: violet-500 is the page's accent step and
	   carries 7.1:1 there, where violet-700 read as near-black. */
	--offer-accent: var(--violet-500);
	--offer-alert: #DC2626;    /* accessible urgency red for the discount */
	/* The one warm note on a violet page, sampled from the pointing-hand
	   emoji in the cue right below the headline so the two read as the
	   same accent rather than two unrelated yellows. Carries 4.6:1 over
	   the brightest part of the banner art and 10.2:1 over its median. */
	--alive-gold: #FFC83D;
	--seal-green: #07966a;     /* CTA check seals and the Play step */

	--green: #57e389;
	--red: #ff5d5d;

	--font-display: "Outfit", sans-serif;
	--font-cta: "Zalando Sans SemiExpanded", sans-serif;

	/* Fluid type — endpoints match ClipBee's 375px → 1700px ladder */
	--fs-headline: clamp(1.75rem, 0.66rem + 4.65vw, 5.0625rem);   /* 28 → 81 */
	--fs-headline-span: clamp(2.25rem, 1.71rem + 2.28vw, 4.0625rem); /* 36 → 65 */
	--fs-headline-big: clamp(2.625rem, 2.01rem + 2.6vw, 4.6875rem);  /* 42 → 75 */
	--fs-cta-h4: clamp(1.25rem, 1.14rem + 0.47vw, 1.625rem);      /* 20 → 26 */
	--fs-price: clamp(1.5625rem, 1.29rem + 1.18vw, 2.5rem);        /* 25 → 40 */
	--fs-cta-h3: clamp(1.375rem, 1.26rem + 0.47vw, 1.75rem);       /* 22 → 28 */
	--fs-button: clamp(1.625rem, 1.42rem + 0.87vw, 2.3125rem);     /* 26 → 37 */
	--fs-card: clamp(1rem, 0.93rem + 0.31vw, 1.25rem);             /* 16 → 20 */

	--ease-lift: cubic-bezier(0.22, 1, 0.36, 1);

	/* Shared content width: the video and the cards below it stay aligned. */
	--content-w: min(94%, 1140px);

	color-scheme: light;
}

/* Visually hidden, still read: for text that a logo or icon stands in
   for on screen. Standard clip pattern. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	/* Page ground is WHITE — the hero's translucent bottom edge melts into it,
	   and the sections that follow sit on white (ClipBee pattern). */
	background-color: #fff;
	color: #1B1033;
	font-family: var(--font-display);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }
video { max-width: 100%; height: auto; }

::selection { background: var(--violet-600); color: #fff; }

/* Browser chrome themed from the palette rather than left default. */
html { caret-color: var(--violet-500); scrollbar-color: var(--violet-600) #EDE9F6; }
@supports not (scrollbar-color: auto) {
	::-webkit-scrollbar { width: 12px; height: 12px; }
	::-webkit-scrollbar-track { background: #EDE9F6; }
	::-webkit-scrollbar-thumb { background: var(--violet-600); border-radius: 8px; border: 3px solid #EDE9F6; }
	::-webkit-scrollbar-thumb:hover { background: var(--violet-700); }
}

:focus-visible {
	/* Light ring + dark halo: the ring carries on dark grounds, the
	   halo carries on white ones, so one rule covers both. */
	outline: 2px solid var(--violet-300);
	outline-offset: 3px;
	border-radius: 4px;
	box-shadow: 0 0 0 5px rgba(27, 16, 51, 0.55);
}

.wrap {
	width: min(100% - 2rem, 1320px);
	margin-inline: auto;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
	/* banner.webp is flattened opaque: its bottom quarter bakes to pure
	   white, dissolving seamlessly into the white page below. */
	background-color: var(--bv-black);
	background-image: var(--hero-bg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	color: var(--text-hi);
	/* ClipBee used 19% bottom padding so section2 could overlap with a
	   negative margin. Our next section does not overlap, so keep a
	   modest close-out under the CTA instead of a width-relative void.
	   The audience badge straddles that section's top edge and eats
	   ~21px of this gap, so the padding buys the clearance twice.
	   The CTA's white panel reads this same value to reach the bottom
	   edge, so the two can never drift apart and expose the banner. */
	--hero-close: clamp(64px, 7vw, 112px);
	padding: clamp(14px, 2vw, 30px) 0 var(--hero-close);
	overflow: hidden;
}

.hero__inner { text-align: center; }

.hero__logo {
	width: clamp(160px, 17vw, 244px);
	margin: 0 auto clamp(12px, 1.4vw, 20px);
	display: block;
	opacity: 0.96;
	filter: drop-shadow(0 4px 26px rgba(109, 40, 217, 0.4));
}

/* ---------- Headline (single h1, three visual lines) ---------- */
.hero__headline {
	margin: 0;
	font-size: var(--fs-headline);
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 1.2;
	color: var(--text-hi);
}

.hero__headline > span { display: block; }

.hl-setup {
	font-size: var(--fs-headline-span);
	font-weight: 400;
	letter-spacing: 0;
}

.hl-pill {
	display: inline-block;
	font-weight: 400;
	letter-spacing: 0;
	padding: 3px clamp(12px, 1.6vw, 26px);
	border: 1px solid rgb(192 132 252 / 22%);
	border-radius: clamp(12px, 1.6vw, 26px);
	background-image: var(--headline-pill-bg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
}

.hl-payoff {
	font-size: var(--fs-headline-span);
	font-weight: 700;
	letter-spacing: 0;
}

/* The headline's one payoff word. White made it the same material as the
   two lines above it, so the biggest type on the page was carrying the
   emphasis alone; the gold gives it its own register and picks up the
   cue's hand directly underneath. */
.hl-payoff strong {
	font-size: var(--fs-headline-big);
	font-weight: 800;
	letter-spacing: 2px;
	color: var(--alive-gold);
}

/* ---------- Live equaliser pill ---------- */
.eq-pill {
	display: inline-block;
	vertical-align: baseline;
	width: clamp(35px, 5.7vw, 97px);
	aspect-ratio: 97 / 55;
	border: 1px solid rgba(221, 214, 254, 0.85);
	border-radius: 27px;
	overflow: hidden;
	background: radial-gradient(90% 130% at 50% 130%, #280A5E 0%, #16091f 70%);
	box-shadow: 0 0 20px rgba(139, 92, 246, 0.45), inset 0 0 16px rgba(109, 40, 217, 0.28);
}

.pill-face {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	animation: face-breathe 6s ease-in-out infinite alternate;
	transform-origin: 50% 45%;
	will-change: transform;
}

/* A slow, barely-perceptible push-in keeps the still photo feeling live. */
@keyframes face-breathe {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
	.pill-face { animation: none; }
}

/* ---------- Video cue eyebrow ---------- */
.hero__cue {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 13px;
	margin: clamp(22px, 2.4vw, 34px) 0 0;
}

.cue-label {
	display: inline-flex;
	align-items: center;
	gap: clamp(12px, 1.6vw, 20px);
	font-size: clamp(11px, 1.02vw, 15px);
	font-weight: 600;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--text-cue);
	white-space: nowrap;
}

.cue-label::before,
.cue-label::after {
	content: "";
	height: 1px;
	width: clamp(26px, 5.4vw, 70px);
	background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.6));
}
.cue-label::after { background: linear-gradient(90deg, rgba(167, 139, 250, 0.6), transparent); }

/* At phone widths the nowrap label plus its two flanking rules measured wider
   than the viewport, so both rules and the emoji were cut off at the edges.
   The rules are decoration, so they go; the tracking eases just enough for
   the line to sit inside the screen with room to spare. */
@media (max-width: 560px) {
	.cue-label::before,
	.cue-label::after { display: none; }

	.cue-label {
		letter-spacing: 0.13em;
		gap: 10px;
		max-width: 100%;
	}

	.hero__cue { padding-inline: 12px; }
}

/* The 👇 emoji flanking the cue, bobbing at the video below. Rendered by
   the platform emoji face (the page loads no emoji webfont), so it keeps
   its own colour: no colour token applies here. */
.cue-down {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	font-size: clamp(16px, 1.4vw, 21px);
	line-height: 1;
	animation: cue-nudge 1.6s ease-in-out infinite;
}

@keyframes cue-nudge {
	0%, 100% { transform: translateY(-3px); }
	50% { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
	.cue-down { animation: none; transform: none; }
}

/* ---------- Video ---------- */
.hero__video {
	width: var(--content-w);
	margin: clamp(20px, 2.5vw, 40px) auto 0;
	position: relative;
	z-index: 1;
	background-color: #fff;
	border-radius: clamp(12px, 2.4vw, 46px);
	padding: 3px;
	box-shadow: 0 43px 38px 0 rgba(9, 0, 24, 0.5);
}

.hero__video-inner {
	border-radius: inherit;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.hero__video iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ---------- Vimeo unmute overlay ----------
   vimeo-unmute.js injects its own styles with ClipBee's yellow (#ffd21d).
   Re-skinned to BeeVoice violet here rather than forking the shared script. */
.vimeo-unmute-overlay { animation: bv-unmute-pulse 2.4s ease-out infinite !important; }
.vimeo-unmute-overlay:focus-visible { outline-color: var(--violet-300) !important; }

/* Identical to the script's own pulse, with the gold ring swapped for violet. */
@keyframes bv-unmute-pulse {
	0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(139, 92, 246, 0.55); }
	50%      { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 12px rgba(139, 92, 246, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.vimeo-unmute-overlay { animation: none !important; }
}

/* ---------- Feature point cards ---------- */
.hero__points {
	list-style: none;
	width: var(--content-w);
	margin: clamp(24px, 3vw, 48px) auto 0;
	padding: 0;
	/* 6 tracks, each card spanning 2 = a 3-up grid, but the half-column
	   offset needed to centre the final row of 2 becomes possible. */
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 18px;
	text-align: left;
}

.point-card { grid-column: span 2; }

/* Last row holds 2 of 3 — shift them inward so the pair sits centred. */
.point-card:nth-child(7) { grid-column: 2 / span 2; }
.point-card:nth-child(8) { grid-column: 4 / span 2; }

.point-card {
	background-color: #0b0614;
	background-image: radial-gradient(120% 90% at 85% 110%, rgba(109, 40, 217, 0.38) 0%, rgba(59, 17, 120, 0.14) 45%, rgba(11, 6, 20, 0) 75%);
	border: 1px solid rgba(109, 40, 217, 0.16);
	border-radius: 30px;
	/* Layered elevation — tight contact shadow through to soft ambient
	   spread, so the cards sit ON the purple rather than float above it. */
	box-shadow:
		0 1px 2px rgba(14, 8, 26, 0.20),
		0 4px 8px rgba(14, 8, 26, 0.16),
		0 10px 20px rgba(14, 8, 26, 0.16),
		0 22px 42px rgba(14, 8, 26, 0.18);
	/* Sides trimmed from 28px: the titles are sized to the exact card
	   width below, and those 12px go straight into type size. */
	padding: 30px 22px 32px;
}

/* One line, always, as large as that allows. The scale is fitted to the
   longest title ("Generate Custom AI Sound Effects") measured against
   the card's inner width at 375/993/1100/1764px, then backed off ~2%;
   the ends bind (one-column phones and the full 3-up desktop), the
   middle widths have headroom to spare. Resizing this means remeasuring,
   not eyeballing: nowrap turns any overflow into clipping. */
.point-card__title {
	margin: 16px 0 0;
	font-size: clamp(1.156rem, 1.111rem + 0.195vw, 1.325rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: #fff;
	white-space: nowrap;
}

.point-card p {
	margin: 8px 0 0;
	font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
	font-weight: 300;
	line-height: 1.45;
	color: var(--text-body);
	text-wrap: pretty;
}

/* The card's one key phrase: a weight jump plus a half-step lift toward
   the title's white, so it reads as emphasis rather than a link. */
.point-card p strong {
	font-weight: 600;
	color: #D9CFEA;
}

/* Phosphor icons — house icon set. Gradient fill via text clip. */
.icon-ph {
	font-size: 36px;
	line-height: 1;
	display: inline-block;
	background-image: linear-gradient(135deg, var(--violet-300) 0%, var(--violet-500) 55%, var(--violet-600) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- CTA block ----------
   The v2 backgrounds fade to near-white at the bottom, so the CTA
   runs dark-on-light. --cta-ink tokens keep it flippable if a dark-
   footed background ever comes back. */
.hero__cta {
	--cta-ink: #1B1033;
	--cta-ink-soft: #382758;
	margin-top: clamp(28px, 3.4vw, 52px);
	position: relative;
	isolation: isolate;
}

/* The banner's white fade is baked into the image, so `cover` crops it away
   on wide viewports (at 2400px the whole fade lands below the hero) and the
   dark CTA ink ends up on saturated violet at ~1.1:1. This full-bleed panel
   guarantees the light ground under the offer at every width; where the image
   is already white it is simply invisible. */
.hero__cta::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -90px;
	/* Reach the hero's own bottom edge, whatever the close-out is. */
	bottom: calc(-1 * var(--hero-close) - 2px);
	left: calc(50% - 50vw);
	width: 100vw;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 28%, #ffffff 100%);
	pointer-events: none;
}

.hero__cta h4 {
	margin: 0;
	font-size: var(--fs-cta-h4);
	font-weight: 400;
	line-height: 1.4;
	color: var(--cta-ink-soft);
}

.cta-checks {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.cta-checks span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-cta-h4);
	font-weight: 500;
	border-radius: 50px;
	background-color: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(28, 15, 51, 0.18);
	color: var(--cta-ink);
	padding: 3px 14px;
}

.check-ph {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: 999px;
	background: var(--seal-green);
	box-shadow: none;
	font-size: 0.9em;
	color: #fff;
}

.cta-discount {
	display: inline-block;
	margin-top: 22px;
	font-size: var(--fs-cta-h4);
	border: 1px dashed rgba(28, 15, 51, 0.4);
	border-radius: 10px;
	padding: 1px 20px;
	color: var(--cta-ink-soft);
}
.cta-discount strong { color: var(--offer-alert); font-weight: 700; }

.cta-price {
	margin: 12px 0 0;
	font-size: var(--fs-price);
	font-weight: 700;
	line-height: 1.2;
	color: var(--offer-accent);
}

.cta-sub {
	margin: 8px 0 0;
	font-size: var(--fs-cta-h3);
	font-weight: 700;
	line-height: 1.2;
	color: var(--cta-ink);
}

.cta-button {
	display: table;
	margin: 20px auto 0;
	font-family: var(--font-cta);
	font-size: var(--fs-button);
	font-weight: 600;
	letter-spacing: -1.75px;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	padding: clamp(14px, 2vw, 29px) clamp(24px, 4.2vw, 60px);
	border-radius: clamp(12px, 1.5vw, 22px);
	background-image: var(--grad-action);
	/* Layered neutral-grey elevation: each step roughly doubles blur and
	   offset so the falloff reads like real light, not a single blurry halo. */
	box-shadow:
		0 1px 2px rgba(17, 15, 26, 0.10),
		0 3px 6px rgba(17, 15, 26, 0.09),
		0 8px 16px rgba(17, 15, 26, 0.10),
		0 18px 34px rgba(17, 15, 26, 0.12);
	transition: transform 0.28s var(--ease-lift), box-shadow 0.28s var(--ease-lift), background-image 0.28s ease;
}

.cta-button:hover {
	background-image: linear-gradient(180deg, var(--violet-500) 0%, var(--violet-400) 51%, var(--violet-300) 100%);
	transform: translateY(-2px);
	box-shadow:
		0 2px 4px rgba(17, 15, 26, 0.10),
		0 6px 12px rgba(17, 15, 26, 0.10),
		0 14px 26px rgba(17, 15, 26, 0.11),
		0 28px 52px rgba(17, 15, 26, 0.14);
	text-decoration: none;
}

.cta-button:active {
	transform: translateY(0);
	box-shadow:
		0 1px 2px rgba(17, 15, 26, 0.12),
		0 2px 5px rgba(17, 15, 26, 0.10);
}

.arrow-ph { font-size: 0.82em; vertical-align: middle; position: relative; top: -2px; margin-left: 8px; }

.cta-payment {
	width: min(341px, 80%);
	margin: 18px auto 0;
	display: block;
}

/* ============================================================
   AUDIENCE — SIX CREATIVE CHANNELS (PRO STUDIO SHOWCASE)
   Balanced 3-column studio rack grid with equal card weighting,
   obsidian glass depth, and high-impact hero audio transport.
   ============================================================ */
.audience {
	position: relative;
	margin-inline: var(--gutter);
	--audience-radius: clamp(24px, 2.8vw, 44px);
	border-radius: var(--audience-radius);
	/* Visible: the badge straddles this edge. Everything else that reaches
	   an edge rounds itself, since nothing is clipped here. */
	overflow: visible;
	isolation: isolate;
	color: var(--text-hi);
	background:
		radial-gradient(110% 80% at 50% -10%, rgba(88, 28, 135, 0.35) 0%, rgba(13, 6, 24, 0.95) 60%, #090312 100%),
		linear-gradient(180deg, #130826 0%, #0a0414 100%);
	border: 1px solid rgba(139, 92, 246, 0.18);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
	padding: clamp(46px, 4vw, 66px) 0 clamp(80px, 7vw, 115px);
}

/* Soft ambient violet illumination behind the rack */
.audience::before {
	content: "";
	position: absolute;
	inset: 18% 12% auto;
	height: 64%;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.18), rgba(76, 29, 149, 0.05) 50%, transparent 72%);
	filter: blur(44px);
	pointer-events: none;
	z-index: 0;
}

.audience::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120px;
	background: linear-gradient(0deg, #090312 0%, transparent 100%);
	border-radius: 0 0 var(--audience-radius) var(--audience-radius);
	pointer-events: none;
	z-index: 0;
}

/* Subtle architectural honeycomb clusters on the flanks */
.audience-honeycomb {
	position: absolute;
	z-index: 0;
	width: clamp(280px, 26vw, 420px);
	aspect-ratio: 1.28;
	pointer-events: none;
	opacity: 0.55;
	filter: drop-shadow(0 0 20px rgba(109, 40, 217, 0.18));
	overflow: hidden;
	-webkit-mask-image: radial-gradient(ellipse at center, #000 28%, rgba(0, 0, 0, 0.9) 58%, transparent 92%);
	mask-image: radial-gradient(ellipse at center, #000 28%, rgba(0, 0, 0, 0.9) 58%, transparent 92%);
}

.audience-honeycomb--left {
	top: 4%;
	left: clamp(20px, 2.5vw, 48px);
	transform: rotate(-6deg);
}

.audience-honeycomb--right {
	top: 6%;
	right: clamp(20px, 2.5vw, 48px);
	transform: rotate(8deg) scale(0.94);
}

.audience-honeycomb i {
	--hex-line: rgba(139, 92, 246, 0.44);
	position: absolute;
	width: 31%;
	aspect-ratio: 1.1547;
	clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
	background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), var(--hex-line) 44%, rgba(217, 70, 239, 0.15));
}

.audience-honeycomb i::after {
	content: "";
	position: absolute;
	inset: 2px;
	clip-path: inherit;
	background: #110720;
}

.audience-honeycomb i:nth-child(1) { left: 1%;  top: 34%; opacity: 0.5; }
.audience-honeycomb i:nth-child(2) { left: 24%; top: 8%;  opacity: 0.72; }
.audience-honeycomb i:nth-child(3) { left: 24%; top: 60%; opacity: 0.4; }
.audience-honeycomb i:nth-child(4) { left: 47%; top: 34%; opacity: 0.82; }
.audience-honeycomb i:nth-child(5) { left: 70%; top: 8%;  opacity: 0.44; }
.audience-honeycomb i:nth-child(6) { left: 70%; top: 60%; opacity: 0.65; }
.audience-honeycomb i:nth-child(7) { left: 93%; top: 34%; opacity: 0.3; }

.audience__wrap {
	position: relative;
	z-index: 1;
	width: min(100% - 2.5rem, 1260px);
	margin-inline: auto;
}

/* ---------- Section header ---------- */
/* Uncapped so the title can use the card grid's full width for its one
   line; the lede carries its own 42rem measure, so it loses nothing. */
.audience__header {
	margin-inline: auto;
	padding-top: clamp(16px, 1.6vw, 24px);
	text-align: center;
}

/* Badge pill — illuminated top seal */
.audience__badge {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 50%;
	display: inline-block;
	margin: 0;
	padding: 13px 36px;
	transform: translate(-50%, -50%);
	border-radius: 26px 26px 26px 12px;
	letter-spacing: -0.26px;
	background: var(--violet-500);
	font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.32rem);
	font-weight: 700;
	color: #fff;
	box-shadow: 0 18px 18px 0 rgba(76, 29, 149, 0.25);
	white-space: nowrap;
}


.audience__header h2 {
	margin: 0;
	font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.6rem);
	font-weight: 750;
	line-height: 1.1;
	letter-spacing: -0.035em;
	color: #fff;
	text-wrap: balance;
}

.audience__highlight {
	position: relative;
	display: inline-block;
}

/* Match the curved violet underline used on the PRO page. */
.audience__stroke {
	position: absolute;
	left: -1%;
	bottom: -0.16em;
	width: 102%;
	height: 0.25em;
	overflow: visible;
	pointer-events: none;
	filter: drop-shadow(0 3px 6px rgba(139, 92, 246, 0.32));
}

.audience__header h2 em {
	font-style: italic;
	font-weight: 500;
	color: var(--alive-gold);
	text-shadow: none;
}

/* One line from 640px up. The scale is fitted to this exact string,
   measured against the available width at 640/768/900/993/1200px and
   backed off ~3%, so rewording the title means remeasuring: nowrap
   turns an overflow into a page-wide horizontal scrollbar, not a wrap.
   Below 640px one line would put the h2 at 19px, under its own lede,
   so the phone keeps the wrapping two-line setting. */
@media (min-width: 640px) {
	.audience__header h2 {
		font-size: clamp(2.05rem, 0.2875rem + 4.42vw, 3.6rem);
		white-space: nowrap;
	}
}

.audience__lede {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(14px, 1.2vw, 18px);
	margin: clamp(24px, 2vw, 28px) auto 0;
	max-width: 42rem;
	font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem);
	font-weight: 300;
	line-height: 1.55;
	color: var(--text-body);
	text-wrap: pretty;
}

.audience__lede > span {
	display: block;
	font-size: 0.98em;
	color: rgba(221, 214, 254, 0.85);
}

.audience__lede .audience__brand {
	font-weight: 700;
	color: #fff;
}

.audience__lede strong {
	display: block;
	margin: 0;
	line-height: 1.3;
	font-size: 1.1em;
	font-weight: 650;
	letter-spacing: -0.015em;
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.audience__studio {
	display: inline-block;
	vertical-align: top;
	max-width: 100%;
	padding: 0.25em 0.6em 0.3em;
	border: 1px solid rgba(255, 237, 179, 0.65);
	border-radius: 0.4em;
	background: linear-gradient(180deg, #ffda72 0%, var(--alive-gold) 100%);
	color: #241039;
	font-weight: 750;
	line-height: 1.3;
	text-shadow: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* ---------- Balanced Studio Rack Grid (6 Cards, Equal Size) ---------- */
.audience-cards {
	list-style: none;
	margin: clamp(36px, 4vw, 52px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

/* Pro studio card on the channel's own tint. */
.audience-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
	padding: clamp(22px, 2vw, 28px);
	border-radius: 20px;
	overflow: hidden;
	isolation: isolate;
	color: #fff;
	background: var(--card-tint);
	box-shadow:
		0 1px 2px rgba(10, 4, 20, 0.25),
		0 6px 14px rgba(10, 4, 20, 0.22),
		0 18px 38px rgba(10, 4, 20, 0.26);
}

/* Same object family as the FEEL sound cards: the clip sits snug inside
   a thin band of tint, so the card frames the evidence. The tint padding
   is tight around the media and widens for the text below it. */
.audience-cards .audience-card {
	padding: 10px 10px 16px;
}

.audience-card__media {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	background: #0b0614;
	/* The picture is the biggest thing on the card, so it is what people
	   aim at. It forwards the click to the pill below (audience-player.js)
	   rather than owning any state of its own. */
	cursor: pointer;
}

/* The affordance for that click. It reports state rather than naming an
   action: the clip is already moving, so a play triangle would be a lie —
   a muted speaker is what every autoplaying feed uses to mean "tap for
   sound". Solid enough to be findable on a touch screen with no hover to
   reveal it, faint enough not to compete with the frame underneath. It
   clears out once sound is on and the waveform takes the job over. */
.audience-card__cue {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: clamp(44px, 3.4vw, 54px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(11, 6, 20, 0.46);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: clamp(18px, 1.4vw, 22px);
	line-height: 1;
	opacity: 0.82;
	/* The media below it is the click target; the disc must never swallow
	   the event or eat the cursor. */
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s var(--ease-lift);
}

@media (hover: hover) {
	.audience-card__media:hover .audience-card__cue {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.08);
	}
}

/* Keyboard parity: tabbing to the pill lights the same disc a pointer would. */
.audience-card:focus-within .audience-card__cue { opacity: 1; }

.audience-card.is-playing .audience-card__cue {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.86);
}

/* The headline's dark frosted glass, scaled down for video attribution. */
.audience-card__badge {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 2;
	padding: 6px 10px;
	border: 1px solid rgba(192, 132, 252, .26);
	border-radius: 9px;
	background-color: rgba(19, 11, 32, .72);
	background-image: linear-gradient(180deg, rgba(221, 214, 254, .025), rgba(167, 139, 250, .045));
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	box-shadow: inset 0 1px 0 rgba(237, 233, 254, .04), 0 3px 10px rgba(11, 6, 20, .16);
	color: #ede9fe;
	font-family: var(--font-cta);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.3;
	white-space: nowrap;
	pointer-events: none;
}
.audience-card__badge b { font-weight: 650; }

.audience-card__video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.audience-cards .audience-play .ph-speaker-slash,
.audience-cards .is-playing .audience-play .ph-speaker-high { display: none; }
.audience-cards .is-playing .audience-play .ph-speaker-slash { display: block; }

.audience-cards .audience-card__header {
	padding-inline: 10px;
}

/* Identity icon beside the title rather than the watermark it used to be
   behind the copy: the video owns the card's picture now, so the glyph
   goes back to doing the one job it is good at, naming the channel. */
.audience-cards .audience-card__header {
	margin-top: 14px;
	display: flex;
	align-items: center;
	gap: clamp(10px, 0.85vw, 14px);
	margin-bottom: 18px;
}

.audience-card__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: clamp(40px, 3vw, 48px);
	aspect-ratio: 1;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.15);
	font-size: clamp(21px, 1.6vw, 26px);
	line-height: 1;
	color: #fff;
}

.audience-card__heading { min-width: 0; }

/* Header: category label + title */
.audience-card__header {
	position: relative;
	z-index: 2;
	min-width: 0;
}

.audience-card__tag {
	display: block;
	font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.8rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* Small uppercase: needs the full 4.5:1 on every tint in the ramp. */
	color: rgba(255, 255, 255, 0.88);
	line-height: 1;
	margin-bottom: 5px;
}

.audience-card h3 {
	margin: 0;
	font-size: clamp(1.15rem, 1.05rem + 0.3vw, 1.35rem);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: #fff;
	text-wrap: balance;
}

/* The card's name, and it was set barely above the body copy under it.
   Up a third, with the tracking tightened a step so the extra size does
   not cost a line. */
.audience-cards .audience-card h3 {
	font-size: clamp(1.35rem, 1.16rem + 0.55vw, 1.8rem);
	line-height: 1.14;
	letter-spacing: -0.03em;
}

/* Fit the longest channel name to its available space beside the icon. */
.audience-card--animators .audience-card__heading {
	flex: 1;
	container-type: inline-size;
}
.audience-cards .audience-card--animators h3 {
	font-size: min(1.65rem, 8.4cqi);
	white-space: nowrap;
}

/* ---------- EMPHASIZED HERO AUDIO DECK ---------- */
.audience-card__deck {
	position: relative;
	z-index: 2;
	/* Stays auto so every deck in a row sits on the same baseline even
	   when one card's title wraps; the clearance the body copy used to
	   supply now comes off the header's margin-bottom. */
	margin-top: auto;
	padding: 12px 14px;
	border-radius: 16px;
	background: rgba(10, 4, 20, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.14);
	/* One row, FEEL-deck style: pill left, waveform filling the rest.
	   The pill keeps its natural width now that the timecode moved into
	   the track column instead of fighting for the same line. */
	display: flex;
	align-items: center;
	gap: 12px;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.audience-card__deck .audience-play--labelled {
	flex: none;
	padding: 7px 14px 7px 7px;
}

.audience-card.is-playing .audience-card__deck {
	background: rgba(10, 4, 20, 0.55);
	border-color: rgba(255, 255, 255, 0.18);
}

/* HERO PLAY BUTTON (Large, High Contrast, Tactile Studio Focal Point) */
.audience-play {
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #3B1178;
	cursor: pointer;
	padding: 0;
	/* The shared deck contract: direct cards lay this out by name. */
	grid-area: play;
	box-shadow: 0 3px 10px rgba(10, 4, 20, 0.3);
	transition: transform 0.2s ease;
}

.audience-play:active {
	transform: scale(0.96);
}

.audience-play i {
	font-size: 1.3rem;
	line-height: 1;
	grid-area: 1 / 1;
}

.audience-play .ph-play {
	margin-right: 0.09em;
}

.audience-play .ph-pause {
	display: none;
}

.audience-card.is-playing .audience-play {
	color: #4C1D95;
}

.audience-card.is-playing .audience-play .ph-play {
	display: none;
}

.audience-card.is-playing .audience-play .ph-pause {
	display: block;
}

/* Track & Waveform Area */
.audience-card__track {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.audience-wave-wrap {
	width: 100%;
}

.audience-wave {
	grid-area: wave;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.5px;
	height: 28px;
	cursor: pointer;
	padding: 2px 0;
}

.audience-wave span {
	position: relative;
	flex: 1 1 0;
	min-width: 2px;
	max-width: 3.5px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.34);
	height: calc(var(--h, 0.5) * 100%);
	transform-origin: center;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.audience-wave:hover span {
	background: rgba(255, 255, 255, 0.55);
}

.audience-card.is-playing .audience-wave span {
	background: rgba(255, 255, 255, 0.9);
	animation: audience-eq 0.55s ease-in-out infinite alternate;
	animation-delay: calc(var(--i) * 0.045s);
}

@keyframes audience-eq {
	from { transform: scaleY(0.65); }
	to   { transform: scaleY(1.2); }
}

/* Track Meta: Status Dot + Timecode */
/* Only the timestamp lives here now; the "Audio Performance" status label and
   its dot were removed. */
.audience-card__track-meta {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	line-height: 1;
}

.audience-time {
	grid-area: time;
	font-size: clamp(0.75rem, 0.72rem + 0.1vw, 0.8rem);
	font-weight: 600;
	letter-spacing: 0.03em;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, 0.75);
	white-space: nowrap;
}

/* ============================================================
   START — first voiceover
   White mist after the dark sample deck. The three steps are
   typesetting, not a feature-card row: ink → brand → play.
   ============================================================ */
.start {
	position: relative;
	/* Inset panel matching .audience — same gutters, same radius, so the two
	   sections read as a stack of cards on the white page. The base is tinted
	   off pure white, otherwise the rounded corners would be invisible. */
	margin: clamp(14px, 1.6vw, 26px) var(--gutter) 0;
	border-radius: clamp(20px, 2.4vw, 40px);
	overflow: hidden;
	background:
		radial-gradient(72% 58% at 50% -10%, rgba(221, 214, 254, 0.55), transparent 64%),
		radial-gradient(40% 36% at 92% 8%, rgba(187, 170, 247, 0.22), transparent 70%),
		#FAF7FE;
	padding: clamp(72px, 7vw, 112px) 0 clamp(80px, 7.5vw, 120px);
	color: #1B1033;
}

.start__wrap {
	width: min(100% - 2rem, 1080px);
	margin-inline: auto;
	text-align: center;
}

.start__title {
	margin: 0 auto;
	/* ~26ch balances the sentence onto two lines instead of three. */
	max-width: 26ch;
	font-family: var(--font-cta);
	font-size: clamp(1.85rem, 1.05rem + 2.7vw, 3.25rem);
	font-weight: 750;
	line-height: 1.12;
	letter-spacing: -0.035em;
	color: #1B1033;
	text-wrap: balance;
}

.start__mark {
	position: relative;
	display: inline;
	white-space: nowrap;
}

.start__mark svg {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.18em;
	width: 100%;
	height: 0.38em;
	overflow: visible;
	pointer-events: none;
}

.start__mark path {
	fill: none;
	stroke: url(#bv-mark-grad);
	stroke-width: 7;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.start__lead {
	max-width: 64rem;
	margin: clamp(22px, 2.3vw, 32px) auto 0;
	text-align: center;
}

.start__lead-intro {
	margin: 0;
	font-size: clamp(0.85rem, 0.8rem + 0.2vw, 1rem);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* A step darker than the old #6F6088: at this size the caption was
	   sitting on the legibility floor rather than leading the list. */
	color: #5B4C7A;
}

.start__qualities {
	list-style: none;
	/* Bound to the caption above it. */
	margin: 12px auto 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 0;
	/* Wrapped lines of 33px type need more than a hairline between them. */
	row-gap: 10px;
	max-width: none;
}

@media (min-width: 900px) {
	.start__qualities { flex-wrap: nowrap; }
}

/* The section's proof line, so it is set as large as one row allows.
   The scale is fitted to this exact list measured against the container
   at 900/1000/1200px (the nowrap range) and backed off ~6%: adding a
   word here means remeasuring. 28px -> 33px at full width. */
.start__qualities li {
	display: inline-flex;
	align-items: baseline;
	font-size: clamp(1.4rem, 0.4125rem + 2.2vw, 2.0625rem);
	font-weight: 750;
	line-height: 1.25;
	letter-spacing: -0.03em;
	color: var(--violet-500);
}

.start__qualities li:nth-child(even) { color: #1B1033; }

.start__qualities li:not(:last-child)::after {
	content: "·";
	margin: 0 0.42em;
	font-weight: 400;
	color: var(--violet-400);
}

.start__lead-no {
	list-style: none;
	/* A different register from the qualities: this break has to read. */
	margin: clamp(26px, 2.8vw, 40px) auto 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 32px;
	width: fit-content;
	max-width: 100%;
	font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
	font-weight: 600;
	line-height: 1.35;
	color: #1B1033;
}

.start__lead-no li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.start__lead-no i {
	font-size: 1.3em;
	/* The page's existing alert red, not a new one. */
	color: var(--offer-alert);
}

.start-flow {
	margin: clamp(40px, 4.4vw, 60px) auto 0;
	width: min(100%, 600px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(8px, 0.9vw, 12px);
}

.start-flow__lead {
	flex: 0 0 auto;
	font-family: var(--font-cta);
	font-size: clamp(1.05rem, 0.96rem + 0.3vw, 1.22rem);
	font-weight: 650;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: #1B1033;
}

.start-flow__steps {
	width: 100%;
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-radius: 14px;
}

.start-step {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 9px;
	min-width: 0;
	min-height: 62px;
	padding: 8px 12px;
	border: 0;
	border-radius: 0;
	background: #1B1033;
	box-shadow: none;
}

.start-step:first-child { border-radius: 14px 0 0 14px; }
.start-step:last-child { border-radius: 0 14px 14px 0; }

.start-step__icon {
	width: auto;
	height: auto;
	display: grid;
	place-items: center;
	border-radius: 0;
	background: transparent;
	font-size: 1.35rem;
	color: #fff;
}

.start-step > strong {
	font-family: var(--font-cta);
	font-size: clamp(1.05rem, 0.96rem + 0.3vw, 1.22rem);
	font-weight: 650;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: #fff;
}

.start-step__arrow {
	position: absolute;
	z-index: 3;
	top: 50%;
	right: -17px;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	transform: translateY(-50%);
	border: 1px solid rgba(46, 16, 101, 0.12);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 5px 14px rgba(28, 15, 51, 0.16);
	font-size: 1.15rem;
	color: var(--violet-500);
}

.start-step--convert { background: var(--violet-500); }
.start-step--play { background: var(--seal-green); }


/* ============================================================
   THREE CLICKS
   Geometry ported from ClipBee's section3: 75px-radius step cards,
   a 49/51 copy-versus-media split, step 2 mirrored, and a "Click n"
   badge with one squared corner. Palette is BeeVoice violet, and the
   warm corner glow ClipBee baked into step*bg.webp is a CSS radial
   here so no extra image is needed.
   ============================================================ */
/* ClipBee's section3 is dark cards ON WHITE — the section itself stays
   light and the black step cards are what pop. No inset panel here: the
   white bleeds full-width, matching ClipBee. */
.clicks {
	position: relative;
	background: #fff;
	color: #1B1033;
	padding: clamp(64px, 6vw, 100px) 0 clamp(70px, 6.5vw, 108px);
}

.clicks__wrap {
	width: min(100% - 2rem, 1240px);
	margin-inline: auto;
}

.clicks__title {
	margin: 0 auto;
	text-align: center;
	/* ClipBee: xl66 lg58 md48 sm45 xs30 w600 lh120 ls-3.3 zalando */
	font-family: var(--font-cta);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.05em;
	color: #1B1033;
	text-wrap: balance;
}

/* Same ramp as the Click badges. --grad-badge runs vertically, which is what
   this phrase needs: it wraps mid-span, and a horizontal ramp would hand one
   line the dark half and the next the light half. Every stop clears 7:1 on
   the panel, and the solid colour below is the fallback where the clip is
   unsupported. */
.clicks__title b {
	font-weight: 700;
	color: var(--violet-600);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	.clicks__title b {
		background: var(--grad-badge);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.clicks__mark {
	position: relative;
	display: inline;
	white-space: nowrap;
}

.clicks__mark svg {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.18em;
	width: 100%;
	height: 0.38em;
	overflow: visible;
	pointer-events: none;
}

.clicks__mark path {
	fill: none;
	stroke: url(#bv-clicks-mark-grad);
	stroke-width: 7;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.clicks__steps {
	margin-top: clamp(30px, 3.4vw, 52px);
	display: grid;
	gap: clamp(16px, 1.8vw, 30px);
}

/* ---------- Step card ---------- */
.step {
	position: relative;
	display: grid;
	grid-template-columns: 49% 51%;
	align-items: center;
	border: 1px solid rgba(109, 40, 217, 0.26);
	/* ClipBee .step-div: padding 3% 4% 2% 4%, radius 75px */
	border-radius: 75px;
	background-color: #0b0614;
	overflow: hidden;
	padding: 3% 4% 2% 4%;
	box-shadow: 0 36px 49px rgba(28, 15, 51, 0.22);
}

/* Sparse outline-only hive texture. It lives inside the violet light bloom
   and fades before reaching the flat dark surface. */
.step::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 0;
	left: 0;
	width: 49%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='248' height='214' viewBox='0 0 248 214'%3E%3Cpath d='M62 4 112 33v58L62 120 12 91V33Z' fill='none' stroke='%23c4b5fd' stroke-opacity='.24' stroke-width='1.4'/%3E%3Cpath d='M186 94 236 123v58l-50 29-50-29v-58Z' fill='none' stroke='%23a78bfa' stroke-opacity='.18' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-position: left top;
	background-size: 248px 214px;
	-webkit-mask-image: radial-gradient(ellipse 82% 68% at 18% 12%, #000 0%, rgba(0, 0, 0, 0.88) 34%, rgba(0, 0, 0, 0.34) 58%, transparent 80%);
	mask-image: radial-gradient(ellipse 82% 68% at 18% 12%, #000 0%, rgba(0, 0, 0, 0.88) 34%, rgba(0, 0, 0, 0.34) 58%, transparent 80%);
	pointer-events: none;
}

.step--2::before {
	left: auto;
	right: 0;
	transform: scaleX(-1);
}

.step__copy,
.step__media {
	position: relative;
	z-index: 1;
}

/* Violet corner bloom behind the copy — ClipBee used a baked image. */
.step--1, .step--3 {
	background-image: radial-gradient(58% 78% at 4% 6%, rgba(76, 29, 149, 0.42), transparent 62%);
}
.step--2 {
	background-image: radial-gradient(58% 78% at 96% 6%, rgba(76, 29, 149, 0.42), transparent 62%);
}

/* Step 2 mirrors ClipBee: copy right, media left. The badge, kicker and
   sub-head stay right-aligned so the mirror reads, but the body paragraph
   flows left inside its right-pushed block: it is the only multi-line prose
   here, and a ragged left edge makes the reader hunt for each line start. */
.step--2 .step__copy { order: 2; text-align: right; }
.step--2 .step__media { order: 1; }
.step--2 .step__body {
	max-width: 410px;
	margin-top: 2%;
	margin-left: auto;
}

.step__copy { min-width: 0; }

/* ClipBee .step-left-bg / -bg-2 insets (percent of the copy column). */
.step--1 .step__copy,
.step--3 .step__copy { padding: 8% 0 12% 14%; }
.step--2 .step__copy { padding: 8% 12% 12% 3%; }

/* ---------- Badge ---------- */
.step__badge { margin: 0; }

.step__badge span {
	display: inline-block;
	padding: 9px 24px;
	border-radius: 28px;
	background: var(--grad-badge);
	box-shadow: 0 18px 18px 0 rgba(76, 29, 149, 0.25);
	/* ClipBee: lg28 md24 sm20 xs18 lh140 w600 zalando, ls -1.4 */
	font-family: var(--font-cta);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.045em;
	color: #fff;
}

/* One squared corner, mirrored on the reversed step — ClipBee's detail. */
.step--1 .step__badge span,
.step--3 .step__badge span { border-top-left-radius: 10px; }
.step--2 .step__badge span { border-top-right-radius: 10px; }

/* ---------- Copy ---------- */
.step__kicker {
	/* ClipBee: lg57(->md50) md50 sm40 xs35 w600 zalando, ls -2.85, mt 5% */
	margin: 5% 0 0;
	font-family: var(--font-cta);
	font-size: 35px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.045em;
	color: #fff;
}

.step__sub {
	margin: 6px 0 0;
	font-family: var(--font-cta);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.5px;
	color: var(--violet-300);
	text-wrap: balance;
}

.step__body { max-width: 430px; margin-top: clamp(12px, 1.4vw, 20px); }

.step__body p {
	margin: 0 0 10px;
	/* ClipBee sized these lg22 md20 sm18 xs17; its w300/lh130/#d0d0d0
	   does not survive on this darker panel, so the three perceptual
	   compensations for light-on-dark are applied here. */
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.005em;
	color: #DAD4E6;
	text-wrap: pretty;
}

.step__body p:last-child { margin-bottom: 0; }
.step__body strong { font-weight: 600; color: #fff; }

/* ---------- Media ---------- */
.step__media { min-width: 0; }

.step__media img {
	display: block;
	height: auto;
	border-radius: 18px;
	/* ClipBee .step-img-1 */
	width: 102%;
	max-width: 102%;
}

/* The step art is a self-contained card now, so step 2 no longer bleeds:
   at 151% its chips were cropped off the left edge. */
.step--2 .step__media img {
	width: 102%;
	max-width: 102%;
	position: relative;
	left: 0;
	margin-top: 0;
	margin-bottom: 0;
	border-radius: 0;
}

/* ClipBee .step-img-3 */
.step--3 .step__media img {
	width: 105%;
	max-width: 105%;
	margin-bottom: -3%;
}

/* ============================================================
   MISSING ELEMENTS
   Light inset panel (alternating rhythm: dark deck -> light start
   -> dark clicks -> light here). Video-card geometry ported from
   ClipBee's section4: white ring, 30px radius, deep soft shadow,
   3-up grid. Clips are click-to-play with a persistent play badge
   until real BeeVoice samples replace them.
   ============================================================ */
.missing {
	position: relative;
	margin: clamp(14px, 1.6vw, 26px) var(--gutter) 0;
	border-radius: clamp(20px, 2.4vw, 40px);
	overflow: hidden;
	background:
		radial-gradient(70% 55% at 50% -8%, rgba(221, 214, 254, 0.6), transparent 62%),
		radial-gradient(42% 38% at 6% 30%, rgba(187, 170, 247, 0.2), transparent 70%),
		#FAF7FE;
	padding: clamp(64px, 6vw, 100px) 0 clamp(70px, 6.5vw, 104px);
	color: #1B1033;
}

.missing__wrap {
	width: min(100% - 2rem, 1240px);
	margin-inline: auto;
	text-align: center;
}

.missing__title {
	margin: 0 auto;
	/* House display style: Zalando ladder like the clicks title. */
	font-family: var(--font-cta);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.04em;
	color: #1B1033;
	text-wrap: balance;
}

.missing__title em {
	font-style: normal;
	font-weight: 700;
	color: var(--violet-700);
}

/* This is the section's argument, not a caption. At 17px under a 58px h2 the
   drop was ~3.4x, so the eye classified it as sub-copy and skipped it. Sized
   up to roughly half the h2 so it reads as the next thing you say, and the
   measure is set in ch so each sentence lands on 2 lines instead of 4 short
   ragged ones. Centred prose only works when the lines are few and large. */
.missing__lede {
	display: grid;
	gap: clamp(12px, 1.1vw, 16px);
	max-width: 30ch;
	margin: clamp(18px, 1.9vw, 26px) auto 0;
	font-size: clamp(1.18rem, 1.02rem + 0.62vw, 1.62rem);
	font-weight: 450;
	line-height: 1.42;
	letter-spacing: -0.015em;
	color: #43355F;
	text-wrap: balance;
}

.missing__lede > span { display: block; }

/* The two payoff phrases carry the whole argument, so they get colour as well
   as weight. Dark-on-dark bold gave the eye nothing to land on when skimming;
   violet-500 is the page accent and clears AA on this panel. */
.missing__lede strong {
	font-weight: 650;
	color: var(--violet-500);
}

/* Proximity does the work here: a big gap above separates it from the problem
   statement, a small one below binds it to the chips it introduces. Previously
   the spacing was near-symmetric, so it floated between the two and belonged
   to neither. No max-width, so it stays on one line instead of breaking
   after "by". */
.missing__bridge {
	margin: clamp(40px, 4.4vw, 64px) auto clamp(14px, 1.3vw, 18px);
	font-size: clamp(1.06rem, 0.98rem + 0.34vw, 1.3rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #6B5B8A;
	text-wrap: balance;
}

.missing__bridge strong { font-weight: 700; color: #1B1033; }

/* Where it has to wrap, break at the grammatical seam rather than letting
   balance split "adding" off from what it introduces. */
@media (max-width: 620px) {
	.missing__bridge-lead { display: block; }
}

/* ---------- Element chips ----------
   Equal-width cells, not content-width pills. Content-width was the whole
   readability problem: "Music" rendered a third the size of "Sound effects",
   so the 4 / 3 wrap read as ragged rather than composed. Fixed basis makes
   the trailing row centre cleanly under the first. */
.missing-chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(9px, 0.9vw, 12px);
	max-width: 840px;
	margin: 0 auto;
	padding: 0;
}

.missing-chips li {
	flex: 0 0 auto;
	width: calc((100% - 3 * clamp(9px, 0.9vw, 12px)) / 4);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 14px;
	border-radius: 50px;
	background: #E7E1F7;
	font-size: clamp(15px, 14px + 0.2vw, 17px);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: #1B1033;
}

/* Labels stay on one line; the cell is sized for the longest ("Sound effects"). */
.missing-chips li > span { white-space: nowrap; }

.missing-chips i {
	font-size: 1.25em;
	line-height: 1;
	color: var(--violet-500);
	flex-shrink: 0;
}

/* Two-up below the 4-across breakpoint, then the 7th centres on its own row. */
@media (max-width: 720px) {
	.missing-chips li {
		width: calc((100% - clamp(9px, 0.9vw, 12px)) / 2);
	}
}

/* ---------- Clip grid (ClipBee section4 geometry) ---------- */
.clip-grid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 26px);
	margin: clamp(34px, 3.6vw, 56px) 0 0;
	padding: 0;
}

.clip-card {
	position: relative;
	border: 4px solid #fff;
	border-radius: 30px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 27px 54px rgba(28, 15, 51, 0.18);
	aspect-ratio: 16 / 9;
}

.laudio-card__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.clip-card video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 26px;
}

/* Play badge overlays the whole card so the target is generous. */
.clip-card__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

.clip-card__play::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(13, 6, 24, 0.18);
	transition: background-color 0.25s ease;
}

.clip-card__play i {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(52px, 5vw, 66px);
	height: clamp(52px, 5vw, 66px);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--violet-700);
	font-size: clamp(1.3rem, 1.4vw, 1.7rem);
	box-shadow: 0 8px 26px rgba(28, 15, 51, 0.35);
	transition: transform 0.25s var(--ease-lift);
}

/* Same Phosphor play-glyph ink-bias fix as the audience deck. */
.clip-card__play .ph-play { margin-right: 0.09em; }
.clip-card__play .ph-pause { display: none; }

.clip-card__play:hover i { transform: scale(1.08); }
.clip-card__play:hover::before { background: rgba(13, 6, 24, 0.08); }

/* Playing: scrim and badge fade away, pause icon returns on hover. */
.clip-card.is-playing .clip-card__play::before { background: transparent; }
.clip-card.is-playing .clip-card__play i { opacity: 0; }
.clip-card.is-playing .clip-card__play:hover i { opacity: 1; }
.clip-card.is-playing .clip-card__play .ph-play { display: none; }
.clip-card.is-playing .clip-card__play .ph-pause { display: grid; padding: 0; }

@media (max-width: 899px) {
	.clip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.clip-card { border-radius: 20px; }
	.clip-card video { border-radius: 16px; }
}

@media (max-width: 559px) {
	.clip-grid { grid-template-columns: 1fr; }
	.missing-chips { gap: 8px; }
	.missing-chips li { padding: 10px 12px; }
}

/* ---------- Breakpoints ---------- */
/* ============================================================
   PROBLEM — ClipBee section6 ported exactly.
   .section6-div: 94.1% centred panel, bottom-only 72px radius,
   soft tint fading to white, centred copy; red is the semantic
   "problem" colour and stays red. Only the tint is violet now.
   ============================================================ */
.problem { background: #fff; }

.problem__panel {
	width: min(calc(100% - 2rem), 1240px);
	margin-inline: auto;
	text-align: center;
	border-radius: 0 0 72px 72px;
	background: linear-gradient(180deg, #fff 0%, #f8f8fb 48%, #ececf5 100%);
	padding: 4% 0;
	position: relative;
}

/* Title: ClipBee lg52 md48 sm38 xs30 w600 ls-2.6 zalando */
.problem__title {
	margin: 0;
	padding: 13.6px 0;
	font-family: var(--font-cta);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.05em;
	color: #1B1033;
}

.problem__no { color: #d82a2a; }

/* Boxes: ~22.5% wide at xl, image + compact ink label */
.problem__boxes {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 3%;
}

.problem-box {
	width: 22.5%;
	padding: 0 13px;
	margin-top: 3%;
}

/* The corners are rounded here, not baked into the art. The old renders
   had them painted in at the section's own #E5E5E5, so the artwork only
   worked on that exact ground; these run full bleed and get clipped. */
.problem-box__media {
	overflow: hidden;
	border-radius: clamp(14px, 1.5vw, 24px);
}

.problem-box img { display: block; width: 100%; height: auto; }

/* Label: restrained, high-contrast and consistent with the page's dark surfaces */
.problem-box p {
	margin: 13px 0 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

.problem-box p span {
	display: inline-block;
	border-radius: 9px;
	background: #1B1033;
	padding: 7px 16px 8px;
	box-shadow: 0 8px 20px rgba(28, 15, 51, 0.14);
}

/* "...or ANY" pair: lg22 md20 sm20 xs16 w400 lh140 */
.problem__any {
	margin: 3% 0 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: #1B1033;
}

.problem__without { margin: 3px 0 0; font-size: 16px; line-height: 1.4; color: #1B1033; }
.problem__without span { font-weight: 700; }

/* "But Here's the PROBLEM": lg46 md42 sm36 xs28 w700 lh120 mt4 */
.problem__but {
	margin: 4% 0 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: #1B1033;
}

/* Explain: ClipBee h4 lg26 md18 sm22 xs20 lh130 w400 mt1 */
.problem__explain {
	margin: 1% 0 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	color: #1B1033;
}

.problem__explain span { font-weight: 700; }

.problem__close {
	margin: 2% 0 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	color: #1B1033;
}

.problem__close span { font-weight: 700; }

@media (min-width: 768px) {
	.problem__title { font-size: 38px; }
	.problem-box p { font-size: 20px; }
	.problem__any, .problem__without { font-size: 20px; }
	.problem__but { font-size: 36px; }
	.problem__explain, .problem__close { font-size: 22px; }
}
@media (min-width: 992px) {
	.problem__title { font-size: 48px; }
	.problem-box p { font-size: 22px; }
	.problem__but { font-size: 42px; }
	.problem__explain, .problem__close { font-size: 18px; }
}
@media (min-width: 1200px) {
	.problem__title { font-size: 52px; }
	.problem-box p { font-size: 28px; }
	.problem__any, .problem__without { font-size: 22px; }
	.problem__but { font-size: 46px; }
	.problem__explain, .problem__close { font-size: 26px; }
}

@media (max-width: 767px) {
	.problem__panel { border-radius: 0 0 20px 20px; padding: 0 10px 30px; }
	.problem-box { width: 100%; max-width: 340px; padding: 0 6px; }
}

/* ============================================================
   OPTIONS — ClipBee section7 ported.
   Gradient slabs (their 135deg black -> gold becomes black ->
   violet), 75px radius, 50/50 split with option 2 mirrored,
   tilted badge hanging off the top corner (theirs is a baked
   sticker image; ours is the house badge in CSS).
   ============================================================ */
.options { background: #fff; padding: 7% 0 8%; }

.options__wrap {
	width: min(100% - 2rem, 1240px);
	margin-inline: auto;
}

/* Title: same zalando ladder as the clicks title, lh110 */
.options__title {
	margin: 0 auto;
	text-align: center;
	font-family: var(--font-cta);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.05em;
	color: #1B1033;
}

/* ---------- Slab ---------- */
.option {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	width: 90.7%;
	margin: 25px auto 0;
	border-radius: 75px;
	background: linear-gradient(135deg, #000000 0%, #3B1178 100%);
	color: #fff;
}

.option--1 { margin-top: 4%; }
.option--mirror { background: linear-gradient(135deg, #3B1178 0%, #000000 100%); }

/* ---------- Tilted corner badge (ClipBee: sticker image, ours: CSS) ---------- */
.option__badge {
	position: absolute;
	/* Fixed offset, not ClipBee's 8%: a percentage tracks slab height, so the
	   tallest slab pushed its badge into the heading. 28px + the detail
	   column's 76-96px top padding guarantees clearance on every slab. */
	top: 22px;
	left: -30px;
	z-index: 1;
	display: inline-block;
	padding: 8px 22px;
	border-radius: 18px 12px 12px 5px;
	background: var(--grad-badge);
	box-shadow: 0 18px 18px 0 rgba(28, 15, 51, 0.25);
	font-family: var(--font-cta);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -1px;
	color: #fff;
	transform: rotate(-5deg);
}

.option--mirror .option__badge {
	left: auto;
	right: -30px;
	transform: rotate(5deg);
	border-radius: 12px 18px 5px 12px;
}

/* ---------- Copy column ---------- */
/* Top padding clears the absolutely-positioned badge (top 8% of the slab),
   which otherwise overlaps long headings; bottom stays lighter so the copy
   still reads optically centred. */
/* Vertically centred against the image, ClipBee-style; light padding only.
   The type ladder below is sized so even option 3's long copy stays inside
   the image height instead of stretching the slab. */
.option__detail { padding: 24px 2% 24px 6.8%; }

.option--mirror .option__detail { order: 2; }
.option--mirror .option__img { order: 1; }

/* h2: ClipBee lg46 md42 sm36 xs25 w600 lh120 zalando, ls -1.8 */
/* Two tiers in one heading: the short name of the option, then what it
   actually costs you. Both stay inside the h3 so the accessible name is
   still the whole statement. */
.option__detail h3 {
	margin: 0;
	font-family: var(--font-cta);
	/* Uppercase runs ~24% wider than the mixed case this ladder was built
	   for, so the small end drops to keep the name on one line on a
	   phone. */
	font-size: 25px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -1.8px;
	color: #fff;
	padding-right: 2%;
}

/* Same pair as the Clicks steps: an uppercase white name over a lavender
   line, so the two dark sections speak with one voice. */
.option__title {
	display: block;
	text-transform: uppercase;
	letter-spacing: -0.045em;
}
/* The brand keeps its own casing; uppercase would render it BEEVOICE. */
.option__title .option__brand { text-transform: none; }

/* Sized absolutely, not in em: the subtitle is what actually binds this
   column ("Create the Entire Audio Performance in One Place" runs the
   full measure at full width), so tying it to the title would mean every
   bump to the name costs the subtitle a line. */
.option__sub {
	display: block;
	margin-top: 7px;
	font-family: var(--font-cta);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.03em;
	color: var(--violet-300);
	text-wrap: balance;
}

/* h4: ClipBee lg26 md18 sm20 xs20 lh140 w400, white 70% */
/* Reads as a statement now that the parentheses are gone, so it is lifted
   off the old aside grey and given a little more air per line. */
.option__note {
	margin: 2.5% 0 0;
	padding-right: 6%;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.005em;
	color: rgba(255, 255, 255, 0.76);
	text-wrap: pretty;
}

/* What each option actually costs you, picked out of the sentence. */
.option__note strong {
	font-weight: 600;
	color: #fff;
}

.option__note i {
	font-size: 0.85em;
	color: var(--violet-300);
	vertical-align: -0.05em;
	margin: 0 2px;
}

/* The arrow chain wants to be one unbroken line, but it only fits once
   the text column is wide enough. Sizes are the measured ceiling for a
   single line at the START of each range (the column is narrowest there)
   minus ~6%: 391px at 992 and 477px at 1200, against 317px of chain at
   12px. Adding a step to the chain means remeasuring. */
@media (min-width: 768px) {
	.option--3 .option__note {
		padding-right: 0;
		letter-spacing: -0.02em;
	}
}

@media (min-width: 992px) {
	.option--3 .option__note {
		font-size: 14px;
		white-space: nowrap;
	}
}

@media (min-width: 1200px) {
	.option--3 .option__note { font-size: 17px; }
}

.option__payoff {
	margin: 4% 0 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

/* ---------- Image column ----------
   The photo keeps its natural height and DEFINES the slab height (ClipBee's
   model). The copy column is centred against it and sized to fit inside. */
.option__img { min-width: 0; }

.option__img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0 75px 75px 0;
}

.option--mirror .option__img img { border-radius: 75px 0 0 75px; }

@media (min-width: 768px) {
	.options__title { font-size: 45px; }
	/* No size bump here on purpose: the slab splits 50/50 from this width,
	   so the text column is 298px, barely wider than the 295px it gets on
	   a phone. The name only grows once the column does, at 992. */
	.option__sub { font-size: 17px; }
	.option__note, .option__payoff { font-size: 16px; }
	.option__badge { font-size: 18px; }
}
@media (min-width: 992px) {
	.options__title { font-size: 48px; }
	.option__detail h3 { font-size: 34px; letter-spacing: -1.2px; }
	.option__sub { font-size: 18px; }
	.option__note, .option__payoff { font-size: 16px; }
	.option__badge { font-size: 19px; }
}
@media (min-width: 1200px) {
	.options__title { font-size: 58px; }
	.option__detail h3 { font-size: 42px; letter-spacing: -1.6px; }
	.option__sub { font-size: 20px; }
	.option__note, .option__payoff { font-size: 18px; }
	.option__badge { font-size: 20px; }
}
@media (min-width: 1500px) {
	.options__title { font-size: 66px; }
}

@media (max-width: 767px) {
	.options { padding: 50px 0; }
	.option {
		grid-template-columns: 1fr;
		width: 100%;
		border-radius: 35px;
		padding-top: 8px;
	}
	.option__detail,
	.option--mirror .option__detail { order: 1; padding: 44px 24px 24px; text-align: center; }
	.option__img,
	.option--mirror .option__img { order: 2; }
	.option__img img,
	.option--mirror .option__img img { height: auto; border-radius: 0 0 35px 35px; }
	.option__note { padding-right: 0; }
	/* Badge tucks inside the slab instead of hanging off the edge. */
	.option__badge,
	.option--mirror .option__badge {
		left: 50%; right: auto; top: -14px;
		transform: translateX(-50%) rotate(-3deg);
	}
}

/* ============================================================
   DIRECT — DirectorMode(TM) examples.
   Dark inset panel; each example is a "direction card": the
   prompt you would type, quoted large, with a real transport
   underneath. Reuses the audience deck's player contract
   (.audience-card / -play / -wave / -time), so audience-player.js
   drives these too and playback stays exclusive page-wide.
   ============================================================ */
/* ============================================================
   INTRO ZONE — ClipBee's section8 flow. One background for the
   whole zone: solid near-black on top, then ClipBee's section8a
   bg (hue-shifted violet, anchored to the bottom at natural
   scale: 2236/1920 = 116.4vw tall), with a fade layer starting
   exactly at the image's top edge so the dark melts into the
   violet band, which itself fades to white.
   ============================================================ */
.introzone {
	--inset: var(--gutter);
	/* The zone's own width; the bg image scales to it (100% auto),
	   so every blend offset below derives from it too. */
	--zw: calc(100vw - 2 * var(--inset));
	margin-inline: var(--inset);
	border-radius: clamp(20px, 2.4vw, 40px);
	/* Stays white: the hive layer is opaque only across its top ~63%, and
	   its transparent lower third is what makes the bottom of this zone
	   read white. The hairline seam is closed by overlapping the solid
	   layer onto the image below, not by darkening this ground. */
	background-color: #fff;
	background-image:
		linear-gradient(#0d0618, #0d0618),
		linear-gradient(180deg, #0d0618 0%, rgba(13, 6, 24, 0) 100%),
		var(--hive-bg);
	background-repeat: no-repeat;
	background-position:
		center top,
		center calc(100% - 0.7 * var(--zw) + 8px),
		center bottom;
	background-size:
		100% calc(100% - 1.164 * var(--zw) + 40px),
		100% calc(0.464 * var(--zw)),
		100% auto;
	position: relative; /* the Introducing head overlays the demo video */
	/* No overflow clip here: the badge straddles the top edge. The video
	   clips itself (.intro-demo) and the hive block clips its chips. */
}

/* "Introducing" sticker riding the section's top edge, like ClipBee. */
.introzone__badge-row {
	position: absolute;
	top: 0;
	inset-inline: 0;
	z-index: 2;
	margin: 0;
	text-align: center;
	transform: translateY(-50%);
}

/* ---------- Introducing head (ClipBee .section8-title-div) ----------
   Overlaid on the demo video's dark top, exactly like ClipBee. */
.intro-head {
	position: absolute;
	inset-inline: 0;
	top: clamp(44px, 4.2vw, 72px);
	/* Above .intro-demo::before, which shares z-index 1 and, coming later
	   in the DOM, was washing its fade over the logo and pill. */
	z-index: 3;
	text-align: center;
}

/* House badge shape, ClipBee's italic "Introducing" sticker. */
.intro-head__badge {
	display: inline-block;
	padding: 8px 30px;
	border-radius: 22px 22px 22px 10px;
	background: var(--grad-badge);
	font-family: var(--font-cta);
	font-style: italic;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.04em;
	color: #fff;
}

.intro-head__logo {
	display: block;
	width: clamp(220px, 26vw, 380px);
	height: auto;
	margin: 0 auto clamp(10px, 1.2vw, 18px);
}

/* ClipBee .section8-tiitle-1: translucent pill, #c6c6c6 */
.intro-head__pill {
	/* Held close to the logo so it clears the artwork's own chip panel
	   now that the band is cropped shorter. */
	margin: clamp(8px, 1vw, 15px) 0 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.26px;
	color: #c6c6c6;
}

.intro-head__pill span {
	display: inline-block;
	padding: 13px 27px;
	border-radius: 30px;
	background-color: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.07);
}

/* ---------- Product demo loop (ClipBee's .bigleap-video, verbatim) ----------
   Full-bleed at the top of the zone, overscanned past the edges like
   ClipBee's ladder, with the head overlaid on its dark upper third and
   a fade at the foot so the clip melts into the zone's dark bg. */
.intro-demo {
	position: relative;
	overflow: hidden;
	/* Matches the zone's top radius, since the zone no longer clips. */
	border-radius: clamp(20px, 2.4vw, 40px) clamp(20px, 2.4vw, 40px) 0 0;
	/* The artwork is carried as a cropped background band rather than a
	   full-height image. Its own frame has empty margins top and bottom,
	   which made the element read as tall and dead, and left a hard edge
	   where it met the section. Cover-cropping to ~2.2:1 trims that dead
	   space, and the fades below dissolve the band into the section
	   ground so there is no seam. */
	/* The file is a 3:2 render squeezed onto a 16:9 canvas, so its pixels
	   arrive pre-squashed ~18% vertically. Displaying at 3:2 stretches
	   them back to the artwork's true proportions; the edge fades merge
	   the band into the section. */
	aspect-ratio: 3 / 2;
	background-image: var(--intro-demo-bg);
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}

/* Top edge melts into the section so the band has no visible start. */
.intro-demo::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 16%;
	background: linear-gradient(180deg, #0d0618 0%, rgba(13, 6, 24, 0) 100%);
	pointer-events: none;
	z-index: 1;
}


/* The overlaid head compresses so it stays on the artwork's dark top. */
@media (max-width: 767px) {
	.intro-head { top: 30px; }
	.intro-head__badge { font-size: 14px; padding: 6px 22px; }
	.intro-head__logo { width: 150px; }
	.intro-head__pill { margin-top: 10px; font-size: 13px; }
	.intro-head__pill span { padding: 8px 16px; }
}

.direct {
	position: relative;
	color: var(--text-hi);
	/* No ground of its own: the radial glow that used to start at this
	   top edge switched the tint on in a straight line exactly where the
	   intro artwork's baked fade lands, drawing a seam across the zone. */
	padding: clamp(40px, 4.5vw, 72px) 0 clamp(44px, 4.5vw, 76px);
}

.direct__wrap {
	width: min(100% - 2rem, 1140px);
	margin-inline: auto;
	text-align: center;
}

.direct__title {
	margin: 0 auto;
	font-family: var(--font-cta);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -0.04em;
	color: #fff;
	text-wrap: balance;
}

.options__title > span {
	display: inline-block;
	color: var(--violet-600);
}

/* The payoff half of the headline, so it outranks the setup above it
   rather than matching it. Held at 1em until there is width to spend:
   on a phone the line already wraps, and inflating it there only buys
   another wrap. */
.direct__title em {
	display: inline-block;
	font-style: normal;
	color: var(--violet-300);
}

/* The same payoff word as the hero, in the same gold, so the page's one
   warm note lands twice on the same claim. Set above the line it sits in
   rather than beside it: at 1.24em the caps stand clear of the lavender
   without needing a second colour step. */
.direct__title b {
	font-size: 1.24em;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--alive-gold);
}

/* ---------- Direction cards ---------- */
.direct-cards {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	width: min(100%, 1080px);
	margin: clamp(32px, 3.6vw, 52px) 0 0;
	margin-inline: auto;
	padding: 0;
	text-align: left;
}

.direct-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	/* Neutralise the audience deck's portrait min-height. */
	min-height: 0;
	padding: 22px;
	border-radius: 26px;
	/* Lifted off the section instead of matching it, so the card reads as
	   an object you can act on. */
	background: #221340;
	border: 1px solid rgba(255, 255, 255, 0.13);
	box-shadow: 0 12px 28px rgba(5, 2, 10, 0.24);
	/* No cursor: pointer. Only the play button is actionable, so a pointer on
	   the whole card promised a click that never existed. */
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.direct-card::before { display: none; }

.direct-card:hover {
	background: #2A1850;
	border-color: rgba(167, 139, 250, 0.42);
}

.direct-card.is-playing {
	background: #2A1850;
	border-color: rgba(167, 139, 250, 0.62);
}

/* Stated once, under the section title. */
.direct__badge {
	margin: clamp(22px, 2.4vw, 34px) 0 0;
	display: flex;
	justify-content: center;
}

/* Scaled up here because it now stands alone as the section's mark rather
   than sitting inline with a cue label. */
.direct__badge .direct-card__brand {
	gap: 10px;
	padding: 11px 24px 11px 19px;
	border-radius: 20px 20px 20px 8px;
	font-size: clamp(1.02rem, 0.9rem + 0.4vw, 1.25rem);
}

.direct__badge .direct-card__brand i { font-size: 1.25em; }

/* Labels the bubble directly beneath it, one per card. */
.direct-card__cue {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #DDD6FE;
}

/* The trademark wears the house badge; the cue stays a quiet label. */
.direct-card__brand {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 15px 7px 12px;
	border-radius: 14px 14px 14px 6px;
	background: var(--grad-badge);
	box-shadow: 0 4px 10px rgba(5, 2, 10, 0.3);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
	color: #fff;
	white-space: nowrap;
}

.direct-card__brand i {
	font-size: 16px;
	color: #DDD6FE;
}

.direct-card__quote {
	margin: 0 0 16px;
	padding: 16px 20px 17px;
	border-radius: 18px 18px 18px 8px;
	background: #fff;
	box-shadow: 0 6px 16px rgba(5, 2, 10, 0.28);
	font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
	font-weight: 600;
	line-height: 1.4;
	color: #1B1033;
	text-wrap: pretty;
	/* Was alternating sides on even cards to suggest a conversation. With the
	   connector below it that alternation made the turn jump left and right
	   across the grid, so the bubble squares up and the flow reads straight
	   down every card. */
	align-self: stretch;
}

/* Transport reuses the audience deck styling; pinned to the card foot so
   all four decks align across unequal quote lengths. */
.direct-card__deck {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	/* The shared player pieces carry grid-area names (play/wave/time) from
	   the audience deck; without matching areas they fall into implicit
	   tracks and pile up. Declare the areas so the row lays out. */
	grid-template-areas: "play wave time";
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding: 13px 15px;
	border: 1px solid rgba(167, 139, 250, 0.26);
	border-radius: 28px;
	/* The audio is the payoff, but it used to be the faintest element in the
	   card while the input bubble shouted. Given its own tinted surface it
	   now reads as the thing to act on. */
	background: linear-gradient(180deg, rgba(139, 92, 246, 0.34), rgba(109, 40, 217, 0.18));
	transition: background 0.25s ease, border-color 0.25s ease;
}

.direct-card:hover .direct-card__deck,
.direct-card.is-playing .direct-card__deck {
	background: linear-gradient(180deg, rgba(139, 92, 246, 0.5), rgba(109, 40, 217, 0.28));
	border-color: rgba(167, 139, 250, 0.6);
}

/* A labelled pill rather than a bare disc, shared by the DirectorMode and
   audience decks. The voice grid keeps the plain disc: eight of these under
   portraits would crowd that layout. */
.audience-play--labelled {
	width: auto;
	height: auto;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 16px 7px 7px;
	border-radius: 999px;
	background: #fff;
	color: #2E1065;
	box-shadow: 0 3px 10px rgba(10, 4, 20, 0.3);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* The glyph keeps the disc shape inside the pill, so the play/pause stack
   still overlaps in one grid cell the way the shared contract expects. */
.audience-play--labelled .audience-play__glyph {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--grad-action);
	color: #fff;
}

/* Showcase controls inherit their card's solid colour, not the global
   purple CTA gradient. DirectorMode retains its own styling. */
.audience-cards .audience-play--labelled .audience-play__glyph {
	background: var(--card-tint, #684AD2);
}

.audience-play--labelled i {
	grid-area: 1 / 1;
	font-size: 15px;
}

@media (hover: hover) {
	.audience-play--labelled:hover {
		background: #F5F2FF;
		box-shadow: 0 6px 16px rgba(10, 4, 20, 0.38);
		transform: translateY(-1px);
	}
}

.audience-play--labelled:active { transform: scale(0.97); }

/* Only where the pill shares its row with the waveform. The audience deck
   stacks the pill on its own full-width row, so it keeps the label at every
   size; hiding it there left a wide empty pill holding one small glyph. */
@media (max-width: 420px) {
	.direct-card .audience-play--labelled .audience-play__label { display: none; }
	.direct-card .audience-play--labelled { padding: 7px; }
}

.direct-card .audience-wave { height: 28px; }

/* At 0.38 alpha on near-black the waveform read as disabled. It now sits
   bright enough at rest to look ready, and brightens further on play. */
.direct-card .audience-wave span { background: rgba(196, 181, 253, 0.62); }
.direct-card.is-playing .audience-wave span { background: #EDE7FB; }

.direct-wave {
	display: block;
	height: 28px;
	min-width: 0;
	padding: 0;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.direct-wave svg { display: block; width: 100%; height: 100%; overflow: visible; }
.direct-wave__line {
	stroke-width: 1.6;
	vector-effect: non-scaling-stroke;
	transform-origin: 160px 20px;
	opacity: .85;
	animation: director-wave-flow 3.8s ease-in-out infinite alternate;
	animation-play-state: paused;
}
.direct-wave__line:nth-child(2) { stroke-width: 1.1; opacity: .5; animation-duration: 4.7s; animation-delay: -2s; }
.direct-wave__line:nth-child(3) { stroke-width: .8; opacity: .35; animation-duration: 3.1s; animation-delay: -1s; }
.audience-card.is-playing .direct-wave__line { animation-play-state: running; }
.direct-wave.is-audio-reactive .direct-wave__line { animation: none; }
/* Brighter, taller ribbons for the saturated showcase cards. Keep the
   same track width and timecode position; the play pill stays untouched. */
.audience-card__deck .direct-wave { height: 36px; }
.audience-card__deck .direct-wave__line { stroke-width: 2.2; opacity: 1; }
.audience-card__deck .direct-wave__line:nth-child(2) { stroke-width: 1.6; opacity: .7; }
.audience-card__deck .direct-wave__line:nth-child(3) { stroke-width: 1.1; opacity: .5; }
.audience-card__deck .direct-wave stop:nth-child(1) { stop-color: #C4B5FD; }
.audience-card__deck .direct-wave stop:nth-child(2) { stop-color: #FFFFFF; }
.audience-card__deck .direct-wave stop:nth-child(3) { stop-color: #F3E8FF; }
.audience-card__deck .direct-wave stop:nth-child(4) { stop-color: #FFE58A; }
.audience-card__deck .direct-wave stop.wave-progress-played { stop-color: #FFE16B; }
.audience-card__deck .direct-wave stop.wave-progress-unplayed { stop-color: #EEE4FF; stop-opacity: .42; }
.direct-card__deck .direct-wave stop.wave-progress-played { stop-color: #FFE16B; }
.direct-card__deck .direct-wave stop.wave-progress-unplayed { stop-color: #EEE4FF; stop-opacity: .55; }
.audience-cards .audience-card__deck { border-radius: 24px; background: rgba(10, 4, 20, .4); }
.audience-cards .audience-card.is-playing .audience-card__deck { background: rgba(10, 4, 20, .58); }
@keyframes director-wave-flow {
	0% { transform: translateX(-8px) scaleY(.65); }
	50% { transform: translateX(2px) scaleY(1); }
	100% { transform: translateX(8px) scaleY(.8); }
}
@media (prefers-reduced-motion: reduce) {
	.direct-wave__line { animation: none; }
}

.direct-card .audience-time { color: rgba(255, 255, 255, 0.78); }

@media (min-width: 768px) {
	.direct__title { font-size: 40px; }
	.direct__title em { font-size: 1.12em; }
	.intro-head__badge { font-size: 18px; }
}
@media (min-width: 992px) {
	.direct__title { font-size: 48px; }
	.intro-head__badge { font-size: 20px; }
	.intro-head__pill { font-size: 20px; }
	.intro-head__pill span { padding: 18px 34px; }
}
@media (min-width: 1200px) {
	.direct__title { font-size: 56px; letter-spacing: -3px; }
	.intro-head__badge { font-size: 22px; }
	.intro-head__pill { font-size: 22px; }
	.intro-head__pill span { padding: 23px 37px; }
}

@media (max-width: 719px) {
	.direct-cards { grid-template-columns: 1fr; gap: 12px; }
	.direct-card { border-radius: 20px; padding: 16px; }
}

/* ============================================================
   HIVE — AudioHive(TM) Performance Engine.
   ClipBee's section8-2 / .intro-detail-box ported: light bg image
   fading to white behind a huge 79px-radius black panel with its
   own glow bg, eyebrow pill, two-line zalando title (second line
   accent), centered bordered video, bold-lead body copy, and two
   chips hanging off the panel edges (theirs are baked webp
   stickers; ours are CSS with Phosphor icons and audio labels).
   Both bg images are ClipBee's, hue-shifted amber -> violet.
   ============================================================ */
.hive {
	padding: clamp(12px, 1.6vw, 28px) 0 clamp(56px, 6vw, 100px);
	overflow: hidden; /* the panel's edge chips hang past the zone */
}

/* ---------- The panel (ClipBee .intro-detail-box, verbatim geometry) ---------- */
.hive__panel {
	position: relative;
	width: min(calc(100% - 2rem), 1120px);
	margin: auto;
	border-radius: 79px;
	padding: 4.8% 5% 6% 5%;
	background-color: #000;
	background-image: var(--hive-panel-bg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	box-shadow: 0 36px 73px 0 rgba(0, 0, 0, 0.14);
	text-align: center;
}

/* ---------- Eyebrow pill (ClipBee .clips-span gradient-border trick) ---------- */
.hive__eyebrow {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	color: #fff;
	letter-spacing: -0.19px;
}

.hive__eyebrow-inn {
	display: inline-block;
	padding: 16px 38px;
	border-radius: 21px;
	background-color: #120b1e;
	border: 1px solid transparent;
	background-clip: padding-box;
	position: relative;
}

.hive__eyebrow-inn::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: 22px;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.11) 50%);
}

/* ---------- Title: ClipBee h2 lg48 md36 sm30 xs30 w600 lh110 zalando ---------- */
.hive__title {
	margin: 2% 0 0;
	font-family: var(--font-cta);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.48px;
	color: #fff;
}

.hive__title span { color: var(--violet-300); }

/* ---------- Sub: ClipBee h6 lg22 md20 sm20 xs18 w400 lh130, #c0c0c0 ---------- */
.hive__sub {
	margin: 2% 0 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	color: #c0c0c0;
	letter-spacing: -0.22px;
}

/* Line breaks that only exist on desktop, like ClipBee's d-none d-lg-block. */
.hive__br { display: none; }

/* ---------- Video (ClipBee .intro-detail-img, gold border -> violet) ---------- */
.hive__media {
	position: relative;
	width: 74%;
	margin: 28px auto 0;
	border: 4px solid var(--violet-500);
	border-radius: 23px;
	overflow: hidden;
	background-color: #000;
	box-shadow: 0 17px 68px 0 rgba(46, 16, 101, 0.28);
}

.hive__video { width: 100%; display: block; }

/* ---------- Body copy (ClipBee .intro-detail-text h5: lg22 lh140) ---------- */
.hive__body {
	width: min(100%, 760px);
	margin: 4.5% auto 0;
	padding: 0;
	text-align: left;
	color: #c0c0c0;
}

.hive__body p {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: -0.24px;
}

.hive__body p + p { margin-top: 1.55em; }

.hive__body .hive__br { display: none; }

.hive__lead {
	display: block;
	margin-bottom: 0.18em;
	font-weight: 700;
	color: #fff;
}

.hive__brand,
.hive__title .hive__brand { color: var(--alive-gold); }

/* ---------- Edge chips (ClipBee's videoicon/imgicon stickers, in CSS) ---------- */
.hive-chip {
	position: absolute;
	z-index: 1;
	display: none; /* desktop only, like ClipBee */
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 158px;
	padding: 30px 10px 26px;
	border-radius: 30px;
	background: #0c0716;
	border: 1px solid rgba(139, 92, 246, 0.55);
	box-shadow: 18px 24px 38px rgba(12, 7, 22, 0.45);
	font-family: var(--font-cta);
	font-size: 21px;
	font-weight: 600;
	color: #fff;
}

.hive-chip i { font-size: 46px; color: var(--violet-400); }

.hive-chip--voice {
	right: 90%;
	top: 23%;
	transform: rotate(-15deg);
}

.hive-chip--music {
	left: 91%;
	bottom: 12%;
	transform: rotate(11deg);
}

/* ---------- Ladders (ClipBee's md/lg/xl steps) ---------- */
@media (min-width: 768px) {
	.hive__title { font-size: 36px; }
	.hive__sub { font-size: 20px; }
	.hive__body p { font-size: 20px; }
}
@media (min-width: 992px) {
	.hive__br { display: block; }
	.hive__eyebrow { font-size: 19px; }
	.hive__title { font-size: 48px; }
	.hive__sub { font-size: 22px; }
	.hive__body p { font-size: 22px; }
	.hive-chip { display: flex; width: 148px; }
	.hive-chip i { font-size: 42px; }
}
@media (min-width: 1200px) {
	.hive-chip { width: 158px; }
	.hive-chip i { font-size: 46px; }
}

/* ---------- Mobile (ClipBee: 100% width, small radius, tight padding) ---------- */
@media (max-width: 991px) {
	.hive__panel { width: 100%; border-radius: 40px; }
	.hive__media { width: 74%; }
}
@media (max-width: 767px) {
	.hive { padding: 8px 0 44px; }
	.hive__panel { border-radius: 15px; padding: 25px 15px 35px; }
	.hive__eyebrow { letter-spacing: 0; }
	.hive__eyebrow-inn { padding: 10px 16px; }
	.hive__media { width: 100%; border-radius: 15px; margin-top: 20px; }
	.hive__body { margin-top: 20px; padding: 0; }
}

/* ============================================================
   FEEL — "They Remember What They Feel."
   ClipBee's section8-1: bright glow bg (their amber section8b,
   hue-shifted violet), zalando title, centered swiper carousel
   of autoplaying clips (23px radius, deep soft shadow), then the
   "what they remember" copy block: lead, five memory chips,
   performer bridge, and the closing statement.
   ============================================================ */
.feel {
	background-color: #fff;
	background-image: var(--feel-bg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	padding: clamp(56px, 6vw, 100px) 0 clamp(64px, 6.5vw, 110px);
	overflow: hidden;
}

/* Title: the white-section zalando ladder (same as options/clicks). */
.feel__title {
	width: min(100% - 2rem, 1240px);
	margin: 0 auto;
	text-align: center;
	font-family: var(--font-cta);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -1.6px;
	color: #1B1033;
}

.feel__title-line { display: block; text-wrap: balance; }

.feel__title-payoff {
	margin-top: 0.08em;
	color: var(--violet-600);
}

.feel__title-mark {
	display: inline-block;
}


/* ---------- Carousel (ClipBee .carousel / .swiper1) ---------- */
.feel__carousel {
	position: relative;
	margin-top: clamp(28px, 3.5vw, 56px);
	overflow-x: clip;
}

.feel-swiper {
	padding: 3% 0;
	overflow: visible;
}

/* No edge fade, by deliberate choice after two failed approaches. The old
   additive melt (white glow columns on the nav) bled over the dark card
   below; a subtractive mask-image on this element black-boxed the composited
   video layers inside the masked group. Edge-to-edge with the viewport
   cutting the wheel is the pattern that survives both, and the carousel's
   overflow-x clip already trims the horizontal excess. */

/* ClipBee: inactive slides sit 20px lower; the active one rides up. */
.feel-swiper .swiper-slide {
	position: relative;
	top: 20px;
	transition: 0.15s ease-in-out;
}

.feel-swiper .swiper-slide-active { top: 0; z-index: 1; }

/* Wheel-transform target (rotated/tucked by feel-carousel.js, exactly
   like ClipBee's calculateWheel loop on .single). */
.feel-swiper .single {
	position: relative;
	pointer-events: none;
}

.feel-slide__video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 23px;
	box-shadow: 0 27px 54px rgba(28, 15, 51, 0.22);
	background: #0d0618;
}

/* Sound control, centred on the clip: white disc over a white pill, the
   page's play glyph inside. The slide wrapper kills pointer events so the
   carousel stays draggable, so this one control takes them back. */
.feel-slide__video[data-feel-src] { aspect-ratio: 16 / 9; object-fit: cover; }
.feel-slide__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 23px;
	pointer-events: none;
}
.feel-slide__video.has-frame + .feel-slide__poster { visibility: hidden; }

.feel-slide__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--font-display);
}

.feel-slide__disc {
	display: grid;
	place-items: center;
	width: clamp(52px, 4.6vw, 74px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: #fff;
	color: var(--violet-500);
	box-shadow: 0 10px 30px rgba(10, 4, 20, 0.34);
	transition: transform 0.2s ease;
}

.feel-slide__disc i {
	grid-area: 1 / 1;
	font-size: clamp(22px, 2vw, 32px);
	line-height: 1;
}

/* Optical centring for the play triangle: its ink sits right of the
   advance centre, but its area centroid is on it, so this splits the
   difference rather than cancelling the whole bounding-box bias. */
.feel-slide__disc .ph-play { margin-right: 0.09em; }
.feel-slide__disc .ph-pause { display: none; }

.feel-slide__label {
	padding: 9px 22px;
	border-radius: 999px;
	background: #fff;
	color: #1B1033;
	font-size: clamp(13px, 1vw, 16px);
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
	box-shadow: 0 8px 22px rgba(10, 4, 20, 0.26);
}

/* Every slide keeps its own control, but the flanking ones step back so
   the centre reads as the one to press rather than three competing
   pills, two of them cropped by the viewport edge. */
.feel-swiper .swiper-slide:not(.swiper-slide-active) .feel-slide__play {
	opacity: 0.55;
	transition: opacity 0.25s ease;
}

.feel-slide__play:hover .feel-slide__disc { transform: scale(1.06); }
.feel-slide__play:active .feel-slide__disc { transform: scale(0.97); }

/* Let the phone cue wrap if the user enlarges the text. */
@media (max-width: 639px) {
	.feel-slide__play { width: calc(100% - 20px); }
	.feel-slide__label {
		white-space: normal;
		text-align: center;
		line-height: 1.2;
		padding: 8px 14px;
		font-size: 12.5px;
	}
}

.feel-slide__play.is-sound .feel-slide__disc { color: var(--violet-600); }
.feel-slide__play.is-sound .ph-play { display: none; }
.feel-slide__play.is-sound .ph-pause { display: block; }

/* Nav: floating glass chevrons. The edge fade is the swiper mask's job now,
   so these are plain controls, not part of the melt. */
.feel-nav {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: grid;
	place-items: center;
	width: clamp(44px, 4vw, 56px);
	aspect-ratio: 1;
	border: 1px solid rgba(46, 16, 101, 0.14);
	border-radius: 50%;
	padding: 0;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 26px rgba(28, 15, 51, 0.14);
	color: #1B1033;
	font-size: clamp(18px, 1.7vw, 24px);
	cursor: pointer;
	transform: translateY(-50%);
	transition: color 0.25s, border-color 0.25s, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@supports not (backdrop-filter: blur(10px)) {
	.feel-nav { background: rgba(255, 255, 255, 0.94); }
}

@media (hover: hover) {
	.feel-nav:hover {
		color: var(--violet-500);
		border-color: rgba(109, 40, 217, 0.4);
		transform: translateY(-50%) scale(1.06);
	}
}

.feel-nav i { line-height: 1; }

.feel-nav--prev { left: clamp(8px, 1.6vw, 28px); }
.feel-nav--next { right: clamp(8px, 1.6vw, 28px); }

/* ---------- Copy block ---------- */
.feel__copy {
	width: min(100% - 2rem, 1100px);
	margin: clamp(40px, 4.5vw, 72px) auto 0;
	text-align: center;
}

/* ---------- The recall card ----------
   Was a pale panel with five equal hairline-divided columns, which read as a
   spec table: the eye scanned the rules, not the words. Rebuilt as one dark
   console in the same material as the Clicks cards (#0b0614 + violet edge +
   hive outline), so the section joins the page's card family instead of
   floating on white. */
.feel__proof {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(34px, 3.8vw, 58px) clamp(24px, 3vw, 52px) clamp(38px, 4.2vw, 60px);
	border: 1px solid rgba(109, 40, 217, 0.3);
	border-radius: clamp(26px, 3vw, 44px);
	background:
		radial-gradient(ellipse 38% 70% at 0% 60%, rgba(109, 40, 217, .2), transparent 85%),
		radial-gradient(ellipse 38% 70% at 100% 60%, rgba(109, 40, 217, .2), transparent 85%),
		radial-gradient(78% 62% at 50% -6%, rgba(124, 58, 237, 0.34), transparent 68%),
		#0b0614;
	box-shadow: 0 34px 66px rgba(28, 15, 51, 0.26);
}

/* Connected hive lattice and dimensional cells, matching PRO's dubbing
   panel. Both layers dissolve at the centre to protect the reading column. */
.feel__proof::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='221.696' viewBox='0 0 128 221.696'%3E%3Cpath d='M64 0 128 36.954 V110.848 L64 147.802 0 110.848 V36.954 Z M64 147.802 V221.696' fill='none' stroke='%23b79aed' stroke-width='1'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 100px 173.2px;
	opacity: .32;
	/* Two corner blooms rather than one centred one: the old mask peaked at
	   top centre, which is exactly where the lead and heading sit, so hexagon
	   outlines ran through the copy and washed it out. The texture now hugs
	   the upper corners and leaves the reading column clean. */
	-webkit-mask-image:
		radial-gradient(ellipse 34% 90% at 0% 50%, #000 0%, rgba(0,0,0,.5) 46%, transparent 95%),
		radial-gradient(ellipse 34% 90% at 100% 50%, #000 0%, rgba(0,0,0,.5) 46%, transparent 95%);
	mask-image:
		radial-gradient(ellipse 34% 90% at 0% 50%, #000 0%, rgba(0,0,0,.5) 46%, transparent 95%),
		radial-gradient(ellipse 34% 90% at 100% 50%, #000 0%, rgba(0,0,0,.5) 46%, transparent 95%);
	pointer-events: none;
}

.feel__proof::after {
	--hive-cells: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 500'%3E%3Cdefs%3E%3ClinearGradient id='face' x2='.85' y2='1'%3E%3Cstop stop-color='%23352051'/%3E%3Cstop offset='.48' stop-color='%231b102e'/%3E%3Cstop offset='1' stop-color='%23100a1d'/%3E%3C/linearGradient%3E%3ClinearGradient id='edge' x2='.9' y2='1'%3E%3Cstop stop-color='%237c51af' stop-opacity='.25'/%3E%3Cstop offset='.22' stop-color='%23d4baff'/%3E%3Cstop offset='.48' stop-color='%239e73d2' stop-opacity='.65'/%3E%3Cstop offset='1' stop-color='%2369418f' stop-opacity='.12'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23face)' stroke='url(%23edge)' stroke-width='1.3'%3E%3Cpolygon points='100,12 200,70 200,186 100,244 0,186 0,70' transform='rotate(15 100 128)'/%3E%3Cpolygon points='285,205 362,249 362,339 285,383 208,339 208,249' transform='rotate(-12 285 294)'/%3E%3Cpolygon points='65,300 165,358 165,474 65,532 -35,474 -35,358' transform='rotate(12 65 416)'/%3E%3C/g%3E%3C/svg%3E");
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: var(--hive-cells), var(--hive-cells);
	background-repeat: no-repeat;
	background-size: clamp(200px, 26vw, 320px) auto;
	background-position: left -48px center, right -90px center;
	opacity: .8;
	mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.8) 15%, transparent 35%, transparent 65%, rgba(0,0,0,.8) 85%, #000);
}
@media (max-width: 767px) {
	.feel__proof::before { background-size: 76px 131.64px; opacity: .24; }
	.feel__proof::after { background-size: 190px auto; background-position: left -95px center, right -115px center; opacity: .5; }
}

.feel__proof > * { position: relative; z-index: 1; }

/* The card's opening statement. It has to outrank the tile labels below it
   (17-19px) or it reads as one more list item, but stay well under the
   heading. Measure is capped so it forms a two-line block instead of one
   thin ribbon stretched across the full card. */
.feel__lead {
	max-width: 34ch;
	margin: 0 auto;
	padding-inline: 0;
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
	font-weight: 500;
	line-height: 1.42;
	letter-spacing: -0.005em;
	color: #DCD4F2;
	text-wrap: balance;
}

/* The card's title. Was a <strong> at ~1.7x the setup line, which is a lead-in
   ratio, not a title ratio. At ~2.7x with the house swash under it, it now
   carries the block. */
.feel__remember {
	width: fit-content;
	margin: clamp(14px, 1.5vw, 22px) auto 0;
	font-family: var(--font-cta);
	font-size: clamp(1.95rem, 0.72rem + 3.3vw, 3rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.04em;
	color: #fff;
	text-wrap: balance;
}

.feel__remember-mark {
	position: relative;
	display: inline;
	white-space: nowrap;
}

.feel__remember-mark svg {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.2em;
	width: 100%;
	height: 0.38em;
	overflow: visible;
	pointer-events: none;
}

.feel__remember-mark path {
	fill: none;
	stroke: url(#bv-remember-mark-grad);
	stroke-width: 7;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

/* The swash needs one unbroken line to sit under, but at phone widths that
   line is wider than the card and was being clipped by its overflow. Below
   this width the title wraps instead and the swash becomes a straight rule,
   which keeps the title big rather than shrinking it to fit the decoration. */
@media (max-width: 620px) {
	.feel__remember { width: auto; text-align: center; }
	.feel__remember-mark { white-space: normal; }
	.feel__remember-mark svg { display: none; }

	.feel__remember::after {
		content: "";
		display: block;
		width: clamp(96px, 34%, 160px);
		height: 3px;
		margin: 0.42em auto 0;
		border-radius: 999px;
		background: linear-gradient(90deg, var(--violet-400), #DDD6FE);
		box-shadow: 0 0 16px rgba(167, 139, 250, 0.7);
	}
}

/* A list, set as a list.

   No boxes: five identical glass rectangles each holding an identical circular
   icon badge is the most recognisable AI-card pattern there is, and the
   elevation communicated nothing.

   Rows are centred, not left-aligned on a shared edge. A shrink-to-fit block
   of left-aligned rows is centred as a block but still presents a hard left
   edge and a ragged right one, which fights the centred lead and heading
   directly above it: two axes in one card. Everything here sits on the centre
   axis instead, the same way the check chips higher up the page do. */
.feel-chips {
	list-style: none;
	display: grid;
	justify-items: center;
	gap: clamp(17px, 1.9vw, 27px);
	width: 100%;
	max-width: 48rem;
	margin: clamp(34px, 3.6vw, 50px) auto 0;
	padding: 0;
	border: 0;
	text-align: center;
}

.feel-chips li {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(10px, 0.9vw, 14px);
	min-height: 0;
	max-width: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: clamp(1.1rem, 0.98rem + 0.5vw, 1.4rem);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: #EAE4FA;
	text-align: center;
	text-wrap: balance;
}

/* Emoji, not Phosphor: these are five felt reactions, not UI affordances, and
   the colour they bring is the warmth the monochrome violet glyphs lacked.
   Same platform-face approach as the hero cue - the page loads no emoji
   webfont, so no colour token applies here. */
.feel-chip__emoji {
	flex: none;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	font-size: 1.28em;
	line-height: 1;
	/* Emoji faces carry a tall ascent; nudge them onto the text's optical
	   centre rather than letting the box centre them. */
	transform: translateY(0.04em);
}

.feel-chip__label { min-width: 0; }

.feel__conversion {
	margin-top: clamp(48px, 5vw, 76px);
	padding: 0;
	border: 0;
	text-align: center;
}

/* Title band: the block's headline on solid plum above the picture, so
   it never lands on a face. */
.feel__closer-top {
	padding: clamp(22px, 2.8vw, 40px) clamp(16px, 3vw, 44px) 0;
	text-align: center;
}

/* The card inside the box. Same material as the recall panel and the
   Clicks cards (violet hairline, top bloom) so it belongs to the family,
   sitting a step lighter than the plum band it rests on. */
.feel__closer-card {
	position: relative;
	/* 54rem: the five format chips measure 752px in a row at their
	   natural padding; this plus the trimmed chip padding is what keeps
	   them on one line at desktop with ~40px to spare. */
	max-width: 54rem;
	margin: 0 auto;
	padding: clamp(24px, 3vw, 40px) clamp(20px, 3.6vw, 48px) clamp(26px, 3.2vw, 42px);
	border: 1px solid rgba(109, 40, 217, 0.22);
	border-radius: clamp(18px, 2vw, 26px);
	/* Light on the plum: this card is the hinge between the recall panel
	   and the photo, so it takes a near-white ground and becomes the
	   brightest thing in the region. The violet glow does the lifting a
	   drop shadow cannot do against a dark surround. */
	background:
		radial-gradient(90% 80% at 50% -20%, rgba(139, 92, 246, 0.14), transparent 72%),
		#FBFAFE;
	/* Layered elevation, same stack as the audience cards: contact
	   shadow through to ambient spread, each with a real offset. The
	   inset hairline is the light catching the top edge. A zero-offset
	   violet halo sat here before, which is decoration, not depth. */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 1px 2px rgba(10, 4, 20, 0.28),
		0 6px 14px rgba(10, 4, 20, 0.26),
		0 18px 38px rgba(10, 4, 20, 0.30),
		0 44px 88px rgba(10, 4, 20, 0.34);
	/* The closer sets a heavy text-shadow so its copy survives the
	   photograph. On this white ground that same shadow smears every
	   word, so the card cancels it for its own contents. */
	text-shadow: none;
}

.feel__role {
	margin: 0 auto;
	font-family: var(--font-cta);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -1.4px;
	color: #1B1033;
	text-wrap: balance;
}

/* The mark stands in for the word: its own line, sized to the type it
   replaces. The light-ground logo file, so the wordmark stays black
   rather than the silver cut made for dark panels. */
.feel__role-logo {
	display: block;
	width: clamp(150px, 15vw, 200px);
	height: auto;
	margin: 0 auto 0.42em;
}

.feel__role-text { display: block; }

/* The payoff half of the line in lavender, under the house swash. */
.feel__role-mark {
	position: relative;
	display: inline;
	white-space: nowrap;
	color: var(--violet-500);
}

.feel__role-mark svg {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.2em;
	width: 100%;
	height: 0.38em;
	overflow: visible;
	pointer-events: none;
}

.feel__role-mark path {
	fill: none;
	stroke: url(#bv-role-mark-grad);
	stroke-width: 7;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.feel__role-sub {
	margin: clamp(16px, 1.8vw, 24px) auto 0;
	max-width: 40rem;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.55;
	color: #574676;
	text-wrap: pretty;
}

/* The five formats as chips under the lead line: hairline pills in the
   card's own material, each led by its glyph, wrapping as a centred row
   so on a phone they stack into two or three rows instead of one long
   sentence breaking mid-phrase. */
.feel__formats {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 10px;
	margin: clamp(14px, 1.6vw, 20px) auto 0;
	padding: 0;
}

.feel__formats li {
	display: inline-flex;
	align-items: center;
	gap: 0.42em;
	padding: 8px 12px 8px 10px;
	border: 1px solid rgba(109, 40, 217, 0.18);
	border-radius: 999px;
	background: rgba(109, 40, 217, 0.07);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.005em;
	color: #2E1065;
	white-space: nowrap;
}

.feel__formats i {
	font-size: 1.15em;
	line-height: 1;
	color: var(--violet-500);
}

/* Phones: the swash needs one unbroken line under it; below this the
   payoff wraps and takes a straight rule instead, like the recall card. */
@media (max-width: 620px) {
	.feel__role-mark { white-space: normal; }
	.feel__role-mark svg { display: none; }
	.feel__role-text::after {
		content: "";
		display: block;
		width: clamp(96px, 34%, 160px);
		height: 3px;
		margin: 0.42em auto 0;
		border-radius: 999px;
		background: linear-gradient(90deg, var(--violet-600), var(--violet-400));
	}
}

/* Closing block: one dark box, three tiers. The title band on top is
   solid plum; the photograph (the director cueing the singer through the
   booth glass, the sentence made literal) sits under it and fades UP into
   the band through a seam scrim, so the two read as one surface rather
   than a caption stapled to a picture. The couplet rides the picture's
   lower edge over a bottom scrim. Nothing sits on a face. Edge and shadow
   match the recall card above. */
.feel__closer {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0;
	border: 1px solid rgba(139, 92, 246, 0.34);
	border-radius: clamp(24px, 2.6vw, 34px);
	background: #150C29;
	box-shadow: 0 26px 58px rgba(28, 15, 51, 0.22);
	color: #fff;
	/* Real offset and blur: lifts the type off the photo's mid-tones,
	   it is not a halo. */
	text-shadow: 0 2px 6px rgba(10, 4, 20, 0.55), 0 12px 32px rgba(10, 4, 20, 0.45);
}

.feel__closer-frame {
	display: grid;
	align-content: end;
	justify-items: center;
	aspect-ratio: 3 / 2;
	padding: 8% clamp(20px, 4vw, 56px) 7%;
	background:
		linear-gradient(180deg, #150C29 0%, rgba(21, 12, 41, 0.55) 14%, rgba(21, 12, 41, 0) 30%),
		linear-gradient(180deg, rgba(13, 6, 24, 0) 40%, rgba(13, 6, 24, 0.42) 64%, rgba(13, 6, 24, 0.86) 100%),
		var(--feel-closer-photo) center / cover no-repeat;
}


/* The payoff couplet; sizes are fitted so line 2 holds one line from
   992 (see the ladder). Base is the phone size. */
.feel__closer-copy {
	margin: 0;
	font-family: var(--font-cta);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -1.4px;
	text-align: center;
	text-wrap: balance;
}

.feel__closer-line { display: block; }

.feel__closer em {
	font-style: normal;
	color: #C4B5FD;
	margin-top: 0.12em;
}

/* The payoff word in the hero's gold: "ALIVE!" up top, "Performances"
   down here, the page's one warm note landing on both ends of the same
   argument. Weight stays at the line's 600 on purpose: 800 would widen
   the word past the fitted one-line ceiling at 992 and 1200. */
.feel__closer em b {
	font-weight: inherit;
	color: var(--alive-gold);
}

@media (min-width: 768px) {
	.feel__title { font-size: 38px; letter-spacing: -2px; }
	.feel__lead { font-size: 22px; }
	.feel__role { font-size: 34px; letter-spacing: -1.8px; }
	.feel__role-sub { font-size: 17px; }
	.feel__closer-copy { font-size: 40px; letter-spacing: -1.8px; }
}
@media (min-width: 992px) {
	.feel__title { font-size: 44px; letter-spacing: -2.4px; }
	.feel__role { font-size: 38px; letter-spacing: -2px; }
	/* Line 2 holds one line from here: measured ceilings are 44.9px in
	   the 864px measure at 992 and 52.2px in the 1002px measure at 1200,
	   each backed off ~4%. At 768 the couplet is allowed to wrap. */
	.feel__closer-copy { font-size: 43px; letter-spacing: -2px; }
}
@media (min-width: 1200px) {
	.feel__title { font-size: 52px; letter-spacing: -2.8px; }
	.feel__lead { font-size: 24px; }
	.feel__role { font-size: 44px; letter-spacing: -2.4px; }
	.feel__role-sub { font-size: 19px; }
	.feel__closer-copy { font-size: 50px; letter-spacing: -2.4px; }
}

@media (max-width: 767px) {
	.feel-swiper .swiper-slide { top: 0; }
}

@media (max-width: 559px) {
	.feel-chips { grid-template-columns: 1fr; }
	.feel-chips li,
	.feel-chips li:last-child { grid-column: auto; border-left: 0; }
	.feel__closer { border-radius: 20px; }
	.feel__closer-frame { aspect-ratio: 4 / 3; }
}

/* The FEEL section is built as switchable variants; the carousel is the
   one that shipped. Anything without .is-on stays out of the flow. */
.feel-variant:not(.is-on) { display: none; }

/* ---------- Stitch: recall panel + photo closer as one composition ----------
   Carousel variant only. The two dark boxes close to a 12px seam and the
   closer's title card floats ACROSS that seam, half in each, so the pair
   reads as one stacked composition rather than two unrelated slabs. The
   recall panel grows bottom padding by the same amount so its list never
   sits under the card, and the closer drops its overflow clip so the card
   can leave the box (the photo frame takes its own bottom radius so the
   corners stay clean). --stitch lives on the section because a custom
   property on the variant would not reach its sibling. */
.feel { --stitch: clamp(96px, 11vw, 150px); }

.feel-variant[data-feel-variant="a"] .feel__proof {
	padding-bottom: calc(clamp(38px, 4.2vw, 60px) + var(--stitch));
}

.feel-variant[data-feel-variant="a"].is-on ~ .feel__copy { margin-top: 12px; }
.feel-variant[data-feel-variant="a"].is-on ~ .feel__copy .feel__conversion { margin-top: 0; }

.feel-variant[data-feel-variant="a"].is-on ~ .feel__copy .feel__closer {
	overflow: visible;
	z-index: 2;
}

.feel-variant[data-feel-variant="a"].is-on ~ .feel__copy .feel__closer-frame {
	border-radius: 0 0 clamp(24px, 2.6vw, 34px) clamp(24px, 2.6vw, 34px);
}

.feel-variant[data-feel-variant="a"].is-on ~ .feel__copy .feel__closer-top {
	margin-top: calc(-1 * var(--stitch));
	padding-top: 0;
}

/* ---------- /TEMPORARY feel A/B ---------- */

/* ============================================================
   VS — ClipBee's vsbg-section ported.
   Blueprint-glow bg (theirs hue-shifted violet), zalando title
   with the brand pill, two 43.79% cards: light "without" card
   with photo and red X list, black "with" card (its own violet
   glow bg) with autoplay clip and gradient check circles, and
   the handwritten VS sticker floating between them.
   ============================================================ */
.vs {
	background-color: #fff;
	background-image: var(--vs-bg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	padding: 3.5% 0 6%;
}

.vs__wrap {
	width: min(100% - 2rem, 1140px);
	margin-inline: auto;
	text-align: center;
}

/* Title: ClipBee h1 lg54 md50 sm42 xs30 w600 lh110 zalando, ls -2.7 */
.vs__title {
	margin: 0;
	font-family: var(--font-cta);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.7px;
	color: #1B1033;
}

.vs__small { font-size: 0.55em; font-weight: 600; }

/* ClipBee .vs-span: gold pill, 28/20/20/10 corners -> house violet */
.vs__pill {
	display: inline-block;
	padding: 3px 25px;
	border-radius: 28px 20px 20px 10px;
	background: var(--grad-action);
	color: #fff;
}

/* Sub: lg24 md22 sm20 xs18 w400 lh130 */
.vs__sub {
	margin: 2% 0 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	color: #26262d;
}

.vs__sub strong { font-weight: 700; }

/* ---------- Card row ---------- */
.vs__grid {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
}

/* ClipBee .vs-img: absolute between the cards */
.vs__sticker {
	position: absolute;
	top: 59%;
	left: 50.5%;
	transform: translate(-50%, -50%);
	z-index: 3;
}

/* ClipBee .vsbg-box-out 43.79% + 19px padding + .vsbg-box */
.vs-card {
	position: relative;
	z-index: 2;
	width: 43.79%;
	min-width: 0; /* flex/grid default min-width:auto would let a 1920px video lock the card open */
	margin: 3% 19px 0;
	border-radius: 31px;
	padding: 40px 44px 25px;
	text-align: center;
	overflow: hidden;
}

.vs-card--without {
	background-color: #f2f2f2;
	color: #26262d;
}

.vs-card--with {
	background-color: #000;
	background-image: var(--vs-with-bg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	color: #fff;
}

/* Card titles: lg30 md28 sm24 xs22 w700 lh130 zalando */
.vs-card h3 {
	margin: 0;
	font-family: var(--font-cta);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.3px;
}

.vs-card__logo {
	width: clamp(110px, 9vw, 145px);
	height: auto;
	vertical-align: middle;
	position: relative;
	top: -3px;
}

.vs-card__photo {
	display: block;
	width: 100%;
	max-width: 100%;
	/* Both stills are 16:9, but the masters differ by ~1% (2752x1536 vs
	   2048x1152). Pinning the ratio keeps the two cards on the same lines
	   even if a looping video (native 1920×1088) is dropped in instead. */
	aspect-ratio: 16 / 9;
	height: auto;
	margin-top: 24px;
	border-radius: 23px;
	overflow: hidden;
}

.vs-card__photo {
	object-fit: cover;
}

.vs-card video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Lists (ClipBee .without-list / .with-list) ---------- */
.vs-list {
	list-style: none;
	margin: 33px 0 0;
	padding: 0;
}

.vs-list--with { margin-top: 28px; padding: 0 17px 0 9px; }

.vs-list li {
	position: relative;
	margin: 5% 0;
	padding: 0 0 0 26px;
	text-align: left;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.2px;
}

.vs-list--with li { padding-left: 36px; color: #b7b7b7; }

.vs-list li i { position: absolute; left: 0; }

.vs-list--without li i {
	top: 1px;
	color: #d82a2a;
	font-size: 20px;
}

/* ClipBee: 24px gradient circle (gold -> violet), check inside */
.vs-list--with li i {
	top: 2px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 14px;
	color: #fff;
	background: linear-gradient(-45deg, var(--violet-400) 0%, var(--violet-600) 100%);
}

.vs-alive { color: var(--violet-300); font-weight: 700; }

@media (min-width: 768px) {
	.vs__title { font-size: 42px; letter-spacing: -2.7px; }
	.vs__sub { font-size: 20px; }
	.vs-card h3 { font-size: 24px; }
	.vs-list li { font-size: 18px; }
}
@media (min-width: 992px) {
	.vs__title { font-size: 50px; }
	.vs__sub { font-size: 22px; }
	.vs-card h3 { font-size: 28px; }
}
@media (min-width: 1200px) {
	.vs__title { font-size: 54px; }
	.vs__sub { font-size: 24px; }
	.vs-card h3 { font-size: 30px; }
	.vs-list li { font-size: 20px; }
}

@media (max-width: 991px) {
	.vs-card { width: 48%; margin: 3% 1% 0; padding: 30px 22px 22px; }
}
@media (max-width: 767px) {
	.vs { padding: 30px 0; }
	.vs-card { width: 100%; margin: 20px 0 0; padding: 20px 10px 25px; }
	.vs__sticker { width: 50px; top: 49%; }
	.vs-list { margin-top: 20px; }
	.vs-list li { margin: 12px 0; }
}

/* Row alignment across the two cards.
   The left title is one line ("Traditional AI Text-to-Speech") while the right
   one runs to two, because the BeeVoice logo wraps below its text. That pushed
   the right photo ~39px lower than the left at wide viewports. Subgrid makes
   the cards share the grid's rows, so titles, photos and each paired bullet
   line up even when either side wraps, without a guessed fixed height. */
@media (min-width: 768px) {
	@supports (grid-template-rows: subgrid) {
		.vs__grid {
			display: grid;
			/* Title, photo, then seven shared comparison rows. */
			grid-template-rows: repeat(9, auto);
			justify-content: center;
			margin-top: 3%;
		}

		.vs-card {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: span 9;
			/* Overrides the percentage widths the flex fallback needs; the
			   grid columns carry the sizing now. */
			width: auto;
			margin: 0;
		}

		.vs-list {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: 3 / span 7;
			margin-top: 28px;
		}
		.vs-list li { margin: 0; padding-bottom: 20px; }
		.vs-list li:last-child { padding-bottom: 0; }
		.vs-list li i { top: 1px; width: 24px; height: 24px; display: grid; place-items: center; }
	}
}

@media (min-width: 992px) {
	@supports (grid-template-rows: subgrid) {
		.vs__grid { grid-template-columns: repeat(2, 43.79%); column-gap: 38px; }
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	@supports (grid-template-rows: subgrid) {
		.vs__grid { grid-template-columns: repeat(2, 48%); column-gap: 2%; }
	}
}


/* ============================================================
   CAST — a performer for every role.
   Revoicer-style voice grid rebuilt in the house language: white
   cards, violet-family tints only, portrait on its baked tint,
   white play circle riding the photo edge, name, accent, description
   and playback time.
   Cards join the shared audience-player contract, so
   playback is exclusive page-wide and .is-playing lights the card.
   ============================================================ */
.cast {
	margin: clamp(14px, 1.6vw, 26px) var(--gutter) 0;
	border-radius: clamp(20px, 2.4vw, 40px);
	background:
		radial-gradient(64% 52% at 50% -6%, rgba(76, 29, 149, 0.3), transparent 64%),
		linear-gradient(180deg, #140a24 0%, #0d0618 48%, #0d0618 100%);
	padding: clamp(56px, 6vw, 100px) 0 clamp(64px, 6.5vw, 110px);
}

.cast__wrap {
	width: min(100% - 2rem, 1240px);
	margin-inline: auto;
	text-align: center;
}

/* Title: white-section zalando ladder */
.cast__title {
	margin: 0;
	font-family: var(--font-cta);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -1.6px;
	color: #fff;
	text-wrap: balance;
}

.cast__title em { font-style: normal; color: var(--violet-300); }
.cast__title-highlight { color: var(--alive-gold); }

/* Weight 300 at 17px was thinner than body copy anywhere else on this
   dark ground, which is where the washed-out look came from. Up a step
   in size, and to 400 so the stems actually hold. */
.cast__sub {
	margin: 16px auto 0;
	max-width: 1040px;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.55;
	color: #C6BBDC;
	text-wrap: balance;
}

/* The formats and the promise, picked out so the sentence scans without
   having to be read whole. */
.cast__sub b {
	font-weight: 600;
	color: #EDE7FB;
}

/* The cue that hands the reader to the cast. Upright rather than
   italic, a step up in size and weight, and lifted off violet-300 so it
   reads as an instruction instead of a caption. */
.cast__cue {
	margin: clamp(26px, 3vw, 44px) 0 0;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0.005em;
	color: #EDE7FB;
}

/* The same gold the hero and the closer use, so the word carries the
   page's one warm note wherever ALIVE appears. */
.cast__cue b {
	font-weight: 700;
	color: var(--alive-gold);
}

/* ---------- Grid ---------- */
.cast-cards {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: clamp(20px, 2.2vw, 32px) 0 0;
	padding: 0;
}

/* ---------- Card ---------- */
.cast-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-radius: 18px;
	padding: 10px;
	background: #fff;
	box-shadow: 0 18px 40px rgba(5, 2, 12, 0.45);
	text-align: left;
	transition: box-shadow 0.2s ease, outline-color 0.2s ease;
	outline: 2px solid transparent;
}

.cast-card.is-playing {
	outline-color: var(--violet-300);
	box-shadow: 0 20px 48px rgba(76, 29, 149, 0.55);
}

/* The performer pops out of the frame: the portrait is an alpha cutout,
   the tint is painted here, and the head rises above the block. The card
   must not clip that pop, so it overrides the audience base's hidden
   overflow (cast cards have no glyph to crop anyway). */
.cast-card { overflow: visible; }

.cast-card__photo {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	background: var(--tint, var(--violet-600));
	/* Headroom inside the card so the head lands in the card's own white
	   margin instead of escaping the card entirely. */
	margin-top: 11%;
	/* Frame the figure on the left, right and bottom edges but leave the
	   top open: this is the whole pop-out effect. */
	clip-path: inset(-16% 0 0 0 round 12px);
}

.cast-card__photo img {
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	/* Scaled past the frame and bottom-anchored, so the extra height has
	   nowhere to go but out of the top. */
	width: 114%;
	max-width: none;
	height: auto;
}

/* Centred on the frame's bottom edge, over the chest rather than the
   face, and set in the page's action gradient so it reads as THE thing
   to press on the card rather than a watermark. */
.cast-card .audience-play {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	width: min(154px, calc(100% - 16px));
	height: 44px;
	grid-template-columns: 22px auto;
	justify-content: center;
	gap: 7px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--grad-action);
	color: #fff;
	border: 1.5px solid rgba(237, 233, 254, .9);
	box-shadow: 0 5px 16px rgba(34, 12, 64, .32), 0 0 0 3px rgba(196, 181, 253, .3);
	transition: transform 0.2s var(--ease-lift), background-color 0.2s ease,
		border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.cast-card .audience-play:hover {
	transform: translateX(-50%) translateY(-2px);
	box-shadow: 0 12px 30px rgba(10, 4, 20, 0.52);
	filter: brightness(1.12);
}

/* The base :active rule is a bare scale(), which would drop the centring
   translate; restate both here. */
.cast-card .audience-play:active {
	transform: translateX(-50%) scale(0.96);
}

/* ---------- Playing ----------
   Hover and playing used to be the same brightness bump, so across ten
   cards the only signal that one was speaking was a pause glyph you had
   to hunt for. Now the disc inverts to white and carries a live
   equaliser: obvious from across the deck, and unmistakably not a hover.
   Pointing at it swaps the bars back for the pause glyph, which is the
   control. */
.cast-card.is-playing .audience-play {
	background: #fff;
	border-color: #fff;
	color: var(--violet-600);
	filter: none;
	box-shadow: 0 10px 28px rgba(76, 29, 149, 0.55);
}

.cast-card.is-playing .audience-play:hover {
	transform: translateX(-50%) translateY(-2px);
	box-shadow: 0 14px 34px rgba(76, 29, 149, 0.6);
}

.cast-eq {
	grid-area: 1 / 1;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 3px;
	height: 20px;
}

.cast-eq span {
	display: block;
	width: 3px;
	border-radius: 2px;
	background: currentColor;
	animation: audience-eq 0.55s ease-in-out infinite alternate;
}

/* Uneven heights and negative delays: the three bars never march in
   step, which is what separates a meter from a loading spinner. */
.cast-eq span:nth-child(1) { height: 58%; animation-delay: -0.31s; }
.cast-eq span:nth-child(2) { height: 100%; animation-delay: -0.05s; }
.cast-eq span:nth-child(3) { height: 76%; animation-delay: -0.43s; }

.cast-card.is-playing .audience-play .ph-pause { display: none; }
.cast-card.is-playing .audience-play .cast-eq { display: flex; }

.cast-card.is-playing .audience-play:hover .cast-eq,
.cast-card.is-playing .audience-play:focus-visible .cast-eq { display: none; }
.cast-card.is-playing .audience-play:hover .ph-pause,
.cast-card.is-playing .audience-play:focus-visible .ph-pause { display: block; }

.cast-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 12px 6px 6px;
}

.cast-card__time {
	margin-top: auto;
	padding-top: 10px;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: #574676;
}

.cast-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.cast-card__head h3 {
	margin: 0;
	font-family: var(--font-cta);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.4px;
	color: #1B1033;
}

.cast-card__tag {
	flex: none;
	max-width: 100%;
	box-sizing: border-box;
	padding: 3px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--tint, var(--violet-600)) 14%, #fff);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #2E1065;
	white-space: normal;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.cast-card__body p {
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	color: #574676;
	text-wrap: pretty;
}
.cast-card .audience-play i { font-size: 21px; }
.cast-card .audience-play__label { grid-area: 1 / 2; font-size: 12px; font-weight: 650; line-height: 1; white-space: nowrap; }
.cast-card .audience-play::after {
	content: "";
	position: absolute;
	inset: -5px;
	border: 2px solid rgba(196, 181, 253, .7);
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
}
.cast.is-cue-visible:not(.has-played) .cast-card:not(.is-playing) .audience-play::after { animation: cast-play-cue 2.8s ease-out var(--cast-cue-delay, 0s) infinite; }
.cast-card:nth-child(2n) { --cast-cue-delay: .3s; }
.cast-card:nth-child(3n) { --cast-cue-delay: .6s; }
@keyframes cast-play-cue {
	0%, 15% { opacity: .65; transform: scale(1); }
	65%, 100% { opacity: 0; transform: scale(1.1, 1.22); }
}
.cast-card .audience-play:focus-visible { outline: 3px solid #ddd6fe; outline-offset: 4px; }
@media (max-width: 480px) {
	.cast-card .audience-play { width: calc(100% - 8px); max-width: 154px; height: 38px; grid-template-columns: 18px auto; gap: 5px; padding: 0 5px; }
	.cast-card .audience-play i { font-size: 18px; }
	.cast-card .audience-play__label { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
	.cast.is-cue-visible:not(.has-played) .audience-play::after { animation: none; }
}

/* Voice character leads; suggested uses sit on their own quieter line. */
.cast-card__character {
	display: block;
	color: #321557;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.35;
}
.cast-card__uses {
	display: block;
	margin-top: 5px;
	/* Use the available card width instead of moving words back to pad
	   the final line, which leaves these short descriptions ragged. */
	text-wrap: wrap;
}

@media (min-width: 768px) {
	.cast__title { font-size: 40px; letter-spacing: -2px; }
	.cast__sub { font-size: 20px; }
	.cast-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 992px) {
	.cast__title { font-size: 48px; letter-spacing: -2.4px; }
	.cast__sub { font-size: 22px; }
	.cast__cue { font-size: 23px; }
	.cast-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	.cast__title { font-size: 56px; letter-spacing: -2.8px; }
	.cast-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.cast-card__head h3 { font-size: 18px; }
	.cast-card__body p { font-size: 13.5px; }
}

/* ============================================================
   FEAT — BeeVoice Unmatched Features.
   ClipBee's section9 checkerboard, verbatim geometry: rows of two
   50% slabs with 20px gutters, 30px inner radius and square outer
   corners (slabs run to the viewport edge), image half + copy
   half. Their yellow rgb(255,223,96) becomes light lavender with
   dark ink; the black slabs stay black.
   ============================================================ */
.feat {
	background: #fff;
	padding: clamp(48px, 5.5vw, 88px) 0 clamp(40px, 4.5vw, 72px);
}

.feat__title {
	margin: 0 auto;
	text-align: center;
	font-family: var(--font-cta);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -1.6px;
	color: #1B1033;
}

.feat__rows { margin-top: 2%; }

.feat__row {
	display: flex;
	gap: 20px;
	padding-top: 20px;
}

.feat-slab {
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #E7E0F9;
	color: #26262d;
}

.feat-slab--left {
	border-radius: 0 30px 30px 0;
	padding: 30px 8% 30px 0;
	text-align: right;
}

.feat-slab--right {
	border-radius: 30px 0 0 30px;
	padding: 30px 0 30px 8%;
	flex-direction: row-reverse;
}

.feat-slab--dark {
	background-color: #000;
	color: #fff;
}

.feat-slab__img { width: 50%; }

.feat-slab__img img {
	display: block;
	margin: auto;
	width: 100%;
	max-width: 72%;
	height: auto;
}

.feat-slab__copy { width: 50%; }

.feat-slab__copy h3 {
	margin: 0;
	font-family: var(--font-cta);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -1.2px;
}

.feat-slab__copy p {
	margin: 6px 0 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.18px;
	color: #26262d;
}

.feat-slab--dark .feat-slab__copy p { color: #fff; }

@media (min-width: 768px) {
	.feat__title { font-size: 45px; letter-spacing: -2.4px; }
	.feat-slab__copy h3 { font-size: 26px; }
}
@media (min-width: 992px) {
	.feat__title { font-size: 48px; }
	.feat-slab__copy h3 { font-size: 30px; }
	.feat-slab__copy p { font-size: 18px; }
}
@media (min-width: 1200px) {
	.feat__title { font-size: 58px; letter-spacing: -2.9px; }
	.feat-slab__copy h3 { font-size: 39px; }
	.feat-slab__copy p { font-size: 20px; }
}
@media (min-width: 1500px) {
	.feat__title { font-size: 66px; }
}

/* Mobile: stacked centered cards, ClipBee's 20px radius all round. */
@media (max-width: 767px) {
	.feat__row { flex-direction: column; gap: 0; padding-top: 0; }
	.feat-slab,
	.feat-slab--left,
	.feat-slab--right {
		width: 96%;
		margin: 20px auto 0;
		flex-direction: column;
		gap: 20px;
		border-radius: 20px;
		padding: 20px 15px 25px;
		text-align: left;
	}
	.feat-slab__copy,
	.feat-slab__img { width: 100%; }
	.feat-slab__copy { order: 1; }
	.feat-slab__img { order: 2; }
	.feat-slab__img img { max-width: 78%; }
}

/* ============================================================
   LAUDIO — "Listen to REAL Audios".
   ClipBee's section10 ported: soft sparked bg (hue-shifted),
   alternating 47/46 rows, tilted icon chip + zalando heading +
   copy, and the clip framed in their textured slab (violet now)
   with a "Made with BeeVoice" sticker riding the frame edge.
   Clips reuse the clip-card contract (click-to-play with sound,
   exclusive page-wide) plus a "Click to Play" cue label.
   ============================================================ */
.laudio {
	background-color: #fff;
	background-image: var(--laudio-bg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	padding: 4.5% 0 8%;
}

.laudio__wrap {
	width: min(100% - 2rem, 1140px);
	margin-inline: auto;
}

.laudio__title {
	margin: 0 auto;
	text-align: center;
	font-family: var(--font-cta);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -1.6px;
	color: #1B1033;
}

.laudio__br { display: none; }

/* ---------- Rows (ClipBee: 47% copy / 46% media) ---------- */
.laudio__row {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 55px;
}

.laudio__row:first-of-type { margin-top: 7.5%; }

.laudio__detail {
	width: 47%;
	padding: 0 12% 0 2%;
}

.laudio__row--flip .laudio__detail {
	order: 2;
	padding: 0 2% 0 11%;
}

.laudio__media { width: 46%; }
.laudio__row--flip .laudio__media { order: 1; }

/* Tilted dark icon chip, ClipBee's ficon stickers in CSS/Phosphor. */
.laudio__icon {
	display: inline-grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border-radius: 20px;
	background: #10081c;
	color: var(--violet-400);
	font-size: 30px;
	transform: rotate(-8deg);
	box-shadow: 0 10px 22px rgba(28, 15, 51, 0.22);
	margin-bottom: 16px;
}

.laudio__detail h3 {
	margin: 0;
	font-family: var(--font-cta);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.045em;
	color: #1B1033;
}

.laudio__detail p {
	margin: 10px 0 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.2px;
	color: #26262d;
}

/* ---------- Framed clip (ClipBee .feature-vid-box) ---------- */
.laudio__frame {
	position: relative;
	isolation: isolate;
	border-radius: 28px;
	padding: 22px;
	border: 1px solid rgba(139, 92, 246, 0.28);
	background-color: #12091d;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='286' viewBox='0 0 340 286'%3E%3Cpath d='M82 3 148 41v76l-66 38-66-38V41Z' fill='none' stroke='%23ddd6fe' stroke-opacity='.28' stroke-width='1.4'/%3E%3Cpath d='M246 71 326 117v92l-80 46-80-46v-92Z' fill='none' stroke='%23a78bfa' stroke-opacity='.18' stroke-width='1.4'/%3E%3Cpath d='m52 190 44 25v51l-44 25-44-25v-51Z' fill='none' stroke='%238b5cf6' stroke-opacity='.11' stroke-width='1.2'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='286' viewBox='0 0 340 286'%3E%3Cpath d='M82 3 148 41v76l-66 38-66-38V41Z' fill='none' stroke='%23ddd6fe' stroke-opacity='.22' stroke-width='1.4'/%3E%3Cpath d='M246 71 326 117v92l-80 46-80-46v-92Z' fill='none' stroke='%23a78bfa' stroke-opacity='.15' stroke-width='1.4'/%3E%3Cpath d='m52 190 44 25v51l-44 25-44-25v-51Z' fill='none' stroke='%238b5cf6' stroke-opacity='.09' stroke-width='1.2'/%3E%3C/svg%3E"),
		radial-gradient(75% 100% at 0% 0%, rgba(76, 29, 149, 0.42), transparent 62%),
		radial-gradient(75% 100% at 100% 100%, rgba(46, 16, 101, 0.32), transparent 64%),
		linear-gradient(145deg, #180d28 0%, #12091d 58%, #0d0715 100%);
	background-repeat: no-repeat;
	background-position: -90px -88px, calc(100% + 90px) calc(100% + 88px), left top, right bottom, center;
	background-size: 340px 286px, 340px 286px, cover, cover, cover;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 22px 44px rgba(28, 15, 51, 0.18);
}

/* The clip-card chrome comes from the frame, not the card. */
.laudio-card {
	border: 0;
	border-radius: 15px;
	background: #000;
	box-shadow: none;
}

.laudio-card video { border-radius: 15px; }

.hive__media .clip-card,
.hive__media .clip-card video { border-radius: 0; }
.hive__media .laudio__badge { right: 12px; bottom: 12px; }

/* Stack the play circle over its cue label, centered as a group. */
.laudio-card .clip-card__play { align-content: center; row-gap: 12px; }

.laudio__cue {
	position: relative;
	justify-self: center;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--violet-700);
	box-shadow: 0 6px 18px rgba(28, 15, 51, 0.3);
}

.laudio-card .clip-card__play .ph-stop { display: none; }

/* Match the play disc, with a lighter surface while the video plays. */
.laudio-card.is-playing .clip-card__play {
	inset: 50% auto auto 50%;
	width: clamp(52px, 5vw, 66px);
	height: clamp(52px, 5vw, 66px);
	transform: translate(-50%, -50%);
	row-gap: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.48);
	box-shadow: 0 6px 20px rgba(28, 15, 51, 0.14);
	transition: background-color 160ms ease, border-color 160ms ease;
}
.laudio-card.is-playing .clip-card__play::before,
.laudio-card.is-playing .clip-card__play .laudio__cue { display: none; }
.laudio-card.is-playing .clip-card__play .ph-stop { display: grid; }
.laudio-card.is-playing .clip-card__play i {
	width: auto;
	height: auto;
	padding: 0;
	font-size: clamp(1.3rem, 1.4vw, 1.7rem);
	color: var(--violet-700);
	background: none;
	box-shadow: none;
	opacity: 1;
	transform: none;
}
.laudio-card.is-playing .clip-card__play:hover,
.laudio-card.is-playing .clip-card__play:focus-visible {
	background: rgba(255, 255, 255, 0.8);
}
.laudio-card.is-playing .clip-card__play:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* "Made with BeeVoice" sticker riding the frame's bottom edge. */
.laudio__badge {
	position: absolute;
	right: -12px;
	/* Was flush with the card's bottom edge, which read as slipped rather
	   than placed. Sits on its own inset now, matching the overhang. */
	bottom: 26px;
	z-index: 2;
	display: grid;
	justify-items: center;
	gap: 2px;
	padding: 11px 22px;
	border-radius: 12px 12px 12px 5px;
	background: var(--grad-badge);
	font-family: var(--font-cta);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.1px;
	text-align: center;
	color: rgba(255, 255, 255, 0.82);
	box-shadow: 0 10px 20px rgba(28, 15, 51, 0.3);
}

.laudio__badge b {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.3px;
	color: #fff;
}

.laudio__row--flip .laudio__badge {
	right: auto;
	left: -12px;
	border-radius: 12px 12px 5px 12px;
}

@media (min-width: 768px) {
	.laudio__title { font-size: 45px; letter-spacing: -2.4px; }
	.laudio__detail h3 { font-size: 30px; }
	.laudio__detail p { font-size: 18px; }
}
@media (min-width: 992px) {
	.laudio__title { font-size: 48px; }
	.laudio__br { display: block; }
}
@media (min-width: 1200px) {
	.laudio__title { font-size: 58px; letter-spacing: -2.9px; }
	.laudio__detail h3 { font-size: 34px; }
	.laudio__detail p { font-size: 20px; }
}
@media (min-width: 1500px) {
	.laudio__title { font-size: 66px; }
}

@media (max-width: 767px) {
	.laudio { padding: 40px 0 56px; }
	.laudio__row,
	.laudio__row--flip { flex-direction: column; margin-top: 40px; }
	.laudio__row:first-of-type { margin-top: 30px; }
	.laudio__detail,
	.laudio__row--flip .laudio__detail { order: 1; width: 100%; padding: 0 2%; }
	.laudio__media,
	.laudio__row--flip .laudio__media { order: 2; width: 100%; margin-top: 18px; }
	.laudio__icon { width: 52px; height: 52px; font-size: 25px; border-radius: 16px; margin-bottom: 12px; }
	.laudio__frame { padding: 11px; border-radius: 20px; }
	.laudio-card, .laudio-card video { border-radius: 12px; }
	.laudio__badge { right: 8px; bottom: 18px; }
	.laudio__row--flip .laudio__badge { left: 8px; }
}

/* ============================================================
   MBACK — the guarantee.
   ClipBee's money-back-section verbatim (minus their negative
   overlap margins): sparked bg, 72px-radius soft box with its own
   glow bg, the 60-day card image (hue-shifted violet), quote h2,
   claim h3 and the pledge copy with bold runs.
   ============================================================ */
.mback {
	background-color: #fff;
	background-image: var(--mback-bg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 4% 0 6%;
}

.mback__wrap {
	width: min(100% - 2rem, 1140px);
	margin-inline: auto;
}

.mback__box {
	width: 97.9%;
	margin: auto;
	border-radius: 72px;
	padding: 7.5% 4%;
	text-align: center;
	background-color: #f5f6fb;
	background-image:
		radial-gradient(70% 55% at 4% 0%, rgba(99, 102, 241, 0.18), transparent 68%),
		radial-gradient(58% 52% at 96% 18%, rgba(76, 29, 149, 0.14), transparent 70%),
		radial-gradient(54% 44% at 62% 100%, rgba(59, 130, 246, 0.1), transparent 72%),
		linear-gradient(145deg, #ffffff 0%, #f4f3f9 52%, #edf1f8 100%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border: 1px solid rgba(46, 16, 101, 0.1);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 36px 59px rgba(28, 15, 51, 0.1);
}

/* h2: ClipBee lg42 md36 sm30 xs25 w600 lh120 zalando */
.mback__quote {
	margin: 0;
	font-family: var(--font-cta);
	font-size: 25px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -1.2px;
	color: #1B1033;
}

.mback__card {
	position: relative;
	overflow: hidden;
	width: min(542px, 86%);
	min-height: 248px;
	margin: 3% auto 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	padding: 34px 28px;
	border: 1px solid rgba(187, 170, 247, 0.22);
	border-radius: 22px;
	background:
		radial-gradient(75% 90% at 12% 0%, rgba(76, 29, 149, 0.34), transparent 62%),
		radial-gradient(70% 90% at 92% 100%, rgba(59, 130, 246, 0.12), transparent 68%),
		linear-gradient(145deg, #11091b 0%, #07060a 58%, #0b0711 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 22px 42px rgba(28, 15, 51, 0.22);
}

.mback__card::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(105deg, transparent 18%, rgba(255, 255, 255, 0.035) 50%, transparent 76%),
		radial-gradient(circle at 50% 50%, rgba(109, 40, 217, 0.13), transparent 36%);
	pointer-events: none;
}

.mback__card-icon,
.mback__card-text {
	position: relative;
	z-index: 1;
}

.mback__card-icon {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border: 1px solid rgba(187, 170, 247, 0.24);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.055);
	box-shadow: 0 12px 28px rgba(46, 16, 101, 0.26);
	font-size: 38px;
	color: var(--violet-300);
}

.mback__card-text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.24em;
	margin: 0;
	font-family: var(--font-cta);
	font-size: clamp(1.65rem, 1.25rem + 1.2vw, 2.35rem);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.04em;
	color: #fff;
	text-wrap: balance;
}

.mback__card-text strong { font-weight: 700; }
.mback__card-text span { color: #ddd6fe; }

/* h4: ClipBee lg30 md28 sm24 xs22 w700 lh130 zalando */
.mback__claim {
	margin: 3% 0 0;
	font-family: var(--font-cta);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -1px;
	color: #1B1033;
}

/* p: ClipBee lg24 md20 sm18 xs18 w400 lh130 */
.mback__copy {
	margin: 2% 0 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.24px;
	color: #26262d;
}

.mback__copy span { font-weight: 700; }

.mback__br { display: none; }

@media (min-width: 768px) {
	.mback__quote { font-size: 36px; letter-spacing: -2.1px; }
	.mback__claim { font-size: 28px; letter-spacing: -1.5px; }
	.mback__copy { font-size: 20px; }
}
@media (min-width: 992px) {
	.mback__quote { font-size: 42px; }
	.mback__claim { font-size: 30px; }
	.mback__copy { font-size: 24px; }
	.mback__br { display: block; }
}

@media (max-width: 767px) {
	.mback { padding: 30px 0 40px; }
	.mback__box { width: 100%; border-radius: 32px; padding: 20px 10px 30px; }
	.mback__card { width: min(92%, 542px); min-height: 210px; gap: 18px; padding: 28px 20px; border-radius: 18px; }
	.mback__card-icon { width: 62px; height: 62px; border-radius: 17px; font-size: 32px; }
	.mback__claim { margin-top: 16px; }
	.mback__copy { margin-top: 14px; }
}

/* ============================================================
   PRICE — the founders offer box.
   ClipBee's section12 table-box verbatim: glow bg, badge pill
   riding the box border, struck anchor line, oversized price,
   check-bullet list (their pricecheck sticker hue-shifted), full
   width gradient buy button, payment strip. Gold becomes the
   house violet gradient throughout.
   ============================================================ */
.price {
	position: relative;
	isolation: isolate;
	background-color: #fff;
	background-image:
		radial-gradient(ellipse 42% 43% at 50% 55%, rgba(139, 65, 233, .72) 0%, rgba(155, 91, 239, .40) 42%, rgba(183, 143, 246, .10) 70%, transparent 100%),
		radial-gradient(ellipse 58% 48% at 50% 57%, rgba(167, 139, 250, .18), transparent 85%);
	padding: 4% 0 3%;
}

/* The PRO honeycomb, softened for a light surface. Both SVG tiles share
   one origin so the occasional filled cells align with the outline hive.
   The mask dissolves the lattice before the heading and section edges. */
.price::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='346.4' viewBox='0 0 200 346.4'%3E%3Cpolygon points='50,0 100,28.87 100,86.6 50,115.47 0,86.6 0,28.87' fill='%238B5CF6' fill-opacity='.07' stroke='%237C3AED' stroke-opacity='.12' stroke-width='1.1'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='173.2' viewBox='0 0 100 173.2'%3E%3Cg fill='none' stroke='%237C3AED' stroke-opacity='.24' stroke-width='1.1'%3E%3Cpolygon points='50,0 100,28.87 100,86.6 50,115.47 0,86.6 0,28.87'/%3E%3Cline x1='50' y1='115.47' x2='50' y2='173.2'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 240px 415.68px, 120px 207.84px;
	background-position: left top;
	-webkit-mask-image: radial-gradient(ellipse 48% 38% at 50% 54%, #000 20%, rgba(0, 0, 0, .8) 45%, transparent 100%);
	mask-image: radial-gradient(ellipse 48% 38% at 50% 54%, #000 20%, rgba(0, 0, 0, .8) 45%, transparent 100%);
}

@media (max-width: 767px) {
	.price {
		background-image: radial-gradient(ellipse 85% 43% at 50% 54%, rgba(139, 65, 233, .38), rgba(183, 143, 246, .12) 62%, transparent 100%);
	}
	.price::before {
		background-size: 160px 277.12px, 80px 138.56px;
		-webkit-mask-image: radial-gradient(ellipse 100% 42% at 50% 53%, #000 25%, transparent 100%);
		mask-image: radial-gradient(ellipse 100% 42% at 50% 53%, #000 25%, transparent 100%);
	}
}

/* Title: ClipBee h3 lg56 md50 sm40 xs30 w600 zalando */
.price__title {
	margin: 0 auto;
	text-align: center;
	font-family: var(--font-cta);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -1.6px;
	color: #1B1033;
}

.price__title b { font-weight: 700; }
.price__br { display: none; }

.price__sub {
	margin: 2% auto 0;
	text-align: center;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	color: #1B1033;
}

/* ClipBee's dashed offer sticker, without the live counter. */
.price__offer-pill {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 32px;
	border: 2px dashed var(--violet-500);
	border-radius: 999px;
	background: #fff;
}

.price__offer-pill i { font-size: 1.25em; color: var(--offer-alert); }
.price__offer-pill b { font-weight: 700; color: #d82a2a; }

/* Seats remaining. The pill is the frame and stays put; only the digits
   travel, so nothing around them shifts. Tabular figures and a min-width
   set to the widest value keep the pill from resizing as the number
   loses a digit. */
.price__offer-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* Reserve the complete remaining / total label, including two digits. */
	min-width: calc(9ch + 20px);
	white-space: nowrap;
	padding: 2px 10px;
	border-radius: 8px;
	background: #1B1033;
	color: #fff;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.price__offer-count__n {
	display: inline-block;
	min-width: 2ch;
	text-align: center;
	will-change: transform, opacity;
}
.price__offer-count__total { margin-left: .3em; }

/* Out, swap while out of frame, back in. The brief blur is what stops
   the travel reading as a jump. */
.price__offer-count__n.is-rolling {
	animation: bv-seat-roll 0.38s var(--ease-lift) both;
}

@keyframes bv-seat-roll {
	0%   { transform: translateY(0);      opacity: 1; filter: blur(0); }
	44%  { transform: translateY(-0.7em); opacity: 0; filter: blur(2px); }
	45%  { transform: translateY(0.7em);  opacity: 0; filter: blur(2px); }
	100% { transform: translateY(0);      opacity: 1; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
	.price__offer-count__n.is-rolling { animation: none; }
}

/* ---------- The box (ClipBee .table-box / .table-box-inn) ---------- */
.price__box {
	width: min(94%, 560px);
	margin-inline: auto;
	padding: 15px;
	margin-top: 3%;
	position: relative;
	z-index: 1;
}

.price__inn {
	border: 2px solid #24095C;
	border-radius: 33px;
	background-color: #fff;
	box-shadow: 0 30px 70px 0 rgba(0, 0, 0, 0.2);
	padding: 0 64px 40px;
	text-align: center;
}

/* Badge pill riding the top border (ClipBee .most-title). */
.price__badge-row {
	margin: 0;
	position: relative;
	top: -20px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.2px;
}

.price__badge {
	display: inline-block;
	padding: 8px 28px;
	border-radius: 50px;
	/* Flat violet-500, the page's own accent step: vivid enough to carry
	   the discount on a white card, and 7.1:1 with the white label. The
	   badge ramp it replaced ran dark at one end and read as a shadow. */
	background: var(--violet-500);
	color: #fff;
}

/* Struck anchor: ClipBee h2 lg32 ... #61587A */
/* The anchor price. Centred on the card's axis with the badge above it,
   not left-aligned against the $67: at 32px it needed 475px in a 398px
   measure, so it broke across two lines and the rule ran ragged through
   the wrap. Sized to hold one line (ceiling 26.8px, backed off ~6%). */
.price__was {
	margin: 9% 0 0;
	font-family: var(--font-cta);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.8px;
	color: #61587A;
	text-align: center;
}

/* A soft, slightly angled red stroke leaves the old amount readable. */
.price__was s {
	position: relative;
	display: inline-block;
	text-decoration: none;
}
.price__was s::after {
	content: "";
	position: absolute;
	left: -1%;
	top: 54%;
	width: 102%;
	height: 2px;
	border-radius: 999px;
	background: rgba(220, 38, 38, .4);
	transform: rotate(-2deg);
	pointer-events: none;
}
.price__was-amount { font-size: 1.2em; font-weight: 700; white-space: nowrap; }

/* Price: ClipBee h1 lg68 md56 sm46 xs36 w800 zalando */
.price__now {
	font-variant-numeric: tabular-nums;
	margin: 4% 0 0;
	font-family: var(--font-cta);
	font-size: 36px;
	font-weight: 800;
	line-height: 1.2;
	color: #1B1033;
	text-align: left;
}

.price__now span {
	font-size: 16px;
	font-weight: 400;
	margin-left: 6px;
	/* .price__now runs tabular-nums so the $67 keeps figure widths, but
	   Zalando widens the SPACE to a figure width under tnum too: the
	   label's word gaps measured 0.73em against ~0.23em everywhere else
	   on the card, which is what made the three words drift apart. The
	   label carries no digits, so opt it back out rather than clawing
	   the gap back with negative word-spacing. */
	font-variant-numeric: normal;
}

/* Check list: ClipBee ul lg21 md18, sticker bullet, 4% rhythm */
.price__list {
	list-style: none;
	margin: 10% 0 0;
	padding: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	color: #1B1033;
}

.price__list li {
	position: relative;
	padding: 0 0 4% 37px;
	margin-top: 4%;
	text-align: left;
}

.price__list li > i {
	position: absolute;
	top: -0.08em;
	left: 0;
	width: 25px;
	height: 25px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--violet-600);
	font-size: 15px;
	line-height: 1;
	color: #fff;
}

/* Buy button: ClipBee .btn-link, gold -> violet, w700 ladder */
.price__btn {
	margin-top: 11%;
	text-align: center;
	font-family: var(--font-cta);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -1.5px;
}

.price__btn a {
	display: inline-block;
	width: 100%;
	padding: 19.5px 15px;
	border-radius: 19px;
	background: var(--grad-action);
	box-shadow: 0 10px 21px 0 rgba(0, 0, 0, 0.17);
	color: #fff;
	text-decoration: none;
	transition: transform 0.3s ease;
}

.price__btn a:hover { transform: scale(1.05); text-decoration: none; }

.price__btn i { font-size: 0.85em; vertical-align: -0.05em; margin-left: 10px; }

.price__payment {
	display: block;
	width: 341px;
	max-width: 100%;
	margin: 12px auto 0;
}

/* Same dashed sticker as the founder's offer above the box, so the two
   urgency notes bracket the price as one device. Alert red on the edge
   and the icon rather than violet: this one is the deadline, not the
   offer. */
.price__urgency {
	margin: 3% auto 0;
	/* Matches the price box's own measure, so the sticker never runs to
	   the viewport edges on a phone. */
	width: min(94%, 720px);
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: #1B1033;
}

.price__urgency-pill {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px clamp(20px, 4vw, 32px);
	border: 2px dashed rgba(220, 38, 38, 0.55);
	border-radius: 999px;
	background: #fff;
	text-wrap: balance;
}

.price__urgency-pill i { font-size: 1.25em; color: var(--offer-alert); }
.price__urgency-pill b { font-weight: 700; color: #d82a2a; }

/* Plain black product name, aligned with the price and feature list. */
.price__brand {
	margin: 9% 0 0;
	font-family: var(--font-display);
	font-size: clamp(32px, 3.5vw, 42px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -1.4px;
	text-align: left;
	color: #000;
}
.subscription-page .price__now { text-align: left; }

/* The founders badge leaves room for a shorter top gap. */
.price__brand--offer { margin-top: 4%; }

/* The struck anchor becomes the wordmark's caption: same left edge,
   tight enough to read as one lockup. */
.price__brand--offer + .price__was { margin-top: 3%; text-align: left; }

@media (min-width: 768px) {
	.price__title { font-size: 50px; letter-spacing: -2px; }
	.price__sub { font-size: 19px; }
	.price__was { font-size: 22px; }
	.price__now { font-size: 56px; }
	.price__now span { font-size: 18px; }
	.price__list { font-size: 18px; }
	.price__btn { font-size: 30px; }
	.price__urgency { font-size: 20px; }
}
@media (min-width: 992px) {
	.price__title { font-size: 56px; letter-spacing: -2px; }
	.price__br { display: block; }
	.price__was { font-size: 25px; }
	.price__now { font-size: 68px; }
	.price__now span { font-size: 20px; }
	.price__list { font-size: 21px; }
	.price__btn { font-size: 32px; }
	.price__urgency { font-size: 22px; }
}

@media (max-width: 767px) {
	.price { padding: 40px 0 30px; }
	.price__box { width: 100%; }
	.price__inn { border-radius: 15px; padding: 0 30px 25px; }
	.price__list li { padding-left: 30px; }
	.price__list li > i { width: 21px; height: 21px; font-size: 13px; }
}

/* ============================================================
   REACT — real reactions.
   ClipBee's section13 ported: 92%-wide 72px-radius soft box with
   its lavender wash bg, gradient pill headline with the little
   handwritten arrow (both hue-shifted violet), and the comment
   collage image regenerated with the PDF quotes.
   ============================================================ */
.react { padding: 0 0 clamp(32px, 3.5vw, 56px); background: #fff; }

.react__box {
	width: calc(100% - 2 * var(--gutter));
	margin-inline: auto;
	border-radius: 72px;
	padding: 4% 15px 4.5%;
	text-align: center;
	background-color: #f5f7fb;
	background-image:
		radial-gradient(72% 62% at 0% 8%, rgba(79, 70, 229, 0.14), transparent 68%),
		radial-gradient(58% 54% at 100% 0%, rgba(59, 130, 246, 0.11), transparent 70%),
		radial-gradient(66% 46% at 52% 100%, rgba(76, 29, 149, 0.09), transparent 72%),
		linear-gradient(150deg, #ffffff 0%, #f3f5f9 52%, #edf2f9 100%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* Pill headline: ClipBee .section13-title-span (their h1 is plain
   Outfit lg32 md30 sm28 xs18 w600 — not zalando), gold -> violet */
.react__head {
	max-width: 920px;
	margin: 0 auto;
	color: #1B1033;
	text-align: center;
}

.react__kicker {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: clamp(0.75rem, 0.7rem + 0.15vw, 0.84rem);
	font-weight: 750;
	line-height: 1;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--violet-700);
}

.react__kicker::before,
.react__kicker::after {
	content: "";
	width: clamp(20px, 2.4vw, 36px);
	height: 1px;
	background: rgba(59, 17, 120, 0.38);
}

.react__quote {
	display: block;
	margin: 16px auto 0;
	max-width: 19ch;
	font-family: var(--font-cta);
	font-size: clamp(2rem, 1.28rem + 2.55vw, 4rem);
	font-weight: 650;
	line-height: 1.02;
	letter-spacing: -0.045em;
	text-wrap: balance;
}

.react__quote em {
	position: relative;
	font-style: normal;
	color: var(--violet-700);
}

.react__quote em::after {
	content: "";
	position: absolute;
	left: 2%;
	right: 0;
	bottom: -0.08em;
	height: 0.09em;
	border-radius: 999px;
	background: var(--violet-400);
	transform: rotate(-1.5deg);
}

.react__payoff {
	display: block;
	margin: 16px auto 0;
	font-size: clamp(1rem, 0.92rem + 0.28vw, 1.2rem);
	font-weight: 520;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: #584A70;
}

.react__sub {
	display: grid;
	gap: 7px;
	margin: clamp(26px, 2.7vw, 38px) auto 0;
	max-width: 54ch;
	font-size: clamp(1.15rem, 1.03rem + 0.42vw, 1.45rem);
	line-height: 1.48;
	text-wrap: pretty;
}

.react__sub-lead {
	display: block;
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #1B1033;
}

.react__sub-detail {
	display: block;
	font-weight: 450;
	color: #413259;
}

.react__sub strong {
	font-weight: 700;
	color: var(--violet-700);
}

.react__lead {
	width: fit-content;
	margin: clamp(22px, 2.2vw, 32px) auto 0;
	padding: 9px 16px 10px;
	border-radius: 10px;
	background: rgba(76, 29, 149, 0.075);
	font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.25rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.018em;
	color: #1B1033;
}

/* Phone-only stand-in for .react__img; hidden here so exactly one of the
   two is ever in the accessibility tree. */
.react__halves { display: none; }

.react__img {
	display: block;
	width: min(1080px, 92%);
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	margin: 2.5% auto 0;
}

@media (max-width: 767px) {
	.react__box { width: 98%; border-radius: 15px; padding: 20px 15px 30px; }
	.react__head { padding-inline: 8px; }
	.react__quote { max-width: 16ch; }
	.react__payoff { max-width: 28ch; }
	.react__sub { max-width: 34ch; }
	.react__img { margin-top: 30px; }
}

/* ============================================================
   FAQ — ClipBee's faq-main-box verbatim: black 52px-radius box
   (their bg hue-shifted violet), white zalando title, 62.7%
   accordion with faint violet borders, zalando questions, muted
   answers. Their jQuery slide is replaced by a grid-rows
   transition; their gold gradient chevron becomes a violet
   gradient Phosphor caret that flips when open.
   ============================================================ */
.faq { background: #fff; padding: clamp(32px, 3.5vw, 56px) 0; }

/* ClipBee puts the box in a container-fluid: 96.25% of the viewport. */
.faq__wrap { width: 100%; }

.faq__box {
	width: 96.25%;
	margin-inline: auto;
	border-radius: 52px;
	padding: 7% 0;
	background-color: #000;
	background-image: var(--faq-bg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

/* Title: the big zalando ladder, white */
.faq__title {
	margin: 0;
	text-align: center;
	font-family: var(--font-cta);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -1.6px;
	color: #fff;
}

.faq__list {
	width: 62.7%;
	margin: 3.7% auto 0;
}

.faq__item {
	margin: 8px 0;
	border: 1px solid rgba(167, 139, 250, 0.2);
	border-radius: 14px;
}

/* Question row: ClipBee .accordion_head (22px zalando w500) */
.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 33px 40px;
	border: 0;
	background: transparent;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-cta);
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.52px;
	color: #fff;
}

/* Violet gradient caret (their gold gradient plus/minus). */
.faq__q i {
	flex: none;
	font-size: 26px;
	background: linear-gradient(to bottom, var(--violet-600), var(--violet-300));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	transition: transform 0.3s ease;
}

.faq__q[aria-expanded="true"] i { transform: rotate(180deg); }

/* Answer: grid-rows transition instead of jQuery slideDown. */
.faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

.faq__a-inn {
	min-height: 0;
	overflow: hidden;
}

.faq__a p {
	margin: 0;
	padding: 0 15% 34px 40px;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.2px;
	color: #868686;
}

.faq__a a { color: var(--violet-300); }

@media (min-width: 768px) {
	.faq__title { font-size: 48px; letter-spacing: -2.4px; }
}
@media (min-width: 1200px) {
	.faq__title { font-size: 58px; letter-spacing: -2.9px; }
}
@media (min-width: 1500px) {
	.faq__title { font-size: 66px; }
}

@media (max-width: 991px) {
	.faq__list { width: 86%; }
	.faq__q { font-size: 20px; }
	.faq__a p { font-size: 17px; }
}
@media (max-width: 767px) {
	.faq__box { border-radius: 10px; padding: 7% 0; width: 99%; }
	.faq__list { width: 92%; }
	.faq__q { padding: 15px 10px 15px 15px; font-size: 18px; line-height: 1.2; }
	.faq__q i { font-size: 22px; }
	.faq__a p { padding: 0 15px 14px; font-size: 16px; }
}

/* ============================================================
   FINAL — ClipBee's section15 detail for detail: soft box (their
   cream bg desaturated violet) squared on top, red/green urgency
   copy, review strip, gradient button, product box + laptop
   flanking the bottom corners, black one-click-away pills with
   check stickers, and the shimmering black CTA bar. Gold becomes
   the house violet gradient throughout.
   ============================================================ */
.final {
	background-color: #fff;
	background-image: var(--final-bg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	border-radius: 0 0 clamp(28px, 3.2vw, 52px) clamp(28px, 3.2vw, 52px);
	overflow: hidden;
	padding: 4% 0 3%;
}

.final__wrap {
	width: min(100% - 2rem, 1140px);
	margin-inline: auto;
	text-align: center;
}

/* ---------- Urgency box (ClipBee .section15-box) ---------- */
.final__box {
	position: relative;
	width: 99.31%;
	margin: auto;
	border-radius: 0 0 37px 37px;
	padding: clamp(34px, 4.6%, 76px) 15px 4%;
	background-color: #f5f6fb;
	background-image:
		linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.96) 17%, rgba(255, 255, 255, 0.68) 35%, transparent 56%),
		radial-gradient(68% 82% at 8% 38%, rgba(99, 102, 241, 0.2), transparent 64%),
		radial-gradient(62% 78% at 94% 42%, rgba(76, 29, 149, 0.12), transparent 68%),
		radial-gradient(52% 62% at 64% 100%, rgba(59, 130, 246, 0.1), transparent 72%),
		linear-gradient(145deg, #ffffff 0%, #f4f4f9 54%, #edf1f8 100%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border: 0;
	box-shadow: none;
}

.final__inner { position: relative; width: 100%; }

.final__urge {
	display: grid;
	gap: clamp(12px, 1.4vw, 18px);
	justify-items: center;
	margin: 0 auto;
}

.final__urge-title {
	/* 30ch, not the 22ch measure the other blocks use: the headline is a
	   single 40-character claim that needs 754px at this size, and 22ch
	   capped it at 627px, breaking "a one-time payment" onto its own
	   line. The box gives 1102px, so one line clears comfortably; the
	   cap still scales with the font, and the <768px rule below drops it
	   to 18ch where wrapping is correct. */
	max-width: 30ch;
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.58rem + 1.45vw, 2.875rem);
	font-weight: 720;
	line-height: 1.08;
	letter-spacing: -0.035em;
	color: #1B1033;
	text-wrap: balance;
}

/* The offer's one claim, in the same urgency red the founders and
   urgency pills use for their emphasised words. Weight is inherited so
   <b> marks the phrase by colour alone and does not break the 720 the
   heading is set in. */
.final__urge-title b {
	font-weight: inherit;
	color: var(--offer-alert);
}

.final__urge-body {
	display: grid;
	gap: 10px;
	max-width: 58ch;
	padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2.5vw, 30px);
	border: 1px solid rgba(46, 16, 101, 0.12);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.7);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 26px rgba(28, 15, 51, 0.07);
	font-size: clamp(1.12rem, 1.02rem + 0.36vw, 1.35rem);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.012em;
	color: #3A2E4C;
	text-wrap: pretty;
}

.final__urge-body p:first-child {
	font-size: 1.05em;
	font-weight: 600;
	color: #1B1033;
}

.final__urge-body p + p {
	padding-top: 10px;
	border-top: 1px solid rgba(46, 16, 101, 0.1);
}

.final__urge-body strong {
	font-weight: 750;
	color: var(--violet-700);
}

.final__urge-body p,
.final__urge-payoff {
	margin: 0;
}

.final__urge-payoff {
	font-size: clamp(1.05rem, 0.98rem + 0.28vw, 1.25rem);
	font-weight: 620;
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: var(--violet-700);
}

.final__urge-payoff strong { font-weight: 780; }

.final__review {
	margin: 2.5% auto 0;
	display: block;
}

/* Button: ClipBee .mybutton2, gold -> violet, zalando lg25 ladder */
.final__btn {
	margin-top: 20px;
	font-family: var(--font-cta);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.04em;
}

.final__btn a {
	display: table;
	margin: auto;
	padding: 21px 40px 21px 62px;
	border-radius: 15px;
	background: var(--grad-action);
	box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.13);
	color: #fff;
	text-decoration: none;
	transition: transform 0.3s ease;
}

.final__btn a:hover { transform: scale(1.05); text-decoration: none; }
.final__btn i { position: relative; top: 1px; margin-left: 20px; font-size: 0.9em; }

.final__payment {
	display: block;
	width: 313px;
	max-width: 100%;
	margin: 10px auto 0;
}

/* Product + laptop flanking the box corners (ClipBee box3/laptop). */
.final__product {
	position: absolute;
	bottom: -8%;
	left: 6.5%;
	/* box_left.webp is portrait (461x600), and the art carries its own
	   lighting, so it needs no cast shadow of ours. Sized against the laptop
	   opposite it (20vw): the box is portrait, so a little narrower still
	   reads as the heavier object and the two corners stay balanced. */
	width: clamp(132px, 12.2vw, 198px);
	height: auto;
	transform: rotate(-7deg);
	transform-origin: 50% 92%;
}

.final__laptop {
	position: absolute;
	bottom: -4%;
	right: 3%;
	/* No cast shadow: the render carries its own lighting, same as the box
	   opposite it. Capped at 342px, the source render's own width, so it is
	   never upscaled into softness. */
	width: clamp(252px, 23vw, 342px);
	height: auto;
}

/* ---------- One click away (ClipBee .section15-text rows) ---------- */
.final__click {
	margin: clamp(34px, 5.4%, 82px) 0 18px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	color: #1B1033;
}

.final__row {
	display: flex;
	width: 100%;
	gap: 13px;
	margin-top: 13px;
	align-items: stretch;
	justify-content: center;
}

.final__pill {
	display: flex;
	align-items: center;
	width: calc((100% - 13px) / 2);
	min-height: 78px;
	margin: 0;
	padding: 22px 28px;
	border-radius: 15px;
	background-color: #000;
	color: #fff;
	text-align: left;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.2;
}

.final__pill-inn {
	display: flex;
	align-items: center;
	gap: 11px;
}

/* Flat Phosphor mark, no gradient. Shares the violet the closing
   statement uses, so the checklist and the closer read as one accent. */
.final__pill-inn i {
	flex: none;
	font-size: 21px;
	line-height: 1;
	color: var(--violet-300);
}

.final__big { font-weight: 700; font-size: 1.3em; }

/* ---------- Shimmer bar (ClipBee .section15-cta-text) ---------- */
.final__bar {
	position: relative;
	overflow: hidden;
	margin: clamp(30px, 3.4vw, 44px) 0 0;
	padding: clamp(30px, 3.2vw, 46px) clamp(24px, 4vw, 56px);
	border-radius: 20px;
	background: linear-gradient(180deg, #150A2C 0%, #0A0518 100%);
	border: 2px solid rgba(139, 92, 246, 0.3);
	display: grid;
	justify-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	color: #fff;
	text-shadow: none;
}

.final__bar::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
	animation: final-shimmer 3s infinite;
}

@keyframes final-shimmer {
	0% { left: -100%; }
	100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.final__bar::before { animation: none; }
}

.final__premise {
	font-size: clamp(1.02rem, 0.94rem + 0.3vw, 1.2rem);
	font-weight: 520;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.72);
}

.final__em {
	font-family: var(--font-cta);
	font-size: clamp(1.55rem, 1.15rem + 1.35vw, 2.4rem);
	font-weight: 680;
	line-height: 1.12;
	letter-spacing: -0.035em;
	color: var(--violet-300);
}

.final__prompt {
	/* Beat two opens here, so the space above it carries the break. */
	margin-top: 26px;
	font-size: clamp(1.02rem, 0.94rem + 0.3vw, 1.2rem);
	font-weight: 500;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.72);
}

.final__q {
	display: block;
	font-family: var(--font-cta);
	font-size: clamp(1.25rem, 1.02rem + 0.78vw, 1.75rem);
	font-weight: 620;
	line-height: 1.22;
	letter-spacing: -0.025em;
	color: #fff;
}

@media (min-width: 992px) {
	.final__btn { font-size: 25px; }
	.final__click { font-size: 32px; }
	.final__row {
		width: 100%;
		margin: 13px auto 0;
	}
	.final__pill {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		font-size: 20px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.final__bar { padding: 28px 22px; }
	.final__pill { width: calc((100% - 13px) / 2); }
}

@media (max-width: 767px) {
	.final { padding: 35px 0 30px; }
	.final__box { border-radius: 0 0 25px 25px; width: 100%; padding: 30px 15px; }
	.final__product, .final__laptop { display: none; }
	.final__payment { width: 270px; }
	.final__btn a { width: 100%; display: block; border-radius: 15px; padding: 19px 30px; }
	.final__btn i { margin-left: 10px; }
	.final__row { flex-direction: column; gap: 10px; }
	.final__pill { width: 98%; margin-inline: auto; }
	.final__pill-inn { align-items: flex-start; gap: 8px; }
	.final__pill-inn i { position: relative; top: 3px; }
	.final__bar { padding: 26px 16px; border-radius: 15px; }
	.final__urge-title { max-width: 18ch; }
	.final__urge-body { max-width: 34ch; }
}

/* ============================================================
   FOOTER — ClipBee's site-footer verbatim, gold accents -> violet:
   near-black gradient, logo, muted disclaimer, divided legal links
   with the gradient underline hover, hairline-topped copyright.
   ============================================================ */
.site-footer {
	background: linear-gradient(180deg, #121212 0%, #0a0a0a 100%);
	padding: 70px 0 45px;
	border-top: 1px solid rgba(139, 92, 246, 0.15);
	text-align: center;
}

.footer__wrap {
	width: min(100% - 2rem, 1140px);
	margin-inline: auto;
}

.footer-brand { display: inline-block; }

.footer-logo {
	max-width: 180px;
	height: auto;
	margin-bottom: 30px;
}

/* ClipBee ladder lg14 md12 sm12 xs11 w400 lh140 */
.footer-disclaimer {
	max-width: 900px;
	margin: 0 auto 35px;
	padding: 0 15px;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.4;
	color: #9A93AD;
}

.footer-disclaimer strong { color: #ADA5C0; font-weight: 600; }

/* lg15 md14 sm14 xs12 w400 */
.footer-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
	margin-bottom: 30px;
	font-size: 12px;
	font-weight: 400;
}

.footer-links a {
	position: relative;
	/* 44px minimum touch height. These were 26px tall and sat shoulder to
	   shoulder, which is a mis-tap waiting to happen on a phone. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	border-right: 1px solid rgba(255, 255, 255, 0.2);
	color: #A79FBC;
	text-decoration: none;
	transition: color 0.3s ease;
}

.footer-links a:last-child { border-right: none; }

.footer-links a::after {
	content: "";
	position: absolute;
	bottom: 8px;
	left: 20px;
	right: 20px;
	width: auto;
	height: 2px;
	background-image: linear-gradient(180deg, var(--violet-600) 0%, var(--violet-500) 51%, var(--violet-400) 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.footer-links a:hover { color: var(--violet-300); }
.footer-links a:hover::after { transform: scaleX(1); }

.footer-copyright {
	max-width: 500px;
	margin: 0 auto;
	padding-top: 25px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 12px;
	font-weight: 400;
	color: #8E88A0;
}

@media (min-width: 768px) {
	.footer-disclaimer { font-size: 12px; }
	.footer-links { font-size: 14px; }
	.footer-copyright { font-size: 12px; }
}
@media (min-width: 992px) {
	.footer-disclaimer { font-size: 14px; }
	.footer-links { font-size: 15px; }
	.footer-copyright { font-size: 14px; }
}
@media (max-width: 991px) {
	.site-footer { padding: 50px 0 35px; }
}
@media (max-width: 767px) {
	.footer-links a { padding: 4px 12px; }
}

/* ClipBee runs Bootstrap 5 (CDN): .container grows to 1320px at
   >=1400. Every wrap that mirrors their .container follows suit,
   and the hive panel keeps being 94.1% of that container. */
@media (min-width: 1400px) {
	.vs__wrap,
	.laudio__wrap,
	.mback__wrap,
	.final__wrap { width: min(100% - 2rem, 1320px); }
	.hive__panel { width: min(calc(100% - 2rem), 1120px); }
}

/* ClipBee's mobile-first ladder for the ported classes. */
@media (min-width: 768px) {
	.clicks__title { font-size: 45px; }
	.missing__title { font-size: 45px; }
	.missing-chips li { font-size: 17px; }
	.step__badge span { font-size: 20px; }
	.step__kicker { font-size: 40px; }
	.step__sub { font-size: 18px; }
	.step__body p { font-size: 18px; }
}
@media (min-width: 992px) {
	.clicks__title { font-size: 48px; }
	.missing__title { font-size: 48px; }
	.missing-chips li { font-size: 18px; }
	.step__badge span { font-size: 24px; }
	.step__kicker { font-size: 50px; }
	.step__sub { font-size: 20px; }
	.step__body p { font-size: 20px; }
}
@media (min-width: 1200px) {
	.clicks__title { font-size: 58px; }
	.missing__title { font-size: 58px; letter-spacing: -0.035em; }
	.missing-chips li { font-size: 19px; }
	.step__badge span { font-size: 28px; }
	.step__sub { font-size: 22px; }
	.step__body p { font-size: 22px; }
}
@media (min-width: 1500px) {
	.clicks__title { font-size: 66px; }
	.missing__title { font-size: 66px; letter-spacing: -0.035em; }
}

@media (max-width: 899px) {
	/* Stack: copy above media, and drop the mirroring so every step reads
	   top-to-bottom in the same direction. */
	.step { grid-template-columns: 1fr; gap: 26px; border-radius: 35px; padding: 24px 20px; }
	.step--1 .step__copy, .step--2 .step__copy, .step--3 .step__copy { padding: 0; }
	.step__media img,
	.step--2 .step__media img,
	.step--3 .step__media img {
		width: 100%; max-width: 100%; left: 0; margin: 0; border-radius: 14px;
	}
	.step--2 .step__copy { order: 1; text-align: left; }
	.step--2 .step__media { order: 2; }
	.step--2 .step__body { margin-left: 0; }
	.step--1, .step--2, .step--3 {
		background-image: radial-gradient(70% 46% at 50% 0%, rgba(76, 29, 149, 0.38), transparent 66%);
	}
	.step__body { max-width: none; }
}

/* ---------- Breakpoints ---------- */
@media (max-width: 1399px) {
	.audience__wrap { width: min(100% - 2.5rem, 1160px); }
}

@media (max-width: 1199px) {
	/* 2-up: 8 cards divide evenly, so the centring offsets are cleared. */
	.hero__points { grid-template-columns: repeat(4, 1fr); gap: 16px; }
	.point-card,
	.point-card:nth-child(7),
	.point-card:nth-child(8) { grid-column: span 2; }
	.point-card { padding: 26px 26px 28px; }
	.audience-cards { gap: 16px; }
}

@media (max-width: 1023px) {
	.audience__wrap { width: min(100% - 2rem, 860px); }
	.audience-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 767px) {
	.hero { --hero-close: 56px; }
	.hero__points { grid-template-columns: 1fr; gap: 12px; }
	.point-card,
	.point-card:nth-child(7),
	.point-card:nth-child(8) { grid-column: span 1; }
	.point-card { border-radius: 22px; padding: 22px 24px 24px; }
	.icon-ph { font-size: 32px; }
	.cta-button { letter-spacing: -0.5px; width: 92%; display: block; text-align: center; }
	.audience-cards { grid-template-columns: 1fr; margin-top: 32px; gap: 14px; }
	.audience-card { border-radius: 20px; padding: 20px 18px 22px; }
}

@media (max-width: 719px) {
	.start__lead-intro { max-width: 25ch; margin-inline: auto; }
	.start__qualities { max-width: 23rem; }
	.start__lead-no {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
		width: min(100%, 310px);
		padding: 13px 16px;
		text-align: left;
	}
	.start-flow { width: min(100%, 420px); }
	.start-step { min-height: 56px; padding: 7px 8px; gap: 6px; }
	.start-step__icon { font-size: 1.05rem; }
	.start-step__arrow { right: -14px; width: 28px; height: 28px; font-size: 0.95rem; }
}

@media (max-width: 639px) {
	.audience { padding-block: 54px 72px; }
	.audience__header { padding-top: 28px; }
	.audience-honeycomb {
		width: 240px;
		opacity: 0.45;
		-webkit-mask-image: radial-gradient(ellipse at center, #000 24%, transparent 88%);
		mask-image: radial-gradient(ellipse at center, #000 24%, transparent 88%);
	}
	.audience-honeycomb--left { top: 1%; left: 0; transform: rotate(-5deg); }
	.audience-honeycomb--right { top: 5%; right: 0; transform: rotate(6deg) scale(0.92); }
	.audience-honeycomb i:nth-child(n + 6) { display: none; }
	.audience__badge { padding: 6px 18px; font-size: 0.8rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.pill-face { animation: none; }
	.cue-down { animation: none; }
	.cta-button { transition: none; }
	.cta-button:hover { transform: none; }

	/* Render final states immediately rather than shortening the motion. */
	.audience-card__cue { transition: none; }
	.audience-card.is-playing .audience-wave span { animation: none; transform: none; }
	.audience-play { transition: none; }
	.audience-play:hover { transform: none; }
	.cast-card .audience-play:hover { transform: translateX(-50%); }
	.cast-eq span { animation: none; }
}

/* ---------- Checkout modal ----------
   Ported from ClipBee's checkout.css: same two-column layout, skinned Deep
   Plum. The body stays light on purpose: FastSpring's embedded form is white
   and cannot be themed from here, so a dark modal would frame it as a hole.
   The plum header band is what ties it to the page. Radii follow the page:
   16px cards, 10px inputs/buttons, circles for round controls. */
body.checkout-open { overflow: hidden; }

.checkout {
	position: fixed;
	inset: 0;
	z-index: 1000;
	font-family: var(--font-display);
}
.checkout[hidden] { display: none; }

.checkout__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(13, 6, 24, 0.74);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity 0.28s var(--ease-lift);
}
.checkout.is-open .checkout__backdrop { opacity: 1; }

.checkout__scroll {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	display: flex;
	padding: 24px 16px;
}

/* margin:auto (not align-items) so a dialog taller than the viewport
   scrolls from its top instead of losing its header off-screen. */
.checkout__dialog {
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin: auto;
	background: #FBFAFE;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 30px 90px rgba(13, 6, 24, 0.6);
	opacity: 0;
	transform: translateY(14px) scale(0.985);
	transition: transform 0.32s var(--ease-lift), opacity 0.24s ease;
	outline: none;
	/* Crisp corners: own compositing layer so the rounded clip is not
	   re-rasterised with a fringe while the open transform runs, and the
	   mask keeps children (the plum header) from bleeding past the curve. */
	isolation: isolate;
	-webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}
.checkout.is-open .checkout__dialog { opacity: 1; transform: none; }

/* Header band */
.checkout__header {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 64px 16px 24px;
	background: var(--grad-badge);
	color: var(--text-hi);
	/* Same radius as the dialog so the gradient is clipped by its own
	   curve too, not only by the parent's overflow. */
	border-radius: 20px 20px 0 0;
}
.checkout__header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: rgba(221, 214, 254, 0.32);
}
.checkout__cart {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.12);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 22px;
}
.checkout__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.3px;
	color: #fff;
}

.checkout__steps {
	position: relative;
	list-style: none;
	margin: 0 0 0 auto;
	padding: 0;
	display: flex;
	align-items: flex-start;
}
.checkout__steps::before {
	content: "";
	position: absolute;
	top: 17px;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	height: 2px;
	background: rgba(221, 214, 254, 0.28);
}
.checkout__step {
	position: relative;
	z-index: 1;
	padding: 0 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}
.checkout__step-n {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 2px solid rgba(221, 214, 254, 0.35);
	background: rgba(255, 255, 255, 0.08);
	color: rgba(237, 231, 251, 0.78);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	transition: background 0.2s ease, color 0.2s ease;
}
.checkout__step-label {
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: rgba(221, 214, 254, 0.72);
}
.checkout__step.is-current .checkout__step-n {
	background: #fff;
	border-color: #fff;
	color: var(--violet-600);
	box-shadow: 0 2px 10px rgba(13, 6, 24, 0.3);
}
.checkout__step.is-current .checkout__step-label { color: #fff; font-weight: 700; }

.checkout__close {
	position: absolute;
	top: 20px;
	right: 16px;
	z-index: 2;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s var(--ease-lift);
}
.checkout__close:hover { background: rgba(255, 255, 255, 0.24); }
.checkout__close:active { transform: scale(0.94); }
.checkout__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Body: 7/5 split like ClipBee */
.checkout__body {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 24px;
	padding: 24px 28px;
	background: #F5F2FC;
}
.checkout__summary { display: flex; flex-direction: column; min-width: 0; }
.checkout__billing-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: #5C5175; text-align: center; }
.checkout__payment { min-width: 0; }

.checkout__label {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: #6B5F86;
}

.checkout__card {
	background: #fff;
	border: 1px solid #E4DDF5;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(59, 17, 120, 0.04), 0 10px 24px -14px rgba(59, 17, 120, 0.14);
}
.ordersummary { padding: 16px 20px 14px; margin-bottom: 12px; }
.ordersumz { transition: opacity 0.2s ease; }
.ordersummary.is-repricing .ordersumz { opacity: 0.35; pointer-events: none; }

.checkout__line {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: #3C3157;
}
.checkout__line .product_name { font-weight: 700; color: #1B1033; }
.checkout__line .otp-label {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.3;
	color: #6B5F86;
}
.checkout__line strong { font-weight: 700; color: #1B1033; white-space: nowrap; }
.checkout__line .strike {
	margin-right: 8px;
	font-size: 13px;
	font-weight: 500;
	color: #8A7FA3;
	text-decoration: line-through;
	text-decoration-color: rgba(220, 38, 38, 0.6);
	text-decoration-thickness: 2px;
}
.checkout__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin: 6px 0 0;
	padding-top: 10px;
	border-top: 1px solid #EDE8F8;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #1B1033;
}
.checkout__total strong { font-size: 17px; font-weight: 800; color: var(--violet-600); }

/* One-time-payment reassurance */
.otp-contrast-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 8px;
	padding: 10px 14px;
	background: #EEFBF5;
	border: 1.5px solid #A9DFC4;
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.3;
}
.otp-yes { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--seal-green); }
.otp-yes i { font-size: 17px; }
.otp-divider { width: 1px; height: 16px; background: #BFE3D0; }
.otp-no { font-weight: 600; color: #4B4066; }
.otp-no-text { position: relative; display: inline-block; }
.otp-no-text::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 2px;
	border-radius: 1px;
	background: rgba(220, 38, 38, 0.55);
	transform: translateY(-50%) scaleX(1);
	transform-origin: left center;
}
.otp-contrast-badge.is-animating { animation: bv-otp-in 0.45s ease-out both; }
.otp-contrast-badge.is-animating .otp-no-text::after {
	transform: translateY(-50%) scaleX(0);
	animation: bv-otp-strike 0.55s 0.35s ease-out forwards;
}
@keyframes bv-otp-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes bv-otp-strike {
	from { transform: translateY(-50%) scaleX(0); }
	to { transform: translateY(-50%) scaleX(1); }
}

#coupon-applied-badge {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	padding: 6px 12px;
	background: #EEFBF5;
	border: 1px solid #B7E4CF;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	color: #0B6E4F;
}
#coupon-applied-badge[hidden] { display: none; }
#coupon-applied-badge i { font-size: 15px; }

/* Coupon */
.coupon-container { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.coupon-container[hidden] { display: none; }
.coupon-container label { margin: 0; font-size: 14px; font-weight: 600; color: #4B4066; }
.coupon-container input {
	flex: 1;
	min-width: 0;
	padding: 8px 14px;
	border: 1px solid #D9D1EE;
	border-radius: 10px;
	background: #fff;
	color: #1B1033;
	font: 400 14px var(--font-display);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.coupon-container input:focus {
	outline: none;
	border-color: var(--violet-400);
	box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22);
}
.coupon-button {
	padding: 9px 18px;
	border: 0;
	border-radius: 10px;
	background: var(--grad-action);
	color: #fff;
	font: 700 13px var(--font-display);
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(59, 17, 120, 0.22);
	transition: transform 0.2s var(--ease-lift), box-shadow 0.2s ease;
}
.coupon-button:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(59, 17, 120, 0.3); }
.coupon-button:active { transform: translateY(0) scale(0.98); }
.coupon-button:focus-visible { outline: 2px solid var(--violet-400); outline-offset: 2px; }

/* Add-on cards share a header grid and an image/copy grid. */
.checkout__addons { margin-top: 14px; padding-top: 14px; border-top: 1px solid #E4DDF5; }
.checkout.is-noaddon .checkout__addons { display: none; }
.addon-card {
	--addon-a: var(--violet-500);
	--addon-b: var(--violet-400);
	--addon-ink: var(--violet-600);
	--addon-tint: #F7F4FF;
	position: relative;
	margin-bottom: 12px;
	border: 1px solid #E4DDF5;
	border-radius: 16px;
	background: #fff;
	box-shadow: none;
	overflow: hidden;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
/* Voice Cloning sits one step warmer on the wheel: fuchsia, not violet. */
.addon-card--cloning {
	--addon-a: #A21CAF;
	--addon-b: #D946EF;
	--addon-ink: #86198F;
	--addon-tint: #FDF4FF;
}
.addon-card:hover {
	border-color: var(--addon-b);
}
.addon-card.checked {
	border-color: var(--addon-a);
	background: var(--addon-tint);
}
.addon_add {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px;
	cursor: default;
}
.addon-head { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #e5dcf7; cursor: pointer; }
.checkbox { display: flex; align-items: center; }
.checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 2px solid #CFC5E8;
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.checkbox input[type="checkbox"]:checked { background: var(--addon-a, var(--violet-500)); border-color: var(--addon-a, var(--violet-500)); }
.checkbox input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 6px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.checkbox input[type="checkbox"]:focus-visible { outline: 2px solid var(--violet-400); outline-offset: 2px; }
.addon-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
	font-weight: 750;
	line-height: 1.3;
	color: var(--addon-ink);
}
.addon-prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
/* Keep readable prices beside the title when the card has room. */
.price-label2 {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	color: #5C5175;
}
.price-label2 span { font-size: 14px; font-weight: 500; color: #5C5175; }
.price-label2 s {
	text-decoration-color: rgba(220, 38, 38, 0.75);
	text-decoration-thickness: 2px;
}
/* Solid color and full-opacity type keep the offer crisp at small sizes. */
.price-label {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 7px;
	background: var(--addon-a);
	color: #fff;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: normal;
	white-space: nowrap;
	box-shadow: none;
}
.price-label span {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	opacity: 1;
}
.addon-main { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 16px; }
.addon-image {
	display: block;
	width: 112px;
	height: 112px;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid #E4DDF5;
}
.addon-copy { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 112px; text-align: left; }
.addon-description { margin: 0; font-size: 13.5px; line-height: 1.5; color: #5C5175; }
.addon-description b,
.addon-description strong { font-weight: 700; color: #1B1033; }
.addon-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
.addon-preview-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 12px;
	min-height: 36px;
	border: 0;
	border-radius: 8px;
	background: var(--addon-a);
	color: #fff;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	box-shadow: none;
}
.addon-preview-button i { font-size: 16px; line-height: 1; }
.addon-preview-button:hover { filter: brightness(1.1); }
.addon-audio-button {
	display: inline-grid;
	border-radius: 999px;
	transition: background .2s ease, box-shadow .2s ease, filter .2s ease;
}
.addon-audio-idle,
.addon-audio-active { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 7px; }
.addon-audio-active { visibility: hidden; }
.addon-audio-button.is-active { background: #28113F; box-shadow: inset 0 0 0 1px rgba(216,180,254,.55), 0 3px 12px rgba(88,28,135,.16); }
.addon-audio-button.is-active .addon-audio-idle { visibility: hidden; }
.addon-audio-button.is-active .addon-audio-active { visibility: visible; }
.addon-audio-wave { display: flex; align-items: center; gap: 3px; height: 20px; color: #E9C5FF; }
.addon-audio-wave b { width: 3px; height: 14px; border-radius: 999px; background: currentColor; transform: scaleY(.3); }
.addon-audio-wave b:nth-child(3n) { height: 20px; }
.addon-audio-wave b:nth-child(3n + 1) { height: 10px; }
.addon-audio-button.is-playing .addon-audio-wave b { animation-name: addon-audio-wave; animation-duration: .8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.addon-audio-wave b:nth-child(2n) { animation-delay: -.3s; }
.addon-audio-wave b:nth-child(3n) { animation-delay: -.6s; }
.addon-audio-wave b:nth-child(5n) { animation-delay: -.15s; }
.addon-audio-status { flex-basis: 100%; color: #7C284D; font-size: 12px; }
@keyframes addon-audio-wave { to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
	.addon-audio-button { transition: none; }
	.addon-audio-button.is-playing .addon-audio-wave b { animation: none; transform: scaleY(.7); }
}
.addon-preview-button:focus-visible,
.addon-preview-close:focus-visible { outline: 3px solid var(--violet-400); outline-offset: 3px; }

/* A preview stays within the summary column, above the selected card. */
.checkout__summary { position: relative; }
.addon-preview-popup {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 5;
	overflow: hidden;
	border: 1px solid #D9CDED;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 16px 48px rgba(27, 16, 51, 0.3);
}
.addon-preview-popup[hidden],
.addon-preview-popup [hidden] { display: none; }
.addon-preview-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.addon-preview-media { position: relative; background: #1B1033; }
.addon-preview-close,
.addon-player-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.addon-preview-close,
.addon-player-button--play { background: linear-gradient(180deg, #8B5CF6, #6D28D9); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.addon-preview-close { position: absolute; top: 10px; right: 10px; z-index: 2; }
.addon-preview-controls { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 32px 12px 12px; background: linear-gradient(transparent, rgba(13,6,24,.65)); pointer-events: none; }
.addon-preview-controls button { pointer-events: auto; }
.addon-player-button--mute { margin-left: auto; background: rgba(27,16,51,.5); backdrop-filter: blur(6px); }
.addon-player-button:hover,
.addon-preview-close:hover { filter: brightness(1.15); }
.addon-player-button:focus-visible,
.addon-preview-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.addon-preview-video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 55vh; object-fit: contain; background: #1B1033; }
.addon-preview-status { margin: 0; padding: 10px 16px; font-size: 13px; color: #5C5175; }

/* Expiry timer: the page's urgency red, dashed like the seats pill */
.offer-timer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: max-content;
	max-width: 100%;
	margin: 16px auto 0;
	padding: 11px 20px;
	background: #FEF2F2;
	border: 2px dashed rgba(220, 38, 38, 0.55);
	border-radius: 12px;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1;
	color: #1B1033;
	white-space: nowrap;
}
.offer-timer i { font-size: 18px; color: var(--offer-alert); }
.offer-timer span {
	min-width: 5ch;
	text-align: center;
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	font-variant-numeric: tabular-nums;
	color: #B91C1C;
}

/* Skeleton in the summary's shape while FastSpring prices the session */
.checkout__skeleton {
	display: grid;
	gap: 12px;
	margin-top: 23px;   /* label height + gap, so the card lands where the summary will */
	padding: 18px 20px 16px;
	background: #fff;
	border: 1px solid #E4DDF5;
	border-radius: 16px;
}
.checkout__skeleton i {
	display: block;
	height: 14px;
	border-radius: 7px;
	background: linear-gradient(90deg, #EFEAF9 0%, #F8F5FF 50%, #EFEAF9 100%);
	background-size: 200% 100%;
	animation: bv-shimmer 1.4s linear infinite;
}
.checkout__skeleton i:nth-child(1) { width: 58%; }
.checkout__skeleton i:nth-child(2) { width: 34%; height: 11px; }
.checkout__skeleton i:nth-child(3) { width: 100%; height: 1px; margin: 4px 0; background: #EDE8F8; animation: none; }
.checkout__skeleton i:nth-child(4) { width: 46%; height: 18px; }
@keyframes bv-shimmer {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}
.checkout:not(.is-loading) .checkout__skeleton--main { display: none; }
.checkout.is-loading .checkout__loaded { display: none; }

/* FastSpring embed. The negative margin crops FastSpring's own order header
   (ClipBee does the same) so the summary is not shown twice. */
.checkout__frame {
	background: #fff;
	border: 1px solid #E4DDF5;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(59, 17, 120, 0.04), 0 10px 24px -14px rgba(59, 17, 120, 0.14);
}
#fsc-embedded-checkout-container { margin-top: -131px; }

.checkout__frame-note {
	margin: 12px 0 0;
	padding: 18px 20px;
	background: #fff;
	border: 1px dashed #CFC5E8;
	border-radius: 16px;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: #4B4066;
}
.checkout__frame-note[hidden] { display: none; }
.checkout__frame-note-text { display: block; }
.checkout__retry { margin-top: 12px; }

@media (max-width: 991px) {
	.checkout__body { grid-template-columns: 1fr; padding: 20px 16px; }
}

@media (max-width: 767px) {
	.checkout__scroll { padding: 10px; }
	.checkout__dialog { border-radius: 16px; }
	.checkout__header { padding: 14px 56px 14px 16px; border-radius: 16px 16px 0 0; }
	.checkout__title { font-size: 18px; }
	.checkout__close { top: 16px; right: 12px; }
	.checkout__body { padding: 16px 14px; }
	.addon_add { padding: 14px; gap: 12px; }
}

@media (max-width: 610px) {
	.checkout__steps { display: none; }
}

@media (max-width: 560px) {
	/* The timer line is longer than a phone column: let it wrap and centre. */
	.offer-timer {
		display: block;
		white-space: normal;
		text-align: center;
		width: 100%;
		padding: 10px 14px;
		line-height: 1.4;
	}
	.offer-timer i { vertical-align: -3px; margin-right: 4px; }
	.offer-timer span { display: inline-block; margin-left: 4px; }
	.otp-divider { display: none; }
}

@media (max-width: 560px) {
	/* Price pills take their own line under the title on a phone column. */
	.addon-head { grid-template-columns: 20px minmax(0, 1fr); }
	.addon-prices { grid-column: 1 / -1; width: 100%; }
	.addon-main { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
	.addon-image { width: 88px; height: 88px; }
	.addon-copy { min-height: 88px; }
	.addon-preview-button { padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.checkout__backdrop,
	.checkout__dialog,
	.checkout__close,
	.coupon-button,
	.ordersumz { transition: none; }
	.checkout__skeleton i { animation: none; }
	.otp-contrast-badge.is-animating { animation: none; }
	.otp-contrast-badge.is-animating .otp-no-text::after { animation: none; transform: translateY(-50%) scaleX(1); }
}

/* ---------- Thank-you page (thank-you.php) ----------
   ClipBee's rhythm: a dark hero that melts into a light page, then light
   sections with white cards and two dark panels (webinar, quick tips).
   The hero ground is built in code: the point-card radial glow scaled up
   to a viewport, a fine honeycomb tile fading out from the centre, and a
   few larger floating hex outlines (the audience section's device). */
body.ty-page {
	--ty-ground: #FBFAFE;
	--ty-ground-2: #F3EFFB;
	background: var(--ty-ground);
	color: #1B1033;
}

.ty-page .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ty-wrap {
	width: min(100% - 2rem, 1140px);
	margin-inline: auto;
}

.ty-section { padding-block: clamp(30px, 4.5vw, 56px); }
.ty-webinar { background: linear-gradient(180deg, var(--ty-ground) 0%, var(--ty-ground-2) 100%); }
.ty-strip { background: var(--ty-ground-2); }
/* The ground -> ground-2 ramp normally belongs to the webinar. While that
   section is switched off (see $show_webinar in thank-you.php) the strip
   lands straight on the access cards' ground and the change of tone shows
   as a step, so the strip carries the ramp itself. Written as a sibling
   selector rather than a flag: it applies exactly when the strip actually
   follows the cards, and hands the ramp back the moment the webinar
   returns between them. */
.ty-access + .ty-strip {
	background: linear-gradient(180deg, var(--ty-ground) 0%, var(--ty-ground-2) 62%);
}
.ty-tips { background: linear-gradient(180deg, var(--ty-ground-2) 0%, var(--ty-ground) 100%); }

/* Fine honeycomb tile: pointy-top hexes, 100px wide. One hexagon plus
   the vertical edge that joins it to the next row is enough for the tile
   to close up seamlessly. Shared by the thank-you hero and the legal
   pages' header, so it lives on :root. */
:root {
	--hive-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='173.2' viewBox='0 0 100 173.2'%3E%3Cg fill='none' stroke='%23A78BFA' stroke-width='1.1'%3E%3Cpolygon points='50,0 100,28.87 100,86.6 50,115.47 0,86.6 0,28.87'/%3E%3Cline x1='50' y1='115.47' x2='50' y2='173.2'/%3E%3C/g%3E%3C/svg%3E");
}

/* ----- Hero ----- */
/* Background and fade are the PRO page's hero treatment (pro/css/pro.css),
   ported: the plum is painted by .ty-hero__bg::before, which hangs
   --ty-bleed BELOW the hero, and the crossing to the light page is a
   vertical ramp occupying the last --ty-dome of that bled box. Half the
   transition is therefore spent on ground the next section already
   occupies, so the two share it and the fade can be long without leaving
   an empty hero above it.

   This replaced an elliptical dome that had to reach --ty-ground on its
   vertical axis while still being part-transparent at the left and right
   edges. The hero's bottom corners are the furthest point from that
   ellipse's centre, so they never resolved: they stayed part-plum, and the
   solid section below cut against them as a line straight across the page.
   A vertical ramp has no corners to miss. */
.ty-hero {
	/* Runway: the dark gap below the subtitle before the light starts. */
	--ty-runway: clamp(85px, 9vw, 140px);
	/* Bleed: how far the fade carries past the hero's bottom edge, over the
	   top of the next section. */
	--ty-bleed: clamp(60px, 7vw, 110px);
	/* Total length of the dark -> ground ramp: runway + bleed, landing on
	   solid --ty-ground at the bottom of the bled box. */
	--ty-dome: calc(var(--ty-runway) + var(--ty-bleed));
	position: relative;
	isolation: isolate;
	padding: clamp(34px, 5vw, 60px) 0 var(--ty-runway);
	text-align: center;
	/* No background of its own: a background here would stop dead at the
	   hero's box and there would be nothing left to fade out below it. */
}

/* The pattern, the floating hexes and the ramp live in this layer, which is
   the only thing clipped; the hero itself stays overflow-visible so nothing
   placed in it is sliced off at the section edge. */
.ty-hero__bg {
	position: absolute;
	/* Hangs --ty-bleed below the hero so the plum and the fade cross into
	   the next section together. The sections below paint no background of
	   their own, so the tail shows through; main is lifted to z-index 1 so
	   its type still paints above. */
	inset: 0 0 calc(-1 * var(--ty-bleed));
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

/* The plum itself. Top-down: near-black under the logo, warming through to
   violet at the base, so the brightness travels with the reader toward the
   access cards. It fills the BLED box, which is the point — the dark has to
   still be there below the hero's edge for the ramp above to fade it out. */
.ty-hero__bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-color: #07030f;
	background-image:
		radial-gradient(80% 55% at 50% 100%, rgba(124, 58, 237, 0.50) 0%, rgba(76, 29, 149, 0.24) 45%, rgba(7, 3, 15, 0) 78%),
		linear-gradient(180deg,
			#07030f 0%,
			#0a0518 30%,
			#12082a 58%,
			#1d0d3d 82%,
			#2a1352 100%);
}

/* The transition, painted over everything below it — plum, hex lattice and
   floats all dissolve together. Two layers: a lavender bloom that gives the
   light its arc, and the ramp to --ty-ground occupying the last --ty-dome of
   the bled box. Stops are eased rather than linear so the light creeps in
   and then arrives, instead of crossing as a band. */
.ty-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* Ramp FIRST, bloom under it. The bloom's radial is centred on the box's
	   bottom edge, so it is at full strength exactly where the box ends — as
	   the top layer it tinted the last row lavender and cut hard against the
	   light page below. Underneath the ramp it is covered wherever the ramp
	   has gone opaque, and only lights the part that is still translucent. */
	background-image:
		linear-gradient(180deg,
			rgba(251, 250, 254, 0) 0%,
			rgba(251, 250, 254, 0.04) 20%,
			rgba(251, 250, 254, 0.12) 36%,
			rgba(251, 250, 254, 0.28) 52%,
			rgba(251, 250, 254, 0.50) 66%,
			rgba(251, 250, 254, 0.74) 79%,
			rgba(251, 250, 254, 0.91) 90%,
			var(--ty-ground) 100%),
		radial-gradient(60% 42% at 50% 100%,
			rgba(233, 227, 255, 0.40) 0%,
			rgba(196, 181, 253, 0.16) 55%,
			rgba(167, 139, 250, 0) 100%);
	background-size: 100% var(--ty-dome), 100% calc(var(--ty-dome) * 1.7);
	background-position: 50% 100%, 50% 100%;
	background-repeat: no-repeat;
}

/* The hero is positioned, so its bled layer would otherwise paint over the
   start of the page. Lifting main puts the type back on top of the tail. */
.ty-page main { position: relative; z-index: 1; }

.ty-hive {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--hive-tile);
	background-size: 100px 173.2px;
	background-position: center top;
	opacity: 0.16;
	-webkit-mask-image: radial-gradient(75% 70% at 50% 30%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 85%);
	mask-image: radial-gradient(75% 70% at 50% 30%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 85%);
}

/* Larger floating hexes: outline gradient with a dark fill, so they read
   as cells of the hive rather than flat stickers. */
.ty-hive-float {
	position: absolute;
	z-index: -1;
	width: clamp(240px, 24vw, 400px);
	aspect-ratio: 1.3;
	pointer-events: none;
	opacity: 0.6;
	filter: drop-shadow(0 0 22px rgba(109, 40, 217, 0.22));
	-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, rgba(0, 0, 0, 0.85) 60%, transparent 95%);
	mask-image: radial-gradient(ellipse at center, #000 30%, rgba(0, 0, 0, 0.85) 60%, transparent 95%);
}
.ty-hive-float--left { top: 6%; left: clamp(-40px, -1vw, 0px); transform: rotate(-7deg); }
.ty-hive-float--right { top: 22%; right: clamp(-40px, -1vw, 0px); transform: rotate(9deg) scale(0.92); }

.ty-hive-float i {
	position: absolute;
	width: 30%;
	aspect-ratio: 1.1547;
	clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
	background: linear-gradient(135deg, rgba(96, 165, 250, 0.16), rgba(139, 92, 246, 0.5) 45%, rgba(217, 70, 239, 0.16));
}
.ty-hive-float i::after {
	content: "";
	position: absolute;
	inset: 2px;
	clip-path: inherit;
	background: #0f0820;
}
.ty-hive-float i:nth-child(1) { left: 2%;  top: 36%; opacity: 0.55; }
.ty-hive-float i:nth-child(2) { left: 25%; top: 8%;  opacity: 0.8; }
.ty-hive-float i:nth-child(3) { left: 25%; top: 64%; opacity: 0.45; }
.ty-hive-float i:nth-child(4) { left: 48%; top: 36%; opacity: 0.9; }
.ty-hive-float i:nth-child(5) { left: 71%; top: 8%;  opacity: 0.5; }

.ty-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ty-brand { display: inline-block; line-height: 0; }
.ty-brand__logo { width: clamp(150px, 16vw, 210px); height: auto; }

/* Success mark: the action ramp on a ring, one soft halo, no neon. */
.ty-mark {
	display: grid;
	place-items: center;
	width: clamp(74px, 8vw, 96px);
	aspect-ratio: 1;
	margin-top: clamp(26px, 3.4vw, 40px);
	border-radius: 50%;
	background: var(--grad-action);
	color: #fff;
	font-size: clamp(34px, 3.8vw, 46px);
	box-shadow:
		0 0 0 8px rgba(139, 92, 246, 0.14),
		0 0 0 16px rgba(139, 92, 246, 0.06),
		0 18px 44px rgba(109, 40, 217, 0.45);
}
.ty-mark i { line-height: 1; }

.ty-title {
	margin: clamp(22px, 2.8vw, 32px) 0 0;
	font-size: clamp(2rem, 1.2rem + 3.6vw, 4.125rem);   /* 32 → 66 */
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: #fff;
	text-wrap: balance;
}

.ty-sub {
	/* 640px at 22px let the first line run ~73 characters and dropped "on this
	   page." alone underneath. `balance` splits the two lines evenly instead;
	   `pretty` only guards the last line and had not prevented the orphan. */
	max-width: 34ch;
	margin: clamp(14px, 1.8vw, 20px) 0 0;
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);   /* 17 → 22 */
	font-weight: 400;
	line-height: 1.5;
	color: var(--text-cue);
	text-wrap: balance;
}

/* ----- Video frames ----- */
.ty-video {
	position: relative;
	width: min(100%, 900px);
	aspect-ratio: 16 / 9;
	margin-inline: auto;
	border-radius: clamp(18px, 2vw, 26px);
	overflow: hidden;
	background: #000;
	border: 1px solid rgba(167, 139, 250, 0.28);
	/* No drop shadow. The stack that used to sit here — a dark ring, a heavy
	   near-black cast and a violet glow — was tuned for the welcome video on
	   the plum hero. The training frame is the only .ty-video left and it
	   sits on the light ground, where a 70%-black cast reads as grime rather
	   than lift. The lavender hairline is enough to hold the edge there. */
}
.ty-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Click-to-watch overlay. Same device as the hero's unmute pill on
   f-offer.php — a dark glass pill with a violet pulse — because it is the
   same promise: one press and the thing starts talking. It sits over the
   centre of the frame, which is where Vimeo puts its own play button, so
   there is one target rather than two competing ones. Removed from the DOM
   once playback starts (js/ty-training.js). */
.ty-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 14px 26px;
	border: 0;
	border-radius: 14px;
	background: rgba(7, 3, 15, 0.78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.3px;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.18s ease, opacity 0.25s ease, transform 0.18s ease;
	animation: bv-unmute-pulse 2.4s ease-out infinite;
}
/* Phosphor's play triangle carries its ink to the right of the advance
   centre; half that offset lands its mass on the optical centre. */
.ty-video__play .ph-play { font-size: 20px; margin-right: 0.09em; }
.ty-video__play:hover { background: rgba(7, 3, 15, 0.92); }
.ty-video__play:active { transform: translate(-50%, -50%) scale(0.96); animation: none; }
.ty-video__play:focus-visible { outline: 2px solid var(--violet-300); outline-offset: 3px; }
.ty-video__play.is-gone { opacity: 0; pointer-events: none; animation: none; }

@media (max-width: 767px) {
	.ty-video__play { font-size: 14px; padding: 12px 20px; gap: 9px; border-radius: 12px; min-height: 44px; }
	.ty-video__play .ph-play { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.ty-video__play { animation: none; transition: opacity 0.2s ease; }
	.ty-video__play:active { transform: translate(-50%, -50%); }
}

/* ----- Shared type ----- */
.ty-h2 {
	margin: 0;
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.125rem);   /* 28 → 50 */
	font-weight: 750;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #1B1033;
	text-align: center;
	text-wrap: balance;
}
.ty-h2 span { color: var(--violet-500); }
.ty-h2--left { text-align: left; }
.ty-panel .ty-h2 { color: #fff; }
.ty-panel .ty-h2 span { color: var(--violet-300); }

/* ----- Buttons ----- */
.ty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 30px;
	border-radius: 999px;
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.25s var(--ease-lift), box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.ty-btn i { font-size: 1.15em; line-height: 1; }
.ty-btn:active { transform: translateY(0) scale(0.98); }
.ty-btn:focus-visible { outline: 2px solid var(--violet-300); outline-offset: 3px; }

.ty-btn--primary {
	background-image: var(--grad-action);
	color: #fff;
	font-family: var(--font-cta);
	font-weight: 600;
	box-shadow: 0 10px 28px rgba(109, 40, 217, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.ty-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(109, 40, 217, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18); }

.ty-btn--ghost {
	background: #F5F3FF;
	border: 1px solid rgba(109, 40, 217, 0.35);
	color: var(--violet-600);
}
.ty-btn--ghost:hover { background: #EDE9FE; border-color: var(--violet-500); transform: translateY(-2px); }

/* ----- Dark panels (the point-card recipe) ----- */
.ty-panel {
	position: relative;
	background-color: #0f0820;
	background-image: radial-gradient(120% 90% at 85% 110%, rgba(109, 40, 217, 0.34) 0%, rgba(59, 17, 120, 0.12) 45%, rgba(15, 8, 32, 0) 75%);
	border: 1px solid rgba(139, 92, 246, 0.18);
	border-radius: clamp(24px, 2.6vw, 32px);
	box-shadow:
		0 1px 2px rgba(5, 2, 12, 0.3),
		0 10px 24px rgba(5, 2, 12, 0.28),
		0 30px 60px rgba(5, 2, 12, 0.32);
}

/* ----- Access cards ----- */
.ty-access .ty-h2 { margin-bottom: clamp(26px, 3vw, 40px); }
.ty-access__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(18px, 2.2vw, 28px);
}

/* White access cards, centred like ClipBee's, plum-tinted shadow. */
.ty-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: clamp(32px, 3.4vw, 46px) clamp(24px, 3vw, 36px);
	background: #fff;
	border: 1px solid #E4DDF5;
	border-radius: clamp(26px, 2.8vw, 35px);
	box-shadow: 0 15px 40px rgba(59, 17, 120, 0.07);
	transition: transform 0.3s var(--ease-lift), box-shadow 0.3s ease, border-color 0.3s ease;
}
.ty-card:hover {
	transform: translateY(-6px);
	border-color: rgba(139, 92, 246, 0.4);
	box-shadow: 0 22px 50px rgba(59, 17, 120, 0.12);
}
.ty-card--primary {
	border: 2px solid rgba(139, 92, 246, 0.5);
	background: linear-gradient(135deg, #FAF8FF 0%, #fff 100%);
}

.ty-card__icon {
	display: grid;
	place-items: center;
	width: 90px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.16) 0%, rgba(139, 92, 246, 0.05) 100%);
	border: 2px solid rgba(139, 92, 246, 0.3);
	color: var(--violet-600);
	font-size: 40px;
}
.ty-card--primary .ty-card__icon { background: var(--grad-action); border-color: transparent; color: #fff; }
.ty-card__icon i { line-height: 1; }

.ty-card__title {
	margin: 22px 0 0;
	font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);   /* 22 → 28 */
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: #1B1033;
}
.ty-card__copy {
	flex: 1 1 auto;
	margin: 12px 0 26px;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	font-weight: 400;
	line-height: 1.5;
	color: #5C5175;
	text-wrap: pretty;
}
.ty-card__copy b { font-weight: 700; color: #1B1033; }

/* ----- Badge (section label inside a panel) ----- */
.ty-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(139, 92, 246, 0.14);
	border: 1px solid rgba(167, 139, 250, 0.32);
	color: var(--lavender);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}
.ty-badge i { font-size: 1.1em; color: var(--violet-300); }

/* ----- Webinar ----- */
.ty-webinar__panel {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	overflow: hidden;
}
.ty-webinar__media {
	position: relative;
	min-height: 100%;
}
.ty-webinar__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The ON AIR sign sits right of centre in the photo; this keeps it
	   inside the narrow desktop column, ahead of the fade. */
	object-position: 58% center;
	display: block;
}
/* Fade the photo into the panel on its inner edge. */
.ty-webinar__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(15, 8, 32, 0) 74%, #0f0820 100%);
}
.ty-webinar__body {
	padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3.4vw, 48px);
}
.ty-webinar__body .ty-h2 { margin-top: 16px; }

.ty-webinar__stat {
	margin: 18px 0 0;
	font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
	font-weight: 400;
	line-height: 1.45;
	color: var(--text-cue);
}
.ty-webinar__stat b { font-weight: 700; color: var(--alive-gold); }

.ty-webinar__lead {
	margin: 20px 0 10px;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
}

.ty-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ty-chips li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(167, 139, 250, 0.26);
	color: #EDE7FB;
	font-size: 0.95rem;
	font-weight: 600;
}
.ty-chips i { font-size: 1.15em; color: var(--violet-300); }

.ty-webinar__close {
	margin: 22px 0 0;
	font-size: 1.0625rem;
	line-height: 1.45;
	color: var(--text-body);
}
.ty-webinar__cue {
	margin: 8px 0 22px;
	font-size: 1.0625rem;
	font-weight: 600;
	color: #fff;
}

/* ----- Training strip ----- */
.ty-strip__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(16px, 2vw, 26px);
	padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 34px);
	border-radius: 999px;
	background-color: #0f0820;
	background-image: linear-gradient(90deg, rgba(76, 29, 149, 0.6) 0%, rgba(109, 40, 217, 0.4) 100%);
	border: 1px solid rgba(139, 92, 246, 0.35);
	box-shadow: 0 15px 40px rgba(59, 17, 120, 0.14);
	color: #fff;
	text-decoration: none;
	transition: transform 0.25s var(--ease-lift), border-color 0.25s ease, box-shadow 0.25s ease;
}
.ty-strip__link:hover { transform: translateY(-2px); border-color: var(--violet-300); box-shadow: 0 22px 50px rgba(59, 17, 120, 0.2); }
.ty-strip__icon,
.ty-strip__arrow {
	display: grid;
	place-items: center;
	width: 56px;
	aspect-ratio: 1;
	border-radius: 50%;
	font-size: 26px;
}
.ty-strip__icon { background: var(--grad-action); color: #fff; }
.ty-strip__arrow { background: rgba(255, 255, 255, 0.08); color: var(--lavender); font-size: 22px; transition: transform 0.25s var(--ease-lift); }
.ty-strip__link:hover .ty-strip__arrow { transform: translateY(3px); }
.ty-strip__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ty-strip__text strong {
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.ty-strip__text span { font-size: 1rem; font-weight: 300; color: var(--text-cue); }

/* ----- Quick tips: one panel, three rows ----- */
.ty-tips__panel { padding: clamp(26px, 3.2vw, 44px); }

/* Wider column gap carries the grouping, so the hairline rules between the
   three tips came out. A divider on every item is decoration, and with only
   three short blocks the space says the same thing more quietly. */
.ty-tips__title {
	margin: clamp(16px, 1.8vw, 22px) 0 0;
	text-align: left;
}

/* Three cards rather than three columns of loose text. The block used to be
   bare copy on the panel's own ground, which let it recede exactly where
   someone who has not found their login email is looking hardest. Giving each
   step a surface of its own, a numbered disc and a rule joining it to the
   next one turns it into a ladder you can see the shape of at a glance. */
.ty-tips__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(20px, 2.4vw, 34px);
	row-gap: clamp(20px, 2.4vw, 28px);
	margin: clamp(22px, 2.4vw, 30px) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ty-tip {
	position: relative;
	padding: clamp(20px, 2vw, 26px) clamp(18px, 1.8vw, 24px) clamp(18px, 1.8vw, 24px);
	border: 1px solid rgba(167, 139, 250, 0.16);
	border-radius: clamp(16px, 1.6vw, 20px);
	background: rgba(139, 92, 246, 0.07);
}

/* The rule between steps, drawn from each card's right edge across the gap to
   the next one and sitting on the discs' centre line, so the three read as one
   run rather than three unrelated boxes. Not on the last card, and not once
   the grid stacks. */
.ty-tip:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(clamp(20px, 2vw, 26px) + 21px);
	left: 100%;
	width: clamp(20px, 2.4vw, 34px);
	height: 1px;
	background: linear-gradient(90deg, rgba(167, 139, 250, 0.42), rgba(167, 139, 250, 0.12));
}

/* The step's number. Carries the action gradient because it is the one thing
   in the block that has to be found before anything is read. */
.ty-tip__num {
	display: grid;
	place-items: center;
	width: 42px;
	aspect-ratio: 1;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--grad-action);
	box-shadow: 0 6px 16px rgba(76, 29, 149, 0.45);
	color: #fff;
	font-size: 1.125rem;
	font-weight: 750;
	line-height: 1;
	/* The numeral is optically centred by the grid; the lining figures in
	   Outfit sit slightly high, so nudge them back onto the disc's centre. */
	padding-top: 1px;
}

.ty-tip__title {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin: 0 0 7px;
	font-size: 1.0625rem;
	font-weight: 650;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #fff;
}
/* Small and tinted: the number says where you are in the run, the glyph says
   what the step is about. Neither is asked to do the other's job. */
.ty-tip__title i { flex: none; font-size: 0.95em; color: var(--violet-300); }

/* Was 15.2px at weight 300. Light weights are display faces; at body size on
   a dark panel the strokes thin out and the text stops being comfortable to
   read. 16px at 400 with looser leading fixes it without growing the block. */
.ty-tip__copy {
	margin: 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--text-body);
	text-wrap: pretty;
}
.ty-tip__copy a { color: var(--violet-300); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ty-tip__copy a:hover { color: var(--lavender); }

/* ----- Support + training video: one white box ----- */
.ty-support { text-align: center; }
.ty-support__box {
	padding: clamp(36px, 4.6vw, 60px) clamp(20px, 3.6vw, 50px);
	background: #fff;
	border: 1px solid rgba(139, 92, 246, 0.22);
	border-radius: clamp(28px, 3.2vw, 45px);
	box-shadow: 0 25px 60px rgba(59, 17, 120, 0.07);
}
.ty-support__sub {
	margin: 12px 0 24px;
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
	font-weight: 400;
	color: #5C5175;
}
.ty-training { margin-top: clamp(44px, 5vw, 70px); }
.ty-training__head {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}
.ty-training__icon { color: var(--violet-500); font-size: 34px; line-height: 1; }
.ty-training__title {
	margin: 0;
	font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: #1B1033;
}

.ty-page .site-footer { margin-top: clamp(30px, 4vw, 56px); }

@media (max-width: 991px) {
	.ty-webinar__panel { grid-template-columns: 1fr; }
	.ty-webinar__media { aspect-ratio: 3 / 2; min-height: 0; }
	.ty-webinar__media::after { background: linear-gradient(180deg, rgba(15, 8, 32, 0) 60%, #0f0820 100%); }
	/* Stacked: the run is top-to-bottom now, so the sideways rules would point
	   at nothing. Reading order carries the sequence on its own. */
	.ty-tips__list { grid-template-columns: 1fr; row-gap: 16px; }
	.ty-tip:not(:last-child)::after { display: none; }
}

@media (max-width: 767px) {
	.ty-access__grid { grid-template-columns: 1fr; }
	.ty-strip__link { border-radius: 24px; grid-template-columns: auto minmax(0, 1fr); }
	.ty-strip__arrow { display: none; }
	.ty-hive-float { width: 220px; opacity: 0.4; }
	.ty-hive-float--right { top: 40%; }
}

@media (max-width: 479px) {
	.ty-btn { width: 100%; white-space: normal; text-align: center; }
	.ty-strip__icon { width: 46px; font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.ty-btn, .ty-strip__link, .ty-strip__arrow, .ty-card { transition: none; }
	.ty-btn:hover, .ty-strip__link:hover, .ty-card:hover { transform: none; }
}

/* ---------- Legal pages (privacy, terms, refunds, disclaimer, cookie) ----------
   ToonBee's legal template in the Deep Plum skin: the logo on an open
   plum field, one white reading card, the sales page's footer. Reading
   measure and rhythm are ToonBee's; colour, icons and radii are ours. */
body.legal-page {
	background: #0b0614;
	color: #1B1033;
}

/* Just the logo on the page's own ground. The band and hairline rule
   this replaces cut the top of the page into two dark strips with a
   visible seam; now one decoration layer runs from above the logo down
   past it into the body, so the field is continuous and the card sits
   in it rather than under it. */
.legal-header {
	position: relative;
	padding: clamp(38px, 5vw, 58px) 0 clamp(16px, 2vw, 26px);
	text-align: center;
}

/* Negative z-index, and no stacking context on the header, so both
   layers spill below it and still paint under everything that follows. */
.legal-header::before,
.legal-header::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	top: 0;
	pointer-events: none;
}

/* The hive, fading out downward and toward the sides. */
.legal-header::before {
	height: clamp(300px, 32vw, 460px);
	background-image: var(--hive-tile);
	background-size: 100px 173.2px;
	background-position: center top;
	opacity: 0.13;
	-webkit-mask-image: radial-gradient(85% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
	mask-image: radial-gradient(85% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
}

/* The bloom that used to sit on .legal-body, lifted so it centres on the
   logo instead of starting below it. */
.legal-header::after {
	height: clamp(380px, 42vw, 580px);
	background: radial-gradient(58% 100% at 50% 0%, rgba(109, 40, 217, 0.34) 0%, rgba(11, 6, 20, 0) 72%);
}

.legal-header__brand { display: inline-block; line-height: 0; }
.legal-header__logo {
	width: clamp(150px, 13vw, 172px);
	height: auto;
	transition: transform 0.3s var(--ease-lift);
}
.legal-header__brand:hover .legal-header__logo { transform: scale(1.04); }

/* Transparent: the ground and the bloom both come from the header layer
   above, which would otherwise be covered here. */
.legal-body {
	padding: clamp(24px, 3.5vw, 44px) 0 clamp(70px, 8vw, 100px);
	background: transparent;
}

.legal-card {
	width: min(100% - 2rem, 920px);
	margin-inline: auto;
	padding: clamp(28px, 4.5vw, 55px) clamp(20px, 5vw, 60px);
	background: #fff;
	border: 1px solid #E4DDF5;
	border-radius: clamp(24px, 3vw, 36px);
	box-shadow: 0 30px 80px rgba(5, 2, 12, 0.5);
}

.legal-title {
	margin: 0 0 8px;
	font-size: clamp(28px, 2.4vw, 34px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: #1B1033;
}
.legal-subtitle {
	margin: 0 0 32px;
	padding-bottom: 28px;
	border-bottom: 1px solid #EDE8F8;
	font-size: 16px;
	color: #6B5F86;
}

.legal-updated {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 40px;
	padding: 8px 20px 8px 8px;
	border-radius: 999px;
	background: #F5F3FF;
	border: 1px solid rgba(139, 92, 246, 0.3);
	font-size: 15px;
	color: #3C3157;
}
.legal-updated i {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--grad-action);
	color: #fff;
	font-size: 15px;
}
.legal-updated strong { font-weight: 600; color: #1B1033; }

.legal-intro {
	margin: 0 0 40px;
	padding-bottom: 35px;
	border-bottom: 1px solid #EDE8F8;
	font-size: 18px;
	line-height: 1.7;
	color: #4B4066;
}

.legal-card h2 {
	position: relative;
	margin: 48px 0 20px;
	padding-top: 12px;
	font-size: clamp(22px, 2vw, 26px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: #1B1033;
}
.legal-card h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--violet-600) 0%, var(--violet-400) 100%);
}
.legal-card h3 {
	margin: 32px 0 14px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #1B1033;
}
.legal-card h4 {
	margin: 26px 0 12px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #2E1065;
}

.legal-card p {
	margin: 0 0 18px;
	font-size: 16px;
	line-height: 1.8;
	color: #4B4066;
}
.legal-card strong { font-weight: 600; color: #1B1033; }

.legal-card ul,
.legal-card ol {
	list-style: none;
	margin: 18px 0 24px;
	padding: 0;
}
.legal-card li {
	position: relative;
	margin-bottom: 12px;
	padding-left: 34px;
	font-size: 16px;
	line-height: 1.7;
	color: #4B4066;
}
/* Bullet: a violet disc with a drawn tick, no icon font in a pseudo. */
.legal-card ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--grad-action);
}
.legal-card ul li::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 7px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.legal-card ol { counter-reset: legal-counter; }
.legal-card ol li::before {
	counter-increment: legal-counter;
	content: counter(legal-counter);
	position: absolute;
	left: 0;
	top: 3px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--grad-action);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.legal-card a {
	color: var(--violet-600);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgba(109, 40, 217, 0.35);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.legal-card a:hover {
	color: var(--violet-500);
	text-decoration-color: var(--violet-500);
}

/* Cookie category cards */
.legal-type-card {
	margin: 18px 0;
	padding: 26px 30px;
	background: #FBFAFE;
	border: 1px solid #E4DDF5;
	border-radius: 20px;
	transition: transform 0.3s var(--ease-lift), border-color 0.3s ease, box-shadow 0.3s ease;
}
.legal-type-card:hover {
	transform: translateY(-3px);
	border-color: rgba(139, 92, 246, 0.4);
	box-shadow: 0 12px 35px rgba(59, 17, 120, 0.1);
}
.legal-type-card h3 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
	font-size: 19px;
}
.legal-type-card h3 i {
	width: 36px;
	height: 36px;
	border-radius: 11px;
	display: grid;
	place-items: center;
	background: #F5F3FF;
	border: 1px solid rgba(139, 92, 246, 0.3);
	color: var(--violet-600);
	font-size: 19px;
}
.legal-type-card p { margin-bottom: 0; font-size: 15px; }
.legal-type-card p + p { margin-top: 14px; }

/* Notice box (disclaimer) */
.legal-notice-box {
	margin: 32px 0;
	padding: 28px 32px;
	background: #F5F3FF;
	border: 2px solid rgba(139, 92, 246, 0.3);
	border-radius: 20px;
}
.legal-notice-box h3 { margin: 0 0 10px; font-size: 20px; color: var(--violet-600); }
.legal-notice-box p { margin: 0; }

/* Steps box (refunds) */
.legal-steps-box {
	margin: 24px 0;
	padding: 35px 38px;
	background: #FBFAFE;
	border: 1px solid #E4DDF5;
	border-radius: 24px;
	box-shadow: 0 10px 30px rgba(59, 17, 120, 0.06);
}
.legal-steps-box ol { margin: 0; }
.legal-steps-box ol li { margin-bottom: 20px; padding-left: 38px; }
.legal-steps-box ol li:last-child { margin-bottom: 0; }
.legal-steps-box ol li strong {
	display: block;
	margin-bottom: 4px;
	font-size: 17px;
	color: #1B1033;
}

/* Info box (privacy): same family as the notice box, one weight lighter */
.legal-info-box {
	margin: 24px 0;
	padding: 24px 28px;
	background: #F5F3FF;
	border: 1px solid rgba(139, 92, 246, 0.35);
	border-radius: 16px;
}
.legal-info-box p { margin: 0; }

/* Closing contact block */
.legal-contact-footer {
	margin-top: 55px;
	padding-top: 40px;
	border-top: 1px solid #EDE8F8;
	text-align: center;
}
.legal-contact-footer h3 { margin: 0 0 12px; font-size: 22px; }
.legal-contact-footer p { margin: 0; color: #5C5175; }
.legal-contact-footer a { font-weight: 600; }
.legal-contact-footer--muted p { font-size: 14px; color: #8A7FA3; }

.legal-page .site-footer { margin-top: 0; }

@media (max-width: 639px) {
	.legal-card h2 { margin-top: 40px; }
	.legal-steps-box { padding: 24px 20px; }
	.legal-type-card { padding: 20px 20px; }
	.legal-notice-box { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.legal-header__logo, .legal-type-card, .legal-card a { transition: none; }
	.legal-header__brand:hover .legal-header__logo, .legal-type-card:hover { transform: none; }
}

/* ---------- Phone fixes ----------
   Found by walking the page at 375px. Each of these is a layout that
   only breaks once the column is narrower than the content was drawn
   for; the desktop composition is untouched. */

/* The Paste / Convert / Play strip is a three-column grid. Each label
   needs 124px and gets 110px at 375px, so the middle one collided with
   the arrow badges sitting on the seams. Stack it and turn the arrows
   to point down the column instead of across it. */
@media (max-width: 479px) {
	.start-flow__steps { grid-template-columns: minmax(0, 1fr); }
	.start-step { min-height: 52px; }
	.start-step:first-child { border-radius: 14px 14px 0 0; }
	.start-step:last-child { border-radius: 0 0 14px 14px; }
	.start-step__arrow {
		top: auto;
		right: auto;
		bottom: -14px;
		left: 50%;
		transform: translateX(-50%) rotate(90deg);
	}
}

@media (max-width: 639px) {
	/* "Sound made with BeeVoice" sat on the card's bottom-right overhang,
	   which on a 330px card runs straight through the centred play pill.
	   Tuck it into the corner and trim it so the two clear each other. */
	.laudio__badge {
		right: 6px;
		bottom: 6px;
		padding: 6px 12px;
		font-size: 11px;
		border-radius: 10px 10px 10px 4px;
	}
	.laudio__row--flip .laudio__badge { left: 6px; right: auto; }
	.laudio__badge b { font-size: 15px; }
	/* On narrow screens, keep attribution clear of the play controls. */
	.hive__media .laudio__badge { right: 6px; bottom: 6px; }

	/* The name and its accent tag need up to 150px side by side, but the
	   card head is 109px in the two-column phone grid, so the pill hung
	   off the card's right edge. Stack them instead. */
	.cast-card__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
	}

	/* Only the centre slide keeps its control. The flanking slides are
	   half out of frame, so their pills were being sliced mid-word. */
	.feel-swiper .swiper-slide:not(.swiper-slide-active) .feel-slide__play {
		opacity: 0;
		pointer-events: none;
	}

	/* The reactions are one flat 2048px image of eight comment cards in
	   two columns. Shrunk to a 311px column its type lands near 6px, so
	   the section reads as decoration rather than proof. Split it down
	   the middle instead and stack the halves: same asset, twice the
	   scale, one column of eight. */
	.react__img { display: none; }
	.react__halves {
		display: grid;
		gap: 12px;
		width: 96%;
		margin: 2.5% auto 0;
	}
	.react__half {
		aspect-ratio: 1024 / 1152;
		background-image: var(--react-testimonials);
		background-repeat: no-repeat;
		background-size: 200% auto;
	}
	.react__half--a { background-position: left center; }
	.react__half--b { background-position: right center; }
}

/* Offer phone/tablet layout. Scope these refinements to the shared founders
   and subscription page so the other sales and purchase pages stay intact. */
@media (max-width: 1199px) {
	.offer-page main :is(h2, h3) { text-wrap: balance; }
	.offer-page .feel__title { padding-inline: 16px; }
}

@media (max-width: 1199px) {
	.offer-page .point-card { min-width: 0; }
	.offer-page .point-card__title { white-space: normal; text-wrap: balance; }
	/* Shrink the decorative waveform tracks instead of overflowing the time. */
	.offer-page .direct-card__deck { gap: 8px; padding: 12px; }
	.offer-page .direct-card .audience-wave { min-width: 0; gap: 2px; }
	.offer-page .direct-card .audience-wave span { min-width: 0; }
	.offer-page .direct-card .audience-time { white-space: nowrap; }

	.offer-page .feat-slab {
		flex-direction: column;
		gap: 20px;
		padding: 24px;
		text-align: left;
	}
	.offer-page .feat-slab__copy,
	.offer-page .feat-slab__img { width: 100%; }
	.offer-page .feat-slab__copy { order: 1; }
	.offer-page .feat-slab__copy h3 { font-size: 25px; letter-spacing: -0.04em; }
	.offer-page .feat-slab__copy p { font-size: 16px; line-height: 1.45; }
	.offer-page .feat-slab__img { order: 2; margin-top: auto; }
	.offer-page .feat-slab__img img {
		width: auto;
		height: 150px;
		max-width: 100%;
		object-fit: contain;
	}

	.offer-page .laudio__badge {
		right: 6px;
		bottom: 6px;
		padding: 6px 10px;
		font-size: 10px;
		gap: 1px;
	}
	.offer-page .laudio__badge b { font-size: 13px; }
	.offer-page .laudio__row--flip .laudio__badge { left: 6px; right: auto; }
	.offer-page .hive__media .laudio__badge { right: 6px; bottom: 6px; }
	.offer-page .laudio-card .clip-card__play { row-gap: 6px; }
	.offer-page .laudio-card .clip-card__play i { width: 44px; height: 44px; font-size: 20px; }
	.offer-page .laudio-card.is-playing .clip-card__play { width: 44px; height: 44px; }
	.offer-page .laudio__cue { padding: 4px 10px; font-size: 12px; }
	.offer-page .cast-card__body p { font-size: 14px; }
	.offer-page .price__title { padding-inline: 16px; }
	.offer-page .price__sub { padding-inline: 16px; }
	.offer-page .price__btn a,
	.offer-page .final__btn a {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}
	.offer-page .price__btn i,
	.offer-page .final__btn i { flex: none; margin-left: 0; }
	.offer-page .footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (min-width: 768px) and (max-width: 1199px) {
	.offer-page .step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 32px; border-radius: 35px; }
	.offer-page .step .step__copy { padding: 0; }
	.offer-page .step__kicker { font-size: 36px; }
	.offer-page .step__body p { font-size: 17px; }
	.offer-page .step .step__body { max-width: none; margin: clamp(12px, 1.4vw, 20px) 0 0; text-align: left; }
	.offer-page .step .step__media img { width: 100%; max-width: 420px; margin: 0 0 0 auto; }
	.offer-page .step--2 .step__media img { margin: 0 auto 0 0; }
	.offer-page .step--2 .step__copy { order: 2; text-align: left; }
	.offer-page .step--2 .step__media { order: 1; }
	.offer-page .option { margin-top: 44px; }
	.offer-page .option__badge { top: -18px; left: 24px; }
	.offer-page .option--mirror .option__badge { left: auto; right: 24px; }
	.offer-page .option__detail { padding: 36px 20px 28px; }
	.offer-page .laudio__detail { width: 50%; padding: 0 5% 0 2%; }
	.offer-page .laudio__row--flip .laudio__detail { padding: 0 2% 0 5%; }
	.offer-page .laudio__detail h3 { font-size: 27px; }
	.offer-page .laudio__detail p { font-size: 17px; line-height: 1.4; }
	.offer-page .price__title { font-size: 42px; }
	.offer-page .final__click { margin-top: 72px; }
	.offer-page .final__product { width: 116px; left: 3%; }
	.offer-page .final__laptop { width: 200px; right: 1%; }
}

@media (min-width: 768px) and (max-width: 991px) {
	.offer-page .cast-card:last-child { grid-column: 2; }
}

@media (max-width: 767px) {
	.offer-page .hl-setup { font-size: clamp(29px, 8.2vw, 38px); text-wrap: balance; }
	.offer-page .hl-payoff {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		font-size: clamp(22px, 6.1vw, 32px);
		white-space: nowrap;
	}
	.offer-page .hl-payoff strong { font-size: 1.22em; letter-spacing: 0; }
	.offer-page .eq-pill { flex: none; width: clamp(32px, 9vw, 46px); }
	.offer-page .cue-label { font-size: clamp(9px, 2.65vw, 11px); letter-spacing: 0.08em; gap: 8px; }
	.offer-page .hero__cue { padding-inline: 0; }
	.offer-page .step { gap: 18px; }
	.offer-page .step .step__media img { width: min(100%, 280px); max-width: 100%; margin: auto; }
	.offer-page .step__kicker { font-size: clamp(28px, 8.1vw, 35px); }

	.offer-page .problem__boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
	.offer-page .problem-box { width: 100%; padding: 0; margin-top: 0; }
	.offer-page .problem-box__media { border-radius: 12px; }
	.offer-page .problem-box p { font-size: 14px; margin-top: 8px; }
	.offer-page .problem-box p span { padding: 7px 6px; }
	.offer-page .option { margin-top: 36px; overflow: visible; }
	.offer-page .option__img { width: min(100%, 300px); margin-inline: auto; }
	.offer-page .option__img img { border-radius: 0 0 25px 25px; }
	.offer-page .option__detail h3 { font-size: 24px; }

	/* Put the introduction above its artwork, giving both their own space. */
	.offer-page .intro-head { position: relative; top: auto; padding: 38px 16px 0; }
	.offer-page .intro-head__pill { font-size: 14px; color: #e1dbea; }
	.offer-page .intro-head__pill span { max-width: 100%; padding: 10px 16px; }
	.offer-page .intro-demo { margin-top: -12px; }
	.offer-page .feel__title { font-size: clamp(26px, 7.3vw, 32px); }
	.offer-page .feel__remember { font-size: clamp(23px, 6.7vw, 31px); }
	.offer-page .feel-slide__play { gap: 7px; }
	.offer-page .feel-slide__disc { width: 48px; height: 48px; }
	.offer-page .feel-slide__disc i { font-size: 20px; }
	.offer-page .feat-slab { padding: 24px 20px; gap: 16px; }
	.offer-page .feat-slab__copy h3 { font-size: 24px; }
	.offer-page .feat-slab__img img { height: 140px; }
	.offer-page .price__title { font-size: clamp(26px, 7.5vw, 32px); }
	.offer-page .price__inn { padding: 0 22px 25px; }
	.offer-page .price__badge-row { font-size: 16px; }
	.offer-page .price__badge { padding: 9px 14px; }
	.offer-page .price__offer-pill { padding-inline: 20px; }
	.offer-page .price__btn { font-size: clamp(20px, 5.8vw, 26px); letter-spacing: -0.04em; }
	.offer-page .price__btn a { padding: 18px 12px; }
	.offer-page .final__btn { font-size: clamp(18px, 5.4vw, 25px); }
	.offer-page .final__btn a { padding: 18px 12px; }
	.offer-page .price__urgency { width: calc(100% - 32px); }
}

@media (max-width: 639px) {
	.offer-page .cast-card { padding: 10px; }
	.offer-page .cast-card__body { padding: 12px 2px 6px; }
}

@media (max-width: 359px) {
	.offer-page .final__q { font-size: 20px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
	.offer-page .cast-card:nth-last-child(2) { grid-column: 2; }
}