/* Publicators LP 2026 — Multichannel. Hebrew, RTL, mobile-first.
   Tokens from Phase 0 recon: live-site orange #fe5f01/#FF5F00, ink #0f1115.
   Fonts: site's established pair — Rubik (display) + Heebo (body), self-hosted WOFF2. */

/* ---------- fonts ---------- */
@font-face { font-family: 'Rubik'; font-weight: 700; font-style: normal; font-display: swap;
	src: url('fonts/rubik-700-hebrew.woff2') format('woff2');
	unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Rubik'; font-weight: 700; font-style: normal; font-display: swap;
	src: url('fonts/rubik-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rubik'; font-weight: 800; font-style: normal; font-display: swap;
	src: url('fonts/rubik-800-hebrew.woff2') format('woff2');
	unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Rubik'; font-weight: 800; font-style: normal; font-display: swap;
	src: url('fonts/rubik-800-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Heebo'; font-weight: 400; font-style: normal; font-display: swap;
	src: url('fonts/heebo-400-hebrew.woff2') format('woff2');
	unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; font-weight: 400; font-style: normal; font-display: swap;
	src: url('fonts/heebo-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Heebo'; font-weight: 600; font-style: normal; font-display: swap;
	src: url('fonts/heebo-600-hebrew.woff2') format('woff2');
	unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Heebo'; font-weight: 600; font-style: normal; font-display: swap;
	src: url('fonts/heebo-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- tokens ---------- */
:root {
	--brand-primary: #fe5f01;
	--brand-primary-dark: #d94e00;
	--brand-accent: #ff6a2c;
	--ink: #0f1115;
	--ink-soft: #4a4f5c;
	--surface: #ffffff;
	--surface-alt: #f6f7fb;
	--line: #e3e6ee;
	--whatsapp: #25d366; --wa-ink: #0e7a41; --wa-tint: #e7f8ee;
	--sms: #2f7df6; --sms-ink: #1a56be; --sms-tint: #e8f0fe;
	--email: #fe5f01; --email-ink: #a83f00; --email-tint: #ffeee3;
	--jr-ink: #5b21b6; --jr-tint: #f3eefe;
	--ec-ink: #0b6e63; --ec-tint: #e0f4f1;
	--fr-ink: #ad1a72; --fr-tint: #fde7f3;
	--err: #c62828;
	--radius-card: 18px;
	--radius-btn: 12px;
	--maxw: 1200px;
	--font-display: 'Rubik', -apple-system, 'Segoe UI', Arial, sans-serif;
	--font-body: 'Heebo', -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-top clears the fixed site bar (#pn-bar: 64px, 56px under 560px) — without it
   every in-page anchor, the hero CTA included, lands with its heading tucked under the bar. */
html { scroll-behavior: smooth; scroll-padding-top: 78px; }
@media (max-width: 560px) { html { scroll-padding-top: 70px; } }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--ink);
	background: var(--surface);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, .h1 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1, .h1 { font-weight: 800; font-size: clamp(1.9rem, 4.6vw + .9rem, 3.3rem); }
h2 { font-weight: 800; font-size: clamp(1.45rem, 2.6vw + .7rem, 2.25rem); max-width: 21ch; }
.h2-wide { max-width: 30ch; }
h3 { font-weight: 700; font-size: 1.22rem; }
p { margin: 0 0 1em; }
/* hidden must always win: author display rules (e.g. .btn) otherwise override the UA [hidden] style */
[hidden] { display: none !important; }
a { color: inherit; }
ul { padding: 0; margin: 0; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }

:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 3px; border-radius: 4px; }

.skip-link {
	position: absolute; inset-inline-start: -999px; top: 0; z-index: 200;
	background: var(--ink); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 10px 10px;
}
.skip-link:focus { inset-inline-start: 1rem; }

/* ---------- buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	font-family: var(--font-display); font-weight: 700; text-decoration: none;
	border: 0; border-radius: var(--radius-btn); cursor: pointer;
	min-height: 48px; padding: .7rem 1.5rem; font-size: 1.19rem; line-height: 1.2;
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-primary { background: var(--brand-primary); color: #fff; box-shadow: 0 6px 18px rgba(254, 95, 1, .28); }
.btn-primary:hover { background: var(--brand-primary-dark); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-sm { min-height: 44px; padding: .45rem 1.1rem; font-size: 1rem; background: var(--ink); box-shadow: none; }
.btn-sm:hover { background: #000; }
.btn-lg { width: 100%; font-size: 1.25rem; min-height: 56px; }
.btn-block { width: 100%; }

/* ---------- header: the global site bar (#pn-bar, mu-plugin publicators-new-menu) ----------
   Its markup AND its CSS are inline, printed at wp_head priority 99 — i.e. AFTER this stylesheet.
   Equal-specificity rules there would win, so every override below is prefixed with body.plp,
   which also keeps it off the other 40-odd pages that share the bar. */

/* Every other page on the site is served <html dir="ltr"> even when its content is Hebrew, so the
   bar lays out logo-left / login-right everywhere else. This page is the only correctly-marked
   dir="rtl" document, which would mirror the bar and make it visibly jump when someone navigates
   here from any other page — worse still once this becomes the homepage. Pin the bar's own axis to
   LTR to match the site; the menu items keep reading right-to-left via .pn-he .pn-nav, and the
   page body stays RTL. Remove this rule if the rest of the site is ever corrected to dir="rtl". */
body.plp #pn-bar .pn-inner { direction: ltr; }

/* This page's demo CTA, injected into .pn-util ahead of Login. */
body.plp #pn-bar .pn-lp-cta {
	font-family: var(--font-display); font-weight: 800; font-size: 13px; line-height: 1;
	color: #fff; background: var(--brand-primary); padding: 10px 20px; border-radius: 999px;
	box-shadow: 0 6px 16px rgba(254, 95, 1, .38); white-space: nowrap; text-decoration: none;
	transition: background .2s ease;
}
body.plp #pn-bar .pn-lp-cta:hover { background: var(--brand-primary-dark); }
/* Login is normally the bar's orange pill. Two orange pills side by side would split the page's
   single call to action in half, so on this page Login steps back to the outline treatment the
   language toggle already uses. Delete this rule to hand the site styling back. */
body.plp #pn-bar .pn-login {
	background: transparent; color: var(--ink) !important; box-shadow: none;
	border: 1.5px solid rgba(10, 10, 11, .2); font-weight: 700; padding: 9px 18px;
}
body.plp #pn-bar .pn-login:hover { background: rgba(10, 10, 11, .05); }
/* At the bar's own hamburger breakpoint Login and EN are already listed inside the drawer, so
   drop them from the bar and leave it as logo · demo CTA · burger. */
@media (max-width: 1040px) {
	body.plp #pn-bar .pn-login, body.plp #pn-bar .pn-toggle { display: none; }
}
@media (max-width: 400px) {
	body.plp #pn-bar .pn-lp-cta { padding: 9px 14px; font-size: 12.5px; }
}

/* ---------- icons ---------- */
.ic { width: 1.25em; height: 1.25em; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.big { width: 2rem; height: 2rem; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(2.2rem, 6vw, 4.5rem) clamp(2.2rem, 5vw, 3.5rem); }
.hero-grid { display: grid; gap: 2.2rem; align-items: center; }
.eyebrow {
	display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: .92rem;
	color: var(--email-ink); background: var(--email-tint); border-radius: 99px;
	padding: .28rem .95rem; margin-block-end: 1.1rem;
}
.sub { font-size: clamp(1.08rem, 1.2vw + .8rem, 1.28rem); color: var(--ink-soft); max-width: 52ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-block: 1.5rem .8rem; }
.reassure { font-size: .95rem; color: var(--ink-soft); }

.hero-visual { position: relative; min-height: 300px; }
/* stacked (mobile): the shot runs the full content width; the two-column layout below trims it */
.hero-shot { margin: 0; width: 100%; position: relative; z-index: 2; }
.shot { margin: 0; }
.shot img {
	border-radius: var(--radius-card);
	box-shadow: 0 18px 48px rgba(15, 17, 21, .16);
	border: 1px solid var(--line);
	background: #fff;
}
.chip {
	position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .45rem;
	font-family: var(--font-display); font-weight: 700; font-size: .88rem;
	padding: .34rem .85rem; border-radius: 99px; background: #fff;
	box-shadow: 0 6px 20px rgba(15, 17, 21, .12); border: 1px solid var(--line);
}
.chip .dot { width: .55em; height: .55em; border-radius: 50%; display: inline-block; }
.chip-email { inset-inline-start: 2%; top: 8%; color: var(--email-ink); }
.chip-email .dot { background: var(--email); }
.chip-sms { inset-inline-start: 0; top: 44%; color: var(--sms-ink); }
.chip-sms .dot { background: var(--sms); }
.chip-whatsapp { inset-inline-start: 2%; top: 80%; color: var(--wa-ink); }
.chip-whatsapp .dot { background: var(--whatsapp); }

/* ---------- hero karaoke line ----------
   A dot hops from keyword to keyword through the hero sub-line and the word it lands
   on takes the brand colour. The dot is placed by JS from measured rects, so nothing
   here hard-codes a position; `left/top` (not the logical properties) keep the
   coordinate system physical, matching what getBoundingClientRect() reports in RTL.
   Only colour changes on the active word — a weight change would reflow the line and
   drag every following word out from under the dot. */
.hero-copy .sub { line-height: 1.9; }
.sub-kara { position: relative; }
.sub-kara .kw { white-space: nowrap; transition: color .35s ease; }
.sub-kara .kw.is-on { color: var(--email-ink); }
.kara-dot { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
	.kara-dot { transition: transform .38s cubic-bezier(.5, 0, .2, 1), opacity .3s ease; }
	.kara-dot.is-on { opacity: 1; }
	.kara-dot i {
		position: absolute; left: -3.5px; top: -10px; width: 7px; height: 7px;
		border-radius: 50%; background: var(--brand-primary);
		box-shadow: 0 0 9px 2px rgba(254, 95, 1, .4);
	}
	.kara-dot.hop i { animation: kara-hop .38s cubic-bezier(.4, 0, .35, 1); }
	@keyframes kara-hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-7px) scale(1.15); } }
}

/* hero visual sits above copy on mobile, side-by-side from 720px */
@media (min-width: 720px) {
	.hero-grid { grid-template-columns: 1.05fr .95fr; }
	.hero-shot { width: min(64%, 400px); }
}
/* still stacked, but wide enough that a 100% shot would run past the fold — cap and centre it */
@media (min-width: 560px) and (max-width: 719px) {
	.hero-shot { width: min(72%, 420px); margin-inline: auto; }
}

/* ---------- A/B variants ---------- */
html[data-variant='B'] .v-a { display: none !important; }
html[data-variant='B'] .v-b { display: block !important; }
html[data-variant='B'] a.v-b, html[data-variant='B'] span.v-b { display: inline-flex !important; }

/* ---------- trust bar ---------- */
.trustbar { background: var(--surface-alt); border-block: 1px solid var(--line); }
.trust-items {
	list-style: none; display: grid; grid-template-columns: repeat(2, 1fr);
	gap: .6rem 1.4rem; padding-block: 1rem;
}
.trust-items li { display: flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .98rem; min-height: 44px; }
.trust-items .ic { color: var(--brand-primary); }
@media (min-width: 900px) { .trust-items { grid-template-columns: repeat(4, auto); justify-content: space-between; } }

/* ---------- sections ---------- */
.sec { padding-block: clamp(3rem, 7vw, 5.5rem); }
.sec-alt { background: var(--surface-alt); }
.sec-title { margin-block-end: 1.6rem; }
.lede { font-size: clamp(1.05rem, .9vw + .85rem, 1.2rem); color: var(--ink-soft); max-width: 62ch; }
.micro { font-family: var(--font-display); font-weight: 700; color: var(--email-ink); margin-block-start: 1.4rem; }
.kicker-line { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin-block-start: 1.4rem; }

/* ---------- pain head: copy + photo ---------- */
.pain-head { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .pain-head { grid-template-columns: 1.1fr .9fr; } }
.pain-photo { width: min(100%, 400px); margin-inline: auto; }
.pain-photo img { width: 100%; }

/* ---------- pain pairs ---------- */
.pairs { list-style: none; display: grid; gap: .8rem; margin-block-start: 1.8rem; }
.pairs li {
	display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
	padding: .85rem 1.1rem; box-shadow: 0 3px 14px rgba(15, 17, 21, .05);
}
.sec-alt .pairs li { box-shadow: none; }
.pair-b {
	font-family: var(--font-display); font-weight: 700; font-size: .95rem;
	background: var(--email-tint); color: var(--email-ink); border-radius: 99px; padding: .25rem .8rem; white-space: nowrap;
}
.pair-arrow { width: 1.4rem; height: 2px; background: var(--brand-primary); border-radius: 2px; position: relative; flex: none; }
.pair-arrow::after {
	content: ''; position: absolute; inset-inline-end: -1px; top: -3.5px;
	border-block: 4px solid transparent; border-inline-start: 6px solid var(--brand-primary);
}
.pair-a { flex: 1 1 14rem; }
@media (min-width: 720px) { .pairs { grid-template-columns: 1fr 1fr; } }
.pairs-slim { margin-block-start: 0; }

/* ---------- channel cards ---------- */
.cards3 { display: grid; gap: 1.1rem; }
@media (min-width: 900px) { .cards3 { grid-template-columns: repeat(3, 1fr); } }
.card {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius-card); padding: 1.4rem 1.3rem;
	box-shadow: 0 4px 18px rgba(15, 17, 21, .05);
}
.ch-chip {
	display: inline-flex; align-items: center; gap: .45rem;
	font-family: var(--font-display); font-weight: 700; font-size: .92rem;
	border-radius: 99px; padding: .3rem .9rem; margin-block-end: .9rem;
}
.ch-email .ch-chip { background: var(--email-tint); color: var(--email-ink); }
.ch-sms .ch-chip { background: var(--sms-tint); color: var(--sms-ink); }
.ch-wa .ch-chip { background: var(--wa-tint); color: var(--wa-ink); }
.ch-journeys .ch-chip { background: var(--jr-tint); color: var(--jr-ink); }
.ch-ecom .ch-chip { background: var(--ec-tint); color: var(--ec-ink); }
.ch-forms .ch-chip { background: var(--fr-tint); color: var(--fr-ink); }
.ch-card > p { color: var(--ink-soft); }
.more-link {
	display: inline-flex; align-items: center; gap: .4rem; margin-block-start: .6rem;
	font-family: var(--font-display); font-weight: 700; color: var(--brand-primary-dark);
	text-decoration: none; min-height: 44px;
}
.more-link:hover { text-decoration: underline; }

/* ---------- progressive disclosure ---------- */
.more { margin-block-start: .6rem; }
.more summary {
	list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
	font-family: var(--font-display); font-weight: 700; color: var(--brand-primary-dark);
	min-height: 44px; padding-inline-end: .4rem;
}
.more summary::-webkit-details-marker { display: none; }
.more summary span { font-size: 1.2em; line-height: 1; transition: transform .2s; }
.more[open] summary span { transform: rotate(45deg); }
.more ul { list-style: none; margin-block-start: .5rem; display: grid; gap: .45rem; }
.more li { position: relative; padding-inline-start: 1.3rem; color: var(--ink-soft); }
.more li::before {
	content: ''; position: absolute; inset-inline-start: 0; top: .55em;
	width: .5em; height: .5em; border-radius: 50%; background: var(--brand-accent);
}

/* ---------- journey demo ---------- */
.journey-demo {
	margin-block-start: 2rem; background: var(--surface-alt);
	border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1.4rem;
}
.jd-track { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.jd-track > li { display: flex; align-items: center; gap: .55rem; }
.jd-track > li:not(:last-child)::after {
	content: ''; width: 1.6rem; height: 3px; border-radius: 2px;
	background: linear-gradient(to left, var(--brand-primary), var(--brand-accent));
	flex: none;
}
.jd-node {
	display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
	font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--ink);
	background: #fff; border: 2px solid var(--line); border-radius: 12px;
	padding: .5rem .9rem; min-height: 44px; transition: border-color .2s, box-shadow .2s;
}
.jd-node.is-active { border-color: var(--brand-primary); box-shadow: 0 0 0 4px rgba(254, 95, 1, .14); }
.jd-node .ic { color: var(--brand-primary); }
.jd-wa .ic { color: var(--wa-ink); }
.jd-sms .ic { color: var(--sms-ink); }
.jd-or { color: var(--ink-soft); font-weight: 700; }
.jd-branch { flex-wrap: wrap; }

.jd-stage { margin-block-start: 1.2rem; }
.jd-panel { display: none; }
.jd-panel.is-active { display: grid; gap: .8rem; justify-items: center; }
.jd-cap { color: var(--ink-soft); margin: 0; text-align: center; }
.mock {
	background: #fff; border: 1px solid var(--line); border-radius: 14px;
	padding: 1rem 1.2rem; max-width: 340px; width: 100%;
	box-shadow: 0 8px 26px rgba(15, 17, 21, .08);
}
.mock-title { font-family: var(--font-display); font-weight: 700; margin: 0 0 .5rem; }

/* newsletter-style email mock */
.mock-nl { padding: 0 0 1.1rem; overflow: hidden; }
.mock-nl .mock-title, .mock-nl .mock-line, .mock-nl .mock-btn { margin-inline: 1.1rem; }
.nl-head {
	display: flex; justify-content: space-between; align-items: center;
	background: var(--brand-primary); color: #fff; padding: .45rem 1.1rem; margin-block-end: .8rem;
	font-family: var(--font-display); font-weight: 700; font-size: .82rem;
}
.nl-tag { font-family: var(--font-body); font-weight: 400; opacity: .9; }
.nl-hero {
	display: block; height: 72px; margin: 0 1.1rem .7rem; border-radius: 10px;
	background: linear-gradient(135deg, #ffd9c2, var(--brand-primary) 60%, #ffb38a);
}
.nl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin: .1rem 1.1rem .8rem; }
.nl-tile { height: 46px; border-radius: 8px; background: var(--surface-alt); border: 1px solid var(--line); position: relative; }
.nl-tile::after { content: ''; position: absolute; inset-inline: 9px; bottom: 7px; height: 5px; border-radius: 3px; background: var(--line); }
.nl-tile-b::before { content: ''; position: absolute; inset-inline-start: 9px; top: 8px; width: 40%; height: 5px; border-radius: 3px; background: var(--email-tint); }
.mock-line { height: 8px; border-radius: 4px; background: var(--surface-alt); margin: 0 0 .5rem; }
.mock-line.short { width: 55%; }
.mock-btn {
	display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: .9rem;
	background: var(--brand-primary); color: #fff; border-radius: 9px; padding: .35rem .9rem;
}
.mock-btn.wa { background: var(--wa-ink); }
.mock-wait { display: flex; align-items: center; gap: .8rem; }
.mock-wait .ic { color: var(--brand-primary); }
.mock-wait .mock-title { margin: 0; }
.cond-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.cond-row span { font-weight: 600; font-size: .92rem; border-radius: 9px; padding: .3rem .7rem; }
.cond-yes { background: var(--wa-tint); color: var(--wa-ink); }
.cond-no { background: var(--sms-tint); color: var(--sms-ink); }
.wa-bubble, .sms-bubble {
	margin: 0 0 .6rem; padding: .7rem .95rem; border-radius: 14px; max-width: 30ch;
}
.wa-bubble { background: var(--wa-tint); border-start-end-radius: 4px; }
.sms-bubble { background: var(--sms-tint); border-start-end-radius: 4px; margin: 0; }
.aud-badge {
	display: inline-block; background: var(--wa-tint); color: var(--wa-ink);
	font-weight: 700; font-size: .88rem; border-radius: 99px; padding: .2rem .75rem;
}
.cta-block { text-align: center; margin-block-start: 2.4rem; }

/* ---------- tabs (pill-style, colored so they read as clickable) ---------- */
.tabs { margin-block-start: 1.8rem; }
.tablist-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.tab {
	font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--brand-primary-dark);
	background: var(--surface); border: 1.5px solid var(--line); border-radius: 99px; cursor: pointer;
	padding: .55rem 1.35rem; min-height: 48px; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tab:hover { border-color: var(--brand-primary); background: var(--email-tint); }
.tab[aria-selected='true'] {
	background: var(--brand-primary); border-color: var(--brand-primary); color: #fff;
	box-shadow: 0 6px 18px rgba(254, 95, 1, .28);
}
.tabpanel { padding-block-start: 1.5rem; }
@media (max-width: 479px) { .tablist-row { flex-direction: column; align-items: stretch; } .tab { text-align: start; } }

/* ---------- signal cloud ---------- */
.signal-cloud { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; }
.signal-cloud li {
	display: inline-flex; align-items: center; gap: .5rem;
	background: var(--surface); border: 1px solid var(--line); border-radius: 99px;
	padding: .5rem 1rem; font-weight: 600; font-size: .95rem;
	box-shadow: 0 2px 10px rgba(15, 17, 21, .04);
}
.signal-cloud li::before { content: ''; width: .55em; height: .55em; border-radius: 50%; background: var(--brand-primary); }
@media (prefers-reduced-motion: no-preference) {
	.signal-cloud li::before { animation: sig-pulse 2.4s ease-in-out infinite; }
	.signal-cloud li:nth-child(2n)::before { animation-delay: .6s; }
	.signal-cloud li:nth-child(3n)::before { animation-delay: 1.1s; }
	@keyframes sig-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(254, 95, 1, .35); } 50% { box-shadow: 0 0 0 5px rgba(254, 95, 1, 0); } }
}

/* ---------- two-column feature rows ---------- */
.row2 { display: grid; gap: 2rem; align-items: center; }
.row2-sub { font-size: clamp(1.25rem, 1.2vw + 1rem, 1.6rem); font-weight: 800; }
.new-flag {
	display: inline-block; font-size: .62em; vertical-align: .18em;
	background: var(--email-tint); color: var(--email-ink);
	border-radius: 99px; padding: .14em .7em; margin-inline-end: .35rem;
}
.row2-shot img { margin-inline: auto; }
@media (min-width: 900px) {
	.row2 { grid-template-columns: 1.1fr .9fr; }
	.row2-flip { grid-template-columns: .9fr 1.1fr; }
	.row2-flip .row2-copy { order: 2; }
	.row2-flip .row2-shot { order: 1; }
	.row2-shot img { width: min(100%, 470px); }
}
.shot-photo img { object-fit: cover; aspect-ratio: 3 / 2; }
.h2-service { max-width: none; }

/* ---------- survey mock (forms section) ---------- */
.survey-mock { margin: 0; }
.sv-card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card);
	box-shadow: 0 18px 48px rgba(15, 17, 21, .16); padding: 1.2rem 1.2rem 1.5rem;
	max-width: 370px; margin-inline: auto; display: grid; gap: .85rem; justify-items: center; text-align: center;
}
.sv-title { font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; margin: 0; padding-block-end: .4rem; position: relative; }
.sv-title::after { content: ''; position: absolute; inset-inline: 15%; bottom: 0; height: 3px; border-radius: 2px; background: var(--brand-primary); }
.sv-photo { border-radius: 12px; border: 1px solid var(--line); }
.sv-q { font-weight: 600; margin: 0; }
.sv-scale { display: flex; gap: .7rem; direction: ltr; }
.sv-face { font-size: 1.7rem; line-height: 1; filter: grayscale(.6); opacity: .75; border-radius: 50%; }
.sv-face.is-picked { filter: none; opacity: 1; transform: scale(1.12); box-shadow: 0 0 0 3px rgba(254, 95, 1, .3); }
.sv-btn {
	display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: .95rem;
	background: var(--brand-primary); color: #fff; border-radius: 9px; padding: .45rem 1.3rem;
}

/* ---------- AI generator mock (animated: prompt → generated newsletter) ---------- */
.ai-mock { margin: 0; }
.ai-card {
	position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card);
	box-shadow: 0 18px 48px rgba(15, 17, 21, .16); padding: 1.1rem;
	max-width: 350px; margin-inline: auto; display: grid; gap: .8rem;
}
.ai-head { display: flex; align-items: center; gap: .6rem; }
.ai-badge {
	font-family: var(--font-display); font-weight: 800; font-size: .8rem; color: #fff;
	background: linear-gradient(135deg, var(--brand-primary), #ff9d5c); border-radius: 99px; padding: .2rem .75rem;
}
.ai-name { font-family: var(--font-display); font-weight: 700; font-size: .98rem; }
.ai-prompt {
	display: flex; align-items: center; min-height: 2.6rem; font-size: .9rem;
	background: var(--surface-alt); border: 1.5px solid var(--line); border-radius: 10px; padding: .55rem .8rem;
}
.ai-type { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 260px; }
.ai-caret { width: 2px; height: 1.15em; background: var(--brand-primary); margin-inline-start: 2px; flex: none; opacity: 0; }
.ai-go {
	justify-self: start; font-family: var(--font-display); font-weight: 700; font-size: .92rem;
	background: var(--brand-primary); color: #fff; border-radius: 9px; padding: .4rem 1.1rem;
}
.ai-out { position: relative; padding-block-start: .9rem; }
.ai-progress {
	position: absolute; top: 0; inset-inline: 0; height: 5px; border-radius: 3px;
	background: linear-gradient(90deg, var(--brand-primary), #ffb38a);
	transform: scaleX(1); transform-origin: 100% 50%; opacity: 0;
}
.ai-nl { display: grid; gap: .45rem; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; padding-block-end: .85rem; }
.ai-nl-head { background: var(--brand-primary); color: #fff; text-align: center; padding: .3rem; font-family: var(--font-display); font-size: .78rem; }
.ai-nl-img { display: block; height: 62px; margin: 0 .85rem; border-radius: 8px; background: linear-gradient(135deg, #ffe1cf, var(--brand-primary) 55%, #ffc79e); }
.ai-nl-title { font-family: var(--font-display); font-weight: 700; font-size: .92rem; margin-inline: .85rem; }
.ai-nl-line { height: 7px; border-radius: 4px; background: var(--surface-alt); margin-inline: .85rem; }
.ai-nl-line.short { width: 55%; }
.ai-nl-cta {
	justify-self: start; margin-inline: .85rem; font-family: var(--font-display); font-weight: 700; font-size: .85rem;
	background: var(--brand-primary); color: #fff; border-radius: 8px; padding: .3rem .85rem;
}
.ai-spark { position: absolute; font-size: 1.25rem; opacity: 0; pointer-events: none; }
.ai-spark.s1 { top: 42%; inset-inline-start: -10px; }
.ai-spark.s2 { top: 58%; inset-inline-end: -10px; }
.ai-spark.s3 { bottom: -6px; inset-inline-start: 18%; }

@media (prefers-reduced-motion: no-preference) {
	/* one 9s loop: type (0-28%) → press (32%) → progress (36-50%) → newsletter pops (52-58%) → hold.
	   every 100% frame equals the finished state, so reduced-motion / first-frame fallback shows the result. */
	.ai-type { animation: ai-typing 9s steps(34) infinite; }
	.ai-caret { animation: ai-caret 9s linear infinite; }
	.ai-go { animation: ai-press 9s ease infinite; }
	.ai-progress { animation: ai-load 9s ease infinite; }
	.ai-nl { animation: ai-reveal 9s cubic-bezier(.22, .61, .36, 1) infinite; }
	.ai-spark.s1 { animation: ai-spark 9s ease infinite; }
	.ai-spark.s2 { animation: ai-spark 9s ease .35s infinite; }
	.ai-spark.s3 { animation: ai-spark 9s ease .7s infinite; }
	@keyframes ai-typing { 0% { max-width: 0; } 28% { max-width: 260px; } 100% { max-width: 260px; } }
	@keyframes ai-caret { 0%, 3%, 6%, 9%, 12%, 15%, 18%, 21%, 24%, 27%, 30% { opacity: 1; } 1.5%, 4.5%, 7.5%, 10.5%, 13.5%, 16.5%, 19.5%, 22.5%, 25.5%, 28.5% { opacity: 0; } 33%, 100% { opacity: 0; } }
	@keyframes ai-press { 0%, 30%, 36%, 100% { transform: none; } 33% { transform: scale(.92); } }
	@keyframes ai-load { 0%, 34% { opacity: 0; transform: scaleX(0); } 37% { opacity: 1; } 50% { opacity: 1; transform: scaleX(1); } 56%, 100% { opacity: 0; transform: scaleX(1); } }
	@keyframes ai-reveal { 0%, 50% { opacity: 0; transform: translateY(16px) scale(.95); } 58%, 100% { opacity: 1; transform: none; } }
	@keyframes ai-spark { 0%, 53% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.2) rotate(16deg); } 70%, 100% { opacity: 0; transform: scale(.3) rotate(28deg); } }
}

/* ---------- why grid ---------- */
.why-grid { list-style: none; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
@media (min-width: 1100px) { .why-grid { grid-template-columns: repeat(5, 1fr); gap: .9rem; } }
.why-card .ic { color: var(--brand-primary); margin-block-end: .6rem; }
.why-card p { color: var(--ink-soft); margin: 0; }
.why-cap { font-size: .92rem; margin-block-start: .6rem !important; font-style: italic; }

/* ---------- social proof (flag-off by default) ---------- */
.sec-proof[hidden] { display: none; }
.logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.6rem 2.4rem; }
.logo-strip img { width: auto; max-height: 46px; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.logo-strip img:hover { filter: none; opacity: 1; }
.logo-names { text-align: center; color: var(--ink-soft); font-size: .95rem; margin-block: 1rem 2rem; }
.quotes { display: grid; gap: 1.1rem; margin-block-end: 1.1rem; }
@media (min-width: 720px) { .quotes { grid-template-columns: 1fr 1fr; } }
.quote-card blockquote { margin: 0 0 .8rem; font-size: 1.08rem; }
.quote-card figcaption { color: var(--ink-soft); font-size: .95rem; }
.case { text-align: center; }
.case-stats { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; margin-block-start: 1.2rem; }
.stat-num { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; color: var(--brand-primary); }
.stat-label { color: var(--ink-soft); }
.is-placeholder { border-style: dashed; border-color: #c9cedb; box-shadow: none; color: var(--ink-soft); }
.cta-final-band { padding-block: clamp(1.5rem, 3vw, 2.5rem); }

/* ---------- demo / form ---------- */
.sec-demo { background: var(--ink); }
.demo-card {
	background: var(--surface); border-radius: 24px; padding: clamp(1.4rem, 4vw, 3rem);
	max-width: 860px; margin-inline: auto; box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}
/* Single opt-in line (round 5: the eight challenge pills were replaced by one checkbox).
   One row at every width, so unlike the old pill cloud it needs no mobile override. */
.want-more { display: flex; align-items: center; gap: .6rem; margin-block-start: 1.6rem; }
.want-more input {
	inline-size: 22px; block-size: 22px; flex: 0 0 auto; margin: 0;
	accent-color: var(--brand-primary); cursor: pointer;
}
/* padding, not just line-height: it is what lifts the label's own hit area to the 44px guideline */
.want-more label { font-weight: 600; cursor: pointer; padding-block: .65rem; line-height: 1.5; }
.want-more input:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; }

.fields { display: grid; gap: 1rem; margin-block-start: 1.6rem; }
@media (min-width: 720px) {
	.fields { grid-template-columns: 1fr 1fr; }
	.field-wide { grid-column: 1 / -1; }
}
.field label { display: block; font-weight: 600; margin-block-end: .35rem; }
.field input, .field textarea {
	width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
	border: 1.5px solid #d5d9e4; border-radius: var(--radius-btn);
	padding: .7rem .9rem; min-height: 48px; background: #fff;
}
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(254, 95, 1, .15); }
.field input.is-invalid, .field textarea.is-invalid { border-color: var(--err); }
.err { color: var(--err); font-size: .9rem; min-height: 1.3em; margin: .25rem 0 0; }
.err::before { content: '⚠ '; }
.err:empty::before { content: ''; }

.hp-wrap { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.submit-row { margin-block-start: 1.4rem; }
.privacy-line { font-size: .9rem; color: var(--ink-soft); margin-block-start: .8rem; text-align: center; }
.form-micro { text-align: center; color: var(--ink-soft); font-size: .95rem; margin-block-start: 1rem; }
.form-status { text-align: center; font-weight: 600; min-height: 1.5em; margin: .5rem 0 0; }
.form-status.is-err { color: var(--err); }
.form-success { text-align: center; padding-block: 2rem; }
/* display:block so the auto margins actually centre these — as inline-level boxes the logo and the
   check icon shared one line box and sat side by side instead of stacking. */
.form-success .ic { display: block; color: var(--wa-ink); width: 3rem; height: 3rem; margin-inline: auto; margin-block-end: 1rem; }
.success-brand { display: block; width: min(230px, 70%); margin-inline: auto; margin-block-end: 1.6rem; }
.success-brand img { width: 100%; height: auto; }
.form-success h2 { margin-block-end: .6rem; }
.form-success p { color: var(--ink-soft); font-size: clamp(1.05rem, .9vw + .85rem, 1.2rem); max-width: 46ch; margin-inline: auto; }
.sec-demo h2 { max-width: none; }

/* Belt-and-braces for third-party markup the PHP filters can't reach (cached HTML, plugin updates):
   an unstyled switcher here costs 18px of horizontal overflow on mobile. */
.trp-floating-switcher, .trp-language-switcher.trp-floating-switcher { display: none !important; }

/* ---------- mobile galleries ----------
   The heavy card lists scroll sideways instead of down: the six channel cards alone ran 1751px
   (two full screens) stacked. A scroll-snap track keeps every card — and every approved word —
   while collapsing the section to about one screen. Native CSS only; the dots come from JS and
   are purely additive, so with JS off this stays a plain swipeable strip. */
.gallery-dots { display: none; } /* JS builds these; only the mobile track shows them */
@media (max-width: 719px) {
	.gallery {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 85%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		padding-block-end: .4rem;
		scrollbar-width: none;
	}
	.gallery::-webkit-scrollbar { display: none; }
	.gallery > * { scroll-snap-align: start; }
	/* grid stretches the row, so every card matches the tallest — the strip stays level */
	.gallery > .card { height: 100%; }
	/* the track is a scroll container: give the focus ring somewhere to sit */
	.gallery:focus-visible { outline-offset: 6px; }

	.gallery-dots { display: flex; justify-content: center; gap: .3rem; margin-block-start: .5rem; padding: 0; list-style: none; }
	.gallery-dot {
		width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
		display: inline-flex; align-items: center; justify-content: center;
	}
	.gallery-dot::before {
		content: ''; width: 8px; height: 8px; border-radius: 50%;
		background: #c9cedb; transition: background .2s ease, transform .2s ease;
	}
	.gallery-dot.is-on::before { background: var(--brand-primary); transform: scale(1.4); }
}

/* ---------- third-party: Termly cookie banner ----------
   Termly's own mobile layout is a 341px card — ~40% of a 390x844 screen — parked on top of the
   hero CTA and the sticky CTA, and it follows the reader down the whole page. Shrink it to a slim
   bottom bar. Nothing in the consent flow is removed: all three buttons stay, and the notice text
   scrolls inside a shorter box rather than being clipped. Termly's class hashes change between
   plugin builds, so match the stable prefix rather than the full generated name. */
@media (max-width: 719px) {
	[class*='termly-styles-root'] {
		inset-block: auto 8px !important;
		inset-inline: 8px !important;
		width: auto !important;
		max-width: none !important;
		padding: 10px 12px 0 !important;
		border-radius: 12px !important;
	}
	[class*='termly-styles-logo'] { display: none !important; }
	[class*='termly-styles-message'] {
		font-size: 11px !important;
		line-height: 1.35 !important;
		max-height: 4.2em !important;
		overflow-y: auto !important;
	}
	[class*='termly-styles-buttons'] {
		display: flex !important;
		flex-direction: row !important;
		gap: 6px !important;
		padding-block-end: 10px !important;
	}
	[class*='termly-styles-buttons'] > * { flex: 1 1 0 !important; min-width: 0 !important; }
	[class*='termly-styles-module-root'] {
		font-size: 11px !important;
		min-height: 36px !important;
		padding: 4px 6px !important;
	}
}

/* ---------- footer ----------
   The page's own .site-footer is gone; the shared .pf footer is rendered on wp_footer by the
   publicators-footer mu-plugin, carrying its own inline CSS. Nothing to style here. */

/* ---------- sticky mobile CTA ---------- */
.sticky-cta {
	position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
	padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
	border-block-start: 1px solid var(--line);
	transform: translateY(110%); transition: transform .25s ease;
}
.sticky-cta.is-on { transform: translateY(0); }
@media (min-width: 720px) { .sticky-cta { display: none; } }
body.has-sticky { scroll-padding-bottom: 90px; }

/* ---------- motion: scroll-reveal entrances + micro-interactions ----------
   .rv is added by JS only (IntersectionObserver + no reduced-motion), so content
   is never hidden when JS is unavailable. html.rv-on is set by the inline head
   script under the same conditions and gates the pure-CSS hero animations. */
@media (prefers-reduced-motion: no-preference) {
	.rv {
		opacity: 0; transform: translateY(26px);
		transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.22, .61, .36, 1);
		transition-delay: var(--rvd, 0ms);
	}
	.rv-d1 { --rvd: 240ms; }
	/* Directional slides mirror the two-column layout, which only exists from 900px up. Below that
	   the columns stack, so a sideways entrance means nothing — and a 36px horizontal translate
	   counts toward scrollable overflow, which on a narrow RTL viewport shifts the whole document
	   sideways and clips the start of every line. Keep the slide wide-only; narrow gets the fade-up.
	   :where() keeps these at .rv.is-in's specificity so the "transform: none" end state still wins. */
	@media (min-width: 900px) {
		.rv.rv-side { transform: translateX(-36px); }              /* visual column (left in RTL) enters from the left */
		.row2-copy.rv { transform: translateX(36px); }             /* copy column (right in RTL) enters from the right */
		:where(.row2-flip) .row2-copy.rv { transform: translateX(-36px); } /* flipped sections mirror both directions */
		:where(.row2-flip) .row2-shot.rv { transform: translateX(36px); }
	}
	.rv.rv-pop { transform: translateY(10px) scale(.9); }
	.rv.is-in { opacity: 1; transform: none; }

	/* hero: load-in cascade — pure CSS, plays from first paint */
	html.rv-on .hero-copy > * { animation: rv-rise .7s cubic-bezier(.22, .61, .36, 1) both; }
	html.rv-on .hero-copy > :nth-child(2) { animation-delay: .09s; }
	html.rv-on .hero-copy > :nth-child(3) { animation-delay: .18s; }
	html.rv-on .hero-copy > :nth-child(4) { animation-delay: .27s; }
	html.rv-on .hero-copy > :nth-child(5) { animation-delay: .36s; }
	html.rv-on .hero-copy > :nth-child(6) { animation-delay: .45s; }
	html.rv-on .hero-copy > :nth-child(7) { animation-delay: .54s; }
	html.rv-on .hero-copy > :nth-child(8) { animation-delay: .63s; }

	/* hero chips: gentle float */
	html.rv-on .hero-visual .chip { animation: chip-float 5.5s ease-in-out infinite alternate; }
	html.rv-on .hero-visual .chip-sms { animation-delay: 1.4s; }
	html.rv-on .hero-visual .chip-whatsapp { animation-delay: 2.6s; }

	/* micro-interactions */
	.card { transition: transform .25s ease, box-shadow .25s ease; }
	.card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(15, 17, 21, .12); }

	@keyframes rv-rise { from { opacity: 0; transform: translateY(24px); } }
	@keyframes chip-float { from { transform: translateY(4px); } to { transform: translateY(-7px); } }
}

/* ---------- admin bar ---------- */
body.admin-bar .skip-link { top: 32px; }

/* ---------- reduced motion: global stop ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}