/**
 * Cartlet landing: design tokens, page and section layout (for the core blocks on the page) and
 * the ctl/* blocks. Brand: the teal of the plugin icon, Oxygen for type.
 *
 * 1. Tokens  2. Page & sections  3. Type & buttons  4. Header  5. Hero  6. Cart demo & modal
 * 7. Ticker  8. Video  9. Steps  10. Bento  11. Recipient  12. Platforms & waitlist  13. Pricing
 * 14. Stats  15. FAQ, CTA & legal pages  16. Footer  17. Motion  18. Small screens
 */

/* 1. Tokens ---------------------------------------------------------------------------------- */

:root {
	--ctl-ink: #0f1f1d;
	--ctl-ink-2: #3b4e4a;
	--ctl-muted: #64776f;
	--ctl-bg: #f4f8f7;
	--ctl-bg-2: #e8f0ee;
	--ctl-surface: #fff;
	--ctl-line: #d8e4e1;
	--ctl-line-2: #c4d4d0;
	--ctl-brand: #0f7f74;
	--ctl-brand-ink: #fff;
	--ctl-btn: #0e8578;
	--ctl-btn-hover: #0f9284;
	--ctl-btn-glow: rgba(20, 165, 150, 0.45);
	--ctl-btn-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 55%);
	--ctl-brand-2: #35bdb4;
	--ctl-brand-soft: #d9f1ed;
	--ctl-green: #1b8f5a;
	--ctl-amber: #b5740f;
	--ctl-woo: #7f54b3;
	--ctl-shop: #4f7f33;
	--ctl-dark: #0b1514;
	--ctl-dark-2: #13211f;
	--ctl-dark-line: #24332f;
	--ctl-dark-ink: #e9f3f1;
	--ctl-dark-muted: #9fb3ae;
	--ctl-radius: 16px;
	--ctl-radius-lg: 24px;
	--ctl-shadow-sm: 0 1px 2px rgba(15, 31, 29, 0.06), 0 4px 14px -6px rgba(15, 31, 29, 0.12);
	--ctl-shadow: 0 1px 2px rgba(15, 31, 29, 0.05), 0 18px 40px -18px rgba(15, 31, 29, 0.28);
	--ctl-shadow-lg: 0 2px 6px rgba(15, 31, 29, 0.05), 0 40px 80px -30px rgba(8, 60, 55, 0.4);
	--ctl-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ctl-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ctl-max: 1200px;
	--ctl-gutter: clamp(16px, 4vw, 40px);
	--ctl-font: "Oxygen", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ctl-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* 2. Page & sections ------------------------------------------------------------------------- */

:where([class^="ctl-"], [class*=" ctl-"]),
:where([class^="ctl-"], [class*=" ctl-"]) *,
:where([class^="ctl-"], [class*=" ctl-"]) ::before,
:where([class^="ctl-"], [class*=" ctl-"]) ::after {
	box-sizing: border-box;
}

body.ctl-page {
	background: var(--ctl-bg);
	color: var(--ctl-ink);
	font-family: var(--ctl-font);
	font-size: 17px;
	line-height: 1.6;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

/* No block-gap strips between the header, main area, sections and footer. */
.ctl-page .wp-site-blocks > *,
.ctl-page .wp-site-blocks > main > *,
.ctl-page .ctl-main > *,
.ctl-page .wp-block-post-content > *,
.ctl-page .ctl-masthead > * {
	margin-block-start: 0 !important;
}

.ctl-page .wp-site-blocks { padding: 0; }

.ctl-section {
	position: relative;
	padding-block: clamp(72px, 10vw, 120px);
	padding-inline: var(--ctl-gutter) !important;
	scroll-margin-top: 72px;
}

.ctl-section > *,
.ctl-section > .wp-block-group__inner-container > * {
	max-width: var(--ctl-max);
	margin-inline: auto !important;
}

.ctl-section--alt { background: var(--ctl-bg-2); }

.ctl-section--dark {
	background: var(--ctl-dark);
	color: var(--ctl-dark-ink);
}

.ctl-page .ctl-section--dark :where(h2, h3) { color: #fff; }
.ctl-section--dark .ctl-lede { color: var(--ctl-dark-muted); }

[id] { scroll-margin-top: 80px; }

/* Section head: kicker, heading, lede. */
.ctl-head {
	max-width: 720px !important;
	margin-block-end: clamp(36px, 5vw, 56px) !important;
	text-align: center;
}

.ctl-head > * { margin-block: 0; }
.ctl-head > * + * { margin-block-start: 14px; }

.ctl-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.78rem !important;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ctl-brand);
}

.ctl-section--dark .ctl-kicker { color: var(--ctl-brand-2); }

.ctl-lede {
	font-size: clamp(1.02rem, 1.4vw, 1.15rem);
	color: var(--ctl-ink-2);
	text-wrap: pretty;
}

/* 3. Type & buttons -------------------------------------------------------------------------- */

.ctl-page :where(h1, h2, h3, h4) {
	font-family: var(--ctl-font);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
	color: var(--ctl-ink);
}

.ctl-page h1 {
	font-size: clamp(2.5rem, 5.8vw, 4.4rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.ctl-page h2 { font-size: clamp(1.95rem, 4vw, 3rem); }
.ctl-page h3 { font-size: 1.25rem; }

.ctl-page :where(p, li) { text-wrap: pretty; }

:where(.ctl-page) a { color: inherit; }

.ctl-page code,
.ctl-page kbd {
	font-family: var(--ctl-mono);
	font-size: 0.88em;
	background: var(--ctl-bg-2);
	border: 1px solid var(--ctl-line);
	border-radius: 6px;
	padding: 0.05em 0.35em;
}

.ctl-icon { width: 1.15em; height: 1.15em; flex: none; }

.ctl-page :focus-visible {
	outline: 2px solid var(--ctl-brand);
	outline-offset: 2px;
	border-radius: 8px;
}

.ctl-btn,
.ctl-page .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--ctl-btn-gloss), var(--ctl-btn);
	color: var(--ctl-brand-ink);
	font: 600 0.95rem/1.2 var(--ctl-font);
	text-decoration: none;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
	white-space: nowrap;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 22px -8px var(--ctl-btn-glow);
	transition: transform 0.2s var(--ctl-ease), box-shadow 0.25s, background-color 0.2s;
}

.ctl-btn:hover,
.ctl-page .wp-block-button__link:hover {
	background: var(--ctl-btn-gloss), var(--ctl-btn-hover);
	transform: translateY(-1px);
	color: var(--ctl-brand-ink);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 12px 28px -8px var(--ctl-btn-glow);
}

.ctl-btn:active { transform: translateY(0); }

.ctl-btn--ghost,
.ctl-page .is-style-outline .wp-block-button__link {
	background: var(--ctl-surface);
	color: var(--ctl-brand);
	border: 1.5px solid color-mix(in srgb, var(--ctl-btn) 55%, transparent);
	text-shadow: none;
	box-shadow: none;
}

.ctl-btn--ghost:hover,
.ctl-page .is-style-outline .wp-block-button__link:hover {
	background: var(--ctl-brand-soft);
	color: var(--ctl-brand);
	border-color: var(--ctl-btn);
	box-shadow: none;
}

.ctl-btn--small { padding: 8px 14px; font-size: 0.86rem; gap: 6px; }
.ctl-btn--lg { padding: 15px 24px; font-size: 1rem; }

.ctl-btn[disabled] { opacity: 0.6; cursor: progress; }

.ctl-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.ctl-status__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ctl-status--live { background: color-mix(in srgb, var(--ctl-green) 13%, transparent); color: var(--ctl-green); }
.ctl-status--soon { background: color-mix(in srgb, var(--ctl-amber) 14%, transparent); color: var(--ctl-amber); }
.ctl-status--soon .ctl-status__dot { animation: ctl-blink 1.6s ease-in-out infinite; }

.ctl-mark {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 7px;
	color: #fff;
	font: 700 0.8rem/1 var(--ctl-font);
}

.ctl-mark--woocommerce { background: var(--ctl-woo); }
.ctl-mark--shopify { background: var(--ctl-shop); }

.ctl-thumb {
	display: grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: var(--ctl-bg-2);
	font-size: 1.25rem;
	line-height: 1;
}

.ctl-flag {
	display: inline-block;
	margin-inline-start: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 0.68rem;
	font-style: normal;
	font-weight: 700;
	vertical-align: 1px;
	white-space: nowrap;
}

.ctl-flag--down { background: color-mix(in srgb, var(--ctl-green) 14%, transparent); color: var(--ctl-green); }
.ctl-flag--out { background: color-mix(in srgb, var(--ctl-amber) 16%, transparent); color: var(--ctl-amber); }

.ctl-tag {
	padding: 1px 8px;
	border-radius: 6px;
	background: var(--ctl-brand-soft);
	color: var(--ctl-brand);
	font-family: var(--ctl-mono);
	font-size: 0.82rem;
}

.ctl-seg {
	display: inline-flex;
	padding: 3px;
	border-radius: 10px;
	background: var(--ctl-bg-2);
}

.ctl-seg button {
	padding: 4px 11px;
	border: 0;
	border-radius: 7px;
	background: none;
	color: var(--ctl-muted);
	font: 600 0.8rem/1.4 var(--ctl-font);
	cursor: pointer;
}

.ctl-seg [aria-checked="true"] { background: var(--ctl-surface); color: var(--ctl-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

.ctl-checks {
	display: grid;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ctl-checks li { display: flex; gap: 11px; align-items: flex-start; color: var(--ctl-ink-2); }

.ctl-checks .ctl-icon {
	width: 22px;
	height: 22px;
	padding: 4px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--ctl-green) 14%, transparent);
	color: var(--ctl-green);
	stroke-width: 3;
}

.ctl-checks--soon .ctl-icon { background: color-mix(in srgb, var(--ctl-amber) 14%, transparent); color: var(--ctl-amber); }

/* 4. Header ---------------------------------------------------------------------------------- */

.ctl-masthead { position: sticky; top: calc(-1 * var(--ctl-announce-h, 0px)); z-index: 50; }
.admin-bar .ctl-masthead { top: calc(32px - var(--ctl-announce-h, 0px)); }

/* Announcement: dark to teal, with a light sweep now and then. */
.ctl-announce {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 9px 52px;
	background: linear-gradient(90deg, var(--ctl-dark) 0%, #0d3b36 50%, var(--ctl-dark) 100%);
	color: var(--ctl-dark-ink);
	font-size: 0.88rem;
}

.ctl-announce::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 30%, rgba(53, 189, 180, 0.22) 50%, transparent 70%);
	transform: translateX(-100%);
	animation: ctl-sweep 6s ease-in-out 1.5s infinite;
	pointer-events: none;
}

.ctl-announce[hidden] { display: none; }
.ctl-announce__text { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; margin: 0; text-align: center; }

.ctl-announce__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px 2px 3px;
	border: 1px solid rgba(240, 180, 80, 0.35);
	border-radius: 999px;
	background: rgba(240, 180, 80, 0.12);
	color: #f6c676;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.ctl-announce__tag .ctl-mark { width: 18px; height: 18px; border-radius: 999px; font-size: 0.62rem; }

.ctl-announce a { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(53, 189, 180, 0.7); text-underline-offset: 3px; }
.ctl-announce a .ctl-icon { transition: transform 0.25s var(--ctl-ease); }
.ctl-announce a:hover .ctl-icon { transform: translateX(3px); }

.ctl-announce__close {
	position: absolute;
	right: 10px;
	top: 50%;
	z-index: 1;
	translate: 0 -50%;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--ctl-dark-muted);
	cursor: pointer;
}

.ctl-announce__close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.ctl-announce__close .ctl-icon { width: 16px; height: 16px; }

/* Bar: a light glass pill; it narrows and lifts once the page scrolls. */
.ctl-header { position: relative; padding: 12px var(--ctl-gutter); }

.ctl-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: var(--ctl-max);
	margin-inline: auto;
	padding: 8px 8px 8px 14px;
	border: 1px solid color-mix(in srgb, var(--ctl-line) 70%, transparent);
	border-radius: 20px;
	background: color-mix(in srgb, var(--ctl-surface) 55%, transparent);
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	transition: background 0.35s, border-color 0.35s, box-shadow 0.35s, max-width 0.5s var(--ctl-ease);
}

.ctl-header.is-scrolled .ctl-header__bar {
	max-width: 1100px;
	background: color-mix(in srgb, var(--ctl-surface) 86%, transparent);
	border-color: var(--ctl-line);
	box-shadow: 0 1px 2px rgba(15, 31, 29, 0.05), 0 16px 36px -18px rgba(15, 31, 29, 0.3);
}

.ctl-header__progress {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: -1px;
	height: 2px;
	overflow: hidden;
	border-radius: 2px;
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
}

.ctl-header.is-scrolled .ctl-header__progress { opacity: 1; }
.ctl-header__progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--ctl-brand-2), var(--ctl-btn)); transform: scaleX(var(--ctl-progress, 0)); transform-origin: left; }

.ctl-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: none;
	color: var(--ctl-ink);
	text-decoration: none;
	font-weight: 700;
	font-size: 1.22rem;
	letter-spacing: -0.02em;
}

.ctl-logo__mark { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 4px 12px -4px rgba(15, 127, 116, 0.5); transition: transform 0.4s var(--ctl-spring); }
.ctl-logo:hover .ctl-logo__mark { transform: rotate(-8deg) scale(1.05); }
.ctl-logo--light { color: #fff; }

.ctl-nav { position: relative; margin-inline: auto; }
.ctl-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }

.ctl-nav__link {
	position: relative;
	z-index: 1;
	display: block;
	padding: 8px 14px;
	border-radius: 999px;
	color: var(--ctl-ink-2);
	font-size: 0.93rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s;
}

.ctl-nav__link:hover,
.ctl-nav__link.is-active { color: var(--ctl-ink); }
.ctl-nav__link.is-active { font-weight: 600; }

.ctl-nav__pill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--ctl-brand-soft);
	opacity: 0;
	transition: transform 0.45s var(--ctl-ease), width 0.45s var(--ctl-ease), opacity 0.25s;
}

/* Platforms dropdown. */
.ctl-nav__drop { position: relative; display: flex; align-items: center; }
.ctl-nav__drop .ctl-nav__link { padding-inline-end: 4px; }

.ctl-nav__caret {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin-inline-end: 6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--ctl-ink-2);
	cursor: pointer;
	transition: transform 0.3s var(--ctl-ease), background 0.2s;
}

.ctl-nav__caret:hover { background: var(--ctl-bg-2); }
.ctl-nav__caret[aria-expanded="true"] { transform: rotate(180deg); color: var(--ctl-brand); }

.ctl-drop {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	z-index: 60;
	display: grid;
	gap: 8px;
	width: 380px;
	padding: 12px;
	border: 1px solid var(--ctl-line);
	border-radius: 20px;
	background: var(--ctl-surface);
	box-shadow: var(--ctl-shadow-lg);
	transform: translateX(-50%);
	animation: ctl-drop-in 0.3s var(--ctl-ease);
}

.ctl-drop[hidden] { display: none; }

/* Keeps the panel open while the pointer crosses the gap to it. */
.ctl-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }

.ctl-drop__title { margin: 4px 8px 2px; color: var(--ctl-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

.ctl-pcard {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 12px;
	border: 1px solid transparent;
	border-radius: 14px;
	color: var(--ctl-ink);
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s;
}

.ctl-pcard:hover { background: var(--ctl-bg); border-color: var(--ctl-line); }
.ctl-pcard .ctl-mark { width: 38px; height: 38px; border-radius: 11px; font-size: 1rem; }
.ctl-pcard__body { display: grid; gap: 3px; }
.ctl-pcard__name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 700; font-size: 0.95rem; }
.ctl-pcard__name .ctl-status { padding: 2px 8px; font-size: 0.68rem; }
.ctl-pcard__text { color: var(--ctl-muted); font-size: 0.82rem; line-height: 1.4; }
.ctl-pcard > .ctl-icon { color: var(--ctl-muted); transition: transform 0.25s var(--ctl-ease), color 0.2s; }
.ctl-pcard:hover > .ctl-icon { color: var(--ctl-brand); transform: translateX(3px); }

.ctl-drop__more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px;
	border-radius: 12px;
	background: var(--ctl-bg-2);
	color: var(--ctl-brand);
	font-size: 0.86rem;
	font-weight: 600;
	text-decoration: none;
}

.ctl-drop__more:hover { background: var(--ctl-brand-soft); }

/* Actions. */
.ctl-header__actions { display: flex; align-items: center; gap: 6px; flex: none; }

.ctl-header__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 6px;
	border-radius: 999px;
	color: var(--ctl-ink-2);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.ctl-header__link:hover { background: var(--ctl-bg-2); color: var(--ctl-ink); }

.ctl-header__play {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ctl-brand-soft);
	color: var(--ctl-brand);
	transition: transform 0.3s var(--ctl-spring);
}

.ctl-header__play .ctl-icon { width: 12px; height: 12px; margin-left: 2px; }
.ctl-header__link:hover .ctl-header__play { transform: scale(1.1); }

.ctl-burger {
	display: none;
	place-items: center;
	align-content: center;
	gap: 6px;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--ctl-line);
	border-radius: 13px;
	background: var(--ctl-surface);
	cursor: pointer;
}

.ctl-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ctl-ink); transition: transform 0.3s var(--ctl-ease); }
.ctl-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.ctl-burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Mobile menu. */
.ctl-menu {
	max-width: var(--ctl-max);
	margin: 8px auto 0;
	padding: 10px;
	border: 1px solid var(--ctl-line);
	border-radius: 20px;
	background: var(--ctl-surface);
	box-shadow: var(--ctl-shadow-lg);
	animation: ctl-drop-in 0.3s var(--ctl-ease);
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}

.ctl-menu[hidden] { display: none; }
.ctl-menu__list { margin: 0; padding: 0; list-style: none; }
.ctl-menu__list li { animation: ctl-fade-up 0.35s var(--ctl-ease) both; }
.ctl-menu__list li:nth-child(2) { animation-delay: 0.03s; }
.ctl-menu__list li:nth-child(3) { animation-delay: 0.06s; }
.ctl-menu__list li:nth-child(4) { animation-delay: 0.09s; }
.ctl-menu__list li:nth-child(5) { animation-delay: 0.12s; }
.ctl-menu__list a { display: flex; justify-content: space-between; align-items: center; padding: 13px 12px; border-radius: 12px; color: var(--ctl-ink); font-weight: 600; text-decoration: none; }
.ctl-menu__list a .ctl-icon { color: var(--ctl-muted); }
.ctl-menu__list a:hover { background: var(--ctl-bg); }
.ctl-menu__platforms { display: grid; gap: 4px; margin: 8px 0; padding: 6px; border-radius: 16px; background: var(--ctl-bg); }
.ctl-menu__ctas { display: grid; gap: 8px; }

@keyframes ctl-sweep { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes ctl-drop-in { from { opacity: 0; translate: 0 -6px; } }

/* 5. Hero ------------------------------------------------------------------------------------ */

.ctl-hero {
	padding-block: clamp(40px, 6vw, 72px) clamp(64px, 8vw, 104px);
	overflow: clip;
	isolation: isolate;
}

.ctl-hero::before {
	content: "";
	position: absolute;
	inset: -40% -20% auto auto;
	width: 900px;
	height: 900px;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--ctl-brand-2) 30%, transparent), transparent 70%);
	z-index: -1;
	pointer-events: none;
}

.ctl-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(color-mix(in srgb, var(--ctl-ink) 9%, transparent) 1px, transparent 1px);
	background-size: 22px 22px;
	mask-image: radial-gradient(ellipse 60% 70% at 30% 40%, #000, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 60% 70% at 30% 40%, #000, transparent 75%);
	z-index: -2;
	pointer-events: none;
}

.ctl-hero__grid {
	gap: clamp(32px, 5vw, 64px) !important;
	align-items: center !important;
	margin-block: 0 !important;
}

.ctl-hero__grid > .wp-block-column > * { margin-block: 0; }
.ctl-hero__grid > .wp-block-column > * + * { margin-block-start: 22px; }

.ctl-eyebrow {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	padding: 5px 14px 5px 6px;
	border: 1px solid var(--ctl-line);
	border-radius: 999px;
	background: var(--ctl-surface);
	box-shadow: var(--ctl-shadow-sm);
	font-size: 0.85rem !important;
	font-weight: 600;
	color: var(--ctl-ink-2);
}

.ctl-eyebrow mark,
.ctl-eyebrow strong {
	flex: none;
	white-space: nowrap;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--ctl-brand);
	color: #fff;
	font-size: 0.74rem;
	font-weight: 700;
}

.ctl-hero h1 em,
.ctl-hero h1 mark {
	font-style: normal;
	background: none;
	color: var(--ctl-brand);
	position: relative;
	white-space: nowrap;
}

.ctl-hero h1 em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.04em;
	height: 0.14em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ctl-brand-2) 45%, transparent);
	transform-origin: left;
	animation: ctl-underline 0.9s 0.4s var(--ctl-ease) both;
}

.ctl-hero .ctl-lede { max-width: 560px; font-size: clamp(1.05rem, 1.5vw, 1.2rem); }

/* Hero calls to action. */
.ctl-hero-actions { display: grid; gap: 18px; }

.ctl-hero-actions__buttons { display: flex; flex-wrap: wrap; gap: 10px; }

.ctl-hero-actions__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ctl-muted);
	font-size: 0.88rem;
}

.ctl-hero-actions__meta li { display: inline-flex; align-items: center; gap: 6px; }
.ctl-hero-actions__meta .ctl-icon { color: var(--ctl-green); stroke-width: 2.6; }

.ctl-hero-actions__btn .ctl-mark { width: 22px; height: 22px; border-radius: 7px; font-size: 0.72rem; }
.ctl-hero-actions__btn:not(.ctl-btn--ghost) .ctl-mark { background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); text-shadow: none; }

.ctl-hero-actions__soon {
	padding: 2px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ctl-amber) 16%, transparent);
	color: var(--ctl-amber);
	font-size: 0.72rem;
	font-weight: 700;
}

/* 6. Cart demo & modal ----------------------------------------------------------------------- */

.ctl-demo { position: relative; max-width: 500px; margin-inline: auto; }

.ctl-window {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--ctl-line);
	border-radius: var(--ctl-radius-lg);
	background: var(--ctl-surface);
	box-shadow: var(--ctl-shadow-lg);
}

.ctl-window__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border-bottom: 1px solid var(--ctl-line);
	background: var(--ctl-bg);
}

.ctl-window__dots { display: flex; gap: 6px; }
.ctl-window__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--ctl-line-2); }

.ctl-window__url {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	padding: 4px 11px;
	border: 1px solid var(--ctl-line);
	border-radius: 8px;
	background: var(--ctl-surface);
	color: var(--ctl-muted);
	font-size: 0.78rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ctl-window__platform {
	padding: 3px 9px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ctl-woo) 14%, transparent);
	color: var(--ctl-woo);
	font-size: 0.72rem;
	font-weight: 700;
	transition: background 0.3s, color 0.3s;
}


.ctl-cart { padding: 22px; }
.ctl-cart__title { margin: 0 0 6px; font-weight: 700; font-size: 1.1rem; }

.ctl-cart__items { margin: 0; padding: 0; list-style: none; }

.ctl-cart__item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 11px 0;
	border-bottom: 1px solid var(--ctl-line);
}

.ctl-cart__name { display: grid; line-height: 1.3; }
.ctl-cart__name b { font-size: 0.92rem; }
.ctl-cart__name small,
.ctl-phone small { color: var(--ctl-muted); font-size: 0.78rem; }

.ctl-qty { display: inline-flex; align-items: center; gap: 4px; }

.ctl-qty button {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--ctl-line);
	border-radius: 8px;
	background: var(--ctl-surface);
	color: var(--ctl-ink);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.ctl-qty button:hover { border-color: var(--ctl-brand); color: var(--ctl-brand); }
.ctl-qty output { min-width: 18px; text-align: center; font-weight: 600; font-size: 0.9rem; }

.ctl-cart__total { display: flex; justify-content: space-between; margin: 14px 0; }

.ctl-cart__total b { font-variant-numeric: tabular-nums; transition: color 0.3s; }
.ctl-cart__total b.is-bump { color: var(--ctl-brand); }

.ctl-cart__checkout {
	display: block;
	padding: 12px;
	border-radius: 12px;
	background: var(--ctl-ink);
	color: #fff;
	font-weight: 600;
	text-align: center;
}


.ctl-cart__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }

.ctl-cartlet-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 12px;
	border: 1.5px solid var(--ctl-btn);
	border-radius: 12px;
	background: var(--ctl-btn-gloss), var(--ctl-btn);
	color: #fff;
	font: 600 0.9rem/1.2 var(--ctl-font);
	cursor: pointer;
	transition: transform 0.2s var(--ctl-ease), background 0.2s;
}

.ctl-cartlet-btn:hover { transform: translateY(-1px); }
.ctl-cartlet-btn + .ctl-cartlet-btn { background: var(--ctl-surface); color: var(--ctl-brand); }
.ctl-cartlet-btn + .ctl-cartlet-btn:hover { background: var(--ctl-brand-soft); }
.ctl-cartlet-btn--pulse { animation: ctl-pulse 2.4s 1.2s ease-in-out 3; }

.ctl-demo__hint {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	margin: 16px 0 0;
	color: var(--ctl-muted);
	font-size: 0.85rem;
}

.ctl-demo__hint .ctl-icon { color: var(--ctl-brand); }

.ctl-demo__float {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px 10px 10px;
	border: 1px solid var(--ctl-line);
	border-radius: 14px;
	background: var(--ctl-surface);
	box-shadow: var(--ctl-shadow);
	font-size: 0.82rem;
	line-height: 1.25;
	animation: ctl-float 5s ease-in-out infinite;
}

.ctl-demo__float span { display: grid; }
.ctl-demo__float small { color: var(--ctl-muted); }
.ctl-demo__float--a { top: -34px; left: -88px; }
.ctl-demo__float--b { bottom: 8px; right: -64px; animation-delay: -2.5s; }

.ctl-demo__avatar,
.ctl-demo__icon {
	display: grid !important;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ctl-brand);
	color: #fff;
	font-weight: 700;
}

.ctl-demo__icon { border-radius: 10px; background: color-mix(in srgb, var(--ctl-green) 15%, transparent); color: var(--ctl-green); }

.ctl-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 16px;
}

.ctl-modal[hidden] { display: none; }

.ctl-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 18, 17, 0.55);
	backdrop-filter: blur(4px);
	animation: ctl-fade 0.2s;
}

.ctl-modal__card {
	position: relative;
	width: 100%;
	max-width: 460px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 26px;
	border-radius: 22px;
	background: var(--ctl-surface);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
	animation: ctl-pop 0.3s var(--ctl-spring);
}

.ctl-modal__x {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ctl-bg-2);
	color: var(--ctl-ink);
	cursor: pointer;
}

.ctl-modal__title { margin: 0 0 4px; font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; }
.ctl-modal__sub { margin: 0 0 16px; color: var(--ctl-muted); font-size: 0.9rem; }

.ctl-copy { display: flex; gap: 8px; margin-bottom: 14px; }

.ctl-copy input,
.ctl-modal textarea,
.ctl-save input {
	width: 100%;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--ctl-line);
	border-radius: 11px;
	background: var(--ctl-bg);
	color: var(--ctl-ink);
	font: 0.92rem/1.4 var(--ctl-font);
}

.ctl-modal__note { display: grid; gap: 4px; margin-bottom: 14px; font-size: 0.82rem; color: var(--ctl-muted); }
.ctl-modal textarea { resize: vertical; }

.ctl-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }

.ctl-channels button {
	padding: 9px 6px;
	border: 1px solid var(--ctl-line);
	border-radius: 10px;
	background: var(--ctl-surface);
	color: var(--ctl-ink);
	font: 600 0.8rem/1.2 var(--ctl-font);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}

.ctl-channels button:hover { border-color: var(--ctl-brand); background: var(--ctl-brand-soft); }

.ctl-qr {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px;
	border-radius: 16px;
	background: var(--ctl-bg-2);
}

.ctl-qr p { margin: 2px 0 8px; color: var(--ctl-muted); font-size: 0.82rem; line-height: 1.4; }

.ctl-qr__code {
	flex: none;
	width: 112px;
	height: 112px;
	padding: 7px;
	border-radius: 12px;
	background: #fff;
}

.ctl-qr__code svg { display: block; width: 100%; height: 100%; }

.ctl-save { display: grid; gap: 12px; }
.ctl-save label { display: grid; gap: 4px; font-size: 0.82rem; color: var(--ctl-muted); }

.ctl-saved { display: grid; justify-items: center; gap: 6px; padding: 10px 0 0; text-align: center; }
.ctl-saved[hidden] { display: none; }
.ctl-saved p { margin: 0; color: var(--ctl-muted); font-size: 0.88rem; }

.ctl-saved__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--ctl-green) 15%, transparent);
	color: var(--ctl-green);
	animation: ctl-pop 0.4s var(--ctl-spring);
}

.ctl-saved__icon .ctl-icon { width: 26px; height: 26px; stroke-width: 2.6; }

.ctl-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 1100;
	max-width: calc(100vw - 32px);
	padding: 11px 18px;
	border-radius: 999px;
	background: var(--ctl-ink);
	color: #fff;
	font: 600 0.9rem/1.3 var(--ctl-font);
	text-align: center;
	opacity: 0;
	transform: translate(-50%, 16px);
	pointer-events: none;
	transition: opacity 0.25s, transform 0.35s var(--ctl-ease);
}

.ctl-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* 7. Ticker --------------------------------------------------------------------------------- */

.ctl-ticker {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: clamp(16px, 3vw, 32px);
	overflow: hidden;
	padding: 22px 0 22px var(--ctl-gutter);
	border-block: 1px solid var(--ctl-line);
	background:
		radial-gradient(600px 120px at 12% 50%, color-mix(in srgb, var(--ctl-brand-2) 12%, transparent), transparent 70%),
		var(--ctl-surface);
}

.ctl-ticker__head { display: flex; align-items: center; gap: 12px; }

.ctl-ticker__badge {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--ctl-btn-gloss), var(--ctl-btn);
	color: #fff;
	box-shadow: 0 8px 20px -8px var(--ctl-btn-glow);
}

/* a soft ping, like a message going out */
.ctl-ticker__badge::after {
	content: "";
	position: absolute;
	inset: -5px;
	border: 2px solid color-mix(in srgb, var(--ctl-brand-2) 55%, transparent);
	border-radius: 18px;
	animation: ctl-ping 2.6s ease-out infinite;
}

.ctl-ticker__label { display: grid; margin: 0; color: var(--ctl-muted); font-size: 0.8rem; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.ctl-ticker__label b { color: var(--ctl-ink); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }

.ctl-ticker__rows {
	display: grid;
	gap: 10px;
	min-width: 0;
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.ctl-ticker__track { display: flex; width: max-content; }
.ctl-ticker__rows:hover .ctl-ticker__list { animation-play-state: paused; }

.ctl-ticker__list {
	display: flex;
	flex: none;
	gap: 10px;
	margin: 0;
	padding: 0 10px 0 0;
	list-style: none;
	animation: ctl-marquee 80s linear infinite;
}

.ctl-ticker__track--events .ctl-ticker__list { animation-duration: 110s; animation-direction: reverse; }

.ctl-chan {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 6px 15px 6px 6px;
	border: 1px solid var(--ctl-line);
	border-radius: 999px;
	background: var(--ctl-surface);
	box-shadow: 0 1px 2px rgba(15, 31, 29, 0.04);
	color: var(--ctl-ink);
	font-weight: 600;
	font-size: 0.92rem;
	white-space: nowrap;
	transition: transform 0.25s var(--ctl-ease), border-color 0.25s, box-shadow 0.25s;
}

.ctl-chan:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--c) 45%, transparent);
	box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--c) 70%, transparent);
}

.ctl-chan__ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--c);
	color: #fff;
	font-size: 0.78rem;
	line-height: 1;
}

.ctl-chan__ico b { font-weight: 700; }
.ctl-chan__ico .ctl-icon { width: 15px; height: 15px; }

.ctl-event {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--ctl-bg-2);
	color: var(--ctl-ink-2);
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
}

.ctl-event .ctl-icon { width: 14px; height: 14px; color: var(--ctl-brand); }

@keyframes ctl-ping { 0% { opacity: 0.9; transform: scale(0.92); } 70%, 100% { opacity: 0; transform: scale(1.18); } }

/* 8. Video ----------------------------------------------------------------------------------- */

.ctl-video { max-width: 980px !important; }

.ctl-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--ctl-radius-lg);
	background: var(--ctl-dark);
	box-shadow: var(--ctl-shadow-lg), 0 0 0 1px var(--ctl-line);
}

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

.ctl-video__poster {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.ctl-video__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ctl-ease), filter 0.3s; }
.ctl-video__poster:hover img { transform: scale(1.02); filter: brightness(0.92); }

.ctl-video__play {
	position: absolute;
	left: 50%;
	top: 50%;
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--ctl-brand);
	color: #fff;
	transform: translate(-50%, -50%);
	box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
	transition: transform 0.3s var(--ctl-spring);
}

.ctl-video__play::before {
	content: "";
	position: absolute;
	inset: -10px;
	border: 2px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	animation: ctl-ring 2s ease-out infinite;
}

.ctl-video__play .ctl-icon { width: 30px; height: 30px; margin-left: 4px; }
.ctl-video__poster:hover .ctl-video__play { transform: translate(-50%, -50%) scale(1.08); }

.ctl-video__len {
	position: absolute;
	right: 14px;
	bottom: 14px;
	padding: 3px 9px;
	border-radius: 7px;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
}

/* 9. Steps ----------------------------------------------------------------------------------- */

.ctl-steps {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(32px, 6vw, 80px);
	align-items: center;
}

.ctl-steps__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.ctl-step {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 18px;
	width: 100%;
	overflow: hidden;
	padding: 22px 24px;
	border: 1px solid var(--ctl-line);
	border-radius: 20px;
	background: var(--ctl-surface);
	color: var(--ctl-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ctl-ease);
}

.ctl-step:hover { transform: translateX(4px); }
.ctl-step[aria-selected="true"] { border-color: var(--ctl-brand); box-shadow: var(--ctl-shadow); }

.ctl-step__num {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	background: var(--ctl-bg-2);
	font-weight: 700;
	transition: background 0.3s, color 0.3s;
}

.ctl-step[aria-selected="true"] .ctl-step__num { background: var(--ctl-brand); color: #fff; }

.ctl-step__body { display: grid; gap: 6px; }
.ctl-step__title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.12rem; }
.ctl-step__title .ctl-icon { color: var(--ctl-brand); }
.ctl-step__text { color: var(--ctl-ink-2); font-size: 0.95rem; }

.ctl-step__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.ctl-step__bar i { display: block; width: 0; height: 100%; background: var(--ctl-brand); }
.ctl-step[aria-selected="true"] .ctl-step__bar i { animation: ctl-progress var(--ctl-step-ms, 4800ms) linear forwards; }
.ctl-steps.is-paused .ctl-step__bar i { animation-play-state: paused; }

.ctl-phone {
	justify-self: center;
	width: min(320px, 100%);
	padding: 12px;
	border-radius: 46px;
	background: var(--ctl-dark);
	box-shadow: var(--ctl-shadow-lg);
	transform: rotate(-2deg);
}

.ctl-phone__screen {
	position: relative;
	min-height: 520px;
	padding: 52px 18px 22px;
	overflow: hidden;
	border-radius: 36px;
	background: var(--ctl-bg);
}

.ctl-phone__notch { position: absolute; top: 12px; left: 50%; width: 92px; height: 24px; border-radius: 999px; background: var(--ctl-dark); transform: translateX(-50%); }
.ctl-phone__view { display: grid; gap: 14px; animation: ctl-fade-up 0.45s var(--ctl-ease); }
.ctl-phone__view[hidden] { display: none; }
.ctl-phone__head { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-weight: 700; font-size: 1.2rem; }

.ctl-phone__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.ctl-phone__list li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 9px;
	border-radius: 14px;
	background: var(--ctl-surface);
	font-size: 0.86rem;
	font-weight: 600;
}

.ctl-phone__list .ctl-thumb { width: 36px; height: 36px; font-size: 1.05rem; }
.ctl-phone__btns { display: grid; gap: 8px; margin-top: 6px; }

.ctl-phone__btns span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px;
	border: 1.5px solid var(--ctl-btn);
	color: var(--ctl-brand);
	border-radius: 13px;
	font-weight: 600;
	font-size: 0.9rem;
}

.ctl-phone__btns .is-primary { background: var(--ctl-btn-gloss), var(--ctl-btn); color: #fff; }

.ctl-phone__link {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 11px 12px;
	border: 1px dashed var(--ctl-brand);
	border-radius: 12px;
	background: var(--ctl-brand-soft);
	color: var(--ctl-brand);
	font: 600 0.82rem/1.2 var(--ctl-mono);
}

.ctl-phone__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.ctl-phone__grid span {
	display: grid;
	place-items: center;
	gap: 4px;
	padding: 14px 4px;
	border-radius: 14px;
	background: var(--ctl-surface);
	font-size: 0.72rem;
	font-weight: 600;
}

.ctl-phone__bubble {
	justify-self: end;
	max-width: 85%;
	margin: 6px 0 0;
	padding: 10px 13px;
	border-radius: 16px 16px 4px 16px;
	background: var(--ctl-brand);
	color: #fff;
	font-size: 0.85rem;
}

/* 10. Bento ---------------------------------------------------------------------------------- */

.ctl-bento {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}

.ctl-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 22px;
	overflow: hidden;
	padding: 28px;
	border: 1px solid var(--ctl-line);
	border-radius: var(--ctl-radius-lg);
	background: var(--ctl-surface);
	transition: transform 0.35s var(--ctl-ease), box-shadow 0.35s;
}

.ctl-tile:hover { transform: translateY(-3px); box-shadow: var(--ctl-shadow); }

.ctl-tile--share { grid-column: span 4; flex-direction: row; align-items: center; }
.ctl-tile--share > * { flex: 1; }
.ctl-tile--saved { grid-column: span 2; }
.ctl-tile--links { grid-column: span 2; }
.ctl-tile--stock { grid-column: span 2; }
.ctl-tile--analytics { grid-column: span 2; }
.ctl-tile--dev { grid-column: span 6; flex-direction: row; align-items: center; background: var(--ctl-dark); border-color: var(--ctl-dark); color: var(--ctl-dark-ink); }
.ctl-tile--dev > * { flex: 1; }
.ctl-tile--dev .ctl-tile__title { color: #fff; }
.ctl-tile--dev .ctl-tile__copy p { color: var(--ctl-dark-muted); }
.ctl-tile--dev .ctl-tile__icon { background: rgba(53, 189, 180, 0.15); color: var(--ctl-brand-2); }

.ctl-tile__copy p { margin: 8px 0 0; color: var(--ctl-ink-2); font-size: 0.95rem; }
.ctl-tile__title { margin: 14px 0 0 !important; font-size: 1.2rem !important; }

.ctl-tile__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--ctl-brand-soft);
	color: var(--ctl-brand);
}

.ctl-shortlink {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 8px 8px 14px;
	border: 1px solid var(--ctl-line);
	border-radius: 14px;
	background: var(--ctl-bg);
	font: 600 0.88rem/1.2 var(--ctl-mono);
	color: var(--ctl-ink-2);
}

.ctl-shortlink span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctl-shortlink .ctl-icon { color: var(--ctl-brand); }

.ctl-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }

.ctl-chips li { animation: ctl-bob 3.2s ease-in-out infinite; }
.ctl-chips li:nth-child(even) { animation-delay: -1.6s; }

.ctl-chips button {
	padding: 6px 12px;
	border: 1px solid var(--ctl-line);
	border-radius: 999px;
	background: var(--ctl-surface);
	color: var(--ctl-ink);
	font: 600 0.82rem/1.3 var(--ctl-font);
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.ctl-chips button:hover { border-color: var(--ctl-btn); }
.ctl-chips [aria-pressed="true"] { background: var(--ctl-btn); border-color: var(--ctl-btn); color: #fff; }

/* Share tile: what the shared message looks like. */
.ctl-tile--share { align-items: stretch; }
.ctl-tile--share .ctl-tile__copy { align-self: center; }
.ctl-tile__demo { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.ctl-tile--share .ctl-chips { margin: 0; }

.ctl-share-preview {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	align-items: stretch;
}

.ctl-share-preview__msg {
	display: grid;
	gap: 8px;
	padding: 12px 14px;
	border-radius: 16px 16px 16px 4px;
	background: var(--ctl-bg-2);
	font-size: 0.85rem;
	animation: ctl-fade-up 0.35s var(--ctl-ease);
}

.ctl-share-preview__msg > p { margin: 0; }

.ctl-share-preview__app {
	display: flex;
	align-items: center;
	gap: 7px;
	font-weight: 700;
	font-size: 0.78rem;
}

.ctl-share-preview__app small { margin-inline-start: auto; color: var(--ctl-muted); font-weight: 500; }
.ctl-share-preview__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ctl-green); }
.ctl-share-preview__text { color: var(--ctl-ink-2); }

.ctl-share-preview__card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 11px;
	background: var(--ctl-surface);
}

.ctl-share-preview__card .ctl-icon { color: var(--ctl-brand); }
.ctl-share-preview__card span { display: grid; line-height: 1.3; min-width: 0; }
.ctl-share-preview__card b { font-size: 0.82rem; }
.ctl-share-preview__card small { overflow: hidden; color: var(--ctl-brand); font: 600 0.74rem/1.3 var(--ctl-mono); text-overflow: ellipsis; white-space: nowrap; }

.ctl-share-preview__qr {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 6px;
	padding: 10px;
	border: 1px solid var(--ctl-line);
	border-radius: 16px;
	background: var(--ctl-surface);
}

.ctl-share-preview__qr small { color: var(--ctl-muted); font-size: 0.7rem; font-weight: 600; }
.ctl-share-preview__code { display: block; width: 84px; height: 84px; }
.ctl-share-preview__code svg { display: block; width: 100%; height: 100%; }

.ctl-saved-list { display: grid; gap: 8px; margin: auto 0 0; padding: 0; list-style: none; }

.ctl-saved-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 12px;
	border: 1px solid var(--ctl-line);
	border-radius: 13px;
	background: var(--ctl-bg);
	transition: background 0.3s, border-color 0.3s;
}

.ctl-saved-list span { display: grid; line-height: 1.3; font-size: 0.88rem; }
.ctl-saved-list small { color: var(--ctl-muted); font-size: 0.76rem; }

.ctl-saved-list button {
	padding: 5px 11px;
	border: 0;
	border-radius: 999px;
	background: var(--ctl-brand-soft);
	color: var(--ctl-brand);
	font: 700 0.78rem/1.3 var(--ctl-font);
	cursor: pointer;
}

.ctl-saved-list li.is-restored { border-color: var(--ctl-green); background: color-mix(in srgb, var(--ctl-green) 8%, var(--ctl-surface)); }
.ctl-saved-list li.is-restored button { background: var(--ctl-green); color: #fff; }

.ctl-builder { display: grid; gap: 2px; margin-top: auto; padding: 6px 14px 14px; border: 1px solid var(--ctl-line); border-radius: 14px; background: var(--ctl-bg); }
.ctl-builder__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 9px 0; border-bottom: 1px solid var(--ctl-line); font-size: 0.86rem; }
.ctl-builder__row > span:first-child { color: var(--ctl-muted); }

.ctl-builder__url {
	margin: 12px 0 0;
	padding: 8px 10px;
	border-radius: 9px;
	background: var(--ctl-surface);
	font: 600 0.8rem/1.3 var(--ctl-mono);
	text-align: center;
	color: var(--ctl-brand);
	transition: color 0.3s;
}

.ctl-stock { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: auto; padding: 12px; border: 1px solid var(--ctl-line); border-radius: 14px; background: var(--ctl-bg); font-size: 0.9rem; }
.ctl-stock > span:nth-child(2) { display: grid; justify-items: start; gap: 4px; }
.ctl-stock .ctl-flag { margin: 0; }
.ctl-stock__msg { margin: -10px 0 0; color: var(--ctl-muted); font-size: 0.82rem; min-height: 1.3em; }
.ctl-stock__msg.is-on { color: var(--ctl-green); font-weight: 600; }

/* The restock email, dimmed until the alert is on. */
.ctl-mail {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 12px;
	align-items: center;
	margin-top: -8px;
	padding: 12px;
	border: 1px dashed var(--ctl-line-2);
	border-radius: 14px;
	background: var(--ctl-surface);
	opacity: 0.45;
	filter: grayscale(1);
	transform: translateY(4px);
	transition: opacity 0.35s, filter 0.35s, transform 0.45s var(--ctl-spring), border-color 0.35s, box-shadow 0.35s;
}

.ctl-mail.is-on { opacity: 1; filter: none; transform: none; border-style: solid; border-color: color-mix(in srgb, var(--ctl-green) 45%, transparent); box-shadow: var(--ctl-shadow-sm); }
.ctl-mail__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--ctl-green) 14%, transparent); color: var(--ctl-green); }
.ctl-mail__body { display: grid; line-height: 1.3; min-width: 0; font-size: 0.84rem; }
.ctl-mail__body small { color: var(--ctl-muted); font-size: 0.76rem; }
.ctl-mail__tag { align-self: start; padding: 2px 8px; border-radius: 999px; background: var(--ctl-bg-2); color: var(--ctl-muted); font-size: 0.68rem; font-weight: 700; }

.ctl-toggle { position: relative; display: inline-block; cursor: pointer; }
.ctl-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.ctl-toggle > span[aria-hidden] {
	position: relative;
	display: block;
	width: 44px;
	height: 26px;
	border-radius: 999px;
	background: var(--ctl-line-2);
	transition: background 0.25s;
}

.ctl-toggle > span[aria-hidden]::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform 0.3s var(--ctl-spring);
}

.ctl-toggle input:checked + span { background: var(--ctl-green); }
.ctl-toggle input:checked + span::after { transform: translateX(18px); }
.ctl-toggle input:focus-visible + span { outline: 2px solid var(--ctl-brand); outline-offset: 2px; }

.ctl-chart { margin-top: auto; padding: 14px; border: 1px solid var(--ctl-line); border-radius: 14px; background: var(--ctl-bg); }
.ctl-chart__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ctl-chart__head small { color: var(--ctl-muted); font-size: 0.72rem; }
.ctl-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 12px; }
.ctl-kpis dt { color: var(--ctl-muted); font-size: 0.72rem; }
.ctl-kpis dd { margin: 0; font-weight: 700; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.ctl-chart__bars { display: flex; align-items: flex-end; gap: 2px; height: 76px; }
.ctl-chart__bars i { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; background: linear-gradient(var(--ctl-brand-2), var(--ctl-brand)); transition: height 0.5s var(--ctl-ease); }

.ctl-code { overflow: hidden; border: 1px solid var(--ctl-dark-line); border-radius: 16px; background: #071110; }
.ctl-code__tabs { display: flex; gap: 2px; padding: 8px; border-bottom: 1px solid var(--ctl-dark-line); }

.ctl-code__tabs button {
	padding: 6px 12px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--ctl-dark-muted);
	font: 600 0.82rem/1.3 var(--ctl-font);
	cursor: pointer;
}

.ctl-code__tabs [aria-selected="true"] { background: var(--ctl-dark-line); color: #fff; }

.ctl-code pre {
	margin: 0;
	padding: 20px;
	overflow-x: auto;
	background: none;
	color: #e9f3f1;
	font: 0.86rem/1.75 var(--ctl-mono);
}

.ctl-code pre[hidden] { display: none; }
.ctl-code code { padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.ctl-code i { color: #6f8a84; font-style: normal; }
.ctl-code b { color: #6fe0d2; font-weight: 500; }
.ctl-code s { color: #b6e3a0; text-decoration: none; }

/* 11. Recipient ------------------------------------------------------------------------------ */

.ctl-recipient {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.ctl-preview { padding: 22px; }

.ctl-preview__note {
	display: flex;
	gap: 12px;
	margin-bottom: 14px;
	padding: 14px;
	border-radius: 14px;
	background: var(--ctl-bg-2);
	font-size: 0.92rem;
}

.ctl-preview__note > span:last-child { display: grid; gap: 2px; }
.ctl-preview__note q { color: var(--ctl-ink-2); font-style: italic; }

.ctl-pick { margin: 0; padding: 0; list-style: none; }

.ctl-pick li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 12px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--ctl-line);
}

.ctl-pick input { width: 19px; height: 19px; margin: 0; accent-color: var(--ctl-brand); cursor: pointer; }
.ctl-pick label { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; cursor: pointer; }
.ctl-pick li.is-out label { opacity: 0.55; cursor: default; }
.ctl-pick__name { display: grid; justify-items: start; gap: 2px; line-height: 1.3; font-size: 0.92rem; }
.ctl-pick__name small { color: var(--ctl-muted); font-size: 0.78rem; }
.ctl-pick__name .ctl-flag { margin: 0; }
.ctl-pick__price { display: grid; justify-items: end; font-weight: 700; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.ctl-pick__price s { color: var(--ctl-muted); font-weight: 400; font-size: 0.78rem; }

.ctl-pick__notify {
	grid-column: 2;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	padding: 4px 10px;
	border: 1px solid var(--ctl-line);
	border-radius: 999px;
	background: var(--ctl-surface);
	color: var(--ctl-brand);
	font: 600 0.78rem/1.3 var(--ctl-font);
	cursor: pointer;
}

.ctl-pick__notify.is-on { border-color: var(--ctl-green); background: var(--ctl-green); color: #fff; }

.ctl-preview__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; }
.ctl-merge { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; color: var(--ctl-ink-2); font-size: 0.86rem; }
.ctl-merge input { accent-color: var(--ctl-brand); }
.ctl-preview__btns { display: flex; gap: 8px; }

.ctl-points { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.ctl-points li { display: flex; gap: 16px; }
.ctl-points li > span:last-child { display: grid; gap: 4px; color: var(--ctl-ink-2); font-size: 0.95rem; }
.ctl-points b { color: var(--ctl-ink); font-size: 1.05rem; }

/* 12. Platforms & waitlist ------------------------------------------------------------------- */

.ctl-platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.ctl-platform {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: clamp(24px, 3vw, 34px);
	overflow: hidden;
	border: 1px solid var(--ctl-line);
	border-radius: var(--ctl-radius-lg);
	background: var(--ctl-surface);
	box-shadow: var(--ctl-shadow-sm);
}

.ctl-platform::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--ctl-woo);
}

.ctl-platform--shopify::before { background: repeating-linear-gradient(90deg, var(--ctl-shop) 0 14px, transparent 14px 22px); }
.ctl-platform--shopify { background: linear-gradient(160deg, var(--ctl-surface), var(--ctl-bg)); }

.ctl-platform__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ctl-platform__head .ctl-mark { width: 44px; height: 44px; border-radius: 13px; font-size: 1.2rem; }
.ctl-platform__head > span:nth-child(2) { display: grid; margin-inline-end: auto; }
.ctl-platform__kind { color: var(--ctl-muted); font-size: 0.8rem; font-weight: 600; }
.ctl-platform__name { margin: 0 !important; font-size: 1.4rem !important; }
.ctl-platform__summary { margin: 0; color: var(--ctl-ink-2); }
.ctl-platform .ctl-checks { flex: 1; align-content: start; }
.ctl-platform__foot > .ctl-btn { width: 100%; }

/* Waitlist forms (Fluent Forms): email and button on one row, the rest below. */
.ctl-ff { display: grid; gap: 10px; }
.ctl-ff .fluentform { margin: 0; }

.ctl-ff .frm-fluent-form fieldset {
	display: grid !important;
	grid-template-columns: 1fr auto;
	gap: 8px;
}

.ctl-ff fieldset > * { grid-column: 1 / -1; margin: 0 !important; }
.ctl-ff fieldset > .ctl-ff-email { grid-column: 1; grid-row: 1; }
.ctl-ff fieldset > .ff_submit_btn_wrapper { grid-column: 2; grid-row: 1; }
.ctl-ff--compact .ctl-ff-store { display: none !important; }
.ctl-ff .ff-el-input--label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ctl-page .ctl-ff .ff-el-form-control {
	width: 100%;
	min-width: 0;
	height: auto;
	padding: 12px 16px 12px 42px;
	border: 1px solid var(--ctl-line-2);
	border-radius: 999px;
	background: var(--ctl-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364776f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2.5'/%3E%3Cpath d='M4.5 7.5l7.5 5.5 7.5-5.5'/%3E%3C/svg%3E") 15px center / 18px no-repeat;
	color: var(--ctl-ink);
	font: 0.95rem/1.3 var(--ctl-font);
	box-shadow: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.ctl-page .ctl-ff .ctl-ff-store .ff-el-form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364776f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5L5.5 4h13L20 9.5M4 9.5h16v10.5H4zM4 9.5a2.7 2.7 0 0 0 5.3 0 2.7 2.7 0 0 0 5.4 0 2.7 2.7 0 0 0 5.3 0M10 20v-5h4v5'/%3E%3C/svg%3E"); }
.ctl-page .ctl-ff .ff-el-form-control::placeholder { color: var(--ctl-muted); opacity: 1; }
.ctl-page .ctl-ff .ff-el-form-control:focus { outline: none; border-color: var(--ctl-brand); box-shadow: 0 0 0 4px var(--ctl-brand-soft); }
.ctl-page .ctl-ff .ff-el-is-error .ff-el-form-control { border-color: #c2410c; }

.ctl-page .ctl-ff .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 100%;
	min-height: 46px;
	padding: 12px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--ctl-btn-gloss), var(--ctl-btn) !important;
	color: #fff !important;
	font: 600 0.95rem/1.2 var(--ctl-font);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
	white-space: nowrap;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 22px -8px var(--ctl-btn-glow);
	transition: transform 0.2s var(--ctl-ease), box-shadow 0.25s;
}

.ctl-page .ctl-ff .ff-btn-submit:hover { background: var(--ctl-btn-gloss), var(--ctl-btn-hover) !important; transform: translateY(-1px); }
.ctl-page .ctl-ff .ff-btn-submit::after { content: "→"; font-weight: 700; }
.ctl-page .ctl-ff .ff-btn-submit:disabled,
.ctl-page .ctl-ff .ff-working .ff-btn-submit { opacity: 0.65; cursor: progress; }

.ctl-ff .ff-el-turnstile { min-height: 0; }
.ctl-ff .error,
.ctl-ff .text-danger,
.ctl-ff .ff-errors-in-stack { margin: 6px 0 0 14px; color: #c2410c; font-size: 0.8rem; font-weight: 600; }
.ctl-ff .ff-errors-in-stack:empty { display: none; }

.ctl-ff__note { margin: 0; color: var(--ctl-muted); font-size: 0.8rem; }
.ctl-ff:has(.ff-message-success) .ctl-ff__note { display: none; }

.ctl-ff .ff-message-success {
	margin: 0;
	padding: 12px 14px;
	border: 0;
	border-radius: 14px;
	background: color-mix(in srgb, var(--ctl-green) 12%, transparent);
	box-shadow: none;
	color: var(--ctl-green);
	animation: ctl-pop 0.4s var(--ctl-spring);
}

.ctl-ff .ff-message-success p { margin: 0; font-size: 0.92rem; font-weight: 600; }

/* 13. Pricing ---------------------------------------------------------------------------------- */

.ctl-pricing { display: grid; gap: 28px; }
.ctl-pricing > * { margin: 0; }

.ctl-ptabs {
	position: relative;
	display: inline-flex;
	justify-self: center;
	gap: 2px;
	padding: 4px;
	border: 1px solid var(--ctl-line);
	border-radius: 999px;
	background: var(--ctl-surface);
	box-shadow: var(--ctl-shadow-sm);
}

.ctl-ptabs__tab {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px 9px 9px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--ctl-ink-2);
	font: 600 0.95rem/1.2 var(--ctl-font);
	cursor: pointer;
	transition: color 0.25s;
}

.ctl-ptabs__tab small { color: var(--ctl-muted); font-size: 0.78rem; font-weight: 500; transition: color 0.25s; }
.ctl-ptabs__tab[aria-selected="true"] { color: #fff; }
.ctl-ptabs__tab[aria-selected="true"] small { color: rgba(255, 255, 255, 0.75); }
.ctl-ptabs__tab .ctl-mark { width: 24px; height: 24px; }
.ctl-ptabs__combo { display: inline-flex; }
.ctl-ptabs__combo .ctl-mark { width: 22px; height: 22px; box-shadow: 0 0 0 2px var(--ctl-surface); }
.ctl-ptabs__combo .ctl-mark + .ctl-mark { margin-inline-start: -7px; }

.ctl-ptabs__soon {
	padding: 1px 7px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ctl-amber) 16%, transparent);
	color: var(--ctl-amber);
	font-size: 0.68rem;
	font-weight: 700;
	transition: background 0.25s, color 0.25s;
}

.ctl-ptabs__tab[aria-selected="true"] .ctl-ptabs__soon { background: rgba(255, 255, 255, 0.2); color: #fff; }

.ctl-ptabs__thumb {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: 0;
	border-radius: 999px;
	background: var(--ctl-ink);
	transition: transform 0.45s var(--ctl-spring), width 0.45s var(--ctl-ease);
}

.ctl-pricing__panel { display: grid; gap: 22px; animation: ctl-fade-up 0.4s var(--ctl-ease); }
.ctl-pricing__panel[hidden] { display: none; }

.ctl-pricing__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; }

.ctl-billing { display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--ctl-bg-2); }

.ctl-billing button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: var(--ctl-muted);
	font: 600 0.9rem/1.2 var(--ctl-font);
	cursor: pointer;
	transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.ctl-billing [aria-checked="true"] { background: var(--ctl-surface); color: var(--ctl-ink); box-shadow: 0 1px 3px rgba(15, 31, 29, 0.12); }

.ctl-billing__badge {
	padding: 1px 7px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ctl-green) 14%, transparent);
	color: var(--ctl-green);
	font-size: 0.68rem;
	font-weight: 700;
}

.ctl-pricing__note { margin: 0; color: var(--ctl-muted); font-size: 0.86rem; }
.ctl-pricing__note span { display: inline-flex; align-items: center; gap: 6px; }
.ctl-pricing__note span[hidden] { display: none; }
.ctl-pricing__note .ctl-icon { color: var(--ctl-brand); width: 1em; height: 1em; }

.ctl-pricing__grid {
	display: grid;
	grid-template-columns: repeat(var(--ctl-cols, 3), minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}

.ctl-pricing__panel[data-panel="shopify"] .ctl-pricing__grid { max-width: 820px; width: 100%; margin-inline: auto; }

.ctl-pcard-price {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px 24px 24px;
	border: 1px solid var(--ctl-line);
	border-radius: var(--ctl-radius-lg);
	background: var(--ctl-surface);
	transition: transform 0.35s var(--ctl-ease), box-shadow 0.35s;
}

.ctl-pcard-price:hover { transform: translateY(-3px); box-shadow: var(--ctl-shadow); }

.ctl-pcard-price.is-featured {
	border: 2px solid var(--ctl-btn);
	box-shadow: var(--ctl-shadow);
	background: linear-gradient(180deg, color-mix(in srgb, var(--ctl-brand-soft) 60%, var(--ctl-surface)), var(--ctl-surface) 40%);
}

.ctl-pcard-price.is-free { background: var(--ctl-bg); }

.ctl-pcard-price__flag {
	position: absolute;
	top: -12px;
	left: 50%;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--ctl-btn-gloss), var(--ctl-btn);
	color: #fff;
	font-size: 0.74rem;
	font-weight: 700;
	white-space: nowrap;
	transform: translateX(-50%);
	box-shadow: 0 6px 16px -6px var(--ctl-btn-glow);
}

.ctl-pcard-price__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ctl-pcard-price__name { margin: 0 !important; font-size: 1.15rem !important; }
.ctl-pcard-price__head .ctl-status { padding: 3px 9px; font-size: 0.7rem; }
.ctl-pcard-price__audience { margin: -6px 0 0; color: var(--ctl-muted); font-size: 0.88rem; }

.ctl-pcard-price__price p { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.ctl-pcard-price__price p[hidden] { display: none; }
.ctl-pcard-price__cta[hidden],
.ctl-notify[hidden] { display: none; }
.ctl-pcard-price__price b { font-weight: 700; font-size: 2.6rem; line-height: 1; letter-spacing: -0.03em; color: var(--ctl-ink); }
.ctl-pcard-price__price span { color: var(--ctl-muted); font-size: 0.92rem; }

.ctl-pcard-price__sites,
.ctl-pcard-price__trial {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 7px;
	margin: 0;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--ctl-bg-2);
	color: var(--ctl-ink-2);
	font-size: 0.82rem;
	font-weight: 600;
}

.ctl-pcard-price__trial { background: color-mix(in srgb, var(--ctl-green) 12%, transparent); color: var(--ctl-green); }
.ctl-pcard-price__sites .ctl-icon,
.ctl-pcard-price__trial .ctl-icon { width: 1em; height: 1em; }

.ctl-pcard-price .ctl-checks { flex: 1; align-content: start; gap: 9px; padding-top: 14px; border-top: 1px solid var(--ctl-line); font-size: 0.9rem; }
.ctl-pcard-price .ctl-checks li.is-lead { color: var(--ctl-ink); font-weight: 600; }
.ctl-checks--plus .ctl-icon { background: color-mix(in srgb, var(--ctl-brand) 12%, transparent); color: var(--ctl-brand); }
.ctl-pcard-price__cta { width: 100%; }

/* Comparison table (pricing page). */
.ctl-cmp { display: grid; gap: 14px; margin-top: 18px; }
.ctl-cmp__title { margin: 0 !important; text-align: center; font-size: 1.4rem !important; }
.ctl-cmp__scroll { overflow-x: auto; border: 1px solid var(--ctl-line); border-radius: var(--ctl-radius-lg); background: var(--ctl-surface); }
.ctl-cmp__table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.92rem; }
.ctl-cmp__table th,
.ctl-cmp__table td { padding: 13px 18px; border-bottom: 1px solid var(--ctl-line); text-align: center; }
.ctl-cmp__table tbody tr:last-child > * { border-bottom: 0; }
.ctl-cmp__table th[scope="row"],
.ctl-cmp__table thead th:first-child { text-align: left; font-weight: 500; color: var(--ctl-ink-2); }
.ctl-cmp__table thead th { background: var(--ctl-bg); color: var(--ctl-ink); font-weight: 700; }
.ctl-cmp__table thead th:last-child { color: var(--ctl-brand); }
.ctl-cmp__table tbody tr:hover > * { background: color-mix(in srgb, var(--ctl-brand-soft) 35%, transparent); }
.ctl-cmp__yes .ctl-icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: color-mix(in srgb, var(--ctl-green) 14%, transparent); color: var(--ctl-green); stroke-width: 3; vertical-align: middle; }
.ctl-cmp__no { color: var(--ctl-line-2); font-weight: 700; }

/* Launch pricing sign-up. */
.ctl-notify {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 24px;
	align-items: center;
	padding: 26px 28px;
	border: 1px dashed color-mix(in srgb, var(--ctl-btn) 45%, transparent);
	border-radius: var(--ctl-radius-lg);
	background: color-mix(in srgb, var(--ctl-brand-soft) 40%, var(--ctl-surface));
	scroll-margin-top: 110px;
}

.ctl-notify:target { animation: ctl-pop 0.5s var(--ctl-spring); }
.ctl-notify__copy { display: flex; gap: 16px; align-items: flex-start; }
.ctl-notify__copy p { margin: 4px 0 0; color: var(--ctl-ink-2); font-size: 0.94rem; }
.ctl-notify__copy p[hidden],
.ctl-notify__form[hidden] { display: none; }
.ctl-notify__title { margin: 0 !important; font-size: 1.2rem !important; }

.ctl-pricing__more { text-align: center; }
.ctl-pricing__more a { display: inline-flex; align-items: center; gap: 6px; color: var(--ctl-brand); font-weight: 600; text-decoration: none; }
.ctl-pricing__more a .ctl-icon { transition: transform 0.25s var(--ctl-ease); }
.ctl-pricing__more a:hover .ctl-icon { transform: translateX(3px); }

@media (max-width: 1100px) {
	.ctl-pricing__panel[data-panel="woocommerce"] .ctl-pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.ctl-pricing__grid,
	.ctl-pricing__panel[data-panel="woocommerce"] .ctl-pricing__grid { grid-template-columns: 1fr; }
	.ctl-pcard-price.is-featured { order: -1; }
	.ctl-notify { grid-template-columns: 1fr; padding: 22px; }
}

@media (max-width: 560px) {
	.ctl-ptabs { justify-self: stretch; }
	.ctl-ptabs__tab { flex: 1; justify-content: center; padding-inline: 8px; font-size: 0.86rem; gap: 6px; }
	.ctl-ptabs__tab small,
	.ctl-ptabs__tab > .ctl-mark,
	.ctl-ptabs__combo { display: none; }
}

/* 14. Stats ---------------------------------------------------------------------------------- */

.ctl-stats__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; }

.ctl-stat {
	padding: 26px;
	border: 1px solid var(--ctl-dark-line);
	border-radius: 20px;
	background: var(--ctl-dark-2);
}

.ctl-stat__value { margin: 0; color: var(--ctl-brand-2); font-weight: 700; font-size: 3.2rem; line-height: 1; letter-spacing: -0.03em; }
.ctl-stat__value small { color: #fff; font-size: 1.05rem; letter-spacing: -0.01em; }
.ctl-stat__text { margin: 12px 0 0; color: var(--ctl-dark-muted); font-size: 0.92rem; }

/* 15. FAQ & CTA ------------------------------------------------------------------------------ */

.ctl-faq { display: grid; gap: 10px; max-width: 820px !important; }
.ctl-faq > * { margin: 0 !important; }

.ctl-faq .wp-block-details {
	padding: 0 22px;
	border: 1px solid var(--ctl-line);
	border-radius: 16px;
	background: var(--ctl-surface);
	transition: border-color 0.25s, box-shadow 0.25s;
}

.ctl-faq .wp-block-details[open] { border-color: var(--ctl-brand); box-shadow: var(--ctl-shadow-sm); }

.ctl-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
	font-weight: 600;
	font-size: 1.02rem;
	list-style: none;
	cursor: pointer;
}

.ctl-faq summary::-webkit-details-marker { display: none; }

.ctl-faq summary::after {
	content: "";
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ctl-brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7f74' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat;
	transition: transform 0.3s var(--ctl-spring);
}

.ctl-faq [open] summary::after { transform: rotate(45deg); }
.ctl-faq .wp-block-details > :not(summary) { margin: 0 0 18px; color: var(--ctl-ink-2); }

.ctl-cta {
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}

.ctl-cta::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -320px;
	width: 1000px;
	height: 560px;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--ctl-brand-2) 32%, transparent), transparent);
	transform: translateX(-50%);
	z-index: -1;
}

.ctl-cta > * { max-width: 760px !important; }
.ctl-cta h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.ctl-cta .wp-block-buttons { justify-content: center; gap: 10px; margin-top: 28px; }

/* 15b. Legal pages ---------------------------------------------------------------------------- */

.ctl-hero--legal { padding-block: clamp(40px, 6vw, 72px) clamp(32px, 4vw, 48px); }
.ctl-hero--legal .ctl-head { margin-block-end: 0 !important; }
.ctl-hero--legal h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
.ctl-legal__updated { color: var(--ctl-muted); font-size: 0.86rem !important; }

.ctl-legal-section { padding-block-start: 8px; background: var(--ctl-surface); border-top: 1px solid var(--ctl-line); }

.ctl-legal-wrap {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: clamp(32px, 6vw, 80px);
	align-items: start;
	max-width: 1080px !important;
	padding-top: clamp(32px, 5vw, 56px);
}

.ctl-legal-wrap > * { margin: 0 !important; }

.ctl-toc { position: sticky; top: 110px; }
.ctl-toc__title { margin: 0 0 10px !important; color: var(--ctl-muted); font-size: 0.74rem !important; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ctl-toc__list { display: grid; gap: 2px; margin: 0; padding: 0; border-left: 2px solid var(--ctl-line); list-style: none; }
.ctl-toc__list li { margin: 0; }

.ctl-toc__list a {
	display: block;
	margin-left: -2px;
	padding: 6px 12px;
	border-left: 2px solid transparent;
	color: var(--ctl-ink-2);
	font-size: 0.9rem;
	text-decoration: none;
	transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.ctl-toc__list a:hover { color: var(--ctl-ink); }
.ctl-toc__list a.is-active { border-left-color: var(--ctl-btn); color: var(--ctl-brand); font-weight: 600; background: linear-gradient(90deg, var(--ctl-brand-soft), transparent); }

.ctl-legal { max-width: 720px; color: var(--ctl-ink-2); font-size: 1.02rem; line-height: 1.75; }
.ctl-legal > * { margin-block: 0 !important; }
.ctl-legal > * + * { margin-block-start: 16px !important; }
.ctl-legal h2 { margin-block-start: 48px !important; padding-top: 4px; font-size: clamp(1.4rem, 2.4vw, 1.75rem) !important; scroll-margin-top: 110px; }
.ctl-legal > h2:first-child { margin-block-start: 0 !important; }
.ctl-legal h3 { margin-block-start: 28px !important; font-size: 1.08rem !important; color: var(--ctl-ink); }
.ctl-legal strong { color: var(--ctl-ink); font-weight: 700; }
.ctl-legal a { color: var(--ctl-brand); text-decoration: underline; text-underline-offset: 3px; }

.ctl-legal ul { display: grid; gap: 10px; padding: 0; list-style: none; }
.ctl-legal ul li { position: relative; padding-left: 26px; }
.ctl-legal ul li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 8px; height: 8px; border-radius: 50%; background: var(--ctl-brand-2); box-shadow: 0 0 0 4px var(--ctl-brand-soft); }

.ctl-legal__note {
	padding: 14px 16px 14px 44px;
	border: 1px solid color-mix(in srgb, var(--ctl-amber) 35%, transparent);
	border-radius: 14px;
	background: color-mix(in srgb, var(--ctl-amber) 8%, var(--ctl-surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5740f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") 16px 16px / 18px no-repeat;
	color: var(--ctl-ink-2);
	font-size: 0.9rem !important;
	line-height: 1.6;
}

@media (max-width: 860px) {
	.ctl-legal-wrap { grid-template-columns: 1fr; }
	.ctl-toc { position: static; padding: 16px; border: 1px solid var(--ctl-line); border-radius: 16px; background: var(--ctl-bg); }
	.ctl-toc__list { grid-template-columns: 1fr 1fr; border-left: 0; }
	.ctl-toc__list a { margin-left: 0; padding: 5px 0; border-left: 0; }
	.ctl-toc__list a.is-active { background: none; }
}

/* 16. Footer --------------------------------------------------------------------------------- */

.ctl-footer {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(64px, 8vw, 96px) var(--ctl-gutter) 24px;
	background: var(--ctl-dark);
	color: var(--ctl-dark-muted);
}

/* A soft teal glow and a hairline at the top edge. */
.ctl-footer::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -380px;
	width: 1100px;
	height: 640px;
	background: radial-gradient(closest-side, rgba(53, 189, 180, 0.16), transparent);
	transform: translateX(-50%);
	z-index: -1;
	pointer-events: none;
}

.ctl-footer::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(53, 189, 180, 0.5), transparent);
}

.ctl-footer__inner {
	display: grid;
	grid-template-columns: minmax(260px, 1fr) 2fr;
	gap: clamp(32px, 6vw, 96px);
	max-width: var(--ctl-max);
	margin: 0 auto;
}

.ctl-footer__pitch { max-width: 320px; margin: 16px 0 22px; color: var(--ctl-dark-ink); font-size: 1rem; line-height: 1.5; opacity: 0.85; }

.ctl-footer__platforms { display: grid; gap: 8px; max-width: 320px; margin: 0; padding: 0; list-style: none; }

.ctl-footer__platforms a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--ctl-dark-line);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.02);
	color: var(--ctl-dark-ink);
	text-decoration: none;
	transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ctl-ease);
}

.ctl-footer__platforms a:hover { border-color: rgba(53, 189, 180, 0.45); background: rgba(53, 189, 180, 0.06); transform: translateX(3px); }
.ctl-footer__platforms .ctl-mark { width: 30px; height: 30px; border-radius: 9px; }
.ctl-footer__platforms a > span:nth-child(2) { display: grid; margin-inline-end: auto; line-height: 1.25; }
.ctl-footer__platforms b { font-size: 0.92rem; }
.ctl-footer__platforms small { color: var(--ctl-dark-muted); font-size: 0.76rem; }
.ctl-footer .ctl-status--soon { background: rgba(240, 180, 80, 0.14); color: #f0b450; }
.ctl-footer .ctl-status--live { background: rgba(53, 189, 180, 0.14); color: var(--ctl-brand-2); }

.ctl-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

.ctl-footer__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	color: #fff;
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ctl-footer__title .ctl-mark { width: 20px; height: 20px; border-radius: 6px; font-size: 0.66rem; letter-spacing: 0; }
.ctl-footer__col ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }

.ctl-footer__col a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--ctl-dark-muted);
	font-size: 0.94rem;
	text-decoration: none;
	transition: color 0.2s;
}

.ctl-footer__col a:hover { color: #fff; }

/* No underline on hover anywhere in the footer (the theme underlines footer links). */
.ctl-footer a,
.ctl-footer a:hover,
.ctl-footer a:focus { text-decoration: none; }
.ctl-footer__col .ctl-icon { width: 0.85em; height: 0.85em; opacity: 0.6; }

.ctl-footer__facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 24px;
	max-width: var(--ctl-max);
	margin: clamp(40px, 5vw, 56px) auto 0;
	padding: 18px 0;
	border-block: 1px solid var(--ctl-dark-line);
	list-style: none;
	font-size: 0.86rem;
}

.ctl-footer__facts li { display: inline-flex; align-items: center; gap: 8px; }
.ctl-footer__facts .ctl-icon { color: var(--ctl-brand-2); }

.ctl-footer__wordmark {
	max-width: var(--ctl-max);
	margin: clamp(24px, 4vw, 40px) auto 0;
	font-weight: 700;
	font-size: clamp(4.5rem, 19vw, 15.5rem);
	line-height: 0.8;
	letter-spacing: -0.06em;
	text-align: center;
	white-space: nowrap;
	color: transparent;
	background: linear-gradient(180deg, rgba(53, 189, 180, 0.32), rgba(53, 189, 180, 0) 88%);
	-webkit-background-clip: text;
	background-clip: text;
	user-select: none;
	pointer-events: none;
}

.ctl-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 14px 24px;
	max-width: var(--ctl-max);
	margin: 8px auto 0;
	padding-top: 20px;
	border-top: 1px solid var(--ctl-dark-line);
	font-size: 0.8rem;
}

.ctl-footer__bottom p { max-width: 760px; margin: 0; }

.ctl-footer__top {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ctl-dark-ink);
	font-weight: 600;
	text-decoration: none;
}

.ctl-footer__top-icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--ctl-dark-line);
	border-radius: 50%;
	transition: background 0.25s, border-color 0.25s, transform 0.3s var(--ctl-spring);
}

.ctl-footer__top .ctl-icon { rotate: -90deg; }
.ctl-footer__top:hover .ctl-footer__top-icon { background: var(--ctl-btn); border-color: var(--ctl-btn); color: #fff; transform: translateY(-3px); }

@media (max-width: 1100px) {
	.ctl-header__link { font-size: 0; gap: 0; padding: 6px; }
	.ctl-footer__inner { grid-template-columns: 1fr 1.6fr; }
	.ctl-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}

@media (max-width: 760px) {
	.ctl-footer__inner { grid-template-columns: 1fr; }
	.ctl-footer__pitch,
	.ctl-footer__platforms { max-width: none; }
	.ctl-footer__facts { justify-content: flex-start; flex-direction: column; }
	.ctl-footer__bottom { flex-direction: column-reverse; align-items: flex-start; }
}

/* 17. Motion --------------------------------------------------------------------------------- */

.ctl-js .ctl-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ctl-ease), transform 0.7s var(--ctl-ease); }
.ctl-js .ctl-reveal.is-in { opacity: 1; transform: none; }

@keyframes ctl-fade { from { opacity: 0; } }
@keyframes ctl-fade-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes ctl-pop { from { opacity: 0; transform: scale(0.94) translateY(8px); } }
@keyframes ctl-blink { 50% { opacity: 0.25; } }
@keyframes ctl-underline { from { transform: scaleX(0); } }
@keyframes ctl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ctl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ctl-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(20, 165, 150, 0); } 50% { box-shadow: 0 0 0 7px rgba(20, 165, 150, 0.3); } }
@keyframes ctl-ring { from { transform: scale(0.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
@keyframes ctl-marquee { to { transform: translateX(-100%); } }
@keyframes ctl-progress { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
	.ctl-page *,
	.ctl-page *::before,
	.ctl-page *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
	.ctl-js .ctl-reveal { opacity: 1; transform: none; }
	.ctl-ticker__rows { overflow-x: auto; }
	html:has(.ctl-page) { scroll-behavior: auto; }
}

html:has(body.ctl-page) { scroll-behavior: smooth; }

/* 18. Small screens -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.ctl-demo__float--a { left: -12px; top: -30px; }
	.ctl-demo__float--b { right: -10px; bottom: 4px; }
}

@media (max-width: 960px) {
	.ctl-nav,
	.ctl-header__link { display: none; }
	.ctl-burger { display: grid; }
	.ctl-header__bar { justify-content: space-between; }
	.ctl-hero__grid { flex-wrap: wrap !important; }
	.ctl-hero__grid > .wp-block-column { flex-basis: 100% !important; }
	.ctl-steps,
	.ctl-recipient { grid-template-columns: 1fr; }
	.ctl-phone { transform: none; }
	.ctl-bento { grid-template-columns: 1fr 1fr; }
	.ctl-tile--share,
	.ctl-tile--dev { grid-column: span 2; flex-direction: column; align-items: stretch; }
	.ctl-tile--saved,
	.ctl-tile--links,
	.ctl-tile--stock,
	.ctl-tile--analytics { grid-column: span 1; }
	.ctl-stats__list { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 782px) {
	.admin-bar .ctl-masthead { top: calc(46px - var(--ctl-announce-h, 0px)); }
}

/* Below 600px the admin bar scrolls away with the page. */
@media (max-width: 600px) {
	.admin-bar .ctl-masthead { top: calc(-1 * var(--ctl-announce-h, 0px)); }
}

@media (max-width: 700px) {
	body.ctl-page { font-size: 16px; }
	.ctl-header { padding-inline: 10px; }
	.ctl-header__cta span { display: none; }
	.ctl-header__cta { padding: 10px; }
	.ctl-announce { padding-inline: 14px 44px; font-size: 0.82rem; }
	.ctl-hero-actions__buttons .ctl-btn { flex: 1 1 100%; }
	.ctl-demo__float { display: none; }
	.ctl-bento,
	.ctl-platforms { grid-template-columns: 1fr; }
	.ctl-tile--share,
	.ctl-tile--dev,
	.ctl-tile--saved,
	.ctl-tile--links,
	.ctl-tile--stock,
	.ctl-tile--analytics { grid-column: auto; }
	.ctl-tile { padding: 22px; }
	.ctl-share-preview { grid-template-columns: 1fr; }
	.ctl-share-preview__qr { grid-template-columns: auto 1fr; justify-items: start; align-items: center; }
	.ctl-stats__list { grid-template-columns: 1fr; }
	.ctl-ticker { grid-template-columns: 1fr; gap: 14px; padding-inline: 0; }
	.ctl-ticker__head { padding-inline: var(--ctl-gutter); }
	.ctl-ff .frm-fluent-form fieldset { grid-template-columns: 1fr; }
	.ctl-ff fieldset > .ff_submit_btn_wrapper { grid-column: 1; grid-row: auto; }
	.ctl-page .ctl-ff .ff-btn-submit { width: 100%; }
	.ctl-preview__foot { flex-direction: column; align-items: stretch; }
	.ctl-preview__btns .ctl-btn { flex: 1; }
	.ctl-channels { grid-template-columns: repeat(2, 1fr); }
	.ctl-qr { flex-direction: column; text-align: center; }
	.ctl-phone__screen { min-height: 470px; }
}

/* Buttons on dark surfaces. */
.ctl-section--dark .ctl-btn { --ctl-btn-glow: rgba(53, 189, 180, 0.35); }