/**
 * CreativeFlowTools Widgets — component stylesheet.
 *
 * This sheet owns every style the Elementor widgets need. The CreativeFlowTools
 * theme provides the same design tokens, so under that theme the fallbacks below
 * are simply redundant; under any other theme they keep the widgets correct.
 *
 * Fallback rules use :where() so they carry zero specificity and never fight a
 * theme rule or an Elementor style control.
 */

/* ------------------------------------------------------------------
   0. Token fallbacks
   ------------------------------------------------------------------ */

:root {
	--cft-background: #1e1e1e;
	--cft-surface: #2b2b2b;
	--cft-surface-2: #333333;
	--cft-card: #2a2a2a;
	--cft-foreground: #ededed;
	--cft-muted: #8c8c8c;
	--cft-muted-soft: #a3a3a3;
	--cft-primary: #3a8dff;
	--cft-primary-glow: #5ba8ff;
	--cft-primary-soft: #60a5fa;
	--cft-brand-orange: #f5792a;

	--cft-border: rgba(255, 255, 255, 0.1);
	--cft-border-soft: rgba(255, 255, 255, 0.06);

	--cft-font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--cft-font-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--cft-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

	--cft-radius-sm: 4px;
	--cft-radius-md: 6px;
	--cft-radius-lg: 8px;
	--cft-radius-full: 9999px;

	--cft-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------------
   0b. Primitive fallbacks (buttons, badges, eyebrow)
   ------------------------------------------------------------------ */

:where(.cft-btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	padding: 10px 24px;
	border-radius: var(--cft-radius-md);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s var(--cft-ease), border-color 0.2s var(--cft-ease), color 0.2s var(--cft-ease);
}

:where(.cft-btn--primary) {
	background-color: var(--cft-primary);
	color: var(--cft-foreground);
}

:where(.cft-btn--primary:hover) {
	background-color: var(--cft-primary-glow);
	color: var(--cft-foreground);
}

:where(.cft-btn--ghost) {
	background-color: transparent;
	border-color: var(--cft-border);
	color: var(--cft-foreground);
}

:where(.cft-btn--ghost:hover) {
	background-color: var(--cft-card);
	border-color: var(--cft-muted-soft);
}

:where(.cft-btn--sm) {
	padding: 6px 20px;
}

:where(.cft-btn__icon) {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

:where(.cft-link-arrow) {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cft-primary);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	text-decoration: none;
}

:where(.cft-link-arrow) svg {
	width: 16px;
	height: 16px;
}

:where(.cft-badge) {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 2px 10px;
	border-radius: var(--cft-radius-sm);
	border: 1px solid var(--cft-border);
	color: var(--cft-muted);
	background-color: var(--cft-card);
	line-height: 1.6;
}

:where(.cft-badge--primary) {
	background-color: rgba(59, 130, 246, 0.1);
	border-color: rgba(59, 130, 246, 0.2);
	color: #3b82f6;
}

:where(.cft-badge--plain) {
	letter-spacing: normal;
	font-weight: 500;
}

:where(.cft-eyebrow) {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cft-primary);
}

.cft-widget-placeholder {
	border: 1px dashed var(--cft-border);
	border-radius: var(--cft-radius-lg);
	padding: 32px;
	text-align: center;
	color: var(--cft-muted);
	font-size: 14px;
}

.cft-notice-success {
	background-color: rgba(58, 141, 255, 0.1);
	border: 1px solid rgba(58, 141, 255, 0.3);
	border-radius: var(--cft-radius-lg);
	padding: 12px;
	font-size: 12px;
	color: var(--cft-primary-soft);
	display: flex;
	align-items: center;
	gap: 8px;
}

.cft-notice-success svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--cft-primary);
}

.cft-br-sm {
	display: none;
}

@media (min-width: 640px) {
	.cft-br-sm {
		display: block;
	}
}

/* ------------------------------------------------------------------
   1. Hero slider
   ------------------------------------------------------------------ */

.cft-hero {
	position: relative;
	width: 100%;
	height: 600px;
	overflow: hidden;
	background-color: var(--cft-background);
}

.cft-hero__slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.cft-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s var(--cft-ease);
}

.cft-hero__slide.is-active {
	opacity: 1;
}

.cft-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.4) contrast(1.25);
}

.cft-hero__scrim {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(30, 30, 30, 0.3) 0%, rgba(30, 30, 30, 0.9) 100%);
	z-index: 1;
}

.cft-hero__content {
	position: relative;
	z-index: 10;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-inline: 16px;
}

.cft-hero__mark {
	margin-bottom: 24px;
	color: var(--cft-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cft-hero__mark svg {
	width: 56px;
	height: 56px;
}

.cft-hero__mark img {
	max-height: 72px;
	width: auto;
}

.cft-hero__title {
	font-family: var(--cft-font-display);
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	max-width: 80rem;
	margin: 0 auto 16px;
	color: var(--cft-foreground);
}

.cft-hero__title .cft-hero__accent {
	color: var(--cft-primary);
}

.cft-hero__subtitle {
	font-size: 16px;
	color: var(--cft-muted-soft);
	max-width: 42rem;
	margin: 0 auto 40px;
	font-weight: 500;
	line-height: 1.6;
}

.cft-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.cft-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	width: 48px;
	height: 48px;
	border-radius: var(--cft-radius-full);
	background-color: rgba(30, 30, 30, 0.8);
	border: 1px solid var(--cft-border);
	color: var(--cft-foreground);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s var(--cft-ease);
}

.cft-hero__arrow:hover {
	background-color: var(--cft-card);
}

.cft-hero__arrow svg {
	width: 20px;
	height: 20px;
}

.cft-hero__arrow--prev {
	left: 16px;
}

.cft-hero__arrow--next {
	right: 16px;
}

.cft-hero__dots {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 20;
}

.cft-hero__dot {
	height: 6px;
	width: 12px;
	border: 0;
	padding: 0;
	border-radius: var(--cft-radius-full);
	background-color: var(--cft-surface-2);
	cursor: pointer;
	transition: width 0.3s var(--cft-ease), background-color 0.3s var(--cft-ease);
}

.cft-hero__dot:hover {
	background-color: var(--cft-muted-soft);
}

.cft-hero__dot.is-active {
	width: 32px;
	background-color: var(--cft-primary);
}

@media (min-width: 640px) {
	.cft-hero {
		height: 700px;
	}

	.cft-hero__title {
		font-size: 48px;
	}

	.cft-hero__subtitle {
		font-size: 18px;
	}
}

@media (min-width: 1024px) {
	.cft-hero {
		height: 800px;
	}

	.cft-hero__title {
		font-size: 60px;
	}
}

/* ------------------------------------------------------------------
   2. Add-on cards
   ------------------------------------------------------------------ */

.cft-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 32px;
}

.cft-section-head__title {
	font-family: var(--cft-font-display);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
}

.cft-addons {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: flex-start;
}

.cft-addon-card {
	width: 100%;
	background-color: var(--cft-card);
	border: 1px solid var(--cft-border);
	border-radius: var(--cft-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.2s var(--cft-ease);
}

.cft-addon-card--available:hover {
	border-color: rgba(58, 141, 255, 0.4);
}

.cft-addon-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	background-color: rgba(0, 0, 0, 0.6);
	overflow: hidden;
	flex-shrink: 0;
}

.cft-addon-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.9;
	transition: transform 0.5s var(--cft-ease);
}

.cft-addon-card--available .cft-addon-card__media {
	cursor: pointer;
}

.cft-addon-card--available:hover .cft-addon-card__media img {
	transform: scale(1.03);
}

.cft-addon-card--soon .cft-addon-card__media img {
	filter: grayscale(1) contrast(1.25);
	opacity: 0.6;
}

.cft-addon-card__flag {
	position: absolute;
	top: 12px;
	left: 12px;
	background-color: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(2px);
	color: var(--cft-muted);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: var(--cft-radius-sm);
	border: 1px solid var(--cft-border);
}

.cft-addon-card__body {
	padding: 24px;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
}

.cft-addon-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.cft-addon-card__title {
	font-family: var(--cft-font-display);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 10px;
}

.cft-addon-card__title a {
	color: inherit;
}

.cft-addon-card__title a:hover {
	color: var(--cft-primary);
}

.cft-addon-card__excerpt {
	font-size: 14px;
	color: var(--cft-muted);
	line-height: 1.7;
	margin: 0;
}

.cft-addon-card__foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-top: 16px;
	border-top: 1px solid var(--cft-border-soft);
}

.cft-addon-card__form-wrap {
	padding-top: 8px;
}

@media (min-width: 640px) {
	.cft-addons {
		flex-direction: row;
	}

	.cft-addon-card {
		width: var(--cft-card-width, 288px);
	}

	.cft-section-head__title {
		font-size: 36px;
	}
}

/* ------------------------------------------------------------------
   3. Feature highlights
   ------------------------------------------------------------------ */

.cft-features {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	padding-top: 64px;
	margin-top: 32px;
	border-top: 1px solid var(--cft-border-soft);
}

.cft-features--flush {
	padding-top: 0;
	margin-top: 0;
	border-top: 0;
}

.cft-feature {
	background-color: var(--cft-card);
	border: 1px solid var(--cft-border);
	border-radius: var(--cft-radius-lg);
	padding: 20px;
}

.cft-feature__icon {
	color: var(--cft-primary);
	margin-bottom: 10px;
	display: block;
}

.cft-feature__icon svg {
	width: 20px;
	height: 20px;
}

.cft-feature__title {
	font-family: var(--cft-font-display);
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 10px;
}

.cft-feature__text {
	font-size: 12px;
	color: var(--cft-muted);
	line-height: 1.7;
	margin: 0;
}

@media (min-width: 768px) {
	.cft-features {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cft-features--cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cft-features--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cft-features--cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------
   4. Compatibility card
   ------------------------------------------------------------------ */

.cft-compat {
	background-color: var(--cft-card);
	border: 1px solid var(--cft-border);
	border-radius: var(--cft-radius-lg);
	padding: 32px;
}

.cft-compat__title {
	font-family: var(--cft-font-display);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 24px 0;
}

.cft-compat__text {
	font-size: 14px;
	color: var(--cft-muted);
	line-height: 1.7;
	margin: 0 0 24px;
}

.cft-compat__specs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--cft-border);
}

.cft-compat__spec-label {
	display: block;
	font-family: var(--cft-font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--cft-muted);
	margin-bottom: 4px;
}

.cft-compat__spec-value {
	font-family: var(--cft-font-mono);
	font-size: 14px;
	font-weight: 600;
	color: var(--cft-foreground);
}

@media (min-width: 640px) {
	.cft-compat {
		padding: 40px;
	}

	.cft-compat__title {
		font-size: 36px;
	}

	.cft-compat__specs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------
   5. FAQ accordion
   ------------------------------------------------------------------ */

.cft-faq__head {
	margin-bottom: 32px;
}

.cft-faq__title {
	font-family: var(--cft-font-display);
	font-size: 30px;
	font-weight: 700;
	margin: 0 0 8px;
}

.cft-faq__intro {
	font-size: 14px;
	color: var(--cft-muted);
	margin: 0;
}

.cft-faq__list {
	border-top: 1px solid var(--cft-border);
	border-bottom: 1px solid var(--cft-border);
}

.cft-faq__item {
	padding-block: 16px;
	border-bottom: 1px solid rgba(51, 51, 51, 0.8);
}

.cft-faq__item:last-child {
	border-bottom: 0;
}

.cft-faq__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	text-align: left;
	padding: 4px 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--cft-foreground);
	cursor: pointer;
	transition: color 0.2s var(--cft-ease);
}

.cft-faq__trigger:hover {
	color: var(--cft-primary);
}

.cft-faq__chevron {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--cft-muted);
	transition: transform 0.2s var(--cft-ease), color 0.2s var(--cft-ease);
}

.cft-faq__trigger[aria-expanded="true"] .cft-faq__chevron {
	transform: rotate(180deg);
	color: var(--cft-primary);
}

.cft-faq__panel {
	display: none;
	padding: 12px 0 4px;
	font-size: 14px;
	color: var(--cft-muted);
	line-height: 1.7;
	animation: cft-fade-in 0.2s var(--cft-ease);
}

.cft-faq__panel.is-open {
	display: block;
}

@keyframes cft-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (min-width: 640px) {
	.cft-faq__title {
		font-size: 36px;
	}
}

/* ------------------------------------------------------------------
   6. CTA panel
   ------------------------------------------------------------------ */

.cft-cta {
	background-color: var(--cft-card);
	border: 1px solid var(--cft-border);
	border-radius: var(--cft-radius-lg);
	padding: 32px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}

.cft-cta__copy {
	max-width: 24rem;
}

.cft-cta__title {
	font-family: var(--cft-font-display);
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 4px;
}

.cft-cta__text {
	font-size: 12px;
	color: var(--cft-muted);
	margin: 0;
}

.cft-cta__form-wrap {
	width: 100%;
	max-width: 28rem;
	flex: 1 1 auto;
}

.cft-cta__fineprint {
	font-size: 10px;
	color: var(--cft-muted);
	margin: 8px 0 0;
}

.cft-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

@media (min-width: 768px) {
	.cft-cta {
		flex-direction: row;
		align-items: center;
	}

	.cft-cta__form-wrap {
		width: auto;
	}
}

/* ------------------------------------------------------------------
   7. Small-screen corrections
   cft-hero__arrow-hide
   ------------------------------------------------------------------ */

/* On phones the side arrows sit on top of the subtitle. The dots still
   provide navigation, so the arrows are hidden rather than shrunk. */
@media (max-width: 639px) {
	.cft-hero__arrow {
		display: none;
	}

	.cft-hero__content {
		padding-inline: 24px;
	}

	.cft-hero__dots {
		bottom: 24px;
	}
}

/* ==================================================================
   8. Documentation — sidebar + article viewer
   ================================================================== */

.cft-docs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

.cft-docs__aside {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.cft-docs__eyebrow {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cft-primary);
	margin-bottom: 4px;
}

.cft-docs__title {
	font-family: var(--cft-font-display);
	font-size: 20px;
	font-weight: 700;
	color: var(--cft-foreground);
	margin: 0;
}

.cft-docs__groups {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cft-docs__group-title {
	font-family: var(--cft-font-sans);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--cft-muted);
	margin: 0 0 8px;
}

.cft-docs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cft-docs__link {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	text-align: left;
	padding: 6px 10px;
	border-radius: var(--cft-radius-md);
	border: 1px solid transparent;
	background: none;
	font-family: inherit;
	font-size: 12px;
	color: var(--cft-muted);
	cursor: pointer;
	transition: background-color 0.2s var(--cft-ease), color 0.2s var(--cft-ease);
}

.cft-docs__link:hover {
	color: var(--cft-foreground);
	background-color: var(--cft-card);
}

.cft-docs__link svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	opacity: 0;
}

.cft-docs__link.is-active {
	background-color: var(--cft-surface);
	color: var(--cft-primary);
	font-weight: 600;
	border-color: var(--cft-border);
}

.cft-docs__link.is-active svg {
	opacity: 1;
}

.cft-docs__main {
	min-width: 0;
}

.cft-doc-article {
	display: none;
}

.cft-doc-article.is-active {
	display: block;
}

.cft-doc-article__head {
	padding-bottom: 24px;
	border-bottom: 1px solid var(--cft-border);
	margin-bottom: 32px;
}

.cft-doc-article__cat {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--cft-primary);
	margin-bottom: 16px;
}

.cft-doc-article__row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.cft-doc-article__title {
	font-family: var(--cft-font-display);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--cft-foreground);
	margin: 0;
}

.cft-doc-article__pdf {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--cft-card);
	border: 1px solid var(--cft-border);
	color: var(--cft-foreground);
	padding: 10px 16px;
	border-radius: var(--cft-radius-lg);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s var(--cft-ease);
}

.cft-doc-article__pdf:hover {
	background-color: var(--cft-surface);
	color: var(--cft-foreground);
}

.cft-doc-article__pdf svg {
	width: 16px;
	height: 16px;
	color: var(--cft-primary);
}

.cft-doc-article__summary {
	font-size: 16px;
	color: var(--cft-muted);
	line-height: 1.7;
	max-width: 42rem;
	margin: 16px 0 0;
}

.cft-doc-article__body {
	font-size: 14px;
	color: var(--cft-muted);
	line-height: 1.8;
}

.cft-doc-article__body h2,
.cft-doc-article__body h3 {
	font-family: var(--cft-font-display);
	font-size: 20px;
	font-weight: 700;
	color: var(--cft-foreground);
	margin: 32px 0 12px;
}

.cft-doc-article__body ul,
.cft-doc-article__body ol {
	padding-left: 20px;
	margin: 0 0 16px;
}

.cft-doc-article__body li {
	margin-bottom: 8px;
}

.cft-doc-article__body li::marker {
	color: var(--cft-primary);
	font-weight: 700;
}

.cft-doc-article__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	margin-bottom: 16px;
}

.cft-doc-article__body th,
.cft-doc-article__body td {
	border: 1px solid var(--cft-border);
	padding: 10px 12px;
	text-align: left;
}

.cft-doc-article__body th {
	background-color: var(--cft-surface);
	color: var(--cft-foreground);
}

/* Code block with a copy button, as in the original */
.cft-code {
	position: relative;
	background-color: #0d0d0f;
	border: 1px solid var(--cft-border);
	border-radius: var(--cft-radius-lg);
	overflow: hidden;
	margin: 16px 0;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.cft-code__bar {
	background-color: var(--cft-card);
	padding: 8px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--cft-border);
	font-size: 11px;
	color: var(--cft-muted);
}

.cft-code__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--cft-font-mono);
}

.cft-code__label svg {
	width: 14px;
	height: 14px;
	color: var(--cft-primary);
}

.cft-code__copy {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: 0;
	color: var(--cft-muted);
	font-family: inherit;
	font-size: 11px;
	cursor: pointer;
}

.cft-code__copy:hover {
	color: var(--cft-foreground);
}

.cft-code__copy svg {
	width: 12px;
	height: 12px;
}

.cft-code__copy.is-copied {
	color: #4ade80;
}

.cft-code pre {
	margin: 0;
	padding: 16px;
	background: none;
	border: 0;
	font-size: 12px;
	color: rgba(237, 237, 237, 0.9);
	overflow-x: auto;
}

@media (min-width: 768px) {
	.cft-docs {
		grid-template-columns: 3fr 9fr;
	}

	.cft-docs__aside {
		border-right: 1px solid var(--cft-border-soft);
		padding-right: 24px;
	}
}

@media (min-width: 640px) {
	.cft-doc-article__row {
		flex-direction: row;
	}

	.cft-doc-article__title {
		font-size: 36px;
	}
}

/* ==================================================================
   9. Product detail
   ================================================================== */

.cft-product {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: start;
}

.cft-product__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.cft-breadcrumbs {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--cft-muted);
}

.cft-breadcrumbs a {
	color: var(--cft-muted);
}

.cft-breadcrumbs a:hover {
	color: var(--cft-foreground);
}

.cft-breadcrumbs strong {
	color: var(--cft-foreground);
	font-weight: 500;
}

.cft-product__title-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.cft-product__title {
	font-family: var(--cft-font-display);
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--cft-foreground);
	margin: 0;
}

.cft-product__version {
	padding: 2px 8px;
	background-color: var(--cft-card);
	color: var(--cft-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	border: 1px solid var(--cft-border);
	border-radius: var(--cft-radius-sm);
}

.cft-product__tagline {
	font-size: 18px;
	font-weight: 500;
	color: var(--cft-primary);
	line-height: 1.6;
	margin: 0 0 24px;
}

.cft-product__desc {
	font-size: 16px;
	color: var(--cft-muted);
	line-height: 1.7;
	margin: 0;
}

/* Screenshots */

.cft-shots {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 16px;
}

.cft-shots__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.cft-shots__title {
	font-family: var(--cft-font-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--cft-foreground);
	margin: 0;
}

.cft-shots__nav {
	display: flex;
	gap: 8px;
}

.cft-shots__btn {
	width: 32px;
	height: 32px;
	border-radius: var(--cft-radius-full);
	background-color: var(--cft-card);
	border: 1px solid var(--cft-border);
	color: var(--cft-foreground);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s var(--cft-ease);
}

.cft-shots__btn:hover {
	background-color: var(--cft-surface-2);
}

.cft-shots__btn svg {
	width: 16px;
	height: 16px;
}

.cft-shots__viewport {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid var(--cft-border);
	aspect-ratio: 16 / 10;
	background-color: #000;
}

.cft-shots__track {
	display: flex;
	height: 100%;
	transition: transform 0.5s var(--cft-ease);
}

.cft-shots__slide {
	min-width: 100%;
	height: 100%;
	flex-shrink: 0;
	cursor: zoom-in;
}

.cft-shots__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cft-shots__thumbs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 8px;
	scrollbar-width: none;
}

.cft-shots__thumbs::-webkit-scrollbar {
	display: none;
}

.cft-shots__thumb {
	position: relative;
	width: 80px;
	height: 48px;
	flex-shrink: 0;
	border-radius: var(--cft-radius-md);
	overflow: hidden;
	border: 2px solid transparent;
	opacity: 0.6;
	padding: 0;
	background: none;
	cursor: pointer;
	transition: opacity 0.2s var(--cft-ease), border-color 0.2s var(--cft-ease);
}

.cft-shots__thumb:hover {
	opacity: 1;
}

.cft-shots__thumb.is-active {
	border-color: var(--cft-primary);
	opacity: 1;
}

.cft-shots__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Buy column */

.cft-product__aside {
	display: flex;
	flex-direction: column;
	gap: 24px;
	background-color: var(--cft-background);
	padding: 8px;
	border-radius: 12px;
}

.cft-buy__title {
	font-family: var(--cft-font-display);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--cft-foreground);
	margin: 0 0 8px;
}

.cft-buy__intro {
	font-size: 16px;
	color: var(--cft-muted);
	line-height: 1.7;
	margin: 0;
}

.cft-tiers {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cft-tier {
	position: relative;
	overflow: hidden;
	border-radius: var(--cft-radius-lg);
	padding: 12px;
	background-color: var(--cft-card);
	border: 1px solid var(--cft-border);
	cursor: pointer;
	transition: border-color 0.2s var(--cft-ease);
	display: block;
	width: 100%;
	text-align: left;
	font-family: inherit;
}

.cft-tier:hover {
	border-color: rgba(140, 140, 140, 0.5);
}

.cft-tier.is-selected {
	border: 2px solid var(--cft-primary);
	padding: 11px;
}

.cft-tier__ribbon {
	position: absolute;
	top: 16px;
	right: -48px;
	width: 160px;
	text-align: center;
	padding: 2px 0 2px 12px;
	background: linear-gradient(to right, #8b5cf6, #ec4899);
	color: var(--cft-foreground);
	font-size: 8px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	transform: rotate(45deg);
	z-index: 10;
	pointer-events: none;
}

.cft-tier__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	position: relative;
	z-index: 20;
}

.cft-tier--featured .cft-tier__top {
	padding-right: 56px;
}

.cft-tier__label {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.cft-tier__radio {
	width: 16px;
	height: 16px;
	border-radius: var(--cft-radius-full);
	flex-shrink: 0;
	border: 2px solid var(--cft-border);
	transition: all 0.2s var(--cft-ease);
}

.cft-tier.is-selected .cft-tier__radio {
	background-color: var(--cft-primary);
	border: 3px solid #242424;
	box-shadow: 0 0 0 1px var(--cft-primary);
}

.cft-tier__name {
	font-family: var(--cft-font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--cft-foreground);
	margin: 0;
}

.cft-tier__price {
	font-size: 16px;
	font-weight: 700;
	color: var(--cft-foreground);
	white-space: nowrap;
}

.cft-tier__desc {
	font-size: 12px;
	color: var(--cft-muted);
	line-height: 1.6;
	margin: 4px 0 0;
}

.cft-tier__more {
	padding-top: 8px;
	margin-top: 4px;
	border-top: 1px solid var(--cft-border-soft);
}

.cft-tier__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	font-size: 12px;
	color: var(--cft-muted);
	cursor: pointer;
	transition: color 0.2s var(--cft-ease);
}

.cft-tier__toggle:hover {
	color: var(--cft-foreground);
}

.cft-tier__toggle svg {
	width: 14px;
	height: 14px;
	transition: transform 0.2s var(--cft-ease);
}

.cft-tier__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.cft-tier__toggle .cft-tier__toggle-hide {
	display: none;
}

.cft-tier__toggle[aria-expanded="true"] .cft-tier__toggle-hide {
	display: inline;
}

.cft-tier__toggle[aria-expanded="true"] .cft-tier__toggle-show {
	display: none;
}

.cft-tier__features {
	display: none;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	flex-direction: column;
	gap: 8px;
	font-size: 12px;
	color: var(--cft-muted);
}

.cft-tier__features.is-open {
	display: flex;
}

.cft-tier__features li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	line-height: 1.6;
}

.cft-tier__features svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--cft-primary);
}

.cft-buy__actions {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-top: 16px;
}

.cft-buy__cta {
	width: 100%;
	padding: 12px 32px;
	border-radius: var(--cft-radius-sm);
	font-size: 14px;
}

.cft-buy__cta svg {
	width: 16px;
	height: 16px;
}

.cft-markets {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	max-width: 450px;
}

.cft-market {
	background-color: var(--cft-card);
	border: 1px solid var(--cft-border);
	color: var(--cft-muted);
	padding: 10px 8px;
	border-radius: var(--cft-radius-sm);
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s var(--cft-ease), color 0.2s var(--cft-ease);
	min-width: 0;
}

.cft-market:hover {
	background-color: var(--cft-surface);
	color: var(--cft-foreground);
}

.cft-market span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cft-market svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.cft-buy__doclink {
	font-size: 14px;
	color: var(--cft-primary);
}

.cft-buy__doclink:hover {
	text-decoration: underline;
}

@media (min-width: 640px) {
	.cft-product__title {
		font-size: 48px;
	}

	.cft-shots__title {
		font-size: 30px;
	}

	.cft-buy__title {
		font-size: 36px;
	}

	.cft-market {
		padding: 10px 16px;
		font-size: 14px;
	}
}

@media (min-width: 1024px) {
	.cft-product {
		grid-template-columns: 7fr 5fr;
		gap: 48px;
	}
}

/* ==================================================================
   10. Demos + changelog
   ================================================================== */

.cft-page-section {
	padding-top: 24px;
	border-top: 1px solid var(--cft-border-soft);
}

.cft-section-title {
	font-family: var(--cft-font-display);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--cft-foreground);
	margin: 0 0 24px;
}

.cft-demos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.cft-demo {
	position: relative;
	border-radius: var(--cft-radius-lg);
	overflow: hidden;
	border: 1px solid var(--cft-border);
	background-color: var(--cft-card);
	cursor: pointer;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
	display: block;
	padding: 0;
	width: 100%;
}

.cft-demo__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background-color: #000;
}

.cft-demo__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.7;
	transition: transform 0.5s var(--cft-ease);
}

.cft-demo:hover .cft-demo__media img {
	transform: scale(1.03);
}

.cft-demo__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cft-demo__play {
	width: 56px;
	height: 56px;
	border-radius: var(--cft-radius-full);
	background-color: var(--cft-primary);
	color: var(--cft-foreground);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
	transition: transform 0.2s var(--cft-ease);
}

.cft-demo:hover .cft-demo__play {
	transform: scale(1.1);
}

.cft-demo__play svg {
	width: 24px;
	height: 24px;
	margin-left: 2px;
}

.cft-demo__status {
	position: absolute;
	bottom: 12px;
	left: 12px;
	background-color: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(2px);
	color: var(--cft-foreground);
	font-size: 11px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: var(--cft-radius-sm);
	border: 1px solid var(--cft-border);
}

.cft-changelog__meta {
	font-size: 12px;
	color: var(--cft-muted);
	margin: -16px 0 24px;
}

.cft-logs {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding-top: 16px;
}

.cft-log__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.cft-log__ver {
	font-family: var(--cft-font-mono);
	font-size: 14px;
	font-weight: 700;
	color: var(--cft-primary);
}

.cft-log__date {
	font-size: 12px;
	color: var(--cft-muted);
}

.cft-log__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	color: var(--cft-muted);
}

.cft-log__list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	line-height: 1.7;
}

.cft-log__list li::before {
	content: "\2014";
	color: var(--cft-muted);
	flex-shrink: 0;
}

@media (min-width: 640px) {
	.cft-section-title {
		font-size: 36px;
	}
}

@media (min-width: 768px) {
	.cft-demos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==================================================================
   11. News & updates
   ================================================================== */

.cft-news__head {
	padding-bottom: 40px;
	border-bottom: 1px solid var(--cft-border);
	margin-bottom: 48px;
}

.cft-news__title {
	font-family: var(--cft-font-display);
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--cft-foreground);
	margin: 16px 0;
}

.cft-news__intro {
	font-size: 16px;
	color: var(--cft-muted);
	line-height: 1.7;
	margin: 0;
}

.cft-news__filter {
	margin-bottom: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.cft-news__filter-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cft-foreground);
}

.cft-news__filter-label svg {
	width: 16px;
	height: 16px;
	color: var(--cft-muted);
}

.cft-news__select {
	background-color: var(--cft-card);
	border: 1px solid var(--cft-border);
	color: var(--cft-foreground);
	font-size: 14px;
	border-radius: var(--cft-radius-lg);
	padding: 10px 16px;
	width: auto;
	min-width: 180px;
	cursor: pointer;
}

.cft-news__feed {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.cft-news-item {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cft-news-item.is-hidden {
	display: none;
}

.cft-news-item__date {
	width: 128px;
	flex-shrink: 0;
	padding-top: 4px;
	font-family: var(--cft-font-mono);
	font-size: 12px;
	color: var(--cft-muted);
}

.cft-news-item__body {
	flex: 1 1 auto;
	position: relative;
	padding-left: 24px;
	border-left: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.cft-news-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	color: var(--cft-muted);
}

.cft-news-item__tag {
	background-color: var(--cft-card);
	border: 1px solid var(--cft-border);
	color: var(--cft-muted);
	padding: 4px 10px;
	border-radius: var(--cft-radius-sm);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.cft-news-item__tag svg {
	width: 12px;
	height: 12px;
}

.cft-news-item__product {
	font-weight: 500;
}

.cft-news-item__version {
	color: var(--cft-primary);
	margin-left: 4px;
}

.cft-news-item__title {
	font-family: var(--cft-font-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--cft-foreground);
	margin: 0;
}

.cft-news-item__summary {
	font-size: 16px;
	color: var(--cft-muted);
	line-height: 1.7;
	max-width: 42rem;
	margin: 0;
}

.cft-news-item__changes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
	color: var(--cft-muted);
	max-width: 42rem;
}

.cft-news-item__changes li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	line-height: 1.7;
}

.cft-news-item__changes li::before {
	content: "\2014";
	color: var(--cft-primary);
	flex-shrink: 0;
}

.cft-news__empty {
	text-align: center;
	padding: 80px 0;
	color: var(--cft-muted);
}

@media (min-width: 640px) {
	.cft-news__title {
		font-size: 48px;
	}
}

@media (min-width: 768px) {
	.cft-news-item {
		flex-direction: row;
		gap: 48px;
	}

	.cft-news-item__body {
		padding-left: 40px;
	}
}