/* =============================================================
   === V3 ANDREAS — 21-slide Typeform-style modal overlay ===
   Class prefix: cprl-v3-*  (kept distinct from legacy cprl__*
   so the two stylesheets can coexist while v2 is dormant.)
   Lot 1: foundations + chrome + slides 1/2/3 + stub for 4-21.

   Tokens come from the Figma (Andreas v2, file TV5ZeDDzmNGvrGdc2srrrL).
   Reds are intentionally the Figma values, NOT the brand #CF0000
   (client decision D1, 2026-05-13).
   ============================================================= */

:root {
	--cprl-v3-bg-page:        #1c1c1c;
	--cprl-v3-bg-modal:       #1c1c1c;
	--cprl-v3-bg-backdrop:    rgba(0, 0, 0, 0.55);
	--cprl-v3-text:           #ffffff;
	--cprl-v3-text-muted-80:  rgba(255, 255, 255, 0.80);
	--cprl-v3-text-muted-75:  rgba(255, 255, 255, 0.75);
	--cprl-v3-text-muted-50:  rgba(255, 255, 255, 0.50);
	--cprl-v3-input-bg:       #ffffff;
	--cprl-v3-input-border:   #e2e8f0;
	--cprl-v3-placeholder:    #a0aec0;
	--cprl-v3-answer-bg:      rgba(255, 255, 255, 0.40);
	--cprl-v3-primary:        #e53e3e;
	--cprl-v3-primary-hover:  #c43535;
	--cprl-v3-selected:       #d63c3c;
	--cprl-v3-success:        #25d366;
	--cprl-v3-radius-modal:   20px;
	--cprl-v3-radius-input:   15px;
	--cprl-v3-radius-cta:     12px;
	--cprl-v3-modal-w:        580px;
	--cprl-v3-modal-h:        702px;
	--cprl-v3-font:           'SF Pro Rounded', 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}

/* Lock background scroll while the modal is open. */
body.cprl-v3-locked {
	overflow: hidden;
}

/* ─── Modal container ─────────────────────────────────────── */

.cprl-v3-modal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--cprl-v3-font);
	color: var(--cprl-v3-text);
}

/* The cascade trap: [hidden] is overridden by display:flex unless
   we scope display to :not([hidden]). See memory feedback_hidden_attr_cascade.md
   (bug prelaunch v0.8.0). */
.cprl-v3-modal[hidden] {
	display: none;
}

.cprl-v3-modal__backdrop {
	position: absolute;
	inset: 0;
	/* Light overlay only — the actual blur is applied to the dialog so the
	   dialog itself becomes a frosted glass panel that the page (red blobs)
	   shows through. See `.cprl-v3-modal__dialog` below. Pattern restored
	   from commit 93b9e0d (v0.8.4 glassmorphism, validated against Figma). */
	background: rgba(0, 0, 0, 0.20);
	cursor: pointer;
}

.cprl-v3-modal__dialog {
	position: relative;
	width: var(--cprl-v3-modal-w);
	height: var(--cprl-v3-modal-h);
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 32px);
	/* Glassmorphism — restored from commit 93b9e0d (v0.8.4). The dialog is
	   semi-transparent and applies backdrop-filter to itself, so the page
	   behind (red blobs) shows through softly blurred. The subtle white
	   border traces the frosted edge per Figma 1823:3484. */
	background: rgba(30, 30, 30, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--cprl-v3-radius-modal);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 30px 100px rgba(0, 0, 0, 0.4);
	-webkit-backdrop-filter: blur(22px) saturate(1.25);
	backdrop-filter: blur(22px) saturate(1.25);
}

/* Fullscreen variant — only used on slide 21 (confirmation). */
.cprl-v3-modal--fullscreen .cprl-v3-modal__dialog {
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	border-radius: 0;
}

.cprl-v3-modal--fullscreen .cprl-v3-modal__backdrop {
	display: none;
}

/* ─── Chrome (header / footer) ────────────────────────────── */

.cprl-v3-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px 0;
	flex: 0 0 auto;
}

.cprl-v3-modal__logo {
	width: 42px;
	height: 42px;
	background: #fff;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.cprl-v3-modal__logo img {
	width: 80%;
	height: auto;
}

.cprl-v3-modal__close,
.cprl-v3-modal__back {
	background: none;
	border: none;
	color: var(--cprl-v3-text-muted-75);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	padding: 4px 8px;
	/* Override Astra's forced .button padding 20px 40px (see CLAUDE.md). */
}

.cprl-v3-modal__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1;
}

.cprl-v3-modal__back-arrow {
	display: inline-block;
	font-size: 20px;
	line-height: 1;
	transform: translateY(-1px);
}

.cprl-v3-modal__close:hover,
.cprl-v3-modal__back:hover {
	color: var(--cprl-v3-text);
}

.cprl-v3-modal__close[hidden],
.cprl-v3-modal__back[hidden] {
	display: none;
}

/* "Next →" link (Figma 1823:3484, nodes 1823:3858 + 1826:3860).
   Text + arrow, opacity 75%, opacity 100% on hover. Lives INSIDE each
   slide body (not in the modal footer): Figma positions it ~60px below
   the input, right-aligned within the slide column. We use
   `align-self: flex-end` because `.cprl-v3-slide` is `display: flex;
   flex-direction: column`. The `margin-top` adds the Figma rhythm
   (input bottom → Next baseline ≈ 60px including the parent flex gap). */
.cprl-v3-modal__next {
	align-self: flex-end;
	margin-top: 24px;
	background: none;
	border: none;
	color: var(--cprl-v3-text-muted-75);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	/* Override Astra's forced .button padding 20px 40px. */
	padding: 4px 8px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 120ms ease;
}

.cprl-v3-modal__next:hover {
	color: var(--cprl-v3-text);
}

.cprl-v3-modal__next[hidden] {
	display: none;
}

.cprl-v3-modal__next-arrow {
	display: inline-block;
	font-size: 16px;
	line-height: 1;
	transform: translateY(-1px);
}

.cprl-v3-modal__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	/* Figma 1823:3484 : eyebrow "About you" sits at modal-Y=205 (measured
	   on the 580×702 render). Header takes ~60px (padding 18 + 42px logo),
	   so body padding-top = 205 - 60 = 145px. Content-heavy slides
	   (industry grid) still flow naturally and scroll if needed. */
	justify-content: flex-start;
	padding: 145px 30px 32px;
	overflow-y: auto;
}

/* Slide 3 (role hub) packs 5 vertically-stacked pills + footer
   (Back/progress) — at the global 145px top padding the title would
   sit too low and the last pills get clipped. Per client Figma
   1823:3740 the eyebrow "About you" starts at modal-Y≈125, so we
   subtract ~80px from padding-top only when slide 3 is the active
   (non-hidden) slide. Scoped via :has() so slide 2 (validated layout,
   user explicit "ne touche plus au slide précédent") stays untouched. */
.cprl-v3-modal__body:has(.cprl-v3-slide[data-slide="3"]:not([hidden])) {
	padding-top: 65px;
}

/* Slide 21 (confirmation) — push content up to match Figma 1633:9430
   where the eyebrow sits ~150px below the card top (well above centre).
   Without this the default 145px top padding + .cprl-v3-confirm centring
   sent the content too low and forced a vertical scroll. */
.cprl-v3-modal__body:has(.cprl-v3-slide[data-slide="21"]:not([hidden])) {
	padding-top: 36px;
	justify-content: flex-start;
}

/* Slides 4-20 (per-track questions). The slide content varies in
   height: short slides (one input + Next, or 4 radios) feel awkward
   pinned to the top, tall slides (industry grid 11 options, sourcing
   5 checkboxes + Next) used to overflow and scroll at the global
   145px top padding. Strategy:
     - Drop padding-top to 50px so the tallest slides fit without
       scrolling within the 642px body height (modal 702 - header 60).
     - Switch the body to `justify-content: center` so SHORT slides
       float in the middle of the body instead of clinging to the top.
       Tall slides simply fill the available height naturally.
   Slides 2/3/21 are excluded — slide 2 + 3 are pixel-validated against
   the Figma (user explicit "on ne touche plus a la slide 2 et la slide 3"),
   slide 21 has its own fullscreen confirmation layout. */
.cprl-v3-modal__body:has(.cprl-v3-slide:not([hidden]):not([data-slide="2"]):not([data-slide="3"]):not([data-slide="21"])) {
	padding-top: 50px;
	justify-content: center;
}

/* Nav block (Back + Progress). Lives INSIDE the body content flow per
   Figma 1823:3747 — appears right after the visible slide, not pinned
   to the modal bottom. The body's flex column with `justify-content:
   flex-start` makes it stack naturally after whichever slide is visible. */
.cprl-v3-modal__nav {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-top: 24px;
	/* Anchor for the absolutely-centred progress label so it stays
	   visually centred relative to the modal width regardless of
	   Back's width. */
	position: relative;
}

/* Slide 2 (name) — no Back, no Progress per Figma. Hide the whole
   nav block so it doesn't leave an empty 24px-tall gap below the
   Next button. */
.cprl-v3-modal__body:has(.cprl-v3-slide[data-slide="2"]:not([hidden])) .cprl-v3-modal__nav {
	display: none;
}

.cprl-v3-modal__progress {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-size: 12px;
	font-weight: 400;
	color: var(--cprl-v3-text-muted-80);
}

.cprl-v3-modal__progress[hidden] {
	display: none;
}

/* Discreet nav Next — mirror of Back, lives in the nav row alongside
   Back and Progress (Figma 1826:4127). Hidden by default; each slide
   opts in by adding data-cprl-nav-next="true" to its <section>. We
   could not just rely on the presence of the inline CTA because Back
   is anchored at the modal bottom while the inline CTA sits inside the
   slide content area — they would never align visually. */
.cprl-v3-modal__nav-next {
	margin-left: auto;
	background: none;
	border: none;
	color: var(--cprl-v3-text-muted-75);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	display: none; /* opt-in per slide via :has() rules below */
	align-items: center;
	gap: 6px;
	transition: color 120ms ease;
}

.cprl-v3-modal__nav-next:hover,
.cprl-v3-modal__nav-next:focus-visible {
	color: var(--cprl-v3-text);
}

.cprl-v3-modal__nav-next-arrow {
	display: inline-block;
	font-size: 20px;
	line-height: 1;
	transform: translateY(-1px);
}

/* Slides that opt in to the discreet nav-Next (other slides keep
   their inline .cprl-v3-cta until the client validates them — one at
   a time per the 2026-05-13 review session).
   Studio track (2026-05-13): slides 14 (sourcing multi-select) + 16
   (city text input) migrate to the discreet nav-Next pattern. Slides
   13/15/17 are single-select auto-advance — Back + Progress only, no
   Next button needed. */
.cprl-v3-modal__body:has(.cprl-v3-slide[data-slide="6"]:not([hidden])) .cprl-v3-modal__nav-next,
.cprl-v3-modal__body:has(.cprl-v3-slide[data-slide="7"]:not([hidden])) .cprl-v3-modal__nav-next,
.cprl-v3-modal__body:has(.cprl-v3-slide[data-slide="10"]:not([hidden])) .cprl-v3-modal__nav-next,
.cprl-v3-modal__body:has(.cprl-v3-slide[data-slide="11"]:not([hidden])) .cprl-v3-modal__nav-next,
.cprl-v3-modal__body:has(.cprl-v3-slide[data-slide="14"]:not([hidden])) .cprl-v3-modal__nav-next,
.cprl-v3-modal__body:has(.cprl-v3-slide[data-slide="16"]:not([hidden])) .cprl-v3-modal__nav-next,
.cprl-v3-modal__body:has(.cprl-v3-slide[data-slide="19"]:not([hidden])) .cprl-v3-modal__nav-next,
.cprl-v3-modal__body:has(.cprl-v3-slide[data-slide="20"]:not([hidden])) .cprl-v3-modal__nav-next {
	display: inline-flex;
}

/* ─── Slide containers ────────────────────────────────────── */

.cprl-v3-slide {
	display: flex;
	flex-direction: column;
	gap: 18px;
	animation: cprl-v3-slide-in 250ms ease-out both;
	/* Figma 1823:3484 : the content (label + title + input) sits in a
	   ~320px-wide column centred horizontally inside the modal. The 320px
	   cap also makes the title naturally wrap "Tell us your full" / "name."
	   on two lines, matching the Figma break point. On viewports under
	   ~480px the constraint is relaxed so the column fills the modal. */
	width: 100%;
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
}

/* See the cascade trap note above. */
.cprl-v3-slide[hidden] {
	display: none;
}

/* Per-slide width overrides — when the Figma uses a wider title
   container than the validated slide-2 320px column. Slide 20 (final
   must-have, Figma node 1833-6643) sets its title text node to 361px;
   at 320px the title wraps to 4 lines instead of 3.
   Slides 7, 11 & 16 (city, Figma 1826:3867 / 1833:7644) need the same
   360px column so the 35px Bold title "Which city do you usually record
   from?" wraps on 2 lines (after "do you") instead of 3 at default 320px.
   Slide 18 (sponsor info, Figma 1833:6901) needs 360px for the long
   "Send us an email and we will be in touch to discuss becoming an
   active sponsor on collabable." heading to wrap on ~5 lines as in the
   mockup instead of 7+ at the default 320px. */
.cprl-v3-slide[data-slide="7"],
.cprl-v3-slide[data-slide="11"],
.cprl-v3-slide[data-slide="16"],
.cprl-v3-slide[data-slide="18"],
.cprl-v3-slide[data-slide="20"] {
	max-width: 360px;
}

/* Slide 14 (studio sourcing, Figma 1833:6382) — title "How do you
   currently find bookings?" needs 2-line wrap "How do you currently /
   find bookings?". Figma title container is 412px; at 320px the title
   wraps to 3 lines. 420px holds the Figma break. */
.cprl-v3-slide[data-slide="14"] {
	max-width: 420px;
}

/* Slides 13 (studio frequency, Figma 1832:4931) + 15 (studio hourly,
   Figma 1833:5612) — Figma title containers measure 388px. At the 320px
   default, "studio being booked?" wraps to a third line and "hourly
   rates?" wraps to two. 390px gives the Figma 2-line / 1-line break. */
.cprl-v3-slide[data-slide="13"],
.cprl-v3-slide[data-slide="15"] {
	max-width: 390px;
}

/* Studio track (slides 13/14/15/16) + sponsor slide 18 — symmetric
   top/bottom padding so the slide content sits visually centred in the
   modal body. The broad rule above gives 50px top vs 32px bottom which
   leaves the content ~18px above true centre; client 2026-05-13 wants
   these slides truly centred vertically. Host/guest tracks keep the
   50px top per their validated Figma frames. */
.cprl-v3-modal__body:has(.cprl-v3-slide[data-slide="13"]:not([hidden])),
.cprl-v3-modal__body:has(.cprl-v3-slide[data-slide="14"]:not([hidden])),
.cprl-v3-modal__body:has(.cprl-v3-slide[data-slide="15"]:not([hidden])),
.cprl-v3-modal__body:has(.cprl-v3-slide[data-slide="16"]:not([hidden])),
.cprl-v3-modal__body:has(.cprl-v3-slide[data-slide="18"]:not([hidden])) {
	padding-top: 32px;
}

/* Slide 9 (guest frequency, Figma 1832:4690) — title text container is
   388px in the Figma; at 360px "How often do you guest" overflows and
   wraps to 3 lines. 390px lets it break cleanly on 2 lines after "guest". */
.cprl-v3-slide[data-slide="9"] {
	max-width: 390px;
}

/* Slide 10 (guest sourcing, Figma 1833:5392) — title "How do you
   currently find your guest appearances?" needs to wrap on 2 lines max.
   At 390px the trailing word "appearances?" pushes onto a 3rd line.
   480px lets the title break cleanly after "currently". */
.cprl-v3-slide[data-slide="10"] {
	max-width: 480px;
}

/* Single-column radio/checkbox answer columns (NOT the industry 2-col
   grid) — pills centred horizontally inside the slide, with the inner
   label centred too. Per Figma 2026-05-13 review — applies to slides
   4, 5, 6, 9, 10, 13, 14, 15. The industry grid (slides 8/17) keeps
   its 2-col stretched layout. Base `.cprl-v3-answer` (above) already
   handles the white/no-fade rendering for ALL pills, grid included. */
.cprl-v3-answers:not(.cprl-v3-answers--grid) {
	align-items: center;
}
.cprl-v3-answers:not(.cprl-v3-answers--grid) .cprl-v3-answer {
	width: 100%;
	max-width: 299px;
	text-align: center;
}

/* Slide 18 — sponsor info mailto pill (Figma node 1833:7111 / 1833:7112,
   client adjustment 2026-05-13). 299×45 pill, fill #FFFFFF at 40% alpha,
   pure white text (no outer opacity so the label stays crisp), border
   radius 24px. Rendered as <a href="mailto:...">; click advances the
   questionnaire AND lets the browser open the email client (see
   landing.js modal click handler). */
.cprl-v3-sponsor-email {
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 299px;
	height: 45px;
	padding: 0 16px;
	background: rgba(255, 255, 255, 0.40);
	border-radius: 24px;
	color: var(--cprl-v3-text);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background 120ms ease, transform 120ms ease;
}

.cprl-v3-sponsor-email:hover,
.cprl-v3-sponsor-email:focus-visible {
	background: rgba(255, 255, 255, 0.55);
	color: var(--cprl-v3-text);
}

.cprl-v3-sponsor-email:active {
	transform: scale(0.98);
}

@keyframes cprl-v3-slide-in {
	from { opacity: 0; transform: translateX(24px); }
	to   { opacity: 1; transform: translateX(0); }
}

.cprl-v3-slide__label {
	/* Figma node 1823:3618 first paragraph: SF Pro Rounded Bold 18px,
	   opacity 80%, line-height 1.4. */
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--cprl-v3-text-muted-80);
	margin: 0;
}

.cprl-v3-slide__title {
	/* Figma Andreas track slides (1833-5172/6139/etc., 2026-05-13):
	   SF Pro Rounded Bold 35px, tight line-height 1.2. Earlier 38px/1.4
	   was sourced from the slide 2 mockup which uses a shorter single-
	   line title; on multi-line track slides it forced 4-line wraps
	   instead of Figma's 3. */
	font-size: 35px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--cprl-v3-text-muted-80);
	margin: 0;
}

.cprl-v3-slide__sublabel {
	font-size: 12px;
	font-weight: 400;
	color: var(--cprl-v3-text-muted-80);
	margin: 0;
}

/* Inline header row — eyebrow + sublabel on the same line per Figma
   (e.g. slide 6 sourcing: "About you  Select as many that apply").
   The eyebrow keeps its bold 18px treatment; the sublabel is the small
   inline qualifier. */
.cprl-v3-slide__header {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
.cprl-v3-slide__header .cprl-v3-slide__sublabel {
	/* In the inline header context, anchor the sublabel to the eyebrow's
	   baseline. The font-size + colour declared above are kept. */
	margin: 0;
}

.cprl-v3-slide__error {
	font-size: 13px;
	color: #fed7d7;
	margin: 0;
}

.cprl-v3-slide__error[hidden] {
	display: none;
}

/* ─── Inputs ──────────────────────────────────────────────── */

.cprl-v3-input,
.cprl-v3-textarea {
	width: 100%;
	background: var(--cprl-v3-input-bg);
	border: 0.5px solid var(--cprl-v3-input-border);
	border-radius: var(--cprl-v3-radius-input);
	padding: 14px 18px;
	font: inherit;
	font-size: 14px;
	color: #2d3748;
	outline: none;
}

.cprl-v3-input::placeholder,
.cprl-v3-textarea::placeholder {
	color: var(--cprl-v3-placeholder);
}

.cprl-v3-input:focus,
.cprl-v3-textarea:focus {
	box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.30);
}

.cprl-v3-textarea {
	min-height: 120px;
	resize: vertical;
}

/* ─── Answer cards (radio / checkbox) ─────────────────────── */

.cprl-v3-answers {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cprl-v3-answers--grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.cprl-v3-answer {
	display: block;
	position: relative;
	background: var(--cprl-v3-answer-bg);
	border-radius: var(--cprl-v3-radius-input);
	padding: 12px 16px;
	min-height: 45px;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 150ms ease;
	/* Keep labels on a single line — "Health / Wellness" and
	   "Tech / Software" otherwise wrap at the space surrounding the
	   slash. The 2-col grid track (1fr) is wide enough for the
	   longest label ("Entrepreneurship", which never wraps anyway). */
	white-space: nowrap;
}

.cprl-v3-answer:hover {
	background: rgba(255, 255, 255, 0.5);
}

.cprl-v3-answer input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.cprl-v3-answer:has(input:checked) {
	background: var(--cprl-v3-selected);
	opacity: 1;
}

.cprl-v3-answer--full {
	grid-column: 1 / -1;
}

/* ─── CTA button ──────────────────────────────────────────── */

.cprl-v3-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--cprl-v3-primary);
	color: var(--cprl-v3-text);
	border: none;
	border-radius: var(--cprl-v3-radius-cta);
	padding: 14px 28px;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 150ms ease;
	/* Neutralise Astra's .button override (forces 20px 40px padding). */
	box-sizing: border-box;
}

.cprl-v3-cta:hover {
	background: var(--cprl-v3-primary-hover);
}

.cprl-v3-cta:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ─── Honeypot — visually hidden, never display:none (bots
       skip display:none fields). ─────────────────────────── */

.cprl-v3-honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ─── Confirmation (slide 21, fullscreen) ─────────────────── */

.cprl-v3-slide--confirm {
	/* Anchored to the TOP of the body (not vertically centred) — Figma
	   1633:9430 stacks the content in the upper portion of the card.
	   `align-items: flex-start` left-anchors the column horizontally too,
	   while the column itself spans the full content width. */
	flex: 1 1 auto;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
}

.cprl-v3-slide--confirm[hidden] {
	display: none;
}

.cprl-v3-confirm {
	/* Left-aligned column per Figma 1633:9430. The whole column lives
	   inside .cprl-v3-slide--confirm which positions it at the top of
	   the body; here we just stack items vertically and let the natural
	   left edge serve as the alignment baseline. */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	max-width: 520px;
	text-align: left;
	padding: 0;
	width: 100%;
}

.cprl-v3-confirm__eyebrow {
	/* Figma 1633:9439 — SF Pro Rounded Bold 18px white, 100% opacity,
	   no uppercase / no letter-spacing. (Previous: 14px uppercase muted.) */
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--cprl-v3-text);
	margin: 0;
}

.cprl-v3-confirm__title {
	/* Figma 1633:9438 — SF Pro Rounded Bold 38px white, line-height 1.4.
	   Becomes a flex row to host the inline WhatsApp icon at its right. */
	font-size: 38px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--cprl-v3-text);
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.cprl-v3-confirm__title-icon {
	/* Figma 1633:9442 — WhatsApp glyph right of the title text. Pure
	   white per the Figma "Negative" colour variant (was green before).
	   Tap target for mobile users when the QR can't be scanned. */
	display: inline-flex;
	width: 30px;
	height: 30px;
	color: var(--cprl-v3-text);
	text-decoration: none;
	flex-shrink: 0;
	transition: transform 150ms ease;
}

.cprl-v3-confirm__title-icon:hover,
.cprl-v3-confirm__title-icon:focus-visible {
	transform: scale(1.08);
}

.cprl-v3-confirm__title-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.cprl-v3-confirm__subtitle {
	/* Figma 1633:9440 — 18px white, line-height 1.4. Weight is 500
	   (medium) instead of 700 (bold) so the body reads as the
	   supporting copy beneath the bold title, per the user's note that
	   "les textes en dessous ne doivent pas etre aussi gras que le
	   titre". Max-width 410px lets the first sentence wrap to exactly
	   2 lines (376px from Figma pushed it to 3). */
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--cprl-v3-text);
	margin: 0;
	max-width: 410px;
}

.cprl-v3-confirm__subtitle p {
	margin: 0;
}

.cprl-v3-confirm__subtitle p + p {
	/* Empty-paragraph gap from Figma (~one line at 18px*1.4 = 25px). */
	margin-top: 25px;
}

.cprl-v3-confirm__qr {
	display: inline-flex;
	padding: 12px;
	background: #ffffff;
	border-radius: 16px;
	margin-top: 6px;
}

.cprl-v3-confirm__qr img {
	display: block;
	width: 160px;
	height: 160px;
	border-radius: 8px;
}

/* Fallback link for tablet/PC users who can't scan the QR with their device.
   Sits directly under the QR; the visible anchor uses the WhatsApp green so
   it reads as a tap target without competing with the red primary CTA. */
.cprl-v3-confirm__qr-link {
	margin: 14px 0 0;
	font-size: 14px;
	color: var(--cprl-v3-text-muted-50);
	text-align: center;
}

.cprl-v3-confirm__qr-link a {
	color: var(--cprl-v3-success);
	font-weight: 600;
	text-decoration: underline;
	margin-left: 4px;
}

.cprl-v3-confirm__qr-link a:hover {
	opacity: 0.85;
}

/* WhatsApp green CTA (#25D366) — distinct from the red primary CTA used
   on other slides. The Figma confirmation screen uses this green to mirror
   the WhatsApp brand. */
.cprl-v3-confirm__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--cprl-v3-success);
	color: #ffffff;
	text-decoration: none;
	border-radius: var(--cprl-v3-radius-cta);
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 700;
	transition: opacity 150ms ease;
}

.cprl-v3-confirm__cta:hover {
	opacity: 0.9;
	color: #ffffff;
}

.cprl-v3-confirm__cta-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.cprl-v3-confirm__hint {
	font-size: 12px;
	color: var(--cprl-v3-text-muted-50);
	margin: 0;
}

/* In fullscreen mode (slide 21), the close button is rendered more
   discreet per spec section 5.11 (opacity 0.50 vs 0.75 elsewhere). */
.cprl-v3-modal--fullscreen .cprl-v3-modal__close {
	color: var(--cprl-v3-text-muted-50);
}

/* Hide the nav (back/progress) entirely on the confirmation screen —
   it's a terminal slide, no navigation. */
.cprl-v3-modal--fullscreen .cprl-v3-modal__nav {
	display: none;
}

/* Mobile-friendly hint for the textarea slide. */
.cprl-v3-slide__hint {
	font-size: 11px;
	color: var(--cprl-v3-placeholder);
	text-align: right;
	margin: -8px 0 0;
}

/* ─── Mobile ──────────────────────────────────────────────── */

@media (max-width: 600px) {
	.cprl-v3-modal__dialog {
		width: calc(100vw - 20px);
		height: calc(100vh - 40px);
		max-width: calc(100vw - 20px);
	}
	.cprl-v3-modal__body {
		padding: 40px 20px 20px;
	}
	.cprl-v3-slide {
		/* Release the 320px desktop cap so the content fills the small modal. */
		max-width: none;
	}
	.cprl-v3-modal__nav {
		margin-top: 20px;
	}
	.cprl-v3-slide__title {
		font-size: 26px;
	}
	.cprl-v3-confirm__title {
		font-size: 30px;
	}
	.cprl-v3-confirm__qr img {
		width: 140px;
		height: 140px;
	}
}

/* ─── Landing email form (Figma 1676:951 "Secure your spot landing") ─── */

.cprl__landing-form {
	margin: clamp(24px, 2.5vw, 40px) auto 0;
	width: 100%;
	max-width: 540px;
	box-sizing: border-box;
}

.cprl__landing-form-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
	background: #ffffff;
	padding: 6px;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.cprl__landing-email {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: none;
	padding: 10px 14px;
	font: inherit;
	font-size: 15px;
	color: #1a202c;
}

.cprl__landing-email::placeholder {
	color: var(--cprl-v3-placeholder);
}

.cprl__landing-submit {
	flex: 0 0 auto;
	background: var(--cprl-v3-primary);
	color: #ffffff;
	border: 0;
	border-radius: 12px;
	padding: 12px 22px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 150ms ease;
	/* Neutralise Astra's forced .button padding 20px 40px. */
	box-sizing: border-box;
}

.cprl__landing-submit:hover {
	background: var(--cprl-v3-primary-hover);
}

.cprl__landing-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.cprl__landing-error {
	margin: 10px 0 0;
	font-size: 13px;
	color: #fed7d7;
	text-align: center;
}

.cprl__landing-error[hidden] {
	display: none;
}

@media (max-width: 540px) {
	.cprl__landing-form-row {
		flex-direction: column;
		gap: 6px;
	}
	.cprl__landing-submit {
		width: 100%;
	}
}

/* === END V3 ANDREAS — legacy v2 styles continue below === */

/* =============================================================
   Collabable Pre-launch — Landing CSS (responsive)

   Strategy:
   - Background image (Andreas' red blobs) covers viewport via
     `background-size: cover` so it adapts to ANY screen ratio.
   - Content is real HTML, fluid, centred. No fixed canvas, no
     letterbox, no scaling tricks. clamp() for typography, flex
     for layout.
   - Class prefix: cprl__
   ============================================================= */

:root {
	--cprl-bg: #1c1c1c;
	--cprl-text: #ffffff;
	--cprl-text-muted: rgba(255, 255, 255, 0.6);
	--cprl-text-soft: rgba(255, 255, 255, 0.85);
	--cprl-gray-200: #e2e8f0;
	--cprl-gray-400: #a0aec0;
	--cprl-gray-500: #718096;
	--cprl-gray-700: #2d3748;
	--cprl-red: #e53e3e;
	--cprl-red-hover: #c1322f;

	--cprl-font: 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--cprl-page-pad-x: clamp(20px, 4vw, 64px);
	--cprl-page-pad-y: clamp(24px, 3vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body.cprl {
	min-height: 100vh;
	background-color: var(--cprl-bg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: max(100%, calc(100vh * 1920 / 1257)) auto;
	background-attachment: fixed;
	color: var(--cprl-text);
	font-family: var(--cprl-font);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

a { color: inherit; }

/* ================================================================
   PAGE LAYOUT
   ================================================================ */
.cprl__page {
	position: relative;
	min-height: 100vh;
	width: 100%;
	padding: var(--cprl-page-pad-y) var(--cprl-page-pad-x);
	display: flex;
	flex-direction: column;
}

/* ================================================================
   TOP BAR (decorative)
   ================================================================ */
.cprl__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	user-select: none;
	pointer-events: none;
}

.cprl__topbar-left { flex-shrink: 0; }
.cprl__logo {
	display: block;
	height: clamp(26px, 2.5vw, 34px);
	width: auto;
}

.cprl__topbar-right {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.5vw, 18px);
	color: var(--cprl-gray-500);
	font-size: 12px;
	font-weight: 700;
	flex-wrap: nowrap;
	/* Override the parent's `pointer-events: none` — clicks on this group
	   open the welcome popup (decorative menu, not real navigation). */
	pointer-events: auto;
	cursor: pointer;
}
.cprl__topbar-right * { cursor: pointer; }

.cprl__topbar-text { white-space: nowrap; }

/* Search field — Figma node 1608:649 (199 × 39.5 on 1920 frame).
   Width  : 199/1920 = 10.36vw, max 199px, min 140px.
   Height : 39.5/1920 = 2.057vw, max 39.5px, min 30px. */
.cprl__topbar-search {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #ffffff;
	border: 0.5px solid var(--cprl-gray-200);
	border-radius: 15px;
	padding: 0 14px;
	width: clamp(140px, 10.36vw, 199px);
	height: clamp(30px, 2.057vw, 39.5px);
	color: #000000;
}
/* Icon: SVG inline (mask + PNG was unreliable across caches). Black to match
   Figma node 1608:655. */
.cprl__topbar-search-icon {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	display: block;
}
/* Placeholder: SF Pro Rounded Regular 12px / Gray-400, matching Figma node
   1608:659. Explicit font-weight overrides the parent topbar-right which
   forces 700 (bold) on its children. */
.cprl__topbar-search-placeholder {
	font-family: var(--cprl-font);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.5;
	color: var(--cprl-gray-400);
	white-space: nowrap;
}

.cprl__topbar-dot {
	width: 12px; height: 12px;
	background: var(--cprl-gray-500);
	border-radius: 2px;
	flex-shrink: 0;
}

@media (max-width: 720px) {
	/* Keep only logo + a single Sign In on mobile */
	.cprl__topbar-text:not(:last-child),
	.cprl__topbar-search,
	.cprl__topbar-dot { display: none; }
}

/* ================================================================
   HERO
   ================================================================ */
.cprl__hero {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	/* Block gaps are controlled per-child below to match Figma 1920×1137
	   exactly. No uniform `gap` here. */
	gap: 0;
	/* Topbar logo bottom (Figma y=65) → avatar top (Figma y=249) = 184px.
	   184/1920 = 9.58vw. */
	padding: clamp(40px, 9.58vw, 184px) 0 clamp(40px, 5vh, 60px);
	max-width: 1100px;
	width: 100%;
	margin: 0 auto;
}

.cprl__avatar {
	/* Figma cadre blanc node 1723:1512: 59.362 × 50.229 (ratio 1.18 horizontal). */
	width: clamp(56px, 4vw, 60px);
	height: clamp(48px, 3.3vw, 50px);
	flex-shrink: 0;
	background: #ffffff;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}
.cprl__avatar img {
	display: block;
	/* Le logo (collabable-logo-1.png) est plus haut que large.
	   On le dimensionne par la hauteur pour qu'il remplisse visuellement
	   le cadre (Figma: 52×61, soit 88%×122% du cadre). On garde width:auto
	   pour préserver le ratio natif → centrage horizontal automatique
	   via le parent flex. */
	height: 78%;
	width: auto;
	object-fit: contain;
}

.cprl__heading {
	/* Avatar bottom (Figma y=299) → heading top (Figma y=351) = 52px.
	   52/1920 = 2.71vw. */
	margin: clamp(24px, 2.71vw, 52px) 0 0;
	font-family: var(--cprl-font);
	font-weight: 400;
	/* Figma strict: 50px on a 1920px frame → 50/1920 = 2.6vw.
	   Letter-spacing 1.5px = Figma spec. */
	font-size: clamp(28px, 2.6vw, 50px);
	line-height: 1.4;
	letter-spacing: 1.5px;
	color: var(--cprl-text);
}
.cprl__heading-line {
	display: block;
	/* Each span = one Figma line; natural wrapping is fine if the viewport
	   narrows. No nowrap: the 2-line layout is enforced by HTML structure,
	   not by white-space. */
}
.cprl__heading-line--bold {
	display: inline; /* inline inside the parent block span */
	font-weight: 700;
}

/* ---- Form ----
   Figma frame: 1920px. Sizes given in % of frame width to scale
   proportionally on smaller viewports (avoids the form looking
   visually bigger than Figma when the user is on 1440/1366).
     - Field width  : 408 / 1920 = 21.25vw, max 408
     - Button width : 185 / 1920 = 9.64vw,  max 185
     - Gap          : 9   / 1920 = 0.47vw
     - Field height : 39 / 1920 = 2.03vw,   max 39 */
.cprl__form {
	width: 100%;
	/* Form total: 602/1920 = 31.35% of frame width */
	max-width: clamp(380px, 31.35vw, 602px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	/* Heading bottom (Figma y=538) → form input top (Figma y=613) = 75px.
	   75/1920 = 3.91vw. */
	margin: clamp(28px, 3.91vw, 75px) 0 0;
}

.cprl__form-row {
	display: flex;
	align-items: center;
	width: 100%;
	gap: clamp(6px, 0.47vw, 9px);
	justify-content: center;
}

.cprl__input-wrap {
	position: relative;
	/* Important: NO flex-grow — sinon le wrap remplit la row et déborde
	   sur les blobs rouges. Largeur strictement Figma. */
	flex: 0 0 auto;
	width: clamp(240px, 21.25vw, 408px);
	min-width: 0;
	display: flex;
	align-items: center;
}

/* Icône cloche — positionnée à gauche dans le champ.
   Scale Figma: left 17/1920 = 0.89vw, taille 12/1920 = 0.625vw. */
.cprl__input-icon {
	position: absolute;
	left: clamp(12px, 0.89vw, 17px);
	top: 50%;
	transform: translateY(-50%);
	width: clamp(10px, 0.625vw, 12px);
	height: clamp(11px, 0.68vw, 13px);
	flex-shrink: 0;
	color: var(--cprl-red);
	pointer-events: none;
}

.cprl__input {
	width: 100%;
	height: clamp(32px, 2.03vw, 39px);
	padding: 0 14px 0 34px; /* gauche: laisse place à la cloche (cf. .cprl__input-icon) */
	background: #ffffff;
	border: 0.5px solid var(--cprl-gray-200);
	border-radius: clamp(12px, 0.78vw, 15px);
	font-family: var(--cprl-font);
	font-size: clamp(12px, 0.73vw, 14px);
	font-weight: 400;
	color: var(--cprl-gray-700);
	outline: none;
}
.cprl__input::placeholder { color: var(--cprl-gray-400); }
.cprl__input:focus { box-shadow: inset 0 0 0 1px var(--cprl-red); }

.cprl__btn-cta {
	flex: 0 0 auto;
	width: clamp(120px, 9.64vw, 185px);
	height: clamp(32px, 2.03vw, 39px);
	padding: 0;
	background: var(--cprl-red);
	color: #ffffff;
	border: 0;
	border-radius: clamp(10px, 0.625vw, 12px);
	font-family: var(--cprl-font);
	font-size: clamp(12px, 0.78vw, 15px);
	font-weight: 700;
	cursor: pointer;
	transition: background 120ms ease;
	white-space: nowrap;
}
.cprl__btn-cta:hover { background: var(--cprl-red-hover); }
.cprl__btn-cta:disabled { opacity: 0.85; cursor: not-allowed; }

@media (max-width: 560px) {
	.cprl__form-row {
		flex-direction: column;
		gap: 10px;
	}
	.cprl__input-wrap {
		width: 100%;
		max-width: none;
		flex: 1 1 auto;
	}
	.cprl__input {
		height: 48px;
		border-radius: 15px;
		font-size: 14px;
	}
	.cprl__btn-cta {
		flex: 0 0 auto;
		width: 100%;
		height: 48px;
		border-radius: 12px;
		font-size: 15px;
	}
}

.cprl__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px; height: 1px; overflow: hidden;
}

/* Legal notice (step 1) — implicit consent pattern.
   Alignment rules picked from Linear/Notion/Stripe/Vercel waitlists:
   - Centred text
   - Spans the form width (no narrower max-width)
   - 12-13px font size, ~50-60% white on dark bg
   - Links inherit the body colour; only `text-decoration: underline`
     differentiates them (Linear-style subtle hierarchy). */
.cprl__legal-notice {
	width: 100%;
	margin: 4px 0 0; /* +4px on top of form's 12px gap → ~16px total */
	font-size: 12px;
	line-height: 1.5;
	color: var(--cprl-text-muted);
	text-align: center;
}
.cprl__legal-notice a {
	color: inherit;
	text-decoration: underline;
}
.cprl__legal-notice a:hover {
	color: #fff;
}

/* .cprl__consent is still used by the marketing checkbox in the step 2 modal. */
.cprl__consent {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 6px;
	margin: 0;
	font-size: 10px;
	color: var(--cprl-text-muted);
	line-height: 1.5;
	cursor: pointer;
	user-select: none;
	max-width: 480px;
	text-align: left;
}
.cprl__consent input[type="checkbox"] {
	width: 10px;
	height: 10px;
	margin: 3px 0 0 0;
	flex-shrink: 0;
	accent-color: var(--cprl-red);
}
.cprl__consent a { color: #fff; text-decoration: underline; }
.cprl__required {
	color: var(--cprl-red);
	margin-left: 2px;
	font-weight: 700;
}

.cprl__form-error {
	margin: 0;
	padding: 10px 14px;
	background: rgba(229,62,62,0.18);
	border: 1px solid var(--cprl-red);
	border-radius: 10px;
	color: #fff;
	font-size: 13px;
	max-width: 480px;
}

/* Consent notice — UK GDPR + PECR transparency under the email form.
   Muted, small, with a single underlined link to the Privacy Policy.
   Width-matched to the form row so it reads as part of the form, not
   a footer item. */
.cprl__form-consent {
	margin: 14px 0 0;
	max-width: 480px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--cprl-text-muted);
}

.cprl__form-consent a {
	color: var(--cprl-text-soft);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cprl__form-consent a:hover {
	color: #ffffff;
}

/* ---- Decorative divider ----
   Figma node 1723:1473 ("New Design / Sidebar"): 233.25 × 1px line at y=705,
   centred horizontally between the form button (y=653) and social (y=759).
   233.25/1920 = 12.15vw. Form bottom → divider = 52px (52/1920 = 2.71vw). */
.cprl__divider {
	width: clamp(180px, 12.15vw, 233px);
	height: 1px;
	margin: clamp(24px, 2.71vw, 52px) auto 0;
	background-image: url('../images/divider.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* ---- Social ---- */
.cprl__social {
	display: flex;
	gap: clamp(20px, 2vw, 32px);
	align-items: center;
	justify-content: center;
	/* Divider (Figma y=705) → social top (Figma y=759) = 54px.
	   54/1920 = 2.81vw. */
	margin-top: clamp(24px, 2.81vw, 54px);
}
.cprl__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: #ffffff;
	transition: opacity 120ms ease, transform 120ms ease;
	text-decoration: none;
}
.cprl__social-link:hover { opacity: 0.7; transform: translateY(-1px); }
.cprl__social-link svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* ---- Sub-heading ----
   Figma node 1723:1471 :
   - Width 709px (Figma spec) → 709/1920 = 36.93vw, capped at 709px
   - Font-size 24px (Figma) — capped at 24px
   - Color rgba(255,255,255,0.5) = pure white 50% opacity
   - Line-height 1.4
   - Weights : Semibold 600 (first part inline), Regular 400 (second part)
   - Single <p> block — no spacer needed */
.cprl__subheading {
	width: 100%;
	max-width: clamp(300px, 36.93vw, 709px);
	/* Heading bottom → subheading top: Figma ~15px gap (heading visible bottom
	   y≈458, subheading top y=473). 15/1920 = 0.78vw, capped at 18px for a
	   touch of breathing room. */
	margin: clamp(10px, 0.94vw, 18px) auto 0;
	font-family: var(--cprl-font);
	/* 24px Figma spec, capped at 24px for browser rendering consistency. */
	font-size: clamp(14px, 1.25vw, 24px);
	font-weight: 400;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
}
.cprl__subheading-line {
	margin: 0;
}
.cprl__subheading-line--bold { font-weight: 600; }
.cprl__subheading-regular   { font-weight: 400; }

/* ================================================================
   PODCAST CARD (decorative, right side, large screens only)
   ================================================================ */
.cprl__podcast-card {
	--cprl-card-scale: clamp(0.5, 100vw / 1920px, 1);
	position: absolute;
	right: calc(-80px * var(--cprl-card-scale));
	top: calc(360px * var(--cprl-card-scale));
	width: 370px;
	aspect-ratio: 370/355;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 18px;
	padding: 0 0 18px;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
	backdrop-filter: blur(6px);
	transform-origin: 100% 0;
	transform: scale(var(--cprl-card-scale));
}
.cprl__podcast-image {
	position: relative;
	width: 100%;
	aspect-ratio: 370/200;
	overflow: hidden;
}
.cprl__podcast-image img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.cprl__podcast-play {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 48px; height: 48px;
	background: rgba(255,255,255,0.92);
	border-radius: 50%;
	display: block;
}
.cprl__podcast-play::after {
	content: '';
	position: absolute;
	left: 56%; top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent #1c1c1c;
}
.cprl__podcast-meta { padding: 16px 18px 0; }
.cprl__podcast-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: #fff; }
.cprl__podcast-host  { margin: 0 0 8px; font-size: 11px; color: var(--cprl-gray-400); }
.cprl__podcast-host strong { font-weight: 700; color: #fff; }
.cprl__podcast-desc  { margin: 0 0 14px; font-size: 12px; color: var(--cprl-gray-400); line-height: 1.5; }
.cprl__podcast-actions { display: flex; gap: 8px; }
.cprl__podcast-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 10px;
	height: 24px;
}
.cprl__podcast-btn--ghost  { background: transparent; border: 1px solid #4fd1c5; color: #4fd1c5; }
.cprl__podcast-btn--collab { background: var(--cprl-red); color: #fff; }

@media (max-width: 720px) {
	.cprl__podcast-card { display: none; }
}

/* ================================================================
   MODAL (step 2) — Figma 1633:9016 "Questionaire pop-up"
   Glassmorphism: transparent dark fill + strong backdrop blur so the
   red blobs from the page show through softly behind the dialog.
   ================================================================ */
.cprl__modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 3vw, 40px);
}
.cprl__modal[hidden] { display: none; }
.cprl__modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
	cursor: pointer;
}
.cprl__visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* Dialog: 1412 × 702 on a 1920 frame (73.5% × 65% of frame).
   We cap at 1100×680 so it stays readable on huge screens, and let it
   scale down fluidly otherwise. */
.cprl__modal-dialog {
	position: relative;
	background: rgba(30, 30, 30, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 21px;
	width: min(73.5vw, 1100px);
	height: min(80vh, 760px);
	max-width: 100%;
	max-height: 100%;
	padding: clamp(28px, 3vw, 50px) clamp(24px, 3vw, 50px);
	box-shadow: 0 30px 100px rgba(0, 0, 0, 0.4);
	color: #fff;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	-webkit-backdrop-filter: blur(22px) saturate(1.25);
	backdrop-filter: blur(22px) saturate(1.25);
}

/* ---- Header (logo top-left + Skip top-right) ---- */
.cprl__modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-shrink: 0;
	margin: 0 0 clamp(20px, 2vw, 36px);
}
.cprl__modal-logo {
	width: clamp(46px, 3vw, 55px);
	height: clamp(40px, 2.6vw, 48px);
	background: #fff;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}
.cprl__modal-logo img {
	display: block;
	height: 78%;
	width: auto;
	object-fit: contain;
}
.cprl__modal-skip {
	background: none;
	border: 0;
	padding: 4px 0;
	font-family: var(--cprl-font);
	font-weight: 700;
	font-size: clamp(13px, 0.78vw, 15px);
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	text-align: right;
	transition: color 120ms ease;
}
.cprl__modal-skip:hover { color: #fff; }

/* ---- Form ---- */
/* `:not([hidden])` matters: JS toggles [hidden] on the form to swap to the
   success slide, but a bare `display: flex` would override the user-agent
   `[hidden] { display: none }` rule (same specificity, ours wins by source
   order). Without this guard, the form stays visible behind the success
   slide. Same trick is used on .cprl__success below. */
.cprl__modal-form:not([hidden]) {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0; /* allow body to scroll */
}
.cprl__modal-body {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 8px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.cprl__modal-body::-webkit-scrollbar { width: 6px; }
.cprl__modal-body::-webkit-scrollbar-track { background: transparent; }
.cprl__modal-body::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.18);
	border-radius: 3px;
}

/* ---- Questions ----
   Figma: each block has a small "Question X/4" line, a 38px bold title,
   then a white pill input + "Max 150 characters" hint. */
.cprl__q {
	display: block;
	margin: 0 auto clamp(28px, 2.5vw, 44px);
	max-width: 540px;
	text-align: left;
}
.cprl__q-meta {
	margin: 0 0 6px;
	font-family: var(--cprl-font);
	font-weight: 700;
	color: rgba(255, 255, 255, 0.8);
}
.cprl__q-meta-label {
	font-size: 18px;
	letter-spacing: 0.3px;
}
.cprl__q-meta-num {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.6);
	margin-left: 4px;
}
.cprl__q-title {
	margin: 0 0 14px;
	font-family: var(--cprl-font);
	font-weight: 700;
	font-size: clamp(22px, 1.98vw, 38px);
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.92);
}

.cprl__q-input-wrap {
	position: relative;
	display: block;
	width: 100%;
}
.cprl__q-input {
	width: 100%;
	height: clamp(38px, 2.6vw, 50px);
	padding: 0 110px 0 18px;
	background: #ffffff;
	border: 0.5px solid var(--cprl-gray-200);
	border-radius: 15px;
	font-family: var(--cprl-font);
	font-size: 14px;
	font-weight: 400;
	color: var(--cprl-gray-700);
	outline: none;
}
.cprl__q-input::placeholder { color: var(--cprl-gray-400); }
.cprl__q-input:focus { box-shadow: inset 0 0 0 1px var(--cprl-red); }
.cprl__q-hint {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--cprl-font);
	font-size: 10px;
	color: var(--cprl-gray-400);
	line-height: 1.5;
	pointer-events: none;
	user-select: none;
}
.cprl__q-input--over { color: var(--cprl-red); }

/* ---- Marketing consent ---- */
.cprl__consent--marketing {
	color: rgba(255, 255, 255, 0.6);
	margin: 4px auto clamp(8px, 1vw, 16px);
	font-size: 12px;
	max-width: 540px;
	justify-content: flex-start;
}

/* ---- Footer (Submit bottom-right) ---- */
.cprl__modal-footer {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	margin-top: clamp(12px, 1.5vw, 20px);
}
.cprl__modal-submit {
	width: auto;
	min-width: 240px;
	height: clamp(40px, 2.6vw, 46px);
	padding: 0 24px;
	border-radius: 12px;
	background: rgba(229, 62, 62, 0.9);
	font-size: clamp(13px, 0.85vw, 15px);
}
.cprl__modal-submit:hover {
	background: rgba(229, 62, 62, 1);
}

.cprl__modal-footer .cprl__form-error {
	width: 100%;
	max-width: 540px;
	margin-left: auto;
}

/* ================================================================
   SUCCESS STATE — Figma node 1633:9188 "Join the what's app community"
   Replaces the form once step 2 is submitted (or skipped). The dialog
   keeps the same glassmorphism panel, but its content becomes a thank-
   you screen with a WhatsApp QR code that links to wa.me/212605023457.

   Figma coordinates (node 1633:9437):
   - Modal card : left=257px, width=1412px (in Figma canvas)
   - Logo badge : left=306px → 49px from card left edge
   - Content col : left=710px → 453px from card left edge → 453/1412 ≈ 32.1%
   - QR block    : width=201px, height=191px, border-radius=25px (Figma)
   - Body text   : width=376px, font-size=18px, bold
   The content column starts at ~32% of the dialog width. We implement
   this with a two-column layout inside .cprl__success-body: a spacer
   column (flex: 0 0 32%) and a content column (flex: 1 1 0).
   ================================================================ */

/* When success is visible, hide the original form-state header (logo +
   Skip) — the success block has its own header (logo + Close). */
.cprl__modal-dialog.cprl--success-shown .cprl__modal-header { display: none; }
.cprl__modal-dialog.cprl--success-shown {
	/* Center vertically the success content in the available space. */
	justify-content: center;
}

/* The form shares the dialog with the success block. Both have a `[hidden]`
   attribute that JS toggles. We need an explicit `:not([hidden])` here
   because the class selector below otherwise wins the cascade against the
   user-agent `[hidden] { display: none }` rule, which would render BOTH
   the form and the success block at the same time. */
.cprl__success:not([hidden]) {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* Header row: logo top-left, Close top-right — same as Figma */
.cprl__success-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-shrink: 0;
	margin: 0 0 clamp(12px, 1.5vw, 24px);
}

.cprl__success-logo {
	width: clamp(46px, 3vw, 55px);
	height: clamp(40px, 2.6vw, 48px);
	background: #fff;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}
.cprl__success-logo img {
	display: block;
	height: 78%;
	width: auto;
	object-fit: contain;
}

/* "Close" — opacity 50%, right-aligned (Figma node 1633:9443).
   Padded hit target so the button is comfortable to tap on mobile and
   doesn't sit on a 4px-tall click zone. */
.cprl__success-close {
	background: none;
	border: 0;
	padding: 10px 14px;
	margin: -10px -14px -10px 0;
	font-family: var(--cprl-font);
	font-weight: 700;
	font-size: clamp(13px, 0.78vw, 15px);
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	text-align: right;
	transition: color 120ms ease;
	pointer-events: auto;
	position: relative;
	z-index: 2;
}
.cprl__success-close:hover { color: #fff; }

/* Body: two-column layout.
   Left spacer (32% of dialog width) leaves the left quarter empty,
   replicating the Figma offset where text starts at x=453/1412≈32%.
   The spacer collapses on mobile (see @media below). */
.cprl__success-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	min-height: 0;
}

/* Left spacer column — 32% of the dialog, same proportion as Figma */
.cprl__success-spacer {
	flex: 0 0 32%;
	/* Prevents the spacer from growing beyond intent */
	max-width: 360px;
}

/* Right content column */
.cprl__success-content {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	text-align: left;
	gap: clamp(14px, 1.5vw, 22px);
	/* A small right buffer so text never butts against the dialog edge */
	padding-right: clamp(12px, 2vw, 32px);
}

.cprl__success-eyebrow {
	margin: 0;
	font-family: var(--cprl-font);
	font-weight: 700;
	font-size: clamp(14px, 1vw, 18px);
	line-height: 1.4;
	color: #fff;
}

/* Title row: "Join the community" + WhatsApp circle icon (Figma: 38px bold) */
.cprl__success-title {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(10px, 0.8vw, 14px);
	font-family: var(--cprl-font);
	font-weight: 700;
	font-size: clamp(26px, 2.4vw, 38px);
	line-height: 1.4;
	color: #fff;
}
.cprl__success-whatsapp {
	/* Figma: icon sits at the same line as the title text, 34px */
	width: clamp(26px, 1.8vw, 34px);
	height: clamp(26px, 1.8vw, 34px);
	flex-shrink: 0;
	display: block;
}

/* QR code block — Figma: 201×191px, border-radius 25px, white bg */
.cprl__success-qr {
	display: block;
	width: clamp(150px, 13vw, 201px);
	height: clamp(143px, 12.4vw, 191px);
	background: #fff;
	border-radius: clamp(18px, 1.6vw, 25px);
	padding: clamp(10px, 0.85vw, 14px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
	transition: transform 120ms ease, box-shadow 120ms ease;
	cursor: pointer;
}
.cprl__success-qr:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.cprl__success-qr img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Tap-to-open link — visible mobile-first CTA below the QR (users on mobile
   can't scan their own screen, so the link gives them a one-tap path). */
.cprl__success-tap {
	display: inline-block;
	font-family: var(--cprl-font);
	font-weight: 700;
	font-size: clamp(13px, 0.9vw, 15px);
	color: #25D366;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 120ms ease;
}
.cprl__success-tap:hover { opacity: 0.85; }

/* Body text — Figma: 18px bold, width 376px, two paragraphs */
.cprl__success-text {
	margin: 0;
	max-width: clamp(280px, 26vw, 376px);
	font-family: var(--cprl-font);
	font-weight: 700;
	font-size: clamp(13px, 0.95vw, 18px);
	line-height: 1.4;
	color: #fff;
}
.cprl__success-text--cta { margin-top: -6px; }

body.cprl--locked { overflow: hidden; }

/* ================================================================
   WELCOME BLUR — Figma node 1633:9747 (initial gate)
   Smaller glassmorphism dialog (≈559×379 on 1920) shown on first
   paint. Centred over the landing, must be dismissed (Close / ESC /
   backdrop) before the user can interact with the email form.
   ================================================================ */
.cprl__welcome {
	position: fixed;
	inset: 0;
	z-index: 1100; /* above the questionnaire modal */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 3vw, 40px);
}
.cprl__welcome[hidden] { display: none; }

/* Full-page blur backdrop — heavier blur than the questionnaire modal so
   the underlying landing reads as fully gated. */
.cprl__welcome-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	cursor: pointer;
}

/* Dialog: 559 × 379 on a 1920 frame. clamp() so it scales fluidly down
   to ~340px wide on mobile. Heavy backdrop-filter blur gives the same
   glassmorphism finish as the questionnaire modal. */
.cprl__welcome-dialog {
	position: relative;
	width: min(559px, 92vw);
	min-height: clamp(280px, 26vw, 379px);
	background: rgba(30, 30, 30, 0.40);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: clamp(16px, 1.25vw, 24px);
	padding: clamp(22px, 2vw, 36px);
	box-shadow: 0 30px 100px rgba(0, 0, 0, 0.4);
	-webkit-backdrop-filter: blur(28px) saturate(1.25);
	backdrop-filter: blur(28px) saturate(1.25);
	color: #fff;
	display: flex;
	flex-direction: column;
}

.cprl__welcome-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-shrink: 0;
}

/* Logo badge — same 55×48 white square as the questionnaire modal */
.cprl__welcome-logo {
	width: clamp(46px, 3vw, 55px);
	height: clamp(40px, 2.6vw, 48px);
	background: #fff;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}
.cprl__welcome-logo img {
	display: block;
	height: 78%;
	width: auto;
	object-fit: contain;
}

/* "Close" — Figma 1633:9760 : opacity 50%, bold, top-right */
.cprl__welcome-close {
	background: none;
	border: 0;
	padding: 4px 0;
	font-family: var(--cprl-font);
	font-weight: 700;
	font-size: clamp(13px, 0.78vw, 15px);
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: color 120ms ease;
}
.cprl__welcome-close:hover { color: #fff; }

.cprl__welcome-body {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: clamp(18px, 2vw, 36px) clamp(8px, 1vw, 16px) clamp(8px, 1vw, 12px);
}

/* Title — Figma 1633:9764 : 30px, color rgba(255,255,255,0.9), centred.
   Line 1 Regular, lines 2-3 Semibold. */
.cprl__welcome-text {
	margin: 0;
	font-family: var(--cprl-font);
	font-weight: 400;
	font-size: clamp(18px, 1.56vw, 30px);
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.9);
}
.cprl__welcome-line { display: block; }
.cprl__welcome-line--bold { font-weight: 600; }

@media (max-width: 560px) {
	.cprl__welcome-dialog {
		width: 100%;
		padding: 20px;
	}
}

/* ---- Mobile ---- */
@media (max-width: 720px) {
	.cprl__modal { padding: 0; }
	.cprl__modal-dialog {
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		border-radius: 0;
		border: 0;
		padding: 20px 20px 16px;
	}
	.cprl__modal-skip {
		font-size: 12px;
		max-width: 50%;
	}
	.cprl__q-title { font-size: 22px; }
	.cprl__q-input { padding-right: 90px; }
	.cprl__q-hint { font-size: 9px; }
	.cprl__modal-submit { width: 100%; min-width: 0; }
	.cprl__modal-footer { align-items: stretch; }

	/* Success state — stack vertically on mobile, no left spacer */
	.cprl__success-body {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		overflow-y: auto;
	}
	.cprl__success-spacer { display: none; }
	.cprl__success-content {
		width: 100%;
		padding-right: 0;
		gap: 16px;
	}
	.cprl__success-title { font-size: 24px; }
	.cprl__success-qr {
		width: 150px;
		height: 143px;
	}
}

/* ================================================================
   STEP 1 — additional fields (v1.1.0)
   Name input row + role radio cards + step-1 marketing consent.
   ================================================================ */

/* Name row uses the same fluid width as the email row to keep the
   form visually balanced. */
.cprl__form-row--name {
	width: 100%;
	justify-content: center;
}
.cprl__input-wrap--name {
	width: clamp(280px, 31.35vw, 602px);
}
.cprl__input--name {
	padding: 0 14px;
	height: clamp(32px, 2.03vw, 39px);
	font-size: clamp(12px, 0.73vw, 14px);
}

/* Role fieldset — visually similar to a stack of cards on mobile,
   horizontal row on desktop. Borderless to keep the airy hero look. */
.cprl__roles {
	width: 100%;
	max-width: clamp(280px, 31.35vw, 602px);
	margin: 4px auto 0;
	padding: 0;
	border: 0;
}
.cprl__roles-legend {
	margin: 0 0 8px;
	padding: 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--cprl-text-soft);
	text-align: center;
	width: 100%;
}
.cprl__roles-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
}

.cprl__role-card {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	min-height: 36px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	color: var(--cprl-text-soft);
	font-family: var(--cprl-font);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
	user-select: none;
}
.cprl__role-card:hover {
	background: rgba(255, 255, 255, 0.10);
	border-color: rgba(255, 255, 255, 0.24);
}
.cprl__role-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}
.cprl__role-card--selected,
.cprl__role-card:has(input[type="radio"]:checked) {
	background: var(--cprl-red);
	border-color: var(--cprl-red);
	color: #fff;
}
/* Keyboard focus ring (the visible input proxy: focus-within catches it). */
.cprl__role-card:focus-within {
	outline: 2px solid rgba(255, 255, 255, 0.5);
	outline-offset: 2px;
}

/* Step 1 marketing consent — same look as step 2 marketing checkbox
   but centred under the role cards. */
.cprl__consent--step1 {
	margin: 8px auto 0;
	justify-content: center;
	color: var(--cprl-text-muted);
}

@media (max-width: 560px) {
	.cprl__input-wrap--name { width: 100%; }
	.cprl__input--name {
		height: 48px;
		border-radius: 15px;
		font-size: 14px;
	}
	.cprl__roles {
		max-width: 100%;
	}
	.cprl__roles-grid {
		flex-direction: column;
		gap: 8px;
	}
	.cprl__role-card {
		width: 100%;
		min-height: 44px;
		font-size: 14px;
	}
}

/* ================================================================
   STEP 2 — dynamic question types (v1.1.0)
   Radio cards (for q_in_industry / q_primary_role / q_frequency / q_tier)
   + multiselect chips (for q_topics / q_current_tool) + counter.
   ================================================================ */

.cprl__step2-fields { display: block; }

/* Reset bold meta block (Question X/Y) that we no longer render. */
.cprl__q-help {
	margin: -6px 0 12px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.4;
}

/* Hidden questions (role-gated) collapse fully — important to use
   :not([hidden]) where needed to override flex/grid display rules. */
.cprl__q[hidden] { display: none; }

/* ---- Radio cards group ---- */
.cprl__q-options--radio {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.cprl__option-card {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	padding: 10px 16px;
	min-height: 42px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	color: var(--cprl-text-soft);
	font-family: var(--cprl-font);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
	user-select: none;
	flex: 0 1 auto;
}
.cprl__option-card:hover {
	background: rgba(255, 255, 255, 0.10);
	border-color: rgba(255, 255, 255, 0.30);
}
.cprl__option-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}
.cprl__option-card--selected,
.cprl__option-card:has(input[type="radio"]:checked) {
	background: var(--cprl-red);
	border-color: var(--cprl-red);
	color: #fff;
}
.cprl__option-card:focus-within {
	outline: 2px solid rgba(255, 255, 255, 0.5);
	outline-offset: 2px;
}

/* ---- Multiselect chips ---- */
.cprl__q-options--multi {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
	align-items: center;
}

.cprl__chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	min-height: 36px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	color: var(--cprl-text-soft);
	font-family: var(--cprl-font);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
	user-select: none;
}
.cprl__chip:hover {
	background: rgba(255, 255, 255, 0.10);
	border-color: rgba(255, 255, 255, 0.30);
}
.cprl__chip input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}
.cprl__chip--selected,
.cprl__chip:has(input[type="checkbox"]:checked) {
	background: var(--cprl-red);
	border-color: var(--cprl-red);
	color: #fff;
}
.cprl__chip--disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.cprl__chip:focus-within {
	outline: 2px solid rgba(255, 255, 255, 0.5);
	outline-offset: 2px;
}

.cprl__chips-loading {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.55);
	padding: 8px 0;
}

.cprl__chips-counter {
	margin-left: auto;
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.55);
	flex: 0 0 auto;
}

/* ---- Skip footer button (modal footer, alongside Complete) ---- */
.cprl__modal-footer-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	flex-wrap: wrap;
}
.cprl__modal-skip--footer {
	/* Same look as header skip — discreet link, not primary CTA */
	text-align: left;
}

/* ---- Question title tighter when no meta line ---- */
.cprl__step2-fields .cprl__q {
	margin-bottom: clamp(20px, 2vw, 32px);
}
.cprl__step2-fields .cprl__q-title {
	font-size: clamp(18px, 1.4vw, 24px);
	font-weight: 700;
	margin-bottom: 12px;
}

/* ---- Text input inside step 2 (smaller than the v1 questions) ---- */
.cprl__step2-fields .cprl__q-input {
	padding: 0 18px;
	height: clamp(40px, 2.6vw, 48px);
	font-size: 14px;
}

/* ---- Mobile (350px content + 20px L/R = 390px viewport) ---- */
@media (max-width: 720px) {
	.cprl__step2-fields .cprl__q-title { font-size: 17px; }
	.cprl__option-card {
		width: 100%;
		justify-content: flex-start;
		font-size: 14px;
	}
	.cprl__q-options--radio { gap: 6px; }
	.cprl__q-options--multi { gap: 6px; }
	.cprl__chip {
		font-size: 12px;
		padding: 7px 12px;
		min-height: 34px;
	}
	.cprl__chips-counter {
		width: 100%;
		margin-left: 0;
		text-align: right;
		margin-top: 4px;
	}
	.cprl__modal-footer-actions {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 10px;
	}
	.cprl__modal-skip--footer {
		text-align: center;
		width: 100%;
	}
}

/* ─── Mobile-only logo swap (Andreas, 2026-05-20) ───
   Replaces the hero avatar mark (.cprl__avatar img) and the V3 modal
   header mark (.cprl-v3-modal__logo img) with the new mobile logo on
   mobile only. Desktop unchanged. Reuses the 720px breakpoint already
   used by the landing/V3 modal mobile media queries. */
@media (max-width: 720px) {
	.cprl__avatar img,
	.cprl-v3-modal__logo img {
		content: url('../images/logo-collabable-mobile.png');
	}
}