/* ==========================================================================
   4SPixel global styles: tokens, base, layout, shared components, motion.
   Section-specific styles live in blocks/<name>/style.css and assets/css/pages/.
   Breakpoints: 1100 (desktop ref), 1024 (mega menu → mobile menu), 960 (stack), 600 (mobile ref).
   ========================================================================== */

:root {
	--bg: #F5F3FA;
	--surface: #FFFFFF;
	--ink: #17112E;
	--muted: #4F4868;
	--line: #E3DEEF;
	--violet: #5B2BD9;
	--violet-700: #4F0DC3;
	--violet-soft: #EEEBFE;
	--violet-200: #DED9FE;
	--violet-300: #C7BDFF;
	--violet-400: #A898FF;
	--violet-500: #8668FD;
	--coral: #EE5A3A;
	--coral-400: #FE7B5C;
	--coral-soft: #FFE8E2;
	--cta: #CC3F25;
	--cta-hover: #AB2F1C;
	--teal: #0B8574;
	--teal-soft: #E3F3EF;
	--star: #E8A317;
	--dark-body: #CFC9DE;
	--dark-muted: #A9A3C4;
	--dark-line: #2E2752;
	--faint: #9A93B5;
	--font-display: 'Bricolage Grotesque', 'Arial Narrow', system-ui, sans-serif;
	--font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
	--font-wordmark: 'Unbounded', var(--font-display);
	--container: min(1280px, calc(100% - 40px));
	--section-y: 112px;
	--ease: cubic-bezier(.2, .8, .2, 1);
	--shadow-card-hover: 0 28px 50px -36px rgba(23, 17, 46, .55);
	--shadow-visual: 0 50px 80px -50px rgba(23, 17, 46, .45);
	--shadow-float: 0 18px 30px -22px rgba(23, 17, 46, .5);
	--shadow-mock: 0 30px 60px -36px rgba(23, 17, 46, .55), 0 2px 6px -2px rgba(23, 17, 46, .12);
	--header-h: 72px;
}
@media (max-width: 600px) {
	:root { --section-y: 56px; --header-h: 64px; }
}

/* Metric-matched fallbacks reduce layout shift while web fonts swap in. */
@font-face { font-family: 'Bricolage Fallback'; src: local('Arial'); size-adjust: 96%; ascent-override: 95%; descent-override: 26%; }
@font-face { font-family: 'Plex Fallback'; src: local('Arial'); size-adjust: 101%; ascent-override: 102%; descent-override: 27%; }

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
html, body { overflow-x: clip; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; }
img { height: auto; }
a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--violet-700); }
p, h1, h2, h3, h4, figure, blockquote, ul, ol { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.is-dark :focus-visible, .fx-dark :focus-visible, .fx-footer :focus-visible { outline-color: var(--violet-400); }
::selection { background: var(--violet-200); color: var(--ink); }
.screen-reader-text, .fx-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.fx-skip {
	position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 10px;
	background: var(--ink); color: #fff; font-weight: 600; transition: top 150ms;
}
.fx-skip:focus { top: 12px; color: #fff; }

/* WordPress wrappers: keep block layout out of the way of the design system. */
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block: 0; }
.fx-main { display: block; }
.fx-main > .entry-content, .fx-main > .wp-block-post-content { margin: 0; }
.wp-block-post-content > * { margin-block: 0; }

/* ---------- Layout ---------- */
.fx-container { width: var(--container); margin-inline: auto; }
.fx-section { padding: 0 0 var(--section-y); position: relative; }
.fx-grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.show-m { display: none !important; }
@media (max-width: 960px) {
	.hide-m { display: none !important; }
	.show-m { display: flex !important; }
	.fx-grid-12 { grid-template-columns: minmax(0, 1fr); }
	.fx-grid-12 > * { grid-column: 1 / -1 !important; }
}

/* ---------- Typography ---------- */
.fx-h1 {
	font-family: var(--font-display); font-weight: 800; font-size: 66px; line-height: 1;
	letter-spacing: -0.04em; color: var(--ink); margin: 0;
}
.fx-h1__w { display: block; overflow: hidden; padding-bottom: .06em; }
.fx-h1 .l2 { color: var(--violet); }
.fx-h2 {
	font-family: var(--font-display); font-weight: 800; font-size: 52px; line-height: 1.02;
	letter-spacing: -0.035em; margin: 0;
}
.fx-h2 em, .fx-h1 em { font-style: normal; color: var(--violet); }
.fx-lead { font-size: 20px; line-height: 1.55; color: var(--muted); max-width: 600px; }
.fx-muted { color: var(--muted); }
.fx-mono { font-family: var(--font-mono); }
.fx-label {
	font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.fx-eyebrow {
	display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 13px;
	letter-spacing: .08em; text-transform: uppercase; color: var(--violet); margin: 0;
}
.fx-eyebrow__rule { display: inline-block; width: 22px; height: 1.5px; background: currentColor; flex: none; }
.fx-eyebrow__num + .fx-eyebrow__rule { width: 14px; }
.fx-eyebrow.is-dark { color: var(--violet-400); }
@media (max-width: 960px) {
	.fx-h1 { font-size: 48px; }
	.fx-h2 { font-size: 36px; }
}
@media (max-width: 600px) {
	.fx-h1 { font-size: 40px; line-height: 1.04; }
	.fx-h2 { font-size: 30px; line-height: 1.06; }
	.fx-lead { font-size: 17px; }
	.fx-eyebrow { font-size: 12px; }
}

/* ---------- Buttons ---------- */
.fx-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 58px; padding: 0 28px;
	border-radius: 12px; font-size: 17px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
	border: 1.5px solid transparent; cursor: pointer;
	transition: transform 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out, border-color 150ms;
}
.fx-btn .arr { display: inline-block; transition: transform 150ms ease-out; }
.fx-btn:hover { transform: translateY(-2px); }
.fx-btn:hover .arr { transform: translateX(3px); }
.fx-btn--cta { background-color: var(--cta); color: #fff; }
.fx-btn--cta:hover, .fx-btn--cta:focus-visible { background-color: var(--cta-hover); color: #fff; box-shadow: 0 8px 18px -8px rgba(204, 63, 37, .7); }
.fx-btn--sec { border-color: var(--ink); color: var(--ink); background: transparent; padding: 0 26px; }
.fx-btn--sec:hover { background-color: var(--ink); color: #fff; }
.fx-btn--sec-dark { border-color: rgba(255, 255, 255, .4); color: #fff; background: transparent; padding: 0 26px; }
.fx-btn--sec-dark:hover { background-color: #fff; color: var(--ink); border-color: #fff; }
.fx-btn--white { background: #fff; color: var(--ink); }
.fx-btn--white:hover { color: var(--violet); }
.fx-btn--md { height: 52px; padding: 0 22px; font-size: 16px; }
.fx-btn--sm { height: 44px; padding: 0 18px; font-size: 15px; border-radius: 10px; gap: 8px; }
.fx-btn--block { width: 100%; }
.fx-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.fx-link-arrow { font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.fx-link-arrow .arr { transition: transform 150ms ease-out; display: inline-block; }
.fx-link-arrow:hover .arr { transform: translateX(3px); }
@media (max-width: 600px) {
	.fx-btns { flex-direction: column; align-items: stretch; }
	.fx-btns .fx-btn { width: 100%; height: 54px; }
	.fx-btns .fx-btn--md { height: 50px; }
}

/* ---------- Pixel icon (3×3) ---------- */
.fx-px { display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--px) * .1); width: var(--px); height: var(--px); flex: none; }
.fx-px > span { border-radius: calc(var(--px) * .07); }
.fx-px .c1 { background: var(--violet); }
.fx-px .c2 { background: var(--coral); }
.fx-px.is-dark .c1 { background: #fff; }
.fx-px.is-dark .c2 { background: var(--coral-400); }

/* ---------- Eyebrow pill (hero) ---------- */
.fx-pill {
	align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 999px;
	background: var(--surface); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px;
	letter-spacing: .08em; text-transform: uppercase; color: var(--violet); line-height: 1.2;
}
.fx-pill__ic { width: 28px; height: 28px; border-radius: 999px; background: var(--violet-soft); display: flex; align-items: center; justify-content: center; flex: none; }
@media (max-width: 600px) { .fx-pill { font-size: 11.5px; } }

/* ---------- Status dot with ping ---------- */
.fx-dot { position: relative; width: 8px; height: 8px; flex: none; display: inline-block; }
.fx-dot::before, .fx-dot::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--teal); }
.fx-dot::before { animation: ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
.fx-dot.is-coral::before, .fx-dot.is-coral::after { background: var(--coral); }
.fx-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; font-size: 15px; color: var(--muted); }
.fx-meta > span { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Breadcrumb ---------- */
.fx-crumbs { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.fx-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.fx-crumbs li { display: inline-flex; gap: 10px; }
.fx-crumbs li + li::before { content: "/"; }
.fx-crumbs a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 150ms; }
.fx-crumbs a:hover { color: var(--ink); }
.fx-crumbs [aria-current] { color: var(--ink); }

/* ---------- Hero shell ---------- */
.fx-hero { position: relative; overflow: hidden; padding: 40px 0 112px; }
.fx-hero__bg {
	position: absolute; inset: 0; pointer-events: none;
	background-image: radial-gradient(#D9D2EE 1.2px, transparent 1.2px); background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 40%, #000, transparent 75%);
	mask-image: radial-gradient(ellipse 60% 70% at 72% 40%, #000, transparent 75%);
}
.fx-hero__glow {
	position: absolute; right: -160px; top: -180px; width: 640px; height: 640px; border-radius: 50%;
	background: radial-gradient(circle, rgba(91, 43, 217, .16), transparent 68%); pointer-events: none;
}
.fx-hero__inner { position: relative; width: var(--container); margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.fx-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 64px; align-items: center; }
.fx-hero__copy { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.fx-hero__visual { position: relative; }
.fx-hero__bob { position: absolute; left: -34px; bottom: -30px; z-index: 0; }
.fx-hero__sq { position: absolute; right: -18px; top: -18px; width: 64px; height: 64px; border-radius: 14px; background: var(--violet); opacity: .12; }
.fx-stage-wrap { position: relative; z-index: 1; box-shadow: var(--shadow-visual); border-radius: 28px; }
.fx-stage {
	position: relative; width: 480px; height: 440px; border-radius: 28px; overflow: hidden;
	background: linear-gradient(160deg, #F7F6FF, #EEEBFE); border: 1px solid var(--line);
}
.fx-example {
	position: absolute; right: 14px; top: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
	text-transform: uppercase; color: #706D86; z-index: 5;
}
@media (max-width: 960px) {
	.fx-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.fx-hero__visual { justify-self: center; }
}
@media (max-width: 600px) {
	.fx-hero { padding: 20px 0 56px; }
	.fx-hero__inner { gap: 24px; }
	.fx-hero__copy { gap: 20px; }
	.fx-hero__bob, .fx-hero__sq { display: none; }
	/* Fixed-size stages scale down inside a sized wrapper (≈ .73 at 390px). site.js sets the exact --s. */
	.fx-hero__visual { width: 100%; }
	.fx-stage-wrap { --s: .73; width: calc(var(--stage-w, 480px) * var(--s)); height: calc(var(--stage-h, 440px) * var(--s)); margin-inline: auto; border-radius: calc(28px * var(--s)); }
	.fx-stage-wrap > .fx-stage { transform: scale(var(--s)); transform-origin: top left; }
}

/* Mock UI primitives used inside hero visuals */
.fx-mock { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-mock); overflow: hidden; }
.fx-bar { display: block; height: 6px; border-radius: 3px; background: var(--line); }
.fx-chip {
	display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; background: #fff; border: 1px solid var(--line);
	border-radius: 18px; box-shadow: var(--shadow-mock); font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.fx-chip > i { width: 8px; height: 8px; border-radius: 2px; background: var(--violet); flex: none; }

/* ---------- Section header ---------- */
.fx-shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.fx-shead__main { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.fx-shead__aside { max-width: 380px; font-size: 17px; line-height: 1.6; color: var(--muted); }
.fx-shead.is-dark .fx-h2 { color: #fff; }
.fx-shead.is-dark .fx-shead__aside { color: var(--dark-body); }
@media (max-width: 600px) { .fx-shead { gap: 16px; } .fx-shead__aside { font-size: 16px; } }

/* ---------- Cards ---------- */
.fx-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 30px; }
.lift, .fx-lift { transition: transform 260ms var(--ease), box-shadow 260ms ease-out, border-color 260ms; }
.lift:hover, .fx-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.fx-ict {
	width: 52px; height: 52px; border-radius: 14px; background: var(--violet-soft); color: var(--violet); flex: none;
	display: flex; align-items: center; justify-content: center;
	transition: background-color 260ms, color 260ms, transform 260ms var(--ease);
}
.fx-ict svg { width: 24px; height: 24px; }

/* ---------- Dark band / problem ---------- */
.fx-dark { position: relative; overflow: hidden; border-radius: 28px; background: var(--ink); color: #fff; }
.fx-glow-v, .fx-glow-c { position: absolute; border-radius: 50%; pointer-events: none; }
.fx-glow-v { background: radial-gradient(circle, rgba(91, 43, 217, .45), transparent 68%); }
.fx-glow-c { background: radial-gradient(circle, rgba(238, 90, 58, .25), transparent 68%); }

/* ---------- Reviews ---------- */
.fx-review {
	position: relative; overflow: hidden; margin: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
	border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 16px; flex: 1;
	transition: transform 260ms var(--ease), box-shadow 260ms ease-out;
}
.fx-review:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.fx-review__top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fx-review__src { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fx-review blockquote { position: relative; margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.38; letter-spacing: -0.01em; }
.fx-review figcaption { position: relative; margin-top: auto; display: flex; align-items: center; gap: 12px; }
.fx-review__init {
	flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--violet); color: #fff; display: flex;
	align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 16px;
}
.fx-review__who { display: flex; flex-direction: column; gap: 2px; }
.fx-review__name { font-weight: 600; font-size: 15px; }
.fx-review__country { font-size: 13.5px; color: var(--muted); }
.fx-review.is-featured { background: var(--violet); color: #fff; border-color: var(--violet); }
.fx-review.is-featured .fx-review__src, .fx-review.is-featured .fx-review__country { color: #E4DEFF; }
.fx-review.is-featured .fx-review__init { background: rgba(255, 255, 255, .18); }
.fx-review__glow { position: absolute; right: -80px; top: -100px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(238, 90, 58, .5), transparent 68%); pointer-events: none; }
.fx-stars { display: inline-flex; gap: 2px; line-height: 0; }
.fx-stars svg { width: 15px; height: 15px; }

/* Fiverr badge */
.fx-badge {
	display: inline-flex; align-items: center; gap: 14px; padding: 10px 16px 10px 12px; border-radius: 14px; background: var(--surface);
	border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform 200ms ease-out, box-shadow 200ms;
}
.fx-badge:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(23, 17, 46, .5); color: var(--ink); }
.fx-badge__n { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.03em; line-height: 1; }
.fx-badge__t { display: flex; flex-direction: column; gap: 3px; }
.fx-badge__s { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.fx-badge .fx-stars svg { width: 13px; height: 13px; }
.fx-badge.is-dark { background: rgba(255, 255, 255, .06); border-color: var(--dark-line); color: #fff; padding: 8px 14px 8px 10px; gap: 10px; }
.fx-badge.is-dark .fx-badge__n { font-size: 24px; }
.fx-badge.is-dark .fx-badge__s { color: var(--dark-muted); }
.fx-badge.is-dark:hover { color: #fff; }

/* ---------- Stat tile ---------- */
.fx-stat {
	position: relative; overflow: hidden; border-radius: 22px; background: var(--violet-soft); border: 1px solid #DCD4FB;
	padding: 32px; display: flex; flex-direction: column; gap: 14px;
}
.fx-stat__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.fx-stat__n { font-family: var(--font-display); font-weight: 800; font-size: 104px; line-height: .9; letter-spacing: -0.05em; color: var(--violet); }
.fx-stat__n span { color: var(--coral); }
.fx-stat__t { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.35; color: var(--ink); }
.fx-stat__src { margin-top: auto; font-size: 13px; line-height: 1.5; color: var(--muted); }
.stat-n { animation: statIn 1s var(--ease) both; }
@supports (animation-timeline: view()) { .stat-n { animation-timeline: view(); animation-range: entry 10% entry 70%; } }
@media (max-width: 600px) { .fx-stat { padding: 26px; } .fx-stat__n { font-size: 76px; } .fx-stat__t { font-size: 19px; } }

/* ---------- FAQ ---------- */
.fx-faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.fx-faq__item { border-bottom: 1px solid var(--line); }
.fx-faq__q { margin: 0; font-size: inherit; }
.fx-faq__btn {
	width: 100%; min-height: 76px; padding: 16px 0; border: 0; background: none; display: flex; align-items: center;
	justify-content: space-between; gap: 16px; text-align: left; font-family: var(--font-display); font-weight: 700;
	font-size: 22px; line-height: 1.3; color: var(--ink); cursor: pointer; letter-spacing: -0.01em;
}
.fx-faq__chip {
	flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--violet-soft); color: var(--violet);
	display: flex; align-items: center; justify-content: center; transition: background-color 200ms, color 200ms;
}
.fx-faq__chip svg { transition: transform 200ms ease-out; }
.fx-faq__btn[aria-expanded="true"] .fx-faq__chip { background: var(--violet); color: #fff; }
.fx-faq__btn[aria-expanded="true"] .fx-faq__chip svg { transform: rotate(45deg); }
.fx-faq__btn:hover .fx-faq__chip { background: var(--violet-200); }
.fx-faq__btn[aria-expanded="true"]:hover .fx-faq__chip { background: var(--violet-700); }
.fx-faq__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 260ms var(--ease); }
.fx-faq__panel > div { overflow: hidden; }
.fx-faq__panel p { padding: 0 56px 24px 0; font-size: 17px; line-height: 1.65; color: var(--muted); }
.fx-faq__panel[hidden] { display: grid; grid-template-rows: 0fr; visibility: hidden; }
.js .fx-faq__panel.is-closed { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 260ms var(--ease), visibility 0s 260ms; }
@media (max-width: 600px) {
	.fx-faq__btn { font-size: 18px; min-height: 64px; }
	.fx-faq__chip { width: 32px; height: 32px; }
	.fx-faq__panel p { padding-right: 0; font-size: 16px; }
}

/* ---------- Forms ---------- */
.fx-field { display: flex; flex-direction: column; gap: 8px; }
.fx-field label, .fx-field legend { font-size: 14px; font-weight: 600; color: var(--ink); }
.fx-field .fx-opt { font-weight: 400; color: var(--muted); }
.fld, .fx-input {
	width: 100%; height: 52px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff;
	font: inherit; font-size: 16px; color: var(--ink); transition: border-color 150ms, box-shadow 150ms; appearance: none;
}
textarea.fld, textarea.fx-input { height: auto; min-height: 120px; padding: 14px 16px; resize: vertical; }
select.fld { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8l4-3.5' fill='none' stroke='%2317112E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.fld:focus, .fx-input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); }
.fld[aria-invalid="true"] { border-color: #D12D4A; }
.fx-err { font-size: 13.5px; color: #D12D4A; }
.fx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* Cloudflare Turnstile: invisible unless Cloudflare asks for a click, then shown above the send button. */
.fx-turnstile { align-self: stretch; width: 100%; }
.fx-turnstile iframe { display: block; }
.fx-turnstile__note { margin: 0 0 12px; font-size: 14px; color: var(--muted); }

/* ---------- Motion ---------- */
.rise { animation: rise 700ms var(--ease) both; }
.d1 { animation-delay: 90ms; } .d2 { animation-delay: 180ms; } .d3 { animation-delay: 270ms; } .d4 { animation-delay: 360ms; } .d5 { animation-delay: 450ms; }
.line-in { display: block; animation: lineUp 800ms var(--ease) both; }
.line-in.l2 { animation-delay: 120ms; }
.ping { animation: ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
.bob { animation: bob 9s ease-in-out infinite; }
.glow { animation: glow 14s ease-in-out infinite; }
.float-a { animation: floatY 7s ease-in-out infinite; }
.float-b { animation: floatY 7s ease-in-out -3.5s infinite; }

/* Scroll reveal: CSS view timelines where supported, IntersectionObserver otherwise.
   Content is only hidden once JS has confirmed it can reveal it (html.fx-io). */
@supports (animation-timeline: view()) {
	.rv { animation: rv linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
	.rv-s > * { animation: rv linear both; animation-timeline: view(); animation-range: entry 0% entry 65%; }
}
@supports not (animation-timeline: view()) {
	.fx-io .rv:not(.is-visible), .fx-io .rv-s:not(.is-visible) > * { opacity: 0; transform: translateY(28px); }
	.fx-io .rv, .fx-io .rv-s > * { transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
	.fx-io .rv-s.is-visible > *:nth-child(2) { transition-delay: 80ms; }
	.fx-io .rv-s.is-visible > *:nth-child(3) { transition-delay: 160ms; }
	.fx-io .rv-s.is-visible > *:nth-child(4) { transition-delay: 240ms; }
	.fx-io .rv-s.is-visible > *:nth-child(5) { transition-delay: 320ms; }
	.fx-io .rv-s.is-visible > *:nth-child(6) { transition-delay: 400ms; }
}
/* Pause decorative loops while off-screen or when the tab is hidden. */
.fx-paused, .fx-paused * { animation-play-state: paused !important; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes rv { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(10deg); } }
@keyframes glow { 0%, 100% { transform: none; } 50% { transform: translate(-40px, 30px) scale(1.06); } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes statIn { from { opacity: 0; transform: translateY(30px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }

/* Logo motion */
.fx-logo { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; flex: none; }
.fx-logo:hover { color: var(--ink); }
.fx-logo.is-dark, .fx-logo.is-dark:hover { color: #fff; }
.fx-logo__mark { overflow: visible; flex: none; }
.fx-logo__wm { display: inline-flex; align-items: center; gap: calc(var(--wm) * .42); font-family: var(--font-wordmark); white-space: nowrap; line-height: 1; }
.fx-logo__4s { font-weight: 800; font-size: var(--wm); letter-spacing: -0.05em; }
.fx-logo__div { flex: none; width: 1.5px; height: calc(var(--wm) * .82); background: currentColor; opacity: .3; }
.fx-logo__px { font-weight: 500; font-size: calc(var(--wm) * .56); letter-spacing: .26em; margin-right: -0.26em; }
.logo-a .lm { transform-box: fill-box; transform-origin: center; transition: transform 320ms var(--ease); }
.logo-a .lm-1 { animation: lmIn 600ms var(--ease) 100ms backwards; --dx: -30px; --dy: -24px; }
.logo-a .lm-2 { animation: lmIn 600ms var(--ease) 180ms backwards; --dx: 30px; --dy: -30px; }
.logo-a .lm-3 { animation: lmIn 600ms var(--ease) 260ms backwards; --dx: -24px; --dy: 30px; }
.logo-a .lm-o { transform: rotate(14deg); animation: lmO 800ms var(--ease) 340ms backwards; }
.logo-a:hover .lm-1 { transform: translate(-6px, -6px); }
.logo-a:hover .lm-2 { transform: translate(6px, -6px); }
.logo-a:hover .lm-3 { transform: translate(-6px, 6px); }
.logo-a:hover .lm-o { transform: translate(6px, 6px) rotate(104deg); }
/* Header logo reacts once the page is scrolled (header.is-scrolled, past 40px): squares part a little, coral turns. Hover still wins. */
.fx-header.is-scrolled .logo-a:not(:hover) .lm-1 { transform: translate(-4px, -4px); }
.fx-header.is-scrolled .logo-a:not(:hover) .lm-2 { transform: translate(4px, -4px); }
.fx-header.is-scrolled .logo-a:not(:hover) .lm-3 { transform: translate(-4px, 4px); }
.fx-header.is-scrolled .logo-a:not(:hover) .lm-o { transform: translate(4px, 4px) rotate(59deg); }
@keyframes lmIn { from { transform: translate(var(--dx), var(--dy)) rotate(-45deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lmO { 0% { transform: translate(40px, 40px) rotate(-180deg) scale(.3); opacity: 0; } 70% { transform: rotate(34deg) scale(1.08); opacity: 1; } 100% { transform: rotate(14deg); } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.rv, .rv-s > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- Generic prose (posts, legal, plain pages) ---------- */
.fx-prose { font-size: 18.5px; line-height: 1.75; color: var(--ink); }
.fx-prose > * + * { margin-top: 1.1em; }
.fx-prose h2 { font-weight: 800; font-size: 34px; line-height: 1.12; letter-spacing: -0.03em; margin-top: 1.8em; }
.fx-prose h3 { font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; margin-top: 1.5em; }
.fx-prose ul, .fx-prose ol { padding-left: 1.3em; }
.fx-prose li + li { margin-top: .4em; }
.fx-prose a { text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.fx-prose strong { font-weight: 600; }
.fx-prose blockquote { border-left: 3px solid var(--violet); padding-left: 20px; font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.4; }
@media (max-width: 600px) { .fx-prose { font-size: 17px; } .fx-prose h2 { font-size: 26px; } .fx-prose h3 { font-size: 20px; } }

/* Plain page fallback (pages without a bespoke layout) */
.fx-page { padding: 40px 0 var(--section-y); }
.fx-page__head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 48px; }
.fx-page__body { max-width: 760px; }

.fx-paused-all * { animation-play-state: paused !important; }

/* Core blocks placed directly in page content (outside section blocks) get a readable column. */
.fx-main .wp-block-post-content > :where(:not([class*="wp-block-fourspixel-"]):not(.alignfull):not(.alignwide)) {
	width: min(760px, calc(100% - 40px)); margin-inline: auto;
}
.fx-main .wp-block-post-content > :where(:not([class*="wp-block-fourspixel-"])) + :where(:not([class*="wp-block-fourspixel-"])) { margin-top: 1.1em; }
.fx-main .wp-block-post-content > .alignwide { width: var(--container); margin-inline: auto; }

/* ---------- Promise panel ("No surprises") ---------- */
.fx-promise { position: relative; overflow: hidden; border-radius: 22px; background: var(--ink); padding: 32px; display: flex; flex-direction: column; gap: 10px; }
.fx-promise__glow { position: absolute; right: -90px; top: -90px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 43, 217, .55), transparent 70%); pointer-events: none; }
.fx-promise__label { position: relative; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-400); }
.fx-promise__title { position: relative; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; color: #fff; margin-bottom: 8px; }
.fx-promise__rows { position: relative; }
.fx-promise__row { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--dark-line); }
.fx-promise__ic { flex: none; width: 36px; height: 36px; border-radius: 10px; background: rgba(168, 152, 255, .16); color: var(--violet-400); display: flex; align-items: center; justify-content: center; }
.fx-promise__txt { display: flex; flex-direction: column; gap: 3px; }
.fx-promise__t { font-weight: 600; color: #fff; font-size: 16px; }
.fx-promise__d { font-size: 14px; line-height: 1.5; color: var(--dark-muted); }

/* Mobile horizontal carousel (reviews etc.) */
.fx-mcar { scroll-snap-type: x mandatory; scrollbar-width: none; }
.fx-mcar::-webkit-scrollbar { display: none; }
.fx-mcar > * { scroll-snap-align: start; }

/* Links inside running text must stand out from the words around them (WCAG 1.4.1). */
.fx-faq__panel a, .fx-faqs__intro a, .fx-lead a, .fx-shead__aside a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Hero headings: balance each line so no single word is left on its own. */
h1, h1 .line-in, h1 [class*="__w"] { text-wrap: balance; }

/* ---------- Free tool link (fourspixel_tool_link) ---------- */
.fx-toollink { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; color: var(--ink); text-decoration: none; }
.fx-toollink__ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--violet-soft); color: var(--violet); transition: background-color 200ms, color 200ms, transform 200ms var(--ease); }
.fx-toollink__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fx-toollink__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fx-toollink__n { font-weight: 600; font-size: 14.5px; line-height: 1.3; color: var(--violet); }
.fx-toollink__go { color: var(--violet); transition: transform 200ms var(--ease); }
.fx-toollink:hover .fx-toollink__ic, .fx-toollink:focus-visible .fx-toollink__ic { background: var(--violet); color: #fff; transform: rotate(-6deg); }
.fx-toollink:hover .fx-toollink__n, .fx-toollink:focus-visible .fx-toollink__n { text-decoration: underline; text-underline-offset: 3px; }
.fx-toollink:hover .fx-toollink__go, .fx-toollink:focus-visible .fx-toollink__go { transform: translateX(3px); }
.fx-toollink.is-card { display: flex; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); transition: border-color 150ms, transform 150ms; }
.fx-toollink.is-card .fx-toollink__ic { width: 36px; height: 36px; border-radius: 10px; }
.fx-toollink.is-card .fx-toollink__t { flex: 1; }
.fx-toollink.is-card .fx-toollink__n { color: var(--ink); font-size: 15px; }
.fx-toollink.is-card:hover { border-color: #CFC6F2; transform: translateY(-1px); }
.fx-toollink.is-dark .fx-toollink__ic { background: rgba(255, 255, 255, .1); color: #C9BDFF; }
.fx-toollink.is-dark .fx-toollink__k { color: rgba(255, 255, 255, .6); }
.fx-toollink.is-dark .fx-toollink__n, .fx-toollink.is-dark .fx-toollink__go { color: #C9BDFF; }