/* ConicPlex Lead Generator — public wizard styles.
   Every selector below is scoped as a real descendant of .cplg-start (not
   just a same-named class) specifically to out-specificity theme/plugin
   wrapper selectors like ".elementor-widget-container button" — a bare
   ".cplg-btn" (0,1,0) loses to that (0,1,1) compound; ".cplg-start .cplg-btn"
   (0,2,0) wins outright, and this stylesheet is also enqueued at a
   deliberately late priority so it wins any remaining specificity ties.
   That's the actual defense against external CSS.

   `!important` is used sparingly below, and only where it's been verified
   nothing in this file needs to override it — border/background/padding/
   font/color etc are deliberately NOT !important here, because dozens of
   our own components (.cplg-btn, .cplg-field, .cplg-option, disabled
   states, link colors...) need to set exactly those properties on the
   same button/input/a elements this reset targets, and !important would
   have made this stylesheet win a fight against itself. */

.cplg-start {
	all: initial !important;
	display: block !important;
}

.cplg-start button,
.cplg-start input,
.cplg-start textarea {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	margin: 0;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	line-height: normal;
}

/* Belt-and-braces: the host theme/page builder frequently ships its own
   `p`/`span`/etc rules (sometimes !important) that are more specific than
   plain inheritance from .cplg-start's own font-family, so text quietly
   falls back to the theme's font instead of Inter — same class of bug as
   the Elementor min-height override above. Force it on every descendant;
   .cplg-start__brand-word/.cplg-step__heading (Space Grotesk) win back
   via their own higher-specificity !important rules below. */
.cplg-start,
.cplg-start * {
	font-family: var(--cplg-font-sans) !important;
}

.cplg-start ul,
.cplg-start ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cplg-start img,
.cplg-start svg {
	display: block;
	max-width: 100%;
}

.cplg-start a {
	text-decoration: none;
	color: inherit;
}

.cplg-start {
	--cplg-font-sans: "Inter", system-ui, -apple-system, sans-serif;
	--cplg-font-display: "Space Grotesk", "Inter", sans-serif;

	--cplg-radius: 0.875rem;
	--cplg-radius-sm: calc(var(--cplg-radius) - 4px);
	--cplg-radius-lg: calc(var(--cplg-radius) + 4px);
	--cplg-radius-xl: calc(var(--cplg-radius) + 8px);
	--cplg-radius-2xl: calc(var(--cplg-radius) + 12px);

	/* Dark is the only theme — deliberately not conditioned on
	   prefers-color-scheme. The brand design is dark-first; serving a
	   light variant to visitors whose OS/browser happens to be set to
	   light would look inconsistent with the rest of the site. */
	--cplg-background: oklch(0.13 0.005 80);
	--cplg-foreground: oklch(0.96 0.012 85);
	--cplg-surface: oklch(0.165 0.006 80);
	--cplg-surface-elevated: oklch(0.2 0.008 80);

	--cplg-primary: oklch(0.93 0.04 85);
	--cplg-primary-foreground: oklch(0.16 0.01 80);
	--cplg-primary-glow: oklch(0.96 0.05 90);
	--cplg-secondary: oklch(0.78 0.13 60);

	--cplg-muted-foreground: oklch(0.66 0.012 80);
	--cplg-destructive: oklch(0.65 0.21 25);

	--cplg-border: oklch(1 0 0 / 8%);
	--cplg-border-strong: oklch(1 0 0 / 16%);

	--cplg-shadow-color: oklch(0 0 0 / 0.6);
	--cplg-grid-line: oklch(1 0 0 / 0.04);
	--cplg-heading-from: oklch(0.98 0.005 85);
	--cplg-heading-to: oklch(0.78 0.01 85);
	--cplg-blob-opacity: 0.5;

	--cplg-gradient-primary: linear-gradient(135deg, var(--cplg-primary), var(--cplg-primary-glow));
	--cplg-gradient-mesh:
		radial-gradient(60% 50% at 20% 0%, color-mix(in oklab, var(--cplg-primary) 22%, transparent), transparent 70%),
		radial-gradient(50% 40% at 90% 10%, color-mix(in oklab, var(--cplg-secondary) 18%, transparent), transparent 70%);

	/* Layout-critical properties are !important — this is the root
	   container, and losing display/position/overflow here breaks the
	   entire widget, not just a cosmetic detail. */
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	/* dvh tracks the real, currently-visible viewport (falls back to vh
	   for browsers without dvh support) — on a short step (few options,
	   no long helper text), min-height needs to reliably reach exactly
	   the bottom of the visible area or the background falls short of
	   it, leaving a gap of the page's own background showing through.
	   !important because Elementor's Canvas template applies its own
	   flexbox-normalize min-height: 0 to direct children of <body>,
	   which otherwise wins outright regardless of load order since ours
	   wasn't marked important like the rest of this layout-critical
	   block. */
	min-height: 100vh !important;
	min-height: 100dvh !important;
	width: 100% !important;
	overflow: hidden !important;
	background-color: var(--cplg-background) !important;
	color: var(--cplg-foreground) !important;
	font-family: var(--cplg-font-sans) !important;
	font-feature-settings: "ss01", "cv11";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box !important;
	line-height: 1.5 !important;
}

.cplg-start *,
.cplg-start *::before,
.cplg-start *::after {
	box-sizing: border-box !important;
}

.cplg-start h1,
.cplg-start h2,
.cplg-start h3 {
	font-family: var(--cplg-font-display) !important;
	letter-spacing: -0.02em;
	margin: 0;
}

.cplg-start p {
	margin: 0;
}

.cplg-start button {
	cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Backdrop                                                            */
/* ------------------------------------------------------------------ */
.cplg-start .cplg-start__backdrop {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.cplg-start .cplg-start__grid {
	position: absolute;
	inset: 0;
	opacity: 0.7;
	background-image:
		linear-gradient(to right, var(--cplg-grid-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--cplg-grid-line) 1px, transparent 1px);
	background-size: 56px 56px;
}

.cplg-start .cplg-start__mesh {
	position: absolute;
	inset: 0;
	background-image: var(--cplg-gradient-mesh);
}

.cplg-start .cplg-start__blob {
	position: absolute;
	border-radius: 9999px;
	filter: blur(80px);
	opacity: var(--cplg-blob-opacity);
}

.cplg-start .cplg-start__blob--a {
	top: -140px;
	left: -120px;
	width: 480px;
	height: 480px;
	background: var(--cplg-primary);
	animation: cplg-float 6s ease-in-out infinite;
}

.cplg-start .cplg-start__blob--b {
	bottom: -160px;
	right: -100px;
	width: 420px;
	height: 420px;
	background: var(--cplg-secondary);
}

@keyframes cplg-float {
	0%, 100% { transform: translateY(0); }

	50% { transform: translateY(-10px); }

}

/* .cplg-start__mesh's two radial gradients both sit near the top of the
   page ("at 20% 0%" / "at 90% 10%") regardless of where the blob divs
   are — on a narrow mobile viewport that puts a bright primary+secondary
   wash directly behind the header, and near-white header text loses
   contrast against it. Dim both on mobile only; desktop is unaffected. */
@media (max-width: 639px) {
	.cplg-start .cplg-start__mesh {
		opacity: 0.55;
	}

	.cplg-start {
		--cplg-blob-opacity: 0.3;
	}
}

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */
.cplg-start .cplg-start__header {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
}

@media (min-width: 640px) {
	.cplg-start .cplg-start__header { padding: 20px 32px; }

}

.cplg-start .cplg-start__brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cplg-start .cplg-start__brand-mark img {
	display: block;
	width: 36px;
	height: 36px;
	transition: transform 0.3s ease;
}

.cplg-start .cplg-start__brand:hover .cplg-start__brand-mark img {
	transform: scale(1.05);
}

.cplg-start .cplg-start__brand-word {
	font-family: var(--cplg-font-display) !important;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
	/* Matches the site's single-color wordmark branding elsewhere
	   (--e-global-color-8fdb76c / #F5F1E9) rather than this plugin's own
	   two-tone --cplg-foreground/--cplg-primary accent split. */
	color: #f5f1e9;
}

.cplg-start .cplg-start__brand-word-accent {
	color: inherit;
}

.cplg-start .cplg-start__header-right {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cplg-start .cplg-start__step-count {
	display: none;
	font-size: 12px;
	color: var(--cplg-muted-foreground);
}

@media (min-width: 640px) {
	.cplg-start .cplg-start__step-count { display: inline; }

}

.cplg-start .cplg-start__exit {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 9999px;
	border: 1px solid var(--cplg-border);
	color: var(--cplg-muted-foreground);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.cplg-start .cplg-start__exit:hover {
	color: var(--cplg-foreground);
	border-color: var(--cplg-border-strong);
}

/* ------------------------------------------------------------------ */
/* Progress bar                                                        */
/* ------------------------------------------------------------------ */
.cplg-start .cplg-start__progress {
	position: relative;
	z-index: 10;
	margin: 0 20px;
	height: 3px;
	overflow: hidden;
	border-radius: 9999px;
	background: var(--cplg-border);
}

@media (min-width: 640px) {
	.cplg-start .cplg-start__progress { margin: 0 32px; }

}

.cplg-start .cplg-start__progress-fill {
	height: 100%;
	border-radius: 9999px;
	background-image: var(--cplg-gradient-primary);
	transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------------ */
/* Main / container                                                    */
/* ------------------------------------------------------------------ */
.cplg-start .cplg-start__main {
	position: relative;
	/* Higher than .cplg-start__footer's z-index (also 10) on purpose: the
	   fixed mobile nav bar lives nested inside main, so ties would let
	   footer — later in DOM order — win the stacking comparison at this
	   level and paint over main's *entire* stacking context, nav
	   included, no matter how high the nav's own z-index is set. */
	z-index: 15;
	display: flex;
	flex: 1;
	align-items: center;
	padding: 32px 20px;
}

@media (min-width: 640px) {
	.cplg-start .cplg-start__main { padding: 32px; }

}

.cplg-start .cplg-start__container {
	margin: 0 auto;
	width: 100%;
	max-width: 72rem;
}

/* ------------------------------------------------------------------ */
/* Quiz phase                                                          */
/* ------------------------------------------------------------------ */
.cplg-start .cplg-quiz {
	margin: 0 auto;
	width: 100%;
	max-width: 48rem;
}

.cplg-start .cplg-step-rail {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	margin-bottom: 32px;
	padding: 4px 4px;
	margin-inline: -4px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* old Edge/IE */
	/* Fade the edges so a scrollable row reads as scrollable even with no
	   visible scrollbar, instead of looking like it's just cut off. */
	mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
}

.cplg-start .cplg-step-rail::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Edge */
}

.cplg-start .cplg-step-rail__item {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	scroll-snap-align: center;
	border-radius: 9999px;
	border: 1px solid var(--cplg-border);
	padding: 6px 8px;
	font-size: 11px;
	font-weight: 500;
	color: color-mix(in oklab, var(--cplg-muted-foreground) 60%, transparent);
	transition: all 0.3s ease;
	white-space: nowrap;
}

.cplg-start .cplg-step-rail__item--active {
	border-color: color-mix(in oklab, var(--cplg-primary) 50%, transparent);
	background: var(--cplg-surface);
	color: var(--cplg-foreground);
	padding: 6px 12px;
}

.cplg-start .cplg-step-rail__item--done {
	border-color: color-mix(in oklab, var(--cplg-primary) 25%, transparent);
	color: var(--cplg-primary);
}

.cplg-start .cplg-step-rail__dot {
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	border-radius: 9999px;
	background: var(--cplg-border);
}

.cplg-start .cplg-step-rail__item--active .cplg-step-rail__dot {
	background: var(--cplg-primary);
	animation: cplg-pulse-glow 4s ease-in-out infinite;
}

.cplg-start .cplg-step-rail__item--done .cplg-step-rail__dot {
	background: color-mix(in oklab, var(--cplg-primary) 60%, transparent);
}

@keyframes cplg-pulse-glow {
	0%, 100% { opacity: 0.5; }

	50% { opacity: 0.85; }

}

.cplg-start .cplg-step-rail__item svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

.cplg-start .cplg-step {
	animation: cplg-fade-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes cplg-fade-up {
	from { opacity: 0; transform: translateY(16px); }

	to { opacity: 1; transform: translateY(0); }

}

.cplg-start .cplg-step__eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--cplg-muted-foreground);
}

.cplg-start .cplg-step__heading {
	font-size: 30px;
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.02em;
	background: linear-gradient(180deg, var(--cplg-heading-from) 0%, var(--cplg-heading-to) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

@media (min-width: 640px) {
	.cplg-start .cplg-step__heading { font-size: 48px; }

}

.cplg-start .cplg-step__helper {
	margin-top: 12px;
	max-width: 36rem;
	font-size: 15px;
	color: var(--cplg-muted-foreground);
}

.cplg-start .cplg-step__body {
	margin-top: 32px;
}

/* Options grid */
.cplg-start .cplg-options {
	display: grid;
	gap: 12px;
}

@media (min-width: 640px) {
	.cplg-start .cplg-options { grid-template-columns: repeat(2, 1fr); }

}

.cplg-start .cplg-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border-radius: var(--cplg-radius-2xl);
	border: 1px solid var(--cplg-border);
	background: var(--cplg-surface);
	padding: 16px;
	text-align: left;
	transition: all 0.3s ease;
	color: inherit;
}

.cplg-start .cplg-option:hover {
	transform: translateY(-2px);
	border-color: var(--cplg-border-strong);
}

.cplg-start .cplg-option--active {
	border-color: var(--cplg-primary);
	background: var(--cplg-surface-elevated);
	box-shadow: 0 0 30px -12px var(--cplg-primary);
	transform: none;
}

.cplg-start .cplg-option__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--cplg-radius-xl);
	border: 1px solid var(--cplg-border);
	background: var(--cplg-surface-elevated);
	color: var(--cplg-muted-foreground);
	transition: all 0.2s ease;
}

.cplg-start .cplg-option:hover .cplg-option__icon {
	color: var(--cplg-foreground);
}

.cplg-start .cplg-option--active .cplg-option__icon {
	border-color: color-mix(in oklab, var(--cplg-primary) 40%, transparent);
	background: var(--cplg-primary);
	color: var(--cplg-primary-foreground);
}

/* Same fix as .cplg-mode-toggle__btn--active:hover above: without this,
   hovering an already-selected option let the generic hover-icon color
   (light) win over --active's dark icon color, washing the icon out
   against its own light background. */
.cplg-start .cplg-option--active:hover .cplg-option__icon {
	color: var(--cplg-primary-foreground);
}

.cplg-start .cplg-option__icon svg {
	width: 20px;
	height: 20px;
}

.cplg-start .cplg-option__text {
	min-width: 0;
	flex: 1;
}

.cplg-start .cplg-option__label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--cplg-foreground);
}

.cplg-start .cplg-option__hint {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--cplg-muted-foreground);
}

.cplg-start .cplg-option__check {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	margin-top: 2px;
	width: 20px;
	height: 20px;
	border-radius: 9999px;
	border: 1px solid var(--cplg-border);
	color: transparent;
	transition: all 0.2s ease;
}

.cplg-start .cplg-option--active .cplg-option__check {
	border-color: var(--cplg-primary);
	background: var(--cplg-primary);
	color: var(--cplg-primary-foreground);
}

.cplg-start .cplg-option__check svg {
	width: 12px;
	height: 12px;
}

/* Fields (details form + textarea) */
.cplg-start .cplg-field {
	width: 100%;
	border-radius: var(--cplg-radius-2xl);
	border: 1px solid var(--cplg-border);
	background: var(--cplg-surface);
	padding: 12px 16px;
	font-size: 14px;
	font-family: inherit;
	color: var(--cplg-foreground);
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cplg-start .cplg-field::placeholder {
	color: var(--cplg-muted-foreground);
}

.cplg-start .cplg-field:focus {
	border-color: var(--cplg-primary);
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--cplg-primary) 14%, transparent);
}

.cplg-start .cplg-details {
	display: grid;
	gap: 12px;
}

@media (min-width: 640px) {
	.cplg-start .cplg-details { grid-template-columns: repeat(2, 1fr); }

	.cplg-start .cplg-field--span2 { grid-column: span 2; }

}

/* Wraps email/phone in the details step so an inline error can sit
   directly under the input without disturbing .cplg-details' own grid —
   the wrapper occupies the grid cell instead of the bare input. */
.cplg-start .cplg-field-wrap {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cplg-start .cplg-field--invalid {
	border-color: var(--cplg-destructive);
}

.cplg-start .cplg-field--invalid:focus {
	border-color: var(--cplg-destructive);
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--cplg-destructive) 14%, transparent);
}

.cplg-start .cplg-field-error {
	display: none;
	margin: 0;
	padding: 0 2px;
	font-size: 12px;
	color: var(--cplg-destructive);
}

.cplg-start .cplg-field-error--visible {
	display: block;
}

.cplg-start textarea.cplg-field {
	resize: vertical;
	line-height: 1.6;
}

/* References — folded into the details step (not its own step anymore),
   so it renders as a full-width section below the contact fields inside
   .cplg-details' grid; see .cplg-field--span2 for the span-2 rule this
   reuses. */
.cplg-start .cplg-details__refs {
	margin-top: 8px;
	padding-top: 20px;
	border-top: 1px solid var(--cplg-border);
}

.cplg-start .cplg-details__refs-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--cplg-foreground);
}

.cplg-start .cplg-details__refs-helper {
	margin-top: 4px;
	margin-bottom: 16px;
	font-size: 13px;
	color: var(--cplg-muted-foreground);
}

.cplg-start .cplg-refs {
	display: grid;
	gap: 16px;
}

.cplg-start .cplg-dropzone {
	border-radius: var(--cplg-radius-2xl);
	border: 1px dashed var(--cplg-border-strong);
	background: var(--cplg-surface);
	padding: 24px;
	text-align: center;
	transition: all 0.2s ease;
}

.cplg-start .cplg-dropzone--dragging {
	border-color: var(--cplg-primary);
	background: var(--cplg-surface-elevated);
}

.cplg-start .cplg-dropzone__icon {
	display: grid;
	place-items: center;
	margin: 0 auto;
	width: 44px;
	height: 44px;
	border-radius: var(--cplg-radius-xl);
	border: 1px solid var(--cplg-border);
	background: var(--cplg-surface-elevated);
	color: var(--cplg-primary);
}

.cplg-start .cplg-dropzone__icon svg {
	width: 20px;
	height: 20px;
}

.cplg-start .cplg-dropzone__title {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--cplg-foreground);
}

.cplg-start .cplg-dropzone__sub {
	margin-top: 4px;
	font-size: 12px;
	color: var(--cplg-muted-foreground);
}

.cplg-start .cplg-refs__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.cplg-start .cplg-refs__grid { grid-template-columns: repeat(3, 1fr); }

}

.cplg-start .cplg-refs__item {
	position: relative;
	overflow: hidden;
	border-radius: var(--cplg-radius-2xl);
	border: 1px solid var(--cplg-border);
	background: var(--cplg-surface);
}

.cplg-start .cplg-refs__item img {
	display: block;
	width: 100%;
	height: 112px;
	object-fit: cover;
}

.cplg-start .cplg-refs__item-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
}

.cplg-start .cplg-refs__item-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 11px;
	color: var(--cplg-muted-foreground);
}

.cplg-start .cplg-refs__item-remove {
	flex-shrink: 0;
	background: none;
	border: none;
	padding: 0;
	color: var(--cplg-muted-foreground);
	display: flex;
}

.cplg-start .cplg-refs__item-remove:hover {
	color: var(--cplg-destructive);
}

.cplg-start .cplg-refs__item-remove svg {
	width: 14px;
	height: 14px;
}

.cplg-start .cplg-refs__uploading {
	opacity: 0.5;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                              */
/* ------------------------------------------------------------------ */
.cplg-start .cplg-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 9999px;
	font-weight: 600;
	font-size: 14px;
	border: 1px solid transparent;
	transition: all 0.25s ease;
	white-space: nowrap;
}

.cplg-start .cplg-btn svg {
	width: 16px;
	height: 16px;
}

.cplg-start .cplg-btn--primary {
	background: var(--cplg-primary);
	color: var(--cplg-primary-foreground);
	padding: 12px 24px;
}

.cplg-start .cplg-btn--primary:enabled:hover,
.cplg-start .cplg-btn--primary:not(:disabled):hover {
	box-shadow: 0 0 28px -4px var(--cplg-primary);
}

.cplg-start .cplg-btn--primary:disabled {
	cursor: not-allowed;
	opacity: 0.4;
}

.cplg-start .cplg-btn--outline-muted {
	border-color: var(--cplg-border);
	color: var(--cplg-muted-foreground);
	background: transparent;
	padding: 12px 20px;
	font-weight: 500;
}

.cplg-start .cplg-btn--outline-muted:hover {
	border-color: var(--cplg-border-strong);
	color: var(--cplg-foreground);
}

.cplg-start .cplg-btn--outline {
	border-color: var(--cplg-border);
	color: var(--cplg-foreground);
	background: transparent;
	padding: 8px 16px;
	font-size: 12px;
}

.cplg-start .cplg-btn--outline:hover {
	border-color: color-mix(in oklab, var(--cplg-primary) 40%, var(--cplg-border));
	color: var(--cplg-primary);
}

.cplg-start .cplg-btn--ghost {
	border-color: var(--cplg-border);
	color: var(--cplg-foreground);
	background: transparent;
	padding: 8px 16px;
	font-size: 12px;
	font-weight: 600;
}

.cplg-start .cplg-btn--ghost:hover {
	border-color: var(--cplg-border-strong);
}

.cplg-start .cplg-btn--ghost-accent {
	border-color: color-mix(in oklab, var(--cplg-primary) 40%, transparent);
	color: var(--cplg-primary);
	background: var(--cplg-surface-elevated);
	padding: 8px 16px;
	font-size: 12px;
	font-weight: 600;
}

.cplg-start .cplg-btn--ghost-accent:hover {
	border-color: var(--cplg-primary);
}

.cplg-start .cplg-btn--block {
	width: 100%;
	justify-content: center;
}

/* Step nav */
.cplg-start .cplg-step__nav {
	margin-top: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-top: 1px solid var(--cplg-border);
	padding-top: 24px;
	flex-wrap: wrap;
}

.cplg-start .cplg-step__nav-left,
.cplg-start .cplg-step__nav-right {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Below the sidebar-less mobile layout, a long step (an 8-option multi
   select, the details form + references section) can run well past one
   screen, and the page scrolls to reach it — but Back/Continue sat at
   the very end of that scroll, effectively invisible until you scrolled
   all the way down. Pin the nav to the bottom of the viewport instead,
   the standard mobile action-bar pattern, so it's always reachable.
   Nav is a sibling of the animated .cplg-step (not nested inside it) —
   see the comment in renderQuiz() — so this position:fixed correctly
   anchors to the real viewport instead of getting hijacked by an
   ancestor's transform containing block. */
@media (max-width: 639px) {
	.cplg-start .cplg-step__nav {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		margin-top: 0;
		border-top: 1px solid var(--cplg-border);
		background: color-mix(in oklab, var(--cplg-background) 92%, transparent);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
		flex-wrap: nowrap;
	}

	/* Taking nav out of the document flow (position:fixed above) shrinks
	   .cplg-start's own content height by however tall the nav used to be
	   — on a short step (no page scroll needed), that shortfall pulls the
	   "In a hurry?" footer, which used to sit safely below the in-flow
	   nav, up into the exact same bottom-of-viewport band the fixed nav
	   now occupies, so it renders underneath/behind it instead of above.
	   Padding on the root (not just .cplg-quiz or the footer individually)
	   fixes both that and the long-step case — since .cplg-start is
	   box-sizing:border-box with min-height:100dvh, this reserves the
	   nav's own height as real space at the true bottom of the page,
	   whatever content happens to end up last. */
	.cplg-start[data-phase="quiz"] {
		padding-bottom: 100px !important;
	}
}

.cplg-start .cplg-step__time-hint {
	display: none;
	font-size: 12px;
	color: var(--cplg-muted-foreground);
}

@media (min-width: 640px) {
	.cplg-start .cplg-step__time-hint { display: inline; }

}

.cplg-start .cplg-step__enter-hint {
	display: none;
	font-size: 12px;
	color: var(--cplg-muted-foreground);
}

@media (min-width: 640px) {
	.cplg-start .cplg-step__enter-hint { display: inline; }

}

.cplg-start .cplg-step__enter-hint kbd {
	border: 1px solid var(--cplg-border);
	border-radius: 4px;
	padding: 1px 6px;
	font-family: inherit;
}

/* ------------------------------------------------------------------ */
/* Sending phase                                                       */
/* ------------------------------------------------------------------ */
.cplg-start .cplg-sending {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 96px 0;
	text-align: center;
}

.cplg-start .cplg-sending__spinner {
	width: 32px;
	height: 32px;
	color: var(--cplg-primary);
	animation: cplg-spin 1s linear infinite;
}

@keyframes cplg-spin {
	to { transform: rotate(360deg); }

}

.cplg-start .cplg-sending__text {
	margin-top: 16px;
	font-size: 14px;
	color: var(--cplg-muted-foreground);
}

/* ------------------------------------------------------------------ */
/* Done phase                                                          */
/* ------------------------------------------------------------------ */
.cplg-start .cplg-done {
	animation: cplg-fade-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.cplg-start .cplg-done__head {
	margin-bottom: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: center;
}

.cplg-start .cplg-done__badge {
	display: grid;
	place-items: center;
	margin: 0 auto;
	width: 48px;
	height: 48px;
	border-radius: var(--cplg-radius-xl);
	background: var(--cplg-primary);
	color: var(--cplg-primary-foreground);
}

.cplg-start .cplg-done__badge svg {
	width: 24px;
	height: 24px;
}

.cplg-start .cplg-done__heading {
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.02em;
	background: linear-gradient(180deg, var(--cplg-heading-from) 0%, var(--cplg-heading-to) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

@media (min-width: 640px) {
	.cplg-start .cplg-done__heading { font-size: 36px; }

}

.cplg-start .cplg-done__text {
	margin: 0 auto;
	max-width: 36rem;
	font-size: 15px;
	color: var(--cplg-muted-foreground);
}

.cplg-start .cplg-mode-toggle {
	margin: 0 auto 24px;
	display: flex;
	width: 100%;
	max-width: 28rem;
	border-radius: 9999px;
	border: 1px solid var(--cplg-border);
	background: var(--cplg-surface);
	padding: 4px;
}

.cplg-start .cplg-mode-toggle__btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	border-radius: 9999px;
	border: none;
	background: transparent;
	color: var(--cplg-muted-foreground);
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	transition: all 0.2s ease;
}

/* "Book a discovery call" / "Request a callback" together don't fit two
   pills-wide once you're below ~420px — flex:1 alone can't shrink them
   past their own text's min-content width, so they overflowed the
   toggle's rounded pill instead of wrapping. Stack them instead of
   trying to cram both into one row. */
@media (max-width: 479px) {
	.cplg-start .cplg-mode-toggle {
		flex-direction: column;
		border-radius: var(--cplg-radius-2xl);
	}

	.cplg-start .cplg-mode-toggle__btn {
		width: 100%;
		white-space: normal;
	}
}

.cplg-start .cplg-mode-toggle__btn svg {
	width: 16px;
	height: 16px;
}

.cplg-start .cplg-mode-toggle__btn:hover {
	color: var(--cplg-foreground);
}

.cplg-start .cplg-mode-toggle__btn--active {
	background: var(--cplg-primary);
	color: var(--cplg-primary-foreground);
}

/* Same specificity as the plain :hover rule above (2 classes + a
   pseudo-class each) — placed after it so this wins the tie. Without it,
   hovering the already-active tab let the plain :hover color (light,
   meant for dark backgrounds) override --active's dark text, washing it
   out to near-invisible against the light active background. */
.cplg-start .cplg-mode-toggle__btn--active:hover {
	color: var(--cplg-primary-foreground);
}

.cplg-start .cplg-done__grid {
	display: grid;
	gap: 24px;
}

@media (min-width: 1024px) {
	.cplg-start .cplg-done__grid { grid-template-columns: minmax(0, 1fr) 320px; }

}

.cplg-start .cplg-done__panel {
	overflow: hidden;
	border-radius: var(--cplg-radius-2xl);
	border: 1px solid var(--cplg-border);
	background: var(--cplg-surface);
}

.cplg-start .cplg-cal-embed {
	width: 100%;
	height: 640px;
	border: 0;
	display: block;
}

.cplg-start .cplg-callback {
	padding: 24px;
}

@media (min-width: 640px) {
	.cplg-start .cplg-callback { padding: 32px; }

}

.cplg-start .cplg-callback__title {
	font-size: 18px;
	font-weight: 600;
	color: var(--cplg-foreground);
}

.cplg-start .cplg-callback__text {
	margin-top: 8px;
	font-size: 14px;
	color: var(--cplg-muted-foreground);
}

.cplg-start .cplg-callback__text strong {
	color: var(--cplg-foreground);
	font-weight: 500;
}

.cplg-start .cplg-callback__actions {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.cplg-start .cplg-callback__actions .cplg-btn--primary,
.cplg-start .cplg-callback__actions .cplg-btn--outline-muted {
	padding: 12px 20px;
}

.cplg-start .cplg-callback__confirmed {
	margin-top: 24px;
	display: flex;
	align-items: center;
	gap: 10px;
	border-radius: var(--cplg-radius-2xl);
	border: 1px solid color-mix(in oklab, var(--cplg-primary) 30%, var(--cplg-border));
	background: var(--cplg-surface-elevated);
	padding: 14px 18px;
	font-size: 14px;
	font-weight: 500;
	color: var(--cplg-foreground);
}

.cplg-start .cplg-callback__confirmed .cplg-icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 9999px;
	background: var(--cplg-primary);
	color: var(--cplg-primary-foreground);
}

.cplg-start .cplg-callback__confirmed .cplg-icon svg {
	width: 14px;
	height: 14px;
}

.cplg-start .cplg-summary-card {
	border-radius: var(--cplg-radius-2xl);
	border: 1px solid var(--cplg-border);
	background: var(--cplg-surface);
	padding: 24px;
	align-self: start;
}

.cplg-start .cplg-summary-card__eyebrow {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--cplg-muted-foreground);
}

.cplg-start .cplg-summary-row {
	border-bottom: 1px solid var(--cplg-border);
	padding-bottom: 12px;
	margin-top: 12px;
}

.cplg-start .cplg-summary-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.cplg-start .cplg-summary-row__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cplg-muted-foreground);
}

.cplg-start .cplg-summary-row__value {
	margin-top: 2px;
	font-size: 14px;
	color: var(--cplg-foreground);
}

.cplg-start .cplg-summary-card__link {
	margin-top: 24px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--cplg-primary);
}

.cplg-start .cplg-summary-card__link svg {
	width: 14px;
	height: 14px;
}

.cplg-start .cplg-done__edit {
	margin-top: 32px;
	text-align: center;
}

.cplg-start .cplg-done__edit button {
	background: none;
	border: none;
	padding: 0;
	font-size: 12px;
	color: var(--cplg-muted-foreground);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.cplg-start .cplg-done__edit button:hover {
	color: var(--cplg-foreground);
}

/* ------------------------------------------------------------------ */
/* Footer                                                               */
/* ------------------------------------------------------------------ */
.cplg-start .cplg-start__footer {
	position: relative;
	z-index: 10;
	padding: 0 20px 24px;
}

@media (min-width: 640px) {
	.cplg-start .cplg-start__footer { padding: 0 32px 24px; }

}

.cplg-start .cplg-start__hurry {
	display: none;
	margin: 0 auto 16px;
	max-width: 72rem;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	border-radius: var(--cplg-radius-2xl);
	border: 1px solid var(--cplg-border);
	background: color-mix(in oklab, var(--cplg-surface) 80%, transparent);
	padding: 16px 20px;
	text-align: center;
}

.cplg-start[data-phase="quiz"] .cplg-start__hurry {
	display: flex;
}

@media (min-width: 640px) {
	.cplg-start .cplg-start__hurry {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}

}

.cplg-start .cplg-start__hurry p {
	font-size: 14px;
	color: var(--cplg-muted-foreground);
}

.cplg-start .cplg-start__hurry-title {
	font-weight: 500;
	color: var(--cplg-foreground);
}

.cplg-start .cplg-start__hurry-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.cplg-start .cplg-start__footer-bottom {
	margin: 0 auto;
	max-width: 72rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 12px;
	color: var(--cplg-muted-foreground);
}

.cplg-start .cplg-start__trust {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.cplg-start .cplg-start__trust svg {
	width: 14px;
	height: 14px;
	color: var(--cplg-primary);
}

.cplg-start .cplg-start__noscript {
	padding: 40px 0;
	text-align: center;
	color: var(--cplg-muted-foreground);
}

.cplg-start .cplg-start__noscript a {
	color: var(--cplg-primary);
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Form-level error / status messaging                                 */
/* ------------------------------------------------------------------ */
.cplg-start .cplg-form-error {
	margin-top: 16px;
	border-radius: var(--cplg-radius-sm);
	border: 1px solid color-mix(in oklab, var(--cplg-destructive) 40%, var(--cplg-border));
	background: color-mix(in oklab, var(--cplg-destructive) 8%, transparent);
	color: var(--cplg-destructive);
	padding: 10px 14px;
	font-size: 13px;
}

/* Screen-reader only honeypot field — visually hidden, still in the tab/DOM
   flow for assistive tech to skip cleanly, but no human ever sees it. */
.cplg-start .cplg-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ */
/* [conicplex_schedule] — an app-shell layout (fixed sidebar + full-      */
/* height embed), sharing .cplg-start's foundation (reset, tokens,      */
/* typography, buttons, .cplg-option cards) declared above; everything  */
/* below is specific to this shortcode's own layout.                    */
/* ------------------------------------------------------------------ */

.cplg-start.cplg-schedule {
	flex-direction: row !important;
	height: 100vh !important;
	height: 100svh !important;
}

/* Below the sidebar breakpoint the whole page is stacked into one column
   (mobile tab bar + embed + note), so clamping it to a hard 100svh like
   the desktop app-shell squeezes everything with no breathing room.
   Let it grow naturally and scroll instead. */
@media (max-width: 1023px) {
	.cplg-start.cplg-schedule {
		height: auto !important;
		min-height: 100vh !important;
		min-height: 100svh !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
	}

	.cplg-schedule .cplg-schedule__main {
		height: auto;
	}
}

.cplg-schedule .cplg-schedule__blob--a {
	width: 480px;
	height: 480px;
	top: -140px;
	right: -120px;
	background: var(--cplg-secondary);
	animation: cplg-float 6s ease-in-out infinite;
}

.cplg-schedule .cplg-schedule__blob--b {
	width: 420px;
	height: 420px;
	bottom: -160px;
	left: -100px;
	background: var(--cplg-primary);
}

/* Desktop sidebar */
.cplg-schedule .cplg-schedule__aside {
	position: relative;
	z-index: 10;
	display: none;
	height: 100%;
	width: 360px;
	flex-shrink: 0;
	flex-direction: column;
	border-right: 1px solid var(--cplg-border);
	background: color-mix(in oklab, var(--cplg-surface) 80%, transparent);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
}

@media (min-width: 1024px) {
	.cplg-schedule .cplg-schedule__aside { display: flex; }

}

@media (min-width: 1280px) {
	.cplg-schedule .cplg-schedule__aside { width: 400px; }

}

.cplg-schedule .cplg-schedule__aside-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28px 28px 0;
}

.cplg-schedule .cplg-schedule__aside-body {
	display: flex;
	min-height: 0;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
	overflow: hidden;
	padding: 28px;
}

.cplg-schedule .cplg-schedule__aside-body .cplg-schedule__intro {
	margin-bottom: 0;
	max-width: none;
}

.cplg-schedule .cplg-schedule__aside-body .cplg-step__heading {
	font-size: 24px;
}

@media (min-width: 1280px) {
	.cplg-schedule .cplg-schedule__aside-body .cplg-step__heading { font-size: 30px; }

}

.cplg-schedule .cplg-schedule__aside-body .cplg-step__helper {
	margin-top: 8px;
	font-size: 13px;
}

.cplg-schedule .cplg-schedule__aside-footer {
	border-top: 1px solid var(--cplg-border);
	padding: 20px 28px;
}

/* Shared intro (heading/eyebrow/helper), reused by the sidebar */
.cplg-schedule .cplg-schedule__intro {
	margin-bottom: 32px;
	max-width: 42rem;
}

.cplg-schedule .cplg-schedule__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	border-radius: 9999px;
	border: 1px solid var(--cplg-border);
	background: color-mix(in oklab, var(--cplg-surface) 80%, transparent);
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--cplg-muted-foreground);
}

.cplg-schedule .cplg-schedule__eyebrow svg {
	flex-shrink: 0;
	color: var(--cplg-primary);
}

/* Sidebar call-type list — .cplg-option already covers border/background/
   padding/hover/active; this scales the card down for the sidebar and
   sits the duration badge inline next to the label. */
.cplg-schedule .cplg-schedule__side-tabs {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cplg-schedule .cplg-schedule__side-tab {
	padding: 14px;
}

.cplg-schedule .cplg-schedule__side-tab .cplg-option__icon {
	width: 32px;
	height: 32px;
}

.cplg-schedule .cplg-schedule__side-tab .cplg-option__icon svg {
	width: 16px;
	height: 16px;
}

.cplg-schedule .cplg-schedule__side-tab .cplg-option__label {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 13px;
}

.cplg-schedule .cplg-schedule__side-tab .cplg-option__hint {
	font-size: 11px;
}

.cplg-schedule .cplg-schedule__type-duration {
	display: inline-block;
	border-radius: 9999px;
	border: 1px solid var(--cplg-border);
	padding: 1px 8px;
	font-size: 10px;
	font-weight: 500;
	color: var(--cplg-muted-foreground);
}

/* Right column */
.cplg-schedule .cplg-schedule__main {
	position: relative;
	z-index: 10;
	display: flex;
	height: 100%;
	min-width: 0;
	flex: 1;
	flex-direction: column;
}

/* Mobile / tablet header + horizontal-scroll tabs */
.cplg-schedule .cplg-schedule__mobile-bar {
	display: flex;
	flex-direction: column;
	gap: 18px;
	border-bottom: 1px solid var(--cplg-border);
	padding: 18px 20px;
}

@media (min-width: 1024px) {
	.cplg-schedule .cplg-schedule__mobile-bar { display: none; }

}

.cplg-schedule .cplg-schedule__mobile-bar-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.cplg-schedule .cplg-schedule__mobile-tabs {
	display: flex;
	gap: 8px;
	margin: 0 -4px;
	padding: 0 4px 4px;
	overflow-x: auto;
	scrollbar-width: none;
}

.cplg-schedule .cplg-schedule__mobile-tabs::-webkit-scrollbar {
	display: none;
}

/* Buttons reset border/background to none (see the wizard's own reset
   near the top of this file), so — same as .cplg-btn/.cplg-option — this
   needs the .cplg-schedule ancestor to out-specificity that reset; a
   bare .cplg-schedule__mobile-tab class alone loses the tie and silently
   renders with no border/background at all. */
.cplg-schedule .cplg-schedule__mobile-tab {
	flex-shrink: 0;
	border-radius: 9999px;
	border: 1px solid var(--cplg-border-strong);
	background: var(--cplg-surface-elevated);
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	color: var(--cplg-muted-foreground);
	white-space: nowrap;
	transition: all 0.2s ease;
}

.cplg-schedule .cplg-schedule__mobile-tab:hover {
	border-color: color-mix(in oklab, var(--cplg-primary) 40%, var(--cplg-border-strong));
	color: var(--cplg-foreground);
}

.cplg-schedule .cplg-schedule__mobile-tab--active {
	border-color: var(--cplg-primary);
	background: color-mix(in oklab, var(--cplg-primary) 22%, var(--cplg-surface-elevated));
	color: var(--cplg-foreground);
	box-shadow: 0 0 20px -8px var(--cplg-primary);
}

.cplg-schedule .cplg-schedule__content {
	display: flex;
	min-height: 0;
	flex: 1;
	flex-direction: column;
	padding: 20px;
}

@media (min-width: 640px) {
	.cplg-schedule .cplg-schedule__content { padding: 24px; }

}

.cplg-schedule .cplg-schedule__topbar {
	display: none;
	margin-bottom: 12px;
	align-items: center;
	justify-content: space-between;
}

@media (min-width: 1024px) {
	.cplg-schedule .cplg-schedule__topbar { display: flex; }

}

.cplg-schedule .cplg-schedule__topbar-info {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--cplg-muted-foreground);
}

.cplg-schedule .cplg-schedule__topbar-info svg {
	flex-shrink: 0;
	color: var(--cplg-primary);
}

.cplg-schedule .cplg-schedule__topbar-info strong {
	font-weight: 600;
	color: var(--cplg-foreground);
}

.cplg-schedule .cplg-schedule__topbar-trust {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--cplg-muted-foreground);
}

.cplg-schedule .cplg-schedule__topbar-trust svg {
	flex-shrink: 0;
	color: var(--cplg-primary);
}

.cplg-schedule .cplg-schedule__embed-wrap {
	position: relative;
	min-height: 0;
	flex: 1;
	overflow: hidden;
	border-radius: 1.5rem;
	border: 1px solid var(--cplg-border);
	background: var(--cplg-surface);
	box-shadow: 0 0 60px -30px var(--cplg-primary);
}

/* .cplg-schedule__content's flex:1 only has real leftover space to fill
   inside the desktop app-shell's fixed-height column; once the page is
   allowed to grow and scroll on mobile there's nothing forcing a height
   here, so give the embed a floor of its own to stay usable. */
@media (max-width: 1023px) {
	.cplg-schedule .cplg-schedule__embed-wrap {
		min-height: 600px;
	}
}

/* One iframe per call type, stacked and toggled via display instead of
   swapping a single iframe's src — that way switching back to a call
   type you've already viewed shows it instantly instead of re-loading
   the Cal.com embed (and losing whatever month/date was selected). */
.cplg-schedule .cplg-schedule__embed {
	position: absolute;
	inset: 0;
	display: none;
	width: 100%;
	height: 100%;
	border: 0;
}

.cplg-schedule .cplg-schedule__embed--active {
	display: block;
}

/* Mobile-only: the sidebar's own "Rather write a brief?" CTA is hidden
   along with the rest of the aside below 1024px, so this repeats it in
   the mobile flow — the desktop one already covers >=1024px. */
.cplg-schedule .cplg-schedule__mobile-cta {
	margin-top: 20px;
}

@media (min-width: 1024px) {
	.cplg-schedule .cplg-schedule__mobile-cta { display: none; }

}